@charset "UTF-8";
:root {
  --bg: #0b0e14; --panel: #121722; --panel2: #171d2b; --line: #232b3e;
  --text: #e9edf7; --muted: #8b96b2; --accent: #4c8dff; --accent2: #7b5cff;
  --ok: #2fd27e; --warn: #ffc24d; --bad: #ff5c6c; --r: 14px;
}
* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; color: var(--text);
  background: radial-gradient(1100px 560px at 85% -10%, #1b2446 0%, transparent 60%), var(--bg);
  font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
/* ---------- Header ---------- */
.top { max-width: 1320px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 12px; }
.logo { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 6px 20px rgba(76,141,255,.35); }
h1 { font-size: 17px; margin: 0; font-weight: 700; letter-spacing: .2px; }
.sub { font-size: 12px; color: var(--muted); }
.pills { display: flex; gap: 8px; flex-wrap: wrap; }
.pill { background: var(--panel); border: 1px solid var(--line); color: var(--muted); padding: 5px 12px; border-radius: 99px; font-size: 12px; font-variant-numeric: tabular-nums; }
.pill:empty { display: none; }

/* ---------- Layout ---------- */
.grid {
  max-width: 1320px; margin: 0 auto; padding: 0 24px 40px; display: grid; gap: 16px; align-items: start;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-areas: "preview side" "edit side" "editor side" "lint side";
  grid-template-rows: auto auto auto 1fr;
}
.a-preview { grid-area: preview; } .a-edit { grid-area: edit; } .a-editor { grid-area: editor; } .a-lint { grid-area: lint; }
.a-side { grid-area: side; position: sticky; top: 16px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 1020px) {
  .grid { grid-template-rows: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "preview" "edit" "side" "editor" "lint"; padding: 0 14px 30px; }
  .a-side { position: static; }
  .top { padding: 14px; }
}

/* ---------- Card ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.card-head h2 { margin: 0; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.card-body { padding: 16px; }
.row { margin-bottom: 16px; }
.row:last-child { margin-bottom: 0; }
.lbl { display: block; font-size: 12px; color: var(--muted); font-weight: 600; margin-bottom: 7px; }
.hint { font-size: 12px; color: var(--muted); }

/* ---------- Stage ---------- */
.stage-box { padding: 16px; display: flex; justify-content: center; background: #080a10; }
.stage { background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.stage.landscape { width: 100%; aspect-ratio: 16 / 9; }
.stage.portrait { height: min(68vh, 700px); aspect-ratio: 9 / 16; }
.stage.square { width: min(100%, 620px); aspect-ratio: 1 / 1; }
canvas { width: 100%; height: 100%; display: block; }
.transport { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.time { font-variant-numeric: tabular-nums; font-size: 13px; color: var(--muted); min-width: 96px; text-align: right; }
input[type=range] { flex: 1; min-width: 140px; accent-color: var(--accent); }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; }
.check input { accent-color: var(--accent); }

/* ---------- Buttons & controls ---------- */
button { font: inherit; cursor: pointer; }
.btn { border: 1px solid var(--line); background: var(--panel2); color: var(--text); padding: 8px 15px; border-radius: 9px; font-weight: 600; font-size: 13px; transition: .15s; }
.btn:hover:not(:disabled) { border-color: #34405c; background: #1c2336; }
.btn-primary { border: 0; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); box-shadow: 0 6px 18px rgba(76,141,255,.28); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); background: linear-gradient(135deg, var(--accent), var(--accent2)); }
.btn-run { border: 0; color: #04210f; background: var(--ok); }
.btn-run:hover:not(:disabled) { background: #46e08f; }
.btn-danger { color: #ff9aa4; }
.btn-danger:hover:not(:disabled) { background: #2a1519; border-color: #5c2530; }
.btn-lg { width: 100%; padding: 13px 16px; font-size: 15px; border-radius: 11px; }
button:disabled { opacity: .5; cursor: not-allowed; }
.seg { display: flex; gap: 3px; padding: 3px; background: #0d111a; border: 1px solid var(--line); border-radius: 11px; }
.seg button { flex: 1; border: 0; background: transparent; color: var(--muted); padding: 8px 4px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: .15s; }
.seg button:hover:not(:disabled) { color: var(--text); }
.seg button.on { background: var(--accent); color: #fff; box-shadow: 0 2px 10px rgba(76,141,255,.35); }
.seg.is-disabled { opacity: .55; }
input[type=number] { width: 100%; background: #0d111a; color: var(--text); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 15px; font-variant-numeric: tabular-nums; }
input[type=number]:focus { outline: 2px solid rgba(76,141,255,.45); border-color: var(--accent); }
input[type=number]:disabled { opacity: .45; }
.ready { display: none; margin-top: 14px; padding: 16px; border-radius: 12px; text-align: center; background: linear-gradient(180deg, rgba(47,210,126,.10), rgba(47,210,126,.03)); border: 1px solid rgba(47,210,126,.45); }
.ready.show { display: block; animation: readyIn .25s ease-out; }
.ready .r-title { font-size: 15px; font-weight: 800; letter-spacing: .4px; color: var(--ok); }
.ready .r-meta { margin: 6px 0 4px; font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: .3px; }
.ready .r-file { margin-bottom: 12px; font-size: 11px; color: var(--muted); word-break: break-all; }
@keyframes readyIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.pill-btn { cursor: pointer; border: 1px solid var(--line); background: transparent; color: var(--muted); font: inherit; }
.pill-btn.on { color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-color: transparent; }
.logbox { height: 190px; overflow: auto; background: #0a0d14; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; font: 11px/1.55 ui-monospace, Menlo, Consolas, monospace; }
.logbox div { white-space: pre-wrap; word-break: break-word; } .logbox .t { color: #5d6985; }
.logbox .info { color: #b8c3de; } .logbox .ok { color: var(--ok); } .logbox .warn { color: var(--warn); } .logbox .err { color: var(--bad); }
.sp-back { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; padding: 16px; background: rgba(4,6,12,.72); }
.sp-back.show { display: flex; }
.sp-box { width: min(820px, 100%); max-height: 94vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.sp-box h3 { margin: 0 0 2px; font-size: 15px; letter-spacing: .5px; } .sp-box .sp-sub { font-size: 12px; color: var(--accent); font-weight: 700; margin-bottom: 14px; }
.sp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.sp-grid label, .sp-lbl { display: block; font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--muted); margin-bottom: 4px; }
.sp-grid input, .sp-out { width: 100%; box-sizing: border-box; background: #0d111a; color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 13px; }
.sp-grid .full { grid-column: 1 / -1; }
.sp-out { height: 230px; resize: vertical; font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace; color: #cfd8ef; }
.sp-row { display: flex; justify-content: space-between; align-items: center; margin: 14px 0 6px; }
.sp-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
@media (max-width: 640px) { .sp-grid { grid-template-columns: 1fr; } }
/* ---------- Accent color themes (swatches next to Metadata) ---------- */
body[data-mk="blue"] { --accent: #4c8dff; --accent2: #7b5cff; --rgb: 76,141,255; }
body[data-mk="violet"] { --accent: #8b5cf6; --accent2: #ec4899; --rgb: 139,92,246; --hov: #a78bfa; --code: #ddd6fe; --line2: #35295a; --bg0: #0d0b17; --bg2: #151226; --bg3: #1e1a38; --bg: #0f0c1a; --panel: #161229; --panel2: #1b1633; --line: #2a2347; --muted: #9a8fbd; }
body[data-mk="emerald"] { --accent: #10b981; --accent2: #38bdf8; --rgb: 16,185,129; --hov: #34d399; --code: #a7f3d0; --line2: #1f3d36; --bg0: #0a0f0e; --bg2: #101a18; --bg3: #172622; --bg: #0c1211; --panel: #111b19; --panel2: #15221f; --line: #1d312c; --muted: #84a39a; }
body[data-mk="amber"] { --accent: #f59e0b; --accent2: #fb7185; --rgb: 245,158,11; --hov: #fbbf24; --on: #1c1200; --code: #fde68a; --line2: #44341a; --bg0: #0f0d09; --bg2: #1a160f; --bg3: #271f13; --bg: #12100b; --panel: #1a160f; --panel2: #201b12; --line: #31281a; --muted: #a8977a; }
body[data-mk="rose"] { --accent: #f43f5e; --accent2: #fb923c; --rgb: 244,63,94; --hov: #fb7185; --code: #fecdd3; --line2: #442631; --bg0: #0f0a0c; --bg2: #1a1013; --bg3: #271820; --bg: #120c0e; --panel: #1a1114; --panel2: #20151a; --line: #31202a; --muted: #a8838c; }
.mk-sw { display: inline-flex; gap: 8px; align-items: center; padding: 0 4px; }
body[data-mk] { background: radial-gradient(1100px 560px at 85% -10%, rgba(var(--rgb),.17), transparent 60%), var(--bg); }
.mk-sw button { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); cursor: pointer; transition: transform .15s; }
.mk-sw button:hover { transform: scale(1.12); }
.mk-sw button.on { outline: 2px solid #fff; outline-offset: 2px; }
.est { font-size: 12px; color: var(--muted); background: #0d111a; border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; line-height: 1.6; }
.prog { height: 6px; background: #0d111a; border-radius: 99px; overflow: hidden; margin: 14px 0 8px; }
#progBar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--ok)); transition: width .12s linear; }
.status { font-size: 12px; color: var(--muted); min-height: 18px; word-break: break-word; }

/* ---------- Editor ---------- */
.actions { display: flex; gap: 8px; }
textarea { display: block; width: 100%; height: 340px; background: #0a0d14; color: #cfe3ff; border: 0; padding: 14px 16px; font: 12px/18px "JetBrains Mono", Consolas, "Courier New", monospace; resize: vertical; white-space: pre; overflow: auto; tab-size: 2; }
textarea:focus { outline: none; box-shadow: inset 0 0 0 1px var(--accent); }
.err { color: var(--bad); font-size: 13px; padding: 0 16px; min-height: 0; }
.err:not(:empty) { padding: 10px 16px; border-top: 1px solid #4a2028; background: #1d1014; }

/* ---------- Lint ---------- */
.badge { padding: 3px 11px; border-radius: 99px; font-weight: 700; font-size: 12px; }
.b-good { background: #123f27; color: #6dffa8; } .b-mid { background: #4f3e0c; color: #ffd76a; } .b-bad { background: #521a21; color: #ff9aa4; }
.lint-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); }
.lint-list { max-height: 260px; overflow: auto; margin: 0; padding: 6px 0; list-style: none; }
.lint-list li { padding: 7px 16px; font-size: 13px; display: flex; gap: 10px; align-items: baseline; }
.lint-list li.click { cursor: pointer; }
.lint-list li.click:hover { background: var(--panel2); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; transform: translateY(-1px); }
.d-error { background: var(--bad); } .d-warn { background: var(--warn); } .d-info { background: var(--accent); } .d-ok { background: var(--ok); }
.ln { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }

/* ---------- Edit Video (trim, speed, color) ---------- */
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 28px; }
.edit-wide { grid-column: 1 / -1; }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.btn-sm { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.trk { position: relative; height: 10px; border-radius: 99px; background: #0d111a; border: 1px solid var(--line); margin: 6px 0 14px; }
.trk-sel { position: absolute; top: -1px; bottom: -1px; left: 0; width: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent2)); opacity: .85; }
.trk-ph { position: absolute; top: -5px; bottom: -5px; left: 0; width: 2px; margin-left: -1px; background: #fff; border-radius: 2px; box-shadow: 0 0 6px rgba(255,255,255,.6); pointer-events: none; }
.trim-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.trim-k { width: 50px; flex: none; font-size: 12px; font-weight: 600; color: var(--muted); }
.trim-row input[type=range] { min-width: 0; }
.trim-row input[type=number] { width: 78px; flex: none; padding: 6px 8px; font-size: 13px; }
.spd-val { min-width: 54px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }
.palette { display: flex; flex-wrap: wrap; gap: 10px; max-height: 176px; overflow: auto; padding: 3px; }
.palette .hint { padding: 6px 0; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 68px; cursor: pointer; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sw input[type=color] { width: 100%; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.sw input[type=color]::-webkit-color-swatch-wrapper { padding: 2px; }
.sw input[type=color]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.sw input[type=color]::-moz-color-swatch { border: 0; border-radius: 6px; }
.sw.chg input[type=color] { outline: 2px solid var(--accent); outline-offset: 1px; }
.col-sliders { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 28px; margin-top: 14px; }
select{background:#0d111a;color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:inherit;font-size:13px;width:100%;cursor:pointer}
select:focus{outline:2px solid rgba(76,141,255,.45);border-color:var(--accent)}

.gm-tabs{margin:14px 0 12px}.gm-pane{margin-bottom:12px}
.gm-foot{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin:12px 0;padding-top:12px;border-top:1px solid var(--line)}
.gm-foot input[type=number]{width:70px;padding:6px 8px;font-size:13px}
.gm-sel,.gm-ta{width:100%;box-sizing:border-box;background:#0d111a;color:var(--text);border:1px solid var(--line);border-radius:9px;padding:9px 10px;font:inherit;font-size:13px}
.gm-ta{height:150px;resize:vertical}
.gm-keyact,.gm-keysaved{display:flex;align-items:center;gap:6px;margin-top:7px;flex-wrap:wrap;font-size:13px}
.gm-keyact[hidden],.gm-keysaved[hidden]{display:none}
.gm-keysaved b{font-family:ui-monospace,Consolas,monospace;background:#0d111a;border:1px solid var(--line);border-radius:6px;padding:3px 8px}
.gm-prog{margin:12px 0 4px}
.gm-prog[hidden]{display:none}
.gm-bar{height:10px;background:#0d111a;border:1px solid var(--line);border-radius:99px;overflow:hidden}
.gm-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px;transition:width .4s ease;position:relative;overflow:hidden}
.gm-bar.busy i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);animation:gmsh 1.6s infinite}
@keyframes gmsh{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.gm-bar.busy i::after{animation:none}}
.gm-ptxt{display:flex;justify-content:space-between;gap:10px;font-size:12px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.gm-stat{font-size:12px;color:var(--muted);min-height:18px}

/* ---------- Metadata view ---------- */
#metaView { display: none; max-width: 1320px; margin: 0 auto; padding: 0 24px 40px; }
body.view-meta #metaView { display: block; }
body.view-meta main.grid { display: none; }
#metaView [hidden] { display: none !important; }
.md-layout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.md-aside { position: sticky; top: 16px; }
.md-content { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.md-in { width: 100%; background: var(--bg0, #0d111a); color: var(--text); border: 1px solid var(--line); border-radius: 9px; padding: 9px 10px; font: inherit; font-size: 13px; }
.md-in:focus { outline: 2px solid rgba(var(--rgb, 76,141,255), .45); border-color: var(--accent); }
textarea.md-in { resize: vertical; font-size: 12.5px; }
.md-field { margin-bottom: 14px; }
.md-keyrow { display: flex; gap: 6px; }
.md-keyrow .md-in { flex: 1; min-width: 0; }
.md-drop { border: 2px dashed var(--line); border-radius: var(--r); background: var(--panel); padding: 34px 16px; text-align: center; color: var(--muted); cursor: pointer; transition: .15s; }
.md-drop:hover, .md-drop.over { border-color: var(--accent); color: var(--text); background: var(--panel2); }
.md-pv.md-nopv img { visibility: hidden; }
.md-pv.md-nopv::after { content: "EPS"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 800; letter-spacing: 1px; color: var(--muted); }
.md-drop svg { display: block; margin: 0 auto 10px; color: var(--accent); }
.md-drop b { color: var(--text); }
.md-stick { position: sticky; top: 12px; z-index: 5; }
.md-prh { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.md-pct { font-size: 28px; font-weight: 800; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.md-eta { margin-left: auto; font-size: 12px; color: var(--muted); }
.md-track { height: 10px; background: var(--bg0, #0d111a); border: 1px solid var(--line); border-radius: 99px; overflow: hidden; margin: 10px 0; }
.md-track i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; transition: width .35s; }
.md-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.md-chip { font-size: 12px; font-weight: 600; border-radius: 99px; padding: 3px 10px; }
.md-wait { background: rgba(139,150,178,.15); color: var(--muted); }
.md-run { background: rgba(var(--rgb, 76,141,255), .16); color: var(--accent); }
.md-ok { background: rgba(47,210,126,.14); color: var(--ok); }
.md-err { background: rgba(255,92,108,.14); color: var(--bad); }
.md-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.md-actions .sp { flex: 1; }
.md-item { display: grid; grid-template-columns: 168px 1fr; gap: 18px; padding: 16px; border-top: 1px solid var(--line); }
.md-item:first-child { border-top: 0; }
.md-item[data-st="ok"] { box-shadow: inset 3px 0 0 var(--ok); }
.md-item[data-st="err"] { box-shadow: inset 3px 0 0 var(--bad); }
.md-item[data-st="run"] { box-shadow: inset 3px 0 0 var(--accent); }
.md-pv { position: relative; align-self: start; }
.md-pv img, .md-pv video { width: 168px; height: 126px; object-fit: cover; border-radius: 10px; background: var(--line); display: block; }
.md-badge { position: absolute; left: 8px; bottom: 8px; max-width: calc(100% - 16px); font-size: 12px; font-weight: 600; border-radius: 99px; padding: 2px 10px; background: var(--panel); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.md-f { display: grid; gap: 10px; min-width: 0; }
.md-fn { font-weight: 600; word-break: break-all; font-size: 13px; }
.md-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.md-ct { font-size: 12px; color: var(--muted); } .md-ct b { font-weight: 600; } .md-ct .warn { color: var(--bad); }
.md-empty { padding: 56px 18px; text-align: center; color: var(--muted); }
.md-exg { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.md-exg .btn { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; }
.md-exg .btn > span:last-child { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.md-exg small { font-weight: 400; color: var(--muted); font-size: 11.5px; }
.md-av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; font-weight: 700; color: #fff; background: hsl(var(--h) 62% 48%); }
.md-note { margin: 10px 0 0; }
@media (max-width: 1020px) { #metaView { padding: 0 14px 30px; } .md-layout { grid-template-columns: 1fr; } .md-aside { position: static; } }
@media (max-width: 640px) { .md-item { grid-template-columns: 1fr; } .md-pv img, .md-pv video { width: 100%; height: 190px; } .md-two { grid-template-columns: 1fr; } }

/* ---------- White theme ---------- */
body[data-mk="white"] { color-scheme: light; --accent: #4f46e5; --accent2: #0ea5e9; --rgb: 79,70,229; --hov: #6366f1; --on: #ffffff; --code: #3730a3; --info: #1d4ed8; --line2: #cfd6e4; --bg0: #ffffff; --bg2: #f1f4f9; --bg3: #e6ebf4; --bg: #f4f6fb; --panel: #ffffff; --panel2: #f6f8fc; --line: #dfe4ee; --text: #101828; --muted: #5b667d; --ok: #059669; --warn: #b45309; --bad: #dc2626; background: radial-gradient(900px 460px at 82% -12%, rgba(var(--rgb),.08), transparent 62%), var(--bg); }
body[data-mk="white"] .card { box-shadow: 0 1px 2px rgba(16,24,40,.06), 0 8px 24px rgba(16,24,40,.06); }
body[data-mk="white"] .stage-box { background: #eef1f7; }
body[data-mk="white"] .stage { box-shadow: 0 10px 30px rgba(16,24,40,.18); }
body[data-mk="white"] .btn-danger:hover:not(:disabled) { background: #fdeceb; border-color: #fca5a5; }
body[data-mk="white"] .seg, body[data-mk="white"] .est, body[data-mk="white"] .prog, body[data-mk="white"] .trk, body[data-mk="white"] .gm-bar { background: var(--bg2); }
body[data-mk="white"] input[type=number], body[data-mk="white"] select, body[data-mk="white"] .gm-sel, body[data-mk="white"] .gm-ta, body[data-mk="white"] .sp-grid input, body[data-mk="white"] .sp-out, body[data-mk="white"] .gm-keysaved b, body[data-mk="white"] textarea { background: var(--bg0); color: var(--text); }
body[data-mk="white"] textarea#code { background: #fafbfe; color: var(--code); }
body[data-mk="white"] .logbox { background: #fafbfe; }
body[data-mk="white"] .logbox .t { color: #94a3b8; }
body[data-mk="white"] .sp-back { background: rgba(30,41,59,.38); }
body[data-mk="white"] .err:not(:empty) { background: #fdeceb; border-top-color: #fecaca; }
body[data-mk="white"] .b-good { background: #dcfce7; color: #166534; }
body[data-mk="white"] .b-mid { background: #fef3c7; color: #92400e; }
body[data-mk="white"] .b-bad { background: #fee2e2; color: #991b1b; }
body[data-mk="white"] .trk-ph { background: var(--text); box-shadow: 0 0 6px rgba(16,24,40,.35); }
body[data-mk="white"] .mk-sw button.on { outline-color: var(--text); }
body[data-mk="white"] .md-badge { box-shadow: 0 1px 3px rgba(16,24,40,.2); }

/* ---------- Results lists (select / copy / download) ---------- */
.rl { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel2); overflow: hidden; }
.rl[hidden] { display: none; }
.rl-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.rl-head .sp { flex: 1; }
.rl-count { font-size: 12px; color: var(--muted); }
.rl-list { max-height: 300px; overflow: auto; }
.rl-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-top: 1px solid var(--line); }
.rl-item:first-child { border-top: 0; }
.rl-item.cur { box-shadow: inset 3px 0 0 var(--accent); }
.rl-name { flex: 1; min-width: 120px; font-size: 13px; font-weight: 600; word-break: break-word; }
.rl-name small { display: block; font-weight: 400; color: var(--muted); font-size: 11.5px; }
.rl-item.err .rl-name small { color: var(--bad); }
.rl-pre { flex-basis: 100%; margin: 0; max-height: 200px; overflow: auto; background: var(--bg0, #0a0d14); border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: 11.5px/1.5 ui-monospace, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; color: var(--text); }
.rl input[type=checkbox] { accent-color: var(--accent); }
textarea.md-in { display: block; height: auto; white-space: pre-wrap; overflow: auto; font: 12.5px/1.5 inherit; font-family: inherit; color: var(--text); }

/* ===== Tab Kalender Tren Microstock (berdiri sendiri) ===== */
#calView{display:none;max-width:1320px;margin:0 auto;padding:0 24px 40px}
body.view-cal #calView{display:block}
body.view-cal main.grid,body.view-cal #metaView{display:none}
.kc-layout{display:grid;grid-template-columns:340px minmax(0,1fr);gap:16px;align-items:start}
.kc-side{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto;border-radius:var(--r)}
.kc-main{min-width:0}
@media(max-width:1020px){#calView{padding:0 14px 30px}.kc-layout{grid-template-columns:1fr}.kc-side{position:static;max-height:none;overflow:visible}}
.kc-ctl{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.kc-ctl label,.kc-f label{display:flex;flex-direction:column;gap:4px;font-size:11px;color:var(--muted);font-weight:600}
.kc-in{background:var(--panel2);border:1px solid var(--line);color:var(--text);border-radius:9px;padding:7px 9px;font:inherit;font-size:13px;min-height:34px;width:100%;color-scheme:dark}
body[data-mk="white"] .kc-in{color-scheme:light}
.kc-in:focus{outline:2px solid rgba(var(--rgb,76,141,255),.45);border-color:var(--accent)}
.kc-al{border:1px solid var(--line);border-left:4px solid var(--warn);background:var(--panel2);border-radius:12px;padding:10px 12px}
.kc-al[data-st=urgent]{border-left-color:var(--bad)}.kc-al.ok{border-left-color:var(--ok)}
.kc-al b{display:block;font-size:13px}.kc-al p{margin:2px 0 0;font-size:12px;color:var(--muted)}
.kc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.kc-chip{display:inline-flex;gap:6px;align-items:center;background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:99px;padding:3px 10px 3px 7px;font:inherit;font-size:12px;cursor:pointer}
.kc-chip:hover{border-color:var(--accent)}.kc-chip em{font-style:normal;color:var(--warn);font-weight:700;font-size:11px}
.kc-h{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 8px}
.kc-h b{font-size:13px}.kc-h span{font-size:11px;color:var(--muted)}
.kc-hot{display:flex;flex-direction:column;gap:6px}
.kc-hr{display:grid;grid-template-columns:14px 24px 1fr auto;gap:8px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:7px 10px;color:var(--text);text-align:left;cursor:pointer;font:inherit}
.kc-hr:hover{border-color:var(--accent)}
.kc-hr .rk{font-weight:800;color:var(--muted);font-size:12px}.kc-hr .em{font-size:18px}
.kc-hr b{display:block;font-size:12.5px;line-height:1.2;font-weight:600}.kc-hr small{color:var(--muted);font-size:11px}
.kc-m{display:inline-flex;gap:2px}.kc-m i{width:12px;height:4px;border-radius:2px;background:var(--line)}.kc-m i.on{background:var(--accent)}
.kc-f{display:flex;flex-direction:column;gap:8px;margin:16px 0 4px}
.kc-f2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kc-seg{display:flex;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.kc-seg button{flex:1;border:0;background:none;color:var(--muted);font:inherit;font-size:12px;font-weight:600;padding:6px 4px;border-radius:7px;cursor:pointer}
.kc-seg button.on{background:var(--accent);color:#fff}
.kc-top{display:flex;justify-content:space-between;align-items:baseline;margin:2px 2px 12px}
.kc-top h2{margin:0;font-size:15px}.kc-top span{font-size:12px;color:var(--muted)}
.kc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.kc-card{--kc:var(--accent);background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:11px}
.kc-card::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--kc)}
.kc-card[data-st=now]{--kc:var(--warn)}.kc-card[data-st=urgent],.kc-card[data-st=late]{--kc:var(--bad)}.kc-card[data-st=done]{--kc:var(--ok)}
.kc-card.kc-flash{outline:2px solid var(--accent);outline-offset:2px}
.kc-card[data-st=done]{opacity:.72}
.kc-t{display:flex;gap:11px;align-items:center}
.kc-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:23px;flex:none;background:color-mix(in srgb,var(--kc) 16%,transparent)}
.kc-t h3{margin:0;font-size:14px;line-height:1.25}.kc-t small{color:var(--muted);font-size:11.5px}
.kc-pl{margin-left:auto;align-self:flex-start;font-size:10.5px;font-weight:700;padding:3px 9px;border-radius:99px;color:var(--kc);background:color-mix(in srgb,var(--kc) 16%,transparent);white-space:nowrap}
.kc-w{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.kc-w span{font-size:12px;color:var(--muted)}
.kc-w b{font-size:26px;line-height:1;font-weight:800}.kc-w b small{font-size:11.5px;font-weight:500;color:var(--muted);margin-left:4px}
.kc-bar{height:5px;border-radius:99px;background:var(--line);overflow:hidden}.kc-bar i{display:block;height:100%;background:var(--kc)}
.kc-r{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.kc-tg span{display:inline-block;margin-left:4px;padding:1px 9px;border-radius:7px;background:var(--panel2);color:var(--text);font-size:11px;font-weight:600}
.kc-tip{background:var(--panel2);border-radius:10px;padding:8px 10px;font-size:12.5px}.kc-tip b{display:block;font-size:11px;color:var(--muted);margin-bottom:1px}
.kc-kw{display:flex;flex-wrap:wrap;gap:4px}.kc-kw span{font-size:11px;color:var(--accent);background:rgba(var(--rgb,76,141,255),.14);border-radius:99px;padding:1px 8px}
.kc-ft{display:flex;justify-content:space-between;align-items:center;gap:8px;border-top:1px dashed var(--line);padding-top:10px;margin-top:auto}
.kc-ft label{display:flex;gap:6px;align-items:center;cursor:pointer;font-size:12px}.kc-ft input{accent-color:var(--ok)}
.kc-empty{grid-column:1/-1;padding:24px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--r)}