:root {
  --bg:#0b0e13; --panel:#131720; --panel-2:#191e28; --panel-3:#202633;
  --border:#29303d; --border-soft:#222936; --text:#eef1f6; --muted:#8e98aa;
  --accent:#f5c518; --accent-2:#5d83ff; --danger:#ff6474; --success:#39d98a;
  --shadow:0 18px 50px rgba(0,0,0,.24); --radius:16px;
}
*{box-sizing:border-box}
html{min-width:0;background:var(--bg)}
body{margin:0;min-width:0;min-height:100vh;background:radial-gradient(circle at 20% -10%,rgba(93,131,255,.08),transparent 32%),var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}
body,button,input,textarea,select{font-family:inherit}
a{color:var(--accent-2);text-decoration:none}
a:hover{text-decoration:none}
button,input,textarea,select{max-width:100%}

.layout{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;width:100%}
.sidebar{position:sticky;top:0;height:100vh;z-index:50;display:flex;flex-direction:column;min-width:0;background:rgba(19,23,32,.96);backdrop-filter:blur(18px);border-right:1px solid var(--border);padding:18px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:8px 10px 20px;color:var(--accent);font-weight:800;font-size:17px;white-space:nowrap}
.brand:before{content:"✦";display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(245,197,24,.25);border-radius:11px;background:rgba(245,197,24,.08)}
.sidebar nav{display:flex;flex-direction:column;gap:5px;flex:1;min-height:0;overflow:auto;padding-right:2px}
.sidebar nav a{display:flex;align-items:center;gap:10px;min-width:0;color:var(--muted);padding:11px 12px;border:1px solid transparent;border-radius:11px;font-size:13px;font-weight:600;white-space:nowrap}
.sidebar nav a:hover{background:var(--panel-2);color:var(--text);border-color:var(--border-soft)}
.sidebar nav a.active{background:linear-gradient(90deg,rgba(245,197,24,.10),rgba(245,197,24,.03));color:var(--text);border-color:rgba(245,197,24,.22);box-shadow:inset 3px 0 0 var(--accent)}
.sidebar-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:14px 10px 3px;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}
.sidebar-footer span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-footer a{flex:0 0 auto}

.content{width:100%;max-width:none;min-width:0;padding:30px clamp(18px,4vw,52px) 50px;overflow:hidden}
.content>*{min-width:0}
h1{font-size:clamp(21px,2vw,28px);line-height:1.2;margin:0 0 6px;letter-spacing:-.02em}h2{font-size:17px;line-height:1.3;margin:26px 0 12px}h3{line-height:1.35}p.lead{color:var(--muted);margin:0;line-height:1.55;max-width:780px}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;min-width:0}.page-head>div{min-width:0}.page-head .btn{flex:0 0 auto}.eyebrow{font:800 10px/1.2 ui-monospace,SFMono-Regular,monospace;letter-spacing:.18em;color:var(--accent);margin-bottom:8px}

.card,.studio-card,.stat-box{background:linear-gradient(145deg,rgba(24,29,40,.98),rgba(17,21,29,.98));border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 10px 30px rgba(0,0,0,.10)}
.card{padding:22px;margin-bottom:20px}.studio-card{padding:22px;margin-bottom:20px;box-shadow:var(--shadow)}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:24px}.stat-box{padding:18px}.stat-box .label{color:var(--muted);font-size:12px}.stat-box .value{font-size:26px;font-weight:800;margin-top:7px}

