:root{
--bg:#0a0f1a; /* deep navy */
--panel:#0f1724; /* panel */
--card:#131d2e; /* card */
--muted:#9fb0c7; /* muted text */
--text:#e8eef6; /* main text */
--accent:#00c4a2; /* Progress360 accent */
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,#08101c, #0a1f3d);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}


.site-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(10,15,26,.6);backdrop-filter:blur(8px);position:sticky;top:0;z-index:50}
.brand{display:flex;align-items:center;gap:12px}
.brand h1{margin:0;font-weight:800;letter-spacing:.2px}
.brand .accent{color:var(--accent)}
.logo-ring{width:28px;height:28px;border-radius:999px;border:2px solid var(--accent);box-shadow:0 0 12px rgba(0,196,162,.4) inset}
.tagline{color:var(--muted);font-size:.95rem}


main{max-width:1100px;margin:0 auto;padding:24px}
.intro{padding:16px 0;color:var(--muted)}


.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;overflow:hidden;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.card button{all:unset;display:block;cursor:pointer}
.card .thumb{aspect-ratio:16/9;background:#000;display:block;width:100%;object-fit:cover}
.card .body{padding:12px 14px}
.card .title{font-weight:700}
.card .meta{color:var(--muted);font-size:.9rem;margin-top:4px}
.card .meta span{opacity:.9}


.modal{position:fixed;inset:0;display:none;z-index:1000}
.modal[aria-hidden="false"]{display:block}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(1px)}
.modal-inner{position:relative;z-index:2;width:100vw;height:100dvh;margin:0;background:var(--panel);border:none;border-radius:0;box-shadow:none;display:flex;flex-direction:column}
.viewer-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.08);gap:10px}
.viewer-header .viewer-title{grid-column:1}
.viewer-header .viewer-tip{grid-column:2;color:var(--muted);font-size:.9rem;text-align:center}
.viewer-header #closeViewer{grid-column:3;justify-self:end}
.viewer-title{display:flex;align-items:baseline;gap:10px}
.viewer-title #viewerProjectTitle{font-weight:800}
.status{color:var(--muted);font-size:.9rem}
.viewer-grid{display:grid;grid-template-columns:minmax(260px,360px) minmax(600px,1fr) minmax(260px,420px);grid-template-rows:1fr auto;gap:16px;padding:16px;flex:1;min-height:0}
.card-panel{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.25);overflow:hidden;display:flex;flex-direction:column}
.panel-title{margin:0;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.08);font-weight:700}
.left-panel{grid-column:1;grid-row:1 / span 2}
.center-panel{grid-column:2;grid-row:1;position:relative;display:flex;flex-direction:column}
.right-rail{grid-column:3;grid-row:1 / span 2;display:flex;flex-direction:column;gap:16px;min-height:0}
.right-rail .card-panel{flex:0 0 auto}
.nav-panel{grid-column:2;grid-row:2; padding:12px; overflow:visible; display:flex; flex-direction:column; align-items:center}
.nav-section{display:grid;gap:8px; width:100%; max-width:900px; justify-items:stretch}
.nav-section label{text-align:center}
.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center; justify-content:center}
#timelineLegend{display:flex;flex-wrap:nowrap;gap:12px;justify-content:space-between;align-items:flex-start;width:100%;padding:0 12px;text-align:center}
#timelineLegend span{flex:0 0 auto;white-space:nowrap;opacity:.9}
.ticks{width:100%; margin:0; padding:0 12px;}
.hint{text-align:center;margin-bottom:8px;opacity:.8}

