*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--primary: #2563eb;--primary-dark: #1d4ed8;--primary-light: #dbeafe;--danger: #dc2626;--success: #16a34a;--warning: #f59e0b;--bg: #f0f2f5;--surface: #ffffff;--sidebar-bg: #1e293b;--sidebar-text: #cbd5e1;--sidebar-active: #2563eb;--navbar-bg: #ffffff;--border: #e2e8f0;--text: #1e293b;--text-muted: #64748b;--radius: 8px;--radius-lg: 12px;--shadow: 0 1px 3px rgba(0,0,0,.08);--shadow-lg: 0 4px 16px rgba(0,0,0,.1);--transition: all .2s ease}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}.layout{display:grid;grid-template-columns:240px 1fr;grid-template-rows:56px 1fr;height:100vh;overflow:hidden;transition:grid-template-columns .25s ease}.layout.sidebar-collapsed{grid-template-columns:64px 1fr}.topnavbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 1.25rem;background:var(--navbar-bg);border-bottom:1px solid var(--border);box-shadow:0 1px 4px #0000000a;position:sticky;top:0;z-index:100}.topnavbar-left{display:flex;align-items:center;gap:.75rem}.sidebar-toggle{background:none;border:none;padding:.4rem;border-radius:var(--radius);cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;transition:var(--transition)}.sidebar-toggle:hover{background:var(--bg);color:var(--text)}.brand-text{font-size:1.1rem;font-weight:700;color:var(--primary);letter-spacing:-.02em}.topnavbar-center{position:absolute;left:50%;transform:translate(-50%);display:flex;align-items:center}.topnavbar-clock{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,#f0f4ff,#e8f0fe);border:1px solid #d6e4f0;padding:5px 14px;border-radius:20px;font-size:.8rem;color:#1e40af;box-shadow:0 1px 3px #2563eb14;transition:box-shadow .2s ease;white-space:nowrap}.topnavbar-clock svg{flex-shrink:0;opacity:.6}.clock-time{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.3px}.clock-sep{color:#94a3b8;font-size:.7rem}.clock-date{color:#475569;font-size:.75rem}@media(max-width:900px){.topnavbar-center{display:none}}.topnavbar-right{position:relative;display:flex;align-items:center;gap:4px}.notif-wrapper{position:relative}.notif-btn{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;background:none;border-radius:var(--radius);cursor:pointer;color:var(--text-secondary);position:relative;transition:var(--transition)}.notif-btn:hover{background:var(--bg);color:var(--text)}.notif-badge{position:absolute;top:2px;right:2px;min-width:16px;height:16px;font-size:10px;font-weight:700;background:#ef4444;color:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1}.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:340px;background:#fff;border:1px solid #e2e8f0;border-radius:var(--radius);box-shadow:0 10px 40px #0000001f;z-index:1001;overflow:hidden}.notif-header{padding:12px 16px;font-weight:600;font-size:14px;border-bottom:1px solid #e2e8f0;background:#f8fafc}.notif-list{max-height:360px;overflow-y:auto}.notif-item{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;text-decoration:none;color:var(--text);border-bottom:1px solid #f1f5f9;transition:var(--transition)}.notif-item:hover{background:#f8fafc}.notif-icon{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.notif-text{font-size:13px;line-height:1.4;color:#475569}.notif-text strong{color:#1e293b}.notif-empty{padding:24px 16px;text-align:center;color:#94a3b8;font-size:14px}.profile-wrapper{position:relative}.profile-btn{display:flex;align-items:center;gap:.6rem;background:none;border:none;padding:.35rem .6rem;border-radius:var(--radius);cursor:pointer;transition:var(--transition)}.profile-btn:hover{background:var(--bg)}.avatar-sm{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:.8rem;flex-shrink:0}.profile-info{display:flex;flex-direction:column;align-items:flex-start;line-height:1.3}.profile-name{font-size:.85rem;font-weight:600;color:var(--text)}.profile-role{font-size:.72rem;color:var(--text-muted);text-transform:capitalize}.profile-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:260px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:200;overflow:hidden}.dropdown-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.1rem}.avatar-lg{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:1.1rem;flex-shrink:0}.dropdown-divider{height:1px;background:var(--border)}.dropdown-item{display:flex;align-items:center;gap:.6rem;padding:.65rem 1.1rem;font-size:.88rem;color:var(--text);text-decoration:none;cursor:pointer;background:none;border:none;width:100%;text-align:left;transition:var(--transition);font-family:inherit}.dropdown-item:hover{background:var(--bg);color:var(--primary)}.dropdown-item svg{flex-shrink:0;color:var(--text-muted)}.dropdown-item:hover svg{color:var(--primary)}.sidebar{grid-row:2;background:var(--sidebar-bg);padding:.75rem;display:flex;flex-direction:column;overflow-y:auto;min-height:0;transition:var(--transition)}.sidebar nav{display:flex;flex-direction:column;gap:2px}.sidebar nav a{display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border-radius:var(--radius);text-decoration:none;color:var(--sidebar-text);font-size:.88rem;font-weight:450;transition:var(--transition);white-space:nowrap}.sidebar nav a:hover{background:#ffffff14;color:#fff}.sidebar nav a.active{background:var(--sidebar-active);color:#fff;font-weight:500}.sidebar nav a svg{flex-shrink:0;opacity:.7}.sidebar nav a.active svg,.sidebar nav a:hover svg{opacity:1}.sidebar-collapsed .sidebar nav a span{display:none}.sidebar-collapsed .sidebar nav a{justify-content:center;padding:.65rem}.sidebar-version{margin-top:auto;padding:.6rem .75rem;font-size:.72rem;color:var(--sidebar-text);opacity:.5;text-align:center;border-top:1px solid rgba(255,255,255,.06)}.avatar-img{width:100%;height:100%;object-fit:cover;border-radius:50%}.main{grid-row:2;padding:1.5rem;overflow-y:auto;min-height:0;background:var(--bg)}.page-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem}.page-header h1{font-size:1.35rem;font-weight:700;letter-spacing:-.02em}.page-header p{font-size:.88rem;margin-top:.15rem}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow)}.card+.card{margin-top:1rem}.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}.stat-card{background:var(--surface);border-radius:var(--radius-lg);padding:1.25rem;display:flex;align-items:center;gap:1rem;border:1px solid var(--border);box-shadow:var(--shadow);transition:var(--transition)}.stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.stat-icon{width:48px;height:48px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;flex-shrink:0}.stat-blue .stat-icon{background:#dbeafe;color:#2563eb}.stat-green .stat-icon{background:#dcfce7;color:#16a34a}.stat-amber .stat-icon{background:#fef3c7;color:#f59e0b}.stat-purple .stat-icon{background:#ede9fe;color:#7c3aed}.stat-value{font-size:1.5rem;font-weight:700;line-height:1.2}.stat-label{font-size:.82rem;color:var(--text-muted)}.stat-shimmer{position:relative;overflow:hidden}.stat-shimmer:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);transform:translate(-100%);pointer-events:none;animation:statShimmer 3s ease-in-out infinite}@keyframes statShimmer{0%{transform:translate(-100%)}50%,to{transform:translate(100%)}}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1rem}.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:var(--shadow)}.chart-card h3{font-size:.92rem;font-weight:600;margin-bottom:1rem;color:var(--text)}table{width:100%;border-collapse:collapse;font-size:.88rem}th,td{padding:.65rem .75rem;text-align:left;border-bottom:1px solid var(--border)}th{font-weight:600;color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}tr:hover{background:#f8fafc}tr{transition:background .1s}.form-group{margin-bottom:1rem}.form-group label{display:block;font-size:.82rem;font-weight:500;margin-bottom:.3rem;color:var(--text-muted)}.form-group input,.form-group select,.form-group textarea{width:100%;padding:.55rem .75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.88rem;font-family:inherit;transition:border-color .15s;background:var(--surface)}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.readonly-input{background:var(--bg)!important;cursor:not-allowed;opacity:.8}.btn{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.85rem;font-weight:500;border:none;border-radius:var(--radius);cursor:pointer;transition:var(--transition);font-family:inherit}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark)}.btn-danger{background:var(--danger);color:#fff}.btn-danger:hover{background:#b91c1c}.btn-outline{background:none;border:1px solid var(--border);color:var(--text)}.btn-outline:hover{background:var(--bg)}.btn-danger-outline{background:none;border:1px solid #fca5a5;color:var(--danger)}.btn-danger-outline:hover{background:#fef2f2;border-color:var(--danger)}.btn-sm{padding:.3rem .6rem;font-size:.8rem}.btn-success{background:#10b981;color:#fff}.btn-success:hover{background:#059669}.btn-view{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 2px 8px #2563eb33;transition:transform .2s ease,box-shadow .2s ease;border:none}.btn-view:hover{transform:translateY(-2px);box-shadow:0 4px 16px #2563eb59}.btn-view:active{transform:translateY(0)}.btn-edit-gradient{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;box-shadow:0 2px 8px #f59e0b33;transition:transform .2s ease,box-shadow .2s ease;border:none}.btn-edit-gradient:hover{transform:translateY(-2px);box-shadow:0 4px 16px #f59e0b59}.btn-edit-gradient:active{transform:translateY(0)}.btn-edit-gradient svg{transition:transform .3s ease}.btn-edit-gradient:hover svg{transform:rotate(-15deg)}.btn-hapus-gradient{background:linear-gradient(135deg,#dc2626,#b91c1c);color:#fff;box-shadow:0 2px 8px #dc262633;transition:transform .2s ease,box-shadow .2s ease;border:none}.btn-hapus-gradient:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 4px 16px #dc262666}.btn-hapus-gradient:active{transform:translateY(0)}.btn-pulse{animation:btnPulse 2s ease-in-out infinite}@keyframes btnPulse{0%,to{box-shadow:0 2px 8px #2563eb33}50%{box-shadow:0 2px 16px #2563eb66,0 0 0 4px #2563eb1a}}.btn-icon-spin svg{transition:transform .4s ease}.btn-icon-spin:hover svg{transform:rotate(360deg)}.btn-icon-bounce svg{transition:transform .3s ease}.btn-icon-bounce:hover svg{transform:scale(1.3)}.btn-float{transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease}.btn-float:hover{transform:translateY(-3px);box-shadow:0 6px 20px #00000026}.badge{display:inline-block;padding:.15rem .5rem;font-size:.75rem;border-radius:999px;font-weight:500}.badge-role{display:inline-block;padding:.2rem .65rem;font-size:.75rem;border-radius:999px;font-weight:500;background:var(--primary-light);color:var(--primary-dark)}.pagination{display:flex;align-items:center;gap:.5rem;margin-top:1rem;justify-content:center}.pagination button{padding:.35rem .7rem}.search-bar{display:flex;gap:.5rem;margin-bottom:1rem}.search-bar input{flex:1;padding:.55rem .75rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.88rem}.filter-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin-bottom:1rem;box-shadow:var(--shadow)}.filter-form{width:100%}.filter-row{display:flex;gap:.75rem;align-items:flex-end;flex-wrap:wrap}.filter-group{display:flex;flex-direction:column;gap:.2rem;min-width:140px;flex:1}.filter-group label{font-size:.78rem;font-weight:500;color:var(--text-muted)}.filter-group input,.filter-group select{padding:.45rem .65rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.85rem;font-family:inherit;background:var(--surface);transition:border-color .15s}.filter-group input:focus,.filter-group select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a}.filter-action{flex:0 0 auto;min-width:auto}.filter-bar-modern{padding:.85rem 1.1rem;animation:filterSlideIn .4s cubic-bezier(.16,1,.3,1)}@keyframes filterSlideIn{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.table-stats{display:flex;align-items:center;gap:.5rem}.stat-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.3rem .7rem;border-radius:999px;background:var(--primary-light);color:var(--primary);font-size:.8rem;font-weight:600}.brand-separator{color:var(--border);font-weight:300;font-size:1.1rem}.brand-sub{font-size:.88rem;color:var(--text-muted);font-weight:400}.version-brand{font-weight:600;display:block}.version-hospital{display:block;font-size:.68rem;opacity:.7}.version-number{display:block;font-size:.68rem;opacity:.5;margin-top:2px}.table-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;gap:1rem}.table-info{font-size:.85rem;color:var(--text-muted)}.table-limit{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--text-muted)}.table-limit select{padding:.25rem .5rem;border:1px solid var(--border);border-radius:var(--radius);font-size:.82rem;font-family:inherit;background:var(--surface);cursor:pointer}.page-fade-in{animation:fadeIn .35s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.patient-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.85rem}.patient-card{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--primary);border-radius:var(--radius-lg);padding:1rem 1.1rem;box-shadow:0 1px 3px #0000000a,0 2px 8px #00000008;cursor:context-menu;transition:all .25s ease;position:relative;animation:fadeIn .35s ease both}.patient-card:hover{box-shadow:0 4px 16px #2563eb1a,0 2px 8px #0000000a;transform:translateY(-3px)}.patient-card-badge{padding:.15rem .55rem;border-radius:999px;font-size:.72rem;font-weight:600;white-space:nowrap}.patient-card-main{display:flex;align-items:center;gap:.85rem;padding-right:5.5rem}.patient-avatar{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .3s ease,box-shadow .3s ease;box-shadow:0 2px 8px #0000001f;animation:avatarFloat 3s ease-in-out infinite;color:#fff;position:relative}.patient-avatar svg{width:26px;height:26px}@keyframes avatarFloat{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.patient-card:hover .patient-avatar{transform:scale(1.12) translateY(-2px);box-shadow:0 6px 20px #0003;animation-play-state:paused}.patient-details{min-width:0;flex:1}.patient-name{font-weight:600;font-size:.95rem;margin-bottom:.15rem}.patient-meta{display:flex;align-items:center;gap:.35rem;font-size:.8rem;flex-wrap:wrap}.meta-dot{opacity:.4}.patient-card-footer{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.65rem;padding-top:.65rem;border-top:1px solid var(--border)}.patient-card-actions{display:flex;gap:6px;justify-content:flex-end;padding-top:10px;margin-top:10px;border-top:1px solid var(--border);opacity:0;transform:translateY(6px);animation:actionsFadeIn .3s ease .2s forwards}@keyframes actionsFadeIn{to{opacity:1;transform:translateY(0)}}.footer-info{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--text-muted);min-width:0}.footer-info span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.patient-skeleton{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:.85rem}.skeleton-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1rem 1.1rem;box-shadow:var(--shadow)}.skeleton-line{height:14px;background:linear-gradient(90deg,#e2e8f0 25%,#f1f5f9,#e2e8f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px;margin-bottom:.5rem}.skeleton-line:last-child{margin-bottom:0}.w-60{width:60%}.w-40{width:40%}.w-80{width:80%}.pagination-modern{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-top:1.25rem}.page-numbers{display:flex;gap:.25rem}.page-num{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-size:.85rem;font-weight:500;cursor:pointer;transition:var(--transition);font-family:inherit}.page-num:hover{border-color:var(--primary);color:var(--primary)}.page-num.active{background:var(--primary);border-color:var(--primary);color:#fff}.card-title{font-size:.92rem;font-weight:600;margin-bottom:.85rem;color:var(--text);padding-bottom:.5rem;border-bottom:1px solid var(--border)}.form-diagnosis-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}.empty-state p{margin-top:.5rem;font-size:.9rem}.alert{padding:.7rem 1rem;border-radius:var(--radius);margin-bottom:1rem;font-size:.85rem}.alert-error{background:#fef2f2;color:var(--danger);border:1px solid #fecaca}.alert-success{background:#f0fdf4;color:var(--success);border:1px solid #bbf7d0}.login-page-modern{display:flex;align-items:center;justify-content:center;min-height:100vh;min-height:100dvh;position:relative;overflow:hidden;padding:1rem;background:radial-gradient(ellipse at 20% 50%,rgba(59,130,246,.12) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(139,92,246,.1) 0%,transparent 50%),radial-gradient(ellipse at 50% 80%,rgba(6,182,212,.08) 0%,transparent 50%),linear-gradient(135deg,#070b17,#0f1a33,#162a4a 60%,#0a1628);background-size:200% 200%;animation:loginBgShift 15s ease infinite}@keyframes loginBgShift{0%{background-position:0% 50%}25%{background-position:100% 0%}50%{background-position:100% 100%}75%{background-position:0% 100%}to{background-position:0% 50%}}.login-dot-grid{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background-image:radial-gradient(rgba(96,165,250,.08) 1px,transparent 1px);background-size:40px 40px;animation:loginGridDrift 30s linear infinite}@keyframes loginGridDrift{0%{transform:translate(0)}50%{transform:translate(20px,10px)}to{transform:translate(0)}}.login-particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.login-particle{position:absolute;width:4px;height:4px;background:#60a5fa66;border-radius:50%}.login-particle:nth-child(1){left:10%;top:20%;animation:loginParticleFloat1 18s ease-in-out infinite}.login-particle:nth-child(2){left:25%;top:60%;width:3px;height:3px;background:#8b5cf64d;animation:loginParticleFloat2 22s ease-in-out infinite}.login-particle:nth-child(3){left:45%;top:10%;width:5px;height:5px;background:#06b6d44d;animation:loginParticleFloat3 20s ease-in-out infinite}.login-particle:nth-child(4){left:65%;top:70%;width:3px;height:3px;background:#60a5fa59;animation:loginParticleFloat4 25s ease-in-out infinite}.login-particle:nth-child(5){left:80%;top:30%;width:4px;height:4px;background:#8b5cf640;animation:loginParticleFloat5 16s ease-in-out infinite}.login-particle:nth-child(6){left:15%;top:85%;width:3px;height:3px;background:#06b6d44d;animation:loginParticleFloat2 19s ease-in-out infinite}.login-particle:nth-child(7){left:55%;top:45%;width:5px;height:5px;background:#60a5fa33;animation:loginParticleFloat3 23s ease-in-out infinite}.login-particle:nth-child(8){left:90%;top:80%;width:3px;height:3px;background:#8b5cf64d;animation:loginParticleFloat1 21s ease-in-out infinite}@keyframes loginParticleFloat1{0%,to{transform:translate(0) scale(1);opacity:.4}25%{transform:translate(40px,-30px) scale(1.3);opacity:.8}50%{transform:translate(20px,20px) scale(.8);opacity:.3}75%{transform:translate(-30px,10px) scale(1.1);opacity:.6}}@keyframes loginParticleFloat2{0%,to{transform:translate(0) scale(1);opacity:.3}33%{transform:translate(-30px,-40px) scale(1.5);opacity:.7}66%{transform:translate(30px,20px) scale(.7);opacity:.5}}@keyframes loginParticleFloat3{0%,to{transform:translate(0);opacity:.3}50%{transform:translate(50px,-50px) scale(1.2);opacity:.9}}@keyframes loginParticleFloat4{0%,to{transform:translate(0) scale(1);opacity:.35}50%{transform:translate(-40px,30px) scale(.6);opacity:.7}}@keyframes loginParticleFloat5{0%,to{transform:translate(0);opacity:.25}50%{transform:translate(30px,40px) scale(1.4);opacity:.8}}.login-bg-shapes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.login-shape{position:absolute;border-radius:50%;filter:blur(80px);opacity:.12}.login-shape-1{width:600px;height:600px;background:radial-gradient(circle,#3b82f6,#1d4ed8);top:-200px;right:-150px;animation:loginShapeFloat1 12s ease-in-out infinite}.login-shape-2{width:500px;height:500px;background:radial-gradient(circle,#8b5cf6,#6d28d9);bottom:-150px;left:-100px;animation:loginShapeFloat2 14s ease-in-out infinite}.login-shape-3{width:350px;height:350px;background:radial-gradient(circle,#06b6d4,#0891b2);top:40%;left:60%;animation:loginShapeFloat3 10s ease-in-out infinite}.login-shape-4{width:250px;height:250px;background:radial-gradient(circle,#f472b6,#e11d48);top:15%;left:15%;opacity:.08;animation:loginShapeFloat4 16s ease-in-out infinite}@keyframes loginShapeFloat1{0%,to{transform:translate(0) scale(1)}33%{transform:translate(-60px,40px) scale(1.15)}66%{transform:translate(30px,-20px) scale(.95)}}@keyframes loginShapeFloat2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(50px,-40px) scale(1.2)}}@keyframes loginShapeFloat3{0%,to{transform:translate(0) scale(1);opacity:.08}25%{transform:translate(40px,30px) scale(1.1);opacity:.15}50%{transform:translate(-20px,-30px) scale(.9);opacity:.1}75%{transform:translate(-40px,20px) scale(1.05);opacity:.13}}@keyframes loginShapeFloat4{0%,to{transform:translate(0) scale(1)}50%{transform:translate(30px,40px) scale(1.2)}}.login-glow-line{position:absolute;pointer-events:none;height:1px;background:linear-gradient(90deg,transparent,rgba(96,165,250,.15),transparent);animation:loginGlowLine 8s ease-in-out infinite}.login-glow-line:nth-child(1){top:30%;left:-10%;width:60%;animation-delay:0s}.login-glow-line:nth-child(2){top:70%;right:-10%;width:50%;animation-delay:3s}.login-glow-line:nth-child(3){top:50%;left:20%;width:30%;animation-delay:6s}@keyframes loginGlowLine{0%,to{opacity:0;transform:scaleX(.3)}50%{opacity:1;transform:scaleX(1)}}.login-wrapper{position:relative;z-index:2;opacity:0;transform:scale(.92) translateY(40px);transition:none}.login-wrapper.visible{animation:loginCardEntrance .9s cubic-bezier(.16,1,.3,1) forwards}@keyframes loginCardEntrance{0%{opacity:0;transform:scale(.85) translateY(80px)}to{opacity:1;transform:scale(1) translateY(0)}}.login-card-modern{position:relative;background:#ffffff0a;backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-radius:24px;padding:3rem;width:100%;max-width:800px;box-shadow:0 8px 48px #0006,inset 0 1px #ffffff14;overflow:hidden}.login-card-modern:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:24px;padding:1px;background:linear-gradient(135deg,#60a5fa4d,#8b5cf633,#06b6d44d,#60a5fa33,#8b5cf64d);background-size:400% 400%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:loginBorderGlow 6s ease infinite;pointer-events:none}@keyframes loginBorderGlow{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.login-card-modern:after{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 50% 50%,rgba(96,165,250,.03) 0%,transparent 50%);animation:loginCardGlow 10s ease-in-out infinite;pointer-events:none}@keyframes loginCardGlow{0%,to{transform:translate(-5%,-5%) rotate(0)}50%{transform:translate(5%,5%) rotate(180deg)}}.login-wrapper.visible .login-card-modern{animation:loginCardPulse 4s ease-in-out infinite}@keyframes loginCardPulse{0%,to{box-shadow:0 8px 48px #0006,inset 0 1px #ffffff14}50%{box-shadow:0 8px 64px #3b82f61f,0 8px 48px #0006,inset 0 1px #ffffff14}}@media(max-width:480px){.login-card-modern{padding:1.5rem;border-radius:20px;max-width:100%}.login-logo-wrap img{max-height:72px}.login-card-header h1{font-size:1.3rem}.login-card-header p{font-size:.75rem}.login-shape-1{width:250px;height:250px;top:-80px;right:-60px}.login-shape-2{width:200px;height:200px;bottom:-60px;left:-40px}.login-shape-3,.login-shape-4,.login-particle{display:none}}.login-card-modern.shake{animation:loginShake .5s ease,loginShakeGlow .5s ease}@keyframes loginShake{0%,to{transform:translate(0)}15%{transform:translate(-14px)}30%{transform:translate(12px)}45%{transform:translate(-10px)}60%{transform:translate(8px)}75%{transform:translate(-4px)}90%{transform:translate(2px)}}@keyframes loginShakeGlow{0%,to{box-shadow:0 8px 48px #0006}30%{box-shadow:0 8px 48px #0006,0 0 40px #ef444433}60%{box-shadow:0 8px 48px #0006,0 0 20px #ef44441a}}.login-card-header{text-align:center;margin-bottom:1.75rem;position:relative;z-index:1}.login-wrapper.visible .login-card-header{animation:loginHeaderIn .7s cubic-bezier(.16,1,.3,1) .2s both}@keyframes loginHeaderIn{0%{opacity:0;transform:translateY(-24px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.login-logo-wrap{position:relative;margin-bottom:.4rem;display:inline-flex;align-items:center;justify-content:center}.login-logo-wrap:before{content:"";position:absolute;width:calc(100% + 32px);height:calc(100% + 32px);border-radius:50%;background:conic-gradient(from 0deg,#60a5fa26,#8b5cf61a,#06b6d426,#60a5fa26);animation:loginLogoRingSpin 6s linear infinite}.login-wrapper.visible .login-logo-wrap{animation:loginLogoEntrance .8s cubic-bezier(.16,1,.3,1) .1s both}.login-logo-wrap img{position:relative;z-index:1;max-height:140px;border-radius:50%;filter:drop-shadow(0 4px 16px rgba(96,165,250,.2));transition:filter .5s ease,transform .5s ease}.login-logo-wrap:hover img{filter:drop-shadow(0 4px 24px rgba(96,165,250,.4));transform:scale(1.05)}@keyframes loginLogoRingSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loginLogoEntrance{0%{opacity:0;transform:scale(.4) rotate(-15deg)}to{opacity:1;transform:scale(1) rotate(0)}}.login-card-header h1{margin:1rem 0 0;font-size:1.7rem;font-weight:800;background:linear-gradient(135deg,#60a5fa,#a78bfa 40%,#34d399);background-size:200% 200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;animation:loginTitleShift 5s ease infinite}@keyframes loginTitleShift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.login-card-header p{margin:.4rem 0 0;font-size:.82rem;color:#ffffff73;letter-spacing:.02em}.login-fields{display:flex;flex-direction:column;gap:18px;position:relative;z-index:1}.login-wrapper.visible .login-fields .form-group{animation:loginFieldSlide .6s cubic-bezier(.16,1,.3,1) both}.login-wrapper.visible .login-fields .form-group:nth-child(1){animation-delay:.25s}.login-wrapper.visible .login-fields .form-group:nth-child(2){animation-delay:.35s}@keyframes loginFieldSlide{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:translate(0)}}.login-card-modern .form-group label{color:#ffffffa6;font-size:.78rem;font-weight:500;margin-bottom:.4rem;display:flex;align-items:center;letter-spacing:.02em}.login-input-wrap{position:relative}.login-input-wrap input{width:100%;background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:1rem 1.2rem;font-size:1rem;color:#fff;outline:none;transition:border-color .3s ease,box-shadow .3s ease,background .3s ease;box-sizing:border-box}.login-input-wrap input::placeholder{color:#fff3;transition:color .3s ease}.login-input-wrap input:focus::placeholder{color:#ffffff0d}.login-input-wrap input:focus{border-color:#60a5fa80;background:#ffffff14;box-shadow:0 0 0 4px #60a5fa1a,0 0 24px #60a5fa0d}.login-input-wrap input:not(:placeholder-shown){background:#ffffff12}.login-input-clear,.login-password-toggle{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#ffffff4d;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:color .2s,background .2s}.login-input-clear:hover,.login-password-toggle:hover{color:#ffffffb3;background:#ffffff0d}.login-wrapper.visible .btn-login{animation:loginBtnIn .6s cubic-bezier(.16,1,.3,1) .45s both}@keyframes loginBtnIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.btn-login{position:relative;z-index:1;width:100%;background:linear-gradient(135deg,#3b82f6,#6366f1,#8b5cf6);background-size:200% 200%;border:none;border-radius:14px;padding:1rem 1.2rem;font-size:1.05rem;font-weight:600;color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .3s ease;margin-top:.5rem;overflow:hidden;animation:loginBtnGradient 4s ease infinite}@keyframes loginBtnGradient{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}.btn-login:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 32px #3b82f659}.btn-login:active:not(:disabled){transform:translateY(0)}.btn-login:disabled{opacity:.6;cursor:not-allowed;background:linear-gradient(135deg,#374151,#4b5563)}.btn-login:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,transparent,rgba(255,255,255,.12),transparent);transform:translate(-100%);transition:transform .6s ease}.btn-login:hover:before{transform:translate(100%)}.btn-login:after{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:16px;background:linear-gradient(135deg,#60a5fa4d,#8b5cf64d);z-index:-1;opacity:0;transition:opacity .3s ease}.btn-login:hover:not(:disabled):after{opacity:1}.btn-login-loading{display:flex;align-items:center;justify-content:center;gap:10px}.login-loading-logo{display:inline-flex;animation:loginLogoPulse .8s ease-in-out infinite}.login-loading-logo img{height:20px;width:auto;border-radius:50%}@keyframes loginLogoPulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.8)}}.login-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;background:#050a18f0;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);display:flex;align-items:center;justify-content:center;animation:loginOverlayIn .6s cubic-bezier(.16,1,.3,1)}.login-overlay-inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:28px;animation:loginContentIn .7s cubic-bezier(.16,1,.3,1) .2s both}.login-overlay-ring-outer{position:absolute;width:160px;height:160px;top:-24px;border-radius:50%;pointer-events:none}.login-overlay-ring{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;border:3px solid transparent;border-top-color:#60a5fab3;border-right-color:#8b5cf680;border-bottom-color:#06b6d433;animation:loginRingSpin 1.2s cubic-bezier(.45,0,.55,1) infinite}.login-overlay-ring-dash{position:absolute;top:10px;right:10px;bottom:10px;left:10px;border-radius:50%;border:2px solid transparent;border-bottom-color:#60a5fa66;border-left-color:#8b5cf64d;animation:loginRingSpin .8s cubic-bezier(.45,0,.55,1) infinite reverse}.login-overlay-logo{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:120px;height:120px;border-radius:50%;background:#ffffff0a;animation:loginLogoGlow 2.5s ease-in-out infinite}.login-overlay-logo:before{content:"";position:absolute;top:-4px;right:-4px;bottom:-4px;left:-4px;border-radius:50%;background:conic-gradient(from 0deg,#60a5fa33,#8b5cf61a,#06b6d433,#60a5fa33);animation:loginOverlayRingSpin 4s linear infinite}.login-overlay-logo:after{content:"";position:absolute;top:2px;right:2px;bottom:2px;left:2px;border-radius:50%;background:#050a18cc;z-index:-1}.login-overlay-logo img{height:60px;width:auto;object-fit:contain;animation:loginLogoSmooth 2.5s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(96,165,250,.3));border-radius:50%}.login-overlay-text{font-size:.8rem;color:#fff6;letter-spacing:.4em;text-transform:uppercase;animation:loginTextPulse 1.8s ease-in-out infinite}.login-overlay-particles{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.login-overlay-particle{position:absolute;width:3px;height:3px;background:#60a5fa4d;border-radius:50%}.login-overlay-particle:nth-child(1){left:20%;top:30%;animation:loginOPF 12s ease-in-out infinite}.login-overlay-particle:nth-child(2){left:70%;top:20%;animation:loginOPF 15s ease-in-out infinite 2s}.login-overlay-particle:nth-child(3){left:40%;top:70%;animation:loginOPF 14s ease-in-out infinite 4s}.login-overlay-particle:nth-child(4){left:80%;top:60%;animation:loginOPF 11s ease-in-out infinite 1s}.login-overlay-particle:nth-child(5){left:10%;top:80%;animation:loginOPF 13s ease-in-out infinite 3s}.login-overlay-particle:nth-child(6){left:60%;top:10%;animation:loginOPF 16s ease-in-out infinite 5s}@keyframes loginOPF{0%,to{transform:translate(0);opacity:.2}25%{transform:translate(30px,-40px);opacity:.6}50%{transform:translate(-20px,20px);opacity:.3}75%{transform:translate(40px,30px);opacity:.8}}@keyframes loginOverlayIn{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}}@keyframes loginContentIn{0%{opacity:0;transform:scale(.5) translateY(40px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes loginRingSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loginOverlayRingSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes loginLogoGlow{0%,to{box-shadow:0 0 30px #60a5fa14}50%{box-shadow:0 0 60px #60a5fa33}}@keyframes loginLogoSmooth{0%,to{opacity:.85;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}@keyframes loginTextPulse{0%,to{opacity:.25}50%{opacity:.8}}.jadwal-locked-input{display:flex;align-items:center;background:#eff6ff;border:1px solid #bfdbfe;border-radius:var(--radius);padding:.5rem .75rem;font-size:.85rem;color:#1e40af;cursor:not-allowed;position:relative}.jadwal-locked-badge{margin-left:auto;background:#2563eb;color:#fff;font-size:.65rem;font-weight:600;padding:2px 8px;border-radius:20px;text-transform:uppercase;letter-spacing:.3px}.context-menu{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden;min-width:180px}.context-menu button{display:block;width:100%;padding:.6rem 1rem;border:none;background:none;cursor:pointer;font-size:.85rem;text-align:left;font-family:inherit;color:var(--text);transition:var(--transition)}.context-menu button:hover{background:var(--bg);color:var(--primary)}.profile-layout{display:grid;grid-template-columns:280px 1fr;gap:1rem}.profile-photo-card{text-align:center}.photo-section{display:flex;flex-direction:column;align-items:center;padding:1rem 0}.avatar-profile{width:120px;height:120px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2.5rem;font-weight:600;position:relative;cursor:pointer;overflow:hidden}.avatar-profile img{width:100%;height:100%;object-fit:cover}.avatar-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;opacity:0;transition:var(--transition)}.avatar-profile:hover .avatar-overlay{opacity:1}.profile-meta{margin-top:1rem;text-align:left}.meta-item{display:flex;justify-content:space-between;padding:.4rem 0;border-bottom:1px solid var(--border);font-size:.85rem}.meta-item:last-child{border-bottom:none}.meta-label{color:var(--text-muted)}.meta-value{font-weight:500}.text-muted{color:var(--text-muted)}.fs-small{font-size:.82rem}.fw-600{font-weight:600}.dashboard{position:relative}.dash-header{position:relative;background:linear-gradient(135deg,#1e293b,#334155,#1e293b);border-radius:var(--radius-lg);padding:1.75rem 2rem;margin-bottom:1.5rem;overflow:hidden;isolation:isolate}.dash-header-glow{position:absolute;top:-50%;right:-20%;width:400px;height:400px;background:radial-gradient(circle,rgba(37,99,235,.15) 0%,transparent 70%);pointer-events:none}.dash-header-content{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:1}.dash-title{font-size:1.4rem;font-weight:700;color:#fff;letter-spacing:-.02em}.dash-subtitle{font-size:.9rem;color:#ffffffa6;margin-top:.2rem}.dash-subtitle strong{color:#fff}.dash-date{display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:#ffffff8c;padding:.4rem .85rem;background:#ffffff14;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dash-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem}.dash-stat-card{position:relative;border-radius:var(--radius-lg);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease;cursor:default;animation:dashFadeIn .5s ease both}.dash-stat-card:hover{transform:translateY(-4px) scale(1.02)}.dash-stat-card:hover .dash-stat-bg{transform:scale(1.08)}.dash-stat-bg{position:absolute;top:0;right:0;bottom:0;left:0;transition:transform .4s ease}.dash-stat-content{position:relative;padding:1.25rem;z-index:1;color:#fff}.dash-stat-icon{width:42px;height:42px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.dash-stat-value{font-size:1.65rem;font-weight:800;line-height:1.2;letter-spacing:-.02em}.dash-stat-label{font-size:.8rem;opacity:.75;margin-top:.15rem}.dash-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:1rem}.dash-chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem;box-shadow:0 1px 4px #0000000a;transition:box-shadow .25s ease,transform .25s ease;animation:dashFadeIn .5s ease both}.dash-chart-card:hover{box-shadow:0 4px 20px #00000014;transform:translateY(-2px)}.dash-chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem}.dash-chart-header h3{font-size:.9rem;font-weight:600;color:var(--text)}.dash-chart-badge{font-size:.7rem;padding:.15rem .5rem;border-radius:999px;background:var(--bg);color:var(--text-muted);font-weight:500}@keyframes dashFadeIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.dash-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.dash-stats{grid-template-columns:1fr}.dash-header-content{flex-direction:column;gap:.75rem;align-items:flex-start}}.sidebar-close{display:none;align-self:flex-end;background:none;border:none;color:var(--sidebar-text);padding:.4rem;cursor:pointer;border-radius:6px;transition:var(--transition)}.sidebar-close:hover{background:#ffffff1a;color:#fff}.sidebar-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;z-index:199;animation:fadeIn .2s ease}@media(max-width:768px){.layout{grid-template-columns:1fr;grid-template-rows:56px 1fr}.sidebar{position:fixed;top:0;left:0;bottom:0;width:280px;max-width:85vw;z-index:200;transform:translate(-100%);transition:transform .25s cubic-bezier(.16,1,.3,1);grid-row:auto}.sidebar.mobile-open{transform:translate(0)}.sidebar-close{display:flex;align-items:center;justify-content:center;margin-bottom:.25rem}.sidebar-collapsed .sidebar,.charts-grid,.profile-layout{grid-template-columns:1fr}.stats-row{grid-template-columns:1fr 1fr}.form-row{grid-template-columns:1fr}}@media(max-width:640px){.topnavbar{padding:0 .75rem}.topnavbar-left{gap:.4rem}.brand-separator,.brand-sub{display:none}}@media(max-width:480px){.stats-row{grid-template-columns:1fr}.page-header{flex-direction:column;gap:.5rem}.profile-info{display:none}.topnavbar{padding:0 .5rem}.topnavbar-left{gap:.2rem}}.recent-table{width:100%;border-collapse:collapse;font-size:.85rem}.recent-table th{text-align:left;padding:10px 14px;font-weight:600;color:var(--text-muted);border-bottom:2px solid var(--border);white-space:nowrap}.recent-table td{padding:10px 14px;border-bottom:1px solid var(--border)}.recent-table tbody tr:hover{background:#f8fafc}.badge-ralan{display:inline-block;background:#dbeafe;color:#1d4ed8;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:600}.badge-ranap{display:inline-block;background:#d1fae5;color:#059669;padding:2px 10px;border-radius:20px;font-size:.75rem;font-weight:600}.section-card{background:var(--surface);border-radius:var(--radius-lg);box-shadow:0 1px 4px #0000000f,0 1px 2px #0000000a;overflow:visible;margin-bottom:1.1rem;transition:box-shadow .3s ease,transform .2s ease;animation:sectionFadeIn .4s ease both;border:1px solid var(--border);position:relative}.section-card:before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:linear-gradient(180deg,var(--primary),#4f7cff,#7c9cff);opacity:0;transition:opacity .3s ease}.section-card:hover:before{opacity:1}.section-card:nth-child(1){animation-delay:0s}.section-card:nth-child(2){animation-delay:.04s}.section-card:nth-child(3){animation-delay:.08s}.section-card:nth-child(4){animation-delay:.12s}.section-card:nth-child(5){animation-delay:.16s}.section-card:nth-child(6){animation-delay:.2s}.section-card:nth-child(7){animation-delay:.24s}.section-card:nth-child(8){animation-delay:.28s}.section-card:hover{box-shadow:0 4px 20px #0000001a;transform:translateY(-1px)}@keyframes sectionFadeIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.section-header{display:flex;align-items:center;gap:.75rem;padding:1rem 1.5rem 1rem 1.75rem;font-size:.86rem;font-weight:600;color:var(--text);border-bottom:1px solid var(--border);background:linear-gradient(to right,#f8f9fc,var(--surface));letter-spacing:.01em}.section-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#4f7cff);color:#fff;font-size:.72rem;font-weight:700;flex-shrink:0;box-shadow:0 2px 6px #2563eb40}.section-body{padding:1.25rem 1.75rem 1.5rem}.section-divider{height:1px;background:var(--border);margin:.75rem 0}.diagnosis-subtitle{font-size:.78rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.75rem}.icd-row{display:grid;grid-template-columns:240px 1fr;gap:1rem;margin-bottom:.7rem;align-items:start}.icd-code-group label,.icd-name-group label{display:block;font-size:.75rem;font-weight:500;color:var(--text-muted);margin-bottom:5px;letter-spacing:.01em}.icd-input-wrap{display:flex;gap:5px}.icd-input-wrap input{flex:1;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius);font-size:.82rem;font-family:SF Mono,Fira Code,Consolas,monospace;outline:none;transition:all .18s ease;letter-spacing:.02em}.icd-input-wrap input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1f}.icd-search-btn{display:flex;align-items:center;justify-content:center;width:36px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;color:var(--text-muted);transition:all .15s ease;flex-shrink:0}.icd-search-btn:hover{background:var(--primary-light);color:var(--primary);border-color:var(--primary);transform:scale(1.05)}.icd-search-btn:active{transform:scale(.95)}.icd-name-group input{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius);font-size:.82rem;outline:none;transition:all .18s ease}.icd-name-group input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1f}.icd-dropdown{position:absolute;top:100%;left:0;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);z-index:100;max-height:200px;overflow-y:auto;box-shadow:0 8px 24px #0000001a}.icd-dropdown-item{padding:.5rem .75rem;cursor:pointer;font-size:.85rem;border-bottom:1px solid var(--border);transition:background .15s;display:flex;align-items:center;gap:8px}.icd-dropdown-item:hover{background:var(--bg)}.icd-dropdown-code{font-family:monospace;font-weight:600;font-size:.8rem;color:var(--primary);background:#eff6ff;padding:2px 8px;border-radius:4px;white-space:nowrap}.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem}.form-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:1rem}.form-scroll{padding:0 1.25rem}.form-scroll .form-group{margin-bottom:0}.form-scroll .form-group label{font-size:.76rem;font-weight:500;color:var(--text-muted);margin-bottom:4px;display:block}.form-scroll .form-group input,.form-scroll .form-group select,.form-scroll .form-group textarea{width:100%;padding:9px 11px;border:1px solid var(--border);border-radius:var(--radius);font-size:.82rem;outline:none;transition:all .18s ease;font-family:inherit;background:var(--surface);color:var(--text)}.form-scroll .form-group input:hover,.form-scroll .form-group select:hover,.form-scroll .form-group textarea:hover{border-color:#c4c9d0}.form-scroll .form-group input:focus,.form-scroll .form-group select:focus,.form-scroll .form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1f}.form-scroll .form-group input[readonly]{background:#f8f9fa;color:#6b7280;cursor:default;border-color:#e8eaee}.form-scroll .form-group textarea{resize:vertical;min-height:60px;line-height:1.55}.form-actions{display:flex;justify-content:flex-end;gap:.75rem;padding:1rem 1.25rem 2rem}.form-actions .btn{padding:.55rem 1.5rem;font-size:.85rem;font-weight:500;border-radius:var(--radius);transition:all .18s ease}.form-actions .btn-primary{background:linear-gradient(135deg,var(--primary),#4f7cff);color:#fff;border:none;box-shadow:0 2px 8px #2563eb40}.form-actions .btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 14px #2563eb59}.form-actions .btn-primary:active{transform:translateY(0)}.form-loading{padding:0 1.25rem}.form-loading .shimmer-card{background:var(--surface);border-radius:var(--radius-lg);padding:1.5rem;margin-bottom:1rem;box-shadow:var(--shadow)}.shimmer-line{height:14px;border-radius:8px;background:linear-gradient(90deg,#e8eaee 25%,#f0f2f5,#e8eaee 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;margin-bottom:12px}.shimmer-line:last-child{margin-bottom:0}.shimmer-line.w-30{width:30%}.shimmer-line.w-50{width:50%}.shimmer-line.w-70{width:70%}.shimmer-line.h-32{height:32px;border-radius:6px}.shimmer-line.h-60{height:60px;border-radius:6px}.form-loading .shimmer-line{height:14px;border-radius:8px;background:linear-gradient(90deg,#e8eaee 25%,#f0f2f5,#e8eaee 75%);background-size:200% 100%;animation:shimmer 1.5s ease infinite;margin-bottom:12px}.form-loading .shimmer-line:last-child{margin-bottom:0}.form-loading .shimmer-line.w-30{width:30%}.form-loading .shimmer-line.w-50{width:50%}.form-loading .shimmer-line.w-70{width:70%}.form-loading .shimmer-line.h-32{height:32px;border-radius:6px}.form-loading .shimmer-line.h-60{height:60px;border-radius:6px}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.form-loading .shimmer-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:.5rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:flex;align-items:center;justify-content:center;z-index:2000;animation:fadeIn .15s ease;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{animation:modalSlideUp .25s cubic-bezier(.16,1,.3,1);box-shadow:0 16px 48px #0000002e}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes slideInRight{0%{opacity:0;transform:translate(40px)}to{opacity:1;transform:translate(0)}}.delete-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:9999;animation:deleteOverlayIn .25s ease both}.delete-modal-overlay.exiting{animation:deleteOverlayOut .25s ease both}.delete-modal-card{background:var(--surface);border-radius:20px;padding:2rem 2rem 1.5rem;max-width:400px;width:90%;text-align:center;box-shadow:0 25px 60px #00000040;animation:deleteCardIn .4s cubic-bezier(.16,1,.3,1) both}.delete-modal-card.exiting{animation:deleteCardOut .25s ease both}.delete-modal-icon-wrap{display:flex;justify-content:center;margin-bottom:1rem}.delete-modal-icon{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,#fef2f2,#fee2e2);display:flex;align-items:center;justify-content:center;color:#dc2626;animation:deleteIconShake .6s ease both}.delete-modal-title{font-size:1.15rem;font-weight:700;margin:0 0 .5rem;color:var(--text)}.delete-modal-message{font-size:.88rem;color:var(--text-muted);margin:0 0 1rem;line-height:1.5}.delete-modal-id{display:inline-flex;align-items:center;gap:6px;padding:.45rem 1rem;background:var(--bg);border:1px solid var(--border);border-radius:999px;font-size:.82rem;font-weight:600;color:var(--text);margin-bottom:1.25rem;animation:deleteIdIn .4s cubic-bezier(.16,1,.3,1) .2s both}.delete-modal-actions{display:flex;gap:10px;justify-content:center}.delete-modal-actions .btn{min-width:110px;justify-content:center;padding:.55rem 1.25rem;font-size:.88rem;font-weight:600;border-radius:12px}.btn-delete{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff;border:none;box-shadow:0 4px 14px #dc26264d;transition:transform .2s ease,box-shadow .2s ease;font-family:inherit;display:inline-flex;align-items:center;gap:6px}.btn-delete:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #dc262666}.btn-delete:active:not(:disabled){transform:translateY(0)}.btn-delete:disabled{opacity:.6;cursor:not-allowed}.delete-spinner{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:deleteSpin .6s linear infinite}@keyframes deleteOverlayIn{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}}@keyframes deleteOverlayOut{0%{opacity:1;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}to{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}}@keyframes deleteCardIn{0%{opacity:0;transform:translateY(40px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes deleteCardOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.92) translateY(20px)}}@keyframes deleteIconShake{0%,to{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(10deg)}45%{transform:rotate(-8deg)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}90%{transform:rotate(2deg)}}@keyframes deleteIdIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes deleteSpin{to{transform:rotate(360deg)}}@media(max-width:768px){.icd-row{grid-template-columns:1fr;gap:.25rem}.icd-name-group{padding-top:0}.form-grid-2,.form-grid-3,.form-grid-4{grid-template-columns:1fr}.form-scroll,.form-actions{max-width:100%}}.top-obat-scroll{display:flex;gap:10px;overflow-x:auto;padding:8px 0 12px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}.top-obat-scroll::-webkit-scrollbar{height:6px}.top-obat-scroll::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}.top-obat-card{min-width:200px;max-width:220px;flex-shrink:0;scroll-snap-align:start;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:12px 14px;display:flex;align-items:center;gap:10px;transition:var(--transition)}.top-obat-card:hover{border-color:var(--primary);box-shadow:var(--shadow);transform:translateY(-2px)}.top-obat-rank{font-size:13px;font-weight:700;color:var(--text-muted);white-space:nowrap}