/* ── Area Selection Page ── */
.areas-page { min-height:100vh; background:var(--bg-deepest); display:flex; flex-direction:column; }
.areas-topbar { display:flex; align-items:center; justify-content:space-between; padding:16px 24px; background:rgba(14,14,26,.95); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); }
.areas-user-info { display:flex; align-items:center; gap:12px; font-size:14px; }
.areas-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 24px; }
.areas-welcome { text-align:center; margin-bottom:40px; animation:fadeInUp .5s ease-out; }
.areas-welcome h1 { font-size:2rem; font-weight:800; margin-bottom:8px; background:linear-gradient(135deg,var(--text-primary),var(--primary-light)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.areas-welcome p { color:var(--text-muted); font-size:15px; }
.areas-grid-select { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:20px; width:100%; max-width:1200px; }
.area-select-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:24px; cursor:pointer; transition:all .3s cubic-bezier(.4,0,.2,1); position:relative; overflow:hidden; animation:fadeInUp .6s ease-out both; }
.area-select-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--accent,var(--primary)),transparent); opacity:.5; transition:opacity .2s; }
.area-select-card:hover { transform:translateY(-6px); box-shadow:0 16px 48px rgba(0,0,0,.4),0 0 30px color-mix(in srgb, var(--accent) 15%, transparent); border-color:var(--accent); }
.area-select-card:hover::before { opacity:1; }
.asc-top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px; }
.asc-icon { width:52px; height:52px; border-radius:var(--radius-md); display:flex; align-items:center; justify-content:center; font-size:24px; }
.asc-name { font-size:1.1rem; font-weight:700; margin-bottom:4px; }
.asc-desc { font-size:13px; color:var(--text-muted); line-height:1.5; margin-bottom:16px; min-height:40px; }
.asc-footer { display:flex; align-items:center; justify-content:space-between; padding-top:12px; border-top:1px solid var(--border); font-size:12px; color:var(--text-muted); }
.asc-chief { display:flex; align-items:center; gap:4px; }
.asc-stats { display:flex; gap:12px; font-weight:600; }
.areas-admin-bar { margin-top:32px; animation:fadeInUp .8s ease-out both; }

/* ── Area Page Layout ── */
.area-page { min-height:100vh; background:var(--bg-deepest); display:flex; flex-direction:column; }
.area-topbar { display:flex; align-items:center; justify-content:space-between; padding:12px 20px; background:rgba(14,14,26,.95); backdrop-filter:blur(20px); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:200; }
.area-body { flex:1; display:flex; }
.area-sidebar { width:260px; background:var(--bg-dark); border-right:1px solid var(--border); flex-shrink:0; display:flex; flex-direction:column; height:calc(100vh - 53px); position:sticky; top:53px; overflow-y:auto; }
.area-content { flex:1; padding:24px; overflow-y:auto; min-height:calc(100vh - 53px); }

/* Staff Panel Overlay */
.staff-panel-overlay { position:fixed; inset:0; background:rgba(6,6,11,.85); backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; z-index:500; padding:20px; }
.staff-panel { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-xl); width:100%; max-width:600px; max-height:85vh; box-shadow:var(--shadow-xl); animation:fadeInScale .3s ease-out; }

@media(max-width:900px) {
    .area-sidebar { display:none; }
    .areas-grid-select { grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); }
    .areas-welcome h1 { font-size:1.5rem; }
}
@media(max-width:600px) {
    .areas-grid-select { grid-template-columns:1fr; }
    .areas-topbar { flex-direction:column; gap:12px; }
}