/* ========== Studio (swipe deck + lists) — mobile first ========== */
/* The shared sub-tab bar has eight links here; let it scroll instead of widening the page. */
.ig-sub-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ig-sub-tabs::-webkit-scrollbar { display: none; }
.ig-sub-tab { white-space: nowrap; }

.st-page { max-width: 560px; margin: 0 auto; padding: var(--space-3) 16px var(--space-8); overflow-x: hidden; }
.st-pad { padding: var(--space-4) 0; }
.st-noscroll { overflow: hidden; }

.st-btn-big { min-height: 48px; padding: .75rem 1.25rem; font-size: var(--text-md); border-radius: var(--radius-lg); }
.st-btn-wide { width: 100%; min-height: 48px; font-size: var(--text-md); border-radius: var(--radius-lg); }
.st-link { background: none; border: none; color: var(--muted); font-size: var(--text-sm); cursor: pointer; padding: .6rem .5rem; min-height: 44px; }
.st-link:hover:not(:disabled) { color: var(--text); }
.st-link:disabled { opacity: .35; cursor: default; }

/* ---- Top row ---- */
.st-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.st-upload-btn { flex: 0 0 auto; }
.st-counters { display: flex; flex-wrap: wrap; gap: var(--space-2); flex: 1 1 200px; }
.st-chip { display: inline-flex; align-items: baseline; gap: .3rem; padding: .3rem .65rem; border-radius: var(--radius-full); background: var(--surface-3); border: 1px solid var(--border); font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }
.st-chip strong { color: var(--text); font-size: var(--text-md); }
.st-chip.is-accent:not(.is-zero) { border-color: var(--accent); }
.st-chip.is-accent:not(.is-zero) strong { color: var(--accent); }
.st-chip.is-zero { opacity: .6; }

.st-alerts { display: flex; flex-direction: column; gap: var(--space-2); }
.st-alerts:not(:empty) { margin-bottom: var(--space-3); }
.st-alert { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--warning); background: var(--warning-dim); font-size: var(--text-sm); }
.st-alert.is-error { border-color: var(--error); background: var(--error-dim); }
.st-alert.is-info { border-color: var(--info); background: var(--info-dim); }
.st-alert-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.st-alert-text small { display: block; margin-top: .15rem; }
.st-alert-x { flex: 0 0 auto; width: 36px; height: 36px; border-radius: var(--radius-full); border: none; background: rgba(255,255,255,.08); color: var(--text); cursor: pointer; font-size: 1rem; }

.st-worker { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--muted); margin-bottom: var(--space-3); }
.st-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.st-worker.is-on .st-dot { background: var(--success); box-shadow: 0 0 0 3px var(--success-dim); }
.st-worker.is-off { color: var(--warning); }
.st-worker.is-off .st-dot { background: var(--warning); }

/* ---- Upload progress ---- */
.st-uploads { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); margin-bottom: var(--space-3); }
.st-up-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.st-up-head .st-link { min-height: 32px; padding: .2rem .4rem; }
.st-up-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); max-height: 40vh; overflow-y: auto; }
.st-up-row { display: flex; justify-content: space-between; gap: var(--space-2); font-size: var(--text-sm); }
.st-up-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.st-up-state { color: var(--muted); flex: 0 0 auto; max-width: 60%; text-align: right; overflow-wrap: anywhere; }
.st-up-item.is-done .st-up-state { color: var(--success); }
.st-up-item.is-error .st-up-state { color: var(--error); }
.st-up-bar { height: 4px; background: var(--surface-4); border-radius: 2px; overflow: hidden; margin-top: 4px; }
.st-up-bar span { display: block; height: 100%; background: var(--accent); transition: width .2s; }
.st-up-item.is-done .st-up-bar span { background: var(--success); width: 100% !important; }
.st-up-item.is-error .st-up-bar { background: var(--error-dim); }

.st-drop-overlay { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; background: rgba(10,10,10,.85); border: 3px dashed var(--accent); pointer-events: none; }
.st-drop-overlay span { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--accent); }
.st-dragging .st-drop-overlay { display: flex; }

