/* ==========================================================================
   Miwa panel — compatibility layer (phase 1 of the design-system migration)
   لایه‌ی سازگاری: کلاس‌های قدیمی پنل (.btn، .card، .badge.amber، .cardtable …)
   را روی توکن‌های دیزاین سیستم جدید (miwa.css) سوار می‌کند تا همه‌ی صفحه‌ها
   بدون تغییر HTML ظاهر جدید بگیرند. در فازهای ۲ تا ۵ صفحه‌به‌صفحه جایگزین و
   در فاز ۶ حذف می‌شود.
   ========================================================================== */

/* ---- old variables → new tokens (child templates use these via var()) ---- */
:root{
  --green-900:var(--ink); --green-700:var(--leaf); --green-500:var(--leaf); --green-100:var(--leaf-soft);
  --amber:var(--warn); --amber-bg:var(--warn-soft);
  --blue:var(--info); --blue-bg:var(--info-soft);
  --purple:var(--progress); --purple-bg:var(--progress-soft);
  --red:var(--berry); --red-bg:var(--berry-soft);
  --gray:var(--ink-muted); --gray-bg:var(--fill-secondary);
  --muted:var(--ink-muted);
  --ink-2:var(--ink-muted); --ink-3:var(--ink-muted); --bg2:var(--fill-secondary); --green:var(--leaf);
  --bg:var(--surface-grouped); --card:var(--surface-raised); --border:var(--line);
  --radius:var(--radius-md);
  --mobile-bp:820px;
}

*{box-sizing:border-box}
/* باگ شناخته‌شده‌ی iOS: overflow-x باید روی خودِ body باشد */
html,body{overflow-x:hidden;width:100%}
body{font-family:var(--font-sans);background:var(--surface-grouped);margin:0;direction:rtl;color:var(--ink);-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.7}
a{color:inherit}
.app{display:flex;min-height:100vh}

/* ---------------- sidebar (desktop) ---------------- */
.sidebar{width:248px;flex:0 0 248px;background:var(--surface-raised);color:var(--ink);display:flex;flex-direction:column;padding:var(--space-4) var(--space-3);position:sticky;top:0;align-self:stretch;border-inline-start:1px solid var(--line)}
.brand{font-size:17px;font-weight:700;display:flex;align-items:center;gap:var(--space-2);padding:var(--space-1) var(--space-2) var(--space-3);color:var(--ink)}
.brand img{height:34px;width:auto;flex:none}
.side-who{display:flex;align-items:center;gap:var(--space-2);margin:0 var(--space-1) var(--space-3);padding:var(--space-2);border-radius:var(--radius-sm);background:var(--surface-grouped);font-size:12.5px;line-height:1.5}
.side-who .av{width:30px;height:30px;border-radius:var(--radius-full);background:var(--leaf-soft);color:var(--leaf);display:grid;place-items:center;font-weight:700;flex:none}
.side-who span{color:var(--ink-muted);display:block;font-size:11.5px}
.sidebar nav,.drawer nav{display:flex;flex-direction:column;gap:2px;flex:1}
.sidebar nav a,.drawer nav a{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;color:var(--ink);padding:0 var(--space-3);min-height:40px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:500;transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease}
.sidebar nav a:hover,.drawer nav a:hover{background:var(--fill-secondary)}
.sidebar nav a.active,.drawer nav a.active{background:var(--leaf-soft);color:var(--leaf);font-weight:700}
.nav-ic{display:inline-grid;place-items:center;width:22px;height:22px;flex:none;color:currentColor;opacity:.8}
.nav-ic svg{width:22px;height:22px}
a.active .nav-ic,.navhead.active .nav-ic{opacity:1}
.sidebar .logout,.drawer .logout{display:flex;align-items:center;gap:var(--space-2);text-decoration:none;color:var(--berry);padding:0 var(--space-3);min-height:40px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;margin-top:var(--space-2)}
.sidebar .logout:hover,.drawer .logout:hover{background:var(--berry-soft)}

