/* ═══════════════════════════════════════════════════
   RistoroHub — Refined Trattoria Design System
   Fedele al design Claude v1
   ═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Fraunces:ital,opsz,wght@0,9..144,300..700;1,9..144,400&family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --paper:      #F6F1E8;
  --paper-2:    #EFE8DB;
  --paper-3:    #E5DCCA;
  --card:       #FDFAF3;
  --ink:        #1A1510;
  --ink-2:      #3B352C;
  --ink-3:      #7A7164;
  --ink-4:      #B3A898;
  --hairline:   #E0D5BF;
  --hairline-2: #D2C4A8;

  --amber:        #B8732A;
  --amber-deep:   #8B5418;
  --amber-soft:   #F2E3C8;
  --amber-light:  #F2E3C8;
  --amber-mid:    #C8832E;
  --amber-dark:   #8B5418;
  --terracotta:   #C4542E;
  --coral:        #C4542E;
  --coral-light:  #F3DCD0;
  --olive:        #5E6B3D;
  --olive-soft:   #E6E8D4;
  --teal:         #5E6B3D;
  --teal-light:   #E6E8D4;
  --blue:         #3B6EA0;
  --blue-light:   #DDE8F2;

  /* Aliases */
  --bg:       var(--paper);
  --bg-2:     var(--paper-2);
  --surface:  var(--card);
  --surface-2:var(--paper);
  --border:   var(--hairline);
  --border-2: var(--hairline-2);
  --text-1:   var(--ink);
  --text-2:   var(--ink-2);
  --text-3:   var(--ink-3);

  --serif: 'Instrument Serif','Times New Roman',serif;
  --sans:  'Inter',system-ui,-apple-system,sans-serif;
  --mono:  'JetBrains Mono',ui-monospace,monospace;

  --sidebar-w: 230px;
  --topbar-h:  60px;

  --r-sm: 8px;
  --r:    12px;
  --r-lg: 14px;
  --rl:   14px;
  --rxl:  18px;

  --shadow-xs: 0 1px 2px rgba(26,21,16,.04);
  --shadow-sm: 0 1px 3px rgba(26,21,16,.06),0 1px 2px rgba(26,21,16,.04);
  --shadow:    0 4px 16px rgba(26,21,16,.06),0 2px 6px rgba(26,21,16,.04);
  --shadow-lg: 0 24px 60px rgba(26,21,16,.12),0 8px 20px rgba(26,21,16,.06);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--sans); background:var(--paper); color:var(--ink);
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
::selection { background:var(--amber); color:#fff; }
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--hairline-2); border-radius:3px; }

/* ── TYPE ── */
.serif { font-family:var(--serif); font-weight:400; letter-spacing:-.01em; }
.mono  { font-family:var(--mono); }
.eyebrow { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* ── APP SHELL ── */
.app-shell { display:flex; min-height:100vh; }

/* ── SIDEBAR ── */
.sidebar {
  width:var(--sidebar-w); flex-shrink:0;
  background:var(--ink); display:flex; flex-direction:column;
  position:fixed; top:0; left:0; bottom:0; z-index:50;
}
.sidebar-logo { padding:18px 18px 16px; border-bottom:1px solid rgba(255,255,255,.06); }
.logo-text { font-family:var(--serif); font-size:18px; color:#fff; letter-spacing:-.01em; }
.logo-text strong { color:var(--amber); }
.sidebar-nav { flex:1; padding:12px 10px; overflow-y:auto; }
.nav-section-label {
  font-size:9px; font-weight:600; letter-spacing:.16em;
  color:rgba(246,241,232,.3); text-transform:uppercase;
  padding:14px 10px 6px;
}
.nav-link {
  width:100%; display:flex; align-items:center; gap:10px;
  padding:8px 12px; border-radius:8px; border:none;
  background:transparent; color:rgba(246,241,232,.7);
  font-size:13px; font-weight:500; cursor:pointer; font-family:inherit;
  text-align:left; margin-bottom:2px; transition:all .15s;
  text-decoration:none;
}
.nav-link:hover { background:rgba(255,255,255,.07); color:rgba(246,241,232,.9); }
.nav-link.active { background:var(--amber); color:#fff; font-weight:600; }
.nav-icon { width:16px; height:16px; flex-shrink:0; }
.sidebar-footer { padding:12px; border-top:1px solid rgba(255,255,255,.06); }
.sidebar-user {
  padding:14px 16px; border-top:1px solid rgba(255,255,255,.06);
  display:flex; align-items:center; gap:10px;
}
.user-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--amber); color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:700; flex-shrink:0;
}
.user-name { font-size:12px; font-weight:500; color:rgba(246,241,232,.9); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-sub  { font-size:10px; color:rgba(246,241,232,.4); margin-top:1px; }
.btn-logout {
  width:100%; padding:7px; border-radius:8px;
  border:1px solid rgba(255,255,255,.12); background:transparent;
  color:rgba(255,255,255,.45); font-size:12px; cursor:pointer; font-family:inherit;
  transition:all .15s;
}
.btn-logout:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.75); }

