/* Light Studio: shared visual system, layered over the compact layouts. */
:root{--bg:#10151b;--sidebar:#141a22;--panel:#171e27;--panel2:#1d2631;--line:#2c3745;--text:#eef3f8;--muted:#a0adbc;--accent:#55d6a5;--mint:#55d6a5;--mint2:#78e5bc;--on-accent:#092c20;--hover:#222d39;--field:#121922;--radius:14px;--shadow:0 3px 14px #00000012}
:root[data-theme=light]{--bg:#f6f8f7;--sidebar:#fff;--panel:#fff;--panel2:#f3f6f5;--line:#e2e9e5;--text:#182b24;--muted:#62756c;--accent:#087f50;--mint:#087f50;--mint2:#06653f;--on-accent:#fff;--hover:#eef5f1;--field:#fff;--red:#c83850;--yellow:#94600b;--shadow:0 3px 14px #19372a04}
:root{--text:#edf5ff;--label:#bfdef4;--muted:#88abc4;--accent:#00e0ce;--mint:#00e0ce;--mint2:#28efdd;--on-accent:#032522}
:root[data-theme=light]{--text:#122c3e;--label:#294e65;--muted:#567185;--accent:#007d75;--mint:#007d75;--mint2:#00665f;--on-accent:#fff}
body{font-size:14px;line-height:1.5;color:var(--label)}
.brand,.topbar h1,h2,h3,h4,.stat-card strong,.storage-summary strong,.review-step strong{color:var(--text)}
h2,h3{color:var(--text)}
h2{font-size:23px;letter-spacing:-.65px;line-height:1.35}
h3{font-size:15px;letter-spacing:-.2px}
.sidebar{width:238px;padding:25px 14px 14px}
.brand{font-size:20px;letter-spacing:-.7px;gap:11px;padding:0 10px 25px}
.brand-mark{width:33px;height:33px;border-radius:10px;font-size:19px}
.nav{gap:4px}
.nav-label{font-size:9px;letter-spacing:1.6px;padding:20px 12px 8px;opacity:1}
.nav-item{min-height:41px;padding:10px 12px;border-radius:9px;font-size:12.5px;gap:12px}
.nav-item .ico{width:18px;height:18px}
.nav-item.active{background:var(--tint);color:var(--accent)}
.sidebar-bottom{padding:17px 8px 2px;margin-top:14px}
.sidebar-bottom .avatar{width:34px;height:34px;border-radius:11px}
.sb-toggle{margin-top:auto;padding-top:12px;padding-bottom:12px}
.main{padding:0 32px 24px}
.topbar{height:77px;margin:0 -32px 28px;padding:0 32px;background:var(--sidebar);backdrop-filter:none}
.topbar h1{font-size:18px;letter-spacing:-.4px}
.topbar .eyebrow{display:block;font-size:8px;letter-spacing:1.7px;color:var(--muted);margin-bottom:3px}
.top-actions{gap:10px}
.icon-btn{width:36px;height:36px;border-radius:10px}
.btn{min-height:36px;padding:8px 14px;border-radius:9px;font-size:12px;line-height:1.5}
.btn-primary{box-shadow:0 2px 3px #083c2410}
.btn:focus-visible,.nav-item:focus-visible,.icon-btn:focus-visible,.sb-toggle:focus-visible,.mobile-menu:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
input,select,textarea,.filter-bar select{padding:10px 12px;font-size:13px;border-radius:9px;min-height:38px}
input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
input[type=checkbox],input[type=radio],input[type=range]{min-height:0;accent-color:var(--accent)}
.search-box input{min-width:0;padding:9px 0}
.welcome-row{padding:4px 0 8px;background:transparent;border:0;border-radius:0;margin-bottom:23px;align-items:center}
.welcome-row h2{font-size:25px;line-height:1.35;letter-spacing:-.8px;margin-bottom:7px}
.welcome-row p{font-size:13px}
.welcome-row .eyebrow{display:block;margin-bottom:9px;font-size:9px;letter-spacing:1.6px}
.page-intro{margin-bottom:20px}
.page-intro p{font-size:13px;line-height:1.7}
.stat-grid{gap:16px;margin-bottom:25px}
.stat-card{padding:19px 20px;position:relative;box-shadow:var(--shadow);min-height:135px}
.stat-card>span{display:block;font-size:12px;padding-right:42px}
.stat-card strong{font-size:32px;line-height:1.2;margin:13px 0 5px;letter-spacing:-1px}
.stat-card small{font-size:11px;color:var(--muted)}
.dashboard-stat-icon{position:absolute;right:17px;top:17px;width:34px;height:34px;padding:8px;border-radius:10px;background:var(--tint);color:var(--accent);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.stat-card:nth-child(2) .dashboard-stat-icon{background:color-mix(in srgb,#3883c8 12%,transparent);color:#3883c8}
.stat-card:nth-child(3) .dashboard-stat-icon{background:color-mix(in srgb,#ac73dc 12%,transparent);color:#ac73dc}
.stat-card:nth-child(4) .dashboard-stat-icon{background:color-mix(in srgb,var(--yellow) 12%,transparent);color:var(--yellow)}
.panel{padding:21px;margin-bottom:18px;box-shadow:var(--shadow)}
.panel-heading{margin-bottom:18px;gap:14px}
.panel-heading p{font-size:12px;margin-top:4px;line-height:1.6}
.content-grid{gap:18px;margin-bottom:18px}
.trend-layout{gap:18px}
.trend-rail{gap:18px;top:95px}
.trend-panel{padding:20px 20px 8px}
.trend-layout .table-wrap{margin:0 -20px}
.trend-layout th:first-child,.trend-layout td:first-child{padding-left:20px}
.compact-trends{gap:12px}
.compact-trends .trend-row{padding:9px;background:var(--panel);gap:11px;border-radius:11px}
.compact-trends .trend-info strong{font-size:12px;line-height:1.65}
.compact-trends .trend-thumb{border-radius:7px;overflow:hidden}
.compact-trends .trend-thumb img{object-fit:cover}
.compact-trends .trend-views{color:var(--text)}
.compact-trends .trend-views:after{display:none}
.workflow>div{padding:17px 0;gap:12px;font-size:12px}
.workflow>div:before{content:"";width:9px;height:9px;flex-shrink:0;border-radius:50%;background:var(--line);border:2px solid var(--panel);outline:1px solid var(--line)}
.workflow>div:nth-child(1):before,.workflow>div:nth-child(2):before{background:var(--accent);outline-color:var(--accent)}
.workflow>div:nth-child(3):before{background:#318ab8;outline-color:#318ab8}
.workflow>div:nth-child(4):before{background:var(--yellow);outline-color:var(--yellow)}
.workflow>div:nth-child(5):before{background:var(--accent);outline-color:var(--accent)}
.workflow b{min-width:28px;padding:3px 8px;background:var(--panel2);border-radius:6px;text-align:center;font-size:12px;font-weight:600}
th,.table-wrap th{background:var(--panel2);font-size:10px;color:var(--muted);padding:12px;letter-spacing:.5px;border-color:var(--line)}
td,.trend-layout td{padding-block:14px;border-color:var(--line)}
.table-wrap{border-radius:10px}
.table-wrap tbody tr:hover{background:var(--hover)}
.review-card{background:var(--panel);padding:17px}
.review-step{padding:16px 18px}
.review-step strong{font-size:26px}
.review-status-submitted{color:var(--text)}
.review-status-published,.review-status-scheduled{color:var(--accent);background:var(--tint)}
.dropzone{background:var(--panel2);padding:30px 20px}
.upload-icon{background:var(--tint);color:var(--accent)}
.dropzone small{color:var(--muted)}
.storage-summary>div{padding:17px}
.studio-panel{padding:21px}
.studio-options{gap:12px;margin-bottom:17px}
.studio-options .btn{height:40px}
.studio-options .script-duration{gap:4px}
.script-duration output{font-weight:700;color:var(--accent,#00cbbb)}
.studio-options .script-duration input[type=range]{width:100%;height:18px;margin:0;padding:0;accent-color:var(--accent,#00cbbb);cursor:pointer}
.script-duration-scale{display:flex;justify-content:space-between;font-size:10px;opacity:.75}
.script-duration-note{font-size:12px;margin-top:-5px}
.studio-panel textarea{padding:15px;line-height:1.85}
.editor-panel label{font-size:12px;line-height:1.6}
.calendar-day{padding:16px}
.calendar-day p{color:var(--text)}
.settings-list>div{padding:17px}
.auth-gate{background:radial-gradient(ellipse at 10% 5%,var(--tint),transparent 60%),var(--bg)}
.auth-gate form{padding:34px;border-radius:20px;box-shadow:0 18px 65px #19372a0b}
.auth-connection{width:min(440px,calc(100vw - 32px));padding:30px;box-sizing:border-box}
.auth-connection p{color:var(--muted);line-height:1.7}
.auth-gate h2{font-size:25px;margin:11px 0 25px}
.auth-gate .eyebrow{font-size:12px;letter-spacing:2px}
.auth-gate #authSubmit{width:100%;margin:18px 0 0;min-height:43px}
dialog{border-radius:18px;padding:24px}
dialog::backdrop{background:#091b1470;backdrop-filter:blur(3px)}
.footer{padding:24px 10px;font-size:11px}
@media(min-width:761px){.sb-collapsed .sidebar{padding-top:25px}.sb-collapsed .brand-mark{width:32px;height:32px}.sb-collapsed .sidebar-bottom{padding-inline:0}}
@media(min-width:1101px){.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1181px){#page-dashboard .trend-layout{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:1180px){.trend-layout{grid-template-columns:1fr}.trend-rail{position:static}.main{padding-inline:22px}.topbar{margin-inline:-22px;padding-inline:22px}}
@media(max-width:900px){.sidebar{width:214px;padding-inline:10px}.brand{font-size:18px}.stat-card{padding:17px}.welcome-row h2{font-size:22px}}
@media(max-width:760px){
 .sidebar{width:260px;height:100dvh;padding:22px 14px 16px;overflow-y:auto}
 .main{padding:0 16px 20px}.topbar{height:66px;margin:0 -16px 22px;padding:0 16px}
 .topbar h1{font-size:16px}.topbar .eyebrow{display:none}.top-actions{gap:7px}.top-actions .btn{padding-inline:10px;font-size:11px}
 .mobile-menu{width:36px;height:36px;margin-right:10px}.welcome-row{align-items:flex-start;gap:16px}.welcome-row h2{font-size:23px}
 .stat-grid{gap:11px;margin-bottom:19px}.stat-card{min-height:135px;padding:15px}.stat-card>span{font-size:11px;padding-right:29px}.stat-card strong{font-size:29px;margin-top:18px}
 .dashboard-stat-icon{width:27px;height:27px;padding:6px;top:12px;right:12px}
 .panel,.studio-panel{padding:17px}.panel-heading{flex-wrap:wrap;gap:10px}.trend-panel{padding-bottom:6px}
 .trend-layout .table-wrap{margin-inline:-17px}.trend-layout th:first-child,.trend-layout td:first-child{padding-left:17px}
 .compact-trends .trend-row{grid-template-columns:96px minmax(0,1fr)}.compact-trends .trend-thumb{width:96px}
 .auth-gate{padding:18px}.auth-gate form{padding:25px}.workflow>div{padding:14px 0}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Trò chuyện với AI để sửa kịch bản */
.studio-chat{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.chat-log{display:flex;flex-direction:column;gap:8px;max-height:240px;overflow-y:auto;margin-bottom:8px}
.chat-empty{margin:0;font-size:12px;color:var(--muted);line-height:1.6}
.chat-msg{max-width:88%;padding:8px 11px;border-radius:10px;font-size:12.5px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.chat-msg.user{align-self:flex-end;background:var(--accent);color:var(--on-accent)}
.chat-msg.ai{align-self:flex-start;background:var(--panel2);color:var(--text)}
.chat-msg.pending{color:var(--muted);font-style:italic}
.chat-msg.error{align-self:flex-start;background:transparent;border:1px solid var(--red);color:var(--red)}
.chat-input{display:flex;gap:8px}
.chat-input input{flex:1;min-width:0;margin:0}
.chat-input .btn{height:34px}

/* Reference palette: headings white, content ice blue, secondary text slate blue. */
.nav-item{color:var(--label)}
.nav-item.active,.nav-item:hover{color:var(--accent)}
.btn-secondary,.icon-btn,.table-title strong,.trend-info strong,.file-meta strong,.workflow,.settings-list strong{color:var(--label)}
.editor-panel label,.hashtag-controls label,.stat-card>span{color:var(--muted)}
input,select,textarea{color:var(--text)}
.form-error,#scriptStatus.form-error,#chatStatus.form-error{color:var(--red)}

/* Settings overview */
.settings-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px}
.settings-summary-grid .settings-service-card{margin:0;padding:18px 16px;min-height:110px;border-radius:9px}
.settings-card-icons{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;color:var(--accent);min-height:18px}
.settings-card-icons svg,.settings-storage-heading svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.settings-health{width:15px;height:15px;border:1px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:10px;line-height:1}
.settings-service-card h3{font-size:14px;margin:0 0 7px}.settings-service-card p{font-size:11px;color:var(--muted)}
.settings-storage-card{padding:17px 16px;border-radius:9px;margin-bottom:20px}
.settings-storage-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}
.settings-storage-heading h3{display:flex;align-items:center;gap:9px;margin:0;font-size:15px}
.settings-storage-heading svg{color:var(--accent)}.settings-storage-heading>span{font-size:12px;color:var(--label);white-space:nowrap}
.settings-storage-card progress{display:block;width:100%;height:7px;border:0;border-radius:8px;overflow:hidden;background:var(--line);accent-color:var(--accent);margin:0 0 12px}
.settings-storage-card progress::-webkit-progress-bar{background:var(--line);border-radius:8px}
.settings-storage-card progress::-webkit-progress-value{background:var(--accent);border-radius:8px}
.settings-storage-card progress::-moz-progress-bar{background:var(--accent);border-radius:8px}
.settings-storage-card>p{font-size:13px;color:var(--label)}
.settings-details>summary{cursor:pointer;font-size:12px;color:var(--muted);padding:4px 0 14px}
.settings-details .settings-list{margin-top:0}.settings-details code{white-space:normal;overflow-wrap:anywhere}
.settings-details .settings-list.panel{gap:14px;align-items:stretch}
.settings-details .settings-list>div,.settings-details .settings-list>div:last-child{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:16px;padding:20px;min-width:0;height:100%}
.settings-details .settings-list>div>div:first-child{flex:0 0 auto;min-width:0}
.settings-details .settings-list strong{display:block;margin:0 0 7px;line-height:1.5;color:var(--text)}
.settings-details .settings-list p{margin:4px 0 0;font-size:12px;line-height:1.75;overflow-wrap:anywhere}
.settings-details .settings-card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:2px}
.settings-details .settings-card-actions .btn{max-width:100%;white-space:normal}
@media(max-width:600px){.settings-details .settings-list>div,.settings-details .settings-list>div:last-child{padding:16px}.settings-details .settings-card-actions .btn{flex:1 1 auto}}
@media(max-width:480px){.settings-summary-grid{gap:9px}.settings-summary-grid .settings-service-card{padding:15px 12px}.settings-storage-heading{align-items:flex-start}}