/* =========================================================
   public/style.css — A3 (2.5D + Real PNG Assets)
   - Mainboard PNG background layer (parallax)
   - Components PNG in palette + placed on board (with depth/shadow)
   - Keep Steps tooltip + Video modal + Win11 overlay + Inspector 3D
   ========================================================= */

:root{
  --bg:#f5f7fb;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --line:#e2e8f0;
  --shadow: 0 14px 34px rgba(2,6,23,.10);
  --r:18px;
  --brand:#2563eb;
  --brand2:#0ea5e9;
  --good:#16a34a;
  --bad:#dc2626;
  --warn:#f59e0b;
  --gap: 14px;
  --focus: 0 0 0 4px rgba(37,99,235,.14);

  --winShadow: 0 40px 120px rgba(0,0,0,.55);

  /* 2.5D tuning */
  --slotShadow: 0 18px 45px rgba(0,0,0,.18);
  --tileShadow: 0 22px 55px rgba(0,0,0,.18);
  --popShadow: 0 25px 80px rgba(0,0,0,.30);

  /* Board shading */
  --boardVignette: radial-gradient(circle at 50% 50%, transparent 56%, rgba(2,6,23,.20) 100%);
  --boardGrid:
    repeating-linear-gradient(0deg, rgba(2,6,23,.015), rgba(2,6,23,.015) 1px, transparent 1px, transparent 22px),
    repeating-linear-gradient(90deg, rgba(2,6,23,.015), rgba(2,6,23,.015) 1px, transparent 1px, transparent 22px);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
}
.hidden{ display:none !important; }
.small{ font-size:12px; }
.muted{ color: var(--muted); }
.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace; }
body.dragging *{ cursor: grabbing !important; }

/* ---------- Inputs / Buttons ---------- */
.btn{
  appearance:none;
  border:1px solid var(--line);
  background:#fff;
  color: var(--text);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 900;
  cursor:pointer;
  box-shadow: 0 6px 14px rgba(2,6,23,.06);
  transition: transform .12s, filter .12s, box-shadow .12s;
}
.btn:hover{ transform: translateY(-1px); filter: brightness(1.02); }
.btn:active{ transform: translateY(0); }
.btn:focus{ outline:none; box-shadow: var(--focus); }
.btn.ghost{ background: transparent; box-shadow:none; }
.btn.primary{
  border-color: rgba(37,99,235,.25);
  background: linear-gradient(135deg, rgba(37,99,235,.95), rgba(14,165,233,.92));
  color:#fff;
}
.btn.ok{
  border-color: rgba(22,163,74,.25);
  background: linear-gradient(135deg, rgba(22,163,74,.92), rgba(34,197,94,.90));
  color:#fff;
}
.btn.warn{
  border-color: rgba(245,158,11,.25);
  background: linear-gradient(135deg, rgba(245,158,11,.96), rgba(251,146,60,.92));
  color:#111827;
}
.btn.small{ padding: 8px 10px; border-radius: 11px; font-size: 12px; }

.input,.select{
  width:100%;
  padding: 11px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  font-weight: 750;
}
.input:focus,.select:focus{
  border-color: rgba(37,99,235,.35);
  box-shadow: var(--focus);
}

