:root{--bg:#f4f7fb;--card:#fff;--accent:#2b6ef6;--muted:#6b7280;--shadow:0 8px 24px rgba(15,23,42,.06)}*{box-sizing:border-box}body,html,#root{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto}.app-root{min-height:100vh;background:linear-gradient(180deg,var(--bg),#eef4ff);display:flex;align-items:center;justify-content:center;padding:24px}.card-root{width:100%;max-width:460px;background:var(--card);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column}.brand{padding:18px;text-align:center;font-weight:700;color:#0f172a;background:linear-gradient(90deg,#eef7ff,#fff)}.card{padding:28px}.title{text-align:center;margin:0 0 18px;font-size:18px}.form{display:flex;flex-direction:column;gap:12px}.label{display:flex;flex-direction:column;font-size:13px;color:var(--muted)}.label input{margin-top:6px;padding:10px 12px;border-radius:8px;border:1px solid #e6eefc;font-size:15px}.btn{margin-top:8px;padding:12px;border-radius:10px;border:0;background:var(--accent);color:#fff;font-weight:600;cursor:pointer}.foot{padding:12px 16px;text-align:center;background:#fbfdff;color:var(--muted);font-size:13px;border-top:1px solid #eef2ff}.logo{height:120px;object-fit:contain}@media(max-width:480px){.card-root{margin:8px;border-radius:8px}}.dashboard-container{display:flex;min-height:100vh;background:#eef4ff}.collapse-btn{background:#fff;border:none;padding:6px 10px;border-radius:6px;cursor:pointer;margin-bottom:12px}.menu{list-style:none;padding:0}.submenu{padding-left:18px;opacity:.8}.main-content{display:flex;flex-direction:column;flex:1;padding:24px;min-height:100vh}.page-title{font-size:22px;margin-bottom:16px}.section{margin-bottom:30px}.header{display:flex;align-items:center;gap:14px;margin-bottom:25px}.header-logo{height:100px}.cards{display:flex;gap:16px}.card{background:#fff;padding:18px;border-radius:12px;box-shadow:0 4px 10px #0000001a;margin-top:16px}.logout-btn{margin-left:auto;background:#ef4444;color:#fff;border:none;padding:8px 14px;border-radius:8px;cursor:pointer;font-weight:700;transition:.2s}.logout-btn:hover{background:#dc2626}.profile-area{position:relative;margin-left:auto;cursor:pointer}.profile-icon img{width:42px;height:42px;border-radius:50%;border:2px solid #2b6ef6;object-fit:cover;transition:.2s}.profile-icon:hover img{transform:scale(1.05)}.dropdown-menu{position:absolute;top:55px;right:0;background:#fff;width:170px;padding:12px;border-radius:10px;box-shadow:0 4px 16px #00000026;animation:fadeIn .15s ease;z-index:10}.dropdown-title{margin:0 0 6px;font-size:14px;font-weight:700;color:#2b6ef6;border-bottom:1px solid #e5e7eb;padding-bottom:6px}.dropdown-item{width:100%;padding:8px 10px;background:#f3f4f6;border:none;border-radius:6px;cursor:pointer;text-align:left;margin-top:6px;transition:.2s}.dropdown-item:hover{background:#e5e7eb}.dropdown-role{font-size:12px;color:#6b7280}.table{width:100%;border-collapse:collapse;margin-top:10px}.table th{background:#f1f5ff;padding:10px;text-align:left;border-bottom:2px solid #dbe4ff}.table td{padding:10px;border-bottom:1px solid #e5e7eb}.status{padding:6px 10px;border-radius:8px;font-size:13px;color:#fff}.status-diproses{background:#3b82f6}.btn-primary{display:inline-block!important;width:fit-content!important;background:#2b6ef6;color:#fff;padding:10px 16px;border:none;border-radius:8px;cursor:pointer;margin-bottom:12px}.btn-primary:hover{background:#1e50b5}.btn-secondary{background:#9ca3af;color:#fff;padding:10px 16px;border:none;border-radius:8px;cursor:pointer;margin-left:10px}.btn-secondary:hover{background:#6b7280}.form-konseling{display:flex;flex-direction:column;gap:12px}.form-konseling input,.form-konseling textarea{padding:10px;border-radius:8px;border:1px solid #d5d9df}.form-container{background:#fff;padding:24px;border-radius:12px;box-shadow:0 4px 12px #0000000d;margin-top:16px;max-width:100%}.form-title{font-size:20px;font-weight:600;margin-bottom:20px;color:#1e293b}.form-grid{display:flex;flex-direction:column;gap:16px}.form-group{display:flex;flex-direction:column}.form-group label{font-weight:500;margin-bottom:6px;color:#374151}.form-group input,.form-group textarea{padding:10px 12px;font-size:15px;border:1px solid #d1d5db;border-radius:8px;outline:none}.form-group input:focus,.form-group textarea:focus{border-color:#2b6ef6;box-shadow:0 0 0 1px #2b6ef6}.form-buttons{display:flex;gap:12px;margin-top:10px}.btn-primary-sm{background:#2b6ef6;border:none;color:#fff;padding:6px 12px;border-radius:6px;font-weight:500;font-size:14px;cursor:pointer;width:fit-content}.btn-primary-sm:hover{background:#1f4fc4}.btn-secondary-sm{flex:1;background:#9ca3af;border:none;color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;cursor:pointer}.btn-secondary-sm:hover{background:#6b7280}.status-select{padding:6px 10px;border-radius:6px;border:1px solid #d1d5db;background:#fff;cursor:pointer}.status-select:focus{outline:none;border-color:#2b6ef6;box-shadow:0 0 0 1px #2b6ef6}.btn-delete{background:#ef4444;color:#fff;padding:6px 12px;border:none;border-radius:6px;cursor:pointer;font-size:14px}.btn-delete:hover{background:#dc2626}.btn-detail{background:#14b8a6;color:#fff;padding:6px 10px;border:none;border-radius:8px;cursor:pointer;text-decoration:none;font-size:14px}.btn-detail:hover{background:#0d9488}.detail-icon-btn{padding:6px 8px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;transition:.2s ease}.detail-icon-btn svg{width:16px;height:16px;transform:translateY(1px)}.detail-icon-btn:hover{background:#c7d2fe}.detail-icon-btn svg{transition:.2s ease}.detail-icon-btn:hover svg{stroke:#1d4ed8;transform:scale(1.1)}.footer-premium{width:100%;background:linear-gradient(to right,#1e3a8a,#1e40af,#1e3a8a);padding:18px 0;text-align:center;color:#f8fafc;font-family:Inter,sans-serif;margin-top:auto;box-shadow:0 -4px 14px #00000040;position:relative;overflow:hidden}.footer-premium:before{content:"";position:absolute;top:0;left:0;height:2px;width:100%;background:#fff3}.footer-premium:after{content:"";position:absolute;bottom:0;left:50%;transform:translate(-50%);width:80%;height:120px;background:radial-gradient(circle,rgba(255,255,255,.08),transparent 70%);pointer-events:none}.footer-content{z-index:2;position:relative}.footer-title{font-size:16px;font-weight:600;letter-spacing:.5px}.footer-sub{font-size:13px;opacity:.8;margin-top:3px}.modal-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:#0000008c;display:flex;justify-content:center;align-items:center;z-index:100}.modal-box{background:#fff;padding:24px;border-radius:12px;width:95%;max-width:500px;box-shadow:0 8px 24px #00000040;animation:fadeIn .2s ease-in-out;position:relative}.modal-close{position:absolute;top:12px;right:12px;background:#ef4444;color:#fff;padding:4px 10px;border:none;border-radius:6px;cursor:pointer}.modal-close:hover{background:#dc2626}.detail-header{display:flex;justify-content:space-between;gap:24px;margin-bottom:12px}.detail-info p{margin:4px 0}.detail-status-block{display:flex;flex-direction:column;align-items:flex-end;gap:8px}.detail-divider{border:none;border-top:1px solid #e5e7eb;margin:16px 0}.detail-section-title{font-size:18px;font-weight:600;margin-bottom:10px}.note-form{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}.note-form textarea{padding:10px 12px;border-radius:8px;border:1px solid #d1d5db;font-size:14px;resize:vertical}.note-form textarea:focus{outline:none;border-color:#2b6ef6;box-shadow:0 0 0 1px #2b6ef6}.note-form-actions{display:flex;justify-content:flex-end}.note-list{margin-top:4px}.note-empty{margin:4px 0;color:#6b7280}.note-item{padding:10px 0;border-bottom:1px solid #e5e7eb}.note-item:last-child{border-bottom:none}.note-meta{font-size:12px;color:#6b7280;margin-bottom:4px}.note-body{font-size:14px;line-height:1.4}.detail-actions{display:flex;justify-content:flex-end;margin-top:18px}.detail-info{display:flex;flex-direction:column;gap:6px}.info-row{display:flex;gap:10px}.info-label{width:120px;font-weight:600;color:#1f2937}.info-value{flex:1;color:#374151}.detail-info-premium{display:flex;flex-direction:column;gap:14px;background:#f8fafc;padding:20px;border-radius:12px;border:1px solid #e2e8f0;box-shadow:0 2px 8px #0000000d;width:80%}.info-row-premium{display:grid;grid-template-columns:150px 15px 1fr;align-items:start;font-size:15px}.info-label-premium{font-weight:600;color:#1e3a8a}.info-separator-premium{font-weight:700;color:#1e3a8a}.info-value-premium{background:#fff;padding:8px 12px;border-radius:8px;border:1px solid #dbe4f0;color:#334155;line-height:1.5;box-shadow:inset 0 1px 2px #0000000d}.info-value-premium:hover{background:#f1f5fb;border-color:#c8d3e0}.status-premium-block{display:flex;flex-direction:column;align-items:flex-end;gap:10px}.status-badge-premium{padding:6px 14px;font-weight:600;color:#fff;border-radius:30px;font-size:14px;text-align:center;width:fit-content;box-shadow:0 2px 6px #00000026}.status-menunggu{background:#f59e0b}.status-diproses{background:#2563eb}.status-selesai{background:#10b981}.status-dropdown-wrapper{position:relative;width:150px}.status-dropdown-premium{width:100%;padding:10px 12px;border-radius:10px;border:2px solid #d1d5db;background:#fff;appearance:none;font-size:14px;font-weight:500;cursor:pointer;transition:.2s;box-shadow:0 2px 5px #00000014}.status-dropdown-premium:hover{border-color:#2b6ef6}.status-dropdown-premium:focus{border-color:#2b6ef6;box-shadow:0 0 0 2px #2b6ef64d;outline:none}.dropdown-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:10px;pointer-events:none;color:#475569}.detail-header-premium{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin-bottom:20px}.status-control{display:flex;flex-direction:column;align-items:flex-end;gap:6px}.status-control-label{font-size:13px;font-weight:600;color:#1e3a8a}.sidebar-pro{width:230px;max-width:230px;min-height:100vh;background:#1e3a8a;color:#fff;padding:18px 12px;display:flex;flex-direction:column;box-shadow:4px 0 12px #00000026;position:relative;transition:max-width .35s ease;overflow:visible}.sidebar-pro.collapsed{width:70px!important;min-width:70px!important;max-width:70px!important;overflow:visible!important}.collapse-pro{background:#1e40af;border:none;padding:8px 10px;border-radius:6px;cursor:pointer;margin-bottom:20px;display:flex;justify-content:center;transition:background .2s ease}.collapse-pro:hover{background:#1d4ed8}.menu-pro{list-style:none;padding:0;margin:0}.menu-pro li{margin-bottom:6px}.menu-pro li a.menu-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;text-decoration:none;color:#fff;font-size:15px;font-weight:500;transition:background .2s ease,padding-left .2s ease}.menu-pro li a.menu-item:hover{background:#fff3;padding-left:16px}.menu-pro li.active a.menu-item{background:#2563eb;font-weight:600;box-shadow:0 2px 6px #00000040}.sidebar-pro.collapsed .menu-pro li.active a{padding-left:12px!important;justify-content:center!important}.sidebar-pro.collapsed .menu-pro li a{padding:10px!important;justify-content:center!important}.menu-pro li a:hover svg{transform:scale(1.12);transition:.15s}.menu-pro li.active a svg{filter:brightness(1.35)}.menu-title{font-size:12px;opacity:.7;text-transform:uppercase;margin:14px 0 4px;padding-left:4px}.sidebar-pro.collapsed span{display:none!important;width:0!important}.sidebar-pro.collapsed .menu-title{display:none!important;height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}.sidebar-pro.collapsed .menu-pro li a{justify-content:center;padding:5px}.sidebar-pro.collapsed .menu-item{position:relative}.sidebar-pro.collapsed .menu-item:after{content:attr(data-tooltip);position:absolute;left:50px;top:50%;transform:translateY(-50%);background:#000000d9;color:#fff;padding:6px 14px;font-size:13px;border-radius:6px;white-space:nowrap;opacity:0;pointer-events:none;transition:.2s ease;z-index:9999}.sidebar-pro.collapsed .menu-item:before{content:"";position:absolute;left:32px;top:50%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent rgba(0,0,0,.85) transparent transparent;opacity:0;transition:.2s ease}.sidebar-pro.collapsed .menu-item:hover:after,.sidebar-pro.collapsed .menu-item:hover:before{opacity:1}.sidebar-pro.collapsed .menu-pro li{height:48px;display:flex;align-items:center;justify-content:center}.header-premium{width:100%;background:linear-gradient(to right,#1e3a8a,#1e40af,#2563eb);padding:14px 24px;border-radius:12px;color:#fff;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 12px #00000026;margin-bottom:20px;position:sticky;top:0;z-index:50}.header-left{display:flex;align-items:center;gap:14px}.header-logo-premium{height:58px;width:58px;border-radius:12px;object-fit:contain;background:#fff;padding:6px;box-shadow:0 3px 6px #fff3}.header-title-group{display:flex;flex-direction:column;color:#fff}.header-title{font-size:20px;font-weight:600;margin:0}.header-subtitle{font-size:13px;opacity:.85;margin-top:-2px}.profile-area-premium{position:relative;cursor:pointer}.profile-icon-premium img{width:46px;height:46px;border-radius:50%;border:3px solid rgba(255,255,255,.4);box-shadow:0 0 12px #ffffff40;transition:.2s}.profile-icon-premium:hover img{transform:scale(1.06);border-color:#fff}.dropdown-menu-premium{position:absolute;top:50px;right:0;background:#fff;width:200px;border-radius:12px;padding:14px;box-shadow:0 6px 20px #0000002e;animation:fadeIn .18s ease}.dropdown-user-info{border-bottom:1px solid #e5e7eb;padding-bottom:8px;margin-bottom:10px;color:#1e3a8a}.dropdown-user-info strong{font-size:15px}.dropdown-user-info span{display:block;font-size:12px;color:#64748b}.dropdown-item-premium{background:#ef4444;width:100%;color:#fff;border:none;padding:10px;border-radius:8px;cursor:pointer;transition:.2s;font-weight:500}.dropdown-item-premium:hover{background:#dc2626}@keyframes fadeIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}.cards{display:flex;gap:20px;flex-wrap:wrap}.card-stat{flex:1;min-width:260px;background:linear-gradient(135deg,#fff,#f3f6ff);padding:20px 22px;border-radius:16px;box-shadow:0 6px 18px #00000014;border:1px solid #e3e9f6;display:flex;align-items:center;gap:18px;transition:.25s}.card-stat:hover{transform:translateY(-4px);box-shadow:0 12px 26px #0000001f}.card-icon{width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;font-weight:700}.stat-wait{background:#f59e0b}.stat-process{background:#3b82f6}.stat-done{background:#10b981}.card-stat-title{font-size:15px;color:#475569}.card-stat-value{font-size:28px;font-weight:700;margin-top:4px}.chart-card{background:#fff;padding:24px;border-radius:18px;border:1px solid #e6e9f2;box-shadow:0 6px 16px #00000012;margin-top:20px}.chart-card h3{margin-bottom:12px;font-size:18px;font-weight:600;color:#1e293b}.notif-card{background:#fff;padding:20px;border-radius:16px;border:1px solid #e4e8f3;box-shadow:0 6px 16px #0000000f;margin-top:20px}.notif-card ul{margin-top:10px;padding-left:20px;line-height:1.7;font-size:15px}.header-right{display:flex;align-items:center;gap:20px;position:relative}.notif-wrapper{position:relative;cursor:pointer;font-size:22px}.notif-bell{font-size:22px}.notif-badge{position:absolute;top:-6px;right:-6px;background:red;color:#fff;padding:2px 6px;font-size:10px;border-radius:50%}.notif-dropdown{position:absolute;top:60px;right:10px;width:280px;background:#fff;color:#1f2937;border-radius:12px;padding:16px;box-shadow:0 8px 24px #00000026;z-index:9999}.notif-item{border-left:3px solid #3b82f6;padding-left:10px;margin-bottom:12px}.notif-item b{display:block;margin-bottom:2px;color:#1e3a8a}.notif-dropdown small{color:#6b7280}.notif-item:last-child{border-bottom:none}.notif-empty{text-align:center;color:#666}.select-premium{width:100%;padding:10px 12px;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;font-size:15px;color:#1e293b;outline:none;transition:.2s ease;appearance:none;cursor:pointer}.select-premium::-ms-expand{display:none}.select-premium:focus{border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f640}.select-wrapper{position:relative;width:100%}.select-wrapper .select-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;font-size:14px;color:#475569}