/* accordion groups (markup unchanged: .navgroup > .navhead + .navsub > .navsub-inner) */
.sidebar .navgroup,.drawer .navgroup{display:flex;flex-direction:column}
.sidebar .navhead,.drawer .navhead{display:flex;align-items:center;gap:var(--space-3);width:100%;text-align:right;background:none;border:none;color:var(--ink);font-family:inherit;cursor:pointer;padding:0 var(--space-3);min-height:40px;border-radius:var(--radius-sm);font-size:14.5px;font-weight:500;transition:background-color var(--dur-fast) ease}
.sidebar .navhead:hover,.drawer .navhead:hover{background:var(--fill-secondary)}
.sidebar .navhead.active,.drawer .navhead.active{font-weight:700}
.sidebar .navhead.active .nav-ic,.drawer .navhead.active .nav-ic{color:var(--leaf)}
.navhead-label{flex:1}
/* caret: the old three bars become a spring-rotating chevron */
.navhead-caret{order:3;display:grid;place-items:center;flex-shrink:0;width:20px;height:20px;border-radius:var(--radius-full);background:transparent;transition:transform var(--dur-slow) var(--ease-spring)}
.navhead-caret i{display:none}
.navhead-caret::before{content:"";width:7px;height:7px;border-inline-start:1.75px solid var(--ink-muted);border-bottom:1.75px solid var(--ink-muted);transform:rotate(-45deg) translate(1px,-1px)}
.navgroup.open .navhead-caret{transform:rotate(90deg)}
.sidebar .navsub,.drawer .navsub{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.navgroup.open .navsub{grid-template-rows:1fr}
.navsub-inner{position:relative;display:flex;flex-direction:column;gap:2px;overflow:hidden;padding-top:2px}
.navsub-inner::before{content:"";position:absolute;top:4px;bottom:14px;right:22px;width:1.5px;background:var(--line);border-radius:2px}
.sidebar nav a.sub,.drawer nav a.sub,.navlink-soon.sub{position:relative;padding-right:40px;font-size:13.5px;min-height:36px}
.sidebar nav a.sub::before,.drawer nav a.sub::before,.navlink-soon.sub::before{content:"";position:absolute;top:50%;right:22px;width:10px;height:1.5px;background:var(--line);border-radius:2px}
.sidebar nav a.sub.active::before,.drawer nav a.sub.active::before{background:var(--leaf);opacity:.6}
.sidebar nav a.sub .nav-ic svg,.drawer nav a.sub .nav-ic svg{width:18px;height:18px}
.navlink-soon{display:flex;align-items:center;gap:var(--space-3);color:var(--ink-muted);opacity:.7;padding:0 var(--space-3);min-height:40px;border-radius:var(--radius-sm);font-size:14.5px;cursor:default;user-select:none}
.navlink-soon b{font-size:10.5px;font-weight:600;margin-inline-start:auto;white-space:nowrap;background:var(--fill-secondary);padding:0 7px;line-height:18px;border-radius:var(--radius-full);color:var(--ink-muted)}

/* ---------------- floating user box (desktop, top-left) ---------------- */
.corner-userbox{position:fixed;top:var(--space-3);left:var(--space-6);z-index:35;display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);border-radius:var(--radius-md);background:var(--material-bar);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 .5px 0 rgba(255,255,255,.7),inset 0 0 0 .5px rgba(26,31,26,.08),var(--shadow-sm)}
.corner-userbox .av{width:30px;height:30px;border-radius:var(--radius-full);background:var(--leaf-soft);color:var(--leaf);display:grid;place-items:center;font-weight:700;font-size:13px}
.corner-userbox .who{display:flex;flex-direction:column;line-height:1.35}
.corner-userbox .who strong{font-size:12.5px;color:var(--ink);font-weight:600}
.corner-userbox .who span{font-size:11px;color:var(--ink-muted)}
.corner-userbox .logout{display:inline-flex;align-items:center;gap:4px;text-decoration:none;color:var(--berry);font-size:12px;font-weight:600;padding:0 var(--space-2);min-height:30px;border-radius:var(--radius-sm);background:var(--berry-soft);white-space:nowrap}
.corner-userbox .logout svg,.sidebar .logout svg,.drawer .logout svg{width:16px;height:16px}