/* ---------- Topbar ---------- */
.topbar{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 16px;
}
.brand{ display:flex; align-items:center; gap: 12px; }
.logo{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid; place-items:center;
  background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(14,165,233,.14));
  border: 1px solid rgba(37,99,235,.18);
}
.title{ font-weight: 950; letter-spacing: .2px; }
.subtitle{ font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.top-actions{ display:flex; gap: 10px; align-items:center; }
.badge{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid var(--line);
  background: #fff;
  font-weight: 850;
  font-size: 13px;
}

/* =========================================================
   MAIN LAYOUT: panel + workspace
   ========================================================= */
.layout{
  display:grid;
  grid-template-columns: 250px 1fr;
  gap: var(--gap);
  padding: 14px;
  align-items: stretch;
}
.panel, .workspace{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ---------- Left panel ---------- */
.panel{
  display:flex;
  flex-direction: column;
  min-height: calc(100vh - 92px);
  min-width: 280px;
}
.panel-head{
  padding: 14px;
  border-bottom: 1px solid var(--line);
}
.panel-title{ font-weight: 950; margin-bottom: 10px; }

.steps{
  padding: 12px 14px 14px;
  display:flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
.section-title{ font-weight: 950; margin-bottom: 2px; }

.steps-list{
  list-style: decimal;
  padding-left: 18px;
  margin: 0;
  overflow:auto;
  min-height: 0;
  max-height: calc(100vh - 320px);
}

.steps-list li{
  position: relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 10px 10px;
  margin: 8px 0;
}
.steps-list li.active{
  border-color: rgba(37,99,235,.35);
  box-shadow: var(--focus);
}
.steps-list li.done{
  border-color: rgba(22,163,74,.25);
  background: rgba(22,163,74,.06);
}
.steps-list .meta{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.step-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  justify-content: space-between;
}
.step-left{ min-width: 0; }
.step-right{
  display:flex;
  flex-direction: column;
  gap: 8px;
  align-items:flex-end;
}

.step-mini{
  width: 56px; height: 56px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01));
  display:grid;
  place-items:center;
  overflow:hidden;
}
.step-mini.empty{ opacity: .55; }
.step-mini img, .step-mini svg{ width: 92%; height: 92%; object-fit: contain; }

.step-video{
  border:1px solid rgba(37,99,235,.28);
  background: rgba(37,99,235,.06);
  color: #1e3a8a;
  padding: 7px 10px;
  border-radius: 999px;
  font-weight: 950;
  cursor:pointer;
  font-size: 12px;
}
.step-video:hover{ filter: brightness(1.02); }
.step-novideo{
  font-size: 12px;
  color: var(--muted);
  padding: 7px 10px;
}

.step-pop{
  position: absolute;
  left: 10px;
  top: calc(100% + 8px);
  z-index: 30;
  width: min(520px, calc(100vw - 60px));
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: .12s;
}
.step-pop.show{ opacity: 1; transform: translateY(0); }
.pop-card{
  pointer-events: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--popShadow);
  padding: 12px;
}
.pop-title{ font-weight: 1000; margin-bottom: 10px; }
.pop-body{ display:flex; gap: 12px; align-items: center; }
.pop-thumb{
  width: 86px; height: 86px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01));
  display:grid;
  place-items:center;
  overflow:hidden;
  flex: 0 0 auto;
}
.pop-thumb img, .pop-thumb svg{ width: 92%; height: 92%; object-fit: contain; }
.pop-name{ font-weight: 1000; }
.pop-tag{ margin-top: 6px; font-size: 12px; color: var(--muted); }
.pop-actions{ margin-top: 10px; display:flex; gap: 10px; }
.pop-actions .btn{ pointer-events: auto; }

.attempt{
  margin-top: 6px;
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}
.attempt-row{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 10px;
  margin-bottom: 8px;
}
.scorebox{
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  background: rgba(14,165,233,.06);
}
.score-title{ font-weight: 1000; margin-bottom: 6px; }
.score-line{ margin-top: 4px; }
.score-details{ margin-top: 10px; display:flex; flex-wrap:wrap; gap: 8px; }
.sd{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  font-weight: 900;
  font-size: 12px;
  background:#fff;
}
.sd.ok{ border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.06); }
.sd.bad{ border-color: rgba(220,38,38,.25); background: rgba(220,38,38,.06); }

/* ---------- Workspace ---------- */
.workspace{
  min-height: calc(100vh - 92px);
  display:flex;
  flex-direction: column;
  min-width: 0;
}
.workspace-head{
  padding: 14px;
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
}
.workspace-head .input{ max-width: 560px; flex: 1; }

.workspace-body{
  padding: 14px;
  display:grid;
  grid-template-columns: 22% 78%;
  gap: 14px;
  min-height: 0;
}

