:root {
  --rs-ink: #101828;
  --rs-muted: #667085;
  --rs-line: #e4e7ec;
  --rs-accent: #f97316;
  --rs-accent-deep: #ea580c;
  --rs-accent-soft: #fff4eb;
  --rs-dark: #0d1726;
  --rs-dark-2: #182230;
  --rs-shadow: 0 14px 40px rgba(15,23,42,.09);
  --rs-shadow-lg: 0 24px 60px rgba(15,23,42,.14);
}

body { background: linear-gradient(180deg,#f3f6f9 0,#edf1f5 100%); color: var(--rs-ink); }
.sidebar { background: radial-gradient(circle at 20% 0,rgba(249,115,22,.11),transparent 32%),linear-gradient(180deg,#0a1220 0,#101a2b 70%,#0c1524 100%); box-shadow: 12px 0 34px rgba(15,23,42,.08); }
.brand-polished { padding-bottom: 27px; border-bottom: 1px solid rgba(255,255,255,.07); margin-bottom: 18px; }
.nav { gap: 6px; }
.nav a { display: flex; align-items: center; gap: 10px; border: 1px solid transparent; transition: .18s ease; font-size: 13px; }
.nav a:hover { transform: translateX(2px); background: rgba(255,255,255,.055); }
.nav a.active { background: linear-gradient(90deg,rgba(249,115,22,.17),rgba(255,255,255,.04)); border-color: rgba(249,115,22,.18); box-shadow: inset 3px 0 var(--rs-accent); }
.nav-icon { width: 22px; text-align: center; color: #8fa1ba; font-weight: 900; font-size: 15px; }
.nav a.active .nav-icon { color: #fdba74; }
.sidebar-foot { color: #9aa8bb; display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; font-size: 11px; }
.sidebar-foot small { color: #627188; font-size: 10px; }
.privacy-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 0 4px rgba(34,197,94,.1); margin-top: 3px; }
.topbar { height: 76px; background: rgba(255,255,255,.93); backdrop-filter: blur(14px); border-color: rgba(208,213,221,.78); padding-inline: 30px; }
.topbar-title { display: grid; gap: 1px; }
.topbar h1 { font-size: 18px; letter-spacing: -.02em; }
.topbar-kicker { font-size: 9px; font-weight: 900; letter-spacing: .15em; color: #98a2b3; }
.local-pill { display: inline-flex; align-items: center; gap: 7px; background: #f7f9fb; color: #475467; border: 1px solid #e6e9ee; }
.local-pill .privacy-dot { margin: 0; width: 6px; height: 6px; }
.content { padding: 30px; }
.card { border-color: #e5e9ee; box-shadow: 0 3px 12px rgba(15,23,42,.055); }
.btn { border-radius: 9px; transition: .16s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg,var(--rs-accent),var(--rs-accent-deep)); box-shadow: 0 8px 18px rgba(249,115,22,.17); }
.btn-dark { background: var(--rs-dark-2); }
.btn:focus-visible,.nav a:focus-visible,.icon-btn:focus-visible { outline: 3px solid rgba(249,115,22,.24); outline-offset: 2px; }

.dashboard-hero { min-height: 330px; border-radius: 24px; padding: 40px 44px; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(320px,.85fr); align-items: center; gap: 30px; background: radial-gradient(circle at 75% 15%,rgba(249,115,22,.20),transparent 23%),linear-gradient(135deg,#0d1726 0,#121f31 55%,#17263a 100%); box-shadow: 0 24px 55px rgba(15,23,42,.17); overflow: hidden; }
.dashboard-hero > :not(.hero-visual) { position: relative; z-index: 2; }
.dashboard-hero h2 { font-size: clamp(36px,4vw,54px); line-height: 1.03; letter-spacing: -.045em; margin: 10px 0 13px; max-width: 760px; }
.dashboard-hero h2 em { color: #fdba74; font-style: normal; }
.dashboard-hero p { max-width: 670px; color: #bcc7d6; font-size: 15px; line-height: 1.65; }
.hero-eyebrow { display: flex; align-items: center; gap: 8px; color: #fb923c; font-size: 10px; letter-spacing: .14em; }
.hero-line { width: 18px; height: 2px; background: var(--rs-accent); display: inline-block; }
.premium-hero-actions { margin-top: 24px; }
.premium-hero-actions .btn { padding: 12px 17px; font-size: 13px; }
.premium-hero-actions .btn-outline { background: rgba(255,255,255,.075); color: #fff; border-color: rgba(255,255,255,.15); }
.hero-visual { min-height: 245px; position: relative; display: grid; place-items: center; z-index: 2; }
.roof-scene { width: 330px; height: 215px; position: relative; filter: drop-shadow(0 30px 24px rgba(0,0,0,.19)); }
.roof-plane { position: absolute; background: linear-gradient(145deg,#314155,#1e2b3d); border: 1px solid rgba(255,255,255,.09); }
.roof-plane-back { width: 190px; height: 126px; left: 48px; top: 44px; transform: skewY(-26deg) rotate(-1deg); border-radius: 8px 5px 10px 8px; }
.roof-plane-front { width: 220px; height: 130px; right: 12px; top: 62px; transform: skewY(24deg) rotate(1deg); background: linear-gradient(145deg,#45576d,#29384c); border-radius: 6px 8px 10px; }
.roof-plane-front:after { content: ""; position: absolute; inset: 12px; opacity: .16; background: repeating-linear-gradient(0deg,transparent 0 13px,#fff 14px 15px); }
.roof-sun { width: 78px; height: 78px; border-radius: 50%; background: radial-gradient(circle,#fdba74,#f97316); position: absolute; top: 4px; right: 26px; opacity: .2; }
.roof-window { position: absolute; width: 74px; height: 58px; right: 85px; top: 105px; background: rgba(10,18,32,.72); border: 2px solid rgba(255,255,255,.22); transform: skewY(24deg); display: grid; place-items: center; z-index: 4; }
.roof-window span { transform: skewY(-24deg); color: #fdba74; font-weight: 950; letter-spacing: .08em; }
.measurement-tag { position: absolute; z-index: 6; background: rgba(255,255,255,.95); color: #182230; font-size: 9px; font-weight: 900; letter-spacing: .08em; padding: 7px 10px; border-radius: 7px; box-shadow: 0 10px 25px rgba(0,0,0,.18); }
.tag-one { right: 2px; top: 50px; }
.tag-two { left: 4px; bottom: 16px; }
.workflow-strip { background: #fff; border: 1px solid #e6e9ee; border-radius: 15px; margin: -12px 24px 22px; position: relative; z-index: 5; min-height: 82px; display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; align-items: center; padding: 10px 20px; box-shadow: var(--rs-shadow); }
.workflow-strip > div { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 8px 18px; }
.workflow-number { grid-row: 1/3; width: 30px; height: 30px; border-radius: 8px; background: var(--rs-accent-soft); color: var(--rs-accent-deep); display: grid; place-items: center; font-size: 10px; font-weight: 950; }
.workflow-strip strong { font-size: 13px; }
.workflow-strip small { color: var(--rs-muted); margin-top: 1px; font-size: 11px; }
.workflow-strip i { height: 32px; width: 1px; background: #eaecf0; }
.metrics { margin: 0 0 20px; gap: 16px; }
.metric { min-height: 105px; display: flex; align-items: center; gap: 14px; padding: 19px; transition: .18s ease; }
.metric:hover { transform: translateY(-2px); box-shadow: var(--rs-shadow); }
.metric-icon { width: 42px; height: 42px; border-radius: 12px; background: var(--rs-accent-soft); border: 1px solid #fed7aa; color: var(--rs-accent-deep); display: grid; place-items: center; font-weight: 900; flex: 0 0 auto; }
.metric-copy { min-width: 0; }
.metric-copy > span { font-size: 11px; font-weight: 760; }
.metric-copy > strong { font-size: 25px; margin-top: 2px; letter-spacing: -.03em; }
.metric-detail { display: block; color: #98a2b3; font-size: 10px; margin-top: 3px; }
.pipeline-panel { overflow: hidden; }
.panel-head p { margin: 5px 0 0; color: var(--rs-muted); font-size: 12px; }
.premium-empty { min-height: 230px; display: grid; place-items: center; align-content: center; gap: 7px; }
.empty-mark { width: 54px; height: 54px; border-radius: 16px; background: linear-gradient(145deg,#fff7ed,#ffedd5); border: 1px solid #fed7aa; display: grid; place-items: center; color: var(--rs-accent-deep); font-weight: 950; margin-bottom: 5px; }
.table-wrap th { background: #fbfcfd; font-size: 10px; color: #98a2b3; }
.table-wrap tbody tr { transition: background .14s ease; }
.table-wrap tbody tr:hover { background: #fbfcfd; }

.editor-commandbar { position: sticky; top: 88px; z-index: 15; margin-bottom: 14px; min-height: 62px; border: 1px solid #dfe4ea; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-radius: 13px; box-shadow: 0 10px 30px rgba(15,23,42,.08); padding: 9px 11px 9px 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.editor-command-meta { display: flex; gap: 13px; align-items: center; }
.editor-command-meta > div { display: grid; gap: 1px; }
.editor-command-meta strong { font-size: 13px; }
.editor-command-meta span { color: var(--rs-muted); font-size: 10px; }
.back-link { text-decoration: none; color: #475467; font-size: 11px; font-weight: 800; border-right: 1px solid var(--rs-line); padding-right: 13px; }
.editor-command-actions { display: flex; gap: 8px; }
.print-primary { min-width: 145px; }
.editor-shell { grid-template-columns: minmax(0,1fr) 340px; }
.proposal-paper { border-radius: 12px; box-shadow: var(--rs-shadow-lg); padding: 44px 46px 38px; position: relative; overflow: hidden; }
.document-accent { position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg,var(--rs-accent),#fb923c 38%,#182230 38%); }
.proposal-head { border-bottom: 1px solid #dfe3e8; padding-bottom: 24px; }
.proposal-title strong { font-size: 29px; letter-spacing: .04em; }
.proposal-title small { display: inline-block; margin-top: 8px; padding: 4px 8px; border-radius: 999px; background: #f2f4f7; color: #475467; font-size: 9px; }
.proposal-grid { margin-block: 28px; }
.proposal-line-items { margin-top: 7px; }
.proposal-line-items .line-row { border-color: #eef0f3; }
.proposal-line-items .line-row:not(.head) .input { border-color: transparent; background: transparent; padding-left: 6px; }
.proposal-line-items .line-row:not(.head):hover .input { border-color: #e4e7ec; background: #fbfcfd; }
.proposal-totals { background: #f9fafb; border: 1px solid #e7eaee; border-radius: 10px; padding: 10px 15px; }
.proposal-totals .grand { font-size: 19px; }
.toolbox { position: sticky; top: 166px; max-height: calc(100vh - 184px); overflow-y: auto; padding-right: 3px; scrollbar-width: thin; gap: 13px; }
.tool-card { padding: 15px !important; box-shadow: 0 3px 12px rgba(15,23,42,.055); }
.tool-card h4 { margin: 3px 0 12px; font-size: 14px; }
.tool-card-label { display: block; color: #98a2b3; font-size: 8px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.mode-card .mode-tabs { background: #eef2f6; border-radius: 10px; padding: 4px; }
.mode-card .mode-tabs button { color: #667085; font-size: 10px; border-radius: 8px; }
.mode-card .mode-tabs button.active { color: #182230; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.09); }
.photo-tool .photo-uploader { padding: 12px; background: #f9fbfc; border-color: #c7d0dc; }
.photo-upload-button { cursor: pointer; display: grid !important; justify-items: center; gap: 2px; background: transparent !important; border: 0 !important; color: #344054 !important; }
.camera-icon { width: 34px; height: 34px; border-radius: 10px; background: var(--rs-accent-soft); color: var(--rs-accent-deep); display: grid; place-items: center; font-size: 20px; margin-bottom: 3px; }
.photo-upload-button strong { font-size: 11px; }
.photo-upload-button small { color: #98a2b3; font-size: 8px; }
.photo-card { border-color: #e4e7ec; border-radius: 9px; transition: .15s ease; }
.photo-card.is-included { border-color: #fdba74; box-shadow: 0 0 0 2px #fff7ed; }
.photo-media { height: 108px; position: relative; background: #f2f4f7; }
.photo-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-privacy-badge { position: absolute; left: 6px; top: 6px; padding: 4px 6px; border-radius: 999px; font-size: 7px; font-weight: 950; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.photo-privacy-badge.private { background: rgba(17,24,39,.88); color: #fff; }
.photo-privacy-badge.proposal { background: #fff7ed; color: #9a3412; }
.proposal-toggle { color: #475467; font-size: 9px !important; line-height: 1.35; }

.utility-card { border-color: #e5e9ee; box-shadow: 0 3px 12px rgba(15,23,42,.055); }
.utility-grid { grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); }
.accent-utility { background: radial-gradient(circle at 90% 5%,rgba(249,115,22,.16),transparent 24%),#fff; min-height: 290px; }
.customer-row { display: grid; grid-template-columns: 38px minmax(0,1fr) auto; }
.customer-avatar { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--rs-accent-soft); color: var(--rs-accent-deep); font-weight: 950; flex: 0 0 auto; }
.pricebook-card { max-width: 1080px; margin: auto; }
.premium-notice { background: #fff8f1; border-color: #fed7aa; color: #9a3412; }
.polished-price-row { display: grid; grid-template-columns: minmax(0,1fr) 90px 140px 34px; gap: 9px; align-items: center; }
.settings-intro { min-height: 118px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 24px 27px; margin-bottom: 18px; background: #182230; color: #fff; border-radius: 18px; box-shadow: var(--rs-shadow); position: relative; overflow: hidden; }
.settings-intro:after { content: ""; position: absolute; width: 250px; height: 250px; border: 45px solid rgba(249,115,22,.09); border-radius: 50%; right: -85px; top: -95px; }
.settings-intro h2 { margin: 4px 0; font-size: 25px; letter-spacing: -.03em; }
.settings-intro p { color: #b9c4d3; margin: 0; font-size: 11px; }
.settings-brand-preview { position: relative; z-index: 2; min-width: 235px; display: flex; align-items: center; gap: 11px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 11px; }
.settings-rs { width: 42px; height: 42px; border-radius: 10px; background: linear-gradient(145deg,var(--rs-accent),var(--rs-accent-deep)); display: grid; place-items: center; font-size: 12px; font-weight: 950; }
.settings-brand-preview strong { display: block; font-size: 11px; }
.settings-brand-preview small { color: #93a4ba; font-size: 8px; }
.utility-section-number { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--rs-accent-soft); color: var(--rs-accent-deep); font-size: 9px; font-weight: 950; margin-bottom: 12px; }
.toast { background: #182230; border-radius: 9px; box-shadow: var(--rs-shadow-lg); font-size: 11px; font-weight: 800; }

@media (max-width: 1050px) {
  .dashboard-hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-visual { display: none; }
  .workflow-strip { margin-left: 12px; margin-right: 12px; }
  .editor-shell { grid-template-columns: 1fr; }
  .toolbox { position: static; max-height: none; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; }
  .toolbox > .photo-tool { grid-column: 1/-1; }
  .utility-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .topbar { height: 62px; padding-inline: 14px; }
  .topbar-kicker { display: none; }
  .content { padding: 12px 12px 78px; }
  .dashboard-hero { padding: 26px 22px; border-radius: 17px; }
  .dashboard-hero h2 { font-size: 33px; }
  .dashboard-hero p { font-size: 13px; }
  .premium-hero-actions .btn { width: 100%; }
  .workflow-strip { margin: 10px 0 14px; grid-template-columns: 1fr; padding: 8px; }
  .workflow-strip i { display: none; }
  .workflow-strip > div { padding: 6px 8px; }
  .metric { min-height: 94px; padding: 13px 11px; gap: 9px; }
  .metric-icon { width: 34px; height: 34px; border-radius: 10px; }
  .metric-copy > strong { font-size: 18px; }
  .editor-commandbar { top: 70px; border-radius: 11px; padding: 8px; }
  .editor-command-meta > div { display: none; }
  .editor-command-actions { margin-left: auto; }
  .editor-command-actions .btn { padding: 9px 10px; font-size: 10px; }
  .print-primary { min-width: auto; }
  .proposal-paper { padding: 28px 16px 25px; min-height: 0; border-radius: 9px; }
  .toolbox { grid-template-columns: 1fr; }
  .toolbox > * { grid-column: 1 !important; }
  .settings-intro { padding: 20px; }
  .settings-brand-preview { display: none; }
  .polished-price-row { grid-template-columns: minmax(0,1fr) 65px 100px 34px; }
  .customer-row { grid-template-columns: 35px minmax(0,1fr); }
  .customer-row .btn { grid-column: 2; justify-self: start; }
  .mobile-nav { background: rgba(12,21,36,.97); backdrop-filter: blur(14px); border-top: 1px solid rgba(255,255,255,.07); padding-bottom: max(8px,env(safe-area-inset-bottom)); }
  .mobile-nav a { display: grid; justify-items: center; gap: 2px; color: #aebccc; font-size: 15px; }
  .mobile-nav a span { font-size: 8px; }
  .mobile-nav .mobile-new { color: #fff; }
}

@media (max-width: 430px) {
  .editor-command-actions #saveEstimateTop { display: none; }
  .photo-grid { grid-template-columns: 1fr; }
}

@media print {
  .editor-commandbar { display: none !important; }
  .proposal-paper { box-shadow: none; border: 0; border-radius: 0; padding: 0; overflow: visible; }
  .document-accent { height: 4px; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* Usability + mobile field pass */
.save-state { display: inline-flex; align-items: center; gap: 6px; color: #667085; font-size: 9px; font-weight: 800; white-space: nowrap; }
.save-state::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.1); }
.line-cell { min-width: 0; }
.proposal-line-items [data-mobile-label]::before { content: none; }
.mobile-nav a { min-height: 52px; min-width: 58px; border-radius: 10px; align-content: center; }
.mobile-nav a.active { color: #fff; background: rgba(249,115,22,.14); }

@media (max-width: 720px) {
  .editor-commandbar { top: 66px; gap: 8px; }
  .editor-command-meta { min-width: 0; }
  .editor-command-meta .save-state { display: inline-flex; }
  .editor-command-actions { flex: 0 0 auto; }
  .editor-command-actions .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  #saveEstimateTop { display: inline-flex; }
  .print-primary { min-width: 116px; }

  .proposal-line-items .line-row.head { display: none; }
  .proposal-line-items .line-row:not(.head) {
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) 44px;
    grid-template-areas:
      "description description remove"
      "qty unit remove"
      "rate amount remove";
    gap: 10px 8px;
    margin: 0 0 12px;
    padding: 13px;
    border: 1px solid #e5e9ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15,23,42,.04);
  }
  .proposal-line-items [data-mobile-label] { display: grid; gap: 4px; }
  .proposal-line-items [data-mobile-label]::before { content: attr(data-mobile-label); color: #98a2b3; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .proposal-line-items .line-description { grid-area: description; }
  .proposal-line-items .line-qty { grid-area: qty; }
  .proposal-line-items .line-unit { grid-area: unit; }
  .proposal-line-items .line-rate { grid-area: rate; }
  .proposal-line-items .line-amount { grid-area: amount; }
  .proposal-line-items .unit { display: block; }
  .proposal-line-items .line-total { display: block; min-height: 44px; padding: 12px 10px; border: 1px solid #e4e7ec; border-radius: 8px; background: #f9fafb; text-align: right; }
  .proposal-line-items .icon-btn { grid-area: remove; width: 44px; height: 100%; min-height: 44px; align-self: stretch; color: #b42318; background: #fff1f2; }
  .proposal-line-items .input { min-height: 44px; border-color: #d0d5dd !important; background: #fff !important; padding: 10px 11px !important; }

  .proposal-totals { max-width: none; width: 100%; margin-top: 20px; }
  .photo-upload-button { min-height: 54px; width: 100%; }
  .toolbox .btn, .settings-grid .btn, .pricebook-card .btn { min-height: 44px; }
  .toast { left: 12px; right: 12px; bottom: calc(74px + env(safe-area-inset-bottom)); text-align: center; }
}

@media (max-width: 430px) {
  .editor-command-actions #saveEstimateTop { display: inline-flex; }
  .editor-command-actions .btn { padding-inline: 10px; }
  .save-state { display: none !important; }
  .proposal-line-items .line-row:not(.head) { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 42px; }
}
.mode-guide { display: grid; gap: 2px; margin-top: 10px; padding: 10px 11px; border-radius: 9px; background: #f8fafc; border: 1px solid #e7ebf0; }
.mode-guide strong { font-size: 10px; color: #344054; }
.mode-guide span { font-size: 9px; color: #98a2b3; line-height: 1.35; }
.empty-action { margin-top: 8px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.table-wrap td[data-table-label]::before { content: none; }

@media (max-width: 720px) {
  .table-wrap { overflow: visible; }
  .table-wrap table, .table-wrap tbody { display: block; width: 100%; }
  .table-wrap thead { display: none; }
  .table-wrap tbody { display: grid; gap: 10px; }
  .table-wrap tr { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; padding: 14px; border: 1px solid #e5e9ee; border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(15,23,42,.04); }
  .table-wrap td { display: grid; gap: 3px; padding: 0; border: 0; min-width: 0; }
  .table-wrap td[data-table-label]::before { content: attr(data-table-label); color: #98a2b3; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .table-wrap td[data-table-label="Estimate"], .table-wrap td[data-table-label="Customer"] { grid-column: 1; }
  .table-wrap td[data-table-label="Mode"], .table-wrap td[data-table-label="Status"], .table-wrap td[data-table-label="Total"] { grid-column: 1; }
  .table-wrap td[data-table-label="Action"] { grid-column: 2; grid-row: 1 / span 5; align-self: center; }
  .table-wrap td[data-table-label="Action"]::before { display: none; }
  .table-wrap td[data-table-label="Action"] .btn { min-height: 44px; }
}
@media (max-width: 720px) {
  .mobile-nav { gap: 2px; }
  .mobile-nav a { min-width: 0; flex: 1 1 0; padding: 5px 2px; }
  .mobile-nav a span { max-width: 54px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Mobile field polish */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
.price-field { display: block; min-width: 0; }
.price-field > span { display: none; }
.price-name { flex: 1 1 auto; }
.price-unit input { max-width: 80px; }
.price-rate input { max-width: 120px; }
.mobile-more-toggle, .mobile-more-menu { display: none; }

@media (max-width: 720px) {
  .topbar { gap: 10px; }
  .topbar-title { min-width: 0; }
  .topbar h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .local-pill { flex: 0 0 auto; padding-inline: 9px; }
  .content { width: 100%; padding: 12px 12px calc(88px + env(safe-area-inset-bottom)); }
  .panel { padding: 18px 16px; }
  .panel-head { align-items: stretch; flex-direction: column; }
  .panel-head > .btn { width: 100%; min-height: 44px; }
  .btn, .icon-btn, .mode-tabs button { touch-action: manipulation; }
  .btn { min-height: 44px; }

  .dashboard-hero { min-height: 0; }
  .dashboard-hero p { font-size: 15px; line-height: 1.55; }
  .workflow-strip strong { font-size: 14px; }
  .workflow-strip small { font-size: 12px; }
  .metrics { gap: 10px; }
  .metric-copy > span { font-size: 12px; }

  .input, .select, .textarea { min-height: 44px; font-size: 16px; }
  .field label { font-size: 13px; }
  .doc-head { gap: 18px; }
  .doc-brand { align-items: flex-start; min-width: 0; }
  .doc-brand > div:last-child { min-width: 0; overflow-wrap: anywhere; }
  .doc-logo { width: 48px; height: 48px; flex: 0 0 auto; }
  .proposal-grid { gap: 20px; margin-block: 22px; }
  .proposal-line-items [data-mobile-label]::before { font-size: 10px; }
  #addLine { width: 100%; }

  .tool-card { padding: 16px !important; }
  .tool-card h4 { font-size: 16px; }
  .tool-card-label { font-size: 10px; }
  .mode-card .mode-tabs button { min-height: 46px; font-size: 12px; }
  .mode-guide strong { font-size: 12px; }
  .mode-guide span { font-size: 11px; }
  .photo-grid, .proposal-photo-grid { grid-template-columns: 1fr; }
  .photo-media { height: clamp(170px,52vw,230px); }
  .photo-card .input { font-size: 16px; }
  .proposal-toggle { min-height: 44px; font-size: 12px !important; }
  .proposal-toggle input { width: 20px; height: 20px; flex: 0 0 auto; accent-color: var(--rs-accent); }
  .photo-card .btn-danger { width: 100%; }

  .polished-price-row {
    grid-template-columns: minmax(0,1fr) minmax(88px,.45fr) 44px;
    grid-template-areas: "name name delete" "unit rate delete";
    gap: 10px;
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e5e9ee;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(15,23,42,.04);
  }
  .price-name { grid-area: name; }
  .price-unit { grid-area: unit; }
  .price-rate { grid-area: rate; }
  .price-delete { grid-area: delete; width: 44px; height: 100%; min-height: 44px; padding: 0; align-self: stretch; }
  .price-field { display: grid; gap: 5px; }
  .price-field > span { display: block; color: #98a2b3; font-size: 10px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
  .price-field .input { width: 100%; max-width: none !important; }

  .customer-row { grid-template-columns: 40px minmax(0,1fr); padding: 14px 0; align-items: start; }
  .customer-avatar { width: 40px; height: 40px; }
  .customer-row .btn { grid-column: 1/-1; width: 100%; justify-self: stretch; }
  .settings-intro h2 { font-size: 24px; }
  .settings-intro p { font-size: 13px; line-height: 1.5; }
  #saveSettings { width: 100%; }

  .mobile-nav { align-items: center; padding: 7px 7px max(7px,env(safe-area-inset-bottom)); box-shadow: 0 -12px 28px rgba(15,23,42,.18); }
  .mobile-nav > a, .mobile-more-toggle { flex: 1 1 0; min-width: 0; min-height: 54px; border: 0; border-radius: 11px; padding: 6px 3px; background: transparent; color: #aebccc; display: grid; justify-items: center; align-content: center; gap: 3px; font: inherit; cursor: pointer; text-decoration: none; }
  .mobile-nav > a { font-size: 17px; }
  .mobile-nav > a span, .mobile-more-toggle span { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; font-weight: 750; }
  .mobile-more-toggle b { font-size: 15px; letter-spacing: 1px; line-height: 1; }
  .mobile-nav > a.active, .mobile-more-toggle.active, .mobile-more-toggle[aria-expanded="true"] { color: #fff; background: rgba(249,115,22,.14); }
  .mobile-nav > .mobile-new { color: #fff; background: linear-gradient(135deg,var(--rs-accent),var(--rs-accent-deep)); box-shadow: 0 7px 18px rgba(249,115,22,.25); }
  .mobile-more-menu { position: absolute; right: 8px; bottom: calc(100% + 8px); width: min(220px,calc(100vw - 24px)); padding: 8px; border: 1px solid #344054; border-radius: 14px; background: #111c2d; box-shadow: 0 20px 45px rgba(15,23,42,.34); display: grid; gap: 4px; }
  .mobile-more-menu[hidden] { display: none; }
  .mobile-more-menu a { min-height: 50px; display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: center; justify-items: start; gap: 8px; padding: 8px 10px; color: #d6deea; border-radius: 9px; font-size: 15px; }
  .mobile-more-menu a span { max-width: none; font-size: 13px; }
  .mobile-more-menu a.active { background: rgba(249,115,22,.16); }
}

@media (max-width: 360px) {
  .dashboard-hero { padding: 24px 18px; }
  .dashboard-hero h2 { font-size: 30px; }
  .metrics { grid-template-columns: 1fr; }
  .editor-commandbar { padding-inline: 7px; }
  .back-link { width: 32px; overflow: hidden; white-space: nowrap; border: 0; padding-right: 0; font-size: 0; }
  .back-link::after { content: "←"; font-size: 18px; }
  .editor-command-actions .btn { padding-inline: 8px; }
  .print-primary { min-width: 108px; }
  .proposal-line-items .line-row:not(.head) { grid-template-columns: minmax(0,1fr) minmax(0,1fr) 40px; padding: 12px 10px; }
}