/* ---------------- back to top ---------------- */
.back-to-top{position:fixed;left:var(--space-4);bottom:var(--space-6);z-index:32;width:var(--tap-min);height:var(--tap-min);border-radius:var(--radius-full);border:0;background:var(--surface-raised);color:var(--leaf);box-shadow:var(--shadow-md);display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;transform:translateY(8px) scale(.9);transition:opacity var(--dur-base) ease,transform var(--dur-slow) var(--ease-spring)}
.back-to-top svg{width:22px;height:22px}
.back-to-top.show{opacity:1;pointer-events:auto;transform:none}
.back-to-top:active{transform:scale(.9)}
@media (max-width:820px){.back-to-top{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* ---------------- paginated control bar (unchanged behaviour) ---------------- */
.pgn-control-bar{position:-webkit-sticky;position:sticky;top:0;z-index:20;background:var(--surface-raised);padding:var(--space-3) var(--space-2) var(--space-2);margin:0 0 var(--space-3);border-radius:var(--radius-md);box-shadow:var(--shadow-sm)}
@media (max-width:820px){
  body:has(.pgn-control-bar) .bottom-nav{display:none}
  body:has(.pgn-control-bar) .back-to-top{bottom:200px}
  body:has(.pgn-control-bar) .content{padding-bottom:190px}
  .pgn-control-bar{position:fixed;top:auto;bottom:0;right:0;left:0;z-index:30;border-radius:var(--radius-lg) var(--radius-lg) 0 0;margin:0;box-shadow:var(--shadow-lg);padding:var(--space-3) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom))}
}

/* ---------------- content & type ---------------- */
.content{flex:1;min-width:0;padding:var(--space-6) var(--space-8)}
.content-inner{max-width:1180px}
h1,h2,h3,h4{margin:0 0 var(--space-3);color:var(--ink);line-height:1.5}
h1{font-size:26px;font-weight:700;letter-spacing:-.2px}
h2{font-size:20px;font-weight:700}
h3{font-size:17px;font-weight:600}
h4{font-size:15px;font-weight:600}
p{line-height:1.85}
.muted{color:var(--ink-muted);font-size:13px}
.flash{display:flex;align-items:center;gap:var(--space-2);background:var(--leaf-soft);border:0;color:var(--ink);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:14px;animation:mw-rise var(--dur-slow) var(--ease-out)}
.flash::before{content:"";width:8px;height:8px;border-radius:var(--radius-full);background:var(--leaf);flex:none}

/* ---------------- cards & KPI ---------------- */
.card{background:var(--surface-raised);border:0;border-radius:var(--radius-md);padding:var(--space-5) var(--space-6);margin-bottom:var(--space-4);box-shadow:var(--shadow-sm)}
.kpi-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:var(--space-4);margin-bottom:var(--space-6)}
.kpi{background:var(--surface-raised);border:0;border-radius:var(--radius-md);padding:var(--space-4);min-width:0;box-shadow:var(--shadow-sm)}
.kpi .label{font-size:13px;color:var(--ink-muted);margin-bottom:var(--space-1)}
.kpi .value{font-size:26px;line-height:1.4;font-weight:700;color:var(--ink);font-feature-settings:"tnum"}

/* ---------------- tables ---------------- */
table{border-collapse:collapse;width:100%;background:var(--surface-raised);font-size:14px;border-radius:var(--radius-md);overflow:hidden;border:0;box-shadow:var(--shadow-sm)}
th,td{padding:var(--space-3) var(--space-3);text-align:right;border-bottom:1px solid var(--line)}
th{background:var(--surface-raised);color:var(--ink-muted);font-weight:500;font-size:12.5px;white-space:nowrap}
tr:last-child td{border-bottom:none}
tbody tr{transition:background-color var(--dur-fast) ease}
tbody tr:hover td{background:var(--surface-grouped)}

