:root{
  --bg:#1e1f2e;
  --bg2:#252637;
  --bg3:#2d2e45;
  --panel:#1a1b2a;
  --border:#3a3b56;

  --blue:#6c8ef5;
  --green:#56d4ad;
  --orange:#f5a623;
  --red:#e06c75;

  --text:#cdd6f4;
  --muted:#7f849c;
  --white:#ffffff;

  --radius:12px;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  min-height:100%;
}

body{
  font-family:'Outfit',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
}


/* ---------- BRAND ---------- */

.brand{
  font-family:'JetBrains Mono',monospace;
  font-size:16px;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--blue);
  text-decoration:none;
}

.brand span{
  color:var(--white);
}


/* ---------- HEADER ---------- */

header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;

  min-height:48px;
  padding:0 18px;

  background:var(--panel);
  border-bottom:1px solid var(--border);
}

header a{
  color:var(--text);
  text-decoration:none;
}

header > a:first-child{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  color:var(--blue);
}

nav{
  display:flex;
  gap:12px;
  align-items:center;
}

nav form{
  margin:0;
}


/* ---------- MAIN ---------- */

main{
  max-width:1100px;
  margin:auto;
  padding:22px;
}

h1,h2,h3{
  color:var(--white);
  margin-top:0;
}

h1{
  font-size:24px;
}

h2{
  font-size:19px;
}

p{
  line-height:1.55;
}


/* ---------- BUTTONS ---------- */

button,
.button{
  padding:10px 14px;

  border:1px solid var(--border);
  border-radius:8px;

  background:var(--blue);
  color:#fff;

  font-family:'Outfit',sans-serif;
  font-weight:600;

  cursor:pointer;

  transition:
    background .2s,
    border-color .2s,
    transform .15s;
}

button:hover,
.button:hover{
  filter:brightness(1.08);
}

button:active,
.button:active{
  transform:translateY(1px);
}


/* ---------- CARDS ---------- */

.cards{
  display:grid;
  gap:10px;
}

.card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;

  padding:16px;

  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:var(--radius);

  color:var(--text);
  text-decoration:none;

  transition:
    background .2s,
    border-color .2s,
    transform .15s;
}

.card:hover{
  background:var(--bg3);
  border-color:var(--blue);
  transform:translateY(-1px);
}

.card strong{
  color:var(--white);
}


/* ---------- TOOLBAR ---------- */

.toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:10px;
}

.toolbar button{
  background:var(--bg3);
  color:var(--text);
}

.toolbar button:hover{
  border-color:var(--blue);
  color:var(--white);
}

.toolbar button.active{
  background:var(--blue);
  border-color:var(--blue);
  color:white;
}


/* ---------- INTERACTIVE SCENE ---------- */

#scene{
  position:relative;

  width:100%;
  aspect-ratio:16/10;

  overflow:hidden;
  border-radius:14px;

  background:#84b979;
  border:1px solid var(--border);

  touch-action:none;

  box-shadow:
    0 8px 32px rgba(0,0,0,.20);
}

.road{
  position:absolute;
  background:#4b5563;
}

.road.h{
  left:0;
  right:0;
  top:40%;
  height:20%;
}

.road.v{
  top:0;
  bottom:0;
  left:40%;
  width:20%;
}

.scene-object{
  position:absolute;

  width:58px;
  height:36px;

  border-radius:9px;

  display:grid;
  place-items:center;

  background:#fff;

  font-size:24px;

  box-shadow:
    0 2px 8px rgba(0,0,0,.35);

  user-select:none;
  touch-action:none;

  cursor:grab;
}

.scene-object:active{
  cursor:grabbing;
}

#ink{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  pointer-events:none;
}


/* ---------- FORM / PANEL ---------- */

.panel{
  margin-top:12px;

  display:grid;
  gap:12px;

  background:var(--bg2);

  padding:16px;

  border:1px solid var(--border);
  border-radius:var(--radius);
}

.panel label{
  display:grid;
  gap:6px;

  color:var(--muted);
  font-size:13px;
  font-weight:500;
}

input,
select,
textarea{
  width:100%;

  padding:10px 11px;

  border:1px solid var(--border);
  border-radius:8px;

  background:var(--panel);
  color:var(--text);

  font-family:'Outfit',sans-serif;
  font-size:14px;

  outline:none;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 2px rgba(108,142,245,.14);
}

textarea{
  min-height:80px;
  resize:vertical;
}

