@font-face{font-family:Int;src:url(../fonts/inter-400.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:Int;src:url(../fonts/inter-500.woff2) format('woff2');font-weight:500;font-display:block}
@font-face{font-family:Int;src:url(../fonts/inter-600.woff2) format('woff2');font-weight:600;font-display:block}
@font-face{font-family:Int;src:url(../fonts/inter-700.woff2) format('woff2');font-weight:700;font-display:block}
*{margin:0;padding:0;box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{font-family:Int,system-ui,sans-serif;background:#0a0e16;color:#e8ebf0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
header{padding:14px 22px;display:flex;align-items:center;gap:16px;border-bottom:1px solid rgba(255,255,255,.08);flex:0 0 auto}
header h1{font:600 16px/1.2 Int}
header .sub{font:400 12px/1.4 Int;color:#8b93a1;margin-top:3px}
header .badge{margin-left:auto;white-space:nowrap;font:600 11px/1 Int;color:#0a0e16;background:#fff;padding:7px 12px;border-radius:999px}
#main{flex:1;display:flex;min-height:0}

/* left rail */
#side{width:430px;flex:0 0 430px;border-right:1px solid rgba(255,255,255,.08);overflow-y:auto;padding:16px}
.card{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:12px;padding:14px;margin-bottom:12px}
.card h3{font:600 12px/1 Int;letter-spacing:.06em;text-transform:uppercase;color:#8b93a1;margin-bottom:11px}
label{display:block;font:500 11.5px/1 Int;color:#96a0af;margin:10px 0 5px}
label:first-of-type{margin-top:0}
input[type=text],input[type=number],textarea,select{width:100%;background:#111827;color:#e8ebf0;border:1px solid rgba(255,255,255,.13);
  border-radius:8px;padding:8px 10px;font:400 13px/1.4 Int}
textarea{resize:vertical}
input[type=range]{width:100%;accent-color:#7dd3fc}
.row2{display:flex;gap:8px}.row2>*{flex:1}
.sl{display:flex;align-items:center;gap:10px}
.sl span{font:500 11.5px/1 Int;color:#c7cedb;min-width:52px;text-align:right}
.chk{display:flex;align-items:center;gap:8px;margin:9px 0;font:400 12.5px/1 Int;color:#c7cedb;cursor:pointer}
.chk input{accent-color:#7dd3fc;width:15px;height:15px}
button.b{background:#fff;color:#0a0e16;border:none;border-radius:999px;padding:9px 15px;font:600 12.5px/1 Int;cursor:pointer}
button.b.ghost{background:transparent;color:#e8ebf0;border:1px solid rgba(255,255,255,.24)}
button.b.big{width:100%;padding:12px;font-size:13.5px}
button.b:hover{opacity:.87}
button.tiny{background:rgba(255,255,255,.1);color:#dbe2ec;border:1px solid rgba(255,255,255,.14);border-radius:7px;
  padding:8px 9px;font:600 11px/1 Int;cursor:pointer;white-space:nowrap}
#modeBtns{display:flex;gap:6px;background:#0d1420;padding:4px;border-radius:10px}
#modeBtns button{flex:1;background:transparent;border:none;color:#8b93a1;padding:9px;border-radius:7px;font:600 12.5px/1 Int;cursor:pointer}
#modeBtns button.on{background:#fff;color:#0a0e16}
#drop{border:1.5px dashed rgba(255,255,255,.22);border-radius:10px;padding:18px;text-align:center;cursor:pointer;transition:.15s}
#drop:hover,#drop.over{border-color:#7dd3fc;background:rgba(125,211,252,.07)}
#drop.has{border-style:solid;border-color:rgba(255,255,255,.14)}
#drop .big{font:600 13px/1.3 Int}
#vinfo{font:400 11.5px/1.5 Int;color:#8b93a1;margin-top:6px;word-break:break-all}
#swatches{display:flex;gap:6px;margin-top:7px}
#swatches button{width:26px;height:26px;border-radius:7px;border:1.5px solid rgba(255,255,255,.25);cursor:pointer}
.marker{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.marker .dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.marker .nm{font:500 12px/1 Int;color:#c7cedb;flex:1}
.marker input{width:74px;text-align:center}
.hint{font:400 11px/1.5 Int;color:#6d7787;margin-top:8px}
.warn{font:400 11.5px/1.5 Int;color:#9aa4b2;margin-top:9px}
.warn.bad{color:#fbbf24}

/* script rows */
#rows{max-height:340px;overflow-y:auto;padding-right:4px}
.rowitem{display:flex;gap:6px;margin-bottom:7px;align-items:flex-start;background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);border-radius:9px;padding:7px}
.rowitem .grip{color:#4a5262;font:600 11px/1 Int;padding:10px 1px 0;min-width:14px;text-align:right}
.rowitem select{width:96px;padding:7px 4px;font-size:11.5px}
.rowitem textarea{flex:1;min-height:34px;font-size:12.5px;padding:7px}
.rowitem input{width:44px;text-align:center;font-size:11.5px;padding:7px 2px}
.rbtns{display:flex;flex-direction:column;gap:2px}
button.mini{background:none;border:none;color:#6c7684;font:600 12px/1 Int;cursor:pointer;padding:3px 4px;border-radius:4px}
button.mini:hover{background:rgba(255,255,255,.08);color:#e8ebf0}
button.mini.del:hover{color:#ff6b6b}

/* stage */
#stage{flex:1;display:flex;flex-direction:column;min-width:0;background:radial-gradient(900px 600px at 50% 25%,#151d2b,#0a0e16)}
#cvwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:18px;min-height:0}
#cv{max-width:100%;max-height:100%;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.6);background:#000}
body.is-mobile #cv{border-radius:16px}
#transport{flex:0 0 auto;padding:12px 20px 18px;display:flex;flex-direction:column;gap:9px;border-top:1px solid rgba(255,255,255,.07)}
#tl{position:relative}
#scrub{width:100%;accent-color:#fff}
#ticks{position:absolute;left:0;right:0;top:-7px;height:8px;pointer-events:none}
#ticks i{position:absolute;width:3px;height:8px;border-radius:2px;transform:translateX(-1.5px)}
#trow{display:flex;align-items:center;gap:10px}
#tnow{font:500 12px/1 Int;color:#96a0af;margin-left:auto}
#legend{display:flex;gap:14px;font:400 11px/1 Int;color:#7b8494}
#legend b{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}
#overlay{position:fixed;inset:0;background:rgba(5,8,14,.88);display:none;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;z-index:50}
#ovTxt{font:600 16px/1 Int}
#ovBarWrap{width:320px;height:6px;background:rgba(255,255,255,.15);border-radius:3px;overflow:hidden}
#ovBar{height:100%;width:0;background:#fff}
#ovNote{font:400 12px/1.5 Int;color:#8b93a1;max-width:380px;text-align:center}

/* ---- view-tabs en console-editor ---- */
#views{display:flex;gap:6px;background:#0d1420;padding:4px;border-radius:10px;margin-left:24px}
#views button{background:transparent;border:none;color:#8b93a1;padding:9px 15px;border-radius:7px;
  font:600 12.5px/1 Int;cursor:pointer;white-space:nowrap}
#views button.on{background:#fff;color:#0a0e16}
body.is-console #legend{display:none}
#crows{max-height:430px;overflow-y:auto;padding-right:4px}
.crow{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);border-radius:9px;
  padding:8px;margin-bottom:8px}
.crow .top{display:flex;gap:6px;align-items:flex-start}
.crow .grip{color:#4a5262;font:600 11px/1 Int;padding:10px 1px 0;min-width:14px;text-align:right}
.crow select{width:92px;padding:7px 4px;font-size:11.5px}
.crow textarea{flex:1;min-height:34px;font-size:12.5px;padding:7px}
.crow .ex{margin-top:8px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}
.crow .ex label{margin:8px 0 4px;color:#7dd3fc}
.crow .ex label:first-of-type{margin-top:0}
.crow .ex textarea,.crow .ex input[type=text]{width:100%;font-size:12px}
#splitCard select,#visCard select{width:100%}
.rowitem .grip,.crow .grip{cursor:grab;user-select:none}
.rowitem.dragging,.crow.dragging{opacity:.4}
.rowitem.dropbefore,.crow.dropbefore{box-shadow:0 -3px 0 -1px #7dd3fc}
.rowitem.dropafter,.crow.dropafter{box-shadow:0 3px 0 -1px #7dd3fc}
button.mini.ins:hover{color:#7dd3fc}
.inshere{display:flex;justify-content:center;margin:-3px 0 5px}
.inshere button{background:transparent;border:none;color:#3f4859;font:600 11px/1 Int;cursor:pointer;
  padding:3px 10px;border-radius:6px}
.inshere button:hover{background:rgba(125,211,252,.14);color:#7dd3fc}
#visCard .marker input{width:74px;text-align:center}
#sSideBtns,#sModeBtns,#sLangBtns,#langBtns{display:flex;gap:6px;background:#0d1420;padding:4px;border-radius:10px;margin-top:4px}
#sSideBtns button,#sModeBtns button,#sLangBtns button,#langBtns button{flex:1;background:transparent;border:none;color:#8b93a1;padding:8px;
  border-radius:7px;font:600 12px/1 Int;cursor:pointer}
#sSideBtns button.on,#sModeBtns button.on,#sLangBtns button.on,#langBtns button.on{background:#fff;color:#0a0e16}

/* ---- klantpresets (header) ---- */
#presetBar{margin-left:auto}
#presetBar select{width:230px;background:#0d1420;border:1px solid rgba(255,255,255,.16);color:#e8ebf0;
  border-radius:10px;padding:9px 10px;font:600 12.5px/1 Int;cursor:pointer}
#presetBar + .badge{margin-left:12px}