/* ---------------- badges: old colours → workflow statuses ---------------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 10px;border-radius:var(--radius-sm);font-size:12px;line-height:20px;font-weight:600;white-space:nowrap;background:var(--fill-secondary);color:var(--ink)}
.badge.amber{background:var(--warn-soft);color:var(--warn)}
.badge.blue{background:var(--info-soft);color:var(--info)}
.badge.purple{background:var(--progress-soft);color:var(--progress)}
.badge.green{background:var(--leaf-soft);color:var(--leaf)}
.badge.red{background:var(--berry-soft);color:var(--berry)}
.badge.gray{background:var(--fill-secondary);color:var(--ink-muted)}
.badge.amber::before,.badge.blue::before,.badge.purple::before,.badge.green::before,.badge.red::before{content:"";width:6px;height:6px;border-radius:var(--radius-full);background:currentColor;flex:none}

/* ---------------- buttons: filled / tinted (ghost) / destructive ---------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--leaf);color:var(--on-leaf);padding:0 var(--space-4);min-height:40px;border-radius:var(--radius-md);text-decoration:none;font-size:14px;font-weight:600;border:none;cursor:pointer;font-family:inherit;white-space:nowrap;transition:transform var(--dur-fast) var(--ease-spring),filter var(--dur-fast) ease,background-color var(--dur-base) ease;-webkit-tap-highlight-color:transparent}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.96);transition-duration:60ms}
.btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.btn[disabled],.btn.disabled{opacity:.4;cursor:default;transform:none}
.btn.ghost{background:var(--leaf-soft);color:var(--leaf);border:0}
.btn.ghost:hover{filter:brightness(.97)}
.btn.danger{background:var(--berry-soft);color:var(--berry);border:0}
.btn.danger:hover{filter:brightness(.97)}
.btn.small{min-height:32px;padding:0 var(--space-3);font-size:13px;border-radius:var(--radius-sm)}

/* ---------------- filter chips ---------------- */
.filter-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4);align-items:center}
.filter-row a{display:inline-flex;align-items:center;min-height:32px;padding:0 var(--space-3);border-radius:var(--radius-full);font-size:13px;font-weight:500;text-decoration:none;background:var(--fill-secondary);border:0;color:var(--ink);transition:background-color var(--dur-fast) ease,color var(--dur-fast) ease,transform var(--dur-fast) var(--ease-spring)}
.filter-row a:active{transform:scale(.95)}
.filter-row a.active,.filter-row a:hover{background:var(--leaf);color:var(--on-leaf)}

/* ---------------- form controls ---------------- */
input,select,textarea{font-family:inherit;font-size:14.5px;color:var(--ink);background:var(--fill-secondary);border:0;border-radius:var(--radius-sm);padding:0 var(--space-3);min-height:40px;transition:box-shadow var(--dur-fast) ease,background-color var(--dur-fast) ease}
textarea{padding:var(--space-2) var(--space-3)}
input[type=checkbox],input[type=radio]{min-height:0;padding:0;accent-color:var(--leaf);width:18px;height:18px}
input[type=file]{background:transparent;padding:var(--space-2) 0}
input:focus,select:focus,textarea:focus{outline:none;background:var(--surface-raised);box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--focus-ring)}
label{display:block;margin:var(--space-3) 0 var(--space-1);font-size:13.5px;color:var(--ink);font-weight:500}
.field{max-width:420px}
.field input,.field select{width:100%}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield}
.empty-state{text-align:center;padding:var(--space-8) var(--space-5);color:var(--ink-muted);font-size:14px}