select option{
  background:var(--panel);
  color:var(--text);
}


/* ---------- LOGIN ---------- */

.login{
  max-width:420px;

  margin:10vh auto;

  background:var(--bg2);

  border:1px solid var(--border);
  border-radius:14px;

  padding:28px;

  box-shadow:
    0 20px 50px rgba(0,0,0,.25);
}

.login h1{
  font-family:'JetBrains Mono',monospace;
  font-size:22px;
  font-weight:700;

  color:var(--blue);

  margin-bottom:22px;
}

.login h1 span{
  color:var(--white);
}

.login form{
  display:grid;
  gap:12px;
}

.login button{
  width:100%;
  margin-top:8px;
}


/* ---------- LINKS ---------- */

a{
  color:var(--blue);
}

a:hover{
  color:#8da6ff;
}


/* ---------- SMALL META TEXT ---------- */

small,
.meta,
.muted{
  color:var(--muted);
}


/* ---------- STATUS ---------- */

.status{
  display:inline-flex;
  align-items:center;
  gap:6px;

  padding:4px 9px;

  border:1px solid var(--border);
  border-radius:6px;

  font-family:'JetBrains Mono',monospace;
  font-size:11px;
}

.status.planned{
  color:var(--orange);
}

.status.completed{
  color:var(--green);
}

.status.cancelled{
  color:var(--red);
}


/* ---------- MOBILE ---------- */

@media(max-width:700px){

  header{
    padding:10px 12px;
    flex-wrap:wrap;
  }

  nav{
    gap:8px;
  }

  main{
    padding:12px;
  }

  .card{
    flex-direction:column;
    align-items:flex-start;
  }

  .login{
    margin:6vh 14px;
  }

  #scene{
    border-radius:10px;
  }

  button{
    min-height:42px;
  }
}


/* ---------- ACCESSIBILITY ---------- */

@media(prefers-reduced-motion:reduce){
  *{
    transition:none !important;
    animation:none !important;
  }
}