/* ---------- Palette ---------- */
.palette{
  overflow:auto;
  min-height: 0;
  max-height: calc(100vh - 170px);
  padding-right: 6px;
}
.group{
  border:1px solid var(--line);
  border-radius: 16px;
  background:#fff;
  margin-bottom: 12px;
  overflow:hidden;
}
.group-title{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  font-weight: 950;
  background: rgba(2,6,23,.02);
  border-bottom: 1px solid var(--line);
}
.group-title .count{
  font-size: 12px;
  color: var(--muted);
  border:1px solid var(--line);
  border-radius: 999px;
  padding: 4px 9px;
  background:#fff;
}
.item{
  display:flex;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  cursor: grab;
  transition: transform .12s ease, background .12s ease;
}
.item:active{ cursor: grabbing; }
.item:hover{ background: rgba(37,99,235,.04); transform: translateY(-1px); }

.thumb{
  width: 56px;
  height: 56px;
  border-radius: 16px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.75), rgba(255,255,255,.00) 46%),
    linear-gradient(180deg, rgba(2,6,23,.02), rgba(2,6,23,.01));
  display:grid;
  place-items:center;
  overflow:hidden;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}
.thumb img, .thumb svg{
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.18));
}
.item .name{ font-weight: 950; line-height: 1.15; }
.item .desc{ font-size: 12px; color: var(--muted); line-height: 1.35; }
.tags{ margin-top: 6px; display:flex; flex-wrap:wrap; gap: 6px; }
.tag{
  font-size: 11px;
  font-weight: 900;
  color: #0f172a;
  background: rgba(2,6,23,.04);
  border: 1px solid rgba(2,6,23,.07);
  padding: 3px 8px;
  border-radius: 999px;
}

/* ---------- Canvas ---------- */
.canvas-wrap{
  border:1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  display:flex;
  flex-direction: column;
  min-width: 0;
  position: relative;
}

.canvas-title{
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display:flex;
  justify-content: space-between;
  align-items:center;
  font-weight: 950;
  position: relative;
  z-index: 4;
}

/* Stage */
.canvas{
  position: relative;
  margin: 12px;
  border-radius: 18px;
  border: 1px solid rgba(37,99,235,.18);
  height: calc(100vh - 210px);
  min-height: 700px;
  overflow:hidden;

  /* 2.5D stage */
  transform-style: preserve-3d;
  perspective: 1000px;
  transform: rotateX(0deg) rotateY(0deg);
  transition: transform .08s linear;
}

/* Board layers */
.board{
  position:absolute;
  inset: 0;
  z-index: 1;
  transform: translateZ(-80px) scale(1.06);
  pointer-events:none;
}
.board-img{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter:
    drop-shadow(0 35px 50px rgba(0,0,0,.26))
    saturate(1.02) contrast(1.03);
  opacity: .98;
}

/* board overlay (grid + vignette) */
.board-overlay{
  position:absolute;
  inset: 0;
  background: var(--boardGrid), var(--boardVignette);
  opacity: .82;
  mix-blend-mode: multiply;
}

/* Slots zone above board */
.slot-layer{
  position:absolute;
  inset: 0;
  z-index: 3;
}

/* small hint under canvas */
.legend{
  padding: 10px 12px 12px;
  font-size: 12px;
  color: var(--muted);
  position: relative;
  z-index: 4;
}
.legend .dot{
  display:inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  margin-right: 8px;
  background: rgba(22,163,74,.85);
}

/* Slot cards (more subtle for realism) */
.slot{
  position:absolute;
  border-radius: 16px;
  border:1px solid rgba(148,163,184,.40);
  background: rgba(255,255,255,.60);
  backdrop-filter: blur(10px);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, opacity .14s ease;
  overflow:hidden;
  box-shadow: var(--slotShadow);
  transform-style: preserve-3d;

  --rx: 0deg;
  --ry: 0deg;
  transform: translateZ(0px) rotateX(var(--rx)) rotateY(var(--ry));
}