/* ---------------- table wrapper: sticky first column + header ---------------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background:var(--surface-raised)}
.table-wrap table{min-width:560px;border-collapse:separate;border-spacing:0;overflow:visible;box-shadow:none}
.table-wrap th:first-child,.table-wrap td:first-child{position:-webkit-sticky;position:sticky;right:0;z-index:3;box-shadow:-6px 0 6px -6px rgba(0,0,0,.12)}
.table-wrap td:first-child{background:var(--surface-raised)}
.table-wrap th:first-child{background:var(--surface-raised)}
.table-wrap tbody tr:hover td:first-child{background:var(--surface-grouped)}
.table-wrap table thead th,.table-wrap table tr:first-child th{position:-webkit-sticky;position:sticky;top:0;z-index:4;background:var(--surface-raised);box-shadow:inset 0 -1px 0 var(--line)}
.table-wrap table thead th:first-child,.table-wrap table tr:first-child th:first-child{z-index:5}

/* ---------------- phone card-tables (markup unchanged: table.cardtable) ---------------- */
@media (max-width:820px){
  .table-wrap:has(table.cardtable){background:transparent;box-shadow:none}
  .table-wrap table.cardtable{min-width:0;border-collapse:separate;background:transparent}
  .table-wrap table.cardtable thead{display:none}
  .table-wrap table.cardtable,.table-wrap table.cardtable tbody{display:block;width:100%}
  .table-wrap table.cardtable tr{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--space-4);background:var(--surface-raised);border:0;border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-3);box-shadow:var(--shadow-sm);animation:mw-rise var(--dur-slow) var(--ease-out) both}
  .table-wrap table.cardtable tr:last-child{margin-bottom:0}
  .table-wrap table.cardtable td{display:block;padding:7px 0;white-space:normal!important;font-variant-numeric:tabular-nums;width:auto!important;max-width:none!important;min-width:0!important;border-bottom:0}
  .table-wrap table.cardtable td input,.table-wrap table.cardtable td select{min-width:0}
  .table-wrap table.cardtable td[data-label]{text-align:center}
  .table-wrap table.cardtable td[data-label]::before{content:attr(data-label);display:block;text-align:center;font-size:11.5px;color:var(--ink-muted);font-weight:500;margin-bottom:2px}
  .table-wrap table.cardtable td:first-child{grid-column:1 / -1;font-weight:700;font-size:16px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:var(--space-2);flex-wrap:wrap;text-align:center;padding-bottom:var(--space-2);margin-bottom:var(--space-1);border-bottom:1px solid var(--line)}
  .table-wrap table.cardtable td:last-child{grid-column:1 / -1;margin-top:var(--space-1);padding:var(--space-2) 2px 2px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2)}
  .table-wrap table.cardtable th:first-child,.table-wrap table.cardtable td:first-child{position:static;box-shadow:none;background:transparent}
  .table-wrap table.cardtable .btn{min-height:36px;border-radius:var(--radius-full);padding:0 var(--space-4);font-size:13px}
  .table-wrap table.cardtable tr:has(.badge.amber){box-shadow:inset -4px 0 0 var(--warn),var(--shadow-sm)}
  .table-wrap table.cardtable tr:has(.badge.blue){box-shadow:inset -4px 0 0 var(--info),var(--shadow-sm)}
  .table-wrap table.cardtable tr:has(.badge.purple){box-shadow:inset -4px 0 0 var(--progress),var(--shadow-sm)}
  .table-wrap table.cardtable tr:has(.badge.green){box-shadow:inset -4px 0 0 var(--leaf),var(--shadow-sm)}
  .table-wrap table.cardtable tr:has(.badge.red){box-shadow:inset -4px 0 0 var(--berry),var(--shadow-sm)}
  .table-wrap table.cardtable tr:has(.badge.gray){box-shadow:inset -4px 0 0 var(--ink-muted),var(--shadow-sm)}
  .table-wrap table.cardtable tbody tr:hover td{background:transparent}
}

/* ---------------- drag reorder ---------------- */
.drag-handle{cursor:grab;text-align:center;color:var(--ink-muted);font-size:16px;user-select:none}
.drag-handle:active{cursor:grabbing}
tr[draggable="true"]{transition:background-color var(--dur-fast)}
tr.dragging{opacity:.35;background:var(--leaf-soft)}

