/*
    StreamTracker shared design system — the canonical theme for web + apps.
    Loaded via _content/PicassoRayne.StreamTracker.UI/streamtracker-ui.css.
    Copyright © 2026 Picasso Rayne Studios LLC. All rights reserved.
*/
:root {
    --st-primary: #4f7cff;
    --st-primary-dark: #2f5ce0;
    --st-accent: #22d3ee;
    --st-secondary: #8b5cf6;
    --st-gradient: linear-gradient(135deg, #4f7cff 0%, #8b5cf6 55%, #22d3ee 100%);
    --st-bg: #0a0e1a;
    --st-bg-2: #070b16;
    --st-panel: #111a2e;
    --st-text: #eaf0ff;
    --st-muted: #97a3c2;
    --st-border: #1e2a45;
    --st-success: #00d28a;
    --st-danger: #ff5a6a;
}

/* Brand mark — gradient "ST" square. */
.st-brand-mark {
    display: grid; place-items: center; width: 44px; height: 44px; flex: none;
    border-radius: 14px; background: var(--st-gradient); color: #fff;
    font-weight: 800; font-size: 1rem; letter-spacing: .02em;
    box-shadow: 0 8px 24px rgba(79, 124, 255, .35);
}
.st-brand-mark.sm { width: 32px; height: 32px; border-radius: 10px; font-size: .8rem; }
.st-brand-text { display: inline-flex; flex-direction: column; line-height: 1.15; }
.st-brand-text strong { color: var(--st-text); font-size: 1.05rem; }
.st-brand-text small { color: var(--st-muted); font-size: .72rem; }

/* Eyebrow label above a page heading. */
.st-eyebrow { color: var(--st-primary); text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 800; margin-bottom: .35rem; }

/* Page header. */
.st-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.st-page-title { margin: 0; font-size: 1.9rem; font-weight: 800; color: var(--st-text); letter-spacing: -.01em; }
.st-page-subtitle { margin: .35rem 0 0; color: var(--st-muted); }
.st-page-actions { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }

/* Cards / panels. */
.st-card, .st-stat-card, .st-panel {
    background: linear-gradient(180deg, var(--st-panel), #0d1424);
    border: 1px solid var(--st-border); border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.st-card, .st-panel { padding: 1.5rem; }
.st-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.st-card-title { margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--st-text); }
.st-card-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.st-card-body { color: var(--st-text); }

/* Stat tiles. */
.st-stat-card { padding: 1.25rem 1.4rem; position: relative; }
.st-stat-card .st-stat-icon { font-size: 1.3rem; margin-bottom: .4rem; opacity: .9; }
.st-stat-card .st-stat-value { font-size: 2.1rem; font-weight: 800; color: #fff; line-height: 1.1; }
.st-stat-card .st-stat-label { color: var(--st-muted); margin-top: .15rem; }
.st-stat-card .st-stat-sub { color: var(--st-muted); font-size: .8rem; margin-top: .35rem; opacity: .85; }
.st-stat-card .st-stat-trend { margin-top: .5rem; font-size: .82rem; font-weight: 700; }
.st-stat-card .st-stat-trend.up { color: var(--st-success); }
.st-stat-card .st-stat-trend.down { color: var(--st-danger); }

/* Buttons. */
.st-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; border: 1px solid var(--st-border); border-radius: 12px; padding: .7rem 1rem; color: #fff; background: var(--st-bg-2); text-decoration: none; cursor: pointer; font-weight: 600; transition: filter .15s ease, transform .15s ease; }
.st-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.st-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; filter: none; }
.st-btn-primary { background: var(--st-gradient); border: none; box-shadow: 0 6px 20px rgba(79, 124, 255, .28); }

/* Badges / pills. */
.st-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .55rem; border-radius: 999px; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; line-height: 1.6; }
.st-badge-pro { background: var(--st-gradient); color: #fff; }
.st-badge-free { background: rgba(151, 163, 194, .15); color: var(--st-muted); }
.st-badge-success { background: rgba(0, 210, 138, .16); color: var(--st-success); }
.st-badge-danger { background: rgba(255, 90, 106, .16); color: var(--st-danger); }
.st-badge-neutral { background: rgba(255, 255, 255, .06); color: var(--st-text); }

/* Empty states. */
.st-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--st-muted); }
.st-empty-icon { font-size: 2.4rem; margin-bottom: .6rem; opacity: .8; }
.st-empty-title { margin: 0 0 .35rem; color: var(--st-text); font-size: 1.1rem; font-weight: 700; }
.st-empty-body { margin: 0 auto 1rem; max-width: 28rem; }
.st-empty-actions { display: flex; align-items: center; justify-content: center; gap: .6rem; flex-wrap: wrap; }

/* Clip grid + cards (shared Clips screen). */
.st-clip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.st-clip-card { background: linear-gradient(180deg, var(--st-panel), #0d1424); border: 1px solid var(--st-border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.st-clip-thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #000; display: block; }
.st-clip-body { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.st-clip-title { font-weight: 700; color: var(--st-text); font-size: .92rem; line-height: 1.25; }
.st-clip-meta { color: var(--st-muted); font-size: .78rem; display: flex; gap: .6rem; flex-wrap: wrap; }
.st-clip-watch { margin: 0 .8rem .8rem; }

/* Auto Clips screen. */
.autoclips-usage { margin-bottom: 1rem; }
.autoclips-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.autoclips-actions { display: flex; gap: .5rem; padding: 0 .8rem .8rem; flex-wrap: wrap; }

/* Schedule segments (shared Schedule screen). */
.schedule-segment { margin-bottom: .8rem; }
.schedule-row { display: flex; align-items: center; gap: 1rem; }
.schedule-when { display: flex; flex-direction: column; min-width: 6rem; flex: none; }
.schedule-when strong { color: var(--st-text); }
.schedule-when small { color: var(--st-muted); }
.schedule-main { flex: 1; display: flex; flex-direction: column; }
.schedule-main strong { color: var(--st-text); }
.schedule-main small { color: var(--st-muted); }

/* Misc helpers used by shared screens. */
.st-muted-note { color: var(--st-muted); margin: 0; }
.st-channel-picker { margin-bottom: 1rem; }
.st-channel-picker label { display: inline-flex; flex-direction: column; gap: .3rem; color: var(--st-muted); font-size: .85rem; }
.st-channel-picker select { background: var(--st-bg-2); color: var(--st-text); border: 1px solid var(--st-border); border-radius: 10px; padding: .5rem .7rem; min-width: 220px; }

/* Connections screen. */
.st-connection-row { display: flex; align-items: center; gap: .8rem; }
.st-connection-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; background: var(--st-bg-2); }
.st-connection-meta { color: var(--st-muted); font-size: .82rem; }

/* Pricing / plans screen. */
.st-card-price { font-size: 1.8rem; font-weight: 800; color: var(--st-text); }
.pricing-features { list-style: none; padding: 0; margin: .8rem 0 0; display: grid; gap: .5rem; }
.pricing-features li { color: var(--st-muted); padding-left: 1.4rem; position: relative; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--st-success); font-weight: 800; }

/* Nav items. */
.st-nav a { display: flex; align-items: center; gap: .5rem; color: var(--st-muted); padding: .6rem .85rem; border-radius: 12px; text-decoration: none; font-weight: 500; transition: background .12s, color .12s; }
.st-nav a:hover { color: #fff; background: rgba(255, 255, 255, .04); }
.st-nav a.active { color: #fff; background: linear-gradient(90deg, rgba(79, 124, 255, .20), rgba(79, 124, 255, .02)); box-shadow: inset 3px 0 0 var(--st-accent); }