/* ─── DESIGN TOKENS ──────────────────────────────────────────────────── */
:root{
  /* Surfaces */
  --bg:#f0efe9;
  --surface:#ffffff;
  --surface-2:#fafaf8;
  --surface-3:#f4f3ef;
  --border:#e4e1d9;
  --border-2:#d4d0c6;
  --bs:#b8b3a8;

  /* Text */
  --text:#1a1915;
  --text-2:#4a4742;
  --muted:#7a7770;
  --muted-2:#a8a29e;
  --opt:#78716c;

  /* Accent — Copper */
  --accent:#C4804A;
  --ah:#a86a39;
  --al:#f5ead9;
  --accent-ring:rgba(196,128,74,.22);
  --at:#1a1915;

  /* Semantic */
  --ok:#15803d;  --ob:#f0fdf4;  --ok-bd:#bbf7d0;
  --err:#dc2626; --eb:#fef2f2;  --err-bd:#fecaca;
  --warn:#78350f;--wb:#fffbeb;  --wbd:#fcd34d;
  --info:#1e40af;--info-bg:#eff6ff;--info-bd:#bfdbfe;
  --del:#ef4444;

  /* Type scale */
  --fs-2xs:10px;
  --fs-xs:11px;
  --fs-sm:12px;
  --fs-md:13px;
  --fs-base:14px;
  --fs-lg:16px;
  --fs-xl:22px;
  --fs-2xl:28px;

  /* Spacing (4-base) */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-8:32px;

  /* Radius */
  --r-sm:6px;
  --r-md:8px;
  --r-lg:12px;
  --r-xl:16px;
  --r-pill:999px;

  /* Elevation */
  --sh-xs:0 1px 2px rgba(26,25,21,.04);
  --sh-sm:0 2px 6px rgba(26,25,21,.05), 0 1px 2px rgba(26,25,21,.04);
  --sh-md:0 4px 14px rgba(26,25,21,.07), 0 2px 4px rgba(26,25,21,.04);
  --sh-lg:0 16px 40px rgba(26,25,21,.14), 0 4px 10px rgba(26,25,21,.06);

  /* Motion */
  --t-fast:120ms ease;
  --t:180ms ease;

  /* Fonts */
  --font-sans:"DM Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"DM Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family:var(--font-sans);background:var(--bg);color:var(--text);
  min-height:100vh;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;font-size:var(--fs-base)
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    transition-duration:.001ms!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important
  }
}

/* ─── HEADER ─────────────────────────────────────────────────────────── */
.ph{background:#1a1915;padding:0 var(--sp-6);display:flex;align-items:center;
    justify-content:space-between;height:64px;position:relative;
    border-bottom:1px solid var(--accent)}
.ph img{height:38px;flex-shrink:0}
.ph-center{position:absolute;left:50%;transform:translateX(-50%)}
.ph-center h1{font-size:var(--fs-md);font-weight:600;color:#ffffffd9;letter-spacing:.14em;
              text-transform:uppercase;white-space:nowrap}
.ph-r{display:flex;align-items:center;gap:var(--sp-3);flex-shrink:0}