/* make slot label less dominant */
.slot .slot-label{
  font-size: 11px;
  font-weight: 950;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(148,163,184,.22);
  color:#0f172a;
  background: rgba(255,255,255,.70);
  display:flex;
  justify-content: space-between;
  gap: 8px;
}
.slot .slot-hint{ font-weight: 900; color: rgba(51,65,85,.62); }

.slot .placed{
  position: relative;
  height: calc(100% - 32px);
  display:grid;
  place-items:center;
}

/* drop guidance */
.slot.valid{
  border-color: rgba(22,163,74,.55);
  box-shadow: 0 0 0 5px rgba(22,163,74,.12), var(--slotShadow);
}
.slot.invalid{
  border-color: rgba(220,38,38,.55);
  box-shadow: 0 0 0 5px rgba(220,38,38,.12), var(--slotShadow);
}

/* placed component tile */
.placed-inner{
  width: 96%;
  height: 92%;
  border-radius: 16px;
  border:1px solid rgba(2,6,23,.10);
  background:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.78), rgba(255,255,255,.00) 52%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.58));
  display:flex;
  align-items:center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
  position: relative;
  box-shadow: var(--tileShadow);
  transform-style: preserve-3d;
  transition: transform .14s ease, filter .14s ease;

  --prx: 0deg;
  --pry: 0deg;
  transform: translateZ(10px) rotateX(var(--prx)) rotateY(var(--pry));
}
.placed-inner:hover{ filter: brightness(1.03); transform: translateZ(18px) rotateX(var(--prx)) rotateY(var(--pry)); }

.placed-inner.flash{ animation: snapIn .35s ease-out 1; }
@keyframes snapIn{
  0%{ transform: translateZ(0px) scale(.96); filter: brightness(1.0); }
  55%{ transform: translateZ(22px) scale(1.03); filter: brightness(1.06); }
  100%{ transform: translateZ(10px) scale(1.0); }
}

/* Render PNG part inside placed */
.part-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter:
    drop-shadow(0 18px 20px rgba(0,0,0,.25))
    saturate(1.02) contrast(1.03);
  transform: translateZ(14px);
}
.placed-svg{
  width: 92%;
  height: 68%;
  display:grid;
  place-items:center;
  overflow:hidden;
  transform: translateZ(14px);
}
.placed-svg img, .placed-svg svg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 16px 18px rgba(0,0,0,.22));
}
.placed-name{
  font-size: 12px;
  font-weight: 1000;
  text-align:center;
  margin-top: 7px;
  color:#0f172a;
  transform: translateZ(10px);
}

.slot .remove{
  position:absolute;
  right: 8px;
  top: 6px;
  border: 0;
  background: rgba(15,23,42,.84);
  color:#fff;
  width: 28px;
  height: 28px;
  border-radius: 11px;
  cursor:pointer;
  font-weight: 1000;
  z-index: 3;
}
.slot .remove:hover{ opacity:.92; }

/* ---------- Modal (login + video) ---------- */
.modal{
  position: fixed;
  inset: 0;
  display:grid;
  place-items:center;
  background: rgba(2,6,23,.58);
  z-index: 100;
}
.modal-card{
  width: min(420px, calc(100vw - 24px));
  background:#fff;
  border:1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  padding: 16px;
}
.modal-title{
  font-weight: 1000;
  font-size: 18px;
  margin-bottom: 4px;
}
.form .row{ display:flex; gap: 10px; margin-top: 10px; }
.msg{ margin-top: 10px; font-size: 13px; font-weight: 900; }
.msg.ok{ color: var(--good); }
.msg.bad{ color: var(--bad); }

.modal-video{
  width: min(900px, calc(100vw - 24px));
  padding: 14px;
}
.modal-video-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.modal-video-body{
  width: 100%;
  border-radius: 16px;
  overflow:hidden;
  border: 1px solid var(--line);
  background: #000;
}
.modal-video-body iframe{
  width: 100%;
  aspect-ratio: 16/9;
  border: 0;
  display:block;
}
.modal-video-foot{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 10px;
}
.toggle{ display:flex; align-items:center; gap: 8px; font-weight: 900; font-size: 12px; }