/* ---- Deck ---- */
.st-deck { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.st-deck-label { font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: .14em; text-align: center; min-height: 1em; }
.st-deck-label .muted { text-transform: none; letter-spacing: 0; font-weight: var(--font-normal); }
.st-card-wrap { width: 100%; display: flex; justify-content: center; }
.st-card {
  position: relative; width: 100%; max-width: 420px; user-select: none; -webkit-user-select: none;
  touch-action: pan-y; cursor: grab; will-change: transform;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: var(--space-2);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
}
.st-card:active { cursor: grabbing; }
.st-media { position: relative; margin: 0 auto; border-radius: 12px; overflow: hidden; background: #000; max-width: 100%; }
.st-media.is-video { aspect-ratio: 9 / 16; height: min(58vh, 620px); }
.st-media.is-photo { aspect-ratio: 4 / 5; height: min(52vh, 520px); }
.st-media.is-small.is-video { height: min(30vh, 300px); }
.st-media.is-small.is-photo { height: min(26vh, 260px); }
.st-media video, .st-media img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.st-badge { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 3px 8px; border-radius: var(--radius-full); background: rgba(0,0,0,.65); font-size: var(--text-xs); font-weight: var(--font-medium); text-transform: uppercase; letter-spacing: .06em; }

.st-text { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.st-field { white-space: pre-line; overflow-wrap: anywhere; font-size: var(--text-base); line-height: 1.55; padding: var(--space-3); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid transparent; cursor: text; }
.st-field:hover { border-color: var(--surface-5); }
.st-field.is-tags { color: var(--info); font-size: var(--text-sm); }
.st-field.is-edited { border-color: var(--accent-dim); }
.st-field.is-edited::after { content: 'edited'; display: block; margin-top: .3rem; font-size: var(--text-xs); color: var(--accent); }
.st-edit { width: 100%; font: inherit; font-size: var(--text-base); line-height: 1.55; color: var(--text); background: var(--surface-1); border: 1px solid var(--accent); border-radius: var(--radius-md); padding: var(--space-3); resize: vertical; }
.st-loc { font-size: var(--text-sm); color: var(--muted); padding: 0 var(--space-1); }
.st-failed { margin-top: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--error-dim); color: #f8a; font-size: var(--text-sm); text-align: center; }

.st-stamp { position: absolute; top: 22px; padding: 2px 10px; border: 3px solid; border-radius: 6px; font-size: 1.4rem; font-weight: 800; text-transform: uppercase; background: rgba(0,0,0,.55); opacity: 0; pointer-events: none; }
.st-stamp.is-no { right: 18px; color: var(--error); transform: rotate(12deg); }
.st-stamp.is-yes { left: 18px; color: var(--accent); transform: rotate(-12deg); }
.st-stamp.is-up { left: 50%; top: 40%; color: var(--purple); transform: translateX(-50%) rotate(-4deg); }

.st-deck-controls { width: 100%; max-width: 420px; display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.st-actions { display: flex; justify-content: center; align-items: center; gap: var(--space-6); }
.st-round { width: 68px; height: 68px; border-radius: 50%; border: 2px solid; background: var(--surface-2); font-size: 1.7rem; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .12s, background .12s; }
.st-round:active:not(:disabled) { transform: scale(.92); }
.st-round:disabled { opacity: .3; cursor: default; }
.st-round.is-no { color: var(--error); border-color: var(--error); }
.st-round.is-yes { color: var(--accent); border-color: var(--accent); }
.st-round.is-up { width: 56px; height: 56px; font-size: 1.4rem; color: var(--purple); border-color: var(--purple); }
.st-round.is-no:hover:not(:disabled) { background: var(--error-dim); }
.st-round.is-yes:hover:not(:disabled) { background: var(--accent-dim); }
.st-round.is-up:hover:not(:disabled) { background: var(--purple-dim); }
.st-note { font-size: var(--text-xs); color: var(--muted); text-align: center; }
.st-secondary { display: flex; justify-content: center; gap: var(--space-4); flex-wrap: wrap; }
.st-undo { background: none; border: none; color: var(--muted); font-size: var(--text-sm); cursor: pointer; padding: .6rem .5rem; min-height: 44px; }
.st-undo:hover:not(:disabled) { color: var(--text); }
.st-undo:disabled { opacity: .35; cursor: default; }
.st-rewrite { width: 100%; display: flex; flex-direction: column; gap: var(--space-2); }
.st-rewrite label { font-size: var(--text-sm); color: var(--muted); }
.st-rewrite textarea, .st-m-pick input { width: 100%; font: inherit; font-size: 16px; color: var(--text); background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-3); }
.st-rewrite textarea:focus, .st-m-pick input:focus { border-color: var(--accent); outline: none; }
.st-deck-hint { font-size: var(--text-xs); color: var(--muted); text-align: center; max-width: 420px; }

.st-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); }
.st-empty h2 { font-size: var(--text-xl); }
.st-empty p { max-width: 320px; }
.st-empty-icon { font-size: 3rem; }
.st-spinner { width: 40px; height: 40px; border: 3px solid var(--surface-5); border-top-color: var(--accent); border-radius: 50%; animation: st-spin .9s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* ---- Match screen ---- */
.st-match { position: fixed; inset: 0; z-index: 70; overflow-y: auto; background: rgba(10,10,10,.96); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.st-m-inner { min-height: 100%; max-width: 360px; margin: 0 auto; padding: var(--space-6) 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); text-align: center; }
.st-m-title { font-size: clamp(2.2rem, 11vw, 3.6rem); font-weight: 800; line-height: 1; letter-spacing: -1px; background: linear-gradient(90deg, var(--accent), var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: st-pop .45s cubic-bezier(.2,1.6,.4,1) both; }
.st-m-thumb { position: relative; width: 96px; aspect-ratio: 9 / 16; border-radius: 10px; overflow: visible; border: 2px solid var(--accent); box-shadow: 0 0 40px rgba(200,255,0,.3); animation: st-pop .45s .08s cubic-bezier(.2,1.6,.4,1) both; }
.st-m-thumb video, .st-m-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.st-m-heart { position: absolute; top: -10px; right: -10px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #000; display: flex; align-items: center; justify-content: center; font-size: 1rem; }
.st-m-line { color: var(--muted); max-width: 300px; animation: st-pop .45s .16s cubic-bezier(.2,1.6,.4,1) both; }
.st-m-ask { margin-top: var(--space-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: var(--font-medium); }
.st-m-pick { width: 100%; text-align: left; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--muted); }
.st-m-pick input { color-scheme: dark; min-height: 48px; }
.st-m-problem { font-size: var(--text-sm); color: var(--warning); min-height: 0; }
.st-m-problem:empty { display: none; }
.st-m-basis { font-size: var(--text-xs); color: var(--muted); }
.st-m-row { display: flex; gap: var(--space-2); width: 100%; }
.st-m-row .btn { flex: 1; min-height: 46px; font-size: var(--text-base); border-radius: var(--radius-lg); }
.st-m-warn { font-size: var(--text-xs); color: var(--warning); }
@keyframes st-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---- Lists ---- */
.st-list-head { padding: var(--space-3); border-radius: var(--radius-md); background: var(--card); border: 1px solid var(--border); font-size: var(--text-sm); margin-bottom: var(--space-3); }
.st-list-head.is-warn { border-color: var(--warning); background: var(--warning-dim); }
.st-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.st-list-empty { padding: var(--space-8) 0; text-align: center; }
.st-row { display: flex; gap: var(--space-3); padding: var(--space-2); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.st-thumb { width: 64px; height: 96px; flex: 0 0 64px; object-fit: cover; border-radius: var(--radius-md); background: #000; }
.st-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.st-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.st-row-caption { font-size: var(--text-sm); color: var(--muted); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.st-row-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.st-row-actions .btn { min-height: 38px; text-decoration: none; display: inline-flex; align-items: center; }
.st-row-edit { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }

/* ---- Grids (Scheduled / Stories / Posted / Rejected) ---- */
.st-page.is-wide { max-width: 1280px; }
.st-grid-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.st-seg { display: inline-flex; padding: 3px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--border); }
.st-seg a { padding: .45rem 1rem; min-height: 36px; display: inline-flex; align-items: center; border-radius: var(--radius-full); color: var(--muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--font-medium); }
.st-seg a.is-on { background: var(--surface-4); color: var(--text); }
.st-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.st-filter { cursor: pointer; min-height: 36px; font: inherit; font-size: var(--text-sm); }
.st-filter[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 4px; }
.st-tile { position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; padding: 0; border: none; border-radius: 4px; overflow: hidden; background: var(--surface-2); cursor: pointer; color: #fff; text-align: left; }
.st-tile:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.st-tile-media, .st-tile-media img, .st-tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.st-tile:hover .st-tile-media img, .st-tile:hover .st-tile-media video { filter: brightness(.85); }
.st-tile.is-upcoming .st-tile-media { opacity: .45; }
.st-tile.is-upcoming { outline: 1px dashed var(--accent-dim); outline-offset: -1px; }
.st-tile-none { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: var(--text-xs); color: var(--muted); }
.st-tile-kind { position: absolute; top: 6px; right: 8px; font-size: .9rem; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.st-tile-foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 18px 6px 6px; background: linear-gradient(transparent, rgba(0,0,0,.75)); font-size: var(--text-xs); font-weight: var(--font-medium); }
.st-tile-when, .st-tile-stat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-tile-when.is-warn { color: var(--warning); }
.st-tile-label { padding: 1px 6px; border-radius: var(--radius-full); font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; background: rgba(0,0,0,.6); }
.st-tile-label.is-reshare { color: #000; background: var(--accent); }
.st-tile-label.is-could_delete { color: #fff; background: var(--error); }
.st-more { display: block; margin: var(--space-4) auto 0; min-height: 44px; }

/* ---- Detail panel ---- */
.st-drawer { margin: 0; padding: 0; border: none; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background: var(--card); color: var(--text); }
.st-drawer::backdrop { background: rgba(0,0,0,.7); }
.st-d-body { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3) 16px var(--space-6); min-height: 100%; }
.st-d-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; position: sticky; top: 0; z-index: 1; background: var(--card); padding: var(--space-1) 0; }
.st-d-when { font-size: var(--text-sm); color: var(--muted); flex: 1 1 140px; min-width: 0; }
.st-d-nav { display: flex; gap: var(--space-1); margin-left: auto; }
.st-d-btn { width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1.1rem; cursor: pointer; }
.st-d-btn:disabled { opacity: .3; cursor: default; }
.st-d-media { background: #000; border-radius: var(--radius-md); overflow: hidden; display: flex; justify-content: center; }
.st-d-media video, .st-d-media img { width: 100%; max-height: 60vh; object-fit: contain; display: block; }
.st-d-media.is-tall video, .st-d-media.is-tall img { aspect-ratio: 9 / 16; width: auto; height: min(60vh, 560px); max-width: 100%; }
.st-d-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--space-2); }
.st-d-stats div { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-2); }
.st-d-stats dt { font-size: var(--text-xs); color: var(--muted); }
.st-d-stats dd { font-size: var(--text-lg); font-weight: var(--font-bold); }
.st-d-label { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--surface-1); border: 1px solid var(--border); }
.st-d-label.is-reshare { border-color: var(--accent); }
.st-d-label.is-reshare strong { color: var(--accent); }
.st-d-label.is-could_delete { border-color: var(--error); }
.st-d-label.is-could_delete strong { color: var(--error); }
.st-d-note { font-size: var(--text-xs); }
.st-d-caption { white-space: pre-line; overflow-wrap: anywhere; font-size: var(--text-sm); line-height: 1.55; }
.st-d-tags { color: var(--info); font-size: var(--text-sm); overflow-wrap: anywhere; }

/* ---- Audience ---- */
.st-au-sec { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); min-width: 0; }
.st-au-sec h2 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.st-au-sec h3 { font-size: var(--text-sm); color: var(--muted); font-weight: var(--font-medium); margin: var(--space-3) 0 var(--space-2); text-transform: uppercase; letter-spacing: .08em; }
.st-au-intro, .st-au-note, .st-au-empty { font-size: var(--text-sm); margin-bottom: var(--space-3); }
.st-au-takeaways { border-color: var(--accent-dim); }
.st-au-takeaways ul { display: flex; flex-direction: column; gap: var(--space-2); padding-left: 1.1rem; }
.st-au-takeaways li { line-height: 1.5; }
.st-au-takeaways strong { color: var(--accent); }
.st-au-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-2); margin-bottom: var(--space-4); }
.st-au-kpi { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.st-au-kpi span { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.st-au-kpi strong { font-size: var(--text-2xl); }
.st-au-kpi small { font-size: var(--text-xs); }
.st-au-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-6); }
.st-au-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.st-au-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); white-space: nowrap; }
.st-au-table th { text-align: left; color: var(--muted); font-weight: var(--font-medium); font-size: var(--text-xs); padding: var(--space-2); border-bottom: 1px solid var(--border); }
.st-au-table td { padding: var(--space-2); border-bottom: 1px solid var(--surface-3); }
.st-au-top { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.st-au-top li { display: flex; align-items: center; gap: var(--space-3); }
.st-au-top img, .st-au-noimg { width: 48px; height: 64px; object-fit: cover; border-radius: var(--radius-sm, 4px); background: var(--surface-2); flex: 0 0 48px; }
.st-au-top-main { flex: 1; min-width: 0; display: flex; flex-direction: column; font-size: var(--text-sm); }
.st-au-top-main small { overflow-wrap: anywhere; }
.st-au-foot { font-size: var(--text-xs); text-align: center; margin-top: var(--space-2); }

.st-ch { width: 100%; height: auto; display: block; }
.st-ch-grid { stroke: var(--surface-4); stroke-width: 1; }
.st-ch-text { fill: var(--muted); font-size: 11px; }
@media (max-width: 639px) { .st-ch-text { font-size: 20px; } }
.st-ch-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.st-ch-line-dot { fill: var(--accent); }
.st-ch-mark { fill: var(--purple); stroke: var(--card); stroke-width: 1.5; cursor: help; }
.st-ch-up { fill: var(--success); }
.st-ch-down { fill: var(--error); }

.st-bars { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.st-bars li { display: grid; grid-template-columns: minmax(70px, 34%) 1fr auto; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.st-bars li.is-dim { opacity: .5; }
.st-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-bar-track { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.st-bar-fill { display: block; height: 100%; background: var(--info); border-radius: 5px; }
.st-bars li.is-top .st-bar-fill { background: var(--accent); }
.st-bar-value { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.st-hm { display: grid; grid-template-columns: 34px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 10px; }
.st-hm-h { color: var(--muted); text-align: left; overflow: visible; white-space: nowrap; }
.st-hm-day { color: var(--muted); display: flex; align-items: center; font-size: var(--text-xs); }
.st-hm-cell { aspect-ratio: 1; min-height: 10px; border-radius: 2px; background: rgba(200, 255, 0, calc(.08 + var(--t) * .85)); }
.st-hm-cell.is-none { background: var(--surface-2); }
.st-hm-cell.is-best { outline: 2px solid var(--purple); outline-offset: -1px; }

@media (min-width: 640px) {
  .st-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
  .st-au-cols { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .st-page { max-width: 720px; }
  .st-page.is-wide { max-width: 1280px; }
  .st-drawer { margin: 0 0 0 auto; width: 460px; border-left: 1px solid var(--border); }
}