/* Core layout */
:root {
  --bg: #0f1115;
  --bg-alt: #161a20;
  --panel: #1f252d;
  --panel-border: #2c343f;
  --accent: #4f9cff;
  --accent-hover: #77b7ff;
  --text: #f5f7fa;
  --text-dim: #b2bdcc;
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --shadow-elev: 0 4px 18px -4px rgba(0,0,0,.4);
  --transition: 150ms cubic-bezier(.4,.2,.2,1);
}

html, body { height:100%; }
body { background: var(--bg); color: var(--text); display:flex; flex-direction:column; }

.site-header { padding: .75rem 1.25rem; background: var(--bg-alt); border-bottom:1px solid var(--panel-border); display:flex; align-items:center; }
.logo-wrap { display:flex; gap:.75rem; align-items:center; }
.logo-wrap img { height:40px; width:auto; object-fit:contain; }
.logo-wrap h1 { font-size:1.1rem; font-weight:600; letter-spacing:.5px; margin:0; }

.layout { flex:1; display:flex; min-height:0; }
.sidebar { width:240px; background: var(--panel); border-right:1px solid var(--panel-border); padding:.6rem; box-sizing:border-box; display:flex; flex-direction:column; gap:.6rem; overflow-y:auto; }
.sidebar ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.5rem; }
.sidebar li { margin:0; }
.sidebar button { width:100%; text-align:left; background: var(--bg-alt); border:1px solid var(--panel-border); color:var(--text); padding:.65rem .8rem; font:inherit; border-radius: var(--radius-m); cursor:pointer; display:flex; flex-direction:column; gap:.25rem; position:relative; transition: var(--transition); }
.sidebar button:hover, .sidebar button:focus { outline:none; border-color: var(--accent); box-shadow:0 0 0 1px var(--accent); }
.sidebar button.active { background: linear-gradient(135deg, var(--accent) 0%, #2460ff 100%); border-color: var(--accent); color:#fff; box-shadow: var(--shadow-elev); }
.sidebar button small { color: var(--text-dim); font-size:.65rem; letter-spacing:1px; text-transform:uppercase; }
.sidebar button.active small { color: rgba(255,255,255,.9); }

.content { flex:1; position:relative; display:flex; flex-direction:column; min-width:0; }
.iframe-container { flex:1; position:relative; width:100%; height:100%; display:flex; align-items:stretch; justify-content:center; background:#0c0f13; }
.iframe-container iframe { border:0; flex:1; width:100%; height:100%; background:#fff; }
.iframe-container iframe { opacity:0; transition:opacity .4s ease; }
.iframe-container iframe.is-visible { opacity:1; }
.iframe-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,17,21,.68); backdrop-filter:blur(3px); font-size:.75rem; letter-spacing:.5px; color:#b2bdcc; opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:10; }
.frame-loading .iframe-overlay { opacity:1; pointer-events:auto; }
.placeholder { margin:auto; text-align:center; color:var(--text-dim); font-size:1rem; letter-spacing:.5px; }
.loading-state, .error-state { margin:auto; text-align:center; max-width:600px; padding:1.25rem 1.5rem; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-l); box-shadow:var(--shadow-elev); }
.loading-state .loading-text { margin-top:.75rem; font-size:.8rem; letter-spacing:.5px; color:var(--text-dim); }
.spinner { width:40px; height:40px; border:4px solid #2c3642; border-top-color: var(--accent); border-radius:50%; animation: spin 1s linear infinite; margin:0 auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Intro state */
.intro-state { margin:auto; text-align:center; max-width:640px; padding:1.75rem 2rem; background:var(--panel); border:1px solid var(--panel-border); border-radius:var(--radius-l); box-shadow:var(--shadow-elev); animation: fadeIn .35s ease; }
.intro-state h2 { margin:0 0 .75rem; font-size:1.35rem; letter-spacing:.5px; }
.intro-desc { margin:.25rem 0 1rem; font-size:.85rem; line-height:1.4; color: var(--text-dim); }
.intro-hint { margin:.25rem 0 1rem; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; color:#ffa14f; }
.intro-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem; }
.intro-actions .start-btn { background: var(--accent); color:#fff; padding:.7rem 1.1rem; border:0; border-radius: var(--radius-m); font-size:.8rem; cursor:pointer; letter-spacing:.5px; font-weight:600; box-shadow:0 4px 12px -2px rgba(0,0,0,.4); transition: var(--transition); }
.intro-actions .start-btn:hover { background: var(--accent-hover); }
.intro-actions .open-link { background:#39424f; color:#fff; padding:.7rem 1.1rem; border-radius: var(--radius-m); font-size:.75rem; letter-spacing:.5px; text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
.intro-actions .open-link:hover { background:#45505d; }

@keyframes fadeIn { from { opacity:0; transform:translateY(6px);} to { opacity:1; transform:translateY(0);} }

.site-footer { padding:.75rem 1rem; font-size:.7rem; text-transform:uppercase; color: var(--text-dim); letter-spacing:1px; border-top:1px solid var(--panel-border); background: var(--bg-alt); }

/* Scrollbars (WebKit) */
.sidebar::-webkit-scrollbar { width:10px; }
.sidebar::-webkit-scrollbar-track { background: var(--bg-alt); }
.sidebar::-webkit-scrollbar-thumb { background: #2b3642; border-radius: var(--radius-m); border:2px solid var(--bg-alt); }
.sidebar::-webkit-scrollbar-thumb:hover { background:#364553; }

/* Responsive */
@media (max-width: 900px) {
  .sidebar { width:200px; }
}
@media (max-width: 700px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; flex-direction:row; overflow-x:auto; overflow-y:hidden; }
  .sidebar ul { flex-direction:row; }
  .sidebar button { min-width:220px; }
}