/* =========================================================
   Inspector 3D (same as Level 2, keep)
   ========================================================= */
.inspector{
  position: fixed;
  inset: 0;
  z-index: 220;
  background:
    radial-gradient(circle at 25% 20%, rgba(37,99,235,.20), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(14,165,233,.16), transparent 55%),
    rgba(2,6,23,.70);
  backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
}
.inspector.hidden{ display:none !important; }

.ins-card{
  width: min(980px, calc(100vw - 26px));
  height: min(620px, calc(100vh - 26px));
  border-radius: 24px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  box-shadow: 0 50px 140px rgba(0,0,0,.65);
  overflow:hidden;
  transform-style: preserve-3d;
  perspective: 1200px;
  position: relative;

  --irx: 0deg;
  --iry: 0deg;
  transform: rotateX(var(--irx)) rotateY(var(--iry));
  transition: transform .08s linear;
}
.ins-top{
  height: 58px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 12px 0 14px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  color:#fff;
}
.ins-title{ font-weight: 1000; letter-spacing: .2px; }
.ins-close{
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(220,38,38,.32);
  color:#fff;
  border-radius: 14px;
  width: 44px; height: 36px;
  cursor:pointer;
  font-weight: 1000;
}
.ins-body{
  height: calc(100% - 58px);
  display:grid;
  grid-template-columns: 46% 54%;
  color:#fff;
}
.ins-left{
  display:grid;
  place-items:center;
  border-right: 1px solid rgba(255,255,255,.12);
}
.ins-stage{
  width: 78%;
  height: 78%;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: 0 40px 120px rgba(0,0,0,.45);
  display:grid;
  place-items:center;
  transform-style: preserve-3d;

  --srx: 0deg;
  --sry: 0deg;
  transform: translateZ(60px) rotateX(var(--srx)) rotateY(var(--sry));
}
.ins-svg{
  width: 72%;
  height: 72%;
  display:grid;
  place-items:center;
  transform: translateZ(50px);
}
.ins-svg img, .ins-svg svg{
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(0,0,0,.30));
}
.ins-right{
  padding: 14px;
  overflow:auto;
}
.ins-meta{ display:flex; flex-wrap:wrap; gap: 10px; margin-top: 10px; }
.ins-pill{
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.10);
  font-weight: 950;
  font-size: 12px;
}
.ins-desc{ margin-top: 12px; opacity: .92; line-height: 1.5; font-weight: 750; }
.ins-hint{ margin-top: 12px; opacity: .85; font-size: 12px; }

/* =========================================================
   Windows overlay (keep minimal from your previous working setup)
   ========================================================= */
.win{ position: fixed; inset: 0; z-index: 200; display:grid; place-items:center; background: rgba(2,6,23,.60); backdrop-filter: blur(10px); }
.win.hidden{ display:none !important; }