/* ---------------- bot preview phone (bot_settings) ---------------- */
.phone-frame{width:280px;border:9px solid var(--ink);border-radius:36px;overflow:hidden;box-shadow:var(--shadow-lg);position:sticky;top:20px;background:var(--ink)}
.phone-header{background:var(--leaf);color:var(--on-leaf);padding:var(--space-3) var(--space-4);font-size:14px;font-weight:600}
.phone-body{background:var(--leaf-soft);padding:var(--space-3);min-height:120px}
.chat-bubble{background:var(--surface-raised);color:var(--ink);border-radius:var(--radius-md);padding:10px 14px;font-size:13px;max-width:80%;box-shadow:var(--shadow-sm)}
.phone-keyboard{background:var(--surface-grouped);padding:10px;display:flex;flex-direction:column;gap:6px}
.kb-row{display:flex;gap:6px}
.kb-btn{flex:1;background:var(--surface-raised);border:0;border-radius:var(--radius-sm);padding:10px 6px;text-align:center;font-size:12px;color:var(--ink);box-shadow:var(--shadow-sm)}

/* ---------------- desktop app-shell (unchanged behaviour) ---------------- */
@media (min-width:821px){
  html,body{height:100%}
  .app{height:100vh;overflow:hidden}
  .app-row{min-height:0}
  .sidebar{position:static;align-self:auto;height:100%;overflow-y:auto}
  .content{height:100%;overflow-y:auto}
  .app-footer{flex-shrink:0}
  .table-wrap{max-height:62vh;overflow-y:auto}
}

/* ---------------- phone shell: glass top bar, drawer, glass bottom bar ---------------- */
.nav-toggle{display:none}
.mobile-topbar,.drawer,.drawer-overlay,.bottom-nav,.hamburger-btn{display:none}
@media (max-width:820px){
  .app{flex-direction:column}
  .sidebar{display:none}
  .corner-userbox{display:none}
  .mobile-topbar{display:flex;align-items:center;gap:var(--space-2);position:sticky;top:0;z-index:30;background:var(--material-bar);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 -.5px 0 var(--line);color:var(--ink);padding:var(--space-1) var(--space-3);font-size:16px;font-weight:700;min-height:52px}
  .mobile-topbar .t{display:flex;align-items:center;gap:var(--space-2);flex:1;min-width:0}
  .mobile-topbar .t img{height:28px;width:auto}
  .table-wrap table thead th,.table-wrap table tr:first-child th{top:52px}
  .mobile-topbar .who{font-size:12px;font-weight:400;color:var(--ink-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hamburger-btn{display:grid;place-items:center;width:44px;height:44px;color:var(--ink);cursor:pointer;border-radius:var(--radius-full)}
  .hamburger-btn svg{width:24px;height:24px}
  .hamburger-btn:active{background:var(--fill-secondary)}
  .drawer-overlay{display:block;position:fixed;inset:0;background:rgba(10,12,10,.35);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity var(--dur-base) ease;z-index:40}
  .drawer{display:flex;flex-direction:column;position:fixed;top:0;right:0;bottom:0;width:84%;max-width:300px;background:var(--surface-raised);color:var(--ink);padding:calc(var(--space-4) + env(safe-area-inset-top)) var(--space-3) var(--space-4);z-index:45;transform:translateX(105%);transition:transform var(--dur-slow) var(--ease-out);overflow-y:auto;box-shadow:var(--shadow-lg)}
  .drawer nav{margin-top:var(--space-2)}
  .drawer nav a{min-height:44px;font-size:15px}
  .nav-toggle:checked ~ .drawer-overlay{opacity:1;pointer-events:auto}
  .nav-toggle:checked ~ .drawer{transform:translateX(0)}
  .bottom-nav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:var(--material-bar);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:inset 0 .5px 0 var(--line);border-top:0;padding:2px var(--space-1) calc(2px + env(safe-area-inset-bottom))}
  .bottom-nav a,.bottom-nav .more-btn{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;color:var(--ink-muted);font-size:11px;font-weight:500;padding:6px 2px 4px;min-height:52px;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:color var(--dur-fast) ease}
  .bottom-nav a .ic,.bottom-nav .more-btn .ic{display:grid;place-items:center;height:26px}
  .bottom-nav .ic svg{width:26px;height:26px;transition:transform var(--dur-base) var(--ease-spring)}
  .bottom-nav a:active .ic svg,.bottom-nav .more-btn:active .ic svg{transform:scale(.88)}
  .bottom-nav a.active{color:var(--leaf);font-weight:700}
  .content{padding:var(--space-4) var(--space-4) calc(78px + env(safe-area-inset-bottom))}
  h1{font-size:22px}
  .row2{grid-template-columns:1fr}
  input,select,textarea{font-size:16px;min-height:44px}
  .btn{min-height:44px;padding:0 var(--space-4)}
  .btn.small{min-height:36px}
  input[type=checkbox],input[type=radio]{width:20px;height:20px;min-height:0}
  .kpi-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
  .kpi{padding:var(--space-3)}
  .kpi .value{font-size:20px}
  .card{padding:var(--space-4)}
  form.filter-row > *{flex:1 1 100%}
  .phone-frame{position:relative;top:0;margin:0 auto}
}

/* ---------------- footer ---------------- */
.app-footer{direction:ltr;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-2);text-align:center;padding:var(--space-3) var(--space-3) var(--space-4);font-size:12px;line-height:20px;color:var(--ink-muted);border-top:1px solid var(--line);background:var(--surface-grouped)}
.app-footer .ver{font-weight:600;font-feature-settings:"tnum";padding:0 8px;border-radius:var(--radius-full);background:var(--fill-secondary);color:var(--ink)}
.app-footer .by{color:var(--ink)}
@media (max-width:820px){.app-footer{padding-bottom:calc(78px + env(safe-area-inset-bottom))}}