.lang-sw{display:flex;border:1px solid #ffffff33;border-radius:var(--r-sm);overflow:hidden}
.lang-btn{background:none;border:none;color:#ffffff66;font-size:var(--fs-xs);font-weight:700;
  padding:6px 10px;cursor:pointer;font-family:var(--font-sans);letter-spacing:.05em;
  transition:background var(--t-fast),color var(--t-fast);border-right:1px solid #ffffff22}
.lang-btn:last-child{border-right:none}
.lang-btn.active{background:#ffffff1f;color:#fff}
.lang-btn:hover:not(.active){background:#ffffff12;color:#ffffffcc}

.help-btn{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--accent);
  background:rgba(196,128,74,.14);cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:var(--accent);font-size:var(--fs-md);font-weight:700;
  transition:background var(--t-fast),color var(--t-fast);font-family:var(--font-sans)}
.help-btn:hover{background:var(--accent);color:#fff}

.wrap{max-width:1080px;margin:0 auto;padding:var(--sp-6) var(--sp-5) var(--sp-8)}

/* ─── STEPS ──────────────────────────────────────────────────────────── */
.steps{display:flex;margin-bottom:var(--sp-4);background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-sm)}
.step{flex:1;display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-4);
  cursor:pointer;border-right:1px solid var(--border);position:relative;user-select:none;
  transition:background var(--t-fast)}
.step:last-child{border-right:none}
.step:hover{background:var(--surface-2)}
.step.done .snum{background:var(--ok);color:#fff;border-color:var(--ok)}
.step.active .snum{background:var(--accent);color:#fff;border-color:var(--accent)}
.snum{width:24px;height:24px;border-radius:50%;border:1.5px solid var(--border-2);
  display:flex;align-items:center;justify-content:center;font-size:var(--fs-xs);font-weight:700;
  color:var(--muted);flex-shrink:0;transition:all var(--t-fast)}
.step.done .snum span,.step.active .snum span{display:none}
.step.done .snum::after{content:"✓";font-size:var(--fs-xs)}
.stext{display:flex;flex-direction:column}
.slabel{font-size:var(--fs-md);font-weight:500;color:var(--text)}
.ssub{font-size:var(--fs-2xs);color:var(--muted);margin-top:1px}
.step:not(.active) .slabel{color:var(--muted)}
.step.active::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--accent)}

/* ─── PANELS ─────────────────────────────────────────────────────────── */
.panel{display:none}.panel.active{display:block}
#orderFlow{display:block}
#orderFlow.active{display:block}

/* ─── DASHBOARD ──────────────────────────────────────────────────────── */
#dashboard{display:none}
.dash-kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);margin-bottom:0}
.dash-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:var(--sp-4);box-shadow:var(--sh-sm)}
.dash-panel-inner{padding:var(--sp-4) var(--sp-5) var(--sp-3)}
.dash-panel-grid{display:grid;grid-template-columns:1fr 260px;gap:var(--sp-4);align-items:start;padding:var(--sp-4) var(--sp-5)}
.dash-panel-inner+.dash-panel-grid,.dash-panel-inner~.dash-panel-grid{
  border-top:1px solid var(--border);margin-top:var(--sp-1);padding-top:var(--sp-5)}
.dash-kpi{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4)}
.dash-kpi.accent{border-left:3px solid var(--accent)}
.dash-kpi-label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2)}
.dash-kpi-value{font-size:var(--fs-2xl);font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.dash-kpi-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-1)}

.dash-history-card{overflow:hidden}
.dash-history-header{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;background:var(--surface-2)}
.dash-history-header h3{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text)}
.dash-toolbar{display:flex;align-items:center;gap:var(--sp-2);padding:0}
.dash-toolbar select,.dash-filter-select{
  border:1px solid var(--border);border-radius:var(--r-sm);padding:4px 10px;
  font-size:var(--fs-xs);color:var(--text);background:var(--surface);
  font-family:var(--font-sans);cursor:pointer;outline:none;transition:border-color var(--t-fast)}
.dash-toolbar select:hover,.dash-filter-select:hover{border-color:var(--border-2)}

.dash-table{width:100%;border-collapse:collapse}
.dash-table th{padding:var(--sp-2) var(--sp-4);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:left;border-bottom:1px solid var(--border);background:var(--surface-2)}
.dash-table td{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);border-bottom:1px solid var(--border);color:var(--text);font-variant-numeric:tabular-nums}
.dash-table tr:last-child td{border-bottom:none}
.dash-table tr:hover td{background:var(--surface-2)}
.dash-empty{padding:var(--sp-8);text-align:center;color:var(--muted);font-size:var(--fs-md)}

