:root{--brand:#7c3aed;--brand-2:#6d28d9;--brand-3:#4c1d95;--accent:#c084fc;--accent-2:#ede9fe;--accent-soft:rgba(124,58,237,.14);--dark:#241339;--dark2:#3b2460;--bg:#f7f4ff;--text:#28223a;--muted:#7c728b;--white:#fff;--footer-height:58px}*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{zoom:.90;background:radial-gradient(circle at top left,rgba(124,58,237,.12),transparent 34%),var(--bg);font-size:14px;color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;overflow-x:hidden}.brandbar{height:68px;background:linear-gradient(120deg,var(--brand-3),var(--brand),#a855f7);color:#fff;position:fixed;top:0;left:0;right:0;z-index:1200;box-shadow:0 16px 40px rgba(76,29,149,.22);border-bottom:1px solid rgba(255,255,255,.14)}.brand-title{font-weight:950;font-size:23px;letter-spacing:.2px;color:#fff;text-decoration:none;display:flex;align-items:center}.brand-title:before{content:"K";display:inline-grid;place-items:center;width:40px;height:40px;margin-right:10px;border-radius:15px;background:linear-gradient(135deg,#f0abfc,#c084fc);box-shadow:0 10px 24px rgba(192,132,252,.35);color:#4c1d95;font-weight:950}.user-chip{font-weight:800;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.20);padding:8px 13px;border-radius:999px;backdrop-filter:blur(8px);gap:7px}.logout-btn,.sidebar-toggle{width:42px;height:42px;display:grid;place-items:center;color:#fff;text-decoration:none;border-radius:14px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}.logout-btn:hover,.sidebar-toggle:hover{color:#fff;background:linear-gradient(135deg,#c084fc,#f0abfc);transform:translateY(-1px)}.sidebar-toggle{padding:0!important;cursor:pointer}.sidebar{position:fixed;top:68px;bottom:0;left:0;width:265px;background:linear-gradient(180deg,#241339 0%,#341a57 58%,#1d102e 100%);color:#e9d5ff;z-index:1100;overflow:auto;transition:.25s ease;box-shadow:18px 0 42px rgba(76,29,149,.18)}.sidebar-profile{margin:16px 14px 8px;padding:14px;display:flex;gap:12px;align-items:center}.sidebar-profile .avatar{width:45px;height:45px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--brand),#c084fc);box-shadow:0 12px 22px rgba(124,58,237,.25)}.sidebar-profile strong{display:block;color:#fff;font-weight:950}.sidebar-profile span{display:block;font-size:.78rem;color:#d8b4fe}.sidebar-nav{padding:8px 14px 24px}.nav-item{display:flex;align-items:center;gap:12px;text-decoration:none;color:#e9d5ff;border-radius:17px;padding:12px 13px;margin:7px 0;font-weight:850;border:1px solid transparent}.nav-item i{font-size:1.15rem}.nav-item:hover,.nav-item.active{color:#fff;background:linear-gradient(135deg,rgba(124,58,237,.42),rgba(216,180,254,.16));border-color:rgba(216,180,254,.22);box-shadow:0 10px 20px rgba(0,0,0,.12)}.content-shell{margin-left:265px;padding:96px 24px 86px;min-height:100vh}.page-title{font-weight:950;color:#2e1649;letter-spacing:-.03em}.page-subtitle{color:var(--muted);font-weight:650}.glass-card{background:rgba(255,255,255,.92);border:1px solid rgba(124,58,237,.14);border-radius:24px;box-shadow:0 22px 48px rgba(76,29,149,.12);overflow:hidden}.card-pad{padding:24px}.hero-card{position:relative;overflow:hidden;background:linear-gradient(135deg,#6d28d9,#8b5cf6 58%,#c084fc);border-radius:26px;color:#fff;box-shadow:0 24px 56px rgba(124,58,237,.24)}.hero-card:after{content:"";position:absolute;right:-70px;top:-100px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.16)}.hero-card h1{font-weight:950}.stat-card{border-radius:22px;background:#fff;border:1px solid rgba(124,58,237,.13);box-shadow:0 16px 34px rgba(76,29,149,.10);padding:20px;height:100%}.stat-icon{width:48px;height:48px;border-radius:17px;display:grid;place-items:center;background:var(--accent-soft);color:var(--brand);font-size:1.35rem}.stat-number{font-weight:950;font-size:2rem;color:#3b2460}.btn-violet{background:linear-gradient(135deg,var(--brand),#a855f7);border:0;color:#fff;font-weight:900;border-radius:14px;padding:10px 15px;box-shadow:0 10px 20px rgba(124,58,237,.20)}.btn-violet:hover{color:#fff;background:linear-gradient(135deg,var(--brand-2),var(--brand));transform:translateY(-1px)}.btn-soft{background:#f3e8ff;color:#6d28d9;border:1px solid #ddd6fe;font-weight:850;border-radius:14px}.form-control,.form-select{border-radius:14px;border:1px solid rgba(124,58,237,.22);min-height:44px}.form-control:focus,.form-select:focus{border-color:rgba(124,58,237,.55);box-shadow:0 0 0 .2rem rgba(124,58,237,.12)}.form-label{font-weight:850;color:#3b2460}.table{vertical-align:middle}.table thead th{white-space:nowrap;background:#f3e8ff!important;color:#4c1d95;font-weight:900}.badge-normal{background:#dcfce7;color:#166534}.badge-warning{background:#fef3c7;color:#92400e}.badge-orange{background:#ffedd5;color:#9a3412}.badge-danger{background:#fee2e2;color:#991b1b}.question-row{padding:16px;border:1px solid rgba(124,58,237,.13);border-radius:18px;background:#fff;margin-bottom:12px}.question-number{width:34px;height:34px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#c084fc);color:#fff;display:inline-grid;place-items:center;font-weight:950;flex:0 0 auto}.answer-pill{border:1px solid #ddd6fe;background:#faf5ff;border-radius:999px;padding:8px 12px;font-weight:850;cursor:pointer}.answer-pill input{margin-right:6px}.filter-box{background:#faf5ff;border:1px solid #ddd6fe;border-radius:22px;padding:16px}.footer{position:fixed;left:265px;right:0;bottom:0;height:var(--footer-height);background:linear-gradient(90deg,#4c1d95,#7c3aed,#a855f7);color:#fff;display:flex;align-items:center;justify-content:center;z-index:1050;box-shadow:0 -10px 28px rgba(76,29,149,.16)}.footer strong{font-weight:950}.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 10% 10%,rgba(192,132,252,.40),transparent 32%),linear-gradient(135deg,#f7f4ff,#ede9fe)}.login-card{width:min(960px,calc(100% - 28px));display:grid;grid-template-columns:1.05fr .95fr;background:#fff;border-radius:30px;box-shadow:0 30px 70px rgba(76,29,149,.22);overflow:hidden;border:1px solid rgba(124,58,237,.16)}.login-brand{background:linear-gradient(135deg,#4c1d95,#7c3aed,#c084fc);color:#fff;padding:44px;position:relative;overflow:hidden}.login-brand:after{content:"";position:absolute;right:-70px;bottom:-70px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.14)}.login-brand h1{font-size:3.2rem;font-weight:950}.login-form{padding:44px}.print-only{display:none}@media(max-width:991.98px){body{zoom:1}.sidebar{left:-280px}.sidebar.show{left:0}.content-shell{margin-left:0;padding:88px 14px 86px}.footer{left:0}.login-card{grid-template-columns:1fr}.login-brand{padding:32px}.login-form{padding:30px}}@media print{body{zoom:1;background:#fff}.brandbar,.sidebar,.footer,.no-print{display:none!important}.content-shell{margin:0;padding:0}.glass-card{box-shadow:none;border:0}.print-only{display:block}.btn,.filter-box{display:none!important}}

/* =========================================================
   UI UPDATE: sidebar expand/collapse, submenu instrumen,
   hero dashboard violet dengan ilustrasi konseling berhijab.
   Rule fungsi lama tetap dipertahankan.
========================================================= */
.sidebar-backdrop{position:fixed;inset:68px 0 0 0;background:rgba(15,7,32,.45);z-index:1090;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;backdrop-filter:blur(3px)}
.sidebar{transition:width .28s cubic-bezier(.2,.8,.2,1),left .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease}.content-shell,.footer{transition:margin-left .28s cubic-bezier(.2,.8,.2,1),left .28s cubic-bezier(.2,.8,.2,1)}
.nav-parent{width:100%;border:0;text-align:left;background:transparent}.nav-parent:hover{cursor:pointer}.submenu-caret{margin-left:auto;font-size:.86rem;transition:transform .22s ease}.nav-group.open .submenu-caret{transform:rotate(180deg)}.submenu{display:grid;gap:6px;margin:2px 0 8px 22px;padding-left:13px;border-left:1px dashed rgba(216,180,254,.35);animation:submenuDrop .22s ease both}.submenu[hidden]{display:none}.submenu-item{display:flex;align-items:center;gap:10px;text-decoration:none;color:#ddd6fe;border-radius:14px;padding:10px 11px;font-weight:800;border:1px solid transparent}.submenu-item i{font-size:1rem}.submenu-item:hover,.submenu-item.active{color:#fff;background:linear-gradient(135deg,rgba(192,132,252,.30),rgba(124,58,237,.22));border-color:rgba(216,180,254,.20)}
@keyframes submenuDrop{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes softFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
.hero-visual{min-height:330px;padding:34px 38px!important;isolation:isolate}.hero-visual:after{display:none}.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:8px 13px;margin-bottom:16px;color:#fff;font-weight:900;backdrop-filter:blur(8px)}.hero-visual h1,.hero-visual p,.hero-visual .btn{position:relative;z-index:2}.hero-image-wrap{position:relative;z-index:2;border-radius:30px;padding:10px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.20);box-shadow:0 24px 60px rgba(46,22,73,.24);animation:softFloat 5.5s ease-in-out infinite}.hero-image{display:block;width:100%;height:auto;border-radius:24px}.hero-orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.16);filter:blur(.2px);z-index:1}.hero-orb-one{width:130px;height:130px;left:43%;top:26px}.hero-orb-two{width:88px;height:88px;left:30px;bottom:26px;background:rgba(34,211,238,.22)}.btn-hero-outline{background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.35);color:#fff;font-weight:900}.btn-hero-outline:hover{background:rgba(255,255,255,.24);color:#fff;transform:translateY(-1px)}.glass-card,.stat-card,.hero-card{animation:fadeSlideUp .45s ease both}.stat-card:nth-child(2){animation-delay:.04s}.stat-card:nth-child(3){animation-delay:.08s}.stat-card:nth-child(4){animation-delay:.12s}
body.sidebar-collapsed .sidebar{width:86px}body.sidebar-collapsed .content-shell{margin-left:86px}body.sidebar-collapsed .footer{left:86px}body.sidebar-collapsed .sidebar-profile{justify-content:center;padding:14px 6px}body.sidebar-collapsed .profile-copy,body.sidebar-collapsed .nav-item span,body.sidebar-collapsed .submenu-item span,body.sidebar-collapsed .submenu-caret{opacity:0;width:0;overflow:hidden;white-space:nowrap}body.sidebar-collapsed .nav-item{justify-content:center;padding:13px 10px}body.sidebar-collapsed .nav-item i{font-size:1.25rem}body.sidebar-collapsed .submenu{margin-left:0;padding-left:0;border-left:0}body.sidebar-collapsed .submenu-item{justify-content:center;padding:11px 9px}body.sidebar-collapsed .brand-title:after{content:'Menu diperkecil';position:absolute;left:76px;top:70px;background:#2e1649;color:#fff;padding:6px 10px;border-radius:999px;font-size:.72rem;font-weight:800;opacity:0;pointer-events:none;transform:translateY(-6px);transition:.22s ease}body.sidebar-collapsed .sidebar:hover{width:265px}body.sidebar-collapsed .sidebar:hover .profile-copy,body.sidebar-collapsed .sidebar:hover .nav-item span,body.sidebar-collapsed .sidebar:hover .submenu-item span,body.sidebar-collapsed .sidebar:hover .submenu-caret{opacity:1;width:auto;overflow:visible}body.sidebar-collapsed .sidebar:hover .nav-item{justify-content:flex-start;padding:12px 13px}body.sidebar-collapsed .sidebar:hover .submenu{margin:2px 0 8px 22px;padding-left:13px;border-left:1px dashed rgba(216,180,254,.35)}
@media(max-width:991.98px){.sidebar-backdrop.show{opacity:1;visibility:visible}.sidebar{width:280px}.sidebar.show{left:0;box-shadow:24px 0 58px rgba(15,7,32,.28)}body.sidebar-collapsed .sidebar{width:280px}body.sidebar-collapsed .content-shell{margin-left:0}body.sidebar-collapsed .footer{left:0}body.sidebar-collapsed .profile-copy,body.sidebar-collapsed .nav-item span,body.sidebar-collapsed .submenu-item span,body.sidebar-collapsed .submenu-caret{opacity:1;width:auto;overflow:visible}body.sidebar-collapsed .nav-item{justify-content:flex-start;padding:12px 13px}body.sidebar-collapsed .submenu{margin:2px 0 8px 22px;padding-left:13px;border-left:1px dashed rgba(216,180,254,.35)}.hero-visual{padding:26px 22px!important}.hero-image-wrap{margin-top:8px}.hero-orb-one{left:auto;right:24px}.hero-orb-two{display:none}}
@media(max-width:575.98px){.hero-visual h1{font-size:1.85rem}.hero-kicker{font-size:.78rem}.hero-image-wrap{border-radius:22px;padding:6px}.hero-image{border-radius:18px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* === KLIK PATCH V3: paksa sidebar baru, submenu instrumen, hero image, animasi === */
.sidebar-toggle{width:auto;min-width:46px;padding:0 12px!important;gap:7px;font-weight:900;transition:transform .22s ease,background .22s ease,box-shadow .22s ease}.sidebar-toggle .toggle-label{font-size:.78rem;letter-spacing:.2px}.sidebar-toggle:hover{box-shadow:0 12px 24px rgba(216,180,254,.28)}
.nav-group{position:relative}.nav-parent{width:100%;border:0;background:transparent;text-align:left;cursor:pointer}.nav-parent .submenu-caret{margin-left:auto;transition:transform .22s ease}.nav-group.open .submenu-caret{transform:rotate(180deg)}.submenu{margin:2px 0 8px 22px;padding-left:13px;border-left:1px dashed rgba(216,180,254,.35);animation:submenuDrop .22s ease both}.submenu[hidden]{display:none!important}.submenu-item{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:5px 0;border-radius:14px;text-decoration:none;color:#e9d5ff;font-weight:850;transition:background .22s ease,transform .22s ease}.submenu-item:hover,.submenu-item.active{background:rgba(192,132,252,.20);color:#fff;transform:translateX(3px)}
.hero-visual{min-height:320px;background:linear-gradient(135deg,#6d28d9 0%,#8b5cf6 45%,#a855f7 100%)!important}.hero-image-wrap{position:relative;z-index:2;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:30px;padding:10px;box-shadow:0 24px 54px rgba(36,19,57,.20);animation:heroFloat 4.8s ease-in-out infinite}.hero-image{display:block;width:100%;height:auto;max-height:300px;object-fit:contain;border-radius:24px;background:rgba(255,255,255,.08)}.hero-kicker{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);padding:8px 12px;border-radius:999px;font-weight:900;margin-bottom:12px}.hero-orb{position:absolute;border-radius:999px;filter:blur(.2px);animation:orbPulse 5s ease-in-out infinite}.hero-orb-one{width:110px;height:110px;right:40%;top:22px;background:rgba(255,255,255,.12)}.hero-orb-two{width:74px;height:74px;right:30px;bottom:26px;background:rgba(34,211,238,.22)}
.glass-card,.stat-card,.hero-card{animation:fadeSlideUp .45s ease both}.btn,.nav-item,.submenu-item,.stat-card{transition:transform .2s ease,box-shadow .2s ease,background .2s ease}.btn:hover,.stat-card:hover{transform:translateY(-2px)}.btn-danger{border-radius:12px;font-weight:800}.js-delete-form .btn-danger{box-shadow:0 8px 18px rgba(220,53,69,.18)}
body.sidebar-collapsed .sidebar{width:86px}body.sidebar-collapsed .content-shell{margin-left:86px}body.sidebar-collapsed .footer{left:86px}body.sidebar-collapsed .sidebar-profile{justify-content:center;padding:14px 6px}body.sidebar-collapsed .profile-copy,body.sidebar-collapsed .nav-item span,body.sidebar-collapsed .submenu-item span,body.sidebar-collapsed .submenu-caret{opacity:0;width:0;overflow:hidden;white-space:nowrap}body.sidebar-collapsed .nav-item{justify-content:center;padding:13px 10px}body.sidebar-collapsed .nav-item i{font-size:1.25rem}body.sidebar-collapsed .submenu{margin-left:0;padding-left:0;border-left:0}body.sidebar-collapsed .submenu-item{justify-content:center;padding:11px 9px}body.sidebar-collapsed .sidebar:hover{width:265px}body.sidebar-collapsed .sidebar:hover .profile-copy,body.sidebar-collapsed .sidebar:hover .nav-item span,body.sidebar-collapsed .sidebar:hover .submenu-item span,body.sidebar-collapsed .sidebar:hover .submenu-caret{opacity:1;width:auto;overflow:visible}body.sidebar-collapsed .sidebar:hover .nav-item{justify-content:flex-start;padding:12px 13px}body.sidebar-collapsed .sidebar:hover .submenu{margin:2px 0 8px 22px;padding-left:13px;border-left:1px dashed rgba(216,180,254,.35)}
@keyframes submenuDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes heroFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes orbPulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.08);opacity:1}}@keyframes fadeSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:991.98px){.sidebar{left:-292px}.content-shell{margin-left:0;padding:92px 14px 86px}.footer{left:0}.sidebar-backdrop{position:fixed;inset:68px 0 0;background:rgba(15,7,32,.54);z-index:1090;opacity:0;visibility:hidden;transition:.22s ease}.sidebar-backdrop.show{opacity:1;visibility:visible}.sidebar.show{left:0}.sidebar-toggle .toggle-label{display:none}.hero-visual{padding:24px!important}.hero-image{max-height:240px}}
.result-pill{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-weight:850;font-size:.86rem;white-space:nowrap}.result-pill-stress{background:#f3e8ff;color:#6d28d9;border:1px solid #ddd6fe}.result-pill-hope{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}@media(max-width:768px){.result-pill{white-space:normal}}

/* === KLIK PATCH V5: hero baru + hasil terbaru dashboard mengikuti style laporan === */
.hero-image-wide{
    padding:0!important;
    overflow:hidden;
    background:rgba(255,255,255,.10);
}
.hero-image-wide .hero-image{
    width:100%;
    min-height:245px;
    max-height:360px;
    object-fit:cover;
    object-position:center;
    border-radius:24px;
}
.latest-results-card .card-pad{
    padding:22px 22px 18px;
}
.latest-results-table thead th{
    font-size:.82rem;
    letter-spacing:.01em;
}
.latest-results-table tbody td{
    padding-top:14px;
    padding-bottom:14px;
}
.result-pill{
    display:inline-flex;
    align-items:center;
    flex-wrap:wrap;
    gap:6px;
    min-height:34px;
    padding:7px 10px;
    border-radius:999px;
    font-weight:900;
    line-height:1.1;
    border:1px solid rgba(124,58,237,.13);
    box-shadow:0 8px 18px rgba(76,29,149,.08);
}
.result-pill .result-score{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:3px 8px;
    background:rgba(255,255,255,.72);
    color:#35165f;
}
.result-pill .result-category{
    color:#35165f;
}
.result-pill-stress{
    background:linear-gradient(135deg,#f3e8ff,#ede9fe);
}
.result-pill-hope{
    background:linear-gradient(135deg,#e0f2fe,#f3e8ff);
}
.empty-test{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:6px 10px;
    border-radius:999px;
    background:#f8fafc;
    color:#8a7a99;
    border:1px dashed #ddd6fe;
    font-weight:850;
}
.action-icon-group{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    flex-wrap:wrap;
}
.action-icon-btn{
    width:34px;
    height:34px;
    min-width:34px;
    border:0;
    border-radius:13px;
    display:inline-grid;
    place-items:center;
    text-decoration:none;
    cursor:pointer;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
    box-shadow:0 8px 18px rgba(76,29,149,.13);
}
.action-icon-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 12px 22px rgba(76,29,149,.18);
}
.action-view{
    color:#fff;
    background:linear-gradient(135deg,var(--brand),#a855f7);
}
.action-view:hover{
    color:#fff;
    background:linear-gradient(135deg,var(--brand-2),var(--brand));
}
.action-view-soft{
    color:#4c1d95;
    background:linear-gradient(135deg,#e9d5ff,#f5f3ff);
    border:1px solid #ddd6fe;
}
.action-view-soft:hover{
    color:#3b0764;
    background:linear-gradient(135deg,#ddd6fe,#f3e8ff);
}
.action-delete{
    color:#991b1b;
    background:linear-gradient(135deg,#fee2e2,#fff1f2);
    border:1px solid #fecaca;
}
.action-delete:hover{
    color:#fff;
    background:linear-gradient(135deg,#dc2626,#f97316);
}
.btn-icon-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:38px;
    padding:8px 13px;
}
@media(max-width:991.98px){
    .hero-image-wide .hero-image{min-height:210px;max-height:300px}
    .action-icon-group{justify-content:flex-start}
}
@media(max-width:575.98px){
    .hero-image-wide .hero-image{min-height:170px}
    .latest-results-card .card-pad{padding:18px 14px}
}


/* === KLIK PATCH V6: toggle kanan logo, dropdown hapus, template cetak === */
.brand-left{min-width:0}.brand-left .sidebar-toggle{flex:0 0 42px}.brand-title{position:relative}.sidebar-toggle i{font-size:1.35rem;line-height:1}.action-delete-dropdown .dropdown-menu{border:1px solid rgba(124,58,237,.14);border-radius:16px;box-shadow:0 18px 36px rgba(46,22,73,.18);padding:8px;min-width:210px}.action-delete-dropdown .dropdown-header{font-size:.75rem;font-weight:950;color:#4c1d95;padding:6px 10px}.action-delete-option{width:100%;border:0;background:transparent;border-radius:12px;padding:9px 10px;display:flex;align-items:center;gap:9px;text-align:left;font-weight:850;color:#6b1f2a}.action-delete-option:hover{background:#fff1f2;color:#991b1b}.action-delete-option i{font-size:1rem}.action-separator{height:1px;background:#f1e7ff;margin:6px 4px}.latest-results-table .action-icon-btn,.table .action-icon-btn{font-size:1rem}.hero-image-wide{background:rgba(255,255,255,.08)}.hero-image-wide .hero-image{object-fit:cover;object-position:center right}.print-template-body{background:#e8fbfb;margin:0}.print-toolbar{position:sticky;top:0;z-index:20;background:#0f4f55;color:#fff;padding:10px 14px;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.18)}.print-toolbar button{border:0;border-radius:999px;padding:9px 18px;font-weight:900;background:#f2c94c;color:#0f4f55}.print-sheet{width:210mm;min-height:297mm;margin:0 auto;position:relative;overflow:hidden;background:#fff;box-shadow:0 10px 35px rgba(0,0,0,.18)}.print-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}.print-overlay{position:relative;z-index:2;padding:104mm 22mm 25mm 22mm}.print-letter-title{font-size:14pt;font-weight:900;color:#0f4f55;margin:0 0 7mm}.print-letter-text{width:92mm;color:#1f2937;font-size:10.4pt;line-height:1.42}.print-meta-grid{display:grid;grid-template-columns:28mm 1fr;gap:2mm 4mm;margin:5mm 0 6mm;font-size:9.8pt}.print-score-box{margin-top:5mm;border-left:4px solid #d7a91b;background:rgba(255,255,255,.82);border-radius:0 14px 14px 0;padding:4mm 5mm;width:112mm}.print-score-box h2{margin:0 0 3mm;color:#0f4f55;font-size:15pt}.print-score-box .score-big{font-size:22pt;font-weight:950;color:#0f4f55}.print-recommendation{width:112mm;margin-top:5mm;background:rgba(255,255,255,.76);border:1px solid rgba(15,79,85,.13);border-radius:16px;padding:5mm;font-size:10pt;line-height:1.42}.print-signature{position:absolute;right:25mm;bottom:31mm;width:60mm;color:#0f4f55;font-size:10pt}.print-signature .script{font-family:"Brush Script MT","Segoe Script",cursive;font-size:25pt;line-height:1.1;color:#0f4f55;margin:2mm 0}.print-date{position:absolute;left:22mm;bottom:62mm;color:#0f4f55;font-weight:900}.print-answer-page{width:210mm;min-height:297mm;margin:0 auto;background:#fff;padding:16mm 18mm 20mm;page-break-before:always}.print-answer-page h2{color:#0f4f55;margin:0 0 2mm}.print-answer-page table{width:100%;border-collapse:collapse;font-size:9.2pt}.print-answer-page th{background:#e6f5f5;color:#0f4f55}.print-answer-page th,.print-answer-page td{border:1px solid #bddada;padding:6px;vertical-align:top}@media print{.print-toolbar{display:none}.print-template-body{background:#fff}.print-sheet,.print-answer-page{box-shadow:none;margin:0;width:210mm;min-height:297mm}.print-sheet{page-break-after:always}body{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}@page{size:A4;margin:0}}

/* === KLIK PATCH V7: toggle logo Klik, popup hapus, tabel search-pagination, template cetak final === */
.brand-toggle-logo{
    appearance:none;
    border:0;
    background:transparent;
    padding:0;
    cursor:pointer;
}
.brand-toggle-logo:hover{color:#fff;transform:translateY(-1px)}
.brand-toggle-logo:focus-visible{outline:3px solid rgba(255,255,255,.45);outline-offset:4px;border-radius:18px}
.brand-toggle-logo:after{
    content:"";
    width:7px;
    height:7px;
    margin-left:8px;
    border-radius:999px;
    background:#f0abfc;
    box-shadow:0 0 0 5px rgba(240,171,252,.18);
    transition:.2s ease;
}
body.sidebar-collapsed .brand-toggle-logo:after{background:#34d399;box-shadow:0 0 0 5px rgba(52,211,153,.18)}

.smart-table-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    flex-wrap:wrap;
    background:linear-gradient(135deg,#faf5ff,#f8f7ff);
    border:1px solid #eadcff;
    border-radius:20px;
    padding:12px;
    margin:10px 0 15px;
}
.smart-table-toolbar.compact{padding:10px;margin-top:0}
.smart-search{position:relative;flex:1 1 280px;min-width:220px}
.smart-search i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:#7c3aed;z-index:1}
.smart-search .form-control{padding-left:40px;background:#fff;box-shadow:0 8px 18px rgba(76,29,149,.05)}
.smart-length{display:flex;align-items:center;gap:8px;color:#4c1d95;font-weight:850;white-space:nowrap}
.smart-length .form-select{width:98px;min-height:40px;background:#fff}
.smart-table-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    margin:12px 0 22px;
    color:#5b4a6d;
    font-weight:750;
}
.smart-pagination{display:flex;align-items:center;gap:8px}
.smart-page-btn{
    width:36px;height:36px;border:0;border-radius:13px;
    display:grid;place-items:center;background:linear-gradient(135deg,#ede9fe,#faf5ff);
    color:#5b21b6;box-shadow:0 8px 18px rgba(76,29,149,.10);
}
.smart-page-btn:not(:disabled):hover{transform:translateY(-2px);background:linear-gradient(135deg,#7c3aed,#a855f7);color:#fff}
.smart-page-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.smart-page-current{background:#fff;border:1px solid #eadcff;border-radius:999px;padding:7px 12px;color:#4c1d95}

.delete-choice-modal .modal-content{
    border:0;
    border-radius:28px;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#fbf7ff);
    box-shadow:0 30px 70px rgba(46,22,73,.26);
}
.delete-choice-modal .modal-body{padding:24px;text-align:center;position:relative}
.delete-choice-modal .modal-body:before{
    content:"";position:absolute;inset:0 0 auto 0;height:86px;background:linear-gradient(135deg,#7c3aed,#c084fc);z-index:0;
}
.delete-modal-icon{
    width:64px;height:64px;border-radius:22px;display:grid;place-items:center;margin:28px auto 12px;
    background:#fff;color:#dc2626;font-size:1.55rem;position:relative;z-index:1;
    box-shadow:0 14px 28px rgba(76,29,149,.22);
}
.delete-modal-title{font-weight:950;color:#2e1649;margin-bottom:6px;position:relative;z-index:1}
.delete-modal-text{color:#6b5d77;margin-bottom:16px;position:relative;z-index:1}
.delete-choice-btn{
    width:100%;border:0;border-radius:18px;padding:12px 14px;margin-bottom:9px;
    display:flex;align-items:center;justify-content:center;gap:9px;font-weight:950;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.delete-choice-btn:hover{transform:translateY(-2px);box-shadow:0 14px 24px rgba(76,29,149,.15)}
.delete-choice-stress{background:linear-gradient(135deg,#fee2e2,#fff1f2);color:#991b1b}
.delete-choice-hope{background:linear-gradient(135deg,#ede9fe,#f5f3ff);color:#4c1d95}
.delete-modal-form[hidden]{display:none!important}

.print-template-body{background:#dff4f3;margin:0;font-family:Inter,Arial,sans-serif;color:#142c33}
.print-toolbar{position:sticky;top:0;z-index:20;background:#00454d;color:#fff;padding:10px 14px;text-align:center;box-shadow:0 8px 20px rgba(0,0,0,.18)}
.print-toolbar button{border:0;border-radius:999px;padding:10px 20px;font-weight:950;background:#f5c542;color:#06464f;display:inline-flex;align-items:center;gap:8px}
.print-template-v7{padding:0!important;position:relative;min-height:297mm}
.print-header-left{position:absolute;left:42mm;top:37mm;width:82mm;color:#06464f}
.print-psy-name{font-size:15pt;font-weight:950;line-height:1.15}
.print-psy-role{font-size:10.5pt;letter-spacing:.18em;text-transform:uppercase;margin-top:2mm;color:#234d55}
.print-psy-email{font-size:9.5pt;margin-top:5mm;color:#234d55}
.print-header-right{position:absolute;right:22mm;top:38mm;width:82mm;text-align:left;color:#06464f;font-size:10pt;font-weight:800;line-height:1.45}
.print-campus{font-size:30pt;font-weight:950;letter-spacing:.02em;color:#0b0f16;line-height:1}
.print-template-v7 .print-letter-title{position:absolute;left:22mm;top:93mm;margin:0;color:#06464f;font-size:15pt;font-weight:950}
.print-template-v7 .print-letter-text{position:absolute;left:22mm;top:105mm;width:96mm;font-size:10.1pt;line-height:1.48;color:#1f2937}
.print-template-v7 .print-meta-grid{grid-template-columns:28mm 1fr;gap:1.8mm 3mm;margin:4mm 0 5mm;font-size:9.4pt}
.print-template-v7 .print-score-box{position:absolute;left:22mm;top:181mm;width:92mm;margin:0;border-left:4px solid #d7a91b;background:rgba(255,255,255,.84);border-radius:0 16px 16px 0;padding:4mm 5mm;box-shadow:0 10px 22px rgba(13,79,85,.08)}
.print-template-v7 .print-score-box h2{font-size:13pt;color:#06464f;margin:0 0 2mm}
.print-template-v7 .print-score-box .score-big{font-size:20pt;color:#06464f}
.print-template-v7 .print-recommendation{position:absolute;left:22mm;top:216mm;width:100mm;max-height:40mm;overflow:hidden;margin:0;background:rgba(255,255,255,.72);border:1px solid rgba(15,79,85,.12);border-radius:16px;padding:4mm;font-size:9.2pt;line-height:1.36}
.print-template-v7 .print-date{position:absolute;left:22mm;bottom:62mm;color:#06464f;font-weight:950}
.print-template-v7 .print-signature{position:absolute;right:25mm;bottom:31mm;width:60mm;color:#06464f;font-size:10pt;text-align:left}
.print-template-v7 .print-signature .script{font-family:"Brush Script MT","Segoe Script",cursive;font-size:25pt;line-height:1.1;color:#06464f;margin:2mm 0;border-bottom:2px solid #e3b51e;padding-bottom:1mm}
@media(max-width:991.98px){
    .smart-table-toolbar{align-items:stretch}.smart-search{flex-basis:100%}.smart-length{width:100%;justify-content:space-between}.smart-table-footer{justify-content:center;text-align:center}.brand-title{font-size:20px}
}
@media print{
    .print-toolbar{display:none!important}
    .print-template-body{background:#fff!important}
    .print-template-v7 .print-recommendation{overflow:hidden}
}

/* === KLIK PATCH V8: 90% viewport, data client, template cetak tidak tumpang tindih === */
html{font-size:90%;}
body{zoom:1;}
.klik-app-shell .content-shell{transform:scale(.90);transform-origin:top left;width:111.111%;min-height:111.111vh;padding-bottom:120px;}
.klik-app-shell .footer{transform:scale(.90);transform-origin:bottom left;width:111.111%;}
@supports not (zoom: 1){body{font-size:90%;}}
.client-age-chip{display:inline-flex;align-items:center;border-radius:999px;padding:4px 9px;background:#f3e8ff;color:#5b21b6;font-weight:900;white-space:nowrap}

/* Template cetak memakai background blank terbaru dan layout mengalir agar konten tidak bertumpuk */
.print-sheet{width:210mm;min-height:297mm;margin:0 auto;position:relative;overflow:hidden;background:#fff;box-shadow:0 10px 35px rgba(0,0,0,.18)}
.print-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.print-overlay.print-template-v7{position:relative!important;z-index:2!important;min-height:297mm!important;padding:34mm 22mm 30mm 22mm!important;color:#123f46!important;display:flex;flex-direction:column;gap:5mm}
.print-template-v7 .print-header-left,.print-template-v7 .print-header-right,.print-template-v7 .print-letter-title,.print-template-v7 .print-letter-text,.print-template-v7 .print-score-box,.print-template-v7 .print-recommendation,.print-template-v7 .print-date,.print-template-v7 .print-signature{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:auto!important;margin:0!important;max-height:none!important;overflow:visible!important}
.print-template-v7 .print-header-left{width:98mm!important;color:#06464f!important;margin-bottom:4mm!important}
.print-template-v7 .print-header-right{display:none!important}
.print-template-v7 .print-psy-name{font-size:15pt!important;font-weight:950!important;line-height:1.1!important}
.print-template-v7 .print-psy-role{font-size:9.5pt!important;letter-spacing:.14em!important;text-transform:uppercase!important;color:#335f66!important;margin-top:1mm!important}
.print-template-v7 .print-psy-email{font-size:9pt!important;color:#335f66!important;margin-top:3mm!important}
.print-template-v7 .print-letter-title{font-size:15pt!important;font-weight:950!important;color:#06464f!important;margin-top:3mm!important;margin-bottom:3mm!important}
.print-template-v7 .print-letter-text{width:105mm!important;font-size:9.8pt!important;line-height:1.38!important;color:#1f2937!important;margin-bottom:2mm!important}
.print-template-v7 .print-letter-text p{margin:0 0 3mm!important}
.print-template-v7 .print-meta-grid{display:grid!important;grid-template-columns:28mm 1fr!important;gap:1.5mm 3mm!important;margin:3mm 0!important;font-size:9.3pt!important;line-height:1.25!important}
.print-template-v7 .print-score-box{width:104mm!important;border-left:4px solid #d7a91b!important;background:rgba(255,255,255,.84)!important;border-radius:0 14px 14px 0!important;padding:4mm 5mm!important;box-shadow:0 10px 22px rgba(13,79,85,.08)!important;page-break-inside:avoid!important}
.print-template-v7 .print-score-box h2{font-size:13pt!important;color:#06464f!important;margin:0 0 2mm!important}
.print-template-v7 .print-score-box .score-big{font-size:20pt!important;font-weight:950!important;color:#06464f!important;line-height:1!important}
.print-template-v7 .print-recommendation{width:112mm!important;background:rgba(255,255,255,.78)!important;border:1px solid rgba(15,79,85,.12)!important;border-radius:16px!important;padding:4mm!important;font-size:9.1pt!important;line-height:1.32!important;page-break-inside:avoid!important}
.print-template-v7 .print-date{margin-top:auto!important;color:#06464f!important;font-weight:950!important}
.print-template-v7 .print-signature{align-self:flex-end!important;width:60mm!important;color:#06464f!important;font-size:10pt!important;text-align:left!important;margin-top:2mm!important}
.print-template-v7 .print-signature .script{font-family:"Brush Script MT","Segoe Script",cursive!important;font-size:24pt!important;line-height:1.05!important;color:#06464f!important;margin:2mm 0!important;border-bottom:2px solid #e3b51e!important;padding-bottom:1mm!important}
@media print{html{font-size:100%}.klik-app-shell .content-shell,.klik-app-shell .footer{transform:none!important;width:auto!important}.print-overlay.print-template-v7{padding:34mm 22mm 30mm 22mm!important}.print-template-v7 .print-letter-text{font-size:9.8pt!important}.print-template-v7 .print-recommendation{font-size:9.1pt!important}}

/* PATCH V8 final: seluruh aplikasi tampil 90% saat load, cetak tetap ukuran A4 normal */
body.klik-app-shell{zoom:.90;}
body.print-template-body{zoom:1!important;}
.klik-app-shell .content-shell{transform:none!important;width:auto!important;min-height:100vh!important;}
.klik-app-shell .footer{transform:none!important;width:auto!important;}
@media print{body.klik-app-shell,body.print-template-body{zoom:1!important}}

/* ===== V9: tabel hasil gabungan + tombol cetak + font ringkas ===== */
.compact-results-table{font-size:.79rem;line-height:1.18}
.compact-results-table th{font-size:.72rem;white-space:nowrap;letter-spacing:.01em}
.compact-results-table td{vertical-align:middle;padding:.52rem .55rem}
.combined-result-cell{min-width:245px;max-width:330px}
.combined-results-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;align-items:stretch}
.mini-result{border:1px solid rgba(124,58,237,.14);background:rgba(255,255,255,.72);border-radius:13px;padding:7px 8px;display:flex;flex-direction:column;gap:2px;min-width:0;box-shadow:0 7px 18px rgba(48,16,91,.07)}
.mini-result-label{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;font-weight:950;color:#5b21b6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-result-score{font-size:.78rem;font-weight:950;color:#2b1449;white-space:nowrap}
.mini-result-cat{font-size:.74rem;font-weight:850;color:#4b236f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mini-result small{font-size:.66rem;color:#6b7280;white-space:nowrap}
.mini-result-stress{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(249,231,255,.72));border-color:rgba(147,51,234,.18)}
.mini-result-hope{background:linear-gradient(135deg,rgba(255,255,255,.88),rgba(237,233,254,.76));border-color:rgba(99,102,241,.18)}
.mini-result-empty{background:rgba(248,250,252,.72);color:#94a3b8;border-style:dashed}
.action-print{background:linear-gradient(135deg,#0ea5e9,#7c3aed)!important;color:#fff!important;box-shadow:0 8px 18px rgba(14,165,233,.22)}
.action-print:hover{transform:translateY(-1px) scale(1.04);filter:brightness(1.04)}
.latest-results-table .action-icon-group,.compact-results-table .action-icon-group{gap:5px;justify-content:center;flex-wrap:nowrap}
.latest-results-table .action-icon-btn,.compact-results-table .action-icon-btn{width:31px;height:31px;border-radius:11px;font-size:.86rem}
@media(max-width:991.98px){.combined-result-cell{min-width:260px}.compact-results-table{font-size:.76rem}.combined-results-wrap{grid-template-columns:1fr}}
@media print{.compact-results-table{font-size:8pt!important}.combined-results-wrap{grid-template-columns:1fr!important}.mini-result{box-shadow:none!important;background:#fff!important;border-color:#ddd!important}.action-icon-group,.smart-table-toolbar,.smart-table-footer{display:none!important}}

/* ===== V9: cetak gabungan Stress + Putus Asa ===== */
.print-template-combined{display:flex!important;flex-direction:column!important;gap:3mm!important;padding:29mm 22mm 26mm 22mm!important;overflow:hidden!important}
.print-template-combined .print-header-left{margin-bottom:2mm!important}
.print-template-combined .print-letter-title{margin-top:1mm!important;margin-bottom:1.5mm!important;font-size:14.5pt!important}
.print-template-combined .print-letter-text{width:113mm!important;font-size:8.7pt!important;line-height:1.24!important;margin-bottom:0!important}
.print-template-combined .print-letter-text p{margin:0 0 2mm!important}
.print-template-combined .print-meta-grid{font-size:8.2pt!important;grid-template-columns:26mm 1fr!important;gap:1mm 2.5mm!important;margin:2mm 0!important;line-height:1.18!important}
.print-combined-results{width:116mm!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:3mm!important;page-break-inside:avoid!important;z-index:2!important}
.print-combined-card{background:rgba(255,255,255,.86)!important;border:1px solid rgba(15,79,85,.13)!important;border-left:3px solid #d7a91b!important;border-radius:12px!important;padding:3mm!important;box-shadow:0 8px 18px rgba(13,79,85,.08)!important;min-height:45mm!important;overflow:hidden!important;color:#12343a!important}
.print-combined-card h2{font-size:10.8pt!important;font-weight:950!important;color:#06464f!important;margin:0 0 2mm!important;display:flex!important;gap:1.5mm!important;align-items:center!important}
.print-score-line{display:flex!important;justify-content:space-between!important;gap:3mm!important;font-size:8.4pt!important;border-bottom:1px dashed rgba(6,70,79,.18)!important;padding:1mm 0!important}
.print-score-line strong{font-size:10pt!important;color:#06464f!important}
.print-score-date{font-size:7.7pt!important;color:#315c63!important;margin:1.2mm 0 2mm!important}
.print-card-recommendation{font-size:7.8pt!important;line-height:1.2!important;color:#1f2937!important;max-height:25mm!important;overflow:hidden!important}
.print-card-notes{font-size:7.6pt!important;line-height:1.16!important;margin-top:1.5mm!important;color:#334155!important;max-height:10mm!important;overflow:hidden!important}
.print-empty-result{font-size:9pt!important;font-weight:850!important;color:#64748b!important;padding:6mm 0!important;text-align:center!important}
.print-closing-text{font-size:8.2pt!important;line-height:1.18!important;margin-top:0!important}
.print-template-combined .print-date{font-size:9pt!important;margin-top:auto!important}
.print-template-combined .print-signature{font-size:8.8pt!important;width:56mm!important;margin-top:0!important}
.print-template-combined .print-signature .script{font-size:21pt!important;margin:1mm 0!important}
@media print{.print-template-combined{padding:29mm 22mm 26mm 22mm!important}.print-combined-card{box-shadow:none!important}.print-combined-results{grid-template-columns:1fr 1fr!important}}
/* V10: lampiran cetak gabungan dan aksi user - mempertahankan style violet */
.print-combined-appendix{padding:18mm 16mm!important;background:#fff!important;color:#102a2f!important}
.print-combined-appendix h2{font-size:16pt!important;font-weight:950!important;color:#06464f!important;margin:0 0 2mm!important}
.print-combined-appendix h3{font-size:12pt!important;font-weight:950!important;color:#06464f!important;margin:6mm 0 1.8mm!important;padding-left:3mm!important;border-left:3px solid #d7a91b!important}
.print-appendix-summary{font-size:9pt!important;margin:0 0 2mm!important;color:#37565b!important}
.print-appendix-block{page-break-inside:auto!important;margin-bottom:6mm!important}
.print-appendix-block table{width:100%!important;border-collapse:collapse!important;font-size:8.6pt!important;line-height:1.25!important}
.print-appendix-block th{background:#eaf6f5!important;color:#06464f!important;font-weight:900!important;border:1px solid #b7d8d5!important;padding:2mm!important;text-align:left!important}
.print-appendix-block td{border:1px solid #cfe5e3!important;padding:1.8mm 2mm!important;vertical-align:top!important}
.action-icon-danger{background:rgba(220,53,69,.10)!important;color:#b42333!important;border-color:rgba(220,53,69,.16)!important}
.action-icon-danger:hover{background:#dc3545!important;color:#fff!important}
@media print{.print-combined-appendix{page-break-before:always!important}.print-appendix-block table{font-size:8pt!important}.print-appendix-block th,.print-appendix-block td{padding:1.5mm!important}}

/* PRINT APPENDIX V11: setiap instrumen dipisah ke halaman lampiran sendiri. */
.print-appendix-instrument-page{page-break-before:always!important;break-before:page!important;padding-top:18mm!important}
.print-appendix-block-single{margin-top:6mm!important;margin-bottom:0!important}
.print-appendix-block-single table{page-break-inside:auto!important;break-inside:auto!important}
.print-appendix-block-single thead{display:table-header-group!important}
.print-appendix-block-single tr{page-break-inside:avoid!important;break-inside:avoid!important}
@media print{.print-appendix-instrument-page{page-break-before:always!important;break-before:page!important;padding-top:18mm!important}.print-appendix-block-single{margin-top:6mm!important}.print-appendix-block-single thead{display:table-header-group!important}.print-appendix-block-single tr{page-break-inside:avoid!important;break-inside:avoid!important}}

/* === KLIK PATCH V12: landing page + role-based login === */
.landing-page{
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(15,79,85,.18), transparent 28%),
        linear-gradient(135deg,#e7fbfb 0%,#f7f4ff 42%,#efe7ff 100%);
    color:#14343d;
    zoom:1;
    overflow-x:hidden;
}
.landing-nav{
    width:min(1180px,calc(100% - 28px));
    min-height:76px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    position:relative;
    z-index:5;
}
.landing-logo{
    display:inline-flex;
    align-items:center;
    gap:12px;
    color:#06464f;
    text-decoration:none;
    font-size:1.42rem;
    font-weight:950;
}
.landing-logo span{
    width:44px;
    height:44px;
    border-radius:17px;
    display:grid;
    place-items:center;
    color:#fff;
    background:linear-gradient(135deg,#06464f,#0f777e);
    box-shadow:0 14px 28px rgba(6,70,79,.22);
}
.landing-nav-actions{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    justify-content:flex-end;
}
.landing-nav-link{
    color:#06464f;
    font-weight:900;
    text-decoration:none;
    padding:9px 12px;
    border-radius:999px;
}
.landing-nav-link:hover{
    color:#0f777e;
    background:rgba(255,255,255,.72);
}
.landing-shell{
    width:min(1180px,calc(100% - 28px));
    margin:0 auto 34px;
}
.landing-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);
    align-items:center;
    gap:26px;
    min-height:calc(100vh - 155px);
}
.landing-copy{
    position:relative;
    z-index:2;
    animation:fadeSlideUp .55s ease both;
}
.landing-badge{
    display:inline-flex;
    align-items:center;
    gap:9px;
    padding:9px 14px;
    border-radius:999px;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(6,70,79,.12);
    color:#06464f;
    font-weight:950;
    box-shadow:0 12px 28px rgba(6,70,79,.08);
    margin-bottom:18px;
}
.landing-copy h1{
    font-size:clamp(2.15rem,5vw,4.35rem);
    line-height:1.02;
    letter-spacing:-.06em;
    font-weight:950;
    color:#06464f;
    margin:0 0 18px;
}
.landing-copy p{
    font-size:1.08rem;
    line-height:1.72;
    color:#385a61;
    max-width:640px;
    margin-bottom:24px;
    font-weight:650;
}
.landing-actions{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px;
}
.btn-landing-primary,
.btn-landing-secondary{
    min-height:48px;
    border-radius:17px;
    padding:12px 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    text-decoration:none;
    font-weight:950;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}
.btn-landing-primary{
    color:#fff;
    background:linear-gradient(135deg,#06464f,#0f777e);
    box-shadow:0 14px 26px rgba(6,70,79,.22);
}
.btn-landing-primary:hover{
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 18px 32px rgba(6,70,79,.26);
}
.btn-landing-secondary{
    color:#4c1d95;
    background:#fff;
    border:1px solid rgba(124,58,237,.14);
    box-shadow:0 12px 24px rgba(76,29,149,.10);
}
.btn-landing-secondary:hover{
    color:#fff;
    background:linear-gradient(135deg,#7c3aed,#a855f7);
    transform:translateY(-2px);
}
.landing-feature-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.landing-feature-row span{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 12px;
    border-radius:999px;
    color:#06464f;
    background:rgba(255,255,255,.70);
    border:1px solid rgba(6,70,79,.10);
    font-weight:900;
}
.landing-feature-row i{color:#0f777e}
.landing-visual{
    justify-self:end;
    width:min(440px,100%);
    aspect-ratio:3/4;
    border-radius:34px;
    overflow:hidden;
    background:#fff;
    border:1px solid rgba(6,70,79,.16);
    box-shadow:0 34px 80px rgba(6,70,79,.22);
    position:relative;
    animation:softFloat 6.2s ease-in-out infinite;
}
.landing-visual:before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(6,70,79,.06),transparent 42%,rgba(245,197,66,.08));
    z-index:1;
    pointer-events:none;
}
.landing-visual img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}
.landing-role-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    margin-top:-8px;
    padding-bottom:22px;
}
.landing-role-card{
    background:rgba(255,255,255,.82);
    border:1px solid rgba(6,70,79,.10);
    border-radius:26px;
    padding:22px;
    box-shadow:0 20px 44px rgba(6,70,79,.10);
    transition:.2s ease;
}
.landing-role-card:hover{
    transform:translateY(-4px);
    box-shadow:0 26px 56px rgba(6,70,79,.15);
}
.landing-role-card .role-icon{
    width:50px;
    height:50px;
    border-radius:18px;
    display:grid;
    place-items:center;
    background:linear-gradient(135deg,#06464f,#0f777e);
    color:#fff;
    font-size:1.35rem;
    margin-bottom:14px;
}
.landing-role-card h2{
    color:#06464f;
    font-weight:950;
    letter-spacing:-.03em;
    font-size:1.35rem;
}
.landing-role-card p{
    color:#526b70;
    font-weight:650;
    line-height:1.55;
    min-height:68px;
}
.landing-role-card a{
    color:#06464f;
    text-decoration:none;
    font-weight:950;
}
.landing-role-card a:hover{color:#7c3aed}
.landing-footer{
    text-align:center;
    color:#06464f;
    padding:18px;
    font-weight:700;
}
.landing-footer strong{font-weight:950}
.role-login-page{
    background:
        radial-gradient(circle at 88% 18%,rgba(245,197,66,.24),transparent 26%),
        radial-gradient(circle at 12% 12%,rgba(6,70,79,.22),transparent 30%),
        linear-gradient(135deg,#e7fbfb,#f7f4ff 56%,#ede9fe);
}
.role-login-card{
    grid-template-columns:1fr .88fr;
    max-width:980px;
}
.role-login-brand{
    background:linear-gradient(135deg,#06464f,#0f777e 54%,#7c3aed);
}
.admin-login .role-login-brand{
    background:linear-gradient(135deg,#241339,#4c1d95,#7c3aed);
}
.role-login-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    font-weight:950;
    border-radius:999px;
    padding:9px 13px;
    margin-bottom:16px;
}
.role-switch{
    color:#fff;
    text-decoration:none;
    border:1px solid rgba(255,255,255,.22);
    background:rgba(255,255,255,.12);
    border-radius:999px;
    padding:8px 12px;
    font-weight:900;
}
.role-switch:hover,.role-switch.active{
    color:#06464f;
    background:#fff;
}
.login-back-home{
    position:fixed;
    top:18px;
    left:18px;
    z-index:10;
    display:inline-flex;
    align-items:center;
    gap:8px;
    color:#06464f;
    background:rgba(255,255,255,.76);
    border:1px solid rgba(6,70,79,.10);
    text-decoration:none;
    font-weight:950;
    padding:10px 13px;
    border-radius:999px;
    box-shadow:0 12px 26px rgba(6,70,79,.10);
}
.login-back-home:hover{color:#7c3aed;background:#fff}
@media(max-width:991.98px){
    .landing-hero{grid-template-columns:1fr;min-height:auto;padding:18px 0 24px}
    .landing-copy{text-align:left}
    .landing-visual{justify-self:center;width:min(420px,100%)}
    .landing-role-grid{grid-template-columns:1fr}
    .landing-role-card p{min-height:0}
    .role-login-card{grid-template-columns:1fr;width:min(960px,calc(100% - 28px))}
    .login-back-home{position:static;margin:14px auto;display:flex;width:max-content}
}
@media(max-width:575.98px){
    .landing-nav{min-height:66px;width:calc(100% - 18px)}
    .landing-shell{width:calc(100% - 18px)}
    .landing-nav-actions .landing-nav-link{display:none}
    .landing-copy h1{font-size:2.15rem}
    .landing-copy p{font-size:1rem}
    .landing-actions a{width:100%}
    .landing-visual{border-radius:24px}
}

/* === KLIK PATCH V13: landing page gaya kartu alam, login tunggal, client isi instrumen === */
.landing-nature-page{
    min-height:100vh;
    background:radial-gradient(circle at 12% 18%,rgba(71,85,178,.20),transparent 22%),radial-gradient(circle at 95% 40%,rgba(124,58,237,.18),transparent 24%),linear-gradient(120deg,#050b3d 0%,#111746 48%,#25204f 100%);
    overflow-x:hidden;
}
.nature-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:54px 18px;
    position:relative;
}
.nature-shell:before,.nature-shell:after{
    content:"";
    position:fixed;
    border-radius:50%;
    background:rgba(255,255,255,.035);
    pointer-events:none;
    animation:naturePulse 7s ease-in-out infinite;
}
.nature-shell:before{width:420px;height:420px;left:-130px;top:70px}.nature-shell:after{width:560px;height:560px;right:-190px;bottom:-140px;animation-delay:1.4s}
.nature-card{
    width:min(1040px,94vw);
    min-height:650px;
    position:relative;
    overflow:hidden;
    border-radius:30px;
    background:#fff;
    box-shadow:0 38px 90px rgba(0,0,0,.38);
    animation:natureCardIn .72s cubic-bezier(.2,.8,.2,1) both;
}
.nature-nav{
    position:relative;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:22px;
    padding:36px 58px 12px;
}
.nature-brand{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#1b1744;
    text-decoration:none;
    font-weight:950;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.nature-brand-mark{
    width:30px;height:30px;border-radius:11px;display:grid;place-items:center;background:linear-gradient(135deg,#ff9d7b,#ffcfbc);color:#fff;box-shadow:0 8px 20px rgba(255,157,123,.28)
}
.nature-menu{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}.nature-menu a{color:#171737;text-decoration:none;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:900;padding:9px 13px;border-radius:999px;transition:.2s ease}.nature-menu a:hover,.nature-menu a.active{background:linear-gradient(135deg,#ff9d7b,#ffb99c);color:#fff;box-shadow:0 9px 18px rgba(255,157,123,.24)}.nature-menu .nature-login-link{background:#f7f4ff;color:#6d28d9;border:1px solid #eadcff;text-transform:none;letter-spacing:0;font-size:.82rem}.nature-content{position:relative;z-index:2;display:grid;grid-template-columns:38% 62%;align-items:center;min-height:500px;padding:10px 0 0 58px}.nature-copy{position:relative;z-index:3;animation:natureTextIn .8s .15s cubic-bezier(.2,.8,.2,1) both}.nature-kicker{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:7px 12px;background:#fff3ee;color:#f47b57;font-weight:950;font-size:.78rem;margin-bottom:18px}.nature-kicker.dark{background:#f3e8ff;color:#6d28d9}.nature-copy h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(2.6rem,5.1vw,4.7rem);line-height:.98;font-weight:950;color:#20194f;margin:0 0 22px;letter-spacing:-.04em}.nature-line{width:38px;height:5px;border-radius:999px;background:linear-gradient(90deg,#ff916d,#ffc2ad);margin:0 0 23px}.nature-copy p{font-size:.95rem;line-height:1.65;color:#2f3156;font-weight:650;max-width:330px}.nature-actions{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 20px}.nature-btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:13px;padding:12px 16px;font-weight:950;transition:.22s ease}.nature-btn.primary{background:linear-gradient(135deg,#ff916d,#ffb99c);color:#fff;box-shadow:0 14px 26px rgba(255,145,109,.28)}.nature-btn.secondary{background:#f6f2ff;color:#6d28d9;border:1px solid #e8dcff}.nature-btn:hover{transform:translateY(-3px)}.nature-client-strip{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:16px}.nature-client-strip a,.nature-client-strip span{display:inline-flex;align-items:center;gap:7px;text-decoration:none;font-weight:900;font-size:.78rem;color:#534878;background:#fff;border:1px solid #f1e8ff;border-radius:999px;padding:8px 11px;box-shadow:0 8px 20px rgba(39,23,84,.06)}.nature-client-strip a:hover{color:#fff;background:linear-gradient(135deg,#6d28d9,#a855f7)}.nature-visual{position:absolute;z-index:1;right:0;top:0;bottom:0;width:68%;overflow:hidden;border-top-right-radius:30px;border-bottom-right-radius:30px;animation:natureImageIn .85s .12s cubic-bezier(.2,.8,.2,1) both}.nature-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.78) 13%,rgba(255,255,255,.12) 37%,rgba(255,255,255,0) 60%);z-index:2;pointer-events:none}.nature-visual img{width:100%;height:100%;object-fit:cover;object-position:center right;filter:saturate(1.04)}.nature-bottom{position:absolute;left:58px;right:58px;bottom:34px;z-index:4;display:flex;align-items:center;gap:22px;flex-wrap:wrap}.nature-bottom span{display:inline-flex;align-items:center;gap:8px;color:#2b2854;font-weight:950}.nature-bottom i{color:#ff916d;font-size:1.35rem}.login-mini-features{display:flex;gap:8px;flex-wrap:wrap}.login-mini-features span{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.20);font-weight:850}.unified-login-card{animation:natureCardIn .62s cubic-bezier(.2,.8,.2,1) both}.client-public-page{min-height:100vh;background:radial-gradient(circle at 12% 12%,rgba(255,145,109,.25),transparent 28%),linear-gradient(135deg,#f7f4ff,#ede9fe);}.client-public-shell,.client-assessment-shell{width:min(1080px,calc(100% - 28px));margin:0 auto;padding:44px 0}.client-public-card{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:30px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(76,29,149,.20);border:1px solid rgba(124,58,237,.14);animation:natureCardIn .55s ease both}.client-public-hero{padding:40px;background:linear-gradient(135deg,#241339,#6d28d9,#c084fc);color:#fff;position:relative;overflow:hidden}.client-public-hero:after{content:"";position:absolute;right:-80px;bottom:-80px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.14)}.client-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;font-weight:950;margin-bottom:28px}.client-logo span{width:38px;height:38px;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}.client-public-hero h1{font-size:2.45rem;font-weight:950;letter-spacing:-.04em}.client-public-hero p{font-size:1rem;line-height:1.65;opacity:.92}.client-public-badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}.client-public-badges span{display:inline-flex;align-items:center;gap:7px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.18);font-weight:850}.client-public-form{padding:38px}.client-assessment-top{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:16px;color:#3b2460}.client-question-card{animation:fadeSlideUp .55s ease both}.client-done-card{max-width:760px;margin:70px auto;text-align:center;background:#fff;border-radius:32px;padding:44px;box-shadow:0 30px 70px rgba(76,29,149,.20);border:1px solid rgba(124,58,237,.14);animation:natureCardIn .55s ease both}.done-icon{width:82px;height:82px;margin:0 auto 18px;border-radius:28px;display:grid;place-items:center;background:linear-gradient(135deg,#dcfce7,#f0fdf4);color:#16a34a;font-size:2.5rem}.client-done-card h1{font-weight:950;color:#2e1649}.client-result-mini{border:1px solid #eadcff;background:#faf5ff;border-radius:18px;padding:14px;text-align:left}.client-result-mini strong{display:block;color:#4c1d95}.client-result-mini span{color:#6b5a79;font-weight:800}@keyframes naturePulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:.65}}@keyframes natureCardIn{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes natureTextIn{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}@keyframes natureImageIn{from{opacity:0;transform:translateX(28px)}to{opacity:1;transform:translateX(0)}}@media(max-width:991.98px){.nature-shell{padding:24px 12px}.nature-card{min-height:auto}.nature-nav{padding:24px 22px 10px;align-items:flex-start}.nature-content{display:block;padding:24px 22px 260px}.nature-copy p{max-width:520px}.nature-visual{top:auto;left:0;right:0;bottom:0;width:100%;height:285px;border-radius:0 0 30px 30px}.nature-visual:before{background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.52) 22%,rgba(255,255,255,0) 55%)}.nature-bottom{left:22px;right:22px;bottom:18px}.client-public-card{grid-template-columns:1fr}.client-public-hero,.client-public-form{padding:28px}.client-assessment-top{align-items:flex-start;flex-direction:column}}@media(max-width:575.98px){.nature-menu{gap:5px}.nature-menu a{font-size:.66rem;padding:7px 9px}.nature-copy h1{font-size:2.55rem}.nature-content{padding-bottom:245px}.nature-visual{height:250px}.nature-bottom{display:none}.client-public-shell,.client-assessment-shell{width:calc(100% - 16px);padding:18px 0}.client-done-card{padding:28px;margin:30px auto}}

/* Hotline Contact Styles */
.sidebar-hotline {
    margin-top: auto;
    padding: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.02);
}

.hotline-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6c757d;
    margin-bottom: 0.75rem;
}

.hotline-header i {
    font-size: 0.875rem;
}

.hotline-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.hotline-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    color: #495057;
    text-decoration: none;
    transition: all 0.2s ease;
    background: white;
    border: 1px solid #e9ecef;
}

.hotline-item:hover {
    background: #e7f1ff;
    border-color: #86b7fe;
    color: #0d6efd;
    transform: translateX(2px);
}

.hotline-item i {
    font-size: 1rem;
    width: 1.25rem;
    text-align: center;
}

.hotline-item i.bi-whatsapp {
    color: #25D366;
}

.hotline-item i.bi-telephone {
    color: #0d6efd;
}

.hotline-item i.bi-envelope {
    color: #dc3545;
}

/* Make sidebar flexible to push hotline to bottom */
.sidebar {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
}
/* Custom Scrollbar - Senada dengan Warna Layout */
/* Untuk Webkit browsers (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46a0 100%);
}

/* Scrollbar untuk Sidebar */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #a0aec0 0%, #718096 100%);
    border-radius: 10px;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
}

/* Scrollbar untuk Content Area */
.content-shell::-webkit-scrollbar {
    width: 10px;
}

.content-shell::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
}

.content-shell::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}

.content-shell::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a67d8 0%, #6b46a0 100%);
}

/* Scrollbar untuk Submenu */
.submenu::-webkit-scrollbar {
    width: 4px;
}

.submenu::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.03);
    border-radius: 10px;
}

.submenu::-webkit-scrollbar-thumb {
    background: #cbd5e0;
    border-radius: 10px;
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #764ba2 #e2e8f0;
}

.sidebar {
    scrollbar-width: thin;
    scrollbar-color: #a0aec0 #f1f1f1;
}

/* Untuk mode collapsed sidebar (jika ada) */
.sidebar.collapsed::-webkit-scrollbar {
    width: 3px;
}

/* Hover effect untuk semua scrollbar */
::-webkit-scrollbar-thumb {
    transition: all 0.3s ease;
}

/* Smooth scrolling untuk seluruh halaman */
html {
    scroll-behavior: smooth;
}

/* Optional: Scrollbar untuk tabel di dalam content */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}

.table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 10px;
}