.lang-switch{display:flex;align-items:center;gap:5px}
.lang-switch button{background:none;border:0;padding:0;color:var(--muted);font:inherit;cursor:pointer}
.lang-switch button:hover,.lang-switch button.active{color:var(--blue)}
.lang-switch span{color:var(--border)}
/* MainBlick universal topic scene editor */
.topic-shell{display:grid;gap:12px}
.topic-head{display:grid;grid-template-columns:1.2fr .8fr;gap:14px}
.badge{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--green);border:1px solid rgba(86,212,173,.4);border-radius:6px;padding:4px 8px;margin-bottom:8px}
.scene-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px}
.palette{display:flex;gap:4px}
.swatch{width:25px;height:25px;border-radius:50%;padding:0;background:var(--sw);border:2px solid transparent}
.swatch.active{border-color:#fff}
.dropdown{position:relative}
.scene-menu{display:none;position:absolute;z-index:60;top:38px;right:0;width:300px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px;grid-template-columns:repeat(2,1fr);gap:6px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.scene-menu.show{display:grid}
.scene-menu button{background:var(--panel);border:1px solid var(--border);text-align:left}
.scene-board{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;border:1px solid var(--border);background:#79b36d;touch-action:none}
#sceneBase{position:absolute;inset:0}
.road{position:absolute;background:#50545e}.road.h{left:0;right:0;top:39%;height:22%}.road.v{top:0;bottom:0;left:39%;width:22%}.road-wide{top:35%;height:30%}
.lane.h{position:absolute;left:0;right:0;top:49.5%;border-top:3px dashed #eee9}.lane.v{position:absolute;top:0;bottom:0;left:49.5%;border-left:3px dashed #eee9}
.motorway{position:absolute;left:0;right:0;top:28%;height:36%;background:#50545e;border-top:3px solid #eee;border-bottom:3px solid #eee}
.motorway:before,.motorway:after{content:"";position:absolute;left:0;right:0;border-top:3px dashed #eee9}.motorway:before{top:33%}.motorway:after{top:66%}
.motorway-ramp{position:absolute;width:48%;height:18%;right:-4%;bottom:17%;background:#50545e;transform:skewY(-12deg);border-top:2px solid #eee}
.round-road{position:absolute;width:45%;aspect-ratio:1;border:70px solid #50545e;border-radius:50%;left:27.5%;top:17%}.round-center{position:absolute;width:17%;aspect-ratio:1;border-radius:50%;background:#72a96a;left:41.5%;top:34%}
.round-arm{position:absolute;background:#50545e}.round-arm.north,.round-arm.south{width:16%;height:34%;left:42%}.round-arm.north{top:0}.round-arm.south{bottom:0}.round-arm.west,.round-arm.east{height:22%;width:35%;top:39%}.round-arm.west{left:0}.round-arm.east{right:0}
.parking-road{position:absolute;inset:25% 0 0;background:#50545e}.parking-bay{position:absolute;top:7%;width:15%;height:18%;border:3px solid #fff}.parking-bay.b1{left:42%}.parking-bay.b2{left:60%}.parking-bay.b3{left:78%}
.rural-road{position:absolute;left:-5%;right:-5%;top:37%;height:26%;background:#50545e;transform:rotate(-4deg)}.rural-line{position:absolute;left:-5%;right:-5%;top:49%;border-top:3px dashed #eee;transform:rotate(-4deg)}
.vehicle-pad{position:absolute;inset:12%;display:grid;place-items:center;font-size:min(28vw,240px);background:#2226;border-radius:24px}
.scene-object{position:absolute;min-width:50px;min-height:36px;display:grid;place-items:center;font-size:24px;cursor:grab;user-select:none;touch-action:none;transform-origin:center;z-index:10}
.scene-object.selected{outline:3px solid var(--blue);outline-offset:3px}
.text-label{background:#fff;color:#111;padding:7px 9px;border-radius:7px;font-size:14px;min-width:100px}
.stop-sign{width:48px;height:48px;background:#d52525;color:#fff;display:grid;place-items:center;font-size:10px;font-weight:700;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.yield-sign{width:48px;height:44px;background:#fff;border:5px solid #d52525;clip-path:polygon(50% 100%,0 0,100% 0)}
.priority-sign{width:40px;height:40px;background:#ffd83d;border:5px solid #fff;transform:rotate(45deg)}
.round-sign{width:46px;height:46px;border-radius:50%;background:#fff;border:5px solid #d52525;color:#111;display:grid;place-items:center;font-size:13px;font-weight:700}
.traffic-light{width:28px;height:68px;background:#222;border-radius:9px;padding:5px;display:flex;flex-direction:column;justify-content:center;gap:4px}.bulb{width:16px;height:16px;border-radius:50%;background:#555}.bulb.red.on{background:#ff3b3b}.bulb.yellow.on{background:#ffd43b}.bulb.green.on{background:#39d353}
.zebra-mark{width:120px;height:50px;background:repeating-linear-gradient(90deg,#f5f5f5 0 12px,#555 12px 24px);border:1px solid #ddd}.stop-line{width:110px;height:8px;background:#fff}.road-arrow{font-size:42px;color:#fff}
#ink{position:absolute;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}
.object-controls{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:8px}
.object-controls button{background:var(--bg3)}
.teaching-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.teaching-steps .step{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px}.teaching-steps b{color:#fff}
@media(max-width:760px){.topic-head,.teaching-steps{grid-template-columns:1fr}.scene-menu{left:0;right:auto;width:270px}.scene-toolbar{position:sticky;top:48px;z-index:45}}

/* Direct touch resize/rotate handles */
.scene-object{
  position:absolute;
  display:grid;
  place-items:center;
  user-select:none;
  touch-action:none;
  z-index:10;
  transform-origin:center;
}
.scene-object svg{pointer-events:none}
.selection-ui{
  position:absolute;
  z-index:30;
  pointer-events:none;
  transform-origin:center;
}
.selection-box{
  position:absolute;inset:0;
  border:2px solid var(--blue);
  border-radius:8px;
  pointer-events:none;
}
.resize-handle,.rotate-handle{
  position:absolute;
  width:22px;height:22px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--blue);
  pointer-events:auto;
  touch-action:none;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.resize-handle.nw{left:-11px;top:-11px;cursor:nwse-resize}
.resize-handle.ne{right:-11px;top:-11px;cursor:nesw-resize}
.resize-handle.sw{left:-11px;bottom:-11px;cursor:nesw-resize}
.resize-handle.se{right:-11px;bottom:-11px;cursor:nwse-resize}
.rotate-handle{
  left:50%;top:-42px;
  transform:translateX(-50%);
  display:grid;place-items:center;
  color:#111;font-size:13px;font-weight:700;
  cursor:grab;
}
.rotate-handle:after{
  content:"";
  position:absolute;
  width:2px;height:18px;
  background:var(--blue);
  top:19px;left:7px;
}
.mini-colors{
  position:absolute;
  left:50%;
  bottom:-38px;
  transform:translateX(-50%);
  display:flex;
  gap:5px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  padding:5px 7px;
  pointer-events:auto;
}
.mini-colors button{
  width:20px;height:20px;
  min-height:20px;
  padding:0;
  border-radius:50%;
  border:2px solid #ffffff66;
}
@media(max-width:700px){
  .resize-handle,.rotate-handle{width:28px;height:28px}
  .resize-handle.nw{left:-14px;top:-14px}
  .resize-handle.ne{right:-14px;top:-14px}
  .resize-handle.sw{left:-14px;bottom:-14px}
  .resize-handle.se{right:-14px;bottom:-14px}
  .rotate-handle{top:-50px}
  .mini-colors button{width:24px;height:24px}
}

/* PowerPoint-style object editing */
.object-controls{display:none}
.scene-object{touch-action:none}
.selection-ui{position:absolute;z-index:40;pointer-events:none;transform-origin:center}
.selection-box{position:absolute;inset:0;border:2px solid var(--blue);pointer-events:none}
.resize-handle,.rotate-handle{
  position:absolute;width:16px;height:16px;border-radius:2px;background:#fff;border:2px solid var(--blue);
  pointer-events:auto;touch-action:none;box-shadow:0 1px 4px #0005
}
.resize-handle.nw{left:-8px;top:-8px;cursor:nwse-resize}
.resize-handle.n{left:50%;top:-8px;transform:translateX(-50%);cursor:ns-resize}
.resize-handle.ne{right:-8px;top:-8px;cursor:nesw-resize}
.resize-handle.e{right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.resize-handle.se{right:-8px;bottom:-8px;cursor:nwse-resize}
.resize-handle.s{left:50%;bottom:-8px;transform:translateX(-50%);cursor:ns-resize}
.resize-handle.sw{left:-8px;bottom:-8px;cursor:nesw-resize}
.resize-handle.w{left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.rotate-handle{
  width:24px;height:24px;border-radius:50%;left:50%;top:-38px;transform:translateX(-50%);
  display:grid;place-items:center;color:#111;font-weight:700;cursor:grab
}
.rotate-handle:after{content:"";position:absolute;width:2px;height:15px;background:var(--blue);top:22px;left:9px}
.vehicle-color-chooser{
  display:flex;gap:5px;align-items:center;padding:4px 7px;background:var(--bg2);border:1px solid var(--border);border-radius:8px
}
.vehicle-color-chooser button{
  width:24px;height:24px;min-height:24px;padding:0;border-radius:50%;background:var(--c);border:2px solid #fff8
}
.shape-menu{max-height:320px;overflow:auto}
.shape-menu button{min-height:38px}
@media(max-width:700px){
  .resize-handle{width:24px;height:24px}
  .resize-handle.nw{left:-12px;top:-12px}.resize-handle.n{top:-12px}.resize-handle.ne{right:-12px;top:-12px}
  .resize-handle.e{right:-12px}.resize-handle.se{right:-12px;bottom:-12px}.resize-handle.s{bottom:-12px}
  .resize-handle.sw{left:-12px;bottom:-12px}.resize-handle.w{left:-12px}
  .rotate-handle{width:30px;height:30px;top:-48px}
}

/* MainBlick toolbar/UI stabilization */
.scene-toolbar-wrap{
  position:sticky;
  top:48px;
  z-index:45;
  background:var(--bg);
  padding:6px 0;
  overflow:visible;
}
.scene-toolbar{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:nowrap;
  white-space:nowrap;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:thin;
  padding:7px 8px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
}
.scene-toolbar .tool{
  flex:0 0 auto;
  min-width:34px;
  min-height:34px;
  padding:6px 8px;
}
.toolbar-sep{
  width:1px;
  height:24px;
  background:var(--border);
  flex:0 0 1px;
  margin:0 2px;
}
.split-main{border-radius:7px 0 0 7px!important;margin-right:-4px}
.split-caret{border-radius:0 7px 7px 0!important;min-width:24px!important;padding-left:5px!important;padding-right:5px!important}
.palette{display:flex;gap:4px;flex:0 0 auto}
.swatch{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;padding:0!important;background:var(--sw)!important;border-radius:50%!important;border:2px solid transparent!important}
.swatch.active{border-color:#fff!important}

.floating-popover{
  position:fixed;
  z-index:9999;
  display:grid;
  grid-template-columns:repeat(4,minmax(48px,1fr));
  gap:6px;
  min-width:220px;
  max-width:min(360px,calc(100vw - 16px));
  max-height:320px;
  overflow:auto;
  padding:8px;
  background:var(--bg2);
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.floating-popover[hidden]{display:none}
.popover-item{
  min-height:44px;
  padding:7px;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  cursor:pointer;
}
.popover-item:hover{border-color:var(--blue);background:var(--bg3)}
.mini-preview{display:grid;place-items:center;font-size:26px;color:var(--pc)}
.vehicle-preview{width:30px;height:20px;border-radius:6px;background:var(--pc)}
.arrow-preview{font-weight:700;font-size:28px}

.selection-ui{position:absolute;z-index:40;pointer-events:none;transform-origin:center}
.selection-box{position:absolute;inset:0;border:2px solid var(--blue);pointer-events:none}
.resize-handle,.rotate-handle{
  position:absolute;
  width:16px;height:16px;
  background:#fff;
  border:2px solid var(--blue);
  pointer-events:auto;
  touch-action:none;
  box-shadow:0 1px 4px #0005;
}
.resize-handle.nw{left:-8px;top:-8px;cursor:nwse-resize}
.resize-handle.n{left:50%;top:-8px;transform:translateX(-50%);cursor:ns-resize}
.resize-handle.ne{right:-8px;top:-8px;cursor:nesw-resize}
.resize-handle.e{right:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.resize-handle.se{right:-8px;bottom:-8px;cursor:nwse-resize}
.resize-handle.s{left:50%;bottom:-8px;transform:translateX(-50%);cursor:ns-resize}
.resize-handle.sw{left:-8px;bottom:-8px;cursor:nesw-resize}
.resize-handle.w{left:-8px;top:50%;transform:translateY(-50%);cursor:ew-resize}
.rotate-handle{
  width:24px;height:24px;border-radius:50%;
  left:50%;top:-38px;transform:translateX(-50%);
  display:grid;place-items:center;color:#111;font-weight:700;cursor:grab;
}
.rotate-handle:after{
  content:"";position:absolute;width:2px;height:15px;background:var(--blue);top:22px;left:9px;
}
.scene-object{touch-action:none}
.scene-object svg{pointer-events:none}

@media(max-width:700px){
  .scene-toolbar-wrap{top:44px}
  .resize-handle{width:24px;height:24px}
  .resize-handle.nw{left:-12px;top:-12px}
  .resize-handle.n{top:-12px}
  .resize-handle.ne{right:-12px;top:-12px}
  .resize-handle.e{right:-12px}
  .resize-handle.se{right:-12px;bottom:-12px}
  .resize-handle.s{bottom:-12px}
  .resize-handle.sw{left:-12px;bottom:-12px}
  .resize-handle.w{left:-12px}
  .rotate-handle{width:30px;height:30px;top:-48px}
}

/* Object insert patch */
.choice-dot{
  width:22px;height:22px;border-radius:50%;
  display:inline-block;background:var(--pc);
  border:2px solid rgba(255,255,255,.7);
  vertical-align:middle;margin-right:5px;
}
.scene-toolbar button{touch-action:manipulation}
.floating-popover button{touch-action:manipulation}

/* definitive visibility/insertion fix */
.scene-board{isolation:isolate}
#sceneBase{z-index:1}
#ink{z-index:20}
.scene-object{
  z-index:30!important;
  position:absolute!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible;
  background:transparent!important;
  pointer-events:auto;
  touch-action:none;
}
.scene-object .vehicle-svg{width:100%!important;height:100%!important;display:block!important}
.emoji-object{font-size:34px;line-height:1}
.selection-ui{z-index:40!important}
.scene-action-status{
  position:fixed;right:16px;bottom:18px;z-index:10000;
  padding:7px 11px;border-radius:8px;background:var(--panel);
  border:1px solid var(--blue);color:var(--text);
  opacity:0;transform:translateY(8px);pointer-events:none;transition:.18s;
}
.scene-action-status.show{opacity:1;transform:none}
.floating-popover{z-index:9999!important}
.popover-color{
  width:46px;height:46px;padding:7px;
  background:var(--panel);border:1px solid var(--border);border-radius:8px;
}
.color-preview{display:block;width:28px;height:28px;border-radius:7px;border:2px solid #fff8}

.scene-toolbar [data-mode].active{
  border-color:var(--blue)!important;
  background:var(--bg3)!important;
  color:#fff!important;
}

/* Surgical UI refinements */
.zebra-tool{
  font-family:'JetBrains Mono',monospace;
  letter-spacing:-2px;
  font-size:13px;
}

/* MainBlick street + situation library: additive only */
#scene .t-bottom{top:50%;height:50%}
#scene .road-narrow{top:44%;height:12%}
#scene .curve-road{
  position:absolute;left:6%;top:8%;width:88%;height:82%;
  border:70px solid #4b5563;
  border-left-color:transparent;
  border-bottom-color:transparent;
  border-radius:50%;
  transform:rotate(14deg);
}
.entry-ramp{transform:skewY(-12deg) skewX(-18deg)}
.exit-ramp{transform:skewY(12deg) skewX(18deg)}

.street-piece{
  position:relative;width:100%;height:100%;
  overflow:hidden;border-radius:5px;background:transparent;
  pointer-events:none;
}
.street-straight,.street-vertical,.street-motorway,.street-accel,.street-decel{
  background:#4b5563;
}
.street-straight:after,.street-vertical:after,.street-motorway:after{
  content:"";position:absolute;left:4%;right:4%;top:50%;
  border-top:3px dashed #f3f4f6;
}
.street-vertical:after{transform:rotate(90deg)}
.street-motorway:before{
  content:"";position:absolute;left:0;right:0;top:25%;bottom:25%;
  border-top:2px solid #f3f4f6;border-bottom:2px solid #f3f4f6;
}
.street-curve{
  border:32px solid #4b5563;
  border-left-color:transparent;border-bottom-color:transparent;
  border-radius:50%;
}
.street-t{
  background:
    linear-gradient(90deg,transparent 35%,#4b5563 35% 65%,transparent 65%),
    linear-gradient(0deg,#4b5563 0 52%,transparent 52%);
}
.street-cross{
  background:
    linear-gradient(90deg,transparent 35%,#4b5563 35% 65%,transparent 65%),
    linear-gradient(0deg,transparent 35%,#4b5563 35% 65%,transparent 65%);
}
.street-accel,.street-decel{clip-path:polygon(0 35%,100% 0,100% 100%,0 65%)}
.street-cycle{background:#557765;border:2px dashed #eef2f7}
.street-sidewalk{
  background:#9ca3af;
  background-image:repeating-linear-gradient(90deg,transparent 0 24px,#6b7280 25px 27px);
}
.street-zebra{background:repeating-linear-gradient(90deg,#fff 0 14px,#4b5563 14px 28px)}
.street-parking{
  background:#4b5563;border:3px solid #fff;
  background-image:repeating-linear-gradient(90deg,transparent 0 44px,#fff 45px 48px);
}
.street-stopline{background:linear-gradient(0deg,transparent 43%,#fff 43% 57%,transparent 57%)}
.street-island{background:#d1d5db;border:4px solid #fff;border-radius:50%}

/* MainBlick puzzle-compatible street geometry */
:root{
  --street-road:#4b5563;
  --street-line:#f3f4f6;
  --street-cycle:#5c846d;
}
.street-piece{width:100%;height:100%;position:relative;overflow:hidden;border-radius:0!important;background:transparent}
.street-straight,.street-vertical,.street-motorway,.street-accel,.street-decel,.street-bikeRoad{background:transparent!important}
.street-straight:before,.street-vertical:before,.street-motorway:before,.street-bikeRoad:before{content:"";position:absolute;background:var(--street-road)}
.street-straight:before,.street-motorway:before,.street-bikeRoad:before{left:0;right:0;top:25%;height:50%}
.street-vertical:before{top:0;bottom:0;left:25%;width:50%}
.street-straight:after,.street-motorway:after{content:"";position:absolute;left:0;right:0;top:50%;border-top:3px dashed var(--street-line)}
.street-vertical:after{content:"";position:absolute;top:0;bottom:0;left:50%;border-left:3px dashed var(--street-line)}
.street-cross{background:
  linear-gradient(90deg,transparent 25%,var(--street-road) 25% 75%,transparent 75%),
  linear-gradient(0deg,transparent 25%,var(--street-road) 25% 75%,transparent 75%)!important}
.street-t{background:
  linear-gradient(90deg,transparent 25%,var(--street-road) 25% 75%,transparent 75%),
  linear-gradient(0deg,var(--street-road) 0 50%,transparent 50%)!important}
.street-curve{border:30px solid var(--street-road)!important;border-left-color:transparent!important;border-bottom-color:transparent!important;border-radius:50%!important}
.street-accel:before,.street-decel:before{content:"";position:absolute;left:0;right:0;top:30%;height:40%;background:var(--street-road);clip-path:polygon(0 35%,100% 0,100% 100%,0 65%)}
.street-bikeRoad:before{background:linear-gradient(0deg,var(--street-cycle) 0 22%,var(--street-road) 22% 100%)}
.street-bikeRoad:after{content:"🚲";position:absolute;left:10%;bottom:3%;font-size:18px;color:white}
.street-cycle{background:var(--street-cycle)!important;border:2px dashed var(--street-line)!important}
.street-zebra{background:repeating-linear-gradient(90deg,#fff 0 14px,var(--street-road) 14px 28px)!important}
.street-sidewalk{background:#9ca3af!important;background-image:repeating-linear-gradient(90deg,transparent 0 24px,#6b7280 25px 27px)!important}
.street-parking{background:var(--street-road)!important;border:3px solid #fff!important;background-image:repeating-linear-gradient(90deg,transparent 0 44px,#fff 45px 48px)!important}
.street-stopline{background:linear-gradient(0deg,transparent 43%,#fff 43% 57%,transparent 57%)!important}
.street-island{background:#d1d5db!important;border:4px solid #fff!important;border-radius:50%!important}

/* Truly blank scene */
#sceneBase:empty{background:none!important}

/* Compact radio progress */
.progress-choice{border:0;padding:0;margin:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.progress-choice legend{color:var(--muted);font-size:13px;margin-bottom:6px}
.progress-choice label{display:flex;align-items:center;gap:5px;color:var(--text);font-size:14px}
.progress-choice input{width:auto}
.scene-object,.resize-handle{touch-action:none}

/* Rotated resize/rotate interaction */
.scene-object{
  touch-action:none;
}
.scene-object.rotating{
  cursor:grabbing!important;
}
.scene-object.resizing{
  user-select:none;
}

/* MainBlick rotation + layer fix */
.scene-object{
  touch-action:none;
  transform-origin:center center;
}
.scene-object.street-object{
  z-index:6!important;
}
.scene-object:not(.street-object){
  z-index:30!important;
}
#sceneBase{
  z-index:1!important;
}
#ink{
  z-index:50!important;
}
/* Existing resize handles are not used by this interaction model. */
.selection-ui,.resize-handle,.rotate-handle{
  display:none!important;
}

/* Precise resize / rotation / layering */
.scene-object{
  touch-action:none;
  transform-origin:center center;
  overflow:visible!important;
}
.scene-object.street-object{
  z-index:6!important;
}
.scene-object:not(.street-object){
  z-index:30!important;
}
#sceneBase{z-index:1!important}
#ink{z-index:50!important}

.object-rotate-knob{
  position:absolute;
  right:-18px;
  top:-18px;
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff;
  color:#111;
  border:2px solid var(--blue);
  font-size:13px;
  font-weight:700;
  line-height:1;
  cursor:grab;
  opacity:0;
  pointer-events:none;
  box-shadow:0 1px 5px #0005;
}
.scene-object:hover .object-rotate-knob,
.scene-object.selected-object .object-rotate-knob{
  opacity:1;
  pointer-events:auto;
}
.object-rotate-knob:active{cursor:grabbing}

.selection-ui,.resize-handle,.rotate-handle{
  display:none!important;
}

.zebra-tool{
  letter-spacing:-3px!important;
  min-width:48px!important;
}

@media(max-width:700px){
  .object-rotate-knob{
    width:28px;
    height:28px;
    right:-23px;
    top:-23px;
  }
}

/* School-scoped account creation */
.credentials-card label{display:grid;gap:6px;margin:12px 0}
.credentials-card .copy-field{font-family:ui-monospace,monospace;font-weight:700}

/* Manager dashboard */
.dashboard-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}
.dashboard-heading h1{margin-bottom:3px}
.dashboard-school{margin:0;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.metric-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:15px;display:grid;gap:7px}
.metric-card span{font-size:13px;color:var(--muted)}
.metric-card strong{font-size:28px;line-height:1}
.dashboard-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.primary-action{background:var(--blue);color:#fff!important;border-color:var(--blue)!important}
.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.dashboard-section{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.section-title h2{margin:0 0 10px}
.section-title>span{min-width:28px;text-align:center;border-radius:999px;padding:3px 8px;background:var(--surface);color:var(--muted)}
.compact-cards .card{padding:11px 12px}
.appointment-card{display:grid;grid-template-columns:minmax(145px,.8fr) 1fr 1.2fr;align-items:center}
.vehicle-card{display:grid;grid-template-columns:.7fr 1.3fr auto;align-items:center}
.status-busy{font-weight:700}
.status-free{font-weight:700}
.muted{color:var(--muted)}
.dashboard-details{margin:12px 0;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.dashboard-details summary{cursor:pointer;font-weight:700}
.dashboard-details[open] summary{margin-bottom:10px}
@media(max-width:800px){
  .metric-grid{grid-template-columns:1fr 1fr}
  .dashboard-columns{grid-template-columns:1fr}
  .appointment-card,.vehicle-card{grid-template-columns:1fr}
}

/* Manager dashboard */
.dashboard-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}
.dashboard-heading h1{margin-bottom:3px}
.dashboard-school{margin:0;color:var(--muted)}
.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.metric-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:15px;display:grid;gap:7px}
.metric-card span{font-size:13px;color:var(--muted)}
.metric-card strong{font-size:28px;line-height:1}
.dashboard-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}
.primary-action{background:var(--blue);color:#fff!important;border-color:var(--blue)!important}
.dashboard-columns{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.dashboard-section{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
.section-title{display:flex;align-items:center;justify-content:space-between;gap:10px}
.section-title h2{margin:0 0 10px}
.section-title>span{min-width:28px;text-align:center;border-radius:999px;padding:3px 8px;background:var(--surface);color:var(--muted)}
.compact-cards .card{padding:11px 12px}
.appointment-card{display:grid;grid-template-columns:minmax(145px,.8fr) 1fr 1.2fr;align-items:center}
.vehicle-card{display:grid;grid-template-columns:.7fr 1.3fr auto;align-items:center}
.status-busy{font-weight:700}
.status-free{font-weight:700}
.muted{color:var(--muted)}
.dashboard-details{margin:12px 0;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px 12px}
.dashboard-details summary{cursor:pointer;font-weight:700}
.dashboard-details[open] summary{margin-bottom:10px}
@media(max-width:800px){
  .metric-grid{grid-template-columns:1fr 1fr}
  .dashboard-columns{grid-template-columns:1fr}
  .appointment-card,.vehicle-card{grid-template-columns:1fr}
}

/* Live fleet dashboard */
.fleet-live-card{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:14px;
  padding:14px;
  margin:14px 0;
}
.fleet-title{align-items:flex-start}
.fleet-title p{margin:2px 0 0}
#fleetMap{
  width:100%;
  height:390px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  margin-top:8px;
  background:#d8dde3;
}
.fleet-legend{
  display:flex;
  gap:16px;
  align-items:center;
  flex-wrap:wrap;
  font-size:13px;
  color:var(--muted);
  padding-top:9px;
}
.fleet-dot{
  display:inline-block;
  width:9px;height:9px;border-radius:50%;
  margin-right:5px;
}
.fleet-dot.driving{background:#56d4ad}
.fleet-dot.parked{background:#7f849c}
.live-car{
  min-width:58px;
  display:grid;
  place-items:center;
  padding:3px 5px;
  border-radius:9px;
  border:2px solid #fff;
  box-shadow:0 2px 8px #0006;
  font-size:18px;
}
.live-car small{
  font-size:9px;
  line-height:1;
  white-space:nowrap;
  font-weight:800;
}
.live-car.driving{background:#56d4ad;color:#111827}
.live-car.parked{background:#7f849c;color:#fff}
.leaflet-popup-content{color:#111827}
@media(max-width:700px){#fleetMap{height:300px}}

/* Vehicle identity routes + subtle direction */
.fleet-route-legend{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
  padding-top:5px;
}
.route-identity{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--muted);
}
.route-identity i{
  width:20px;
  height:4px;
  border-radius:4px;
  background:var(--route-color);
}
.route-arrow{
  display:grid;
  place-items:center;
  width:16px;
  height:16px;
  color:var(--route-color);
  font-size:11px;
  line-height:1;
  opacity:.72;
  text-shadow:0 1px 2px #fff,0 -1px 2px #fff;
  transform-origin:center;
  pointer-events:none;
}