.win-frame{
  position: relative;
  width: min(1180px, calc(100vw - 24px));
  height: min(720px, calc(100vh - 24px));
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.08);
  box-shadow: var(--winShadow);
  overflow:hidden;
  transform-style: preserve-3d;
  perspective: 1200px;
}
.win-top{
  height: 54px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 0 12px 0 14px;
  background: rgba(255,255,255,.12);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
}
.win-brand{ display:flex; align-items:center; gap: 10px; color:#fff; font-weight: 950; }
.win-brand .dot{ width: 10px; height: 10px; border-radius: 999px; background: rgba(34,197,94,.95); box-shadow: 0 0 0 6px rgba(34,197,94,.16); }
.win-sub{ font-size: 12px; font-weight: 800; opacity: .85; margin-left: 6px; }
.win-actions{ display:flex; gap: 8px; }
.wbtn{
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color:#fff;
  width: 36px;
  height: 32px;
  border-radius: 12px;
  cursor:pointer;
  font-weight: 1000;
}
.wbtn.danger{ background: rgba(220,38,38,.32); border-color: rgba(220,38,38,.35); }
.win-body{ height: calc(100% - 54px); position: relative; }

.boot{ position:absolute; inset:0; display:grid; place-items:center; background: rgba(0,0,0,.25); }
.boot-wrap{
  width: min(520px, calc(100% - 26px));
  padding: 18px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  color:#fff;
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
  text-align:center;
}
.boot-wrap .logo{
  width: 74px; height: 74px; margin: 0 auto 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(37,99,235,.85), rgba(14,165,233,.82));
  border: 1px solid rgba(255,255,255,.18);
  display:grid; place-items:center;
}
.boot-wrap .logo::after{ content:"⊞"; font-size: 34px; font-weight: 1000; color:#fff; }
.spinner{
  width: 30px; height: 30px; border-radius: 999px; margin: 10px auto 8px;
  border: 3px solid rgba(255,255,255,.20);
  border-top-color: rgba(255,255,255,.85);
  animation: spin .8s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }
.boot-text{ font-weight: 1000; font-size: 16px; }
.boot-sub{ margin-top: 6px; opacity:.86; font-weight: 850; }

.desktop{ position:absolute; inset:0; overflow:hidden; }
.desktop.hidden{ display:none !important; }
.wallpaper{ position:absolute; inset:0; background: linear-gradient(135deg, rgba(15,23,42,.95), rgba(2,6,23,.92)); }
.taskbar{ position:absolute; left: 14px; right: 14px; bottom: 14px; height: 54px; border-radius: 18px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.10); display:flex; align-items:center; gap: 10px; padding: 0 12px; color:#fff; }
.start{ width: 44px; height: 40px; border-radius: 14px; display:grid; place-items:center; cursor:pointer; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); font-weight: 1000; }
.icons{ position:absolute; left: 18px; top: 16px; display:grid; gap: 12px; color:#fff; }
.icon{ width: 110px; padding: 10px; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.08); cursor:pointer; }
.iimg{ width: 52px; height: 52px; border-radius: 16px; margin-bottom: 8px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.16); display:grid; place-items:center; }
.iimg.folder::after{ content:"📁"; font-size: 26px; }
.iimg.edge::after{ content:"🌐"; font-size: 26px; }
.iimg.info::after{ content:"ℹ️"; font-size: 26px; }
.iimg.chip::after{ content:"🧩"; font-size: 26px; }
.itxt{ font-weight: 950; font-size: 13px; opacity:.95; }
.window{ position:absolute; right: 18px; top: 18px; width: min(660px, calc(100% - 200px)); height: min(520px, calc(100% - 140px)); border-radius: 20px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.12); overflow:hidden; }
.window.hidden{ display:none !important; }
.wtitle{ height: 52px; display:flex; align-items:center; justify-content:space-between; padding: 0 10px 0 12px; border-bottom: 1px solid rgba(255,255,255,.12); color:#fff; background: rgba(255,255,255,.08); }
.wcontent{ height: calc(100% - 52px); padding: 12px; overflow:auto; color:#fff; }
.vm{ position:absolute; inset:0; padding: 12px; background: rgba(0,0,0,.22); }
.vm.hidden{ display:none !important; }
#vmFrame{ width: 100%; height: calc(100% - 38px); border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background:#000; }
.vm-hint{ margin-top: 8px; color: rgba(255,255,255,.90); font-weight: 850; font-size: 12px; }
/* =========================================================
   ADD-ON: Admin video editor for each step
   ========================================================= */

.steps-list li{
  overflow: visible;
}

.step-right{
  min-width: 72px;
}

.step-admin-box{
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.92));
  box-shadow: 0 8px 22px rgba(2,6,23,.05);
}

.step-admin-box .admin-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.step-admin-box .admin-title{
  font-size: 12px;
  font-weight: 1000;
  color: #0f172a;
  letter-spacing: .2px;
}

.step-admin-box .admin-note{
  font-size: 11px;
  color: var(--muted);
  line-height: 1.45;
  margin-top: 6px;
}

.step-admin-box .admin-video-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.admin-video-input{
  flex: 1 1 280px;
  min-width: 240px;
  padding: 10px 12px;
  border-radius: 12px;
  border:1px solid var(--line);
  background:#fff;
  outline:none;
  font-weight: 750;
  transition: border-color .12s, box-shadow .12s, background .12s;
}

