@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
    --accent:#0f766e;
    --accent-dark:#0b5f59;
    --accent-soft:#e8f5f2;
    --bg:#f5f7fb;
    --surface:#ffffff;
    --surface-2:#f9fafb;
    --text:#18212f;
    --muted:#6b7280;
    --border:#e8ecf2;
    --shadow:0 12px 34px rgba(15,23,42,.07);
    --shadow-soft:0 6px 22px rgba(15,23,42,.05);
    --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;font-family:'Manrope',sans-serif;background:var(--bg);color:var(--text);
    -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit}
button,a{ -webkit-tap-highlight-color:transparent}
button{cursor:pointer}
svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-shell{min-height:100vh}
.sidebar{
    position:fixed;inset:0 auto 0 0;width:278px;background:#0f172a;color:#fff;z-index:50;
    padding:24px 18px;display:flex;flex-direction:column;overflow:auto;
}
.brand{display:flex;align-items:center;gap:13px;padding:3px 8px 25px}
.brand-mark{
    width:48px;height:48px;border-radius:15px;background:linear-gradient(145deg,var(--accent),#22c55e);
    position:relative;display:grid;place-items:center;box-shadow:0 12px 25px rgba(15,118,110,.3)
}
.brand-book{width:22px;height:17px;border:2px solid white;border-radius:3px 7px 7px 3px;position:relative}
.brand-book:after{content:"";position:absolute;left:50%;top:-2px;bottom:-2px;border-left:2px solid white}
.brand-star{position:absolute;right:5px;top:2px;font-size:10px;color:#fde68a}
.brand strong{font-size:18px;letter-spacing:-.4px}.brand strong span{color:#6ee7b7}
.brand small{display:block;color:#94a3b8;font-size:10px;margin-top:2px;text-transform:uppercase;letter-spacing:1.1px}
.sidebar-nav{display:flex;flex-direction:column;gap:5px}
.nav-item{
    display:flex;align-items:center;gap:13px;min-height:48px;color:#aeb8c8;text-decoration:none;
    padding:0 14px;border-radius:14px;font-size:13px;font-weight:600;position:relative;transition:.2s
}
.nav-item svg{width:20px}
.nav-item:hover,.nav-item.active{background:rgba(255,255,255,.09);color:#fff}
.nav-item.active:before{content:"";position:absolute;left:-18px;width:4px;height:23px;background:#34d399;border-radius:0 6px 6px 0}
.nav-item em{margin-left:auto;background:#ef4444;color:white;font-style:normal;font-size:10px;border-radius:20px;padding:3px 7px}
.sidebar-card{
    margin-top:auto;background:linear-gradient(145deg,rgba(15,118,110,.28),rgba(16,185,129,.09));
    border:1px solid rgba(255,255,255,.08);padding:18px;border-radius:18px
}
.sidebar-card-icon{width:38px;height:38px;border-radius:12px;background:rgba(52,211,153,.15);color:#6ee7b7;display:grid;place-items:center;margin-bottom:12px}
.sidebar-card strong{font-size:13px}.sidebar-card p{font-size:11px;color:#9da8b9;line-height:1.65;margin:8px 0 14px}
.ghost-btn{width:100%;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;border-radius:11px;padding:9px;font-size:11px}
.sidebar-profile{display:flex;align-items:center;gap:10px;margin-top:18px;padding:14px 7px 2px;border-top:1px solid rgba(255,255,255,.08)}
.avatar{width:40px;height:40px;border-radius:13px;background:linear-gradient(145deg,var(--accent),#14b8a6);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto}
.avatar.small{width:34px;height:34px;border-radius:11px;font-size:10px}
.sidebar-profile div:nth-child(2){min-width:0}.sidebar-profile strong{font-size:11px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-profile small{font-size:9px;color:#94a3b8}
.icon-button{border:0;background:transparent;color:inherit;padding:7px}
.main-content{margin-left:278px;padding:0 30px 40px;max-width:1900px}
.topbar{height:104px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.topbar-left{display:flex;align-items:center;gap:15px}.topbar h1{font-size:22px;margin:2px 0 4px;letter-spacing:-.7px}.eyebrow,.section-kicker{margin:0;color:var(--accent);font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:1px}.welcome-text{font-size:11px;color:var(--muted)}
.menu-toggle{display:none;border:0;background:var(--surface);width:42px;height:42px;border-radius:12px;box-shadow:var(--shadow-soft);color:var(--text)}
.topbar-actions{display:flex;align-items:center;gap:9px}
.search-box{width:310px;height:45px;background:var(--surface);border:1px solid var(--border);border-radius:14px;display:flex;align-items:center;padding:0 13px;gap:9px;box-shadow:var(--shadow-soft)}
.search-box svg{width:18px;color:#94a3b8}.search-box input{border:0;outline:0;min-width:0;flex:1;background:transparent;font-size:11px;color:var(--text)}.search-box kbd{font-size:9px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:3px 6px;color:#64748b}
.round-action{width:44px;height:44px;border:1px solid var(--border);background:var(--surface);border-radius:14px;display:grid;place-items:center;position:relative;color:var(--text);box-shadow:var(--shadow-soft)}
.notification-btn span{position:absolute;right:-2px;top:-3px;background:#ef4444;color:white;border:2px solid var(--bg);width:18px;height:18px;border-radius:50%;font-size:8px;display:grid;place-items:center}
.role-banner{display:none}
.hero-card{
    min-height:265px;border-radius:28px;padding:36px 42px;color:#fff;position:relative;overflow:hidden;
    background:linear-gradient(120deg,var(--accent-dark),var(--accent) 55%,#16a34a);box-shadow:0 22px 50px rgba(15,118,110,.23);
    display:flex;align-items:center;justify-content:space-between
}
.hero-card:before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:21px 21px;mask-image:linear-gradient(90deg,transparent,black)}
.hero-copy{position:relative;z-index:2;max-width:600px}.hero-kicker{display:inline-flex;padding:7px 11px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.18);border-radius:20px;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.hero-copy h2{font-size:34px;line-height:1.2;margin:15px 0 11px;letter-spacing:-1.2px}.hero-copy p{font-size:12px;line-height:1.75;opacity:.84;max-width:520px}.hero-actions{display:flex;gap:10px;margin-top:22px}
.primary-btn,.secondary-btn,.full-width-btn{
    min-height:42px;border-radius:12px;padding:0 16px;border:0;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:800
}
.primary-btn{background:var(--accent);color:#fff;box-shadow:0 10px 20px rgba(15,118,110,.2)}
.hero-card .primary-btn{background:#fff;color:var(--accent);box-shadow:none}.secondary-btn{background:var(--surface);color:var(--text);border:1px solid var(--border)}
.hero-card .secondary-btn{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff}
.hero-actions svg,.primary-btn svg,.secondary-btn svg{width:17px}
.hero-visual{width:330px;height:210px;position:relative;margin-right:10px}
.mosque-base{position:absolute;left:90px;bottom:12px;width:170px;height:88px;border-radius:10px 10px 0 0;background:rgba(255,255,255,.95);display:flex;justify-content:space-evenly;align-items:flex-end;padding-bottom:0}
.mosque-base:before,.mosque-base:after{content:"";position:absolute;width:19px;height:120px;bottom:0;background:rgba(255,255,255,.85);border-radius:20px 20px 0 0}
.mosque-base:before{left:-30px}.mosque-base:after{right:-30px}.mosque-base span{width:28px;height:48px;background:var(--accent);border-radius:18px 18px 0 0}
.mosque-dome{position:absolute;left:125px;bottom:100px;width:100px;height:70px;background:rgba(255,255,255,.95);border-radius:60px 60px 8px 8px}
.mosque-dome:before{content:"";position:absolute;top:-29px;left:47px;width:6px;height:33px;background:white;border-radius:8px}.mosque-dome:after{content:"✦";position:absolute;top:-45px;left:41px;color:#fde68a}
.hero-orbit{position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%}.orbit-one{width:290px;height:190px;left:20px;top:5px;transform:rotate(-12deg)}.orbit-two{width:250px;height:250px;left:45px;top:-20px}
.floating-chip{position:absolute;background:rgba(255,255,255,.96);color:var(--text);padding:8px 11px;border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.13);display:flex;align-items:center;gap:7px;font-size:9px;font-weight:800}.floating-chip svg{width:15px;color:var(--accent)}.chip-a{top:20px;right:1px}.chip-b{bottom:25px;left:10px}.chip-c{bottom:10px;right:-5px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:20px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:19px;padding:18px;display:flex;align-items:center;gap:13px;position:relative;box-shadow:var(--shadow-soft)}
.stat-icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center}.stat-icon svg{width:22px}
.tone-1{background:#e0f2fe;color:#0369a1}.tone-2{background:#ede9fe;color:#7c3aed}.tone-3{background:#fef3c7;color:#b45309}.tone-4{background:#dcfce7;color:#15803d}
.stat-copy span,.stat-copy small{display:block}.stat-copy span{font-size:9px;color:var(--muted);font-weight:700}.stat-copy strong{font-size:20px;display:block;margin:4px 0;letter-spacing:-.5px}.stat-copy small{font-size:8px;color:#10b981;font-weight:700}.more-btn{position:absolute;right:12px;top:12px;border:0;background:transparent;color:#94a3b8;letter-spacing:2px}
.section-block{margin-top:30px}.section-heading,.panel-header{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:15px}.section-heading h3,.panel-header h3{margin:3px 0 0;font-size:17px;letter-spacing:-.4px}.text-button{border:0;background:transparent;color:var(--accent);display:flex;align-items:center;gap:6px;font-size:10px;font-weight:800}.text-button svg{width:15px}
.menu-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}
.menu-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:18px 14px;text-align:left;position:relative;transition:.2s;box-shadow:var(--shadow-soft)}
.menu-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--accent) 25%,var(--border))}
.menu-card strong,.menu-card small{display:block}.menu-card strong{font-size:11px;margin:12px 0 4px}.menu-card small{font-size:8px;color:var(--muted)}.menu-card em{position:absolute;right:10px;top:10px;background:#ef4444;color:#fff;padding:3px 6px;border-radius:20px;font-size:8px;font-style:normal}
.menu-icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center}.menu-icon svg{width:20px}
.menu-tone-1{background:#e0f2fe;color:#0369a1}.menu-tone-2{background:#ede9fe;color:#7c3aed}.menu-tone-3{background:#dcfce7;color:#15803d}.menu-tone-4{background:#fef3c7;color:#b45309}.menu-tone-5{background:#ffe4e6;color:#be123c}.menu-tone-6{background:#ccfbf1;color:#0f766e}.menu-tone-7{background:#e0e7ff;color:#4338ca}.menu-tone-8{background:#f3e8ff;color:#9333ea}
.dashboard-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:17px;margin-top:28px}.lower-grid{grid-template-columns:1fr 1fr;margin-top:17px}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:22px;padding:21px;box-shadow:var(--shadow-soft)}
.panel select{border:1px solid var(--border);background:var(--surface-2);border-radius:10px;padding:8px 11px;font-size:9px;color:var(--text)}
.chart-summary{display:flex;justify-content:space-between;align-items:flex-end}.chart-summary strong{font-size:24px}.chart-summary span{font-size:9px;color:var(--muted);display:block}.chart-legend{display:flex!important;align-items:center;gap:6px}.dot{width:7px;height:7px;border-radius:50%;display:inline-block!important}.dot.primary{background:var(--accent)}.dot.secondary{background:#a78bfa;margin-left:8px}
.line-chart{height:240px;margin-top:8px}.line-chart svg{width:100%;height:210px;overflow:visible}.grid-lines line{stroke:#edf0f4;stroke-width:1}.line{fill:none;stroke-width:3}.primary-line{stroke:var(--accent)}.secondary-line{stroke:#a78bfa;stroke-dasharray:7 6}.area{fill:url(#areaGradient);stroke:none}.points circle{fill:white;stroke:var(--accent);stroke-width:3}.chart-labels{display:flex;justify-content:space-between;padding:0 7px;color:#94a3b8;font-size:8px}
.announcement-list{display:flex;flex-direction:column;gap:4px}.announcement-item{display:flex;align-items:center;gap:11px;padding:12px 0;border-bottom:1px solid var(--border)}.announcement-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}.announcement-icon svg{width:18px}.announcement-icon.meeting{background:#e0f2fe;color:#0369a1}.announcement-icon.finance{background:#fef3c7;color:#b45309}.announcement-icon.tahfidz{background:#dcfce7;color:#15803d}.announcement-item div:nth-child(2){flex:1}.announcement-item strong,.announcement-item span{display:block}.announcement-item strong{font-size:10px}.announcement-item span{font-size:8px;color:var(--muted);margin-top:4px}.announcement-item button{border:0;background:transparent;color:#94a3b8;font-size:18px}.full-width-btn{width:100%;margin-top:14px;background:var(--accent-soft);color:var(--accent)}
.schedule-list{display:flex;flex-direction:column}.schedule-item{display:grid;grid-template-columns:42px 14px 1fr auto;align-items:center;gap:7px;min-height:62px}.schedule-item time{font-size:10px;font-weight:800}.schedule-line{width:9px;height:9px;border:2px solid #cbd5e1;border-radius:50%;position:relative}.schedule-line:after{content:"";position:absolute;top:9px;left:2px;height:52px;border-left:1px dashed #d8dee7}.schedule-item:last-child .schedule-line:after{display:none}.schedule-item strong,.schedule-item div span{display:block}.schedule-item strong{font-size:10px}.schedule-item div span{font-size:8px;color:var(--muted);margin-top:4px}.schedule-item em{font-size:7px;font-style:normal;padding:4px 7px;border-radius:10px;background:#dcfce7;color:#15803d}.schedule-item.active .schedule-line{border-color:var(--accent);background:var(--accent)}
.activity-list{display:flex;flex-direction:column;gap:16px}.activity-item{display:flex;gap:10px;align-items:flex-start}.activity-avatar{width:36px;height:36px;border-radius:12px;font-size:9px}.activity-item p{font-size:9px;line-height:1.55;margin:0}.activity-item span{font-size:8px;color:#94a3b8}.activity-item strong{font-weight:800}
.data-panel{margin-top:17px}.table-actions{display:flex;gap:8px}.mini-search{height:42px;display:flex;align-items:center;border:1px solid var(--border);border-radius:12px;padding:0 10px;gap:7px}.mini-search svg{width:16px;color:#94a3b8}.mini-search input{border:0;outline:0;background:transparent;font-size:9px;width:140px}
.responsive-table{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:720px}th{text-align:left;font-size:8px;color:#94a3b8;text-transform:uppercase;letter-spacing:.7px;padding:12px;border-bottom:1px solid var(--border)}td{padding:13px 12px;border-bottom:1px solid var(--border);font-size:9px;color:#475569}.table-user{display:flex;align-items:center;gap:9px}.table-user strong{font-size:9px;color:var(--text)}.status{padding:5px 8px;border-radius:10px;font-size:7px;font-weight:800}.status.aktif{background:#dcfce7;color:#15803d}.status.izin{background:#fef3c7;color:#b45309}
.footer{display:flex;justify-content:space-between;color:#94a3b8;font-size:8px;padding:24px 4px 0}
.bottom-nav{display:none}
.role-menu{
    position:fixed;right:30px;top:85px;width:365px;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:16px;z-index:101;
    box-shadow:0 30px 80px rgba(15,23,42,.18);opacity:0;visibility:hidden;transform:translateY(-10px);transition:.2s
}
.role-menu.show{opacity:1;visibility:visible;transform:none}.role-menu-header{display:flex;justify-content:space-between;padding:5px 5px 12px}.role-menu-header span,.role-menu-header strong{display:block}.role-menu-header span{font-size:9px;color:var(--muted)}.role-menu-header strong{font-size:11px;margin-top:3px}.role-menu-header button{border:0;background:transparent;font-size:20px;color:#94a3b8}
.role-options{display:grid;grid-template-columns:1fr 1fr;gap:7px}.role-options a{display:flex;align-items:center;gap:9px;padding:10px;border-radius:13px;text-decoration:none;color:var(--text);border:1px solid transparent}.role-options a:hover,.role-options a.selected{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 15%,transparent)}.role-options strong,.role-options small{display:block}.role-options strong{font-size:9px}.role-options small{font-size:7px;color:var(--muted);margin-top:2px}.checkmark{margin-left:auto;color:var(--accent);font-size:11px}
.modal-backdrop,.sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.46);backdrop-filter:blur(3px);z-index:90;opacity:0;visibility:hidden;transition:.2s}.modal-backdrop.show,.sidebar-backdrop.show{opacity:1;visibility:visible}
.modal{position:fixed;left:50%;top:50%;transform:translate(-50%,-47%) scale(.97);width:min(560px,calc(100% - 30px));background:var(--surface);border-radius:24px;padding:22px;z-index:100;box-shadow:0 35px 90px rgba(15,23,42,.25);opacity:0;visibility:hidden;transition:.2s;max-height:88vh;overflow:auto}
.modal.show{opacity:1;visibility:visible;transform:translate(-50%,-50%) scale(1)}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:18px}.modal-header h3{margin:4px 0;font-size:18px}.modal-close{border:0;background:#f1f5f9;color:#64748b;width:34px;height:34px;border-radius:10px;font-size:18px}
.quick-action-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-action-grid button{background:var(--surface-2);border:1px solid var(--border);border-radius:16px;padding:16px;text-align:left}.quick-action-grid svg{color:var(--accent)}.quick-action-grid strong,.quick-action-grid span{display:block}.quick-action-grid strong{font-size:10px;margin:10px 0 4px}.quick-action-grid span{font-size:8px;color:var(--muted)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-grid label,.full-field{display:flex;flex-direction:column;gap:6px}.form-grid label span,.full-field span{font-size:9px;font-weight:800}.form-grid input,.form-grid select,.full-field input,.full-field textarea{border:1px solid var(--border);background:var(--surface-2);border-radius:12px;padding:11px 12px;outline:0;color:var(--text);font-size:10px}.full-field{margin-top:12px}.full-field textarea{min-height:90px;resize:vertical}.form-footer{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
.toast-container{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;flex-direction:column;gap:8px}.toast{background:#0f172a;color:#fff;border-radius:14px;padding:13px 16px;box-shadow:0 15px 40px rgba(15,23,42,.24);display:flex;align-items:center;gap:10px;font-size:9px;animation:toastIn .25s ease}.toast:before{content:"✓";width:22px;height:22px;border-radius:50%;background:#10b981;display:grid;place-items:center;font-weight:800}@keyframes toastIn{from{opacity:0;transform:translateY(8px)}}
body.dark{--bg:#0b1120;--surface:#111827;--surface-2:#162031;--text:#e5e7eb;--muted:#94a3b8;--border:#263244;--shadow-soft:0 6px 22px rgba(0,0,0,.18);--accent-soft:rgba(15,118,110,.18)}body.dark .search-box kbd{background:#1e293b;border-color:#334155;color:#94a3b8}

@media(max-width:1180px){
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .menu-grid{grid-template-columns:repeat(4,1fr)}
    .hero-visual{transform:scale(.84);transform-origin:right center;margin-right:-20px}
}
@media(max-width:900px){
    body{padding-bottom:78px}
    .sidebar{transform:translateX(-100%);transition:.25s}.sidebar.open{transform:none}
    .main-content{margin-left:0;padding:0 18px 30px}
    .menu-toggle{display:grid;place-items:center}
    .topbar{height:88px}.topbar-actions .search-box{display:none}.welcome-text{display:none}.topbar h1{font-size:17px}
    .role-banner{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:16px;margin-bottom:14px;padding:12px 14px;align-items:center;justify-content:space-between;box-shadow:var(--shadow-soft)}
    .role-banner div span,.role-banner div strong,.role-banner div small{display:block}.role-label{font-size:7px;color:var(--muted);text-transform:uppercase;letter-spacing:.8px}.role-banner strong{font-size:11px;margin:3px 0}.role-banner small{font-size:8px;color:var(--muted)}
    .role-switch{border:0;background:var(--accent-soft);color:var(--accent);border-radius:12px;display:flex;align-items:center;gap:7px;padding:6px 8px;font-size:8px;font-weight:800}
    .hero-card{min-height:220px;padding:28px}.hero-visual{display:none}.hero-copy h2{font-size:28px}
    .menu-grid{grid-template-columns:repeat(4,1fr)}
    .dashboard-grid,.lower-grid{grid-template-columns:1fr}
    .bottom-nav{position:fixed;left:0;right:0;bottom:0;height:72px;background:var(--surface);border-top:1px solid var(--border);z-index:60;display:grid;grid-template-columns:repeat(5,1fr);padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -10px 30px rgba(15,23,42,.08)}
    .bottom-nav a,.bottom-nav>button:not(.bottom-main-action){border:0;background:transparent;text-decoration:none;color:#94a3b8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:8px;position:relative}.bottom-nav svg{width:20px}.bottom-nav .active{color:var(--accent)}.bottom-nav em{position:absolute;top:7px;right:22%;background:#ef4444;color:#fff;font-size:7px;font-style:normal;width:15px;height:15px;border-radius:50%;display:grid;place-items:center}
    .bottom-main-action{width:54px;height:54px;border-radius:18px;border:5px solid var(--bg);background:var(--accent);color:#fff;display:grid;place-items:center;margin:-18px auto 0;box-shadow:0 12px 25px rgba(15,118,110,.28)}.bottom-main-action svg{width:22px}
    .role-menu{left:15px;right:15px;top:auto;bottom:82px;width:auto}.role-options{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
    .main-content{padding:0 13px 24px}
    .topbar{height:78px}.topbar h1{font-size:15px}.eyebrow{font-size:8px}.round-action{width:39px;height:39px}.topbar-actions{gap:6px}
    .hero-card{padding:23px;border-radius:22px;min-height:235px}.hero-copy h2{font-size:25px}.hero-copy p{font-size:10px}.hero-actions{flex-direction:column;align-items:stretch}.hero-actions button{width:100%}
    .stats-grid{grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.stat-card{padding:13px;gap:9px;border-radius:16px}.stat-icon{width:38px;height:38px;border-radius:12px}.stat-copy span{font-size:7px}.stat-copy strong{font-size:15px}.stat-copy small{font-size:6.5px}.more-btn{display:none}
    .section-block{margin-top:24px}.section-heading h3,.panel-header h3{font-size:15px}
    .menu-grid{grid-template-columns:repeat(4,1fr);gap:8px}.menu-card{padding:11px 7px;text-align:center;border-radius:15px;min-height:104px}.menu-icon{margin:auto;width:38px;height:38px}.menu-card strong{font-size:8px;line-height:1.25;margin-top:9px}.menu-card small{display:none}.menu-card em{right:4px;top:4px;font-size:6px}
    .panel{padding:16px;border-radius:18px}.dashboard-grid{margin-top:20px;gap:12px}.line-chart{height:210px}.line-chart svg{height:180px}
    .chart-summary strong{font-size:20px}.chart-legend{font-size:7px}
    .table-header{align-items:flex-start;flex-direction:column}.table-actions{width:100%;flex-wrap:wrap}.mini-search{flex:1}.mini-search input{width:100%}.table-actions .primary-btn,.table-actions .secondary-btn{padding:0 10px}
    .form-grid{grid-template-columns:1fr}.quick-action-grid{grid-template-columns:1fr 1fr}
    .footer{display:none}.toast-container{left:13px;right:13px;bottom:84px}.toast{width:100%}
}
@media(max-width:390px){
    .menu-grid{grid-template-columns:repeat(3,1fr)}
    .stats-grid{grid-template-columns:1fr 1fr}.stat-icon{display:none}
    .role-options{grid-template-columns:1fr}
}