/* ════════════════════════════════════════
   OpenQuiz — Layout (App Shell, Topbar, Sidebar, Pages)
   ════════════════════════════════════════ */

#app{display:flex;flex-direction:column;min-height:100vh}

/* ── Topbar ── */
.topbar{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 20px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px)}
.topbar-logo{display:flex;align-items:center;gap:10px}
.topbar-logo svg{width:28px;height:28px}
.logo-text{font-family:var(--font-head);font-size:18px;font-weight:700;background:linear-gradient(135deg,var(--c1),var(--c2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-by{font-size:10px;color:var(--text3);font-weight:500;margin-top:-2px}
.topbar-nav{display:flex;gap:4px}
.nav-btn{padding:6px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text2);background:transparent;transition:all .2s}
.nav-btn:hover{background:var(--bg3);color:var(--text)}
.nav-btn.active{background:var(--c1l);color:var(--c1)}
.topbar-actions{display:flex;align-items:center;gap:8px}

/* ── Hamburger (Mobile) ── */
.hamburger{display:none;width:36px;height:36px;border-radius:8px;background:var(--bg3);color:var(--text2);align-items:center;justify-content:center;font-size:18px;border:1.5px solid var(--border);cursor:pointer}
.hamburger:hover{background:var(--bg4);color:var(--text)}

/* ── Mobile Sidebar Drawer ── */
.sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:200;display:none;backdrop-filter:blur(3px)}
.sidebar-overlay.open{display:block}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:260px;background:var(--bg2);border-right:1px solid var(--border);z-index:300;transform:translateX(-100%);transition:transform .3s ease;display:flex;flex-direction:column;overflow-y:auto}
.sidebar.open{transform:translateX(0)}
.sidebar-header{padding:16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.sidebar-logo{font-family:var(--font-head);font-size:17px;font-weight:700;background:linear-gradient(135deg,var(--c1),var(--c2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.sidebar-close{width:32px;height:32px;border-radius:6px;background:var(--bg3);color:var(--text2);display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;border:none}
.sidebar-close:hover{background:var(--bg4);color:var(--text)}
.sidebar-nav{display:flex;flex-direction:column;padding:8px;gap:2px;flex:1}
.sidebar-nav-btn{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text2);background:transparent;border:none;cursor:pointer;transition:all .18s}
.sidebar-nav-btn:hover{background:var(--bg3);color:var(--text)}
.sidebar-nav-btn.active{background:var(--c1l);color:var(--c1)}
.sidebar-footer{padding:12px 16px;border-top:1px solid var(--border);display:flex;gap:8px;flex-wrap:wrap}
.sidebar-footer .nav-btn{flex:1;text-align:center}

/* ── Pages ── */
.page{flex:1;padding:28px 20px;max-width:900px;margin:0 auto;width:100%}
.page-header{margin-bottom:28px}
.page-header-row{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ── Form Rows ── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.form-row.triple{grid-template-columns:1fr 1fr 1fr}
.form-group{margin-bottom:14px}

/* ── Toggle ── */
.toggle-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.toggle-row:last-child{border-bottom:none}
.toggle{width:40px;height:22px;background:var(--bg4);border-radius:99px;cursor:pointer;position:relative;transition:background .2s;border:none;flex-shrink:0}
.toggle::after{content:'';position:absolute;width:16px;height:16px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .2s}
.toggle.on{background:var(--c1)}
.toggle.on::after{left:21px}