/* ── Design tokens ── */
  :root {
    --copper: #B5712A; --copper-light: #D4924A; --copper-dark: #8A5218;
    --copper-pale: #F5E8D4; --copper-bg: #FBF5EC;
    --charcoal: #1C1A18; --charcoal-mid: #2E2B27; --charcoal-light: #4A4640;
    --slate: #6B6460; --stone: #9A9390; --fog: #E8E2DA;
    --parchment: #F2EDE5; --white: #FDFAF6;
    --red: #C0392B; --green: #2E7D52; --green-bg: #EAF5EE; --red-bg: #FDECEA;
    --blue: #1B6CA8; --blue-bg: #EAF2FB;
    --radius: 10px; --radius-lg: 16px;
    --tap-min: 44px;
  }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { font-family: 'DM Sans', sans-serif; background: var(--parchment); color: var(--charcoal); min-height: 100vh; max-width: 480px; margin: 0 auto; }

  /* ── Header ── */
  .app-header { background: var(--charcoal); padding: 14px 14px 10px; position: sticky; top: 0; z-index: 100; }
  .app-header-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .brand { display: flex; align-items: center; gap: 10px; }
  .brand-icon { width: 34px; height: 34px; background: var(--copper); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; flex-shrink: 0; }
  .brand-name { font-family: 'Playfair Display', serif; font-size: 16px; color: var(--white); letter-spacing: .02em; }
  .brand-sub { font-size: 10px; color: var(--stone); letter-spacing: .12em; text-transform: uppercase; margin-top: 1px; }
  .reset-btn { background: var(--charcoal-mid); border: .5px solid var(--charcoal-light); color: var(--stone); font-family: 'DM Sans', sans-serif; font-size: 11px; padding: 7px 11px; border-radius: 6px; cursor: pointer; min-height: var(--tap-min); display: flex; align-items: center; touch-action: manipulation; }
  .reset-btn:active { opacity: .7; }

  /* ── Tab navigation ── */
  .tab-nav { display: flex; gap: 3px; background: var(--charcoal-mid); border-radius: 8px; padding: 3px; overflow-x: auto; scrollbar-width: none; -webkit-tap-highlight-color: transparent; }
  .tab-nav::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; background: none; border: none; color: var(--stone); font-family: 'DM Sans', sans-serif; font-size: 11px; font-weight: 500; padding: 0 11px; min-height: var(--tap-min); border-radius: 6px; cursor: pointer; white-space: nowrap; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s; display: flex; align-items: center; justify-content: center; }
  .tab-btn.active { background: var(--copper); color: var(--white); }
  .tab-btn:active { opacity: .75; }

  /* ── Sections ── */
  .section { display: none; padding: 14px; }
  .section.active { display: block; }

  /* ── Cards ── */
  .card { background: var(--white); border: .5px solid var(--fog); border-radius: var(--radius-lg); padding: 15px; margin-bottom: 11px; }
  .card-title { font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--copper); margin-bottom: 13px; display: flex; align-items: center; gap: 6px; }
  .card-title::after { content: ''; flex: 1; height: .5px; background: var(--fog); }

  /* ── Fields ── */
  .field { margin-bottom: 12px; }
  .field:last-child { margin-bottom: 0; }
  .field label { display: block; font-size: 12px; font-weight: 500; color: var(--slate); margin-bottom: 5px; }
  .field-row { display: flex; gap: 8px; }
  .field-row .field { flex: 1; }
  input[type="number"], input[type="text"], input[type="url"], input[type="password"], select, textarea {
    width: 100%; background: var(--parchment); border: .5px solid var(--fog); border-radius: var(--radius);
    padding: 10px 12px; font-family: 'DM Mono', monospace; font-size: 16px;
    color: var(--charcoal); outline: none; transition: border-color .15s;
    -webkit-appearance: none; appearance: none;
  }
  input:focus, select:focus, textarea:focus { border-color: var(--copper); background: var(--white); }
  textarea { font-family: 'DM Sans', sans-serif; font-size: 14px; resize: vertical; min-height: 70px; }
  .input-unit { position: relative; }
  .input-unit input { padding-right: 44px; }
  .input-unit .unit { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); font-size: 10px; color: var(--stone); font-family: 'DM Mono', monospace; pointer-events: none; }
  .hint { font-size: 11px; color: var(--stone); margin-top: 4px; font-style: italic; }

  /* ── Segment toggle ── */
  .seg-toggle { display: flex; background: var(--parchment); border: .5px solid var(--fog); border-radius: var(--radius); overflow: hidden; }
  .seg-toggle button { flex: 1; background: none; border: none; padding: 0 6px; min-height: var(--tap-min); font-family: 'DM Sans', sans-serif; font-size: 12px; font-weight: 500; color: var(--slate); cursor: pointer; transition: all .18s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .seg-toggle button.active { background: var(--copper); color: var(--white); border-radius: var(--radius); }

  /* ── Toggle rows ── */
  .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: .5px solid var(--fog); }
  .toggle-row:last-child { border-bottom: none; }
  .toggle-label { font-size: 13px; color: var(--slate); line-height: 1.3; flex: 1; }
  .toggle-label small { display: block; font-size: 11px; color: var(--stone); margin-top: 2px; }
  .switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; margin-left: 12px; }
  .switch input { opacity: 0; width: 0; height: 0; position: absolute; }
  .switch-track { position: absolute; inset: 0; background: var(--fog); border-radius: 12px; transition: background .2s; cursor: pointer; }
  .switch input:checked + .switch-track { background: var(--copper); }
  .switch-track::after { content: ''; position: absolute; width: 18px; height: 18px; background: var(--white); border-radius: 50%; top: 3px; left: 3px; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
  .switch input:checked + .switch-track::after { transform: translateX(18px); }

  /* ── Results metrics ── */
  .results-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 11px; }
  .metric { background: var(--parchment); border-radius: var(--radius); padding: 11px 12px 9px; border: .5px solid var(--fog); }
  .metric.featured { background: var(--copper); border-color: var(--copper-dark); grid-column: span 2; }
  .metric.featured .metric-label { color: rgba(255,255,255,.7); }
  .metric.featured .metric-value { color: var(--white); font-size: 26px; }
  .metric.featured .metric-sub   { color: rgba(255,255,255,.6); }
  .metric.wholesale-card { background: var(--blue-bg); border-color: #9EC3E8; grid-column: span 2; }
  .metric.wholesale-card .metric-label { color: var(--blue); }
  .metric.wholesale-card .metric-value { color: var(--blue); font-size: 22px; }
  .metric.wholesale-card .metric-sub   { color: var(--slate); }
  .metric.danger  { background: var(--red-bg);  border-color: #F5C6C2; }
  .metric.danger  .metric-value { color: var(--red); }
  .metric.success { background: var(--green-bg); border-color: #B8DFC8; }
  .metric.success .metric-value { color: var(--green); }
  .metric-label { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 3px; }
  .metric-value { font-family: 'DM Mono', monospace; font-size: 19px; font-weight: 500; color: var(--charcoal); line-height: 1.1; }
  .metric-sub { font-size: 11px; color: var(--stone); margin-top: 2px; }

  /* ── Breakdown ── */
  .breakdown { border-top: .5px solid var(--fog); margin-top: 11px; padding-top: 11px; }
  .breakdown-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; border-bottom: .5px solid var(--fog); font-size: 13px; transition: opacity .2s; }
  .breakdown-row:last-child { border-bottom: none; }
  .breakdown-row.total { font-weight: 600; font-size: 14px; padding-top: 8px; margin-top: 4px; border-top: 1px solid var(--fog); border-bottom: none; }
  .breakdown-row.dimmed { opacity: .35; }
  .breakdown-label { color: var(--slate); }
  .breakdown-value { font-family: 'DM Mono', monospace; color: var(--charcoal); }

  /* ── Alerts ── */
  .alert { border-radius: var(--radius); padding: 11px 13px; font-size: 13px; line-height: 1.5; margin-bottom: 11px; border: .5px solid; }
  .alert.warning { background: #FEF9EC; border-color: #F0D070; color: #7A5C10; }
  .alert.danger  { background: var(--red-bg); border-color: #F5C6C2; color: #8B2020; }
  .alert.info    { background: var(--copper-bg); border-color: var(--copper-pale); color: var(--copper-dark); }
  .alert strong { font-weight: 600; }

  /* ── Document styles ── */
  .doc-header { border-bottom: 2px solid var(--copper); padding-bottom: 13px; margin-bottom: 15px; }
  .doc-logo-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
  .doc-logo-zone { width: 90px; height: 50px; flex-shrink: 0; border: 1.5px dashed var(--fog); border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--stone); cursor: pointer; overflow: hidden; background: var(--parchment); touch-action: manipulation; }
  .doc-logo-zone:hover { border-color: var(--copper-light); }
  .doc-logo-zone img { width: 100%; height: 100%; object-fit: contain; display: none; }
  .doc-logo-zone span { pointer-events: none; }
  .doc-logo-print { display: none; max-width: 90px; max-height: 50px; object-fit: contain; }
  .doc-company { font-family: 'Playfair Display', serif; font-size: 13px; color: var(--copper); font-weight: 700; margin-bottom: 2px; }
  .doc-title { font-family: 'Playfair Display', serif; font-size: 20px; color: var(--charcoal); margin-bottom: 3px; }
  .doc-meta { font-size: 12px; color: var(--stone); font-family: 'DM Mono', monospace; margin-top: 1px; }
  .doc-client { font-size: 14px; color: var(--slate); margin-top: 7px; }
  .doc-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 14px; }
  .doc-table th { text-align: left; font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); padding: 5px 0 7px; border-bottom: .5px solid var(--fog); }
  .doc-table td { padding: 7px 0; border-bottom: .5px solid var(--fog); color: var(--charcoal); vertical-align: top; }
  .doc-table td:last-child { text-align: right; font-family: 'DM Mono', monospace; }
  .doc-table .line-name { font-weight: 500; }
  .doc-table .line-detail { font-size: 11px; color: var(--stone); margin-top: 2px; }
  .doc-total-row { display: flex; justify-content: space-between; padding: 11px 0; border-top: 2px solid var(--charcoal); font-weight: 600; font-size: 16px; }
  .doc-total-value { font-family: 'DM Mono', monospace; color: var(--copper); }
  .doc-notes { background: var(--parchment); border-radius: var(--radius); padding: 11px; font-size: 12px; color: var(--slate); line-height: 1.6; margin-top: 11px; white-space: pre-line; }

  /* ── Invoice status ── */
  .inv-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; margin-top: 6px; }
  .inv-status.draft { background: var(--fog); color: var(--slate); }
  .inv-status.paid  { background: var(--green-bg); color: var(--green); }

  /* ── Buttons ── */
  .btn { width: 100%; border: none; border-radius: var(--radius); padding: 0 16px; min-height: var(--tap-min); font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 500; cursor: pointer; letter-spacing: .04em; margin-top: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .15s; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  .btn:active { opacity: .82; }
  .btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  .btn-dark   { background: var(--charcoal);     color: var(--white); }
  .btn-mid    { background: var(--charcoal-mid); color: var(--white); border: .5px solid var(--charcoal-light); }
  .btn-copper { background: var(--copper);        color: var(--white); }
  .btn-green  { background: var(--green);         color: var(--white); }
  .btn-sm { padding: 0 12px; min-height: 38px; font-size: 12px; margin-top: 0; width: auto; }
  .btn-row { display: flex; gap: 8px; margin-top: 8px; }
  .btn-row .btn { margin-top: 0; flex: 1; }

  /* ── Config / server status ── */
  .conn-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 5px 10px; border-radius: 20px; }
  .conn-status.connected    { background: var(--green-bg); color: var(--green); }
  .conn-status.disconnected { background: var(--fog); color: var(--slate); }
  .conn-status.error        { background: var(--red-bg); color: var(--red); }

  /* ── Logo upload zone ── */
  .logo-upload-zone { border: 1.5px dashed var(--fog); border-radius: var(--radius); padding: 20px; text-align: center; cursor: pointer; transition: border-color .15s; touch-action: manipulation; }
  .logo-upload-zone:hover { border-color: var(--copper-light); }
  .logo-preview { max-width: 160px; max-height: 80px; object-fit: contain; margin: 10px auto 0; display: none; }

  /* ── Client rolodex ── */
  .client-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: .5px solid var(--fog); gap: 8px; }
  .client-item:last-child { border-bottom: none; }
  .client-name { font-size: 13px; font-weight: 500; color: var(--charcoal); }
  .client-meta { font-size: 11px; color: var(--stone); margin-top: 2px; }
  .client-actions { display: flex; gap: 6px; flex-shrink: 0; }

  /* ── History ── */
  .history-item { border: .5px solid var(--fog); border-radius: var(--radius); padding: 12px; margin-bottom: 8px; transition: border-color .15s; }
  .history-item:hover { border-color: var(--copper-light); }
  .history-item-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
  .history-ref  { font-family: 'DM Mono', monospace; font-size: 13px; font-weight: 500; color: var(--charcoal); }
  .history-sub  { font-size: 12px; color: var(--slate); margin-top: 2px; }
  .history-date { font-size: 11px; color: var(--stone); font-family: 'DM Mono', monospace; flex-shrink: 0; text-align: right; }
  .history-meta { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
  .badge { background: var(--parchment); border: .5px solid var(--fog); border-radius: 4px; padding: 2px 6px; font-size: 11px; font-family: 'DM Mono', monospace; color: var(--slate); }
  .badge.invoice { background: var(--green-bg); border-color: #B8DFC8; color: var(--green); }
  .del-btn { background: none; border: none; color: var(--stone); cursor: pointer; font-size: 16px; min-width: 32px; min-height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 4px; touch-action: manipulation; }
  .del-btn:hover { background: var(--red-bg); color: var(--red); }

  /* ── Empty states ── */
  .empty-state { text-align: center; padding: 28px 16px; color: var(--stone); font-size: 13px; line-height: 1.6; }
  .empty-state strong { display: block; font-size: 15px; color: var(--slate); margin-bottom: 6px; }

  /* ── Toast ── */
  .toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px); background: var(--charcoal); color: var(--white); padding: 10px 18px; border-radius: 24px; font-size: 13px; font-weight: 500; z-index: 999; transition: transform .3s ease; pointer-events: none; white-space: nowrap; }
  .toast.show { transform: translateX(-50%) translateY(0); }

  /* ── Sync status ── */
  .sync-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: .5px solid var(--fog); font-size: 12px; color: var(--slate); }
  .sync-row:last-child { border-bottom: none; }
  .sync-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .sync-dot.synced   { background: var(--green); }
  .sync-dot.unsynced { background: var(--stone); }

  /* ── Print ── */
  @media print {
    .app-header, .tab-nav, .btn, .btn-row, .no-print { display: none !important; }
    .section { display: none !important; }
    .section.print-target { display: block !important; padding: 0 !important; }
    body { max-width: 100%; background: white; }
    .card { border: none; padding: 0; margin-bottom: 16px; }
    .doc-logo-zone { display: none !important; }
    .doc-logo-print { display: block !important; }
  }