:root{
  --bg:#0b0f19;--panel:#121a2a;--panel2:#0f1524;--text:#e7eefc;--muted:#9fb1d1;
  --accent:#5aa9ff;--danger:#ff5a7a;--grid:rgba(180,210,255,.25);--grid-bold:rgba(180,210,255,.38);
  --surface:rgba(15,21,36,.75);--surface-soft:rgba(8,12,22,.38);--line:rgba(110,150,210,.14);
}
*{box-sizing:border-box}
body{
  margin:0;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  color:var(--text);
  background:linear-gradient(180deg,#070a12,#0b0f19 35%,#060812);
  height:100vh;overflow:hidden;
}
.app{
  position:relative;
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  height:100vh;
  gap:10px;
  padding:10px;
}
.app::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}
.leftRail{
  display:flex;
  flex-direction:column;
  gap:8px;
  min-width:0;
  padding:8px;
  background:rgba(18,26,42,.86);
  border:1px solid rgba(110,150,210,.18);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  overflow:hidden;
}
.contextDrawer{
  position:absolute;
  top:10px;
  left:92px;
  bottom:10px;
  width:min(360px, calc(100vw - 132px));
  z-index:8;
  overflow:visible;
  pointer-events:none;
}
.contextDrawerFrame{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
  transform:translateX(-18px);
  opacity:0;
  pointer-events:none;
  transition:transform .18s ease,opacity .18s ease;
}
.app.drawerOpen .contextDrawerFrame{
  transform:none;
  opacity:1;
  pointer-events:auto;
}
.app.drawerOpen .contextDrawer{
  pointer-events:auto;
}
.app.drawerFullscreen::after{
  opacity:1;
  background:rgba(4,7,14,.7);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:auto;
}
.app.drawerFullscreen .contextDrawer{
  top:10px;
  left:10px;
  right:10px;
  bottom:10px;
  width:auto;
  z-index:12;
}
.app.drawerFullscreen .contextDrawerHeader{
  background:rgba(14,20,34,.96);
}
.app.drawerFullscreen .contextDrawerPanels{
  height:100%;
  background:rgba(14,20,34,.96);
}
.contextDrawerHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(110,150,210,.18);
  border-radius:14px;
  background:rgba(18,26,42,.86);
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.contextDrawerTitleBlock{min-width:0}
.contextDrawerTitle{
  font-size:16px;
  font-weight:700;
  color:#f1f6ff;
}
.contextDrawerClose{
  padding:8px 10px;
  font-size:12px;
}
.sidebar{
  background:rgba(18,26,42,.86);
  border:1px solid rgba(110,150,210,.18);
  border-radius:14px;padding:10px;overflow:auto;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
}
.contextDrawerPanels{height:100%}
.drawerSection[hidden]{display:none !important}
.stageWrap{
  background:rgba(18,26,42,.45);
  border:1px solid rgba(110,150,210,.18);
  border-radius:14px;overflow:hidden;position:relative;
  box-shadow:0 8px 24px rgba(0,0,0,.28);
  min-width:0;
}
.stageWatermark{
  position:absolute;
  right:14px;
  bottom:12px;
  z-index:3;
  display:grid;
  justify-items:center;
  align-items:end;
  gap:2px;
  pointer-events:none;
  opacity:.72;
}
.stageWatermarkWordmark{
  font-size:10px;
  line-height:1;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(231,238,252,.62);
  text-shadow:0 1px 8px rgba(0,0,0,.55);
  text-align:center;
}
.topbar{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  z-index:6;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  padding:10px 12px;
  border:1px solid rgba(160,200,255,.16);
  border-radius:16px;
  background:linear-gradient(180deg,rgba(10,16,28,.56),rgba(10,16,28,.34));
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(0,0,0,.18);
  pointer-events:none;
}
.topbar .hint{color:rgba(231,238,252,.82);font-size:12px}
.topbar[hidden]{display:none}
.mobileCanvasToolbar{
  position:absolute;
  left:12px;
  right:12px;
  bottom:calc(env(safe-area-inset-bottom, 0px) + 20px);
  z-index:7;
  display:flex;
  gap:8px;
  justify-content:flex-start;
  pointer-events:none;
}
.mobileCanvasToolbar[hidden]{display:none}
.mobileCanvasModeBtn{
  pointer-events:auto;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(160,200,255,.18);
  background:rgba(10,16,28,.78);
  color:#d7e8ff;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  box-shadow:0 10px 24px rgba(0,0,0,.24);
}
.mobileCanvasModeBtn[aria-pressed="true"]{
  border-color:rgba(90,169,255,.42);
  background:rgba(90,169,255,.22);
  color:#f2f7ff;
}
.miniField{
  display:grid;
  gap:4px;
  min-width:84px;
}
.miniField label{
  font-size:10px;
  margin-bottom:0;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.miniField input,.miniField select{
  padding:7px 8px;
  font-size:12px;
}
h2{margin:6px 0 8px;font-size:14px;letter-spacing:.2px;color:#eaf2ff}
.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;padding:9px;margin-bottom:8px;
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row[hidden]{display:none !important}
label{display:block;font-size:12px;color:var(--muted);margin-bottom:6px}
input[type="text"],input[type="number"],textarea,select{
  width:100%;border-radius:10px;border:1px solid rgba(110,150,210,.20);
  padding:9px 10px;background:rgba(8,12,22,.75);color:var(--text);outline:none;
}
textarea{min-height:120px;resize:vertical}
.btnbar{display:flex;gap:8px;flex-wrap:wrap}
button{
  border:1px solid rgba(110,150,210,.20);
  background:rgba(10,18,35,.85);
  color:var(--text);padding:9px 10px;border-radius:10px;cursor:pointer;
  font-weight:600;font-size:12px;
}
button:hover{border-color:rgba(110,150,210,.35)}
button.primary{background:rgba(90,169,255,.18);border-color:rgba(90,169,255,.35)}
button.danger{background:rgba(255,90,122,.12);border-color:rgba(255,90,122,.35)}
.small{font-size:12px;color:var(--muted);line-height:1.35}
.sectionNote{font-size:11px;color:var(--muted);line-height:1.35;margin-top:8px}
.subcard{
  background:var(--surface-soft);
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px;
}
.panelSection{margin-bottom:8px}
.panelSection summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  margin:0 0 6px;
  display:flex;
  align-items:center;
  gap:8px;
}
.panelSection summary::-webkit-details-marker{display:none}
.panelSection summary::before{
  content:"+";
  width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;border:1px solid var(--line);
  background:var(--surface-soft);color:var(--muted);font-size:12px;
  flex:0 0 auto;
}
.panelSection[open] summary::before{content:"-"}
.panelSection summary h2{margin:0}
.compactRow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}
canvas{
  display:block;
  width:100%;
  height:100%;
  min-height:320px;
  background:#081022;
  cursor:grab;
}
canvas.dragging{cursor:grabbing}
canvas.calibrating{cursor:crosshair}
.stack{display:grid;gap:8px}
.mapControlsGrid{
  display:grid;
  gap:10px;
  margin-top:10px;
}
.mapToolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}
.filePicker{
  display:grid;
  gap:8px;
}
.fileTrigger{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(90,169,255,.3);
  background:linear-gradient(180deg,rgba(90,169,255,.2),rgba(90,169,255,.1));
  color:var(--text);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, transform .16s ease;
}
.fileTrigger:hover{
  border-color:rgba(140,198,255,.55);
  background:linear-gradient(180deg,rgba(90,169,255,.28),rgba(90,169,255,.14));
  transform:translateY(-1px);
}
.fileMeta{
  font-size:11px;
  color:var(--muted);
  line-height:1.35;
}
.nudgeCard{
  display:grid;
  gap:8px;
}
.nudgeCard[hidden]{display:none !important}
.nudgeHeader{
  display:flex;
  gap:8px;
  align-items:end;
  flex-wrap:wrap;
}
.nudgeButtons{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.nudgeButtons button{
  padding:10px 0;
}
.tokenFormRow{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:8px;
  align-items:end;
}
.fieldStack{position:relative}
.autocompleteMenu{
  position:fixed;
  display:grid;
  gap:4px;
  padding:6px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(10,15,26,.96);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
  z-index:12;
  max-height:180px;
  width:min(320px, 42vw);
  overflow:auto;
}
.autocompleteMenu[hidden]{display:none}
.autocompleteItem{
  border:1px solid transparent;
  background:var(--surface-soft);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  padding:7px 9px;
  border-radius:10px;
  font-size:12px;
  font-weight:500;
}
.autocompleteItem:hover{
  border-color:rgba(90,169,255,.35);
  background:rgba(90,169,255,.12);
}
.autocompleteMeta{
  display:inline-block;
  font-size:10px;
  color:var(--muted);
  font-weight:400;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.turnTabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin:8px 0;
}
.tabBtn{
  padding:7px 10px;
  border-radius:999px;
  font-size:11px;
  background:var(--surface-soft);
}
.tabBtn.active{
  background:rgba(90,169,255,.18);
  border-color:rgba(90,169,255,.35);
}
.tabPanel[hidden]{display:none}
.tabPanel textarea{min-height:100px}
.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(8,12,22,.26);
  border:1px solid rgba(160,200,255,.12);
  color:rgba(231,238,252,.88);
}
.list{display:grid;gap:6px;margin-top:8px}
.tokRow{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:7px 8px;
  border-radius:12px;
  background:var(--surface-soft);
  border:1px solid var(--line);
}
.tokRow.selected{
  border-color:rgba(90,169,255,.42);
  box-shadow:inset 0 0 0 1px rgba(90,169,255,.2);
}
.tokRow.grouped{
  background:rgba(90,169,255,.08);
}
.tokThumb{
  position:relative;
  width:34px;
  height:34px;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(160,200,255,.16);
  background:rgba(8,12,22,.4);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.tokThumbImage,
.tokThumbFallback{
  width:100%;
  height:100%;
  display:block;
}
.tokThumbImage{
  position:absolute;
  max-width:none;
}
.tokThumbFallback{
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  color:rgba(8,17,31,.88);
  text-transform:uppercase;
}
.tokLabel{
  min-width:0;
}
.tokRow b{font-size:12px}
.tokRow b{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tokRow .meta{font-size:11px;color:var(--muted)}
.tokRow button{padding:6px 8px;border-radius:9px}
#mobileGroupSelectBtn[aria-pressed="true"]{
  background:rgba(90,169,255,.18);
  border-color:rgba(90,169,255,.35);
}
.footerNote{margin-top:8px;font-size:11px;color:var(--muted)}
.subtleLabel{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:6px;
}
.statusRow{min-height:16px}
.logBox{max-height:140px;overflow:auto}
.saveStatus{min-height:34px;justify-content:center}
.saveSlotGrid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:8px;
  align-items:end;
}
.legacySaveSlotsUi{display:none !important}
.autosaveRow{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:8px;
  align-items:end;
  margin-top:10px;
}
.autosaveRow .saveSlotActions{
  margin-top:0;
  flex-wrap:nowrap;
}
.autosaveRow select{
  max-width:220px;
}
.saveSlotActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.brandSigil{
  width:18px;
  height:18px;
  flex:0 0 auto;
  display:block;
  color:#d7ebff;
}
.brandSigil svg{
  display:block;
  width:100%;
  height:100%;
  filter:drop-shadow(0 0 10px rgba(90,169,255,.16));
}
.railNav{
  display:grid;
  gap:8px;
}
.railButton{
  display:grid;
  justify-items:center;
  gap:4px;
  width:100%;
  padding:10px 6px;
  border-radius:12px;
  background:rgba(8,12,22,.44);
}
.railButton[aria-pressed="true"]{
  background:rgba(90,169,255,.18);
  border-color:rgba(90,169,255,.35);
}
.railButtonGlyph{
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(160,200,255,.18);
  background:rgba(8,12,22,.44);
  font-size:11px;
  font-weight:700;
  color:#dbeaff;
}
.railButtonLabel{
  font-size:10px;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(231,238,252,.82);
  line-height:1.2;
  text-align:center;
}
.contextMenu{
  position:fixed;
  z-index:30;
  min-width:180px;
  display:grid;
  gap:4px;
  padding:6px;
  border-radius:12px;
  border:1px solid var(--line);
  background:rgba(10,15,26,.97);
  box-shadow:0 14px 28px rgba(0,0,0,.34);
}
.contextMenu[hidden]{display:none}
.menuItem{
  width:100%;
  text-align:left;
  border-radius:10px;
  padding:8px 10px;
  background:var(--surface-soft);
  border:1px solid transparent;
  font-size:12px;
  font-weight:600;
}
.menuItem:hover:not(:disabled){
  border-color:rgba(90,169,255,.35);
  background:rgba(90,169,255,.12);
}
.menuItem:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.drawerModeBadge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(90,169,255,.28);
  background:rgba(90,169,255,.12);
  color:#d7e8ff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
}
.drawerContent{
  display:flex;
  flex-direction:column;
  min-height:0;
  flex:1 1 auto;
  position:relative;
  z-index:1;
}
.drawerLead{
  font-size:11px;
  color:var(--muted);
  padding:0 10px;
  margin-top:10px;
}
.drawerActions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 10px 0;
}
.drawerActions .checkRow{
  margin-top:0;
  min-height:34px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--surface-soft);
}
.drawerActions .statusRow{
  flex:1 1 180px;
  min-height:34px;
  display:flex;
  align-items:center;
  padding:0 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--surface-soft);
}
.decisionCard{
  margin:10px 10px 0;
  padding:10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--surface-soft);
}
.decisionText{
  line-height:1.4;
  color:var(--text);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.drawerTabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:10px 10px 0;
}
.drawerPanel{
  padding:0 10px 10px;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
}
.drawerPanel[hidden]{display:none}
.drawerPanel .subcard{margin-top:10px}
.kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono";
  font-size:11px;
  padding:2px 6px;
  border-radius:6px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.12);
}
hr{border:none;border-top:1px solid rgba(110,150,210,.14);margin:10px 0}
.checkRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
  color:var(--muted);
  font-size:12px;
}
input[type="checkbox"]{transform:scale(1.1)}
@media (max-width: 900px){
  body{height:auto;overflow:auto}
  .app{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    height:auto;
    min-height:100vh;
  }
  .leftRail{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    align-items:center;
    gap:6px;
    padding:7px 8px;
    overflow:hidden;
  }
  .railNav{
    display:contents;
  }
  .railButton{
    width:100%;
    min-width:0;
    padding:6px 2px;
    gap:2px;
    border-radius:10px;
  }
  .railButtonGlyph{
    width:20px;
    height:20px;
    font-size:9px;
  }
  .railButtonLabel{
    font-size:8px;
    letter-spacing:.02em;
  }
  .contextDrawer{
    top:58px;
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
    z-index:12;
  }
  .contextDrawerFrame{
    transform:translateY(-14px);
  }
  .app.drawerOpen .contextDrawerFrame{
    transform:none;
  }
  .app.drawerFullscreen .contextDrawer{
    top:58px;
    left:10px;
    right:10px;
    bottom:10px;
    width:auto;
  }
  .sidebar{max-height:none}
  .stageWrap{
    min-height:70vh;
    grid-column:1;
    grid-row:2;
  }
  .mobileCanvasToolbar{
    display:flex;
    left:10px;
    right:10px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 72px);
  }
  .stageWatermark{
    right:12px;
    bottom:calc(env(safe-area-inset-bottom, 0px) + 118px);
  }
  .stageWatermarkWordmark{
    font-size:9px;
    letter-spacing:.14em;
  }
  .row{grid-template-columns:1fr}
  .compactRow{grid-template-columns:1fr 1fr}
  .saveSlotGrid{grid-template-columns:1fr}
  .tokenFormRow{grid-template-columns:1fr}
  .miniField{min-width:72px}
  .pill{font-size:11px;padding:5px 8px}
  .nudgeButtons{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (min-width: 641px) and (max-width: 900px){
  .mobileCanvasToolbar{
    top:72px;
    bottom:auto;
  }
}