/* ── MAIN ── */
.main-content { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }
.topbar {
  position:sticky; top:0; z-index:40; height:var(--topbar-h);
  background:var(--card); border-bottom:1px solid var(--hairline);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 28px; box-shadow:var(--shadow-sm);
}
.page-title { font-family:var(--serif); font-size:22px; font-weight:400; letter-spacing:-.01em; }
.page-body  { padding:24px 28px; flex:1; }

/* ── CARDS ── */
.card {
  background:var(--card); border:1px solid var(--hairline);
  border-radius:14px; padding:20px 22px;
  margin-bottom:16px; box-shadow:var(--shadow-sm);
}
.card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.card-title { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

/* ── METRIC CARDS ── */
.metrics-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px; }
.metric-card {
  background:var(--card); border:1px solid var(--hairline);
  border-radius:14px; padding:18px 20px;
  position:relative; overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:transform .2s,box-shadow .2s;
}
.metric-card:hover { transform:translateY(-1px); box-shadow:var(--shadow); }
.metric-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--hairline); }
.metric-card.amber::before  { background:var(--amber); }
.metric-card.teal::before,
.metric-card.olive::before  { background:var(--olive); }
.metric-card.coral::before,
.metric-card.terracotta::before { background:var(--terracotta); }
.metric-label { font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin-bottom:10px; }
.metric-value { font-family:var(--serif); font-size:28px; font-weight:400; line-height:1; letter-spacing:-.015em; }
.metric-value.amber     { color:var(--amber); }
.metric-value.teal,
.metric-value.olive     { color:var(--olive); }
.metric-value.coral,
.metric-value.terracotta{ color:var(--terracotta); }
.metric-value.ink       { color:var(--ink); }
.metric-sub { font-size:11px; color:var(--ink-3); margin-top:6px; }

