:root{
  --bg:#f4ecd9; --bg2:#efe4ca; --panel:#fffdf7; --panel2:#fbf4e4;
  --ink:#3c3326; --muted:#8c7c61; --line:#e4d8bd; --line2:#d8c9a6;
  --accent:#8a6d3b; --accent2:#a8884f; --accentsoft:#efe2c6;
  --good:#5d7c52; --goodbg:#eaf0e2; --warn:#a8632f; --warnbg:#f6e8db;
  --shadow:0 1px 3px rgba(80,60,30,.10),0 6px 18px rgba(80,60,30,.06);
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px;line-height:1.45}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--accent);margin:0}
button{font-family:inherit;cursor:pointer}
.hidden{display:none!important}
input,select{font-family:inherit;font-size:13px;padding:6px 8px;border:1px solid var(--line2);border-radius:6px;background:#fffdf8;color:var(--ink)}
input:focus,select:focus{outline:2px solid var(--accentsoft);border-color:var(--accent2)}
.btn{background:var(--accent);color:#fff;border:none;padding:8px 14px;border-radius:7px;font-weight:600;font-size:13px}
.btn:hover{background:#76592e}
.btn.sec{background:var(--panel2);color:var(--accent);border:1px solid var(--line2)}
.btn.sec:hover{background:var(--accentsoft)}
.btn.danger{background:#fff;color:var(--warn);border:1px solid var(--warn)}
.btn.sm{padding:4px 9px;font-size:12px;border-radius:6px}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;letter-spacing:.3px}
.pill.kg{background:#eee3cb;color:#7a5e2e}.pill.pcs{background:#e6ecdc;color:#5d7c52}
.tag{font-size:11px;color:var(--muted)}
#login{position:fixed;inset:0;background:linear-gradient(135deg,#efe4ca,#e7d8b6);display:flex;align-items:center;justify-content:center;z-index:50}
.loginbox{background:var(--panel);padding:34px 32px;border-radius:14px;box-shadow:var(--shadow);width:360px;border:1px solid var(--line)}
.loginbox h1{font-size:24px;margin-bottom:2px}
.loginbox p{color:var(--muted);margin:0 0 20px}
.loginbox label{font-size:12px;font-weight:600;color:var(--muted);display:block;margin:12px 0 4px}
.loginbox input{width:100%}
.err{color:var(--warn);font-size:12px;margin-top:8px;min-height:16px}
.hint{margin-top:18px;font-size:11px;color:var(--muted);background:var(--panel2);padding:8px 10px;border-radius:7px;border:1px solid var(--line)}
header{background:linear-gradient(90deg,#8a6d3b,#a8884f);color:#fff;padding:12px 22px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow)}
header h1{color:#fff;font-size:19px}
header .sub{color:#f3e7cb;font-size:12px;margin-left:2px}
header .spacer{flex:1}
.rolebadge{background:rgba(255,255,255,.18);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:700}
nav{background:var(--panel2);border-bottom:1px solid var(--line);padding:0 16px;display:flex;gap:2px;flex-wrap:wrap}
nav button{background:none;border:none;padding:13px 16px;font-size:13px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent}
nav button:hover{color:var(--accent)}
nav button.active{color:var(--accent);border-bottom-color:var(--accent)}
main{padding:22px;max-width:1180px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:18px 20px;margin-bottom:18px}
.card h2{font-size:18px;margin-bottom:3px}
.card .desc{color:var(--muted);font-size:13px;margin-bottom:14px}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:9px 10px;background:var(--panel2);color:var(--accent);font-weight:700;border-bottom:2px solid var(--line2)}
td{padding:8px 10px;border-bottom:1px solid var(--line)}
tr:hover td{background:#fdfaf0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.kpis{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.kpi{flex:1;min-width:150px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;box-shadow:var(--shadow)}
.kpi .v{font-size:26px;font-weight:800;color:var(--accent)}
.kpi .l{font-size:12px;color:var(--muted);font-weight:600}
.cat{font-size:12px;font-weight:800;color:var(--accent2);text-transform:uppercase;letter-spacing:.6px;margin:16px 0 6px}
.prodcard{display:inline-flex;flex-direction:column;gap:3px;width:230px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:12px 13px;margin:0 8px 8px 0;cursor:pointer;box-shadow:var(--shadow);vertical-align:top}
.prodcard:hover{border-color:var(--accent2);background:#fffdf6}
.prodcard .n{font-weight:700;color:var(--ink)}
.prodcard .m{font-size:11px;color:var(--muted)}
.needprice{background:var(--warnbg)!important}
.miss{color:var(--warn);font-weight:700}
.compbox{border:1px solid var(--line2);border-radius:10px;padding:12px;margin-bottom:12px;background:var(--panel2)}
.compbox h4{margin:0 0 8px;color:var(--accent);font-size:14px}
.reqrow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.reqrow select{flex:1;min-width:220px}
.reqrow input{width:120px}
.muted{color:var(--muted)}
.totrow td{font-weight:800;background:var(--accentsoft);color:var(--accent);border-top:2px solid var(--line2)}
.statusok{color:var(--good);font-weight:700}.statusoff{color:var(--muted)}
small.code{font-family:monospace;background:var(--panel2);padding:1px 5px;border-radius:4px}
@media print{nav,header .spacer,.noprint{display:none!important}.card{box-shadow:none}}

/* searchable material picker */
.matfield{display:inline-flex;align-items:center;gap:6px;width:100%;min-width:200px;text-align:left;background:#fffdf8;border:1px solid var(--line2);border-radius:6px;padding:6px 9px;cursor:pointer;font-size:13px;color:var(--ink)}
.matfield:hover{border-color:var(--accent2);background:#fff}
.pickerBackdrop{position:fixed;inset:0;background:rgba(60,45,25,.38);z-index:100;display:flex;align-items:flex-start;justify-content:center}
.pickerPanel{background:var(--panel);margin-top:7vh;width:540px;max-width:93vw;max-height:80vh;border-radius:13px;box-shadow:0 10px 40px rgba(60,45,25,.35);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.pickerHead{padding:14px 16px;border-bottom:1px solid var(--line);background:var(--panel2)}
.pickerHead input{width:100%;font-size:14px;padding:9px 11px}
.pickerList{overflow:auto;padding:4px 0}
.pickerGroup{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:#fff;background:var(--accent2);padding:6px 16px;position:sticky;top:0}
.pickerItem{padding:9px 16px;cursor:pointer;display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line)}
.pickerItem:hover,.pickerItem.active{background:var(--accentsoft)}
.pickerItem .pn{font-weight:600;color:var(--ink)}
.pickerItem.active .pn:after{content:" ✓";color:var(--good)}

/* toasts */
#toasts{position:fixed;top:14px;right:14px;z-index:200;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);box-shadow:var(--shadow);padding:10px 14px;border-radius:8px;font-size:13px;max-width:340px;transition:opacity .3s;color:var(--ink)}
.toast.success{border-left-color:var(--good)} .toast.warn{border-left-color:var(--warn)} .toast.error{border-left-color:#b3402a}
/* brand */
.brandmark{width:26px;height:26px;flex:none}
/* mix validation */
.mixok{color:var(--good);font-weight:700}.mixbad{color:var(--warn);font-weight:700}
/* dashboard charts */
.chartcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:16px 18px;margin-bottom:18px}
.bar-row{display:grid;grid-template-columns:170px 1fr 64px;gap:8px;align-items:center;margin:5px 0;font-size:12px}
.bar-track{background:var(--panel2);border-radius:5px;height:16px;overflow:hidden;border:1px solid var(--line)}
.bar-fill{height:100%;border-radius:5px}
/* responsive */
@media (max-width:820px){
  main{padding:12px}
  .card{overflow-x:auto}
  .kpi{min-width:120px}
  .reqrow{flex-wrap:wrap}
  .bar-row{grid-template-columns:120px 1fr 52px}
  header h1{font-size:16px}
}

/* ============================================================
   VISUAL POLISH & MOTION  (v0.4)
   ============================================================ */
html{scroll-behavior:smooth}
body{background:linear-gradient(160deg,#f6efe0 0%,#f1e7d2 100%);background-attachment:fixed}

/* refined, layered shadows */
:root{
  --shadow:0 1px 2px rgba(80,60,30,.06), 0 4px 14px rgba(80,60,30,.07);
  --shadow-lg:0 6px 24px rgba(80,60,30,.14);
}

/* smooth transitions everywhere sensible */
.btn,.btn.sec,.btn.danger{transition:background .16s ease, color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .08s ease}
.btn:hover{box-shadow:0 2px 8px rgba(138,109,59,.30)}
.btn:active{transform:translateY(1px)}
.btn.sec:active,.btn.danger:active{transform:translateY(1px)}
input,select{transition:border-color .15s ease, box-shadow .15s ease, background .15s ease}
input:focus,select:focus{box-shadow:0 0 0 3px var(--accentsoft)}
nav button{transition:color .15s ease, border-color .2s ease, background .15s ease}
nav button:hover{background:rgba(138,109,59,.06)}
a{transition:color .15s ease}

/* cards & tiles lift gently */
.card{transition:box-shadow .2s ease}
.kpi{transition:transform .15s ease, box-shadow .2s ease}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.prodcard{transition:transform .15s ease, box-shadow .18s ease, border-color .15s ease}
.prodcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--accent2)}
.matfield{transition:border-color .15s ease, background .15s ease, box-shadow .15s ease}
.matfield:hover{box-shadow:0 0 0 3px var(--accentsoft)}
tr{transition:background .12s ease}
.pill{transition:transform .12s ease}

/* view fade/slide-in on every screen change */
#view.viewin{animation:viewfade .30s cubic-bezier(.2,.7,.2,1)}
@keyframes viewfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* header subtle depth + gold hairline */
header{box-shadow:0 2px 10px rgba(80,60,30,.12);position:relative}
header:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,#d9b870,#a8884f,#d9b870)}

/* login entrance */
.loginbox{animation:popin .35s cubic-bezier(.2,.8,.2,1)}
@keyframes popin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}

/* toasts slide in from the right */
.toast{animation:toastin .28s cubic-bezier(.2,.8,.2,1)}
@keyframes toastin{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}

/* material picker: backdrop fade + panel rise */
.pickerBackdrop{animation:fadein .18s ease}
.pickerPanel{animation:rise .26s cubic-bezier(.2,.8,.2,1)}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.pickerItem{transition:background .12s ease, padding-left .12s ease}
.pickerItem:hover{padding-left:20px}

/* dashboard bars grow in */
.bar-fill{transform-origin:left center;animation:growx .5s cubic-bezier(.2,.8,.2,1)}
@keyframes growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* save-bar status colour eases */
.card[style*="border-left"]{transition:border-color .25s ease}

/* nicer scrollbars */
*::-webkit-scrollbar{height:10px;width:10px}
*::-webkit-scrollbar-thumb{background:#d8c9a6;border-radius:6px}
*::-webkit-scrollbar-track{background:transparent}

/* respect reduced-motion preference */
@media (prefers-reduced-motion: reduce){
  *,#view.viewin,.loginbox,.toast,.pickerPanel,.pickerBackdrop,.bar-fill{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* read-only (view-only / no-edit) rendering */
.ro input,.ro select,.ro textarea,.ro .matfield{pointer-events:none;background:#f3ece0;color:#6b5d44;border-color:#e4d8bd}
.ro .editonly{display:none!important}
.rolabel{display:inline-block;font-size:11px;font-weight:700;color:var(--muted);background:var(--panel2);border:1px solid var(--line);padding:2px 8px;border-radius:20px}
/* approvals */
.appr-row{display:grid;grid-template-columns:30px 1fr;gap:10px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line)}
.appr-diff{font-size:12px;color:var(--ink)}
.appr-diff li{margin:1px 0}
.permgrid{display:flex;flex-wrap:wrap;gap:10px;font-size:12px}
.permgrid label{display:flex;gap:4px;align-items:center;background:var(--panel2);border:1px solid var(--line);padding:3px 8px;border-radius:6px}

/* ============================================================
   PROFESSIONAL REFRESH (v0.5) — same palette, sharper execution
   ============================================================ */
:root{ --font:-apple-system,"Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif; }
body{font-family:var(--font)}
/* crisp sans headings (replaces the templated serif), tight tracking, bronze kept */
h1,h2,h3{font-family:var(--font);font-weight:700;letter-spacing:-.018em}
h1{font-weight:800}
.loginbox h1{letter-spacing:-.02em}
.card h2{font-size:17px}
/* tabular figures wherever numbers live */
.kpi .v,.statbig,td,th,.num,.bar-row,.statline .val{font-variant-numeric:tabular-nums}

/* header: tighter brand lockup */
header h1{font-size:18px;letter-spacing:-.01em}
header .sub{letter-spacing:.02em;opacity:.92}
.rolebadge{background:rgba(255,255,255,.16);backdrop-filter:saturate(1.2)}

/* nav: clearer active state */
nav{gap:0}
nav button{padding:13px 15px;letter-spacing:-.005em}
nav button.active{border-bottom-width:3px}

/* cards & section headers: more hierarchy, less uniform */
.card{padding:18px 20px}
.card>h2:first-child{margin-bottom:2px}
.cat{font-size:11px;letter-spacing:.08em;color:var(--accent2)}

/* tables: uppercase micro-headers, comfortable rows, aligned numbers */
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;padding:10px 11px}
td{padding:9px 11px}
tbody tr:nth-child(even) td{background:rgba(138,109,59,.025)}
tr:hover td{background:#fbf5e7}

/* KPIs: bigger numerals, labelled like a dashboard */
.kpi{padding:15px 17px}
.kpi .v{font-size:29px;letter-spacing:-.02em;line-height:1.04}
.kpi .l{text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;margin-top:3px}

/* buttons: a touch more presence */
.btn{letter-spacing:.01em}
.btn.sm{font-weight:600}

/* ---------- Server status (super-admin only) ---------- */
.statusgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px;margin-top:4px}
.statustile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:15px 17px;box-shadow:var(--shadow)}
.statustile h3{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;margin:0 0 11px;display:flex;align-items:center;gap:8px}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.dot.ok{background:var(--good);box-shadow:0 0 0 3px var(--goodbg)}
.dot.warn{background:var(--warn);box-shadow:0 0 0 3px var(--warnbg)}
.statline{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.statline:last-child{border-bottom:none}
.statline .k{color:var(--muted)}
.statline .val{font-weight:700;color:var(--ink)}
.statbig{font-size:23px;font-weight:800;color:var(--accent);letter-spacing:-.02em}
.statsub{font-size:11px;color:var(--muted)}

/* ============================================================
   PRINT — clean, paginated reports (Production Plan, BOM, Margin)
   ============================================================ */
.print-only{display:none}
@media print{
  html,body{background:#fff !important;color:#000;font-size:10.5pt;line-height:1.5;height:auto !important;min-height:0 !important;overflow:visible !important;background-attachment:initial !important}
  /* ensure the WHOLE document prints (no single-page truncation, no horizontal clipping) */
  *{animation:none !important;transition:none !important}
  main,#view,#bomPrint,.card,.chartcard,.compbox{overflow:visible !important;max-height:none !important;height:auto !important}
  header,nav,#toasts,.noprint,.btn,button,.pickerBackdrop,.matfield span.tag{display:none !important}
  header:after{display:none !important}
  main{max-width:none !important;margin:0;padding:0}
  .print-only{display:block}
  #printHead{border-bottom:2pt solid #000;padding-bottom:8pt;margin-bottom:18pt}
  #printHead .pt{font-size:16pt;font-weight:800;letter-spacing:-.01em}
  #printHead .ps{font-size:9.5pt;color:#333;margin-top:4pt;letter-spacing:.02em}
  .card{box-shadow:none !important;border:none;border-radius:0;background:#fff !important;padding:0;margin:0 0 22pt}
  .card h2{font-size:13pt;color:#000;margin:0 0 8pt;letter-spacing:-.01em}
  .card h3{font-size:11pt;color:#000;margin:0 0 6pt;letter-spacing:-.01em}
  .card .desc{color:#444;font-size:8.5pt;margin-bottom:11pt;line-height:1.45}
  .between{margin-bottom:8pt}
  .cat{color:#000;font-weight:700;border-bottom:.5pt solid #999;padding-bottom:4pt;margin:20pt 0 9pt}
  table{font-size:9pt;border-collapse:collapse;width:100%;margin:0 0 14pt}
  thead{display:table-header-group}                 /* repeat header row on every page */
  tr{break-inside:avoid;page-break-inside:avoid}
  th{background:#ece6d8 !important;color:#000;border:.5pt solid #8a7a55;padding:7pt 9pt;text-transform:uppercase;font-size:8pt;letter-spacing:.04em;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  td{border:.5pt solid #c9bda0;padding:6.5pt 9pt;color:#000;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
  tr:hover td,tbody tr:nth-child(even) td{background:#fff !important}
  .totrow td{background:#e6ddc6 !important;color:#000;font-weight:800;padding-top:7.5pt;padding-bottom:7.5pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .kpi,.statustile,.chartcard,.compbox{box-shadow:none !important;border:.5pt solid #999;break-inside:avoid;background:#fff !important;padding:10pt 12pt}
  .kpi .v,.statbig{color:#000}
  .pill{border:.5pt solid #999;color:#000 !important;background:#fff !important;padding:1.5pt 6pt}
  .tag{line-height:1.5}
  .miss,.statusok,.mixok,.mixbad{color:#000 !important}
  a[href]:after{content:""}
  @page{margin:17mm 15mm}
  .modalBackdrop{display:none !important}
}

/* ---------- in-app modal dialogs (replace native prompt/confirm/alert) ---------- */
.modalBackdrop{position:fixed;inset:0;background:rgba(60,45,25,.42);z-index:300;display:flex;align-items:flex-start;justify-content:center;animation:fadein .16s ease}
.modalPanel{background:var(--panel);margin-top:13vh;width:430px;max-width:92vw;border-radius:14px;box-shadow:0 16px 50px rgba(60,45,25,.40);border:1px solid var(--line);padding:22px 24px;animation:rise .22s cubic-bezier(.2,.8,.2,1)}
.modalTitle{font-size:18px;font-weight:700;letter-spacing:-.015em;margin:0 0 8px;color:var(--accent)}
.modalMsg{font-size:14px;color:var(--ink);line-height:1.5}
.modalInput{width:100%;font-size:14px;padding:9px 11px;margin-top:12px}
.modalBtns{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
.modalLbl{font-size:12px;font-weight:600;color:var(--muted);display:block;margin:12px 0 0}

/* ---------- single-product BOM export sheet (print/PDF) ---------- */
#bomPrint{display:none}
@media print{
  body.printing-bom #view, body.printing-bom #printHead{display:none !important}
  body.printing-bom #bomPrint{display:block !important}
  #bomPrint{line-height:1.5}
  #bomPrint:after{content:"";display:table;clear:both}
  #bomPrint .bom-sheethead{border-bottom:2pt solid #000;padding-bottom:8pt;margin-bottom:16pt}
  #bomPrint .bs-brand{font-size:15pt;font-weight:800;letter-spacing:-.01em}
  #bomPrint .bs-sub{font-size:9pt;color:#444;margin-top:3pt;letter-spacing:.02em}
  #bomPrint .bs-title{font-size:18pt;margin:8pt 0 8pt;letter-spacing:-.01em}
  #bomPrint .bs-sell{font-size:12pt;margin:0 0 14pt;color:#111}
  #bomPrint .bs-sell b{font-size:14pt}
  #bomPrint .bs-gm{margin-left:22pt}
  #bomPrint .bs-meta{width:auto;margin:0 0 18pt;border-collapse:collapse}
  #bomPrint .bs-meta td{border:none;padding:4pt 22pt 4pt 0;font-size:9.5pt}
  #bomPrint .bs-meta td:nth-child(odd){color:#555}
  #bomPrint .bs-part{font-size:11pt;margin:20pt 0 7pt;border-bottom:.5pt solid #999;padding-bottom:4pt}
  #bomPrint .bs-pn{font-weight:400;font-size:8.5pt;color:#666}
  #bomPrint .bs-table{width:100%;border-collapse:collapse;margin:0 0 14pt}
  #bomPrint .bs-table th{background:#ece6d8 !important;color:#000;border:.5pt solid #8a7a55;padding:7pt 9pt;text-transform:uppercase;font-size:8pt;letter-spacing:.04em;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #bomPrint .bs-table td{border:.5pt solid #c9bda0;padding:6.5pt 9pt;color:#000;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
  #bomPrint .bs-table tr{break-inside:avoid;page-break-inside:avoid}
  #bomPrint .bs-img{max-width:55mm;max-height:55mm;border:.5pt solid #999;float:right;margin:0 0 10pt 12pt}
}
/* product photo in the editor */
.bomphoto{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.bomphoto img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--line2);background:var(--panel2)}
.bomphoto .ph{width:120px;height:120px;border-radius:10px;border:1px dashed var(--line2);background:var(--panel2);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12px;text-align:center;padding:8px}