@media (max-width:720px){
  .viewer-header{grid-template-columns:1fr auto;grid-auto-rows:auto auto}
  .viewer-header .viewer-tip{grid-column:1 / -1; order:2; font-size:.85rem}
}
/* Timeline ticks */
.ticks{position:relative;height:12px;display:flex;justify-content:space-between;align-items:flex-end;padding:0 2px}
.ticks .tick{width:2px;height:8px;background:rgba(255,255,255,.25);border-radius:2px}
.ticks .tick.active{background:var(--accent);height:12px}
.viewer-canvas-wrap{position:relative;flex:1;min-height:65dvh;background:#000;border-radius:12px;overflow:hidden;margin:8px}
.controls{display:grid;gap:10px;padding:10px 14px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));overflow:auto}
.control-group{display:grid;gap:6px}
.control-group.row{grid-auto-flow:column;justify-content:start;align-items:center;gap:10px}
.legend{display:flex;justify-content:space-between;color:var(--muted);font-size:.85rem}
.btn{padding:8px 12px;background:var(--accent);border-radius:10px;color:#05231d;border:1px solid rgba(0,0,0,.12);font-weight:700;cursor:pointer}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.14)}
#mixRange{width:100%}
input[type="range"]{width:100%}


/* VR button alignment tweak */
#viewerCanvasWrap .vr-button-host{position:absolute;right:12px;bottom:12px;z-index:6}

/* Overlay controls for fullscreen/VR */
#viewerCanvasWrap .fs-overlay{position:absolute;inset:0;display:none;z-index:5;pointer-events:auto}
#viewerCanvasWrap .fs-overlay .fs-exit{position:absolute;top:12px;right:12px}
#viewerCanvasWrap .fs-overlay .fs-nav{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;display:flex;align-items:center;gap:24px}
#viewerCanvasWrap .fs-overlay .fs-indicator{padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);color:#fff;font-weight:700;min-width:220px;text-align:center}
#viewerCanvasWrap .fs-overlay .btn{backdrop-filter:blur(4px)}
#viewerCanvasWrap .fs-overlay .btn.big{padding:14px 22px;font-size:1.05rem}

.side-gallery{display:grid;grid-template-columns:1fr;gap:8px;padding:10px;overflow:auto}
.side-gallery .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;border:1px solid rgba(255,255,255,.08);opacity:.85;cursor:pointer}
.side-gallery .thumb.active{outline:2px solid var(--accent);opacity:1}


@media (max-width:1200px){
  .viewer-grid{grid-template-columns:1fr;grid-template-rows:auto minmax(55dvh,1fr) auto auto;}
  .left-panel{grid-column:1;grid-row:3}
  .center-panel{grid-column:1;grid-row:2;min-height:48vh}
  .right-rail{grid-column:1;grid-row:4}
  .nav-panel{grid-column:1;grid-row:1}
}

/* Info panel styling */
.info-panel{padding:10px 12px;display:grid;gap:6px}
.info-row{display:flex;justify-content:space-between;gap:12px}
.info-row .k{color:var(--muted)}
.info-row .v{font-weight:600}
.info-panel a{color:var(--accent);text-decoration:none}
.info-panel a:hover{text-decoration:underline}

/* Hide site header and disable background scroll while viewer is open */
body.viewer-open{overflow:hidden}
body.viewer-open .site-header{display:none}

/* Ensure canvas fits container; renderer resizes it as well */
#viewerCanvasWrap canvas{display:block;width:100%;height:100%;}
#viewerCanvasWrap:fullscreen{margin:0;border-radius:0}

/* Toasts */
.toast-host{position:fixed;top:12px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:2000;pointer-events:none}
.toast{pointer-events:auto;min-width:220px;max-width:420px;margin:0 auto;padding:10px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(15,23,36,.9);box-shadow:0 10px 30px rgba(0,0,0,.35);font-weight:600}
.toast.info{border-color:rgba(255,255,255,.18)}
.toast.success{border-color:rgba(0,196,162,.5)}
.toast.error{border-color:#ff6b6b}
.toast-enter{animation:toastIn .18s ease-out both}
.toast-exit{animation:toastOut .2s ease-in both}
@keyframes toastIn{from{opacity:0;transform:translate(-50%, -8px)}to{opacity:1;transform:translate(-50%, 0)}}
@keyframes toastOut{from{opacity:1;transform:translate(-50%, 0)}to{opacity:0;transform:translate(-50%, -8px)}}