:root {
  --ink: #121216; --ink-2: #17171c; --card: #1b1b21; --card-2: #22222a; --line: #2a2a32; --line-2: #35353e; --hover: #45454f;
  --bone: #f4f2ee; --text-2: #d8d5ce; --muted: #9d9da6; --gold: #d4b071; --gold-2: #e8cf9d; --gold-bg: rgba(212,176,113,.1);
  --green: #6fcf97; --red: #eb6f6f; --blue: #7aa7ff; --orange: #f2a65a; --purple: #b18cff; --pink: #f08bc3; --yellow: #e9d36c;
  --ease: cubic-bezier(.16, 1, .3, 1); --r: 16px; --side: 248px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--ink); color: var(--bone); }
body { background: radial-gradient(110% 380px at 50% -120px, rgba(212,176,113,.16), transparent 70%) no-repeat, var(--ink); background-attachment: fixed; }
body { font-family: 'IBM Plex Sans Arabic', Inter, system-ui, sans-serif; font-size: 14.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.en, .mono, input[type=number], input[type=date], .num { font-family: Inter, 'IBM Plex Sans Arabic', system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--gold); color: #111; }
::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; border: 2px solid var(--ink); }

/* ---------- layout ---------- */
.app { display: grid; grid-template-columns: var(--side) 1fr; min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; border-inline-end: 1px solid var(--line); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; background: linear-gradient(180deg, #19191f, #141418); }
.side::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, #8d6a2e, #e8cf9d, #8d6a2e); }
.logo { padding: 4px 10px 22px; }
.logo b { display: block; font: 600 11px Inter; letter-spacing: .34em; color: var(--gold); }
.logo span { font-size: 18px; font-weight: 600; }
.nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); transition: background .25s var(--ease), color .25s; position: relative; }
.nav a:hover { background: var(--card); color: var(--bone); }
.nav a.on { background: var(--card-2); color: var(--bone); }
.nav a.on::before { content: ""; position: absolute; inset-inline-start: -14px; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--gold); }
.nav svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.nav .badge { margin-inline-start: auto; }
.nav .grp { font-size: 11px; color: var(--muted); padding: 16px 12px 6px; letter-spacing: .06em; }
.side .foot { margin-top: auto; font-size: 12px; color: var(--muted); padding: 10px 12px; }
.main { min-width: 0; padding: 26px clamp(16px, 3vw, 38px) 80px; }
.top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; flex-wrap: wrap; }
.top h1 { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.top .sub { color: var(--muted); font-size: 13px; }
.top .actions { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mnav { display: none; }

/* ---------- atoms ---------- */
.btn { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); background: var(--card); padding: 8px 14px; border-radius: 10px; cursor: pointer; font-size: 13.5px; white-space: nowrap; transition: all .2s var(--ease); }
.btn:hover { border-color: var(--hover); background: var(--card-2); }
.btn.gold { background: var(--gold); color: #141414; border-color: var(--gold); font-weight: 600; }
.btn.gold:hover { background: var(--gold-2); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--card); color: var(--bone); }
.btn.ok { background: rgba(111,207,151,.12); border-color: rgba(111,207,151,.35); color: var(--green); }
.btn.no { background: rgba(235,111,111,.1); border-color: rgba(235,111,111,.3); color: var(--red); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; border-radius: 8px; }
.btn.icon { padding: 7px; }
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.btn:disabled { opacity: .5; cursor: default; }
kbd { font: 500 10.5px Inter; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; color: var(--muted); }
.badge { font: 600 11px Inter; background: var(--gold); color: #111; border-radius: 999px; padding: 1px 7px; min-width: 20px; text-align: center; }
.badge.red { background: var(--red); }
.tag { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); white-space: nowrap; line-height: 1.6; }
.tag i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tag.en { font-size: 10.5px; letter-spacing: .04em; font-weight: 500; }
.c-green { color: var(--green); border-color: rgba(111,207,151,.3); background: rgba(111,207,151,.07); }
.c-red { color: var(--red); border-color: rgba(235,111,111,.3); background: rgba(235,111,111,.07); }
.c-blue { color: var(--blue); border-color: rgba(122,167,255,.3); background: rgba(122,167,255,.07); }
.c-orange { color: var(--orange); border-color: rgba(242,166,90,.3); background: rgba(242,166,90,.07); }
.c-purple { color: var(--purple); border-color: rgba(177,140,255,.3); background: rgba(177,140,255,.07); }
.c-pink { color: var(--pink); border-color: rgba(240,139,195,.3); background: rgba(240,139,195,.07); }
.c-yellow { color: var(--yellow); border-color: rgba(233,211,108,.3); background: rgba(233,211,108,.07); }
.c-gold { color: var(--gold); border-color: rgba(212,176,113,.35); background: var(--gold-bg); }
.c-gray { color: var(--muted); }
.muted { color: var(--muted); } .gold { color: var(--gold); } .small { font-size: 12.5px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.spacer { flex: 1; }
hr.sep { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.18); }
.pad { padding: 18px; }
.panel-h { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.panel-h h3 { margin: 0; font-size: 14.5px; font-weight: 600; }
.grid { display: grid; gap: 14px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* inputs */
.in, select.in, textarea.in { width: 100%; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 9px 12px; outline: none; transition: border-color .2s, box-shadow .2s; }
.in:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,176,113,.12); }
textarea.in { resize: vertical; min-height: 90px; line-height: 1.8; }
textarea.script-in { min-height: 380px; font-size: 15px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field > label { font-size: 12px; color: var(--muted); }
.search { position: relative; }
.search svg { position: absolute; inset-inline-start: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; stroke: var(--muted); fill: none; stroke-width: 1.8; }
.search .in { padding-inline-start: 34px; min-width: 240px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { cursor: pointer; font-size: 12.5px; padding: 5px 12px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--text-2); background: transparent; transition: all .2s; user-select: none; }
.chip:hover { border-color: var(--hover); color: var(--bone); }
.chip.on { background: var(--gold-bg); border-color: rgba(212,176,113,.5); color: var(--gold); }
.seg { display: inline-flex; background: var(--ink-2); border: 1px solid var(--line-2); border-radius: 10px; padding: 3px; }
.seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--card-2); color: var(--bone); }

