/* InterCasino Yayın Paneli — design layer (2026-10-03). Loaded after the legacy sheets; overrides their primitives. */
:root {
  --ui-bg: #f4f2f3;
  --ui-surface: #ffffff;
  --ui-subtle: #faf8f9;
  --ui-line: #ebe5e8;
  --ui-line-strong: #d9cfd4;
  --ui-text: #1d1418;
  --ui-muted: #74666d;
  --ui-faint: #a3959c;
  --ui-brand: #941b3b;
  --ui-brand-strong: #6f1029;
  --ui-brand-soft: #fbeef2;
  --ui-gold: #c7a45b;
  --ui-gold-soft: #fbf5e8;
  --ui-side: #2a0610;
  --ui-side-2: #3b0a17;
  --ui-ok: #127a46;
  --ui-ok-soft: #e8f6ee;
  --ui-warn: #a46200;
  --ui-warn-soft: #fff4e0;
  --ui-bad: #b3232d;
  --ui-bad-soft: #fdecee;
  --ui-info: #2754a3;
  --ui-info-soft: #ebf1fc;
  --ui-radius: 14px;
  --ui-radius-sm: 9px;
  --ui-shadow: 0 1px 2px rgba(42, 6, 16, .04), 0 8px 24px rgba(42, 6, 16, .06);
  --ui-font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ui-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
}