/* ── GRID ── */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.grid-2-1 { display:grid; grid-template-columns:2fr 1fr; gap:18px; }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:9px 18px; border-radius:999px;
  font-family:inherit; font-size:13px; font-weight:500;
  border:1px solid var(--hairline-2); background:var(--card); color:var(--ink);
  cursor:pointer; transition:all .18s; white-space:nowrap; text-decoration:none;
}
.btn:hover { background:var(--paper-2); border-color:var(--ink-4); }
.btn:disabled { opacity:.45; cursor:not-allowed; }
.btn-primary { background:var(--ink); color:var(--paper); border-color:var(--ink); box-shadow:0 2px 6px rgba(26,21,16,.2); }
.btn-primary:hover { background:var(--amber-deep); border-color:var(--amber-deep); transform:translateY(-1px); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--hairline-2); }
.btn-ghost:hover { border-color:var(--ink); }
.btn-amber { background:var(--amber); color:#fff; border-color:var(--amber); }
.btn-amber:hover { background:var(--amber-deep); }
.btn-full { width:100%; }
.btn-sm { padding:5px 12px; font-size:12px; border-radius:999px; border:1px solid var(--hairline); background:var(--card); cursor:pointer; font-family:inherit; transition:all .15s; display:inline-flex; align-items:center; gap:4px; color:var(--ink-2); }
.btn-sm:hover { background:var(--paper-2); }
.btn-danger { background:transparent; color:var(--terracotta); border:1px solid rgba(196,84,46,.3); padding:9px 18px; border-radius:999px; font-size:13px; font-weight:500; cursor:pointer; transition:all .15s; font-family:inherit; }
.btn-danger:hover { background:var(--terracotta); color:#fff; }

/* Loading state */
.btn.is-loading,.btn-primary.is-loading { color:transparent !important; pointer-events:none; position:relative; }
.btn.is-loading::after,.btn-primary.is-loading::after {
  content:''; position:absolute; top:50%; left:50%;
  width:14px; height:14px; margin-top:-7px; margin-left:-7px;
  border:2px solid currentColor; border-top-color:transparent;
  border-radius:50%; animation:btn-spin .7s linear infinite; color:var(--paper);
}
.btn.is-loading:not(.btn-primary)::after { color:var(--ink-2); }
@keyframes btn-spin { to { transform:rotate(360deg); } }

/* ── CHIPS ── */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:11px; font-weight:500;
  background:var(--paper-2); color:var(--ink-2); border:1px solid var(--hairline);
}
.chip-amber  { background:var(--amber-soft);  color:var(--amber-deep);  border-color:transparent; }
.chip-olive  { background:var(--olive-soft);  color:var(--olive);       border-color:transparent; }
.chip-coral  { background:#F3DCD0;             color:var(--terracotta);  border-color:transparent; }
.chip-ink    { background:var(--ink);          color:var(--paper);       border-color:transparent; }
.badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:600; white-space:nowrap; }
.badge-amber  { background:var(--amber-soft);  color:var(--amber-deep); }
.badge-teal   { background:var(--olive-soft);  color:var(--olive); }
.badge-coral  { background:#F3DCD0;            color:var(--terracotta); }
.badge-blue   { background:var(--blue-light);  color:var(--blue); }

/* ── TABLES ── */
.table-wrap { overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { text-align:left; padding:10px 0; font-size:10px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.12em; border-bottom:1px solid var(--hairline); }
.data-table td { padding:12px 0; border-bottom:1px solid var(--hairline); vertical-align:middle; font-size:13px; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover td { background:rgba(184,115,42,.02); }
.data-table td.num,.data-table th.num { text-align:right; font-variant-numeric:tabular-nums; }

/* ── FORMS ── */
.form-group { margin-bottom:16px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-label { display:block; font-size:10px; font-weight:600; color:var(--ink-3); letter-spacing:.14em; text-transform:uppercase; margin-bottom:6px; }
.form-input {
  width:100%; padding:10px 12px;
  border:1px solid var(--hairline); border-radius:8px;
  background:var(--paper); color:var(--ink);
  font-size:13px; font-family:inherit; transition:border-color .15s,box-shadow .15s;
}
.form-input:hover:not(:focus) { border-color:var(--hairline-2); }
.form-input:focus { outline:none; border-color:var(--amber); box-shadow:0 0 0 3px rgba(184,115,42,.1); }
.form-input::placeholder { color:var(--ink-4); }
select.form-input {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%237A7164' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center;
  padding-right:30px; cursor:pointer; appearance:none;
}
.form-hint  { font-size:11px; color:var(--ink-3); margin-top:4px; }
.form-error { color:var(--terracotta); font-size:12px; min-height:16px; margin-bottom:6px; }
.pwd-wrap { position:relative; }
.pwd-toggle { position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--ink-3); cursor:pointer; padding:4px; font-family:inherit; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; }
.pwd-toggle:hover { color:var(--amber); }

/* ── MODAL ── */
.modal-overlay { display:block; position:fixed; inset:0; background:rgba(26,21,16,.5); z-index:100; backdrop-filter:blur(4px); }
.modal-overlay.hidden { display:none !important; }
.modal {
  display:block; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(600px,92vw); max-height:92vh; overflow-y:auto;
  background:var(--card); border-radius:18px;
  box-shadow:var(--shadow-lg); z-index:101;
  animation:modal-in .22s cubic-bezier(.16,1,.3,1);
}
.modal.hidden { display:none !important; }
.hidden { display:none !important; }
@keyframes modal-in { from{opacity:0;transform:translate(-50%,-48%) scale(.96)} to{opacity:1;transform:translate(-50%,-50%) scale(1)} }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--hairline); position:sticky; top:0; background:var(--card); z-index:1; border-radius:18px 18px 0 0; }
.modal-title  { font-family:var(--serif); font-size:19px; font-weight:400; letter-spacing:-.01em; }
.modal-close  { width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--paper-2); border:none; font-size:15px; cursor:pointer; color:var(--ink-2); transition:all .15s; }
.modal-close:hover { background:var(--hairline); }
.modal-body   { padding:24px; }

/* mobile sheet */
@media(max-width:640px){
  .modal { bottom:0!important; top:auto!important; left:0!important; right:0!important; transform:none!important; width:100%!important; max-width:100%!important; border-radius:18px 18px 0 0!important; max-height:90vh!important; animation:sheet-in .25s cubic-bezier(.16,1,.3,1); }
  @keyframes sheet-in{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .modal::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:38px;height:4px;border-radius:2px;background:var(--hairline-2);}
  .modal-header{padding-top:28px!important;}
}

/* ── DASHBOARD SPECIFICS ── */
.dash-tab,.period-tab { padding:5px 14px; border-radius:999px; border:none; background:transparent; font-size:12px; font-weight:500; cursor:pointer; color:var(--ink-3); font-family:inherit; transition:all .15s; white-space:nowrap; }
.dash-tab.active  { background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); font-weight:600; }
.period-tab.active { background:var(--amber); color:#fff; }

/* ── UPLOAD ── */
.upload-zone { border:1.5px dashed var(--hairline-2); border-radius:14px; padding:36px 24px; text-align:center; cursor:pointer; background:var(--paper); transition:all .2s; }
.upload-zone:hover,.upload-zone.drag-over { border-color:var(--amber); background:var(--amber-soft); }
.upload-icon { font-size:40px; margin-bottom:10px; line-height:1; }
.upload-text { font-size:15px; font-weight:500; margin-bottom:4px; }
.upload-hint { font-size:12px; color:var(--ink-3); }
.images-preview { display:flex; flex-wrap:wrap; gap:10px; margin-top:14px; }
.img-thumb { position:relative; width:90px; height:90px; border-radius:8px; overflow:hidden; border:1.5px solid var(--hairline); flex-shrink:0; }
.img-thumb img { width:100%; height:100%; object-fit:cover; }
.img-thumb-remove { position:absolute; top:3px; right:3px; width:20px; height:20px; border-radius:50%; background:rgba(0,0,0,.6); color:#fff; border:none; font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.progress-bar { height:4px; background:var(--hairline); border-radius:2px; overflow:hidden; margin:14px 0 6px; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--amber),var(--amber-mid)); border-radius:2px; transition:width .4s ease; }
.progress-text { font-size:12px; color:var(--ink-2); text-align:center; }
.ocr-conf-row { display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--paper); border-radius:8px; margin-bottom:18px; border:1px solid var(--hairline); }
.conf-track { flex:1; height:4px; background:var(--hairline); border-radius:2px; overflow:hidden; }
.conf-fill  { height:100%; border-radius:2px; transition:width .5s ease; }
.conf-pct   { font-size:12px; font-weight:700; min-width:36px; text-align:right; }

/* ── MISC ── */
.empty-state { text-align:center; padding:56px 24px; color:var(--ink-2); }
.empty-state-icon { width:72px; height:72px; margin:0 auto 16px; background:var(--paper-2); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:30px; border:1px solid var(--hairline); }
.empty-state h3 { font-family:var(--serif); font-size:18px; font-weight:400; margin-bottom:6px; }
.empty-state p { margin-bottom:16px; font-size:13px; color:var(--ink-3); max-width:300px; margin-left:auto; margin-right:auto; line-height:1.6; }
.empty-msg { font-size:13px; color:var(--ink-3); padding:16px 0; text-align:center; }
.spinner { width:20px; height:20px; border:2px solid var(--hairline); border-top-color:var(--amber); border-radius:50%; animation:spin .8s linear infinite; display:inline-block; }
.spinner-lg { width:32px; height:32px; border-width:3px; }
@keyframes spin { to{transform:rotate(360deg)} }
.skeleton-line { height:12px; border-radius:4px; margin-bottom:8px; animation:shimmer 1.5s infinite; background:linear-gradient(90deg,var(--hairline) 25%,var(--paper-2) 50%,var(--hairline) 75%); background-size:200% 100%; }
.skeleton-line.short { width:60%; } .skeleton-line.medium { width:80%; }
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ── TOAST ── */
.toast-container { position:fixed; bottom:24px; right:24px; display:flex; flex-direction:column; gap:8px; z-index:200; }
.toast { padding:12px 18px; border-radius:12px; font-size:13px; font-weight:500; background:var(--ink); color:var(--paper); opacity:0; transform:translateY(10px) scale(.96); transition:opacity .25s,transform .25s; max-width:340px; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; border-left:3px solid transparent; }
.toast.show { opacity:1; transform:translateY(0) scale(1); }
.toast.toast-success { background:#1E3A2A; border-left-color:var(--olive); }
.toast.toast-error   { background:#3A1E1A; border-left-color:var(--terracotta); }
.toast.toast-info    { background:#1A2A3A; border-left-color:var(--blue); }

/* ── AUTH ── */
.auth-body { background:var(--ink); display:flex; align-items:center; justify-content:center; min-height:100vh; background-image:radial-gradient(circle at 20% 80%,rgba(184,115,42,.15) 0%,transparent 50%),radial-gradient(circle at 80% 20%,rgba(94,107,61,.1) 0%,transparent 50%); }
.auth-wrap { width:100%; max-width:400px; padding:20px; }
.auth-card { background:rgba(253,250,243,.04); border-radius:18px; border:1px solid rgba(255,255,255,.08); padding:36px; box-shadow:0 32px 80px rgba(0,0,0,.4); backdrop-filter:blur(20px); }
.auth-logo { text-align:center; margin-bottom:28px; }
.auth-title { font-family:var(--serif); font-size:28px; color:#fff; font-weight:400; letter-spacing:-.02em; }
.auth-title strong { color:var(--amber); }
.auth-sub { font-size:13px; color:rgba(255,255,255,.35); margin-top:4px; }
.auth-card .form-label { color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.12em; font-size:10px; }
.auth-card .form-input { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.1); color:#fff; }
.auth-card .form-input:focus { border-color:var(--amber); box-shadow:0 0 0 3px rgba(184,115,42,.2); }
.auth-card .form-input::placeholder { color:rgba(255,255,255,.2); }
.auth-card .form-error { color:#F09A85; }

/* ── VOCE BOLLA ── */
.voce-card { background:var(--paper); border:1px solid var(--hairline); border-radius:8px; padding:10px 12px; margin-bottom:8px; }
.voce-input { width:100%; padding:5px 8px; border:1px solid var(--hairline); border-radius:6px; font-size:12px; font-family:inherit; background:var(--card); color:var(--ink); transition:border-color .15s; }
.voce-input:focus { outline:none; border-color:var(--amber); }
.voce-label { font-size:10px; color:var(--ink-3); margin-bottom:3px; font-weight:500; }

/* ── MOBILE ── */
.dash-mobile-controls { display:none; }
.dash-desktop-controls { display:flex; }
.metrics-scroll-wrap { width:100%; }
body.is-mobile .dash-desktop-controls { display:none!important; }
body.is-mobile .dash-mobile-controls { display:flex!important; flex-direction:column; gap:8px; padding:10px 12px; background:var(--card); border-bottom:1px solid var(--hairline); position:sticky; top:0; z-index:30; box-shadow:var(--shadow-sm); margin:0 -12px; width:calc(100% + 24px); }
.dash-mobile-tabs,.dash-mobile-periods { display:flex; background:var(--paper-2); border-radius:8px; padding:3px; gap:2px; border:1px solid var(--hairline); }
.dash-mobile-tabs .dash-tab,.dash-mobile-periods .period-tab { flex:1; text-align:center; font-size:12px; padding:6px 2px; }
body.is-mobile .metrics-scroll-wrap { overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; margin:0 -12px!important; padding:16px 12px!important; scrollbar-width:none!important; }
body.is-mobile .metrics-scroll-wrap::-webkit-scrollbar { display:none; }
body.is-mobile .metrics-scroll-wrap .metrics-grid { display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; gap:10px!important; margin-bottom:0!important; width:max-content!important; }
body.is-mobile .metrics-scroll-wrap .metric-card { width:150px!important; min-width:150px!important; flex-shrink:0!important; padding:14px 12px!important; }
body.is-mobile .metrics-scroll-wrap .metric-value { font-size:22px!important; }
body.is-mobile .card canvas { max-height:220px!important; }

@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media print { .sidebar,.topbar,.btn,.modal-overlay,.toast-container { display:none!important; } .main-content { margin-left:0!important; } .card { box-shadow:none!important; border:1px solid var(--hairline)!important; break-inside:avoid; } }