.pdf-dl{width:28px;height:28px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);transition:all var(--t-fast);flex-shrink:0}
.pdf-dl:hover{background:var(--al);border-color:var(--accent)}
.repeat-dl{font-size:var(--fs-2xs);font-weight:700;color:#fff;background:var(--accent);border:1px solid var(--ah);border-radius:var(--r-sm);padding:4px 10px;cursor:pointer;white-space:nowrap;font-family:var(--font-sans);transition:background var(--t-fast)}
.repeat-dl:hover{background:var(--ah)}

.dash-cta{background:#1a1915;border-radius:var(--r-lg);padding:var(--sp-6) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);box-shadow:var(--sh-sm)}
.dash-info{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-3)}
.dash-info-label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);margin-bottom:var(--sp-2)}
.dash-info-row{display:flex;justify-content:space-between;font-size:var(--fs-xs);padding:3px 0;border-bottom:1px solid var(--bg)}
.dash-info-row:last-child{border-bottom:none}
.dash-info-addr{font-size:var(--fs-xs);color:var(--text);line-height:1.6;margin-top:2px}
.dash-cta h3{font-size:var(--fs-lg);font-weight:700;color:#fff}
.dash-cta p{font-size:var(--fs-sm);color:rgba(255,255,255,.55);line-height:1.6}
.dash-cta-btn{background:var(--accent);color:#fff;border:none;border-radius:var(--r-md);padding:var(--sp-3) var(--sp-5);font-size:var(--fs-md);font-weight:700;cursor:pointer;font-family:var(--font-sans);transition:background var(--t-fast)}
.dash-cta-btn:hover{background:var(--ah)}

.dash-badge{font-size:var(--fs-2xs);font-weight:700;padding:2px 10px;border-radius:var(--r-pill);display:inline-block}
.db-green{background:#dcfce7;color:#15803d}
.db-blue{background:#dbeafe;color:#1d4ed8}
.db-gray{background:var(--surface-3);color:var(--muted)}

/* ─── AUTH SCREEN ───────────────────────────────────────────────────── */
#authScreen{position:fixed;inset:0;background:var(--bg);z-index:9999;display:flex;align-items:center;justify-content:center;flex-direction:column}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;width:100%;max-width:400px;box-shadow:var(--sh-lg)}
.auth-header{background:#1a1915;padding:var(--sp-6) var(--sp-8);border-bottom:1px solid var(--accent)}
.auth-header-sub{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:var(--sp-1)}
.auth-header h1{font-size:var(--fs-xl);font-weight:700;color:#fff;margin:0}
.auth-body{padding:var(--sp-6) var(--sp-8)}
.auth-label{display:block;font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--sp-2)}
.auth-input{width:100%;border:1px solid var(--border-2);border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base);font-family:var(--font-sans);color:var(--text);background:var(--surface);transition:border var(--t-fast),box-shadow var(--t-fast);outline:none}
.auth-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.auth-input.invalid{border-color:var(--err)!important}
.auth-btn{width:100%;background:var(--accent);color:#fff;border:none;border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-base);font-weight:700;cursor:pointer;font-family:var(--font-sans);transition:background var(--t-fast);margin-top:var(--sp-2)}
.auth-btn:hover{background:var(--ah)}
.auth-btn:disabled{opacity:.5;cursor:not-allowed}
.auth-link{background:none;border:none;color:var(--accent);font-size:var(--fs-sm);font-weight:600;cursor:pointer;font-family:var(--font-sans);padding:0;text-decoration:underline}
.auth-err{background:var(--eb);border:1px solid var(--err-bd);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--err);margin-bottom:var(--sp-4);display:none}
.auth-info{background:var(--wb);border:1px solid var(--wbd);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sm);color:var(--warn);margin-bottom:var(--sp-4);display:none}
.auth-footer{padding:var(--sp-4) var(--sp-8);border-top:1px solid var(--border);background:var(--surface-2);font-size:var(--fs-xs);color:var(--muted);text-align:center}
.auth-step{display:none}.auth-step.active{display:block}
#authScreen .cl-rootBox{display:none}

.stamm-row{display:flex;justify-content:space-between;align-items:baseline;padding:var(--sp-3) 0;border-bottom:1px solid var(--border);gap:var(--sp-4)}
.stamm-key{font-size:var(--fs-xs);font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;flex-shrink:0}
.stamm-val{font-size:var(--fs-md);color:var(--text);font-weight:500;text-align:right}

/* ─── FLOW GRID ──────────────────────────────────────────────────────── */
.flow-grid{display:grid;grid-template-columns:1fr 280px;gap:var(--sp-4);align-items:start}
.flow-main{min-width:0}

.flow-sidebar{position:sticky;top:var(--sp-6);display:flex;flex-direction:column;gap:var(--sp-2)}
.fs-kpis{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.fs-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-3);box-shadow:var(--sh-xs)}
.fs-kpi-label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.fs-kpi-val{font-size:var(--fs-lg);font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.fs-kpi-sub{font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-hist{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-xs)}
.fs-hist-head{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);background:var(--surface-2);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.fs-hist-title{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.fs-filter{border:1px solid var(--border);border-radius:var(--r-sm);padding:2px 6px;font-size:var(--fs-2xs);color:var(--text);background:var(--surface);font-family:var(--font-sans);cursor:pointer}
.fs-item{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.fs-item:last-child{border-bottom:none}
.fs-nr{font-size:var(--fs-xs);font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.fs-date{font-size:var(--fs-2xs);color:var(--muted)}
.fs-pdf{width:24px;height:24px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent);flex-shrink:0;transition:all var(--t-fast)}
.fs-pdf:hover{background:var(--al);border-color:var(--accent)}
.fs-track{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:var(--r-sm);font-size:var(--fs-2xs);font-weight:600;background:var(--info-bg);color:var(--info);border:1px solid var(--info-bd);cursor:pointer;text-decoration:none;transition:all var(--t-fast);white-space:nowrap}
.fs-track:hover{background:#dbeafe}
.fs-empty{padding:var(--sp-4) var(--sp-3);text-align:center;font-size:var(--fs-xs);color:var(--muted)}
.fs-badge{font-size:var(--fs-2xs);font-weight:700;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap}
.fsb-green{background:#dcfce7;color:var(--ok)}

/* ─── CARDS ──────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:var(--sp-4);box-shadow:var(--sh-sm)}
.ch{padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--border);display:flex;
    align-items:center;gap:var(--sp-2);background:var(--surface-2);flex-wrap:wrap}
.ch h2{font-size:var(--fs-xs);font-weight:700;color:var(--text);letter-spacing:.09em;text-transform:uppercase}
.pill{font-size:var(--fs-2xs);font-weight:500;padding:2px 10px;border-radius:var(--r-pill);
  background:var(--surface-3);color:var(--opt);border:1px solid var(--border)}
.cb{padding:var(--sp-4) var(--sp-5)}

/* ─── ORDER TYPE GRID ───────────────────────────────────────────────── */
.otype-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2)}
.otype-btn{background:var(--bg);border:2px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-2) var(--sp-3);cursor:pointer;text-align:center;
  transition:all var(--t-fast);display:flex;flex-direction:column;align-items:center;
  gap:var(--sp-1);font-family:var(--font-sans)}
.otype-btn:hover{border-color:var(--border-2);background:#eceae4}
.otype-btn.selected{border-color:var(--accent);background:var(--al);box-shadow:0 0 0 1px var(--accent)}
.otype-btn.selected .otype-name{color:var(--accent)}
.otype-icon{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;
  justify-content:center;margin-bottom:2px}
.otype-name{font-size:var(--fs-sm);font-weight:600;color:var(--text);line-height:1.3}
.otype-rule{font-size:var(--fs-2xs);color:var(--muted);line-height:1.4}
.ot-regular    .otype-icon{background:#dbeafe}
.ot-a4         .otype-icon{background:#e0e7ff}
.ot-sonstige   .otype-icon{background:#fef3c7}
.ot-muster-k   .otype-icon{background:#f3e8ff}
.ot-muster-r   .otype-icon{background:#ccfbf1}

/* ─── STATUS & PRICE BADGES (consolidated base) ─────────────────────── */
.stk-ok,.stk-none,.stk-soon,.stk-eol,.stk-partial,.stk-unkn,.stk-charge,
.prc-val,.prc-req{
  padding:3px 10px;border-radius:var(--r-pill);font-size:var(--fs-2xs);
  font-weight:600;white-space:nowrap;display:inline-block;
  border:1px solid transparent;font-variant-numeric:tabular-nums
}
.stk-unkn,.prc-req{font-weight:500}
.stk-ok     {background:var(--ob);color:var(--ok);border-color:var(--ok-bd)}
.stk-none   {background:var(--eb);color:var(--err);border-color:var(--err-bd)}
.stk-soon   {background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.stk-eol    {background:var(--eb);color:var(--muted);border-color:var(--border);text-decoration:line-through}
.stk-partial{background:#fff7ed;color:#c2410c;border-color:#fed7aa}
.stk-unkn   {background:var(--surface-3);color:var(--muted-2);border-color:var(--border)}
.stk-charge {background:#fefce8;color:var(--warn);border-color:#fde68a}
.prc-val    {background:var(--info-bg);color:var(--info);border-color:var(--info-bd)}
.prc-req    {background:var(--surface-3);color:var(--muted-2);border-color:var(--border)}

.stock-bar{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs);color:var(--muted);
  padding:var(--sp-2) var(--sp-5);border-bottom:1px solid var(--border);background:var(--surface-2)}
.sdot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--border-2)}
.sdot.loaded{background:var(--ok)}
.sdot.loading{background:#f59e0b;animation:sdpulse .9s ease-in-out infinite}
.sdot.error{background:var(--err)}
@keyframes sdpulse{0%,100%{opacity:1}50%{opacity:.25}}

/* ─── TYPE BADGE ─────────────────────────────────────────────────────── */
.type-badge{font-size:var(--fs-2xs);font-weight:700;padding:2px 10px;border-radius:var(--r-pill);margin-left:var(--sp-1)}
.tb-regular    {background:#dbeafe;color:#1d4ed8}
.tb-a4         {background:#e0e7ff;color:#4338ca}
.tb-sonstige   {background:#fef3c7;color:var(--warn)}
.tb-muster-k   {background:#f3e8ff;color:#7c3aed}
.tb-muster-r   {background:#ccfbf1;color:#0f766e}

/* ─── LOCKED NOTICE ─────────────────────────────────────────────────── */
.type-notice{text-align:center;padding:var(--sp-6) var(--sp-5);color:var(--muted);
  font-size:var(--fs-md);border:2px dashed var(--border);border-radius:var(--r-md);margin-top:var(--sp-1)}

/* ─── FORM FIELDS ────────────────────────────────────────────────────── */
.fg{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-3)}
.fg:last-child{margin-bottom:0}
.fg label{font-size:var(--fs-2xs);font-weight:700;color:var(--muted);letter-spacing:.05em;text-transform:uppercase}
.fg label .req{color:var(--err)}
.fg input,.fg select{font-family:var(--font-sans);font-size:var(--fs-md);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);color:var(--text);
  outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast);width:100%}
.fg input:focus,.fg select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.fg input::placeholder{color:#c2bfba}
.fg input.invalid{border-color:var(--err)!important;box-shadow:0 0 0 3px #fca5a533!important}
.fg input.locked{background:var(--surface-3);color:var(--muted);border-color:var(--border);
  cursor:not-allowed;font-style:italic}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-3)}

/* ─── DELIVERY TOGGLE ────────────────────────────────────────────────── */
.dtog{display:flex;border:1px solid var(--border-2);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--sp-4)}
.dtog input[type=radio]{display:none}
.dtog label{flex:1;padding:var(--sp-3) var(--sp-4);cursor:pointer;font-size:var(--fs-md);font-weight:500;
  color:var(--muted);background:var(--bg);border-right:1px solid var(--border-2);
  transition:background var(--t-fast),color var(--t-fast);display:flex;align-items:center;gap:var(--sp-2);user-select:none}
.dtog label:last-of-type{border-right:none}
.dtog input:checked+label{background:var(--surface);color:var(--text)}
.dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--border-2);flex-shrink:0;
  transition:all var(--t-fast)}
.dtog input:checked+label .dot{border-color:var(--accent);background:var(--accent);
  box-shadow:inset 0 0 0 2px #fff}
.tsub{font-size:var(--fs-2xs);font-weight:400;color:var(--muted);margin-top:1px}
.tin{display:flex;flex-direction:column}
#dsf{display:none;padding:var(--sp-4);background:var(--wb);border:1px solid var(--wbd);border-radius:var(--r-md)}
#dsf.vis{display:block}
.dsnote{font-size:var(--fs-xs);color:var(--warn);margin-bottom:var(--sp-3);display:flex;align-items:center;gap:var(--sp-2);font-weight:500}

/* ─── TABLE ──────────────────────────────────────────────────────────── */
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:var(--fs-md)}
thead tr{background:var(--surface-2)}
th{padding:var(--sp-2) var(--sp-3);text-align:left;font-size:var(--fs-2xs);font-weight:700;color:var(--muted);
  letter-spacing:.08em;text-transform:uppercase;border-bottom:1px solid var(--border);white-space:nowrap}
th.rh::after{content:" *";color:var(--err)}
tbody tr{border-bottom:1px solid var(--border);transition:background var(--t-fast)}
tbody tr:last-child{border-bottom:none}
tbody tr:hover{background:var(--surface-2)}
td{padding:4px 6px}
td input{font-family:var(--font-mono);font-size:var(--fs-md);padding:var(--sp-2);
  border:1px solid transparent;border-radius:var(--r-sm);background:transparent;color:var(--text);
  width:100%;outline:none;transition:all var(--t-fast);font-variant-numeric:tabular-nums}
td input:focus{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-ring)}
td input:hover:not(:focus){border-color:var(--border-2);background:var(--surface)}
td input.invalid{border-color:var(--err)!important;background:var(--eb)!important;box-shadow:0 0 0 3px #fca5a533}
td input.opt{color:var(--opt)}
td input.opt::placeholder{color:#d1cec8}
td input.req-comment{border-color:var(--wbd);background:var(--wb)}
td input.req-comment::placeholder{color:#b45309}
.a4tag{font-size:var(--fs-2xs);font-weight:700;background:#e0e7ff;color:#4338ca;border-radius:4px;
  padding:1px 4px;margin-left:2px;vertical-align:middle;display:none}
.show-a4tag .a4tag{display:inline}
@keyframes flashGreen{0%{background:#dcfce7;border-color:#86efac}100%{background:transparent;border-color:transparent}}
.flash-ok{animation:flashGreen .7s ease}
.rn{font-family:var(--font-mono);font-size:var(--fs-xs);color:var(--muted);text-align:center;
  width:30px;user-select:none;padding:4px 2px;font-variant-numeric:tabular-nums}
.bdel{background:none;border:none;cursor:pointer;padding:var(--sp-1);border-radius:var(--r-sm);
  color:var(--muted-2);transition:color var(--t-fast),background var(--t-fast);display:flex;align-items:center}
.bdel:hover{color:var(--del);background:var(--eb)}

/* ─── APPLY-ALL BAR ──────────────────────────────────────────────────── */
.applybar{display:none;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-5);
  background:var(--wb);border-bottom:1px solid var(--wbd)}
.applybar.vis{display:flex}
.applybar label{font-size:var(--fs-xs);font-weight:600;color:var(--warn);white-space:nowrap}
.applybar input{font-family:var(--font-sans);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);flex:1;outline:none;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.applybar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.applybar button{white-space:nowrap}

/* ─── BUTTONS ────────────────────────────────────────────────────────── */
.nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:var(--sp-4)}
.ar{display:flex;gap:var(--sp-2);align-items:center;padding:var(--sp-3) var(--sp-5);background:var(--surface-2);
  border-top:1px solid var(--border);flex-wrap:wrap}
.btn{font-family:var(--font-sans);font-size:var(--fs-md);font-weight:600;padding:var(--sp-2) var(--sp-5);
  border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;
  transition:background var(--t-fast),border-color var(--t-fast),transform var(--t-fast),box-shadow var(--t-fast);
  display:inline-flex;align-items:center;gap:var(--sp-2);min-height:36px;line-height:1}
.btn:active{transform:scale(.98)}
.btn[disabled],.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.ba{background:var(--bg);color:var(--text);border-color:var(--border-2)}
.ba:hover{background:#eceae4;border-color:var(--muted)}
.bu{background:var(--ob);color:var(--ok);border-color:#86efac}
.bu:hover{background:#dcfce7}
.bc{background:transparent;color:var(--muted);border-color:var(--border);margin-left:auto}
.bc:hover{background:var(--eb);color:var(--err);border-color:#fca5a5}
.bn{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:var(--sh-xs)}
.bn:hover{background:var(--ah);border-color:var(--ah)}
.bp{background:var(--bg);color:var(--text);border-color:var(--border-2)}
.bp:hover{background:#eceae4}
.bsend{background:var(--ok);color:#fff;border-color:var(--ok);font-size:var(--fs-lg);padding:var(--sp-3) var(--sp-8);
  box-shadow:0 4px 14px rgba(21,128,61,.28)}
.bsend:hover{background:#166534;border-color:#166534}
.hint{font-size:var(--fs-xs);color:var(--muted)}.hint span{color:var(--err)}

/* ─── EXCEL IMPORT ───────────────────────────────────────────────────── */
.uz{border:2px dashed var(--border-2);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-4);text-align:center;
  cursor:pointer;transition:all var(--t-fast);background:var(--surface-2)}
.uz:hover,.uz.dov{border-color:var(--accent);background:var(--al)}
.uz p{font-size:var(--fs-sm);color:var(--muted);margin-top:var(--sp-2)}
.uz strong{color:var(--text)}.uz span{font-size:var(--fs-xs)}
#cm{display:none;margin-top:var(--sp-3);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--sp-4)}
#cm h3{font-size:var(--fs-2xs);font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:var(--sp-3)}
.mg{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3);margin-bottom:var(--sp-3)}
.mg label{font-size:var(--fs-2xs);font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:3px}
.mg select{font-family:var(--font-sans);font-size:var(--fs-sm);padding:var(--sp-2) var(--sp-3);
  border:1px solid var(--border-2);border-radius:var(--r-sm);background:var(--surface);color:var(--text);outline:none;width:100%;transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.mg select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring)}
.pi{font-size:var(--fs-xs);color:var(--muted);padding:var(--sp-2) var(--sp-3);background:var(--bg);border-radius:var(--r-sm);font-family:var(--font-mono)}

/* ─── SEND PANEL ─────────────────────────────────────────────────────── */
.send-box{text-align:center;padding:var(--sp-8) var(--sp-5)}
.send-icon{width:64px;height:64px;border-radius:50%;background:var(--ob);
  border:2px solid #86efac;display:flex;align-items:center;justify-content:center;margin:0 auto var(--sp-4)}
.send-box h3{font-size:var(--fs-lg);font-weight:600;margin-bottom:var(--sp-2)}
.send-meta{font-size:var(--fs-md);color:var(--muted);margin-bottom:var(--sp-6)}
.upload-inst{display:none;margin-top:var(--sp-5);padding:var(--sp-5);background:var(--ob);
  border:2px solid #86efac;border-radius:var(--r-lg);text-align:center}
.upload-inst.vis{display:block}
.upload-inst h4{font-size:var(--fs-base);font-weight:600;color:var(--ok);margin-bottom:var(--sp-2)}
.upload-inst p{font-size:var(--fs-md);color:#166534;margin-bottom:var(--sp-3)}
.ddv{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
  background:var(--surface);border:1.5px dashed #86efac;border-radius:var(--r-md);padding:var(--sp-4)}
.fc{display:flex;align-items:center;gap:var(--sp-2);background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);font-weight:500;white-space:nowrap}
.arr{font-size:var(--fs-xl);color:#86efac}
.upload-inst .note{font-size:var(--fs-xs);color:var(--ok);margin-top:var(--sp-3)}

/* ─── TOAST ──────────────────────────────────────────────────────────── */
#toast{position:fixed;bottom:var(--sp-6);right:var(--sp-6);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  font-size:var(--fs-md);font-weight:500;opacity:0;transform:translateY(8px);
  transition:opacity var(--t),transform var(--t);z-index:9999;pointer-events:none;
  max-width:340px;line-height:1.5;box-shadow:var(--sh-md)}
#toast.show{opacity:1;transform:translateY(0)}
#toast.success{background:var(--ob);color:var(--ok);border:1px solid #86efac}
#toast.error{background:var(--eb);color:var(--err);border:1px solid #fca5a5}
#toast.warn{background:var(--wb);color:var(--warn);border:1px solid var(--wbd)}

/* ─── MODAL ──────────────────────────────────────────────────────────── */
.mbg{display:none;position:fixed;inset:0;background:rgba(26,25,21,.55);z-index:1000;
  align-items:flex-start;justify-content:center;padding:var(--sp-6) var(--sp-4);overflow-y:auto;
  backdrop-filter:blur(2px)}
.mbg.open{display:flex}
.modal{background:var(--surface);border-radius:var(--r-xl);width:100%;max-width:680px;
  box-shadow:var(--sh-lg);overflow:hidden}
.mhd{background:#1a1915;padding:var(--sp-4) var(--sp-5);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--accent)}
.mhd-l{display:flex;align-items:center;gap:var(--sp-3)}
.mhd-l img{height:26px}
.mhd-l h2{font-size:var(--fs-base);font-weight:500;color:#fff}
.mcls{background:none;border:none;cursor:pointer;color:#ffffff88;
  font-size:var(--fs-xl);line-height:1;padding:var(--sp-1);transition:color var(--t-fast)}
.mcls:hover{color:#fff}
.mbody{padding:var(--sp-5);max-height:72vh;overflow-y:auto}
.mbody::-webkit-scrollbar{width:6px}
.mbody::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:var(--r-sm)}
.hsec{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:var(--sp-5) 0 var(--sp-2);padding-bottom:var(--sp-2);border-bottom:1px solid var(--border)}
.hsec:first-child{margin-top:0}
.hs{display:flex;align-items:flex-start;gap:var(--sp-3);background:var(--bg);
  border-radius:var(--r-md);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-1)}
.hs-n{width:24px;height:24px;border-radius:50%;background:#1a1915;color:#fff;
  font-size:var(--fs-2xs);font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hs-n.ok{background:var(--ok)}
.hs p{font-size:var(--fs-md);line-height:1.6;color:var(--text)}
.hs a{color:var(--accent);font-weight:500}
.hs code,.ds-sub code{font-family:var(--font-mono);background:var(--surface);
  border:1px solid var(--border);border-radius:4px;padding:1px 5px;font-size:var(--fs-xs)}

.dsteps{display:flex;flex-direction:column}
.ds{display:flex;gap:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--surface);
  border:1px solid var(--border)}
.ds:first-child{border-radius:var(--r-md) var(--r-md) 0 0}
.ds:last-child{border-radius:0 0 var(--r-md) var(--r-md)}
.ds+.ds{border-top:none}
.ds-n{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:var(--fs-md);font-weight:700;color:#fff;flex-shrink:0}
.c1{background:#6366f1}.c2{background:#f59e0b}.c3{background:#10b981}
.ds-body{flex:1;padding-top:3px}
.ds-body h4{font-size:var(--fs-md);font-weight:600;margin-bottom:3px}
.ds-body p{font-size:var(--fs-sm);color:var(--muted);line-height:1.5}
.ds-sub{font-size:var(--fs-xs);color:var(--muted);margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  background:var(--bg);border-radius:var(--r-sm);border:1px solid var(--border);line-height:1.6}

.htable{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.htable td{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-sm);border-bottom:1px solid var(--border)}
.htable tr:last-child td{border-bottom:none}
.htable td:first-child{font-weight:600;color:var(--muted);width:190px;font-size:var(--fs-xs);
  text-transform:uppercase;letter-spacing:.04em}

svg{flex-shrink:0}