/* ============================================================
   MATRIX workspace — sci-fi calendar command center + A/B routing
   Obsidian glass · neon indigo · no-scroll 100vh · fluid clamp()
   Inherits tokens from styles.css
   ============================================================ */

.mtx{
  flex:1 1 auto; min-width:0; height:100vh; min-height:0;
  display:flex; flex-direction:column; position:relative; isolation:isolate; overflow:hidden;
  padding:14px; gap:14px;
  background:
    radial-gradient(1000px 560px at 18% -12%, rgba(22,192,216,.13), transparent 58%),
    radial-gradient(880px 600px at 106% 116%, rgba(46,211,198,.10), transparent 56%);
  animation:mtxIn .32s var(--out);
}
@keyframes mtxIn{ from{ opacity:.3; transform:translateY(7px) scale(.995); } to{ opacity:1; transform:none; } }

/* ============================================================ COMMAND BAR */
.mtx-bar{ flex:0 0 auto; display:flex; align-items:center; gap:clamp(10px,1.4vw,18px);
  padding:14px 20px; margin:-14px -14px 0; /* full-bleed: identity sits flush in the top-left corner, like every rail head */
  border:0; border-bottom:1px solid var(--line-soft); border-radius:0;
  background:var(--glass); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  box-shadow:0 14px 34px -26px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.05); }
.mtx-id{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.mtx-eyebrow{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.18em; text-transform:uppercase; color:var(--ink-3);
  display:flex; align-items:center; gap:8px; }
.mtx-eyebrow .glow{ width:7px; height:7px; border-radius:50%; background:var(--acc); box-shadow:0 0 10px 1px var(--acc-glow);
  animation:mtxGlow 2.4s ease-in-out infinite; }
@keyframes mtxGlow{ 0%,100%{ opacity:.5; } 50%{ opacity:1; } }
.mtx-title{ font-size:clamp(18px,1.9vw,25px); font-weight:var(--fw-black); letter-spacing:-.03em; line-height:1; }
.mtx-bar-sub{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-3); }
.mtx-bar .spacer{ flex:1; }

.mtx-week{ display:flex; align-items:center; gap:4px; background:var(--well); border:1px solid var(--line);
  border-radius:11px; padding:3px; }
.mtx-week button{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--ink-2); transition:.16s var(--out); }
.mtx-week button:hover{ background:var(--hover); color:var(--ink); }
.mtx-week .wlabel{ padding:0 12px; font-size:var(--fs-sub); font-weight:var(--fw-black); color:var(--ink); white-space:nowrap; letter-spacing:.01em; }

.mtx-seg{ display:flex; gap:2px; background:var(--well); border:1px solid var(--line); border-radius:11px; padding:3px; }
.mtx-seg button{ display:flex; align-items:center; gap:7px; height:30px; padding:0 13px; border-radius:8px;
  font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-3); transition:.16s var(--out); }
.mtx-seg button.on{ background:var(--elev); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07); }
.mtx-seg button.on svg{ color:var(--acc-2); filter:drop-shadow(0 0 5px var(--acc-glow)); }
.mtx-seg button:hover:not(.on){ color:var(--ink-2); }

.mtx-schedule{ display:flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:11px; color:#fff;
  font-size:var(--fs-base); font-weight:var(--fw-black); background:var(--ai-grad);
  box-shadow:0 10px 28px -8px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.25); transition:transform .2s var(--spring); }
.mtx-schedule:hover{ transform:translateY(-2px); box-shadow:0 14px 34px -6px var(--ai-glow), 0 0 28px -4px var(--ai-glow); }
.mtx-schedule:active{ transform:translateY(0) scale(.97); }

/* ============================================================ CALENDAR GRID */
.mtx-cal{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden;
  background:var(--glass); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-soft); box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.05); position:relative; }
.mtx-grid{ flex:1; min-height:0; display:grid; grid-template-columns:repeat(7, minmax(140px,1fr));
  overflow-x:auto; overflow-y:hidden; }
.mtx-day{ min-width:0; display:flex; flex-direction:column; border-right:1px solid var(--line-soft); position:relative;
  transition:background .18s var(--out); }
