/* Studio OS dashboard: scoped so legacy content pages keep their styling. */
.dashboard-page {
    --ink: #191a25; --muted: #858594; --line: #e8e8ee; --surface: #fff;
    --violet: #7267f0; --violet-soft: #eeecff; --orange: #f09a57; --orange-soft: #fff0e4;
    --green: #41b883; --blue: #4c9be8; background: #f8f8fb; color: var(--ink);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: -.01em; -webkit-font-smoothing: antialiased;
}
.dashboard-page * { box-sizing: border-box; }
.dashboard-page button, .dashboard-page select { font: inherit; }
.dashboard-page button { cursor: pointer; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 244px; flex: 0 0 244px; background: #20212c; color: #a8a8b6; padding: 28px 14px 18px; display: flex; flex-direction: column; }
.brand { display:flex; align-items:center; gap:11px; text-decoration:none; color:#fff; padding:0 13px; margin-bottom:43px; }
.brand-mark { width:28px; height:28px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#8b7fff,#5e55cf); border-radius:8px; font-size:17px; box-shadow:0 4px 14px #5c52cc66; }
.brand strong { display:block; font-size:16px; letter-spacing:.01em; font-weight:700; line-height:1.05; }.brand small { display:block; margin-top:4px; font-size:9px; color:#777786; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow,.kicker { color:#9493a3; font-size:10px; letter-spacing:.13em; font-weight:700; }.workspace-switcher { padding:0 10px 29px; }.workspace-switcher .eyebrow { display:block; margin-bottom:10px; }.workspace-button { color:#eeeef5; background:#2c2d3a; border:1px solid #3b3c4a; border-radius:8px; width:100%; text-align:left; padding:10px 11px; font-size:12px; display:flex; align-items:center; gap:8px; }.workspace-dot { width:8px; height:8px; border-radius:50%; background:#7267f0; box-shadow:0 0 0 3px #7267f033; }.chevron { margin-left:auto; color:#8c8b9a; font-size:16px; }
.side-nav { display:flex; flex-direction:column; gap:3px; }.side-nav .eyebrow { padding:0 13px; margin-bottom:9px; }.nav-label { margin-top:30px; }.nav-item { border:0; background:transparent; color:#aeadbb; text-align:left; padding:10px 12px; border-radius:7px; display:flex; align-items:center; gap:11px; font-size:12px; }.nav-item > span:first-child { width:16px; text-align:center; font-size:17px; color:#797987; }.nav-item b { margin-left:auto; color:#777685; font-size:10px; font-weight:500; }.nav-item:hover,.nav-item.active { background:#353544; color:#fff; }.nav-item.active > span:first-child,.nav-item.active b { color:#948bff; }.channel-icon { border-radius:5px; width:18px!important; height:18px; display:grid; place-items:center; font-size:11px!important; color:#fff!important; }.channel-icon.scifi { background:#7267f0; }.channel-icon.money { background:#e89954; }.sidebar-bottom { margin-top:auto; }.storage { margin:0 12px 20px; padding-top:17px; border-top:1px solid #363743; }.storage div:first-child { display:flex; justify-content:space-between; font-size:11px; color:#9998a7; }.storage strong { color:#dddde5; font-size:11px; }.progress { height:4px; border-radius:4px; background:#383946; margin:9px 0 7px; overflow:hidden; }.progress i { display:block; height:100%; width:68%; background:#7267f0; border-radius:4px; }.storage small { font-size:9px; color:#777684; }.user-card { display:flex; align-items:center; gap:9px; width:100%; padding:11px 10px; background:#292a36; border:1px solid #383945; border-radius:8px; color:#fff; text-align:left; }.avatar { width:29px; height:29px; display:grid; place-items:center; background:#c9b99c; color:#3f372e; border-radius:50%; font-size:9px; font-weight:700; }.user-card strong,.user-card small { display:block; }.user-card strong { font-size:11px; }.user-card small { color:#858492; font-size:10px; margin-top:2px; }.more { margin-left:auto; color:#898896; font-size:12px; }
.main-content { flex:1; min-width:0; }.topbar { height:76px; border-bottom:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:space-between; padding:0 clamp(24px,4vw,57px); }.breadcrumb { font-size:12px; color:#9998a5; display:flex; gap:11px; align-items:center; }.breadcrumb i { color:#ceced7; font-style:normal; }.breadcrumb strong { color:#343442; font-weight:600; }.top-actions { display:flex; align-items:center; gap:23px; }.system-status { font-size:11px; color:#70717f; }.system-status i,.dashboard-footer i { display:inline-block; width:6px; height:6px; background:#45ba80; border-radius:50%; margin-right:7px; }.icon-button,.help-button { border:0; background:transparent; color:#858491; position:relative; }.icon-button { font-size:20px; }.icon-button em { position:absolute; width:5px; height:5px; right:-1px; top:1px; border-radius:50%; background:#f09a57; border:1px solid #fff; }.help-button { border-left:1px solid var(--line); padding-left:22px; font-size:12px; }.help-button span { margin-left:5px; color:#6f6e7c; }
.page-content { max-width:1330px; padding:47px clamp(24px,4vw,57px) 28px; margin:auto; }.welcome-row { display:flex; align-items:end; justify-content:space-between; margin-bottom:34px; }.kicker { margin-bottom:10px; }.welcome-row h1 { font-size:28px; line-height:1.15; margin:0 0 10px; letter-spacing:-.04em; font-weight:700; }.welcome-row h1 span { color:#f0a15c; font-size:21px; }.subhead { color:#92919d; font-size:12px; margin:0; }.primary-button { background:#7166ee; color:#fff; border:0; border-radius:7px; padding:11px 16px; font-size:12px; box-shadow:0 5px 12px #7166ee29; transition:transform .2s ease, box-shadow .2s ease; }.primary-button:hover { transform:translateY(-2px); box-shadow:0 8px 18px #7166ee40; }.primary-button span { font-size:18px; vertical-align:-1px; margin-right:6px; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:23px; }.metric-card { background:#fff; border:1px solid var(--line); border-radius:9px; padding:20px 21px 17px; position:relative; overflow:hidden; }.metric-card:before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--violet); }.metric-card.accent-orange:before { background:var(--orange); }.metric-card.accent-green:before { background:var(--green); }.metric-card.accent-blue:before { background:var(--blue); }.metric-top { display:flex; justify-content:space-between; color:#888793; font-size:11px; }.metric-icon { color:var(--violet); font-size:17px; }.accent-orange .metric-icon { color:var(--orange); }.accent-green .metric-icon { color:var(--green); }.accent-blue .metric-icon { color:var(--blue); }.metric-card > strong { display:block; font-size:28px; letter-spacing:-.05em; margin:15px 0 4px; font-variant-numeric:tabular-nums; }.metric-card p { color:#aaa9b4; font-size:10px; margin:0; }.metric-card p b { color:#45b783; font-weight:600; }
.dashboard-grid,.lower-grid { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); gap:23px; margin-bottom:23px; }.panel { background:#fff; border:1px solid var(--line); border-radius:9px; padding:23px; }.panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; }.panel h2 { font-size:16px; letter-spacing:-.025em; margin:0; }.text-button { border:0; background:transparent; color:#7166ee; font-size:11px; padding:4px 0; }.text-button span,.all-tasks span { margin-left:7px; font-size:15px; }.pipeline-list { margin-top:20px; }.pipeline-row { min-height:70px; border-top:1px solid #f0f0f4; display:grid; grid-template-columns:31px minmax(0,1fr) 90px 64px 20px; align-items:center; gap:11px; }.project-symbol { width:29px; height:29px; border-radius:7px; display:grid; place-items:center; font-size:13px; font-weight:700; }.project-symbol.violet { background:var(--violet-soft); color:var(--violet); }.project-symbol.orange { background:var(--orange-soft); color:var(--orange); }.project-copy { min-width:0; }.project-copy > div { display:flex; align-items:center; gap:8px; }.project-copy strong { font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.project-copy p { margin:5px 0 0; color:#aaa9b4; font-size:10px; }.tag { font-size:8px; border-radius:4px; padding:3px 5px; letter-spacing:.06em; font-weight:700; white-space:nowrap; }.tag-violet { color:#7166ee; background:#f0efff; }.tag-orange { color:#d9823d; background:#fff1e5; }.stage { color:#777684; font-size:10px; white-space:nowrap; }.stage-dot { display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:5px; background:#b3b2bf; }.stage-dot.recording { background:#e27474; box-shadow:0 0 0 3px #e2747420; }.stage-dot.edit { background:#efa15d; }.stage-dot.review { background:#7267f0; }.stage-dot.script { background:#51b78b; }.due { color:#a3a2ae; font-size:10px; white-space:nowrap; }.row-menu { border:0; background:transparent; color:#b1b0bd; font-size:11px; letter-spacing:1px; }.count-badge { display:grid; place-items:center; width:22px; height:22px; background:#fbe9e8; color:#d87570; font-size:10px; border-radius:50%; }.attention-list { margin-top:19px; }.attention-item { border:0; background:transparent; padding:14px 0; width:100%; border-top:1px solid #f0f0f4; display:flex; align-items:center; gap:11px; text-align:left; }.attention-icon { width:25px; height:25px; border-radius:7px; display:grid; place-items:center; font-size:12px; font-weight:700; }.attention-icon.red { background:#fbe9e8; color:#df7971; }.attention-icon.yellow { background:#fff2df; color:#e3a144; }.attention-icon.blue { background:#e8f2fc; color:#5e9dde; }.attention-item strong,.attention-item small { display:block; }.attention-item strong { font-size:11px; }.attention-item small { color:#a7a6b1; font-size:10px; margin-top:4px; }.attention-item .arrow { margin-left:auto; color:#aaa9b5; font-size:16px; }.attention-item:hover strong { color:#7166ee; }.all-tasks { border:0; border-top:1px solid #f0f0f4; padding:16px 0 0; width:100%; color:#7166ee; background:transparent; text-align:left; font-size:11px; }
.lower-grid { grid-template-columns:minmax(0,1.45fr) minmax(300px,.75fr); }.chart-panel select { border:1px solid var(--line); color:#777684; border-radius:5px; font-size:10px; padding:6px 8px; background:#fff; }.chart-summary { margin:20px 0 9px; display:flex; align-items:baseline; gap:10px; }.chart-summary strong { font-size:25px; letter-spacing:-.05em; }.chart-summary .positive { color:#40ac7b; font-size:10px; }.chart-summary small { color:#aaa9b4; font-size:10px; }.chart { height:155px; position:relative; }.chart-grid { position:absolute; inset:8px 0 26px; display:flex; flex-direction:column; justify-content:space-between; }.chart-grid i { border-top:1px dashed #ededf2; }.chart svg { position:absolute; left:0; top:8px; width:100%; height:120px; }.chart-labels { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; color:#aaa9b4; font-size:9px; }.calendar-event { display:flex; gap:14px; align-items:center; padding:16px 0; border-top:1px solid #f0f0f4; }.calendar-panel { padding-bottom:10px; }.calendar-event:first-of-type { margin-top:14px; }.date-block { flex:0 0 40px; text-align:center; border-radius:6px; padding:7px 0; background:#f0efff; color:#7166ee; }.date-block.orange-date { background:#fff0e4; color:#de8744; }.date-block strong,.date-block span { display:block; }.date-block strong { font-size:17px; line-height:1; }.date-block span { font-size:8px; font-weight:700; letter-spacing:.08em; margin-top:4px; }.calendar-event > div:last-child { min-width:0; }.calendar-event strong,.calendar-event small { display:block; }.calendar-event strong { font-size:11px; margin-top:7px; }.calendar-event small { font-size:10px; color:#aaa9b4; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.dashboard-footer { display:flex; justify-content:space-between; color:#aaa9b4; font-size:10px; padding:4px 2px; }.dashboard-footer b { color:#d6d5dc; margin:0 5px; }.dashboard-footer i { margin-left:8px; margin-right:0; }.toast { position:fixed; bottom:22px; right:24px; background:#20212c; color:#fff; padding:12px 16px; border-radius:7px; font-size:11px; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .2s ease, transform .2s ease; }.toast.show { opacity:1; transform:translateY(0); }
.empty-state,.chart-empty { color:#a3a2ae; font-size:11px; padding:18px 0; margin:0; }.chart-empty { display:grid; place-items:center; height:120px; text-align:center; border:1px dashed #e5e4ed; border-radius:6px; padding:20px; }
@media (max-width:1050px) { .metric-grid { grid-template-columns:repeat(2,1fr); }.dashboard-grid,.lower-grid { grid-template-columns:1fr; } }
@media (max-width:760px) { .sidebar { width:64px; flex-basis:64px; padding:20px 8px; }.brand { padding:0; justify-content:center; margin-bottom:35px; }.brand > span:last-child,.workspace-switcher,.side-nav .eyebrow,.nav-item:not(.active) b,.nav-item b,.sidebar-bottom { display:none; }.nav-item { justify-content:center; padding:11px 0; }.nav-item > span:first-child { margin:0; }.nav-item.active { background:#353544; }.nav-label { display:none!important; }.topbar { padding:0 20px; }.system-status,.help-button span { display:none; }.page-content { padding:31px 20px 22px; }.welcome-row { display:block; }.primary-button { margin-top:22px; }.pipeline-row { grid-template-columns:31px minmax(0,1fr) 20px; gap:9px; }.pipeline-row .stage,.pipeline-row .due { display:none; }.metric-grid { gap:10px; }.metric-card { padding:16px; }.metric-card > strong { font-size:24px; }.panel { padding:17px; }.project-copy > div { display:block; }.project-copy .tag { display:inline-block; margin-top:5px; }.dashboard-footer { display:block; line-height:2; } }