/* stats */
.stat { padding: 16px 18px; }
.stat .l { font-size: 12px; color: var(--muted); }
.stat .v { font: 600 26px Inter; letter-spacing: -.02em; margin-top: 2px; }
.stat .v small { font: 500 12px 'IBM Plex Sans Arabic'; color: var(--muted); margin-inline-start: 4px; }
.stat .d { font-size: 12px; margin-top: 2px; }

/* ---------- inbox ---------- */
.inbox { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
.qlist { max-height: calc(100vh - 170px); overflow: auto; position: sticky; top: 20px; }
.qitem { padding: 12px 14px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s; }
.qitem:hover { background: var(--card-2); }
.qitem.on { background: var(--card-2); box-shadow: inset -3px 0 0 var(--gold); }
.qitem .t { font-weight: 500; line-height: 1.5; }
.qitem.done { opacity: .45; }
.review { padding: 26px 30px; }
.review h2 { font-size: 24px; margin: 6px 0 10px; line-height: 1.45; font-weight: 600; }
.review .hook { font-size: 16px; color: var(--gold-2); border-inline-start: 2px solid var(--gold); padding-inline-start: 12px; margin: 14px 0; }
.decide { position: sticky; bottom: 16px; display: flex; gap: 10px; align-items: center; justify-content: center; padding: 12px; margin-top: 20px; background: rgba(27,27,33,.92); backdrop-filter: blur(12px); border: 1px solid var(--line-2); border-radius: 16px; }
.decide .btn { padding: 10px 22px; font-size: 14.5px; }
.empty { text-align: center; padding: 70px 20px; color: var(--muted); }
.empty .big { font-size: 42px; margin-bottom: 8px; }

/* prose */
.prose { line-height: 1.95; color: var(--text-2); font-size: 15px; }
.prose h2, .prose h3, .prose h4, .prose h5 { color: var(--bone); margin: 1.3em 0 .4em; font-weight: 600; }
.prose h2 { font-size: 19px; } .prose h3 { font-size: 17px; } .prose h4, .prose h5 { font-size: 15px; color: var(--gold); }
.prose p { margin: .5em 0; } .prose a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.prose blockquote { margin: .8em 0; padding: 4px 14px; border-inline-start: 2px solid var(--gold); color: var(--bone); }
.prose table { border-collapse: collapse; width: 100%; font-size: 13.5px; margin: 10px 0; }
.prose th, .prose td { border: 1px solid var(--line-2); padding: 7px 10px; text-align: start; }
.prose code { background: var(--card-2); padding: 1px 6px; border-radius: 5px; font-size: .9em; }
.prose ul, .prose ol { padding-inline-start: 22px; }
.prose .chk { display: inline-block; width: 12px; height: 12px; border: 1px solid var(--muted); border-radius: 3px; margin-inline-end: 6px; }
.prose .chk.on { background: var(--gold); border-color: var(--gold); }

/* ---------- kanban ---------- */
.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(270px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: start; }
.col { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--r); min-height: 240px; display: flex; flex-direction: column; }
.col-h { padding: 12px 14px; display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; border-bottom: 1px solid var(--line); }
.col-h .dot { width: 8px; height: 8px; border-radius: 50%; }
.col-b { padding: 10px; display: flex; flex-direction: column; gap: 8px; flex: 1; transition: background .2s; border-radius: 0 0 var(--r) var(--r); }
.col-b.over { background: rgba(212,176,113,.05); }
.kcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 11px 12px; cursor: grab; transition: border-color .2s, transform .2s var(--ease); }
.kcard:hover { border-color: var(--line-2); transform: translateY(-1px); }
.kcard.drag { opacity: .4; }
.kcard .t { font-weight: 500; font-size: 13.5px; line-height: 1.55; margin-bottom: 7px; }
.kcard .m { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.kcard .f { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.progress { height: 3px; background: var(--line); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.progress i { display: block; height: 100%; background: var(--gold); }

/* table list */
.tbl { width: 100%; border-collapse: collapse; }
.tbl th { font-size: 12px; color: var(--gold-2); background: var(--card-2); font-weight: 500; text-align: start; padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr.click { cursor: pointer; } .tbl tr.click:hover td { background: var(--card-2); }
.tbl .num { text-align: end; white-space: nowrap; }
.tbl-wrap { overflow-x: auto; }

/* ---------- editor ---------- */
.editor { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.editor .aside { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }
.title-in { width: 100%; background: transparent; border: 0; outline: none; font-size: 26px; font-weight: 600; padding: 4px 0; line-height: 1.4; }
.tabs { scrollbar-width: none; display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button { border: 0; background: none; padding: 10px 14px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-size: 13.5px; }
.tabs button.on { color: var(--bone); border-color: var(--gold); }
.tabs button .badge { background: var(--line-2); color: var(--bone); font-size: 10px; margin-inline-start: 4px; }
.rows { display: flex; flex-direction: column; gap: 8px; }
.rowed { display: grid; gap: 8px; align-items: center; background: var(--ink-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.rowed .in { background: transparent; border-color: transparent; padding: 6px 8px; }
.rowed .in:focus { border-color: var(--line-2); box-shadow: none; background: var(--ink); }
.rowed .n { font: 500 12px Inter; color: var(--gold); text-align: center; }
.rowed.done .in { text-decoration: line-through; color: var(--muted); }
.check { width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 5px; cursor: pointer; display: grid; place-items: center; background: transparent; padding: 0; }
.check.on { background: var(--gold); border-color: var(--gold); }
.check.on::after { content: ""; width: 5px; height: 9px; border: solid #111; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.media { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); }
.media img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.media .cap { padding: 6px 10px; font-size: 12px; color: var(--muted); }
.media .x { position: absolute; top: 6px; inset-inline-end: 6px; }
.drop { border: 1.5px dashed var(--line-2); border-radius: 12px; padding: 22px; text-align: center; color: var(--muted); cursor: pointer; transition: all .2s; }
.drop:hover, .drop.over { border-color: var(--gold); color: var(--gold); background: var(--gold-bg); }
.ref { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--ink-2); }
.ref .fav { width: 28px; height: 28px; border-radius: 8px; background: var(--card-2); display: grid; place-items: center; flex: none; }
.ref .fav img { width: 16px; height: 16px; }
.ref a { color: var(--gold); word-break: break-all; font-size: 12.5px; }
.kv { display: grid; grid-template-columns: 110px 1fr; gap: 10px 12px; align-items: center; }
.kv > label { font-size: 12.5px; color: var(--muted); }
.saved { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.saved i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }
.saved.dirty i { background: var(--orange); }

/* calendar */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--line); gap: 1px; }
.cal .dh { background: var(--ink-2); padding: 8px; font-size: 12px; color: var(--muted); text-align: center; }
.cal .day { background: var(--card); min-height: 116px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.cal .day.out { background: var(--ink-2); opacity: .55; }
.cal .day.today .dn { background: var(--gold); color: #111; }
.cal .dn { font: 500 12px Inter; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); }
.cal .ev { font-size: 11.5px; padding: 3px 7px; border-radius: 6px; background: var(--card-2); border-inline-start: 2px solid var(--gold); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* clients & library */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile { padding: 18px; transition: border-color .25s, transform .25s var(--ease); cursor: pointer; display: block; }
.tile:hover { border-color: var(--line-2); transform: translateY(-2px); }
.avatar { width: 42px; height: 42px; border-radius: 12px; background: linear-gradient(135deg, #3a3120, #1f1c15); border: 1px solid rgba(212,176,113,.3); display: grid; place-items: center; color: var(--gold); font-weight: 600; font-size: 17px; flex: none; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.domain { padding: 20px; position: relative; overflow: hidden; }
.domain .ic { font-size: 28px; }
.domain .n { font: 600 30px Inter; }
.domain::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 140px; height: 140px; border-radius: 50%; background: radial-gradient(circle, rgba(212,176,113,.12), transparent 70%); }

/* charts */
.chart { width: 100%; height: 240px; }
.chart text { fill: var(--muted); font: 11px Inter; }
.bars { display: flex; flex-direction: column; gap: 10px; }
.bars .b { display: grid; grid-template-columns: 120px 1fr 90px; gap: 10px; align-items: center; font-size: 13px; }
.bars .track { height: 8px; background: var(--ink-2); border-radius: 8px; overflow: hidden; }
.bars .track i { display: block; height: 100%; background: linear-gradient(90deg, #8d6a2e, var(--gold)); border-radius: 8px; }

/* modal / toast */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); display: grid; place-items: center; z-index: 50; padding: 16px; animation: fade .2s; }
.modal { width: min(560px, 100%); max-height: 90vh; overflow: auto; background: var(--card); border: 1px solid var(--line-2); border-radius: 18px; padding: 22px; animation: pop .3s var(--ease); }
.modal h3 { margin: 0 0 14px; font-size: 18px; }
.toasts { position: fixed; bottom: 20px; left: 20px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast { background: var(--card-2); border: 1px solid var(--line-2); padding: 10px 16px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: pop .3s var(--ease); font-size: 13.5px; }
.toast.ok { border-color: rgba(111,207,151,.4); } .toast.bad { border-color: rgba(235,111,111,.5); }
@keyframes fade { from { opacity: 0; } } @keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.98); } }
.fade-in { animation: pop .35s var(--ease); }
.skel { height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--card), var(--card-2), var(--card)); background-size: 200% 100%; animation: sk 1.2s infinite; }
@keyframes sk { to { background-position: -200% 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { .editor { grid-template-columns: 1fr; } .editor .aside { position: static; } .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .side { display: none; }
  .main { padding: 16px 16px 96px; }
  .mnav { display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 40; background: rgba(24,24,30,.94); backdrop-filter: blur(16px); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; }
  .mnav a { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 10.5px; color: var(--muted); padding: 4px 6px; position: relative; }
  .mnav a.on { color: var(--gold); }
  .mnav svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.6; }
  .mnav .badge { position: absolute; top: -2px; inset-inline-end: 0; font-size: 9px; padding: 0 5px; }
  .inbox { grid-template-columns: 1fr; }
  .qlist { position: static; max-height: 240px; }
  .review { padding: 18px; }
  .g2, .g3, .g4 { grid-template-columns: 1fr 1fr; }
  .search .in { min-width: 0; width: 100%; }
  .top h1 { font-size: 22px; }
  .cal .day { min-height: 70px; } .cal .ev { font-size: 10px; padding: 2px 4px; }
  .kv { grid-template-columns: 1fr; gap: 4px 0; }
  .bars .b { grid-template-columns: 90px 1fr 70px; }
}
@media (max-width: 520px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } .stat .v { font-size: 22px; } }

/* ---------- fixes ---------- */
.seg svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.chip.en, .tag.en { direction: ltr; unicode-bidi: isolate; }
@media (max-width: 860px) {
  .filters, .chips.scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -16px; padding-inline: 16px; }
  .filters > * { flex: none; }
  .filters .search { flex: 1 0 200px; }
  .top .actions .search { flex: 1; }
}

/* invoice line items */
.item-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.item-head { display: flex; align-items: center; gap: 8px; }
.item-head .n { font: 600 12px Inter; color: #111; background: var(--gold); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.item-head .in { font-weight: 500; }
.item-card > .in.small { color: var(--text-2); }
.item-nums { display: grid; grid-template-columns: 90px 1fr 1fr; gap: 8px; align-items: end; }
.item-nums label, .item-total { display: flex; flex-direction: column; gap: 4px; }
.item-nums label span, .item-total span { font-size: 11.5px; color: var(--muted); }
.item-total { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; }
.item-total b { font-size: 16px; color: var(--gold); }
@media (max-width: 520px) { .item-nums { grid-template-columns: 1fr 1fr; } .item-total { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; } }
.chip { white-space: nowrap; }
@media (max-width: 520px) { .grid.g4 { grid-template-columns: 1fr 1fr; } .stat { padding: 12px 14px; } .stat .v { font-size: 20px; } .stat .d { font-size: 11px; } }