:root{
    --navy:#172338;
    --navy-2:#22324f;
    --navy-3:#2d4163;
    --ink:#111827;
    --text:#1f2937;
    --muted:#687386;
    --soft-muted:#94a3b8;
    --bg:#eef2f6;
    --bg-2:#f7f9fc;
    --card:#ffffff;
    --surface:#f9fbfd;
    --line:#d7e0ea;
    --line-2:#e8eef5;
    --cream:#f7f2e8;
    --accent:#b88a3d;
    --accent-2:#d6b36c;
    --success:#167a55;
    --danger:#b42331;
    --warning:#a16207;
    --info:#2563a8;
    --shadow:0 20px 48px rgba(23,35,56,.10);
    --shadow-soft:0 10px 28px rgba(23,35,56,.07);
    --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;background:linear-gradient(135deg,#eef2f6 0%,#f8fafc 44%,#edf2f8 100%);color:var(--text);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.app-shell{display:flex;min-height:100vh;overflow:hidden;position:relative}.app-shell:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 96% 4%,rgba(184,138,61,.10),transparent 28%),radial-gradient(circle at 32% 0%,rgba(45,65,99,.08),transparent 32%);pointer-events:none;z-index:-1}
.sidebar{width:274px;background:linear-gradient(180deg,#18243a 0%,#111b2d 100%);border-right:1px solid rgba(255,255,255,.08);padding:16px 12px;display:flex;flex-direction:column;gap:14px;position:fixed;left:0;top:0;bottom:0;z-index:30;transition:transform .25s ease,width .25s ease;box-shadow:18px 0 42px rgba(17,27,45,.18);overflow:hidden}
.sidebar:before{content:"";position:absolute;left:-90px;top:-70px;width:210px;height:210px;background:radial-gradient(circle,rgba(214,179,108,.18),transparent 62%);pointer-events:none}.sidebar:after{content:"";position:absolute;right:-90px;bottom:-80px;width:220px;height:220px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 62%);pointer-events:none}body.sidebar-collapsed .sidebar{width:86px}.brand-box{display:flex;align-items:center;gap:12px;padding:10px 10px 16px;border-bottom:1px solid rgba(255,255,255,.10);position:relative;z-index:1}.brand-mark{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#f4dfad,#b88a3d);color:#172338;display:grid;place-items:center;font-weight:900;letter-spacing:.4px;flex:none;box-shadow:0 14px 28px rgba(0,0,0,.16)}.brand-text{display:flex;flex-direction:column;min-width:0}.brand-text strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;letter-spacing:-.01em}.brand-text span{font-size:11px;color:#cbd5e1;margin-top:2px}body.sidebar-collapsed .brand-text,body.sidebar-collapsed .nav-link span,body.sidebar-collapsed .side-footer{display:none}.sidebar-x{display:none;position:absolute;right:4px;top:8px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.10);border-radius:11px;width:34px;height:34px;font-size:22px;color:#fff}.nav-menu{display:flex;flex-direction:column;gap:6px;overflow:auto;padding:2px 4px 8px;position:relative;z-index:1}.nav-menu::-webkit-scrollbar{width:5px}.nav-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:999px}.nav-link{display:flex;align-items:center;gap:11px;padding:10.5px 11px;border-radius:14px;color:#c6d2e1;font-weight:700;font-size:13px;transition:.18s ease;border:1px solid transparent}.nav-link svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}.nav-link:hover{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.07)}.nav-link.active{background:linear-gradient(135deg,#ffffff,#eef3f9);color:#172338;box-shadow:0 14px 26px rgba(0,0,0,.15);border-color:rgba(255,255,255,.25)}.side-footer{margin-top:auto;padding:13px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.08);border-radius:17px;position:relative;z-index:1}.mini-user strong{display:block;font-size:13px;color:#fff}.mini-user span{font-size:12px;color:#cbd5e1}.main-area{margin-left:274px;width:calc(100% - 274px);min-height:100vh;transition:.25s ease;padding:18px 20px 26px;overflow-x:hidden}body.sidebar-collapsed .main-area{margin-left:86px;width:calc(100% - 86px)}.topbar{display:flex;align-items:center;gap:14px;justify-content:space-between;background:rgba(255,255,255,.92);border:1px solid rgba(215,224,234,.95);border-radius:22px;padding:13px 16px;box-shadow:var(--shadow-soft);position:sticky;top:14px;z-index:20;backdrop-filter:blur(12px)}.topbar:after{content:"";position:absolute;left:16px;right:16px;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,#d6b36c,transparent);opacity:.55}.topbar h1{margin:0;font-size:20px;font-weight:850;letter-spacing:-.025em;color:#172338}.topbar p{margin:2px 0 0;color:#667085;font-size:12.5px}.menu-btn{border:1px solid var(--line);background:#f8fafc;color:#172338;width:40px;height:40px;border-radius:14px;font-size:18px;box-shadow:0 8px 16px rgba(23,35,56,.05);flex:none}.menu-btn:hover{background:#edf2f8}.top-actions{display:flex;align-items:center;gap:8px;margin-left:auto}.logout-btn,.guide-inline,.btn{border:0;border-radius:12px;padding:9px 13px;font-weight:800;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;transition:.15s ease}.logout-btn{background:#eef2f6;color:#22324f;border:1px solid var(--line)}.guide-inline,.btn-primary{background:linear-gradient(135deg,#172338,#2d4163);color:white;box-shadow:0 12px 24px rgba(23,35,56,.14)}.btn-primary:hover,.guide-inline:hover{transform:translateY(-1px)}.btn-soft{background:#f3f6fa;color:#22324f;border:1px solid var(--line)}.btn-soft:hover{background:#e9eff6}.btn-danger{background:#fff1f2;color:#b42331;border:1px solid #ffd5d9}.btn-success{background:#eaf7f1;color:#167a55;border:1px solid #ccebdc}.btn-small{padding:7px 10px;border-radius:10px;font-size:12px}.content-wrap{padding:16px 0 0}.alert{padding:11px 14px;border-radius:15px;margin:14px 0 0;border:1px solid;font-weight:700}.alert.success{background:#ecfdf3;color:#137a54;border-color:#bdebd1}.alert.error{background:#fff1f2;color:#b42331;border-color:#ffd5d9}.grid{display:grid;gap:14px}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:rgba(255,255,255,.96);border:1px solid rgba(215,224,234,.92);border-radius:var(--radius);box-shadow:var(--shadow-soft);padding:16px;position:relative;overflow:hidden}.card:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#172338,#d6b36c,#eef2f6);opacity:.35}.card.compact{padding:14px}.card-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.card-title h2,.card-title h3{margin:0;font-size:15.5px;color:#172338;letter-spacing:-.015em}.card-title p{margin:3px 0 0;font-size:12px;color:#6b7280}.stat-card{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:92px}.stat-card .label{font-size:11.5px;color:#667085;font-weight:850;text-transform:uppercase;letter-spacing:.055em}.stat-card .value{font-size:26px;font-weight:900;color:#172338;line-height:1.1;margin-top:3px;letter-spacing:-.035em}.stat-card .hint{font-size:12px;color:#8a94a6;margin-top:4px}.stat-icon{width:44px;height:44px;border-radius:15px;background:linear-gradient(135deg,#edf2f7,#fff);color:#22324f;display:grid;place-items:center;font-weight:900;flex:none;border:1px solid var(--line);box-shadow:inset 0 -8px 18px rgba(23,35,56,.04)}.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.form-row.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-group{display:flex;flex-direction:column;gap:6px}.form-group label{font-size:12px;color:#374151;font-weight:850}.form-control{width:100%;border:1px solid #d5dee9;background:#fbfdff;border-radius:13px;padding:10px 12px;min-height:42px;color:#172338;outline:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.form-control::placeholder{color:#9aa5b5}.form-control:focus{border-color:#2d4163;box-shadow:0 0 0 4px rgba(45,65,99,.10);background:#fff}textarea.form-control{min-height:80px;resize:vertical}.form-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}.table-tools{display:flex;gap:10px;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap}.search-box{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.search-box input,.search-box select{min-width:190px}.table-wrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:17px;background:white;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}.table-wrap::-webkit-scrollbar{height:9px}.table-wrap::-webkit-scrollbar-thumb{background:#c5d1df;border-radius:999px}.data-table{width:100%;border-collapse:separate;border-spacing:0;min-width:780px}.data-table th{background:#eef3f8;color:#334155;text-align:left;font-size:11.2px;text-transform:uppercase;letter-spacing:.055em;padding:12px;border-bottom:1px solid var(--line);white-space:nowrap;font-weight:900}.data-table td{padding:11px 12px;border-bottom:1px solid #edf2f7;vertical-align:middle;color:#273244;background:#fff}.data-table tr:nth-child(even) td{background:#fbfdff}.data-table tr:hover td{background:#f7fafc}.data-table tr:last-child td{border-bottom:0}.data-table small{color:#7a8494;display:block;margin-top:2px}.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:11.2px;font-weight:900;background:#eef3f8;color:#42526a;border:1px solid #dce5ee}.badge-active,.badge-paid,.badge-present,.badge-completed,.badge-approved{background:#eaf7f1;color:#167a55;border-color:#c7ecd9}.badge-trial,.badge-partial,.badge-late,.badge-scheduled,.badge-pending{background:#fff7e6;color:#9a620c;border-color:#f4dfad}.badge-inactive,.badge-left,.badge-unpaid,.badge-absent,.badge-cancelled,.badge-rejected{background:#fff1f2;color:#b42331;border-color:#ffd5d9}.badge-on-leave,.badge-leave,.badge-rescheduled,.badge-closed{background:#edf6ff;color:#1f5c93;border-color:#cfe5fb}.badge-missed{background:#fff4ed;color:#9d4b3e;border-color:#fbd5c3}.empty-state{padding:26px;text-align:center;color:#6b7280;background:#fbfdff;border:1px dashed #c9d5e3;border-radius:16px;font-weight:650}.muted{color:#6b7280}.mt-14{margin-top:14px}.mt-18{margin-top:18px}.text-right{text-align:right}.nowrap{white-space:nowrap}
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(circle at 15% 5%,rgba(214,179,108,.18),transparent 32%),linear-gradient(135deg,#172338,#25395b 45%,#eef2f6 45%,#f8fafc 100%)}.login-card{width:100%;max-width:430px;background:rgba(255,255,255,.97);border:1px solid rgba(255,255,255,.82);border-radius:26px;box-shadow:0 32px 90px rgba(17,27,45,.22);padding:24px}.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:18px}.login-brand .brand-mark{width:50px;height:50px}.login-card h1{font-size:22px;margin:0;color:#172338;letter-spacing:-.03em}.login-card p{margin:4px 0 0;color:#667085;font-size:13px}.demo-logins{background:#f6f8fb;border:1px solid var(--line);border-radius:15px;padding:12px;margin-top:14px;font-size:12px;color:#526071;line-height:1.75}.demo-logins code{background:#fff;border:1px solid #e1e8f0;border-radius:8px;padding:2px 6px;color:#172338;font-weight:800}.guide-fab{position:fixed;right:20px;bottom:20px;z-index:22;border:0;background:linear-gradient(135deg,#172338,#2d4163);color:white;border-radius:999px;padding:12px 16px;font-weight:900;box-shadow:0 18px 34px rgba(23,35,56,.24)}.modal-backdrop{position:fixed;inset:0;background:rgba(17,24,39,.48);display:none;align-items:center;justify-content:center;padding:18px;z-index:60;backdrop-filter:blur(5px)}.modal-backdrop.open{display:flex}.guide-modal{width:min(560px,100%);background:#fff;border-radius:23px;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.24);padding:22px;position:relative}.modal-close{position:absolute;right:16px;top:14px;border:0;background:#eef2f6;color:#172338;width:36px;height:36px;border-radius:13px;font-size:20px}.guide-kicker{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#8a94a6;font-weight:950}.guide-modal h2{margin:6px 0 14px;font-size:21px;color:#172338;letter-spacing:-.03em}.guide-section{border-top:1px solid var(--line-2);padding-top:11px;margin-top:11px}.guide-section strong{font-size:13px;color:#172338}.guide-section p{margin:4px 0 0;color:#5b6677;font-size:13px;line-height:1.6}
@media (max-width:1100px){.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){body.sidebar-collapsed .main-area,.main-area{margin-left:0;width:100%;padding:12px}.sidebar{transform:translateX(-105%);width:282px}body.mobile-sidebar-open .sidebar{transform:translateX(0)}body.mobile-sidebar-open:before{content:"";position:fixed;inset:0;background:rgba(17,24,39,.44);z-index:25}body.sidebar-collapsed .sidebar{width:282px}.sidebar-x{display:block}.brand-text,body.sidebar-collapsed .brand-text,body.sidebar-collapsed .nav-link span{display:flex}.side-footer{display:block!important}.topbar{top:8px;border-radius:18px}.topbar h1{font-size:17px}.topbar p{display:none}.top-actions{gap:6px}.guide-inline{display:none}.grid-2,.grid-3,.grid-4,.form-row,.form-row.three{grid-template-columns:1fr}.stat-card{min-height:80px}.card{padding:14px}.search-box input,.search-box select{min-width:140px;flex:1}.data-table{min-width:720px}.guide-fab{right:14px;bottom:14px;padding:10px 13px}.form-actions{justify-content:flex-start}}
@media (max-width:520px){.topbar{padding:11px}.logout-btn{padding:8px 10px}.menu-btn{width:37px;height:37px}.stat-card .value{font-size:23px}.table-tools{align-items:stretch}.search-box{width:100%}.search-box .btn{width:100%}.card-title{align-items:flex-start;flex-direction:column}.login-card{padding:20px}}

/* Public Frontend - Premium Matte Navy */
.front-page{min-height:100vh;background:linear-gradient(180deg,#f7f9fc 0%,#eef2f6 100%);color:#172338;overflow-x:hidden}.front-page:before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 5% 6%,rgba(214,179,108,.18),transparent 28%),radial-gradient(circle at 94% 10%,rgba(45,65,99,.14),transparent 28%);pointer-events:none;z-index:-1}.front-header{width:min(1180px,calc(100% - 32px));margin:16px auto 0;display:flex;align-items:center;justify-content:space-between;gap:18px;background:rgba(255,255,255,.92);border:1px solid rgba(215,224,234,.95);box-shadow:0 18px 46px rgba(23,35,56,.10);border-radius:24px;padding:12px 14px 12px 16px;position:sticky;top:12px;z-index:20;backdrop-filter:blur(14px)}.front-brand{display:flex;align-items:center;gap:12px;color:#172338;text-decoration:none;min-width:0}.front-logo{width:46px;height:46px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#172338,#2d4163);color:#fff;font-weight:950;letter-spacing:.03em;box-shadow:0 14px 28px rgba(23,35,56,.18)}.front-brand strong{display:block;font-size:15.5px;line-height:1.1;color:#172338}.front-brand small{display:block;color:#687386;font-size:12px;margin-top:3px}.front-nav{display:flex;align-items:center;gap:8px}.front-nav a{color:#526071;text-decoration:none;font-size:13px;font-weight:850;padding:10px 12px;border-radius:13px}.front-nav a:hover{background:#eef3f8;color:#172338}.front-nav .front-login{background:linear-gradient(135deg,#172338,#2d4163);color:#fff;padding:10px 15px;box-shadow:0 12px 24px rgba(23,35,56,.15)}.front-hero{position:relative;width:min(1180px,calc(100% - 32px));margin:34px auto 0;display:grid;grid-template-columns:1.04fr .96fr;gap:28px;align-items:center;min-height:560px;padding:34px;border-radius:36px;background:linear-gradient(135deg,#18243a 0%,#263a5c 45%,#f8fafc 45%,#ffffff 100%);border:1px solid rgba(255,255,255,.76);box-shadow:0 30px 80px rgba(23,35,56,.17);overflow:hidden}.hero-bg-mark{position:absolute;right:-70px;top:20px;font-size:128px;font-weight:950;color:rgba(23,35,56,.045);letter-spacing:-.08em;pointer-events:none}.front-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.12);color:#f4dfad;border:1px solid rgba(244,223,173,.26);border-radius:999px;padding:7px 11px;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.front-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:#d6b36c;box-shadow:0 0 0 5px rgba(214,179,108,.13)}.hero-content h1{font-size:56px;line-height:1;letter-spacing:-.06em;margin:18px 0 16px;color:#fff;max-width:690px}.hero-content p{font-size:16.5px;line-height:1.72;color:#d6dee9;margin:0;max-width:610px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.front-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:15px;padding:13px 18px;font-size:13px;font-weight:950;border:1px solid transparent;min-height:46px}.front-btn.primary{background:#fff;color:#172338;box-shadow:0 16px 30px rgba(0,0,0,.14)}.front-btn.soft{background:rgba(255,255,255,.10);color:#fff;border-color:rgba(255,255,255,.18)}.hero-points{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.hero-points span{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.16);color:#edf2f7;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:850}.hero-panel{position:relative;background:#ffffff;border:1px solid #dce5ee;border-radius:28px;padding:16px;box-shadow:0 30px 70px rgba(17,27,45,.20);min-height:390px}.panel-top{display:flex;gap:6px;margin-bottom:14px}.panel-top span{width:10px;height:10px;border-radius:50%;background:#c7d3df}.preview-card{background:#f8fafc;border:1px solid #e3eaf1;border-radius:20px;padding:16px;box-shadow:0 12px 26px rgba(23,35,56,.07)}.preview-card small{display:block;color:#687386;font-size:12px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.preview-card strong{display:block;color:#172338;font-size:30px;margin-top:5px;letter-spacing:-.04em}.preview-card.wide{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#172338,#2d4163);border-color:#2d4163}.preview-card.wide small,.preview-card.wide strong{color:#fff}.preview-card.wide em{font-style:normal;color:#172338;background:#f4dfad;border-radius:999px;padding:7px 10px;font-size:12px;font-weight:950}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}.preview-list{margin-top:12px;background:#fff;border:1px solid #e3eaf1;border-radius:20px;overflow:hidden}.preview-list div{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:13px 14px;border-bottom:1px solid #eef3f7}.preview-list div:last-child{border-bottom:0}.preview-list b{font-size:13px;color:#172338}.preview-list span{grid-column:1;color:#788598;font-size:12px}.preview-list i{grid-column:2;grid-row:1 / 3;align-self:center;font-style:normal;border-radius:999px;background:#eef4fa;color:#31516f;padding:6px 8px;font-size:11px;font-weight:950;white-space:nowrap}.front-section{width:min(1180px,calc(100% - 32px));margin:24px auto 0;padding:46px 8px}.front-section.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:start;background:#fff;border:1px solid #dce5ee;border-radius:30px;padding:34px;box-shadow:0 20px 54px rgba(23,35,56,.08)}.front-section.split .front-kicker,.section-center .front-kicker{background:#eef3f8;color:#22324f;border-color:#dce5ee}.front-section h2{font-size:36px;line-height:1.08;letter-spacing:-.04em;margin:15px 0 12px;color:#172338}.front-section p,.front-lead{color:#5d6b7e;line-height:1.7;margin:0}.feature-list{display:grid;gap:12px}.feature-list div{background:#f8fafc;border:1px solid #e3eaf1;border-radius:18px;padding:16px}.feature-list strong{display:block;color:#172338;margin-bottom:5px}.feature-list span{color:#6d798b;font-size:13px;line-height:1.55}.stats-strip{width:min(1180px,calc(100% - 32px));margin:22px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stats-strip div{background:linear-gradient(135deg,#172338,#2d4163);color:#fff;border-radius:22px;padding:22px;text-align:center;box-shadow:0 20px 44px rgba(23,35,56,.16)}.stats-strip div:nth-child(even){background:#fff;color:#172338;border:1px solid #dce5ee}.stats-strip strong{display:block;font-size:24px;letter-spacing:-.03em}.stats-strip span{display:block;color:inherit;opacity:.72;font-size:13px;margin-top:5px;font-weight:800}.section-center{text-align:center;max-width:720px;margin:0 auto 24px}.section-center h2{margin-top:16px}.section-center p{color:#667387}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature-grid article{background:#fff;border:1px solid #dce5ee;border-radius:23px;padding:22px;box-shadow:0 16px 34px rgba(23,35,56,.06);min-height:180px;transition:.16s ease}.feature-grid article:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(23,35,56,.10)}.feature-grid article span{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:#eef3f8;color:#172338;font-weight:950;margin-bottom:16px}.feature-grid h3{margin:0 0 8px;color:#172338;font-size:18px}.feature-grid p{font-size:13.5px;color:#647185;line-height:1.6}.portal-section{padding-top:24px}.portal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.portal-card{background:#fff;border:1px solid #dce5ee;border-radius:25px;padding:26px;box-shadow:0 18px 42px rgba(23,35,56,.07)}.portal-card.highlighted{background:linear-gradient(135deg,#172338,#2d4163);color:#fff;border-color:#2d4163}.portal-card h3{margin:0 0 10px;font-size:22px;letter-spacing:-.03em}.portal-card p{font-size:14px;line-height:1.7;color:#657184}.portal-card.highlighted p{color:#d8e0e9}.portal-card a{display:inline-flex;margin-top:16px;text-decoration:none;font-weight:950;color:#172338;background:#eef3f8;border-radius:13px;padding:10px 13px}.portal-card.highlighted a{background:#fff;color:#172338}.front-cta{width:min(1180px,calc(100% - 32px));margin:10px auto 0;background:linear-gradient(135deg,#172338,#2d4163);border-radius:30px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:18px;color:#fff;box-shadow:0 24px 60px rgba(23,35,56,.18)}.front-cta h2{margin:0 0 7px;font-size:30px;letter-spacing:-.04em}.front-cta p{margin:0;color:#cbd4df}.front-cta .front-btn.primary{background:#fff;color:#172338;box-shadow:none}.front-footer{width:min(1180px,calc(100% - 32px));margin:22px auto 28px;display:flex;justify-content:space-between;gap:18px;padding:20px 4px;color:#617084}.front-footer strong{color:#172338}.front-footer p{margin:5px 0 0}.footer-links{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.footer-links a{color:#526176;text-decoration:none;font-weight:850;font-size:13px}@media (max-width:940px){.front-hero{grid-template-columns:1fr;min-height:0;padding:24px;background:linear-gradient(135deg,#18243a 0%,#263a5c 52%,#f8fafc 52%,#fff 100%)}.hero-content h1{font-size:44px}.front-section.split{grid-template-columns:1fr}.feature-grid,.portal-grid{grid-template-columns:1fr 1fr}.stats-strip{grid-template-columns:1fr 1fr}.front-nav a:not(.front-login){display:none}}
@media (max-width:620px){.front-header{width:calc(100% - 22px);margin-top:11px;border-radius:18px}.front-brand small{display:none}.front-logo{width:40px;height:40px}.front-nav .front-login{padding:9px 11px}.front-hero,.front-section,.front-section.split,.stats-strip,.front-cta,.front-footer{width:calc(100% - 22px)}.front-hero{margin-top:18px;border-radius:25px;padding:20px;background:linear-gradient(180deg,#18243a 0%,#263a5c 48%,#fff 48%,#fff 100%)}.hero-bg-mark{display:none}.hero-content h1{font-size:36px;line-height:1.03}.hero-content p{font-size:15px}.hero-actions .front-btn{width:100%}.hero-panel{border-radius:22px;min-height:0}.preview-grid,.feature-grid,.portal-grid,.stats-strip{grid-template-columns:1fr}.front-section{padding:30px 0}.front-section.split{padding:22px}.front-section h2{font-size:28px}.front-cta{align-items:flex-start;flex-direction:column;padding:24px}.front-cta h2{font-size:26px}.front-footer{flex-direction:column;margin-bottom:18px}.preview-list div{grid-template-columns:1fr}.preview-list i{grid-column:1;grid-row:auto;justify-self:flex-start}}

/* ===== Theme & Design Presets v3 ===== */
body.theme-islamic-green{
    --navy:#0f3b35;--navy-2:#15564c;--navy-3:#1f7669;--ink:#10231f;--text:#1f312d;--muted:#64736f;--soft-muted:#91a29d;--bg:#eef6f1;--bg-2:#f8fbf7;--card:#ffffff;--surface:#fbfdfb;--line:#d9e7df;--line-2:#edf4ef;--cream:#f4efe2;--accent:#c69a43;--accent-2:#e2c270;--shadow:0 18px 44px rgba(15,59,53,.10);--shadow-soft:0 10px 26px rgba(15,59,53,.075)
}
body.theme-academy-navy{
    --navy:#172338;--navy-2:#22324f;--navy-3:#2d4163;--ink:#111827;--text:#1f2937;--muted:#687386;--soft-muted:#94a3b8;--bg:#eef2f6;--bg-2:#f7f9fc;--card:#ffffff;--surface:#f9fbfd;--line:#d7e0ea;--line-2:#e8eef5;--cream:#f7f2e8;--accent:#b88a3d;--accent-2:#d6b36c;--shadow:0 20px 48px rgba(23,35,56,.10);--shadow-soft:0 10px 28px rgba(23,35,56,.07)
}
body.theme-soft-sand{
    --navy:#25423b;--navy-2:#365d52;--navy-3:#5a7f63;--ink:#1f2925;--text:#2e3733;--muted:#726d62;--soft-muted:#a0988b;--bg:#f5f0e7;--bg-2:#fbf8f1;--card:#fffdf8;--surface:#fffaf0;--line:#e7dcc7;--line-2:#f0e7d8;--cream:#fff1cf;--accent:#b47932;--accent-2:#d7a85a;--shadow:0 18px 42px rgba(77,56,29,.11);--shadow-soft:0 10px 25px rgba(77,56,29,.075)
}
body.theme-modern-blue{
    --navy:#123c69;--navy-2:#1e5a91;--navy-3:#2d7bbd;--ink:#0f1f31;--text:#1c2938;--muted:#637387;--soft-muted:#94a5b8;--bg:#eef6fd;--bg-2:#f8fbff;--card:#ffffff;--surface:#fbfdff;--line:#d6e4f1;--line-2:#e7f0f8;--cream:#edf6ff;--accent:#2a8bcf;--accent-2:#6fb7e7;--shadow:0 20px 46px rgba(18,60,105,.11);--shadow-soft:0 10px 26px rgba(18,60,105,.075)
}
body.theme-islamic-green,body.theme-academy-navy,body.theme-soft-sand,body.theme-modern-blue{background:linear-gradient(135deg,var(--bg) 0%,var(--bg-2) 46%,var(--surface) 100%)}
body.theme-islamic-green .app-shell:before,body.theme-academy-navy .app-shell:before,body.theme-soft-sand .app-shell:before,body.theme-modern-blue .app-shell:before{background:radial-gradient(circle at 96% 4%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 28%),radial-gradient(circle at 28% 0%,color-mix(in srgb,var(--navy-3) 10%,transparent),transparent 34%)}
body.theme-islamic-green .sidebar,body.theme-academy-navy .sidebar,body.theme-soft-sand .sidebar,body.theme-modern-blue .sidebar{background:linear-gradient(180deg,var(--navy) 0%,color-mix(in srgb,var(--navy) 82%,#000 18%) 100%);box-shadow:18px 0 42px color-mix(in srgb,var(--navy) 20%,transparent)}
body.theme-islamic-green .brand-mark,body.theme-academy-navy .brand-mark,body.theme-soft-sand .brand-mark,body.theme-modern-blue .brand-mark{background:linear-gradient(135deg,var(--accent-2),var(--accent));color:var(--navy)}
body.theme-islamic-green .nav-link.active,body.theme-academy-navy .nav-link.active,body.theme-soft-sand .nav-link.active,body.theme-modern-blue .nav-link.active{color:var(--navy);background:linear-gradient(135deg,#fff,var(--line-2));box-shadow:0 14px 26px color-mix(in srgb,var(--navy) 18%,transparent)}
body.theme-islamic-green .topbar,body.theme-academy-navy .topbar,body.theme-soft-sand .topbar,body.theme-modern-blue .topbar,body.theme-islamic-green .card,body.theme-academy-navy .card,body.theme-soft-sand .card,body.theme-modern-blue .card{background:color-mix(in srgb,var(--card) 96%,transparent);border-color:var(--line);box-shadow:var(--shadow-soft)}
body.theme-islamic-green .topbar:after,body.theme-academy-navy .topbar:after,body.theme-soft-sand .topbar:after,body.theme-modern-blue .topbar:after{background:linear-gradient(90deg,transparent,var(--accent-2),transparent)}
body.theme-islamic-green .topbar h1,body.theme-academy-navy .topbar h1,body.theme-soft-sand .topbar h1,body.theme-modern-blue .topbar h1,body.theme-islamic-green .card-title h2,body.theme-academy-navy .card-title h2,body.theme-soft-sand .card-title h2,body.theme-modern-blue .card-title h2,body.theme-islamic-green .card-title h3,body.theme-academy-navy .card-title h3,body.theme-soft-sand .card-title h3,body.theme-modern-blue .card-title h3,body.theme-islamic-green .stat-card .value,body.theme-academy-navy .stat-card .value,body.theme-soft-sand .stat-card .value,body.theme-modern-blue .stat-card .value{color:var(--navy)}
body.theme-islamic-green .guide-inline,body.theme-academy-navy .guide-inline,body.theme-soft-sand .guide-inline,body.theme-modern-blue .guide-inline,body.theme-islamic-green .btn-primary,body.theme-academy-navy .btn-primary,body.theme-soft-sand .btn-primary,body.theme-modern-blue .btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy-3));box-shadow:0 12px 24px color-mix(in srgb,var(--navy) 16%,transparent)}
body.theme-islamic-green .card:before,body.theme-academy-navy .card:before,body.theme-soft-sand .card:before,body.theme-modern-blue .card:before{background:linear-gradient(90deg,var(--navy),var(--accent-2),var(--line-2));opacity:.42}
body.theme-islamic-green .form-control:focus,body.theme-academy-navy .form-control:focus,body.theme-soft-sand .form-control:focus,body.theme-modern-blue .form-control:focus{border-color:var(--navy-3);box-shadow:0 0 0 4px color-mix(in srgb,var(--navy-3) 12%,transparent)}
body.theme-islamic-green .data-table th,body.theme-academy-navy .data-table th,body.theme-soft-sand .data-table th,body.theme-modern-blue .data-table th{background:var(--line-2);color:color-mix(in srgb,var(--navy) 82%,#334155)}
body.theme-islamic-green .guide-fab,body.theme-academy-navy .guide-fab,body.theme-soft-sand .guide-fab,body.theme-modern-blue .guide-fab{background:linear-gradient(135deg,var(--navy),var(--navy-3));box-shadow:0 18px 40px color-mix(in srgb,var(--navy) 22%,transparent)}

/* Login + frontend also follows selected theme */
body.login-page.theme-islamic-green,body.login-page.theme-academy-navy,body.login-page.theme-soft-sand,body.login-page.theme-modern-blue{background:linear-gradient(135deg,var(--bg),var(--bg-2) 55%,var(--surface))}
body.theme-islamic-green .front-header,body.theme-academy-navy .front-header,body.theme-soft-sand .front-header,body.theme-modern-blue .front-header{background:color-mix(in srgb,var(--card) 93%,transparent);border-color:var(--line);box-shadow:var(--shadow-soft)}
body.theme-islamic-green .front-logo,body.theme-academy-navy .front-logo,body.theme-soft-sand .front-logo,body.theme-modern-blue .front-logo,body.theme-islamic-green .front-login,body.theme-academy-navy .front-login,body.theme-soft-sand .front-login,body.theme-modern-blue .front-login{background:linear-gradient(135deg,var(--navy),var(--navy-3));box-shadow:0 12px 24px color-mix(in srgb,var(--navy) 15%,transparent)}
body.theme-islamic-green .front-brand strong,body.theme-academy-navy .front-brand strong,body.theme-soft-sand .front-brand strong,body.theme-modern-blue .front-brand strong,body.theme-islamic-green .front-section h2,body.theme-academy-navy .front-section h2,body.theme-soft-sand .front-section h2,body.theme-modern-blue .front-section h2,body.theme-islamic-green .feature-grid h3,body.theme-academy-navy .feature-grid h3,body.theme-soft-sand .feature-grid h3,body.theme-modern-blue .feature-grid h3{color:var(--navy)}
body.theme-islamic-green .front-hero,body.theme-academy-navy .front-hero,body.theme-soft-sand .front-hero,body.theme-modern-blue .front-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 45%,var(--bg-2) 45%,#ffffff 100%);box-shadow:0 30px 80px color-mix(in srgb,var(--navy) 16%,transparent)}
body.theme-islamic-green .front-kicker,body.theme-academy-navy .front-kicker,body.theme-soft-sand .front-kicker,body.theme-modern-blue .front-kicker{color:var(--accent-2);border-color:color-mix(in srgb,var(--accent-2) 28%,transparent)}
body.theme-islamic-green .front-kicker:before,body.theme-academy-navy .front-kicker:before,body.theme-soft-sand .front-kicker:before,body.theme-modern-blue .front-kicker:before{background:var(--accent-2);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent-2) 16%,transparent)}
body.theme-islamic-green .front-btn.soft,body.theme-academy-navy .front-btn.soft,body.theme-soft-sand .front-btn.soft,body.theme-modern-blue .front-btn.soft{background:color-mix(in srgb,#fff 12%,transparent);border-color:color-mix(in srgb,#fff 20%,transparent)}
body.theme-islamic-green .preview-card.wide,body.theme-academy-navy .preview-card.wide,body.theme-soft-sand .preview-card.wide,body.theme-modern-blue .preview-card.wide,body.theme-islamic-green .portal-card.highlighted,body.theme-academy-navy .portal-card.highlighted,body.theme-soft-sand .portal-card.highlighted,body.theme-modern-blue .portal-card.highlighted,body.theme-islamic-green .front-cta,body.theme-academy-navy .front-cta,body.theme-soft-sand .front-cta,body.theme-modern-blue .front-cta{background:linear-gradient(135deg,var(--navy),var(--navy-3));border-color:var(--navy-3)}
body.theme-islamic-green .stats-strip div,body.theme-academy-navy .stats-strip div,body.theme-soft-sand .stats-strip div,body.theme-modern-blue .stats-strip div{background:linear-gradient(135deg,var(--navy),var(--navy-3));box-shadow:0 20px 44px color-mix(in srgb,var(--navy) 16%,transparent)}
body.theme-islamic-green .stats-strip div:nth-child(even),body.theme-academy-navy .stats-strip div:nth-child(even),body.theme-soft-sand .stats-strip div:nth-child(even),body.theme-modern-blue .stats-strip div:nth-child(even){background:var(--card);color:var(--navy);border-color:var(--line)}

/* Settings theme picker */
.appearance-panel{padding:4px 0 0}.theme-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.theme-option{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:12px;cursor:pointer;transition:.16s ease;position:relative;box-shadow:0 10px 24px color-mix(in srgb,var(--navy) 6%,transparent)}.theme-option input{position:absolute;opacity:0;pointer-events:none}.theme-option:hover,.theme-option.selected{transform:translateY(-1px);border-color:var(--navy-3);box-shadow:0 16px 32px color-mix(in srgb,var(--navy) 12%,transparent)}.theme-option.selected:after{content:"Selected";position:absolute;right:10px;top:10px;background:var(--navy);color:#fff;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:900}.theme-preview{height:78px;border-radius:14px;border:1px solid rgba(0,0,0,.06);overflow:hidden;display:grid;grid-template-columns:32% 1fr;background:#fff}.theme-preview i{display:block;grid-row:1/3}.theme-preview b,.theme-preview em{display:block;margin:10px 10px 0;border-radius:999px}.theme-preview b{height:16px}.theme-preview em{height:32px;margin-top:8px;border-radius:10px}.theme-option strong{font-size:13px;color:var(--navy)}.theme-option small{color:var(--muted);font-size:11.5px;line-height:1.35}.theme-card-islamic-green .theme-preview i{background:#0f3b35}.theme-card-islamic-green .theme-preview b{background:#1f7669}.theme-card-islamic-green .theme-preview em{background:#eef6f1}.theme-card-academy-navy .theme-preview i{background:#172338}.theme-card-academy-navy .theme-preview b{background:#2d4163}.theme-card-academy-navy .theme-preview em{background:#eef2f6}.theme-card-soft-sand .theme-preview i{background:#25423b}.theme-card-soft-sand .theme-preview b{background:#d7a85a}.theme-card-soft-sand .theme-preview em{background:#f5f0e7}.theme-card-modern-blue .theme-preview i{background:#123c69}.theme-card-modern-blue .theme-preview b{background:#2d7bbd}.theme-card-modern-blue .theme-preview em{background:#eef6fd}
@media (max-width:980px){.theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.theme-options{grid-template-columns:1fr}}
@media (max-width:940px){body.theme-islamic-green .front-hero,body.theme-academy-navy .front-hero,body.theme-soft-sand .front-hero,body.theme-modern-blue .front-hero{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-3) 52%,var(--bg-2) 52%,#fff 100%)}}
@media (max-width:620px){body.theme-islamic-green .front-hero,body.theme-academy-navy .front-hero,body.theme-soft-sand .front-hero,body.theme-modern-blue .front-hero{background:linear-gradient(180deg,var(--navy) 0%,var(--navy-3) 48%,#fff 48%,#fff 100%)}}

/* =========================================================
   Design Presets v4 - changes real layout, not only colors
   ========================================================= */
body.design-academy-soft{
    background:
      radial-gradient(circle at 8% 8%,rgba(31,118,105,.12),transparent 26%),
      radial-gradient(circle at 92% 6%,rgba(215,168,90,.16),transparent 28%),
      linear-gradient(135deg,#f7f4ec 0%,#eef7f3 48%,#f8fafc 100%);
}
body.design-academy-soft .app-shell:before{background:repeating-linear-gradient(45deg,rgba(31,118,105,.026) 0 1px,transparent 1px 18px)}
body.design-academy-soft .sidebar{
    background:linear-gradient(180deg,#fbf7ed 0%,#eef7f3 100%) !important;
    border-right:1px solid #d9e8df;
    box-shadow:14px 0 34px rgba(31,118,105,.10);
}
body.design-academy-soft .sidebar:before{background:radial-gradient(circle,rgba(31,118,105,.13),transparent 60%)}
body.design-academy-soft .sidebar:after{background:radial-gradient(circle,rgba(215,168,90,.16),transparent 60%)}
body.design-academy-soft .brand-box{border-bottom-color:#d9e8df}
body.design-academy-soft .brand-mark{background:linear-gradient(135deg,#1f7669,#0f3b35) !important;color:#fff;box-shadow:0 13px 26px rgba(31,118,105,.18)}
body.design-academy-soft .brand-text strong{color:#183b35}
body.design-academy-soft .brand-text span{color:#5b726b}
body.design-academy-soft .nav-link{color:#36564f;background:transparent;border:1px solid transparent}
body.design-academy-soft .nav-link:hover{background:#fff;color:#0f3b35;border-color:#d9e8df}
body.design-academy-soft .nav-link.active{background:linear-gradient(135deg,#0f3b35,#1f7669) !important;color:#fff !important;border-color:#1f7669;box-shadow:0 12px 24px rgba(31,118,105,.20)}
body.design-academy-soft .side-footer{background:#fff;border-color:#d9e8df}
body.design-academy-soft .mini-user strong{color:#183b35}
body.design-academy-soft .mini-user span{color:#60766f}
body.design-academy-soft .topbar{background:#fffdf8;border-color:#d9e8df;border-radius:20px;box-shadow:0 12px 34px rgba(31,118,105,.08)}
body.design-academy-soft .topbar:after{height:3px;left:22px;right:auto;width:90px;background:#1f7669;border-radius:999px;opacity:1}
body.design-academy-soft .card{background:#fffdf8;border-color:#ddebe3;border-radius:22px;box-shadow:0 12px 34px rgba(31,118,105,.07)}
body.design-academy-soft .card:before{height:0}
body.design-academy-soft .stat-card{border-left:5px solid #1f7669;min-height:88px}
body.design-academy-soft .stat-icon{background:#eef7f3;color:#0f3b35;border-color:#d9e8df}
body.design-academy-soft .btn-primary,body.design-academy-soft .guide-inline,body.design-academy-soft .guide-fab{background:linear-gradient(135deg,#0f3b35,#1f7669) !important;box-shadow:0 12px 24px rgba(31,118,105,.18)}
body.design-academy-soft .data-table th{background:#eef7f3 !important;color:#183b35}
body.design-academy-soft .table-wrap{border-color:#d9e8df}
body.design-academy-soft .form-control:focus{border-color:#1f7669;box-shadow:0 0 0 4px rgba(31,118,105,.10)}
body.design-academy-soft .login-page,body.login-page.design-academy-soft{background:linear-gradient(135deg,#0f3b35 0%,#1f7669 42%,#f7f4ec 42%,#fffdf8 100%) !important}
body.login-page.design-academy-soft .login-card{border-color:#d9e8df;box-shadow:0 30px 80px rgba(31,118,105,.20)}

body.design-academy-soft.front-page{background:linear-gradient(180deg,#f8f5ed,#eef7f3 54%,#fffdf8)}
body.design-academy-soft .front-header{border-color:#d9e8df;background:rgba(255,253,248,.94);box-shadow:0 12px 34px rgba(31,118,105,.08)}
body.design-academy-soft .front-hero{background:#fffdf8 !important;border-color:#d9e8df;box-shadow:0 24px 70px rgba(31,118,105,.12);grid-template-columns:.96fr 1.04fr;min-height:520px}
body.design-academy-soft .front-hero:before{content:"";position:absolute;left:0;top:0;bottom:0;width:43%;background:linear-gradient(135deg,#0f3b35,#1f7669);z-index:0}
body.design-academy-soft .hero-content,body.design-academy-soft .hero-panel{position:relative;z-index:1}
body.design-academy-soft .hero-bg-mark{color:rgba(31,118,105,.06)}
body.design-academy-soft .front-kicker{background:#eef7f3 !important;color:#0f3b35 !important;border-color:#d9e8df !important}
body.design-academy-soft .front-kicker:before{background:#1f7669;box-shadow:0 0 0 5px rgba(31,118,105,.13)}
body.design-academy-soft .hero-content h1{color:#fff}
body.design-academy-soft .hero-content p{color:#dbeee8}
body.design-academy-soft .hero-points span{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.20);color:#f5fffb}
body.design-academy-soft .front-btn.primary{background:#fff;color:#0f3b35}
body.design-academy-soft .front-btn.soft{background:rgba(255,255,255,.13);color:#fff;border-color:rgba(255,255,255,.25)}
body.design-academy-soft .preview-card.wide,body.design-academy-soft .portal-card.highlighted,body.design-academy-soft .front-cta,body.design-academy-soft .stats-strip div{background:linear-gradient(135deg,#0f3b35,#1f7669) !important;border-color:#1f7669}
body.design-academy-soft .feature-grid article,body.design-academy-soft .portal-card,body.design-academy-soft .front-section.split{border-color:#d9e8df;box-shadow:0 14px 34px rgba(31,118,105,.07)}

body.design-portal-cards .content-wrap{padding-top:18px}
body.design-portal-cards .topbar{border-radius:30px;padding:18px 20px;background:linear-gradient(135deg,#ffffff,#f7fafc)}
body.design-portal-cards .topbar h1{font-size:24px}
body.design-portal-cards .card{border-radius:30px;padding:20px;box-shadow:0 24px 60px rgba(23,35,56,.10)}
body.design-portal-cards .card:before{height:6px;opacity:.20}
body.design-portal-cards .stat-card{min-height:118px;align-items:flex-start;flex-direction:column}
body.design-portal-cards .stat-icon{position:absolute;right:18px;top:18px;border-radius:50%;width:48px;height:48px}
body.design-portal-cards .stat-card .value{font-size:32px}
body.design-portal-cards .nav-link{border-radius:18px;margin-bottom:2px}
body.design-portal-cards .form-control{border-radius:17px;min-height:46px}
body.design-portal-cards .table-wrap{border-radius:24px}
body.design-portal-cards .data-table th{padding:14px 16px}
body.design-portal-cards .data-table td{padding:14px 16px}
body.design-portal-cards.front-page .front-hero{border-radius:42px;min-height:610px;grid-template-columns:1fr .86fr;background:radial-gradient(circle at 20% 15%,rgba(255,255,255,.13),transparent 22%),linear-gradient(135deg,var(--navy),var(--navy-3)) !important}
body.design-portal-cards .hero-content h1,body.design-portal-cards .hero-content p{max-width:760px}
body.design-portal-cards .hero-panel{transform:rotate(1.5deg);box-shadow:0 38px 90px rgba(0,0,0,.25)}
body.design-portal-cards .front-section.split{border-radius:38px}
body.design-portal-cards .feature-grid article,body.design-portal-cards .portal-card{border-radius:32px;min-height:210px}

body.design-clean-compact{font-size:13px;background:#f5f7fa}
body.design-clean-compact .sidebar{width:238px;padding:12px 9px;box-shadow:none}
body.design-clean-compact .main-area{margin-left:238px;width:calc(100% - 238px);padding:12px 14px 20px}
body.design-clean-compact.sidebar-collapsed .sidebar{width:76px}
body.design-clean-compact.sidebar-collapsed .main-area{margin-left:76px;width:calc(100% - 76px)}
body.design-clean-compact .brand-box{padding:8px 8px 12px}.design-clean-compact .brand-mark{width:38px;height:38px;border-radius:11px}
body.design-clean-compact .nav-link{padding:8px 10px;border-radius:11px;font-size:12.5px}
body.design-clean-compact .topbar{top:10px;border-radius:15px;padding:10px 12px;box-shadow:none}.design-clean-compact .topbar h1{font-size:18px}.design-clean-compact .topbar p{font-size:12px}
body.design-clean-compact .card{border-radius:14px;padding:12px;box-shadow:none}.design-clean-compact .card:before{display:none}
body.design-clean-compact .grid{gap:10px}.design-clean-compact .content-wrap{padding-top:12px}.design-clean-compact .mt-18{margin-top:12px!important}.design-clean-compact .mt-14{margin-top:10px!important}
body.design-clean-compact .stat-card{min-height:76px}.design-clean-compact .stat-card .value{font-size:22px}.design-clean-compact .stat-icon{width:38px;height:38px;border-radius:10px}
body.design-clean-compact .form-row,.design-clean-compact .form-row.three{gap:9px}.design-clean-compact .form-control{min-height:38px;border-radius:9px;padding:8px 10px}.design-clean-compact textarea.form-control{min-height:64px}.design-clean-compact .btn{border-radius:9px;padding:8px 10px}.design-clean-compact .table-wrap{border-radius:12px}.design-clean-compact .data-table th{padding:9px 10px}.design-clean-compact .data-table td{padding:8px 10px}.design-clean-compact .badge{padding:4px 7px}
body.design-clean-compact.front-page .front-header{border-radius:14px;padding:9px 12px}.design-clean-compact.front-page .front-hero{min-height:430px;border-radius:20px;padding:24px;gap:18px}.design-clean-compact .hero-content h1{font-size:42px}.design-clean-compact .hero-content p{font-size:14.5px}.design-clean-compact .hero-panel{min-height:320px;border-radius:18px}.design-clean-compact .front-section{padding:30px 8px}.design-clean-compact .feature-grid article,.design-clean-compact .portal-card{border-radius:16px;padding:18px;min-height:150px}.design-clean-compact .stats-strip div{border-radius:15px;padding:16px}.design-clean-compact .front-cta{border-radius:18px}

body.design-executive{background:linear-gradient(135deg,#eef2f7,#f8fafc)}
body.design-executive .sidebar{left:16px;top:16px;bottom:16px;border-radius:26px;width:258px;border:1px solid rgba(255,255,255,.10);box-shadow:0 24px 70px rgba(17,27,45,.20)}
body.design-executive .main-area{margin-left:290px;width:calc(100% - 290px);padding:16px 22px 28px}.design-executive.sidebar-collapsed .sidebar{width:84px}.design-executive.sidebar-collapsed .main-area{margin-left:116px;width:calc(100% - 116px)}
body.design-executive .topbar{background:linear-gradient(135deg,#172338,#263a5c);border-color:#263a5c;color:#fff;border-radius:25px}.design-executive .topbar h1{color:#fff}.design-executive .topbar p{color:#cbd5e1}.design-executive .menu-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);color:#fff}.design-executive .logout-btn{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.16);color:#fff}
body.design-executive .card{border:0;border-radius:24px;box-shadow:0 20px 55px rgba(23,35,56,.09)}.design-executive .card:before{height:4px;opacity:.55}.design-executive .table-wrap{border:0;box-shadow:0 0 0 1px #e5ecf3 inset}.design-executive .data-table th{background:#172338!important;color:#e5edf6}.design-executive .data-table tr:nth-child(even) td{background:#f7f9fc}.design-executive .form-control{background:#fff;border-color:#e1e8f0}
body.design-executive.front-page{background:linear-gradient(180deg,#eef2f7,#fff)}.design-executive.front-page .front-header{border-radius:18px}.design-executive.front-page .front-hero{background:linear-gradient(135deg,#172338 0%,#263a5c 58%,#fff 58%,#fff 100%)!important;border-radius:28px}.design-executive .hero-panel{border-radius:18px}.design-executive .front-section.split,.design-executive .portal-card,.design-executive .feature-grid article{border-radius:18px}.design-executive .front-cta{border-radius:22px}

/* Design picker UI */
.design-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.design-option{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);background:var(--card);border-radius:18px;padding:12px;cursor:pointer;transition:.16s ease;position:relative;box-shadow:0 10px 24px rgba(23,35,56,.06)}.design-option input{position:absolute;opacity:0;pointer-events:none}.design-option:hover,.design-option.selected{transform:translateY(-1px);border-color:var(--navy-3);box-shadow:0 16px 32px rgba(23,35,56,.12)}.design-option.selected:after{content:"Selected";position:absolute;right:10px;top:10px;background:var(--navy);color:#fff;border-radius:999px;padding:4px 7px;font-size:10px;font-weight:900}.design-preview{height:86px;border-radius:14px;border:1px solid rgba(0,0,0,.06);overflow:hidden;display:grid;grid-template-columns:30% 1fr 1fr;grid-template-rows:24px 1fr;gap:7px;padding:8px;background:#fff}.design-preview i{grid-row:1/3;border-radius:10px;background:#0f3b35}.design-preview b{grid-column:2/4;border-radius:999px;background:#dcefe8}.design-preview em,.design-preview u{display:block;border-radius:10px;background:#f5f0e7}.design-preview u{background:#e8eef5}.design-option strong{font-size:13px;color:var(--navy)}.design-option small{color:var(--muted);font-size:11.5px;line-height:1.35}.design-card-portal-cards .design-preview{border-radius:18px;gap:9px}.design-card-portal-cards .design-preview i{background:#172338;border-radius:14px}.design-card-portal-cards .design-preview em,.design-card-portal-cards .design-preview u{border-radius:16px}.design-card-clean-compact .design-preview{border-radius:8px;gap:5px;padding:6px}.design-card-clean-compact .design-preview i,.design-card-clean-compact .design-preview em,.design-card-clean-compact .design-preview u{border-radius:6px}.design-card-executive .design-preview{background:#eef2f7}.design-card-executive .design-preview i{background:#172338;border-radius:14px}.design-card-executive .design-preview b{background:#172338}.design-card-executive .design-preview em,.design-card-executive .design-preview u{background:#fff}

@media (max-width:980px){.design-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.design-options{grid-template-columns:1fr}}
@media (max-width:820px){
    body.design-clean-compact .sidebar,body.design-executive .sidebar{left:0;top:0;bottom:0;border-radius:0;width:274px}
    body.design-clean-compact .main-area,body.design-executive .main-area,body.design-clean-compact.sidebar-collapsed .main-area,body.design-executive.sidebar-collapsed .main-area{margin-left:0;width:100%;padding:12px}
    body.design-clean-compact .sidebar,body.design-executive .sidebar{transform:translateX(-105%)}
    body.design-clean-compact.mobile-sidebar-open .sidebar,body.design-executive.mobile-sidebar-open .sidebar{transform:translateX(0)}
    body.design-clean-compact .sidebar-x,body.design-executive .sidebar-x{display:block}
}
@media (max-width:940px){body.design-academy-soft .front-hero:before{width:100%;height:52%;bottom:auto;right:0}.design-executive.front-page .front-hero{background:linear-gradient(135deg,#172338 0%,#263a5c 52%,#fff 52%,#fff 100%)!important}}
@media (max-width:620px){body.design-academy-soft .front-hero:before{height:48%}.design-executive.front-page .front-hero{background:linear-gradient(180deg,#172338 0%,#263a5c 48%,#fff 48%,#fff 100%)!important}}

/* Visible design shortcut v5 */
.design-shortcut{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:9px 13px;border-radius:13px;background:linear-gradient(135deg,var(--navy),var(--navy-3));color:#fff;text-decoration:none;font-size:13px;font-weight:900;border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 26px rgba(23,35,56,.16)}
.design-shortcut:hover{transform:translateY(-1px);filter:brightness(1.03)}
@media(max-width:520px){.design-shortcut{padding:8px 10px;font-size:12px}.top-actions{gap:6px}}


/* =========================================================
   Polish v6 - workflow clean-up
   - Only one Guide button: floating bottom button remains
   - Upper floating/sticky panel removed
   - No new module; only spacing, readability and demo polish
   ========================================================= */
.guide-inline,.design-shortcut{display:none!important}
.main-area{padding:14px 18px 24px}
.topbar,
body.design-academy-soft .topbar,
body.design-portal-cards .topbar,
body.design-clean-compact .topbar,
body.design-executive .topbar{
    position:static!important;
    top:auto!important;
    z-index:auto!important;
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
    backdrop-filter:none!important;
    border-radius:0!important;
    padding:4px 0 12px!important;
    color:var(--navy)!important;
}
.topbar:after,
body.design-academy-soft .topbar:after{display:none!important}
.topbar h1,
body.design-executive .topbar h1{font-size:19px!important;line-height:1.15;color:var(--navy)!important;letter-spacing:-.025em}
.topbar p,
body.design-executive .topbar p{color:var(--muted)!important;font-size:12.2px!important;max-width:720px}
.menu-btn,
body.design-executive .menu-btn{
    width:38px!important;height:38px!important;border-radius:12px!important;
    background:var(--card)!important;color:var(--navy)!important;border:1px solid var(--line)!important;
    box-shadow:0 6px 16px rgba(15,35,52,.06)!important
}
.top-actions{gap:8px}
.logout-btn,
body.design-executive .logout-btn{
    min-height:36px!important;padding:8px 12px!important;border-radius:11px!important;
    background:var(--card)!important;color:var(--navy)!important;border:1px solid var(--line)!important;
    box-shadow:0 6px 16px rgba(15,35,52,.05)!important
}
.content-wrap{padding-top:8px!important}
.grid{gap:12px}.mt-18{margin-top:12px!important}.mt-14{margin-top:10px!important}
.card,
body.design-academy-soft .card,
body.design-portal-cards .card,
body.design-clean-compact .card,
body.design-executive .card{
    border-radius:18px!important;padding:14px!important;
    background:rgba(255,255,255,.94)!important;border:1px solid rgba(218,226,235,.92)!important;
    box-shadow:0 12px 30px rgba(15,35,52,.055)!important;
}
.card:before,
body.design-academy-soft .card:before,
body.design-clean-compact .card:before{display:none!important}
.card-title{margin-bottom:10px}.card-title h2,.card-title h3{font-size:15px!important}.card-title p{font-size:11.8px!important;color:var(--muted)!important}
.stat-card,
body.design-academy-soft .stat-card,
body.design-portal-cards .stat-card,
body.design-clean-compact .stat-card{min-height:78px!important;align-items:center!important;flex-direction:row!important;border-left:0!important}
.stat-card .label{font-size:10.8px!important;letter-spacing:.05em}.stat-card .value{font-size:23px!important}.stat-card .hint{font-size:11.5px!important}
.stat-icon,
body.design-portal-cards .stat-icon{position:static!important;width:39px!important;height:39px!important;border-radius:12px!important;font-size:12px!important;background:var(--line-2)!important;color:var(--navy)!important;box-shadow:none!important}
.form-row,.form-row.three{gap:10px!important}.form-group{gap:5px}.form-group label{font-size:11.8px!important}
.form-control{min-height:39px!important;border-radius:11px!important;padding:8px 11px!important;font-size:13px!important;background:#fff!important}
textarea.form-control{min-height:68px!important}
.btn,.logout-btn{font-size:12.2px!important}.btn{border-radius:10px!important;padding:8px 11px!important}.btn-small{padding:6px 9px!important;font-size:11.8px!important}
.search-box{gap:8px!important}.search-box input,.search-box select{min-height:38px!important;border-radius:11px!important}
.table-wrap{border-radius:14px!important;border-color:var(--line)!important;box-shadow:none!important}
.data-table{font-size:12.5px!important}.data-table th{padding:9px 11px!important;font-size:11px!important;letter-spacing:.045em}.data-table td{padding:9px 11px!important}
.badge{border-radius:999px!important;padding:4px 8px!important;font-size:11px!important;font-weight:850!important}
.empty-state{padding:20px 12px!important;color:var(--muted)!important}
.sidebar{box-shadow:8px 0 26px rgba(15,35,52,.09)!important}.nav-menu{gap:5px}.nav-link{padding:9px 10px!important;border-radius:12px!important;font-size:12.6px!important}.brand-mark{width:40px!important;height:40px!important;border-radius:13px!important}.brand-text strong{font-size:13.5px!important}
.guide-fab{right:18px!important;bottom:18px!important;padding:11px 15px!important;border-radius:999px!important;font-size:12.5px!important;z-index:50!important;box-shadow:0 14px 32px rgba(15,35,52,.22)!important}
.guide-modal{border-radius:20px!important;padding:20px!important}.modal-close{right:14px!important;top:12px!important}
@media(max-width:820px){
    .main-area,body.sidebar-collapsed .main-area{padding:11px!important}
    .topbar{padding:2px 0 10px!important;gap:10px!important}
    .topbar h1{font-size:17px!important}.top-actions{margin-left:auto}.logout-btn{padding:7px 10px!important;min-height:34px!important}
    .content-wrap{padding-top:6px!important}.card{padding:12px!important;border-radius:16px!important}.data-table{min-width:680px}.guide-fab{right:13px!important;bottom:13px!important;padding:10px 13px!important}
}