:root{--bg:#0a0a12;--panel:#0e0e1a;--border:#1f1f33;--text:#e8e8f0;--dim:#8a8aa0;--accent:#00f0ff;--accent2:#ff2aa7}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;background:var(--bg);color:var(--text);font-family:'Segoe UI',system-ui,sans-serif}

.app{display:grid;grid-template-columns:240px 1fr;height:100vh}
.sidebar{background:linear-gradient(180deg,#0c0b18,#090816);border-right:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;overflow:hidden}
.sidebar-brand{padding:18px 16px;font-weight:800;font-size:14px;letter-spacing:.1em;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.nav{flex:1;overflow-y:auto;padding:6px 8px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;border-radius:10px;background:transparent;color:var(--dim);text-align:left;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.2s ease;border:1px solid transparent}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text);border-color:#1f1f33}
.nav-item.active{background:linear-gradient(90deg,rgba(0,240,255,.12),rgba(255,42,167,.12));color:#fff;border-color:rgba(255,42,167,.45);box-shadow:0 0 18px rgba(255,42,167,.14)}
.nav-item i{width:18px;text-align:center}

.main{display:flex;flex-direction:column;min-width:0;height:100vh;overflow:hidden}
.topbar{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid rgba(255,255,255,.06);background:rgba(10,10,18,.6);backdrop-filter:blur(10px)}
.menu-btn{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.topbar-title{font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}

.stage{flex:1;position:relative;overflow:hidden}
.view{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .2s ease}
.view.active{opacity:1;pointer-events:auto}

.gallery{display:block;width:100%;height:100%}
.hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--dim);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.7;pointer-events:none;text-align:center;background:rgba(0,0,0,.35);padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08)}

.app-iframe{width:100%;height:100%;border:0;background:#07060c}

.menu-btn{display:none}
@media (max-width: 760px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .sidebar.open{display:flex;position:absolute;z-index:50;width:240px;height:100vh;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .menu-btn{display:inline-flex}
}