:root {
      --bg: #071014;
      --panel: #101820;
      --panel2: #17232e;
      --cyan: #43ffe0;
      --blue: #28b9ff;
      --pink: #ff36e8;
      --red: #ff4d5e;
      --orange: #ff9f2e;
      --green: #55e878;
      --yellow: #ffd166;
      --text: #eafffb;
      --muted: #8fb2b4;
      --line: rgba(67, 255, 224, .35);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Arial, sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 20% 0%, rgba(22, 110, 105, .35), transparent 30%),
        radial-gradient(circle at 80% 20%, rgba(31, 90, 135, .25), transparent 35%),
        #05090d;
      padding: 14px;
    }

    .app {
      width: min(1320px, 100%);
      margin: 0 auto;
      border: 1px solid rgba(67,255,224,.55);
      border-radius: 18px;
      overflow: hidden;
      background: rgba(7,16,20,.96);
      box-shadow: 0 0 60px rgba(67,255,224,.16);
    }

    header {
      padding: 12px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      background: linear-gradient(90deg, rgba(10, 30, 34, .95), rgba(13, 38, 50, .95));
      border-bottom: 1px solid var(--line);
    }

    h1 {
      margin: 0;
      font-size: clamp(20px, 3vw, 31px);
      letter-spacing: .5px;
    }

    .top-stats {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .chip {
      border: 1px solid var(--line);
      background: rgba(67,255,224,.08);
      padding: 8px 11px;
      border-radius: 10px;
      color: #dffff9;
      font-weight: 700;
      font-size: 14px;
    }

    .layout {
      display: grid;
      grid-template-columns: 1fr 345px;
      min-height: 680px;
    }

    .city-panel {
      position: relative;
      min-height: 680px;
      overflow: hidden;
      background:
        linear-gradient(rgba(67,255,224,.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(67,255,224,.05) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(67,255,224,.1), transparent 55%),
        #061c1e;
      background-size: 28px 28px, 28px 28px, auto, auto;
    }

    .city-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.035),
        rgba(255,255,255,.035) 1px,
        transparent 1px,
        transparent 5px
      );
      mix-blend-mode: overlay;
      z-index: 8;
    }

    .city-panel::after {
      content: "";
      position: absolute;
      inset: 16px;
      border: 2px solid rgba(255, 91, 91, .65);
      box-shadow: 0 0 20px rgba(67,255,224,.12) inset;
      pointer-events: none;
      z-index: 9;
    }

    #cityCanvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
    }

    .route-glow {
      position: absolute;
      height: 14px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, var(--pink), transparent);
      box-shadow: 0 0 18px var(--pink), 0 0 28px rgba(255,54,232,.65);
      transform-origin: left center;
      opacity: .9;
      z-index: 4;
      pointer-events: none;
    }

    .vehicle {
      position: absolute;
      z-index: 5;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      display: grid;
      place-items: center;
      background: rgba(5,20,24,.85);
      border: 2px solid var(--cyan);
      box-shadow: 0 0 18px rgba(67,255,224,.85);
      font-size: 24px;
      transform: translate(-50%, -50%);
    }

    .event-marker {
      position: absolute;
      z-index: 6;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      border: 3px solid rgba(255,255,255,.85);
      background: radial-gradient(circle, rgba(255,255,255,.18), rgba(255,77,94,.78));
      box-shadow: 0 0 20px rgba(255,77,94,.9);
      display: grid;
      place-items: center;
      font-size: 28px;
      cursor: pointer;
      transform: translate(-50%, -50%);
      animation: pulse 1.4s infinite;
    }

    .event-marker.done {
      background: radial-gradient(circle, rgba(255,255,255,.18), rgba(85,232,120,.78));
      box-shadow: 0 0 18px rgba(85,232,120,.9);
      animation: none;
    }

    .event-marker.selected {
      outline: 5px solid rgba(255, 209, 102, .45);
    }

    .event-marker .label {
      position: absolute;
      bottom: -24px;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
      background: rgba(5, 12, 16, .85);
      border: 1px solid var(--line);
      color: #eafffb;
      padding: 3px 7px;
      border-radius: 7px;
      font-size: 11px;
      font-weight: 800;
    }

    @keyframes pulse {
      0%,100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.12); }
    }

    .sidebar {
      border-left: 1px solid var(--line);
      background: rgba(9, 16, 22, .96);
      padding: 14px;
      display: grid;
      grid-template-rows: auto 1fr auto;
      gap: 12px;
    }

    .box {
      border: 1px solid var(--line);
      background: rgba(67,255,224,.055);
      border-radius: 14px;
      padding: 12px;
    }

    .box h2 {
      margin: 0 0 10px;
      font-size: 19px;
      color: #dffff9;
    }

    .orders {
      display: grid;
      gap: 8px;
    }

    .order {
      padding: 9px;
      border-radius: 10px;
      background: rgba(255,255,255,.055);
      border-left: 3px solid var(--blue);
      line-height: 1.3;
      font-size: 14px;
    }

    .critical {
      border-left-color: var(--red);
    }

    .monitor {
      background: linear-gradient(160deg, rgba(67,255,224,.12), rgba(40,185,255,.08));
      border-color: rgba(67,255,224,.45);
    }

    .monitor-section {
      background: rgba(7, 23, 28, .72);
      border: 1px solid rgba(67,255,224,.22);
      border-radius: 10px;
      padding: 9px 10px;
      margin-bottom: 8px;
    }

    .monitor-label {
      color: var(--yellow);
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .6px;
      margin-bottom: 5px;
    }

    .monitor p {
      margin: 0;
      color: #defefa;
      font-size: 13px;
      line-height: 1.4;
    }

    .monitor-list {
      margin: 0;
      padding-left: 18px;
      color: #defefa;
      font-size: 13px;
      line-height: 1.4;
    }

    .tutorial-overlay {
      position: fixed;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 16px;
      pointer-events: auto;
      z-index: 30000;
    }

    .tutorial-overlay::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, .72);
      backdrop-filter: blur(3px);
      z-index: 0;
      pointer-events: none;
    }

    .tutorial-overlay.active {
      display: flex;
    }

    .tutorial-card {
      display: none;
    }

    .tutorial-card.active {
      display: block;
    }

    .tutorial-spotlight {
      display: none;
    }

    .tutorial-card {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 30002;
      width: min(640px, 95vw);
      max-height: min(86vh, 760px);
      overflow: auto;
      border-radius: 18px;
      border: 2px solid rgba(255, 209, 102, .65);
      background: linear-gradient(180deg, #f4ecdc, #efe4cd);
      color: #3a270f;
      box-shadow: 0 18px 60px rgba(0,0,0,.45);
      padding: 22px 20px 16px;
      pointer-events: auto;
    }

    .tutorial-card.pos-center {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    .tutorial-card.pos-top-left {
      top: 18%;
      left: 7%;
      transform: none;
    }

    .tutorial-card.pos-top-right {
      top: 18%;
      right: 7%;
      left: auto;
      transform: none;
    }

    .tutorial-card.pos-bottom-left {
      bottom: 8%;
      left: 7%;
      top: auto;
      transform: none;
    }

    .tutorial-card.pos-bottom-right {
      bottom: 8%;
      right: 7%;
      left: auto;
      top: auto;
      transform: none;
    }

    @media (max-width: 900px) {
      .tutorial-card.pos-top-left,
      .tutorial-card.pos-top-right,
      .tutorial-card.pos-bottom-left,
      .tutorial-card.pos-bottom-right {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
      }
    }

    .tutorial-step {
      color: #986918;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: .6px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .tutorial-title {
      margin: 0 0 10px;
      font-size: clamp(26px, 4vw, 46px);
      line-height: 1.02;
      font-weight: 900;
      color: #3f2808;
    }

    .tutorial-text {
      min-height: 92px;
      margin: 0;
      font-size: 22px;
      line-height: 1.35;
      color: #5a4120;
      white-space: pre-line;
    }

    .tutorial-controls {
      display: flex;
      justify-content: flex-end;
      margin-top: 14px;
    }

    .tutorial-btn {
      min-height: 42px;
      padding: 9px 16px;
      border-radius: 11px;
      border: 0;
      background: #9b6e1d;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .tutorial-focus {
      position: relative;
      z-index: 30001 !important;
      filter: brightness(1.35) saturate(1.22) contrast(1.08);
      box-shadow:
        0 0 0 2px rgba(255, 209, 102, .85),
        0 0 22px rgba(255, 209, 102, .62),
        0 0 42px rgba(255, 209, 102, .45);
      border-radius: 12px;
    }

    .demo-marker {
      z-index: 30001 !important;
      box-shadow:
        0 0 24px rgba(255, 77, 94, 1),
        0 0 40px rgba(255, 77, 94, .8),
        0 0 56px rgba(255, 209, 102, .42);
    }

    .demo-action {
      border: 2px solid rgba(255, 209, 102, .8);
      box-shadow: 0 0 18px rgba(255, 209, 102, .45);
    }

    button {
      min-height: 48px;
      border: 0;
      border-radius: 12px;
      padding: 10px;
      background: #163d4a;
      color: white;
      font-weight: 800;
      cursor: pointer;
      transition: .18s;
    }

    button:hover {
      transform: translateY(-2px);
      background: #1d6374;
    }

    button:disabled {
      opacity: .45;
      cursor: not-allowed;
      transform: none;
    }

    .crisis-title {
      color: var(--yellow);
      font-weight: 900;
      font-size: 20px;
      margin-bottom: 8px;
    }

    .crisis-text {
      color: #d7fffa;
      line-height: 1.45;
      min-height: 92px;
    }

    .actions {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }

    .actions button {
      min-height: 40px;
      padding: 7px 10px;
      border-radius: 10px;
      font-size: 13px;
      line-height: 1.25;
    }

    .feedback {
      min-height: 50px;
      margin-top: 10px;
      font-weight: 800;
      line-height: 1.35;
    }

    .good { color: var(--green); }
    .bad { color: var(--red); }

    .mini-map-note {
      color: var(--muted);
      font-size: 13px;
      line-height: 1.35;
    }

    .final {
      display: none;
      text-align: center;
      padding: 36px 20px;
    }

    .final h2 {
      font-size: clamp(26px, 5vw, 44px);
    }

    .legend {
      position: absolute;
      left: 34px;
      bottom: 28px;
      z-index: 7;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      max-width: calc(100% - 70px);
    }

    .legend span {
      background: rgba(5, 12, 16, .8);
      border: 1px solid var(--line);
      padding: 6px 9px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 700;
    }

    @media (max-width: 940px) {
      .layout {
        grid-template-columns: 1fr;
      }

      .city-panel {
        min-height: 520px;
      }

      .sidebar {
        border-left: 0;
        border-top: 1px solid var(--line);
      }
    }

    @media (max-width: 560px) {
      body { padding: 8px; }

      .top-stats {
        justify-content: flex-start;
      }

      .city-panel {
        min-height: 430px;
      }

      .event-marker {
        width: 50px;
        height: 50px;
        font-size: 24px;
      }

      .legend {
        display: none;
      }
    }