html, body.ui { background: var(--ui-bg); }
body.ui { margin: 0; color: var(--ui-text); font: 14px/1.5 var(--ui-font); -webkit-font-smoothing: antialiased; }
body.ui a { color: var(--ui-brand); }
body.ui .mono { font-family: var(--ui-mono); font-size: 12.5px; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 6px;
  background: linear-gradient(180deg, var(--ui-side-2), var(--ui-side)); color: #f3dfe5; padding: 18px 14px; box-sizing: border-box; overflow-y: auto; z-index: 40; }
.side-brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 18px; text-decoration: none; color: #fff !important; }
.side-brand__mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-weight: 800; letter-spacing: .5px;
  background: linear-gradient(135deg, var(--ui-gold), #e3c98d); color: var(--ui-side); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); }
.side-brand__copy { display: flex; flex-direction: column; line-height: 1.15; }
.side-brand__copy strong { font-size: 14px; letter-spacing: 1.2px; }
.side-brand__copy small { color: #d5b9c1; font-size: 12px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.side-group { margin: 16px 10px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: #b08d98; }
.side-link { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 10px; color: #ecd8de !important;
  text-decoration: none; font-weight: 500; transition: background .15s, color .15s; }
.side-link:hover { background: rgba(255, 255, 255, .07); color: #fff !important; }
.side-link.is-active { background: rgba(199, 164, 91, .16); color: #fff !important; box-shadow: inset 3px 0 0 var(--ui-gold); }
.side-icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.side-user { display: flex; align-items: center; gap: 8px; padding: 12px 8px 4px; border-top: 1px solid rgba(255, 255, 255, .09); flex-wrap: wrap; }
.side-user__avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .12); font-weight: 700; color: #fff; }
.side-user__name { flex: 1; color: #fff; font-weight: 600; }
.side-user form { margin: 0; }
.side-user__link { background: none; border: 0; padding: 4px 6px; color: #d5b9c1 !important; font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: none; border-radius: 6px; }
.side-user__link:hover { color: #fff !important; background: rgba(255, 255, 255, .08); }
.main { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 28px;
  background: rgba(244, 242, 243, .86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ui-line); }
.topbar__menu { display: none; flex-direction: column; gap: 4px; padding: 9px; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 9px; cursor: pointer; }
.topbar__menu span { display: block; width: 18px; height: 2px; background: var(--ui-text); border-radius: 2px; }
.topbar__title { font-weight: 650; color: var(--ui-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__clock { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--ui-surface);
  border: 1px solid var(--ui-line); font-variant-numeric: tabular-nums; }
.topbar__clock-label { font-size: 11px; font-weight: 700; color: var(--ui-muted); letter-spacing: .6px; }
.topbar__clock strong { color: var(--ui-text) !important; font-size: 14px; font-weight: 750; opacity: 1; }
.sidebar-scrim { display: none; }
body.ui .app-container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 26px 28px 60px; box-sizing: border-box; }

/* ---------- headings & breadcrumbs ---------- */
body.ui .app-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 10px; padding: 0; background: none; border: 0; font-size: 12.5px; color: var(--ui-faint); }
body.ui .app-nav a { color: var(--ui-muted); text-decoration: none; padding: 0; background: none; border: 0; font-weight: 500; }
body.ui .app-nav a:hover { color: var(--ui-brand); }
body.ui .page-heading, body.ui .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; padding: 0; background: none; border: 0; }
body.ui .page-heading h1, body.ui .page-header h1 { margin: 2px 0 0; font-size: 27px; line-height: 1.15; letter-spacing: -.4px; font-weight: 750; color: var(--ui-text); }
body.ui .page-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ui-brand); }
body.ui .page-actions, body.ui .page-heading > div:last-child:not(:first-child) { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
body.ui .section-heading { display: flex; align-items: flex-end; justify-content: space-between; margin: 0 0 12px; }
body.ui .section-heading h2 { margin: 0; font-size: 17px; }
body.ui .section-heading p { margin: 2px 0 0; color: var(--ui-muted); }

/* ---------- surfaces ---------- */
body.ui .app-card, body.ui .panel, body.ui .setting-panel, body.ui .table-panel, body.ui .log-table-card {
  background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 22px; margin-bottom: 18px; }
body.ui .table-wrapper, body.ui .table-wrap, body.ui .log-table-wrap { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow); overflow: auto; margin-bottom: 18px; }
body.ui table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; }
body.ui thead th { position: sticky; top: 0; background: var(--ui-subtle); color: var(--ui-muted); font-size: 11px; font-weight: 700; letter-spacing: .7px;
  text-transform: uppercase; text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--ui-line); white-space: nowrap; }
body.ui tbody td { padding: 13px 16px; border-bottom: 1px solid var(--ui-line); vertical-align: middle; background: transparent; }
body.ui tbody tr:last-child td { border-bottom: 0; }
body.ui tbody tr:hover td { background: #fdfafb; }
body.ui .table-primary { font-weight: 650; color: var(--ui-text); }
body.ui .table-secondary { color: var(--ui-muted); font-size: 12.5px; }
body.ui .truncate { max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.ui .action-cell { white-space: nowrap; text-align: right; }
body.ui .action-cell > *, body.ui .firm-card-actions > * { margin: 2px; }
body.ui .empty-state { padding: 36px 16px; text-align: center; color: var(--ui-muted); }
body.ui .card-grid { display: none; }

/* ---------- buttons ---------- */
body.ui .btn, body.ui .button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: var(--ui-radius-sm);
  border: 1px solid var(--ui-line-strong); background: var(--ui-surface); color: var(--ui-text) !important; font: 600 13px/1 var(--ui-font); text-decoration: none;
  cursor: pointer; transition: transform .05s, box-shadow .15s, background .15s, border-color .15s; box-shadow: 0 1px 1px rgba(0, 0, 0, .03); white-space: nowrap; }
body.ui .btn:hover { border-color: #c4b3bb; background: #fdfbfc; }
body.ui .btn:active { transform: translateY(1px); }
body.ui .btn-primary, body.ui .button-primary, body.ui .login-submit { background: linear-gradient(180deg, #a3213f, var(--ui-brand)); border-color: var(--ui-brand-strong);
  color: #fff !important; box-shadow: 0 6px 14px rgba(148, 27, 59, .22); }
body.ui .btn-primary:hover { background: linear-gradient(180deg, #ad2747, #861733); border-color: var(--ui-brand-strong); }
body.ui .btn-danger, body.ui .button-danger { background: var(--ui-surface); border-color: #f0c2c7; color: var(--ui-bad) !important; }
body.ui .btn-danger:hover { background: var(--ui-bad-soft); border-color: #e59aa2; }
body.ui .btn-quiet, body.ui .btn-light { border-color: transparent; background: transparent; color: var(--ui-muted) !important; box-shadow: none; }
body.ui .btn-quiet:hover { background: var(--ui-brand-soft); color: var(--ui-brand) !important; }
body.ui .btn-gold { background: linear-gradient(180deg, #d6b56f, var(--ui-gold)); border-color: #b08d45; color: #2a0610 !important; }
body.ui .btn-sm { min-height: 30px; padding: 0 11px; font-size: 12.5px; }
body.ui .btn-xs { min-height: 26px; padding: 0 9px; font-size: 12px; }
body.ui .inline-action { display: inline; margin: 0; }

/* ---------- tags ---------- */
body.ui .tag, body.ui .badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 650;
  background: var(--ui-subtle); color: var(--ui-muted); border: 1px solid var(--ui-line); white-space: nowrap; }
body.ui .tag-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; display: inline-block; }
body.ui .tag-active, body.ui .badge-success { background: var(--ui-ok-soft); color: var(--ui-ok); border-color: #bfe5cf; }
body.ui .tag-passive, body.ui .badge-soft { background: #f3f0f1; color: #85777e; border-color: var(--ui-line); }
body.ui .tag-warn { background: var(--ui-warn-soft); color: var(--ui-warn); border-color: #f2d6a6; }
body.ui .tag-info { background: var(--ui-info-soft); color: var(--ui-info); border-color: #c9d8f4; }
body.ui .badge-danger, body.ui .tag-bad { background: var(--ui-bad-soft); color: var(--ui-bad); border-color: #f1c4c8; }

/* ---------- forms ---------- */
body.ui .form-group, body.ui .field { margin-bottom: 18px; }
body.ui label { font-weight: 600; font-size: 13px; color: var(--ui-text); }
body.ui .form-group > label:first-child { display: block; margin-bottom: 7px; }
body.ui input[type=text], body.ui input[type=password], body.ui input[type=number], body.ui input[type=email], body.ui input[type=search],
body.ui input[type=datetime-local], body.ui input[type=time], body.ui input[type=url], body.ui select, body.ui textarea {
  width: 100%; box-sizing: border-box; min-height: 40px; padding: 9px 12px; border: 1px solid var(--ui-line-strong); border-radius: var(--ui-radius-sm);
  background: #fff; color: var(--ui-text); font: 14px var(--ui-font); transition: border-color .15s, box-shadow .15s; }
body.ui textarea { min-height: 120px; font-family: var(--ui-mono); font-size: 12.5px; }
body.ui input:focus, body.ui select:focus, body.ui textarea:focus { outline: 0; border-color: var(--ui-brand); box-shadow: 0 0 0 4px rgba(148, 27, 59, .12); }
body.ui input[type=file] { font-size: 13px; }
body.ui input[type=checkbox], body.ui input[type=radio] { accent-color: var(--ui-brand); width: 16px; height: 16px; }
body.ui .checkbox-inline { display: flex; align-items: center; gap: 9px; margin: 6px 0; }
body.ui .checkbox-inline label { font-weight: 500; }
body.ui .hint { margin-top: 6px; color: var(--ui-muted); font-size: 12.5px; }
body.ui .filter-bar { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 14px 16px; margin-bottom: 16px; box-shadow: var(--ui-shadow); }
body.ui .filter-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
body.ui .filter-row > div { min-width: 160px; }
body.ui .filter-row label { display: block; margin-bottom: 5px; font-size: 12px; color: var(--ui-muted); }

/* ---------- flash ---------- */
body.ui .flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--ui-radius-sm); margin-bottom: 16px; font-weight: 550; border: 1px solid; }
body.ui .flash::before { content: ""; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex: none; background: currentColor; }
body.ui .flash-success { background: var(--ui-ok-soft); color: var(--ui-ok); border-color: #bfe5cf; }
body.ui .flash-error { background: var(--ui-bad-soft); color: var(--ui-bad); border-color: #f1c4c8; }

/* ---------- metrics ---------- */
body.ui .overview-strip, .kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 22px; }
body.ui .overview-metric, body.ui .metric-card, .kpi { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); padding: 16px 18px; box-shadow: var(--ui-shadow); }
body.ui .overview-metric__label, body.ui .metric-label, .kpi small { display: block; font-size: 12px; font-weight: 650; color: var(--ui-muted); }
body.ui .overview-metric strong, body.ui .metric-value, .kpi strong { display: block; margin-top: 6px; font-size: 26px; font-weight: 750; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
body.ui .overview-metric--success strong, body.ui .metric-card--success .metric-value { color: var(--ui-ok); }
body.ui .overview-metric--danger strong, body.ui .metric-card--danger .metric-value { color: var(--ui-bad); }
.kpi--brand strong { color: var(--ui-brand); }
.kpi small + span { display: block; margin-top: 4px; color: var(--ui-muted); font-size: 12.5px; }
body.ui .count-cluster { display: flex; gap: 12px; flex-wrap: wrap; color: var(--ui-muted); font-size: 12.5px; }
body.ui .count-cluster strong { color: var(--ui-text); }
body.ui .automation-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; font-weight: 650; font-size: 12.5px; text-decoration: none;
  border: 1px solid var(--ui-line); background: var(--ui-surface); }
body.ui .automation-status--active { color: var(--ui-ok) !important; border-color: #bfe5cf; background: var(--ui-ok-soft); }
body.ui .automation-status--inactive { color: var(--ui-bad) !important; border-color: #f1c4c8; background: var(--ui-bad-soft); }

/* ---------- dashboard / site widgets ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.box { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 20px; }
.box h3 { margin: 0 0 14px; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.box h3 .spacer { flex: 1; }
.box h3 a { font-size: 12.5px; font-weight: 600; text-decoration: none; }
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--ui-line); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .sub { color: var(--ui-muted); font-size: 12.5px; }
.next-slot { display: flex; align-items: center; gap: 16px; }
.next-slot__time { font-size: 34px; font-weight: 800; letter-spacing: -1px; color: var(--ui-brand); font-variant-numeric: tabular-nums; }

/* ---------- pop-up handover ---------- */
.clock-banner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; margin-bottom: 18px; border-radius: var(--ui-radius);
  background: linear-gradient(135deg, var(--ui-side-2), #5a1024); color: #f6e7ec; box-shadow: var(--ui-shadow); }
.clock-banner strong { font-size: 22px; color: #fff; font-variant-numeric: tabular-nums; }
.clock-banner .muted { color: #d9bcc5; font-size: 12.5px; }
.handover { display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 0; align-items: stretch; margin-bottom: 22px; }
.handover__arrow { display: grid; place-items: center; color: var(--ui-gold); font-size: 26px; }
.pcard { position: relative; background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 18px; box-shadow: var(--ui-shadow); padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.pcard--live { border-color: #bfe5cf; box-shadow: 0 0 0 4px rgba(18, 122, 70, .07), var(--ui-shadow); }
.pcard--next { border-color: #ead7a8; box-shadow: 0 0 0 4px rgba(199, 164, 91, .12), var(--ui-shadow); }
.pcard--empty { border-style: dashed; box-shadow: none; background: var(--ui-subtle); align-items: center; justify-content: center; text-align: center; min-height: 260px; }
.pcard__label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.pcard--live .pcard__label { color: var(--ui-ok); }
.pcard--next .pcard__label { color: #8a6a1f; }
.pulse { width: 9px; height: 9px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: pulse 1.8s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 122, 70, .5); } 70% { box-shadow: 0 0 0 9px rgba(18, 122, 70, 0); } 100% { box-shadow: 0 0 0 0 rgba(18, 122, 70, 0); } }
.pcard__title { font-size: 18px; font-weight: 750; margin: 0; }
.pcard__sub { color: var(--ui-muted); margin-top: -6px; }
.pcard__media { display: grid; place-items: center; min-height: 150px; padding: 8px; border-radius: 12px; background: repeating-linear-gradient(45deg, #faf6f7, #faf6f7 10px, #f4eef0 10px, #f4eef0 20px);
  overflow: hidden; border: 1px solid var(--ui-line); color: var(--ui-faint); font-size: 12.5px; }
/* whole pop-up visible (posters are tall): full card width, capped height, never cropped */
.pcard__media a { display: block; line-height: 0; cursor: zoom-in; }
.pcard__media img { display: block; max-width: 100%; max-height: 560px; width: auto; height: auto; object-fit: contain; border-radius: 8px; }
.window { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 4px 10px; align-items: baseline; padding: 10px 12px;
  border: 1px solid var(--ui-line); border-radius: 10px; font-size: 13px; }
.window span { color: var(--ui-muted); font-size: 12px; }
.window b { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .window { grid-template-columns: auto 1fr; } }
.pcard__zoom { font-size: 12px; color: var(--ui-muted); text-align: center; margin-top: -4px; }
.pcard__meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.pcard__meta dt { color: var(--ui-muted); }
.pcard__meta dd { margin: 0; font-weight: 600; }
.countdown { border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.countdown small { font-size: 12px; font-weight: 650; }
.countdown strong { font-size: 24px; font-weight: 800; letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.countdown--end { background: var(--ui-bad-soft); color: var(--ui-bad); }
.countdown--start { background: var(--ui-gold-soft); color: #7a5a14; }
.countdown--none { background: var(--ui-subtle); color: var(--ui-muted); }
.pcard__actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 22px; }
.step { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: 12px; padding: 12px 14px; font-size: 12.5px; color: var(--ui-muted); }
.step b { display: block; color: var(--ui-text); font-size: 13px; margin-bottom: 2px; }
details.more { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); }
details.more summary { cursor: pointer; padding: 14px 18px; font-weight: 650; list-style: none; }
details.more[open] summary { border-bottom: 1px solid var(--ui-line); }
details.more .table-wrapper { border: 0; box-shadow: none; margin: 0; border-radius: 0 0 var(--ui-radius) var(--ui-radius); }

/* ---------- form layout helpers ---------- */
.form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.form-section { border-top: 1px solid var(--ui-line); margin-top: 6px; padding-top: 18px; }
.form-section h3 { margin: 0 0 14px; font-size: 14px; color: var(--ui-muted); text-transform: uppercase; letter-spacing: 1px; }
.form-actions { display: flex; gap: 10px; flex-wrap: wrap; border-top: 1px solid var(--ui-line); padding-top: 18px; margin-top: 8px; }
.callout { display: flex; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--ui-gold-soft); border: 1px solid #ead7a8; color: #6c5013; margin-bottom: 18px; }
.callout--info { background: var(--ui-info-soft); border-color: #c9d8f4; color: #23477f; }
.upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.drop { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1.5px dashed var(--ui-brand); border-radius: 12px; background: var(--ui-brand-soft); cursor: pointer; font-size: 13px; }
.drop--soft { border-color: var(--ui-line); background: var(--ui-subtle); }
.drop em { font-style: normal; color: var(--ui-muted); font-weight: 500; }
.drop input[type=file] { font-size: 12px; max-width: 100%; }
.pcard--prepare { border: 1.5px solid #ead7a8; background: linear-gradient(180deg, var(--ui-gold-soft), #fff 55%); }
details.mini { border-top: 1px solid var(--ui-line); padding-top: 10px; }
details.mini summary { cursor: pointer; font-weight: 650; font-size: 13px; color: var(--ui-brand); }
details.mini form { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.clock-chip { display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 14px; border: 1px solid var(--ui-line); border-radius: 999px; background: #fff; }
.clock-chip strong { font-variant-numeric: tabular-nums; font-size: 18px; }
@media (max-width: 760px) { .upload-grid { grid-template-columns: 1fr; } }
.callout > div:first-child { flex: 1; line-height: 1.55; }
.callout .countdown { min-width: 200px; }
@media (max-width: 760px) { .callout { flex-direction: column; } .callout .countdown { min-width: 0; } }
.picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.picker button { display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; border-radius: 10px; border: 1px solid var(--ui-line); background: #fff; cursor: pointer; font: 600 12.5px var(--ui-font); }
.picker button:hover { border-color: var(--ui-brand); background: var(--ui-brand-soft); }
.picker img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; background: var(--ui-subtle); }
.picked { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--ui-ok-soft); color: var(--ui-ok); font-weight: 650; margin-top: 10px; }
.thumb { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; background: var(--ui-subtle); border: 1px solid var(--ui-line); flex: none; }
.amount { font-weight: 750; font-variant-numeric: tabular-nums; }

/* ---------- login ---------- */
body.ui-auth { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 20% -10%, #5a1024 0, transparent 60%),
  radial-gradient(900px 500px at 110% 110%, #3b0a17 0, transparent 55%), var(--ui-side); }
body.ui-auth .login-page { width: 100%; display: grid; place-items: center; padding: 24px; box-sizing: border-box; background: none; min-height: auto; }
body.ui-auth .login-box { width: 100%; max-width: 400px; background: var(--ui-surface); border-radius: 20px; padding: 32px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); border: 0; box-sizing: border-box; }
body.ui-auth .login-box::before { content: "TG"; }
body.ui-auth.brand-ic .login-box::before { content: "IC"; }
body.ui-auth .login-box::before { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 15px; font-weight: 800;
  background: linear-gradient(135deg, var(--ui-gold), #e3c98d); color: var(--ui-side); font-size: 18px; letter-spacing: .5px; }
body.ui-auth .login-box__title { text-align: center; font-size: 21px; font-weight: 750; margin: 0; }
body.ui-auth .login-box__subtitle { text-align: center; color: var(--ui-muted); margin: 4px 0 22px; }
body.ui-auth .login-submit { width: 100%; min-height: 44px; }
body.ui-auth .login-brand { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  body.ui .overview-strip, .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: 272px; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 20px 0 50px rgba(0, 0, 0, .3); }
  body.side-open .sidebar { transform: none; }
  body.side-open .sidebar-scrim { display: block; position: fixed; inset: 0; background: rgba(20, 4, 9, .45); z-index: 35; }
  .topbar { padding: 0 16px; }
  .topbar__menu { display: flex; }
  .topbar__clock-label { display: none; }
  body.ui .app-container { padding: 18px 16px 50px; }
  .grid-2, .steps, .form-cols { grid-template-columns: 1fr; }
  .handover { grid-template-columns: 1fr; }
  .handover__arrow { transform: rotate(90deg); padding: 6px 0; }
  body.ui .table-wrapper:not(.keep) { display: none; }
  body.ui .card-grid { display: grid; gap: 12px; margin-bottom: 18px; }
  body.ui .firm-card { background: var(--ui-surface); border: 1px solid var(--ui-line); border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); padding: 16px; }
  body.ui .firm-card-header { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
  body.ui .firm-title { font-weight: 700; }
  body.ui .firm-sub { color: var(--ui-muted); font-size: 12.5px; }
  body.ui .firm-meta { margin: 10px 0; display: flex; flex-direction: column; gap: 6px; color: var(--ui-muted); font-size: 12.5px; }
  body.ui .firm-card-actions { display: flex; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--ui-line); padding-top: 12px; }
  body.ui .page-heading h1 { font-size: 23px; }
}
@media (max-width: 560px) {
  body.ui .overview-strip, .kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  body.ui .overview-metric strong, .kpi strong { font-size: 21px; }
  .pcard { padding: 16px; }
  .countdown strong { font-size: 20px; }
}