/* Tables never push the page outside the viewport. */
.table-wrap{width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:12px;background:#11151c;-webkit-overflow-scrolling:touch}.table-wrap>table{border:0}
table{width:100%;border-collapse:collapse;font-size:13px;min-width:680px}th,td{text-align:left;padding:12px;border-bottom:1px solid var(--border-soft);vertical-align:middle;overflow-wrap:anywhere}th{color:var(--muted);font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.06em}tr:hover td{background:rgba(255,255,255,.025)}

.badge,.pill{display:inline-flex;align-items:center;justify-content:center;max-width:100%;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}.badge-on{background:rgba(57,217,138,.13);color:var(--success)}.badge-off{background:rgba(255,100,116,.13);color:var(--danger)}.pill{background:rgba(245,197,24,.12);color:var(--accent)}.pill-vip{background:rgba(245,197,24,.15);color:var(--accent)}.pill-balance-pos{background:rgba(57,217,138,.15);color:var(--success)}.pill-balance-neg{background:rgba(255,100,116,.15);color:var(--danger)}

form{min-width:0}form label{display:block;font-size:12px;line-height:1.35;color:#aab2c1;margin:16px 0 7px;font-weight:650}form input[type=text],form input[type=number],form input[type=password],form input[type=email],form input[type=url],form input[type=file],form textarea,form select{display:block;width:100%;min-width:0;background:#0f131a;border:1px solid #303746;border-radius:11px;padding:11px 12px;color:var(--text);font-size:13px;line-height:1.4;outline:none;transition:border-color .15s,box-shadow .15s}form input[type=file]{padding:9px}form input:focus,form textarea:focus,form select:focus{border-color:rgba(93,131,255,.75);box-shadow:0 0 0 3px rgba(93,131,255,.10)}form textarea{min-height:120px;resize:vertical}form input::placeholder,form textarea::placeholder{color:#5f697b}form select{appearance:auto}
form .checkbox-row{display:flex;align-items:center;gap:9px;margin:16px 0}.checkbox-row input{width:auto;flex:0 0 auto}.checkbox-row label{margin:0;color:var(--text);font-size:13px}
.hint{color:var(--muted);font-size:11px;line-height:1.55;margin-top:6px}.hint code{word-break:break-all}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;background:var(--accent-2);color:#fff;border:1px solid transparent;padding:10px 16px;border-radius:10px;font-size:13px;font-weight:750;cursor:pointer;margin-top:16px;transition:.15s;white-space:nowrap}.btn:hover{filter:brightness(1.08);transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.btn-primary{background:linear-gradient(135deg,#5d83ff,#466be0)}.btn.btn-secondary{background:var(--panel-3);border-color:var(--border);color:var(--text)}.btn.btn-danger{background:#a93244;border-color:#c54a5a}.btn.btn-sm{min-height:34px;padding:7px 11px;font-size:11px;margin-top:0}.btn-xl{width:100%;min-height:46px}.actions-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

.flash{padding:13px 15px;border-radius:11px;margin-bottom:18px;font-size:13px;line-height:1.45;overflow-wrap:anywhere}.flash-ok{background:rgba(57,217,138,.09);color:#77e7ad;border:1px solid rgba(57,217,138,.25)}.flash-error{background:rgba(255,100,116,.09);color:#ff9aa5;border:1px solid rgba(255,100,116,.25)}
code{background:#0c1016;padding:2px 6px;border-radius:6px;font-size:11px;overflow-wrap:anywhere}.mono-box{background:#0c1016;border:1px solid var(--border);border-radius:10px;padding:12px;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;line-height:1.65;word-break:break-word;overflow:auto;max-width:100%}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}.login-box{width:min(390px,100%);background:var(--panel);border:1px solid var(--border);border-radius:18px;padding:28px;box-shadow:var(--shadow)}.login-box h1{text-align:center;margin-bottom:24px}

/* Studio */
.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:20px;align-items:start}.studio-main,.studio-side{min-width:0}.sticky-card{position:sticky;top:18px}.card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px;min-width:0}.card-head>div{display:flex;align-items:center;gap:11px;min-width:0}.card-head h2{margin:0;font-size:16px;overflow-wrap:anywhere}.step{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border-radius:9px;background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.22);color:var(--accent);font:800 11px ui-monospace,monospace}.soft-label,.status-dot{display:inline-flex;align-items:center;justify-content:center;max-width:100%;font:800 9px ui-monospace,monospace;letter-spacing:.12em;color:var(--muted);background:#1d222d;border:1px solid #303746;padding:6px 8px;border-radius:999px;white-space:normal;text-align:center;overflow-wrap:anywhere}.status-dot{color:var(--success)}
.field-grid{display:grid;gap:14px}.field-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.field-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.admin-field-grid{align-items:start}.studio-form input,.studio-form textarea,.studio-form select{background:#0f131a;border-color:#303746;border-radius:11px}.studio-form textarea{min-height:125px}
.dropzone{position:relative;width:100%;min-width:0;border:1px dashed #454d5d;border-radius:16px;min-height:190px;padding:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:radial-gradient(circle at 50% 20%,rgba(245,197,24,.08),transparent 48%),#0f131a;cursor:pointer;transition:.18s;overflow:hidden}.dropzone.compact{min-height:150px;padding:20px}.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:#171b23;transform:translateY(-1px)}.drop-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(245,197,24,.1);border:1px solid rgba(245,197,24,.25);color:var(--accent);font-size:25px;margin-bottom:12px}.dropzone strong{font-size:14px}.dropzone span{font-size:12px;color:var(--muted);margin-top:4px}.dropzone small{font:700 9px ui-monospace,monospace;color:#657086;letter-spacing:.12em;margin-top:12px}.drop-input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important;padding:0!important;border:0!important}
.file-preview,.media-preview,.mini-preview{display:flex;align-items:center;gap:12px;width:100%;min-width:0;margin-top:12px;padding:10px;border:1px solid #303746;border-radius:12px;background:#0f131a;color:var(--text);overflow:hidden}.file-preview>div,.media-preview>div,.mini-preview>div{min-width:0}.file-preview small,.media-preview span,.mini-preview span{display:block;color:var(--muted);font-size:11px;margin-top:3px;overflow-wrap:anywhere}.file-icon{font-size:24px;flex:0 0 auto}.media-preview img,.media-preview video{width:150px;max-width:42%;max-height:100px;object-fit:cover;border-radius:9px;flex:0 0 auto}.mini-preview img{width:72px;height:90px;object-fit:cover;border-radius:8px;flex:0 0 auto}.hidden{display:none!important}
.upload-progress{display:none;margin-top:14px}.upload-progress.active{display:block}.progress-top{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:11px;margin-bottom:7px}.progress-top b{color:var(--accent)}.progress-track{height:6px;border-radius:999px;background:#0a0d12;overflow:hidden;border:1px solid #252b36}.progress-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#c79f4f,#f5c518);transition:width .1s}
.toggle-line{display:grid!important;grid-template-columns:42px minmax(0,1fr);grid-template-rows:auto auto;column-gap:11px;align-items:center;margin:15px 0!important;color:var(--text)!important;cursor:pointer}.toggle-line input{display:none!important}.toggle-line>span{grid-row:1/3;width:42px;height:24px;border-radius:999px;background:#252b36;border:1px solid #394150;position:relative}.toggle-line>span:after{content:"";position:absolute;width:18px;height:18px;top:2px;left:3px;border-radius:50%;background:#8992a5;transition:.18s}.toggle-line input:checked+span{background:rgba(57,217,138,.18);border-color:rgba(57,217,138,.45)}.toggle-line input:checked+span:after{left:19px;background:var(--success)}.toggle-line b{font-size:13px}.toggle-line small{font-size:10px;color:var(--muted);overflow-wrap:anywhere}
.publish-preview{display:flex;gap:11px;padding:12px;border:1px solid #2b3240;background:#0f131a;border-radius:12px;margin-top:18px}.preview-lock{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto;border-radius:10px;background:#1d222c;color:var(--accent)}.publish-preview b{font-size:12px;display:block}.publish-preview span{display:block;font-size:10px;color:var(--muted);margin-top:3px;line-height:1.4}
.segmented{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:14px}.segmented label{margin:0!important}.segmented input{display:none}.segmented span{display:block;padding:12px;text-align:center;border:1px solid #303746;border-radius:10px;background:#0f131a;color:var(--muted);font-size:12px;cursor:pointer;overflow-wrap:anywhere}.segmented input:checked+span{color:var(--accent);border-color:rgba(245,197,24,.45);background:rgba(245,197,24,.06)}
.ratio-preview{margin:10px 0 16px;border:1px solid #303746;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#202531,#11141b);color:#687286;font:800 9px ui-monospace,monospace;letter-spacing:.12em;max-width:100%}.ratio-16-6{aspect-ratio:16/6}.ratio-16-9{aspect-ratio:16/9}.ratio-4-5{aspect-ratio:4/5}.ratio-1-1{aspect-ratio:1}
.custom-html-preview-wrap{margin-top:12px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0a0d12}.preview-mini-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 10px;background:#151a23;border-bottom:1px solid var(--border);font:800 9px ui-monospace,monospace;color:var(--accent)}.preview-mini-head small{color:var(--muted);font:600 9px system-ui}.custom-html-preview{display:block;width:100%;height:220px;border:0;background:#0f131a}

/* Campaign cards */
.campaign-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:18px}.campaign-card{min-width:0;overflow:hidden;background:#161b24;border:1px solid #2a3040;border-radius:18px;box-shadow:0 12px 35px rgba(0,0,0,.14)}.campaign-media{position:relative;width:100%;overflow:hidden;background:#101319}.campaign-media img,.campaign-media video{width:100%;height:100%;object-fit:cover;display:block}.campaign-badge{position:absolute;left:10px;top:10px;background:rgba(8,10,14,.78);border:1px solid #404856;border-radius:999px;padding:4px 8px;font:800 8px ui-monospace,monospace;color:var(--accent)}.media-placeholder{min-height:120px;display:grid;place-items:center;color:#555e70}.campaign-body{min-width:0;padding:16px}.campaign-title-row{display:flex;justify-content:space-between;gap:10px;min-width:0}.campaign-title-row>div{min-width:0}.campaign-title-row h3{margin:0;font-size:15px;overflow-wrap:anywhere}.campaign-title-row span{display:block;color:var(--muted);font-size:10px;margin-top:4px;overflow-wrap:anywhere}.campaign-body p{color:var(--muted);font-size:12px;line-height:1.5;margin:10px 0;overflow-wrap:anywhere}.campaign-meta{display:flex;flex-wrap:wrap;gap:8px 12px;color:#737d90;font:700 10px ui-monospace,monospace;margin:10px 0}.empty-studio{text-align:center;padding:70px 20px;background:#161922;border:1px dashed #343b4a;border-radius:18px;grid-column:1/-1}.empty-studio>div{font-size:32px;color:var(--accent)}.empty-studio h2{margin:10px 0 5px}.empty-studio p{color:var(--muted)}

/* Settings */
.settings-shell{max-width:1180px}.settings-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:20px;align-items:start}.settings-main,.settings-side{min-width:0}.settings-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:15px 0 10px;margin-top:18px;border-top:1px solid var(--border);color:var(--accent);font:800 10px ui-monospace,monospace;letter-spacing:.12em}.settings-section-head small{color:var(--muted);font:600 11px system-ui;letter-spacing:0;text-align:right;line-height:1.4}.tutorial-admin-box{margin-top:18px;padding:16px;border:1px solid var(--border);border-radius:14px;background:#10141b}.tutorial-admin-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.tutorial-admin-head>div{min-width:0}.tutorial-admin-head b{display:block;font-size:13px}.tutorial-admin-head span{display:block;color:var(--muted);font-size:11px;margin-top:4px;line-height:1.45}.settings-actions{display:flex;flex-wrap:wrap;gap:9px}.settings-actions .btn{margin-top:0}.setting-stat{padding:13px;border:1px solid var(--border);border-radius:12px;background:#10141b;margin-bottom:10px}.setting-stat .k{color:var(--muted);font-size:10px}.setting-stat .v{margin-top:5px;font-size:12px;font-weight:700;overflow-wrap:anywhere}.settings-note{padding:12px;border-radius:11px;background:rgba(93,131,255,.07);border:1px solid rgba(93,131,255,.2);color:#aebbf0;font-size:11px;line-height:1.5}

.inline-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.inline-form input[type=number]{width:100px;max-width:100%}.radio-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:8px}.radio-row label{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--text);margin:0}.radio-row input{width:auto}
.thumb-preview{width:90px;height:112px;object-fit:cover;border-radius:8px;border:1px solid var(--border);background:var(--panel-2);flex:0 0 auto}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.gallery-item{position:relative;aspect-ratio:3/4;border-radius:10px;overflow:hidden;border:1px solid var(--border);background:var(--panel-2)}
.gallery-item img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-item-video{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:12px;text-align:center;padding:8px}
.gallery-item-video small{opacity:.6;font-size:9px;word-break:break-all}
.gallery-item-del{position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;border:none;background:rgba(0,0,0,.65);color:#fff;cursor:pointer;font-size:12px;line-height:1}
.gallery-item-del:hover{background:#e0454b}
.gallery-queue-row{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);background:var(--panel-2);border:1px solid var(--border);border-radius:8px;padding:7px 10px}
.gallery-queue-row.gq-error{color:#e0454b;border-color:#e0454b}
.thumb-preview-row{display:flex;gap:14px;align-items:flex-start;margin-top:8px;flex-wrap:wrap}
.thumb-preview-col{text-align:center;font-size:11px;color:var(--muted)}
.html-editor{font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;font-size:12px!important;min-height:110px!important;white-space:pre;overflow-wrap:normal!important;overflow-x:auto}
.dropzone.hero-drop{min-height:210px}

@media(max-width:1050px){.layout{grid-template-columns:210px minmax(0,1fr)}.studio-grid,.settings-grid{grid-template-columns:1fr}.sticky-card{position:static}.content{padding:24px 22px 42px}}
@media(max-width:760px){.layout{display:block}.sidebar{position:sticky;top:0;width:100%;height:auto;min-height:0;padding:9px 10px 8px;border-right:0;border-bottom:1px solid var(--border)}.brand{font-size:15px;padding:0 4px 8px}.brand:before{width:29px;height:29px}.sidebar nav{display:flex;flex-direction:row;overflow-x:auto;gap:5px;padding-bottom:2px}.sidebar nav a{flex:0 0 auto;font-size:11px;padding:9px 10px;border:1px solid var(--border-soft);border-radius:9px}.sidebar nav a.active{box-shadow:none;border-color:rgba(245,197,24,.25)}.sidebar-footer{display:none}.content{padding:16px 12px 35px}.page-head{align-items:stretch;flex-direction:column;gap:12px}.page-head .btn{width:100%}.card,.studio-card{padding:16px;border-radius:14px}.field-grid.two,.field-grid.three{grid-template-columns:1fr}.card-head{align-items:flex-start}.card-head>div{align-items:flex-start}.status-dot,.soft-label{font-size:8px;padding:5px 6px}.campaign-grid{grid-template-columns:1fr}.campaign-card{border-radius:14px}.settings-section-head{flex-direction:column}.settings-section-head small{text-align:left}.tutorial-admin-head{flex-direction:column}.table-wrap{border-radius:10px}table{min-width:620px}.actions-row{align-items:stretch}.actions-row .btn{flex:1}}
@media(max-width:430px){.content{padding-left:9px;padding-right:9px}.studio-card,.card{padding:13px}.segmented{grid-template-columns:1fr}.dropzone{min-height:165px;padding:20px}.media-preview img,.media-preview video{width:105px;max-width:34%}.campaign-body{padding:13px}.campaign-title-row{align-items:flex-start}.campaign-title-row .badge{font-size:9px}.btn{width:100%}.btn.btn-sm{width:auto}.settings-actions .btn{width:100%}}
.field-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.field-grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.field-grid.four{grid-template-columns:1fr}}
.card{overflow-x:auto}