.admin-video-input:focus{
  border-color: rgba(37,99,235,.35);
  box-shadow: var(--focus);
  background: #fff;
}

.admin-video-input::placeholder{
  color:#94a3b8;
  font-weight:700;
}

.admin-save-video,
.admin-preview-video,
.admin-clear-video{
  white-space: nowrap;
}

.admin-save-video{
  border-color: rgba(37,99,235,.22);
  background: linear-gradient(135deg, rgba(37,99,235,.96), rgba(14,165,233,.92));
  color:#fff;
}

.admin-preview-video{
  border-color: rgba(14,165,233,.20);
  background: rgba(14,165,233,.08);
  color:#075985;
}

.admin-clear-video{
  border-color: rgba(220,38,38,.18);
  background: rgba(220,38,38,.06);
  color:#991b1b;
}

.admin-save-video:hover,
.admin-preview-video:hover,
.admin-clear-video:hover{
  filter: brightness(1.02);
}

.admin-save-video:disabled,
.admin-preview-video:disabled,
.admin-clear-video:disabled{
  opacity:.7;
  cursor:not-allowed;
  transform:none;
}

.step-admin-box .muted.small{
  display:block;
  margin-top: 6px;
  line-height: 1.45;
}

/* nhìn rõ hơn ở step item có video */
.steps-list li.done .step-admin-box{
  background:
    linear-gradient(180deg, rgba(240,253,244,.92), rgba(248,250,252,.96));
  border-color: rgba(22,163,74,.18);
}

/* nút video xem mẫu nổi bật hơn chút */
.step-video,
.popVideo{
  box-shadow: 0 8px 18px rgba(37,99,235,.10);
}

/* =========================================================
   Small helpers for admin actions state
   ========================================================= */

.btn.is-saving{
  opacity: .8;
  cursor: wait;
}

.input.is-error,
.admin-video-input.is-error{
  border-color: rgba(220,38,38,.45) !important;
  box-shadow: 0 0 0 4px rgba(220,38,38,.10) !important;
  background: rgba(254,242,242,.8) !important;
}

.input.is-ok,
.admin-video-input.is-ok{
  border-color: rgba(22,163,74,.35) !important;
  box-shadow: 0 0 0 4px rgba(22,163,74,.10) !important;
  background: rgba(240,253,244,.9) !important;
}

/* =========================================================
   Responsive for admin video editor
   ========================================================= */

@media (max-width: 980px){
  .step-admin-box .admin-video-row{
    flex-direction: column;
    align-items: stretch;
  }

  .admin-video-input{
    min-width: 100%;
    width: 100%;
  }

  .admin-save-video,
  .admin-preview-video,
  .admin-clear-video{
    width: 100%;
  }
}

@media (max-width: 560px){
  .step-row{
    flex-direction: column;
    align-items: stretch;
  }

  .step-right{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .step-mini{
    width: 52px;
    height: 52px;
  }

  .step-admin-box{
    padding: 10px;
  }
}
/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1200px){
  .layout{ grid-template-columns: 300px 1fr; }
  .workspace-body{ grid-template-columns: 280px 1fr; }
  .canvas{ min-height: 650px; height: calc(100vh - 230px); }
}
@media (max-width: 980px){
  .layout{ grid-template-columns: 1fr; }
  .panel{ min-height: auto; }
  .workspace{ min-height: auto; }
  .workspace-body{ grid-template-columns: 1fr; }
  .palette{ max-height: 360px; }
  .canvas{ height: 620px; min-height: 620px; }
  .step-pop{ width: calc(100vw - 40px); }
  .ins-body{ grid-template-columns: 1fr; }
  .ins-left{ display:none; }
}
@media (max-width: 560px){
  .topbar{ padding: 10px 12px; }
  .workspace-head{ flex-direction: column; align-items: stretch; }
  .workspace-head .input{ max-width: none; }
}