:root{
    --bg: #0f1216;
    --bg-panel: #161b21;
    --bg-panel-2: #1c2229;
    --border: #262e37;
    --border-soft: #1e242c;
    --text: #eef1f4;
    --text-dim: #9aa5b1;
    --text-faint: #5c6673;
    --accent: #4fd8c4;
    --accent-dim: #2f6e64;
    --accent-glow: rgba(79,216,196,0.18);
    --warn: #e0955a;
    --danger: #e0637a;
    --radius: 10px;
    --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
    --font-body: 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;
  }
  @font-face{
    font-family:'Space Grotesk';
    src: local('Space Grotesk');
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:
      radial-gradient(1200px 600px at 85% -10%, rgba(79,216,196,0.06), transparent 60%),
      var(--bg);
    color:var(--text);
    font-family:var(--font-body);
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--accent-glow); }
  button{ font-family:inherit; }
  a{ color:inherit; }

  /* ---------- Top bar ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 28px;
    border-bottom:1px solid var(--border-soft);
    position:sticky; top:0; z-index:20;
    background:rgba(15,18,22,0.9);
    backdrop-filter: blur(8px);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-display);
    font-size:19px; letter-spacing:0.01em;
  }
  .brand .orb{
    width:22px; height:22px; border-radius:50%;
    background: radial-gradient(circle at 32% 28%, #bdf7ee, var(--accent) 45%, #14524a 100%);
    box-shadow: 0 0 14px var(--accent-glow);
    flex-shrink:0;
  }
  .brand small{
    display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--text-faint);
    letter-spacing:0.08em; text-transform:uppercase; margin-top:1px;
  }
  .topbar-actions{ display:flex; align-items:center; gap:10px; }

  .btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:9px 16px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg-panel-2); color:var(--text);
    font-size:13.5px; font-weight:500; cursor:pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
  }
  .btn:hover{ border-color:#3a4650; background:#20272f; }
  .btn:active{ transform:translateY(1px); }
  .btn.primary{
    background:var(--accent); border-color:var(--accent); color:#062521; font-weight:600;
  }
  .btn.primary:hover{ background:#6ee4d3; }
  .btn.ghost{ background:transparent; border-color:transparent; color:var(--text-dim); }
  .btn.ghost:hover{ color:var(--text); background:var(--bg-panel-2); }
  .btn.danger{ color:var(--danger); }
  .btn.danger:hover{ border-color:var(--danger); }
  .btn.small{ padding:6px 11px; font-size:12.5px; border-radius:7px; }
  .btn:disabled{ opacity:0.4; cursor:not-allowed; }
  .btn svg{ width:15px; height:15px; flex-shrink:0; }

  /* ---------- Views ---------- */
  .view{ display:none; }
  .view.active{ display:block; }

  /* ---------- Dashboard ---------- */
  .dash-wrap{ max-width:1180px; margin:0 auto; padding:44px 28px 80px; }
  .dash-head{ margin-bottom:34px; }
  .dash-head h1{
    font-family:var(--font-display); font-size:30px; margin:0 0 8px; letter-spacing:-0.01em;
  }
  .dash-head p{ color:var(--text-dim); margin:0; font-size:14.5px; max-width:520px; line-height:1.5; }

  .project-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px;
  }
  .project-card{
    background:var(--bg-panel); border:1px solid var(--border-soft); border-radius:var(--radius);
    overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s ease, transform .15s ease;
  }
  .project-card:hover{ border-color:#333e48; transform:translateY(-2px); }
  .card-thumb{
    height:150px; position:relative; overflow:hidden; background:
      linear-gradient(135deg, #1a2027, #11151a);
    display:flex; align-items:center; justify-content:center;
  }
  .card-thumb img{ width:100%; height:100%; object-fit:cover; }
  .card-thumb .placeholder-orb{
    width:54px; height:54px; border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #2b3843, #171d23 70%);
    border:1px dashed var(--border);
  }
  .card-scene-count{
    position:absolute; bottom:8px; left:8px;
    background:rgba(10,12,14,0.72); border:1px solid rgba(255,255,255,0.08);
    padding:3px 9px; border-radius:20px; font-size:11px; font-family:var(--font-mono);
    color:var(--text-dim); letter-spacing:0.03em;
  }
  .card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:10px; flex:1; }
  .card-title{
    font-family:var(--font-display); font-size:16px; margin:0; cursor:pointer;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .card-title:hover{ color:var(--accent); }
  .card-meta{ font-size:11.5px; color:var(--text-faint); font-family:var(--font-mono); }
  .card-actions{ display:flex; gap:6px; margin-top:auto; flex-wrap:wrap; }

  .empty-state{
    border:1px dashed var(--border); border-radius:var(--radius);
    padding:70px 20px; text-align:center; color:var(--text-dim);
  }
  .empty-state .orb-lg{
    width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
    background: radial-gradient(circle at 32% 28%, #bdf7ee33, var(--accent-glow) 45%, transparent 80%);
    border:1px solid var(--border);
  }
  .empty-state h3{ font-family:var(--font-display); color:var(--text); margin:0 0 6px; font-size:17px; }
  .empty-state p{ margin:0 0 20px; font-size:13.5px; }

  /* ---------- Editor ---------- */
  .editor{ display:grid; grid-template-columns:270px 1fr; height:calc(100vh - 61px); }
  .scene-rail{
    border-right:1px solid var(--border-soft); background:var(--bg-panel);
    display:flex; flex-direction:column; overflow:hidden;
  }
  .rail-head{
    padding:16px 16px 12px; border-bottom:1px solid var(--border-soft);
  }
  .rail-head .proj-name{
    font-family:var(--font-display); font-size:16px; background:transparent; border:none; color:var(--text);
    width:100%; padding:2px 0; border-bottom:1px solid transparent;
  }
  .rail-head .proj-name:focus{ outline:none; border-bottom:1px solid var(--accent); }
  .rail-head .scene-count-label{ font-size:11px; color:var(--text-faint); font-family:var(--font-mono); margin-top:4px; }

  .scene-list{ flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px; }
  .scene-item{
    display:flex; gap:10px; align-items:center; padding:8px; border-radius:8px; cursor:pointer;
    border:1px solid transparent; position:relative;
  }
  .scene-item:hover{ background:var(--bg-panel-2); }
  .scene-item.active{ background:var(--accent-glow); border-color:var(--accent-dim); }
  .scene-thumb{
    width:46px; height:46px; border-radius:6px; overflow:hidden; flex-shrink:0; background:#11151a;
    border:1px solid var(--border-soft);
  }
  .scene-thumb img{ width:100%; height:100%; object-fit:cover; }
  .scene-info{ flex:1; min-width:0; }
  .scene-info .s-name{ font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .scene-info .s-meta{ font-size:10.5px; color:var(--text-faint); font-family:var(--font-mono); margin-top:1px; }
  .start-badge{
    font-size:9px; font-family:var(--font-mono); color:var(--accent); border:1px solid var(--accent-dim);
    padding:1px 5px; border-radius:20px; letter-spacing:0.03em; flex-shrink:0;
  }
  .scene-item-menu{ display:flex; gap:1px; flex-shrink:0; }
  .scene-item-menu .icon-btn{ width:20px; height:20px; }
  .scene-item-menu .icon-btn svg{ width:12px; height:12px; }
  .icon-btn{
    width:24px; height:24px; display:flex; align-items:center; justify-content:center;
    border-radius:5px; border:none; background:transparent; color:var(--text-faint); cursor:pointer;
  }
  .icon-btn:hover{ background:var(--bg-panel-2); color:var(--text); }
  .icon-btn:disabled{ opacity:0.3; cursor:not-allowed; }
  .icon-btn:disabled:hover{ background:transparent; color:var(--text-faint); }
  .icon-btn svg{ width:14px; height:14px; }

  .rail-foot{ padding:12px; border-top:1px solid var(--border-soft); }
  .add-scene-btn{
    width:100%; padding:11px; border-radius:8px; border:1px dashed var(--border);
    background:transparent; color:var(--text-dim); font-size:13px; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  .add-scene-btn:hover{ border-color:var(--accent-dim); color:var(--accent); }

  .stage{ position:relative; overflow:hidden; background:#000; }
  .stage-toolbar{
    position:absolute; top:16px; left:50%; transform:translateX(-50%); z-index:10;
    display:flex; align-items:center; gap:6px;
    background:rgba(18,22,27,0.85); border:1px solid var(--border); border-radius:10px;
    padding:6px; backdrop-filter: blur(8px);
  }
  .stage-toolbar .btn.small.active{ background:var(--accent); color:#062521; border-color:var(--accent); }
  .stage-hint{
    position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:10;
    background:rgba(18,22,27,0.85); border:1px solid var(--border); padding:8px 16px; border-radius:20px;
    font-size:12.5px; color:var(--text-dim); pointer-events:none; opacity:0; transition:opacity .2s ease;
  }
  .stage-hint.show{ opacity:1; }
  #pano{ position:absolute; inset:0; cursor:grab; }
  #pano.crosshair{ cursor:crosshair; }
  #pano:active{ cursor:grabbing; }

  .stage-empty{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column;
    color:var(--text-dim); gap:14px; text-align:center;
  }
  .stage-empty .orb-lg{
    width:70px; height:70px; border-radius:50%;
    background: radial-gradient(circle at 32% 28%, #bdf7ee22, var(--accent-glow) 45%, transparent 80%);
    border:1px solid var(--border);
  }

  /* hotspots — pulsing ring + solid disc badge, Matterport-style */
  .hotspot{
    width:42px; height:42px; position:relative;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .hotspot-ring{
    position:absolute; inset:0; border-radius:50%; pointer-events:none;
    background: radial-gradient(circle, rgba(79,216,196,0.45), rgba(79,216,196,0) 72%);
    animation: hotspot-pulse 2.4s ease-out infinite;
  }
  @keyframes hotspot-pulse{
    0%{ transform:scale(0.55); opacity:0.9; }
    70%{ transform:scale(1.35); opacity:0; }
    100%{ opacity:0; }
  }
  .hotspot-core{
    position:relative; z-index:1; width:32px; height:32px; border-radius:50%;
    background:rgba(12,15,19,0.6); border:2px solid rgba(255,255,255,0.92);
    box-shadow:0 2px 10px rgba(0,0,0,0.35);
    display:flex; align-items:center; justify-content:center;
    backdrop-filter: blur(3px);
    transition: transform .15s ease, background .15s ease, border-color .15s ease;
  }
  .hotspot:hover .hotspot-core{ transform:scale(1.14); background:var(--accent); border-color:#fff; }
  .hotspot:hover .hotspot-core svg path{ stroke:#062521; }
  .hotspot-core svg{ width:16px; height:16px; display:block; }
  .hotspot-core svg path{ stroke:#fff; transition:stroke .15s ease; }
  .hotspot .hotspot-label{
    position:absolute; top:46px; left:50%; transform:translateX(-50%);
    font-size:11px; white-space:nowrap; background:rgba(10,12,14,0.85); padding:3px 8px;
    border-radius:5px; border:1px solid var(--border); pointer-events:none; opacity:0; transition:opacity .12s ease;
  }
  .hotspot:hover .hotspot-label{ opacity:1; }
  .hotspot.edit-mode .hotspot-ring{ background: radial-gradient(circle, rgba(224,149,90,0.45), rgba(224,149,90,0) 72%); }
  .hotspot.edit-mode .hotspot-core{ border-color:var(--warn); }
  .hotspot.edit-mode .hotspot-label{ opacity:1; }

  /* ---------- Modal ---------- */
  .modal-backdrop{
    position:fixed; inset:0; background:rgba(6,8,10,0.6); backdrop-filter: blur(3px);
    display:none; align-items:center; justify-content:center; z-index:100;
  }
  .modal-backdrop.show{ display:flex; }
  .modal{
    width:380px; max-width:calc(100vw - 40px); background:var(--bg-panel);
    border:1px solid var(--border); border-radius:12px; padding:22px;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .modal h3{ margin:0 0 14px; font-family:var(--font-display); font-size:17px; }
  .modal label{ display:block; font-size:12px; color:var(--text-dim); margin-bottom:6px; margin-top:14px; }
  .modal label:first-of-type{ margin-top:0; }
  .modal input[type=text], .modal select{
    width:100%; padding:10px 11px; border-radius:7px; border:1px solid var(--border);
    background:var(--bg-panel-2); color:var(--text); font-size:13.5px;
  }
  .modal input:focus, .modal select:focus{ outline:none; border-color:var(--accent); }
  .modal-actions{ display:flex; justify-content:flex-end; gap:8px; margin-top:22px; }
  .modal-note{ font-size:12px; color:var(--text-faint); line-height:1.5; margin:14px 0 0; }

  .ratio-options{ display:flex; gap:10px; }
  .ratio-option{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:6px;
    padding:14px 10px; border-radius:9px; border:1px solid var(--border);
    background:var(--bg-panel-2); color:var(--text-dim); cursor:pointer;
  }
  .ratio-option:hover{ border-color:#3a4650; }
  .ratio-option.active{ border-color:var(--accent); background:rgba(79,216,196,0.08); color:var(--text); }
  .ratio-option span{ font-size:13px; font-weight:600; }
  .ratio-option small{ font-size:10.5px; color:var(--text-faint); }
  .ratio-swatch{ border:1.5px solid currentColor; border-radius:3px; opacity:0.85; }
  .ratio-option.active .ratio-swatch{ border-color:var(--accent); }
  .swatch-16-9{ width:40px; height:22.5px; }
  .swatch-9-16{ width:22.5px; height:40px; }

  .mini-spinner{
    width:30px; height:30px; border-radius:50%;
    border:3px solid rgba(79,216,196,0.2); border-top-color:var(--accent);
    animation:mini-spin .9s linear infinite;
  }
  @keyframes mini-spin{ to{ transform:rotate(360deg); } }

  .rotation-row{ display:flex; align-items:center; gap:10px; margin-top:4px; }
  .rotation-row input[type=range]{ flex:1; accent-color:var(--accent); }
  .rotation-row input[type=number]{
    width:64px; padding:7px 8px; border-radius:7px; border:1px solid var(--border);
    background:var(--bg-panel-2); color:var(--text); font-size:13px; text-align:center;
  }
  .rotation-row span{ color:var(--text-dim); font-size:13px; }

  .modal.wide{ width:920px; max-width:calc(100vw - 40px); }
  .fp-upload-prompt{
    border:1px dashed var(--border); border-radius:10px; padding:44px 20px;
    text-align:center; color:var(--text-dim);
  }
  .fp-upload-prompt p{ font-size:13.5px; max-width:420px; margin:0 auto 18px; line-height:1.5; }
  .fp-tabs{ display:flex; align-items:center; gap:6px; margin-bottom:10px; }
  .fp-tabs .btn.small.active{ background:var(--accent); color:#062521; border-color:var(--accent); }
  .fp-body{ display:flex; gap:14px; align-items:flex-start; }
  .fp-stage{
    position:relative; flex:1; background:radial-gradient(ellipse at 50% 40%, #161b21 0%, #05070a 75%);
    border-radius:10px; overflow:hidden;
    height:480px; border:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center;
  }
  .fp-stage.placing{ cursor:crosshair; }
  .fp-image-wrap{ position:relative; }
  .fp-image-wrap img{ display:block; width:100%; height:100%; user-select:none; pointer-events:none; -webkit-user-drag:none; }
  .fp-pin{
    position:absolute; width:26px; height:26px; margin-left:-13px; margin-top:-26px;
    cursor:grab; transform-origin:bottom center;
  }
  .fp-pin svg{ width:26px; height:26px; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
  .fp-pin .fp-pin-dot{ fill:var(--accent); stroke:#062521; stroke-width:1.5; }
  .fp-pin .fp-pin-label{
    position:absolute; top:-20px; left:50%; transform:translateX(-50%);
    font-size:10.5px; white-space:nowrap; background:rgba(10,12,14,0.9);
    padding:2px 6px; border-radius:4px; border:1px solid var(--border); pointer-events:none;
  }
  .fp-pin.unplaced{ opacity:0.5; }
  .fp-scene-list{ width:220px; max-height:480px; overflow-y:auto; display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
  .fp-scene-row{
    display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px;
    border:1px solid var(--border-soft); background:var(--bg-panel-2);
  }
  .fp-scene-row img{ width:32px; height:32px; border-radius:5px; object-fit:cover; flex-shrink:0; background:#111; }
  .fp-scene-row .fp-scene-name{ flex:1; font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fp-scene-row.armed{ border-color:var(--accent); background:rgba(79,216,196,0.08); }
  .fp-scene-row.other-floor{ opacity:0.5; }
  .fp-scene-row.other-floor:hover{ opacity:0.8; }
  .fp-scene-row .fp-placed-dot{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex-shrink:0; }
  .fp-scene-row .fp-placed-dot.empty{ background:var(--text-faint); }

  .fp-floor-tabs{
    display:flex; align-items:center; gap:4px; margin-bottom:12px; padding-bottom:10px;
    border-bottom:1px solid var(--border-soft); overflow-x:auto;
  }
  .fp-floor-tab{
    display:inline-flex; align-items:center; gap:6px;
    padding:6px 12px; border-radius:7px; border:1px solid var(--border);
    background:var(--bg-panel-2); color:var(--text-dim); font-size:12.5px; cursor:pointer;
    white-space:nowrap; transition: border-color .15s ease, background .15s ease;
  }
  .fp-floor-tab:hover{ border-color:#3a4650; color:var(--text); }
  .fp-floor-tab.active{ border-color:var(--accent); background:rgba(79,216,196,0.08); color:var(--text); }
  .fp-floor-tab-label{ pointer-events:none; }
  .fp-floor-kebab{
    display:none; align-items:center; justify-content:center;
    width:18px; height:18px; border:none; background:rgba(255,255,255,.06);
    border-radius:4px; color:var(--text-dim); font-size:14px; line-height:1;
    cursor:pointer; padding:0; flex-shrink:0; transition: background .12s ease, color .12s ease;
  }
  .fp-floor-tab:hover .fp-floor-kebab{ display:inline-flex; }
  .fp-floor-kebab:hover{ background:rgba(255,255,255,.12); color:var(--text); }
  .fp-floor-ctx-menu{
    position:fixed; z-index:1000; min-width:120px;
    background:var(--bg-panel); border:1px solid var(--border); border-radius:8px;
    box-shadow:0 8px 24px rgba(0,0,0,.5); padding:4px 0; overflow:hidden;
  }
  .fp-floor-ctx-menu-item{
    display:block; width:100%; padding:7px 14px; border:none; background:none;
    color:var(--text-dim); font-size:12.5px; text-align:left; cursor:pointer;
  }
  .fp-floor-ctx-menu-item:hover{ background:rgba(255,255,255,.06); color:var(--text); }
  .fp-floor-ctx-menu-item.danger{ color:var(--danger); }
  .fp-floor-ctx-menu-item.danger:hover{ background:rgba(245,95,95,.1); }
  .fp-floor-add{
    display:inline-flex; align-items:center; justify-content:center;
    width:28px; height:28px; border-radius:7px; border:1px dashed var(--border);
    background:transparent; color:var(--text-faint); cursor:pointer; font-size:16px; flex-shrink:0;
  }
  .fp-floor-add:hover{ border-color:var(--accent-dim); color:var(--accent); }

  .scene-floor-badge{
    display:inline-block; font-size:9px; font-family:var(--font-mono); color:var(--text-faint);
    padding:1px 5px; border-radius:10px; border:1px solid var(--border-soft);
    letter-spacing:0.03em; flex-shrink:0; cursor:pointer; white-space:nowrap;
    transition: color .15s ease, border-color .15s ease;
  }
  .scene-floor-badge:hover{ color:var(--accent); border-color:var(--accent-dim); }

  .fp-floor-select{
    padding:4px 6px; border-radius:5px; border:1px solid var(--border);
    background:var(--bg-panel-2); color:var(--text-dim); font-size:11px;
    max-width:120px; cursor:pointer;
  }

  ::-webkit-scrollbar{ width:9px; height:9px; }
  ::-webkit-scrollbar-thumb{ background:#2a323b; border-radius:6px; }
  ::-webkit-scrollbar-track{ background:transparent; }

  .toast{
    position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
    background:#1c2229; border:1px solid var(--border); padding:11px 18px; border-radius:9px;
    font-size:13px; opacity:0; transition:all .2s ease; z-index:200; pointer-events:none;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }