@media screen {
  :root {
    --ink-bench: #111315; --ink-raised: #1a1d20; --ink-soft: #22262a; --ink-line: #353b40;
    --porcelain: #f7f5ef; --porcelain-strong: #fffef9; --porcelain-line: #d6d2c9;
    --graphite: #252a2e; --steel: #aab4bc; --steel-bright: #dce2e6; --steel-dark: #66727b;
    --ui-text: #f4f1ea; --ui-muted: #9ca3a8; --paper-text: #222528; --paper-muted: #6d716f;
    --ui-danger: #a14335; --ui-warning: #d4984a; --ui-success: #315f49;
    --radius-panel: 14px; --ease-buttery: cubic-bezier(.22, 1, .36, 1);
    --shadow-paper: 0 24px 70px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.12);
  }
  html, body { background: var(--ink-bench); }
  body {
    color: var(--ui-text);
    background: radial-gradient(circle at 80% 4%, rgba(211,220,226,.08), transparent 27rem),
      linear-gradient(120deg, transparent 0 64%, rgba(255,255,255,.025) 64% 64.08%, transparent 64.08%),
      var(--ink-bench);
    background-attachment: fixed;
  }
  :focus-visible { outline: 3px solid var(--steel-bright) !important; outline-offset: 3px !important; }
  .toolbar {
    min-height: 72px; padding: .65rem clamp(.75rem,2vw,2rem); gap: .55rem; color: var(--ui-text);
    border-bottom: 1px solid var(--ink-line); background: rgba(17,19,21,.9);
    box-shadow: 0 12px 30px rgba(0,0,0,.16); backdrop-filter: blur(18px);
    font-family: "IBM Plex Sans Arabic", sans-serif; display: grid; align-items: center;
  }
  .toolbar--quote { grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-areas: "work drafts export" "pricing paci nav"; }
  .toolbar--compact { grid-template-columns: auto minmax(360px,1fr) auto; grid-template-areas: "work drafts export" ". nav nav"; }
  .tb-group {
    min-width: 0; min-height: 58px; display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
    padding: .38rem; border: 1px solid var(--ink-line); border-radius: 14px; background: rgba(34,38,42,.72);
  }
  .tb-work { grid-area: work; }
  .tb-drafts { grid-area: drafts; }
  .tb-paci { grid-area: paci; }
  .tb-pricing { grid-area: pricing; }
  .tb-nav { grid-area: nav; }
  .tb-export { grid-area: export; justify-content: flex-end; }
  .tb-group .auth-user, .tb-group .paci-status { min-width: 0; flex: 1 1 130px; font-size: .72rem; overflow-wrap: anywhere; }
  .tb-drafts #draftSelect { flex: 1 1 150px; max-width: 220px; }
  .tb-pricing { justify-content: center; }
  .tb-pricing .tb-label { flex: 0 1 auto; }
  .tb-pricing input { width: 64px; }
  .tb-pricing select { width: 86px; }
  .toolbar-brand {
    color: var(--steel-bright); font-family: "Aldrich", "IBM Plex Sans Arabic", sans-serif;
    font-size: .68rem; font-weight: 400; letter-spacing: .08em;
  }
  html[lang="ar"] .toolbar-brand { font-family: "IBM Plex Sans Arabic", sans-serif; font-weight: 600; letter-spacing: 0; }
  .tb-sep { height: 24px; background: var(--ink-line); }
  .tb-btn, button, .button {
    min-height: 46px; padding: .62rem .82rem; border: 1px solid var(--ink-line); border-radius: 11px;
    background: var(--ink-soft); color: var(--steel-bright); box-shadow: none;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    transition: transform .28s var(--ease-buttery), border-color .2s ease, background .2s ease;
  }
  .tb-btn:hover, button:hover, .button:hover { color: #fff; border-color: var(--steel-dark); background: #2c3236; transform: translateY(-2px); }
  .tb-btn:active, button:active, .button:active { transform: translateY(0) scale(.985); }
  .tb-btn.primary, .primary, .auth-submit {
    color: #fff; border-color: #4a5258; background: linear-gradient(145deg,#343a3f,#1c2023 68%);
    box-shadow: inset 0 1px rgba(255,255,255,.18), 0 10px 24px rgba(0,0,0,.24);
  }
  .tb-btn.primary:hover, .primary:hover, .auth-submit:hover { background: linear-gradient(145deg,#3d4449,#24292d 68%); }
  .tb-btn.danger-confirm { color: #fff !important; border-color: #c66558 !important; background: var(--ui-danger) !important; }
  .tb-label { min-height: 46px; color: var(--ui-muted); font-family: "IBM Plex Sans Arabic", sans-serif; }
  .tb-label input, .tb-label select {
    min-height: 46px; color: var(--steel-bright); border: 1px solid var(--ink-line);
    border-radius: 10px; background: var(--ink-raised);
  }
  .tb-label input:focus, .tb-label select:focus { border-color: var(--steel-dark); box-shadow: 0 0 0 4px rgba(102,114,123,.14); }
  .tb-right { align-items: center; flex-wrap: wrap; }
  .auth-gate {
    padding: clamp(1rem,4vw,3rem); color: var(--ui-text);
    background: radial-gradient(circle at 78% 8%, rgba(170,180,188,.1), transparent 28rem), var(--ink-bench);
    font-family: "IBM Plex Sans Arabic", sans-serif;
  }
  .auth-panel {
    width: min(430px,100%); padding: clamp(1.5rem,5vw,3rem); color: var(--paper-text);
    border: 1px solid var(--porcelain-line); border-radius: 18px; background: var(--porcelain); box-shadow: var(--shadow-paper);
  }
  .auth-logo, .auth-panel img { width: 180px; max-height: 90px; object-fit: contain; display: block; margin: 0 auto 1.4rem; }
  .auth-panel h1 {
    margin-bottom: 1.5rem; color: var(--paper-text); font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: clamp(1.35rem,4vw,2rem); font-weight: 600;
  }
  html[lang="en"] .auth-panel h1 { font-family: "Aldrich", "IBM Plex Sans Arabic", sans-serif; font-weight: 400; }
  .auth-panel label { color: var(--paper-text); font-size: .78rem; font-weight: 600; }
  .auth-panel input {
    min-height: 50px; padding: .75rem .85rem; color: var(--paper-text);
    border: 1px solid var(--porcelain-line); border-radius: 11px; background: var(--porcelain-strong);
  }
  .auth-panel input:focus { border-color: var(--steel-dark); box-shadow: 0 0 0 4px rgba(102,114,123,.14); outline: 0; }
  .auth-submit { min-height: 50px; margin-top: 1.25rem; border-radius: 12px; }
  .auth-error, .error, .status.error-status { color: var(--ui-danger); }
  .auth-user, .paci-status, .user, .status, header small, .intro p, dt, .dialog-head p, .consent span { color: var(--ui-muted); font-family: "IBM Plex Sans Arabic", sans-serif; }
  .paci-status[data-kind="ok"], .status.ok { color: #9bc8b2; }
  .paci-status[data-kind="warn"] { color: #e7bd7d; }
  .paci-status[data-kind="error"] { color: #d98c82; }
  .paper-wrap { background: transparent; }

  header {
    min-height: 72px; border-color: var(--ink-line); background: rgba(17,19,21,.9);
    box-shadow: 0 12px 30px rgba(0,0,0,.16); backdrop-filter: blur(18px);
    font-family: "IBM Plex Sans Arabic", sans-serif;
  }
  header img { width: 118px; max-height: 54px; object-fit: contain; filter: grayscale(1) invert(1) brightness(1.8); }
  header h1, .intro h2 { font-family: "Aldrich", "IBM Plex Sans Arabic", sans-serif; font-weight: 400; }
  .quiet { background: transparent; border-color: var(--ink-line); }
  main { width: min(1180px, calc(100% - 32px)); }
  .search {
    border-color: var(--porcelain-line); border-radius: var(--radius-panel); background: var(--porcelain);
    color: var(--paper-text); box-shadow: var(--shadow-paper);
  }
  .search label, dialog label { color: var(--paper-text); }
  .search input, dialog input { color: var(--paper-text); border-color: var(--porcelain-line); background: var(--porcelain-strong); }
  .customer { border-color: var(--ink-line); border-radius: var(--radius-panel); background: var(--ink-raised); }
  .customer-head { border-color: var(--ink-line); }
  .arabic-name { color: var(--steel-bright); }
  .badge { background: #40231f; color: #e4a39a; }
  .badge.opted { background: #183326; color: #9bc8b2; }
  .empty { border-color: var(--steel-dark); color: var(--ui-muted); }
  dialog { border-color: var(--porcelain-line); border-radius: 16px; background: var(--porcelain); color: var(--paper-text); box-shadow: var(--shadow-paper); }
  dialog::backdrop { background: rgba(8,10,11,.82); }
  .dialog-head, .dialog-actions, .consent { border-color: var(--porcelain-line); }
  .consent strong { color: var(--paper-text); }

  @media (max-width: 1180px) {
    .toolbar--quote { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "work export" "drafts drafts" "pricing paci" "nav nav"; }
    .toolbar--compact { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-areas: "work export" "drafts drafts" "nav nav"; }
  }
  @media (max-width: 720px) {
    .toolbar { grid-template-columns: 1fr; align-items: stretch; padding: .7rem; }
    .toolbar--quote { grid-template-areas: "work" "drafts" "paci" "pricing" "nav" "export"; }
    .toolbar--compact { grid-template-areas: "work" "drafts" "nav" "export"; }
    .tb-group, .tb-export { justify-content: stretch; }
    .tb-btn { flex: 1 1 auto; }
  }
  @media (max-width: 1100px), (pointer: coarse), (hover: none) {
    .toolbar, header { background: var(--ink-bench); backdrop-filter: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  }
}