.mtx-day:last-child{ border-right:none; }
.mtx-day.weekend{ background:rgba(0,0,0,.1); }
.mtx-day.drop-on{ background:var(--acc-soft); box-shadow:inset 0 0 0 1px var(--acc-line), inset 0 0 50px -20px var(--acc-glow); }
.mtx-dhead{ flex:0 0 auto; display:flex; align-items:center; gap:9px; padding:clamp(10px,1.2vmin,14px) clamp(10px,.8vw,14px);
  border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(255,255,255,.022),transparent); position:sticky; top:0; z-index:2; }
.mtx-dnum{ font-size:var(--fs-xl); font-weight:var(--fw-black); letter-spacing:-.03em; line-height:1; color:var(--ink); }
.mtx-ddow{ display:flex; flex-direction:column; }
.mtx-ddow .dw{ font-size:var(--fs-label); font-weight:var(--fw-black); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.mtx-ddow .cn{ font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-4); }
.mtx-day.today .mtx-dnum{ color:#fff; }
.mtx-today-pill{ margin-left:auto; font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.06em; color:#fff; padding:3px 7px; border-radius:6px;
  background:var(--acc); box-shadow:0 0 14px -2px var(--acc-glow); }
.mtx-dbody{ flex:1; min-height:0; overflow-y:auto; padding:9px clamp(7px,.7vw,11px) 16px; display:flex; flex-direction:column; gap:9px; }
.mtx-day.today .mtx-dbody{ background:linear-gradient(180deg,rgba(22,192,216,.06),transparent 40%); }

/* video node card — glowing 9:16 micro-thumbnail */
.mtx-card{ position:relative; display:flex; gap:9px; padding:8px; border-radius:12px; cursor:grab;
  background:var(--panel-2); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  transition:transform .2s var(--spring), box-shadow .22s var(--out), border-color .18s var(--out); }
.mtx-card:hover{ transform:translateY(-2px); border-color:var(--line-strong);
  box-shadow:var(--shadow-soft), 0 0 24px -10px var(--pc, var(--acc-glow)); }
.mtx-card:active{ cursor:grabbing; }
.mtx-card.dragging{ opacity:.35; }
.mtx-card.win{ border-color:color-mix(in srgb, var(--pc) 55%, transparent); }
.mtx-thumb{ position:relative; width:34px; flex:0 0 34px; aspect-ratio:var(--ar, 9/16); border-radius:7px; overflow:hidden;
  background:
    radial-gradient(130% 80% at 30% 16%, hsl(var(--ch,230) 72% 56% / .4), transparent 60%),
    repeating-linear-gradient(135deg,#1b1e2b 0 6px,#171a26 6px 12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), 0 0 14px -6px var(--pc, var(--acc-glow)); }
.mtx-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 40%,rgba(0,0,0,.4));
  border-bottom:3px solid var(--pc); }
.mtx-thumb .pic{ position:absolute; left:3px; bottom:4px; z-index:2; color:#fff; filter:drop-shadow(0 1px 3px rgba(0,0,0,.7)); }
.mtx-cmeta{ flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.mtx-ctop{ display:flex; align-items:center; gap:6px; }
.mtx-ctime{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:var(--ink-2); font-family:'JetBrains Mono',monospace; }
.mtx-cstatus{ margin-left:auto; display:flex; align-items:center; gap:4px; font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.02em;
  color:var(--sc, var(--ink-3)); }
.mtx-cstatus .sd{ width:6px; height:6px; border-radius:50%; background:var(--sc, var(--ink-3)); box-shadow:0 0 7px var(--sc); }
.mtx-cstatus.live .sd{ animation:mtxRec 1.4s ease-in-out infinite; }
@keyframes mtxRec{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.mtx-cname{ font-size:var(--fs-sub); font-weight:var(--fw-bold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtx-chook{ font-size:var(--fs-micro); font-weight:var(--fw-med); color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.mtx-addslot{ margin-top:2px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:6px;
  color:var(--ink-4); font-size:var(--fs-label); font-weight:var(--fw-bold); border:1.5px dashed var(--line); background:transparent;
  opacity:.5; transition:.2s var(--out); }
.mtx-day:hover .mtx-addslot{ opacity:1; }
.mtx-addslot:hover{ color:var(--ink-2); border-color:var(--acc-line); background:var(--acc-soft); }

/* floating drag ghost */
.mtx-ghost{ position:fixed; z-index:500; pointer-events:none; width:188px; transform:translate(-50%,-50%) rotate(-3deg) scale(1.04);
  box-shadow:var(--shadow-float), 0 0 36px -8px var(--pc, var(--acc-glow)); }

/* hover tooltip */
.mtx-tip{ position:fixed; z-index:480; pointer-events:none; width:222px; padding:13px 14px; border-radius:14px;
  background:var(--glass-3); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-strong); box-shadow:var(--shadow-pop), 0 0 30px -10px var(--pc, var(--acc-glow));
  transform:translate(-50%,-100%); animation:mtxTipIn .16s var(--out); }
@keyframes mtxTipIn{ from{ opacity:0; transform:translate(-50%,calc(-100% + 6px)); } to{ opacity:1; } }
.mtx-tip-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.mtx-tip-ic{ width:26px; height:26px; flex:0 0 26px; border-radius:8px; display:grid; place-items:center; color:#fff;
  background:color-mix(in srgb, var(--pc) 26%, #15171f); border:1px solid color-mix(in srgb, var(--pc) 50%, transparent);
  box-shadow:0 0 14px -6px var(--pc); }
.mtx-tip-ic svg{ filter:drop-shadow(0 0 4px var(--pc)); }
.mtx-tip-tt{ min-width:0; }
.mtx-tip-tt .n{ font-size:var(--fs-base); font-weight:var(--fw-black); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtx-tip-tt .p{ font-size:var(--fs-eyebrow); font-weight:var(--fw-bold); color:var(--pc); }
.mtx-tip-rows{ display:flex; flex-direction:column; gap:7px; }
.mtx-tip-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:var(--fs-label); }
.mtx-tip-row .k{ color:var(--ink-3); font-weight:var(--fw-med); display:flex; align-items:center; gap:6px; }
.mtx-tip-row .v{ color:var(--ink); font-weight:var(--fw-black); font-family:'JetBrains Mono',monospace; }
.mtx-tip-row .v.status{ color:var(--sc); }

/* ============================================================ A/B ROUTING DOCK */
.mtx-route{ flex:0 0 auto; min-height:0; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden;
  background:var(--glass); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-soft); box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.05); position:relative; }
.mtx-rhead{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:11px clamp(14px,1.4vw,18px);
  border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(255,255,255,.022),transparent); }
.mtx-rhead .ic{ width:28px; height:28px; border-radius:9px; display:grid; place-items:center; color:#fff;
  background:color-mix(in srgb, var(--acc) 30%, #14161e); border:1px solid var(--acc-line); box-shadow:0 0 16px -6px var(--acc-glow); }
.mtx-rtitle{ font-size:var(--fs-body); font-weight:var(--fw-black); letter-spacing:-.01em; }
.mtx-rsub{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--ink-3); }
.mtx-rhead .spacer{ flex:1; }
.mtx-rlive{ display:flex; align-items:center; gap:7px; height:28px; padding:0 11px; border-radius:8px; font-size:var(--fs-eyebrow); font-weight:var(--fw-black);
  letter-spacing:.04em; color:#cbe9d8; background:rgba(70,217,160,.1); border:1px solid rgba(70,217,160,.3); }
.mtx-rlive .d{ width:6px; height:6px; border-radius:50%; background:var(--good); box-shadow:0 0 8px var(--good); animation:mtxGlow 1.8s ease-in-out infinite; }

.mtx-rbody{ flex:1; min-height:0; position:relative; overflow:hidden;
  background:
    radial-gradient(60% 90% at 50% 50%, rgba(22,192,216,.06), transparent 70%),
    repeating-linear-gradient(0deg,transparent 0 25px,rgba(255,255,255,.014) 25px 26px),
    repeating-linear-gradient(90deg,transparent 0 25px,rgba(255,255,255,.014) 25px 26px); }
.mtx-links{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; overflow:visible; }
.mtx-link-glow{ fill:none; stroke-linecap:round; opacity:.5; filter:blur(3px); }
.mtx-link{ fill:none; stroke-linecap:round; stroke-dasharray:7 11;
  animation:mtxFlow 1s linear infinite; }
@keyframes mtxFlow{ to{ stroke-dashoffset:-36; } }
.mtx-link.src{ stroke-dasharray:6 9; animation-duration:.85s; }
@media (prefers-reduced-motion:reduce){ .mtx-link, .mtx-link.src{ animation:none; } }

/* routing nodes */
.mtx-node{ position:absolute; z-index:2; border-radius:13px; display:flex; flex-direction:column;
  background:var(--glass-3); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line-strong); box-shadow:var(--shadow-soft), inset 0 1px 0 rgba(255,255,255,.05);
  transition:transform .2s var(--spring), box-shadow .22s var(--out); }
.mtx-node:hover{ transform:translateY(-2px); box-shadow:var(--shadow-pop), 0 0 28px -8px var(--nc, var(--acc-glow)); }
.mtx-node .port{ position:absolute; top:50%; width:11px; height:11px; border-radius:50%; transform:translateY(-50%);
  background:#0c0e16; border:2px solid var(--nc, var(--acc)); box-shadow:0 0 10px var(--nc, var(--acc-glow)); }
.mtx-node .port.out{ right:-6px; } .mtx-node .port.in{ left:-6px; }

/* source node */
.mtx-src{ padding:11px; gap:9px; --nc:var(--acc); }
.mtx-src .top{ display:flex; align-items:center; gap:9px; }
.mtx-src-thumb{ width:34px; flex:0 0 34px; aspect-ratio:9/16; border-radius:7px; overflow:hidden; position:relative;
  background:repeating-linear-gradient(135deg,#262a3a 0 6px,#1e2230 6px 12px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 0 16px -6px var(--acc-glow); }
.mtx-src-thumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(22,192,216,.18),transparent 50%,rgba(0,0,0,.4)); }
.mtx-src .eyebrow{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.14em; color:var(--acc-2); }
.mtx-src .n{ font-size:var(--fs-base); font-weight:var(--fw-black); letter-spacing:-.01em; margin-top:2px; }
.mtx-src .s{ font-size:var(--fs-eyebrow); font-weight:var(--fw-med); color:var(--ink-3); margin-top:2px; }

/* router (A/B split) node */
.mtx-router{ padding:10px 12px; align-items:center; justify-content:center; gap:5px; text-align:center; --nc:var(--ai-b); }
.mtx-router .ric{ width:30px; height:30px; border-radius:9px; display:grid; place-items:center; color:#fff;
  background:var(--ai-grad); box-shadow:0 0 18px -4px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.mtx-router .rt{ font-size:var(--fs-label); font-weight:var(--fw-black); letter-spacing:.02em; }
.mtx-router .rs{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.mtx-router .port.in{ top:50%; }

/* platform branch node */
.mtx-branch{ padding:10px 12px; gap:7px; }
.mtx-branch .top{ display:flex; align-items:center; gap:9px; }
.mtx-branch-ic{ width:28px; height:28px; flex:0 0 28px; border-radius:8px; display:grid; place-items:center; color:#fff;
  background:color-mix(in srgb, var(--nc) 24%, #15171f); border:1px solid color-mix(in srgb, var(--nc) 48%, transparent);
  box-shadow:0 0 14px -5px var(--nc); }
.mtx-branch-ic svg{ filter:drop-shadow(0 0 4px var(--nc)); }
.mtx-branch .pn{ font-size:var(--fs-base); font-weight:var(--fw-black); }
.mtx-branch .pl{ font-size:var(--fs-micro); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px; }
.mtx-branch .win-pill{ margin-left:auto; font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.05em; color:#0c0d11; padding:3px 6px; border-radius:5px;
  background:var(--good); box-shadow:0 0 14px -3px rgba(70,217,160,.7); }
.mtx-branch .meta{ display:flex; align-items:center; gap:10px; }
.mtx-branch .meta .m{ display:flex; align-items:center; gap:5px; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-2); }
.mtx-branch .meta .m svg{ color:var(--ink-4); }
.mtx-branch .meta .m b{ color:var(--nc); font-family:'JetBrains Mono',monospace; }

.mtx-rhint{ position:absolute; left:50%; bottom:9px; transform:translateX(-50%); z-index:3; display:flex; align-items:center; gap:8px;
  font-size:var(--fs-eyebrow); font-weight:var(--fw-med); color:var(--ink-4); white-space:nowrap; }
.mtx-rhint kbd{ font-family:'JetBrains Mono',monospace; font-size:var(--fs-micro); font-weight:var(--fw-bold); color:var(--ink-3);
  background:rgba(255,255,255,.05); border:1px solid var(--line); border-radius:5px; padding:2px 6px; }

/* ============================================================ CARD DELETE + FRESH */
.mtx-card-x{ position:absolute; top:4px; left:4px; z-index:6; width:20px; height:20px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:rgba(16,12,18,.92); border:1px solid var(--line-strong);
  box-shadow:0 4px 12px -3px rgba(0,0,0,.7); opacity:0; transform:scale(.6); transition:.16s var(--spring); }
.mtx-card:hover .mtx-card-x{ opacity:1; transform:none; }
.mtx-card-x:hover{ background:rgba(255,107,125,.92); border-color:rgba(255,107,125,.7); }
.mtx-card.fresh{ animation:mtxFresh 1.4s var(--out); }
@keyframes mtxFresh{ 0%{ box-shadow:0 0 0 2px var(--acc-line), 0 0 34px -2px var(--acc-glow); transform:translateY(-3px) scale(1.03); }
  100%{ box-shadow:inset 0 1px 0 rgba(255,255,255,.04); transform:none; } }

/* full-screen routing view (Routing tab) */
.mtx-route.full{ flex:1 1 auto; }

/* ============================================================ ADD-VIDEO PICKER MODAL */
.mtx-modal-ov{ position:fixed; inset:0; z-index:600; display:grid; place-items:center; padding:24px;
  background:rgba(4,5,9,.64); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); animation:mtxOvIn .2s var(--out); }
@keyframes mtxOvIn{ from{ opacity:0; } to{ opacity:1; } }
.mtx-modal{ width:min(960px,94vw); height:min(640px,88vh); display:flex; flex-direction:column;
  border-radius:20px; overflow:hidden; background:var(--glass-2); backdrop-filter:var(--blur-lg); -webkit-backdrop-filter:var(--blur-lg);
  border:1px solid var(--line-strong); box-shadow:var(--shadow-float), 0 0 70px -22px var(--acc-glow);
  animation:mtxModalIn .26s var(--spring); }
@keyframes mtxModalIn{ from{ opacity:0; transform:translateY(16px) scale(.985); } to{ opacity:1; transform:none; } }

.mtx-modal-head{ flex:0 0 auto; display:flex; align-items:center; gap:13px; padding:15px 18px;
  border-bottom:1px solid var(--line-soft); background:linear-gradient(180deg,rgba(255,255,255,.025),transparent); }
.mh-ic{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:#fff;
  background:var(--ai-grad); box-shadow:0 0 22px -6px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.mh-tt .t{ font-size:var(--fs-lg); font-weight:var(--fw-black); letter-spacing:-.01em; }
.mh-tt .s{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); margin-top:1px; }
.mh-x{ margin-left:auto; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:var(--ink-3); transition:.16s var(--out); }
.mh-x:hover{ background:var(--hover); color:var(--ink); }

.mtx-modal-body{ flex:1; min-height:0; display:flex; }

/* ---- left: clip browser ---- */
.mtx-pick{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:0; }
.mtx-pick-bar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
.mtx-pick-search{ flex:1; min-width:0; display:flex; align-items:center; gap:9px; height:38px; padding:0 12px; border-radius:11px;
  background:var(--well); border:1px solid var(--line); color:var(--ink-3); }
.mtx-pick-search input{ flex:1; min-width:0; background:none; border:none; outline:none; font-size:var(--fs-base); font-weight:var(--fw-med); color:var(--ink); }
.mtx-pick-search input::placeholder{ color:var(--ink-4); }
.mtx-pick-filters{ display:flex; gap:4px; background:var(--well); border:1px solid var(--line); border-radius:11px; padding:3px; flex:0 0 auto; }
.pf{ display:flex; align-items:center; gap:6px; height:30px; padding:0 11px; border-radius:8px; font-size:var(--fs-sub); font-weight:var(--fw-bold); color:var(--ink-3); transition:.14s var(--out); }
.pf .n{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); padding:1px 6px; border-radius:10px; background:rgba(255,255,255,.06); color:var(--ink-2); font-variant-numeric:tabular-nums; }
.pf:hover{ color:var(--ink-2); }
.pf.on{ background:var(--elev); color:#fff; box-shadow:0 1px 4px rgba(0,0,0,.4); }
.pf.on .n{ background:var(--acc); color:#fff; }

.mtx-pick-grid{ flex:1; min-height:0; overflow-y:auto; padding:14px 16px; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr)); gap:12px; align-content:start; align-items:start; }
.mtx-pick-empty{ grid-column:1/-1; display:flex; flex-direction:column; align-items:center; gap:10px; padding:54px 0;
  color:var(--ink-4); font-size:var(--fs-base); font-weight:var(--fw-med); }

.mtx-clip{ position:relative; display:flex; flex-direction:column; gap:9px; padding:9px; border-radius:14px; text-align:left; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--line); transition:transform .18s var(--spring), border-color .18s var(--out), box-shadow .2s var(--out); }
.mtx-clip:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-soft); }
.mtx-clip.on{ border-color:var(--acc-line); box-shadow:0 0 0 1.5px var(--acc-line), 0 12px 32px -12px var(--acc-glow); }
.mtx-clip .cthumb{ position:relative; aspect-ratio:var(--ar, 9/16); border-radius:10px; overflow:hidden;
  background: radial-gradient(120% 80% at 30% 16%, hsl(var(--ch) 72% 56% / .45), transparent 58%),
    repeating-linear-gradient(135deg,#1b1e2b 0 8px,#161924 8px 16px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05); }
.mtx-clip .cthumb::after{ content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 38%,rgba(0,0,0,.55)); }
.cscore{ position:absolute; top:6px; left:6px; z-index:2; display:flex; align-items:center; gap:3px; height:20px; padding:0 7px; border-radius:7px;
  background:rgba(8,9,14,.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12); font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:#fff; }
.cscore svg{ color:var(--ai-b); }
.cdur{ position:absolute; bottom:6px; right:6px; z-index:2; font-size:var(--fs-micro); font-weight:var(--fw-bold); padding:1px 6px; border-radius:5px;
  background:rgba(8,9,14,.6); backdrop-filter:blur(6px); color:#fff; }
.cplay{ position:absolute; left:50%; top:50%; z-index:2; transform:translate(-50%,-50%) scale(.7); opacity:0;
  width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:#fff;
  background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); transition:.22s var(--spring); }
.mtx-clip:hover .cplay{ opacity:1; transform:translate(-50%,-50%) scale(1); }
.mtx-clip .cmeta{ display:flex; flex-direction:column; gap:6px; }
.mtx-clip .cn{ font-size:var(--fs-sub); font-weight:var(--fw-bold); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mtx-clip .crow{ display:flex; align-items:center; justify-content:space-between; gap:6px; }
.cstat{ display:flex; align-items:center; gap:5px; font-size:var(--fs-micro); font-weight:var(--fw-black); color:var(--ink-2); }
.cstat .d{ width:6px; height:6px; border-radius:50%; }
.cplats{ display:flex; gap:4px; color:var(--ink-2); }
.cplats .none{ color:var(--ink-4); }
.csel{ position:absolute; top:9px; right:9px; width:20px; height:20px; border-radius:7px; display:grid; place-items:center;
  background:var(--acc); color:#fff; box-shadow:0 0 12px -3px var(--acc-glow); opacity:0; transform:scale(.7); transition:.18s var(--spring); }
.mtx-clip.on .csel{ opacity:1; transform:none; }

/* ---- right: config rail ---- */
.mtx-cfg{ flex:0 0 326px; width:326px; display:flex; flex-direction:column; min-height:0;
  border-left:1px solid var(--line-soft); background:rgba(0,0,0,.18); }
.cfg-empty{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; padding:30px; text-align:center; }
.cfg-empty .ring{ width:60px; height:60px; border-radius:18px; display:grid; place-items:center; color:var(--ink-3);
  background:rgba(255,255,255,.04); border:1px solid var(--line); }
.cfg-empty .t{ font-size:var(--fs-body); font-weight:var(--fw-black); color:var(--ink-2); }
.cfg-empty .s{ font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-4); max-width:220px; line-height:1.5; }

.cfg-scroll{ flex:1; min-height:0; overflow-y:auto; padding:16px 16px 10px; display:flex; flex-direction:column; gap:16px; }
.cfg-prev{ position:relative; width:108px; aspect-ratio:var(--ar, 9/16); margin:0 auto; border-radius:13px; overflow:hidden;
  background: radial-gradient(130% 80% at 30% 16%, hsl(var(--ch) 72% 56% / .45), transparent 56%),
   repeating-linear-gradient(135deg,#1b1e2b 0 9px,#161924 9px 18px);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8), inset 0 0 0 1px var(--line-strong); }
.cfg-prev .pv-grad{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.3),transparent 40%,rgba(0,0,0,.55)); }
.cfg-prev .pv-score{ position:absolute; top:6px; left:6px; display:flex; align-items:center; gap:3px; height:20px; padding:0 7px; border-radius:7px;
  background:rgba(8,9,14,.6); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.12); font-size:var(--fs-eyebrow); font-weight:var(--fw-black); color:#fff; }
.cfg-prev .pv-score svg{ color:var(--ai-b); }
.cfg-prev .pv-play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:#fff; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); }
.cfg-prev .pv-dur{ position:absolute; bottom:6px; right:6px; font-size:var(--fs-micro); font-weight:var(--fw-bold); padding:1px 6px; border-radius:5px; background:rgba(8,9,14,.6); color:#fff; }
.cfg-prev[data-orient="land"]{ width:172px; }
.cfg-name{ font-size:var(--fs-panel); font-weight:var(--fw-black); letter-spacing:-.01em; text-align:center; line-height:1.3; }
.cfg-specs{ display:flex; justify-content:center; flex-wrap:wrap; gap:6px; }
.cfg-specs span{ display:flex; align-items:center; gap:5px; height:24px; padding:0 9px; border-radius:7px; background:var(--well);
  border:1px solid var(--line-soft); font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--ink-2); }
.cfg-specs span svg{ color:var(--ink-4); }

.cfg-group{ display:flex; flex-direction:column; gap:9px; }
.cfg-group > label{ font-size:var(--fs-eyebrow); font-weight:var(--fw-black); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); }
.cfg-seg.plat{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.cfg-seg.ratio{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; }
.cfg-seg.ratio button{ display:flex; align-items:center; justify-content:center; gap:7px; padding:10px 4px; border-radius:11px;
  background:var(--well); border:1px solid var(--line); color:var(--ink-3); font-size:var(--fs-label); font-weight:var(--fw-black); font-family:var(--font-mono); transition:.16s var(--out); }
.cfg-seg.ratio button .rbox{ width:18px; border-radius:3px; background:var(--well-2); border:1px solid var(--line-strong); flex:0 0 auto; }
.cfg-seg.ratio button:hover{ color:var(--ink); border-color:var(--line-strong); }
.cfg-seg.ratio button.on{ color:var(--acc-ink); border-color:var(--acc-line); background:var(--acc-soft); }
.cfg-seg.ratio button.on .rbox{ background:var(--acc); border-color:var(--acc); }
.cfg-seg.plat button{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:10px 4px; border-radius:11px;
  background:var(--well); border:1px solid var(--line); color:var(--ink-3); font-size:var(--fs-label); font-weight:var(--fw-bold); transition:.16s var(--out); }
.cfg-seg.plat button svg{ color:var(--ink-3); transition:.16s var(--out); }
.cfg-seg.plat button:hover{ color:var(--ink); border-color:var(--line-strong); }
.cfg-seg.plat button.on{ color:#fff; border-color:color-mix(in srgb, var(--pc) 60%, transparent);
  background:color-mix(in srgb, var(--pc) 14%, transparent); box-shadow:0 0 18px -8px var(--pc); }
.cfg-seg.plat button.on svg{ color:var(--pc); filter:drop-shadow(0 0 5px var(--pc)); }

.cfg-days{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; }
.dpill{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:7px 0; border-radius:9px;
  background:var(--well); border:1px solid var(--line); color:var(--ink-3); transition:.16s var(--out); }
.dpill .dw{ font-size:var(--fs-micro); font-weight:var(--fw-black); letter-spacing:.04em; text-transform:uppercase; }
.dpill .dn{ font-size:var(--fs-sub); font-weight:var(--fw-black); color:var(--ink-2); }
.dpill:hover{ border-color:var(--line-strong); color:var(--ink-2); }
.dpill.today{ border-color:var(--acc-line); }
.dpill.on{ background:var(--acc-soft); border-color:var(--acc-line); color:#fff; box-shadow:0 0 16px -6px var(--acc-glow); }
.dpill.on .dn{ color:#fff; }

.cfg-time{ display:flex; flex-direction:column; gap:8px; }
.cfg-time > input[type=time]{ height:40px; padding:0 12px; border-radius:11px; background:var(--well); border:1px solid var(--line);
  color:var(--ink); font-size:var(--fs-body); font-weight:var(--fw-bold); font-family:'JetBrains Mono',monospace; color-scheme:dark; }
.cfg-time > input[type=time]:focus{ outline:none; border-color:var(--acc-line); box-shadow:0 0 0 3px var(--acc-soft); }
.cfg-slots{ display:flex; gap:6px; }
.cfg-slots .slot{ flex:1; height:30px; border-radius:8px; background:var(--well); border:1px solid var(--line); color:var(--ink-3);
  font-size:var(--fs-label); font-weight:var(--fw-bold); font-family:'JetBrains Mono',monospace; transition:.16s var(--out); }
.cfg-slots .slot:hover{ color:var(--ink); border-color:var(--line-strong); }
.cfg-slots .slot.on{ background:var(--acc-soft); border-color:var(--acc-line); color:#fff; }

.cfg-foot{ flex:0 0 auto; padding:13px 16px 16px; border-top:1px solid var(--line-soft);
  background:linear-gradient(0deg,rgba(0,0,0,.22),transparent); display:flex; flex-direction:column; gap:10px; }
.cfg-summary{ display:flex; align-items:center; gap:7px; font-size:var(--fs-sub); font-weight:var(--fw-med); color:var(--ink-3); }
.cfg-summary svg{ color:var(--ink-2); }
.cfg-summary b{ color:var(--ink); font-weight:var(--fw-black); }
.cfg-add{ height:48px; border-radius:13px; background:var(--ai-grad); color:#fff; font-size:var(--fs-body); font-weight:var(--fw-black);
  display:flex; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 14px 34px -10px var(--ai-glow), inset 0 1px 0 rgba(255,255,255,.28); transition:transform .2s var(--spring), box-shadow .3s var(--out); }
.cfg-add:hover{ transform:translateY(-2px); box-shadow:0 18px 44px -8px var(--ai-glow); }
.cfg-add:active{ transform:translateY(0) scale(.99); }

@media (max-width:720px){
  .mtx-modal{ height:92vh; }
  .mtx-modal-body{ flex-direction:column; }
  .mtx-cfg{ flex-basis:auto; width:auto; border-left:none; border-top:1px solid var(--line-soft); }
}