/* ---------------- product picker dialog (ProductWizard) ---------------- */
dialog#wizard{border:0;border-radius:var(--radius-lg);padding:0;width:min(640px,92vw);max-height:86vh;color:var(--ink);background:var(--surface-raised);box-shadow:var(--shadow-lg)}
dialog#wizard[open]{animation:mw-dialog-in var(--dur-slow) var(--ease-spring)}
dialog#wizard::backdrop{background:rgba(10,12,10,.35);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
dialog#wizard .wz{display:flex;flex-direction:column;max-height:86vh}
dialog#wizard .wzhead{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5) var(--space-2)}
dialog#wizard .wzhead h3{margin:0;font-size:18px}
dialog#wizard .wzx{border:0;background:var(--fill-secondary);width:30px;height:30px;border-radius:var(--radius-full);font-size:18px;color:var(--ink-muted);cursor:pointer;line-height:1;display:grid;place-items:center}
dialog#wizard .wzbody{padding:var(--space-2) var(--space-5);overflow:auto}
dialog#wizard #wzSearch{width:100%;margin-bottom:var(--space-2)}
dialog#wizard .wzcount{font-size:12px;color:var(--ink-muted);margin-bottom:var(--space-2)}
dialog#wizard .wzlist{list-style:none;margin:0;padding:0;max-height:340px;overflow:auto;border-radius:var(--radius-md);background:var(--surface-grouped)}
dialog#wizard .wzlist li{border-bottom:1px solid var(--line)}
dialog#wizard .wzlist li:last-child{border-bottom:0}
dialog#wizard .wzlist label{display:flex;gap:var(--space-3);align-items:center;padding:0 var(--space-3);margin:0;cursor:pointer;font-size:14px;min-height:44px}
dialog#wizard .wzlist label:hover{background:var(--fill-secondary)}
dialog#wizard .wzfoot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-4)}
@media (max-width:820px){dialog#wizard{width:100%;max-width:100%;margin:auto 0 0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding-bottom:env(safe-area-inset-bottom)}dialog#wizard[open]{animation:mw-sheet-in var(--dur-slow) var(--ease-out)}}

/* ---------------- print: never print the app chrome ---------------- */
@media print{.sidebar,.drawer,.bottom-nav,.mobile-topbar,.corner-userbox,.back-to-top,.app-footer{display:none!important}.content{padding:0}body{background:#fff}}