:root{--primary: #2563eb;--primary-dark: #1d4ed8;--primary-light: #3b82f6;--success: #10b981;--warning: #f59e0b;--danger: #ef4444;--gray-50: #f8fafc;--gray-100: #f1f5f9;--gray-200: #e2e8f0;--gray-300: #cbd5e1;--gray-400: #94a3b8;--gray-500: #64748b;--gray-600: #475569;--gray-700: #334155;--gray-800: #1e293b;--gray-900: #0f172a;--sidebar-width: 280px;--header-height: 64px;--border-radius: 16px;--border-radius-sm: 12px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,sans-serif;background:var(--gray-50);color:var(--gray-900);line-height:1.5;font-size:16px;overflow-x:hidden;-webkit-tap-highlight-color:transparent}button,.btn,.tab-btn,.sidebar-nav-item,.quick-action-btn{min-height:48px;min-width:48px}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid var(--primary);outline-offset:2px}.auth-divider{text-align:center;margin:20px 0 16px;position:relative}.auth-divider:before,.auth-divider:after{content:"";position:absolute;top:50%;width:calc(50% - 30px);height:1px;background:var(--gray-200)}.auth-divider:before{left:0}.auth-divider:after{right:0}.auth-divider span{background:#fff;padding:0 12px;color:var(--gray-400);font-size:12px}.btn-secondary{background:#fff;color:var(--primary);border:2px solid var(--primary)}.btn-secondary:hover,.btn-secondary:active{background:var(--primary);color:#fff}.topbar-user{display:flex;align-items:center;gap:10px;background:#ffffff1a;padding:6px 14px;border-radius:40px}.user-avatar{font-size:18px}.user-info{display:flex;flex-direction:column;line-height:1.3}.user-info strong{font-size:13px;font-weight:600}.user-info span{font-size:11px;opacity:.8}.btn-logout{background:#ef444433;color:#fecaca;border:1px solid rgba(239,68,68,.3)}.btn-logout:hover,.btn-logout:active{background:var(--danger);color:#fff}#btn-manage-rooms,#btn-manage-prices{padding:10px 20px}.info-box{background:#eef2ff;border-radius:var(--border-radius-sm);padding:12px 16px;margin-top:16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--primary-dark)}.info-icon{font-size:18px}.warning-text{color:var(--warning);font-size:12px;margin-top:6px;display:block}@media(max-width:767px){.topbar-user{padding:4px 10px}.user-info strong{font-size:12px}.user-info span{display:none}.btn-logout span:first-child{margin-right:0}.btn-logout span:last-child{display:none}.btn-logout{padding:8px 12px}.section-header .btn-group{width:100%}.section-header .btn-group .btn{flex:1;justify-content:center}}.auth-wrap{display:flex;justify-content:center;align-items:center;min-height:100vh;background:linear-gradient(145deg,#eef2ff,#e0e7ff);padding:16px}.auth-box{background:#fff;border-radius:24px;box-shadow:0 20px 35px -12px #00000026;width:100%;max-width:400px;overflow:hidden}.auth-header{background:var(--gray-800);color:#fff;padding:32px 20px;text-align:center}.logo-animation{font-size:48px;margin-bottom:12px;animation:bounce 1s ease infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-5px)}}.auth-header h1{font-size:22px;font-weight:700;margin-bottom:6px}.auth-header p{font-size:13px;opacity:.85}.auth-body{padding:24px 20px}.auth-body h2{font-size:20px;font-weight:600;margin-bottom:20px;color:var(--gray-800)}.form-group{margin-bottom:20px;position:relative}.form-group label{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-weight:600;font-size:14px;color:var(--gray-700)}.input-icon{font-size:16px}.form-group input,.form-group select{width:100%;padding:14px 16px;border:1.5px solid var(--gray-200);border-radius:var(--border-radius-sm);font-size:16px;background:#fff;transition:all .2s}.form-group input:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 3px #2563eb1a;outline:none}.form-group input:read-only{background:var(--gray-100);color:var(--gray-500)}.form-group small{display:block;margin-top:6px;font-size:12px;color:var(--gray-400)}.toggle-password{position:absolute;right:12px;bottom:12px;background:none;border:none;font-size:20px;cursor:pointer;padding:4px;min-height:auto}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border:none;border-radius:40px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:inherit;white-space:nowrap}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover,.btn-primary:active{background:var(--primary-dark);transform:scale(.98)}.btn-success{background:var(--success);color:#fff}.btn-warning{background:var(--warning);color:#fff}.btn-info{background:#0ea5e9;color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-ghost{background:var(--gray-100);color:var(--gray-700);border:1px solid var(--gray-200)}.btn-sm{padding:8px 16px;font-size:13px;min-height:36px}.btn-full{width:100%;padding:14px}.alert{padding:12px 16px;border-radius:var(--border-radius-sm);font-size:14px;margin-bottom:16px;display:none}.alert.show{display:block}.alert-success{background:#d1fae5;color:#065f46;border-left:4px solid var(--success)}.alert-error{background:#fee2e2;color:#991b1b;border-left:4px solid var(--danger)}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%) translateY(100px);background:var(--gray-800);color:#fff;padding:12px 20px;border-radius:40px;font-size:14px;z-index:2000;transition:transform .3s ease;white-space:nowrap;box-shadow:0 4px 12px #00000026}.toast.show{transform:translate(-50%) translateY(0)}.loading-overlay{position:fixed;inset:0;background:#00000080;backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:3000}.loading-spinner{width:48px;height:48px;border:4px solid var(--gray-200);border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-overlay p{margin-top:16px;color:#fff;font-size:14px}.app{display:none;flex-direction:column;min-height:100vh}.app.show{display:flex}.topbar{background:var(--gray-800);color:#fff;padding:0 16px;height:var(--header-height);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:200;box-shadow:0 2px 8px #0000001a}.topbar-brand{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:700}.menu-toggle{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px;display:none;min-height:auto}.topbar-user{font-size:13px;background:#ffffff1a;padding:6px 14px;border-radius:40px}.topbar-user strong{font-weight:700;margin-right:6px}.sidebar-overlay{position:fixed;inset:0;background:#00000080;z-index:400;display:none}.sidebar-overlay.show{display:block}.sidebar{position:fixed;top:0;left:-100%;width:var(--sidebar-width);max-width:85%;height:100%;background:#fff;z-index:500;transition:left .3s ease;display:flex;flex-direction:column;box-shadow:2px 0 12px #0000001a}.sidebar.open{left:0}.sidebar-header{padding:20px;background:var(--gray-800);color:#fff;display:flex;justify-content:space-between;align-items:center}.sidebar-brand{font-size:18px;font-weight:700}.sidebar-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:8px}.sidebar-nav{flex:1;padding:16px 0}.sidebar-nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:14px 20px;border:none;background:none;font-size:16px;font-weight:500;color:var(--gray-600);cursor:pointer;transition:all .2s;text-align:left}.sidebar-nav-item:hover,.sidebar-nav-item:active{background:var(--gray-100)}.sidebar-nav-item.active{background:var(--primary);color:#fff}.nav-icon{font-size:20px;width:28px}.sidebar-footer{padding:16px 20px;border-top:1px solid var(--gray-200)}.sidebar-user strong{display:block;font-size:14px}.sidebar-user span{font-size:12px;color:var(--gray-500)}.tab-nav{background:#fff;border-bottom:1px solid var(--gray-200);padding:0 16px;display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}.tab-btn{padding:14px 16px;border:none;background:none;font-size:14px;font-weight:600;color:var(--gray-500);cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;white-space:nowrap}.tab-btn:hover,.tab-btn:active{color:var(--primary)}.tab-btn.active{color:var(--primary);border-bottom-color:var(--primary)}.quick-actions{display:none;gap:12px;margin-bottom:20px;overflow-x:auto;padding:4px 0;-webkit-overflow-scrolling:touch}.quick-action-btn{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 16px;background:#fff;border:1px solid var(--gray-200);border-radius:var(--border-radius);min-width:80px;cursor:pointer;transition:all .2s}.quick-action-btn:active{transform:scale(.96);background:var(--gray-100)}.action-icon{font-size:24px}.quick-action-btn span:last-child{font-size:12px;font-weight:500;color:var(--gray-600)}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:24px}.stat-card{background:#fff;border-radius:var(--border-radius);padding:16px;box-shadow:0 1px 3px #0000000d;border:1px solid var(--gray-200);transition:all .2s;cursor:pointer}.stat-card:active{transform:scale(.98);background:var(--gray-50)}.stat-value{font-size:24px;font-weight:800;margin-bottom:6px;color:var(--gray-800)}.stat-label{font-size:12px;color:var(--gray-500);font-weight:500}.stat-card.green .stat-value{color:var(--success)}.stat-card.yellow .stat-value{color:var(--warning)}.stat-card.red .stat-value{color:var(--danger)}.stat-card.purple .stat-value{color:#8b5cf6}.mobile-card-view{display:none;flex-direction:column;gap:12px;margin-bottom:20px}.rental-card,.kamar-card{background:#fff;border-radius:var(--border-radius);padding:16px;border:1px solid var(--gray-200);transition:all .2s}.rental-card:active,.kamar-card:active{background:var(--gray-50)}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--gray-100)}.card-room{font-size:18px;font-weight:700;color:var(--primary)}.card-status{font-size:11px;padding:4px 10px;border-radius:20px;font-weight:600}.card-content{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.card-item{display:flex;flex-direction:column}.card-item-label{font-size:11px;color:var(--gray-500)}.card-item-value{font-size:14px;font-weight:500;color:var(--gray-700)}.card-actions{display:flex;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-100)}.card-actions .btn{flex:1;padding:8px;font-size:13px}.content{padding:16px;flex:1;min-width:0;overflow-x:hidden}.table-wrap{background:#fff;border-radius:var(--border-radius);overflow:hidden;border:1px solid var(--gray-200);margin-bottom:20px}.overflow-x{overflow-x:auto}table{width:100%;border-collapse:collapse;min-width:700px}#tab-content-pengeluaran .pgl-tabel-desktop table{min-width:480px}#tab-content-pengeluaran .pgl-tabel-desktop .overflow-x-auto{overflow-x:auto}thead{background:var(--gray-100)}th{padding:12px;text-align:left;font-size:12px;font-weight:700;color:var(--gray-600);text-transform:uppercase;letter-spacing:.5px}td{padding:12px;font-size:14px;border-bottom:1px solid var(--gray-100);vertical-align:middle}tr:hover{background:var(--gray-50)}tr.row-latest{background:#eff6ff}.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600}.badge-baru{background:#dcfce7;color:#166534}.badge-extend{background:#fef9c3;color:#854d0e}.badge-terisi{background:#fee2e2;color:#991b1b}.badge-kosong{background:#dcfce7;color:#166534}.filter-bar{background:#fff;border-radius:var(--border-radius);padding:16px;margin-bottom:20px;display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;border:1px solid var(--gray-200)}.filter-group{flex:1;min-width:140px}.filter-group label{display:block;margin-bottom:6px;font-size:12px;font-weight:600;color:var(--gray-500)}.filter-group input,.filter-group select{width:100%;padding:10px 12px;border:1px solid var(--gray-200);border-radius:var(--border-radius-sm);font-size:14px}.pagination{display:flex;justify-content:center;gap:6px;margin-top:20px;flex-wrap:wrap}.pagination button{padding:8px 14px;border:1px solid var(--gray-200);background:#fff;border-radius:40px;cursor:pointer;font-size:13px;font-weight:500;transition:all .2s;min-height:auto}.pagination button.active{background:var(--primary);color:#fff;border-color:var(--primary)}.pagination button:disabled{opacity:.4;cursor:not-allowed}.modal-overlay{display:none;position:fixed;inset:0;background:#00000080;z-index:1000;align-items:flex-end;justify-content:center}.modal-overlay.show{display:flex}.modal{background:#fff;border-radius:24px 24px 0 0;width:100%;max-height:90vh;overflow-y:auto;animation:slideUp .3s ease}@keyframes slideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.modal-header{background:var(--gray-800);color:#fff;padding:16px 20px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0}.modal-header h3{font-size:18px;font-weight:600}.modal-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:4px 8px}.modal-body{padding:20px}.modal-footer{padding:16px 20px;background:var(--gray-50);display:flex;justify-content:flex-end;gap:12px;border-top:1px solid var(--gray-200)}@media(min-width:768px){.modal-overlay{align-items:center}.modal{border-radius:24px;max-width:600px;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-wide .modal{max-width:900px}}.laporan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.bulan-card{background:#fff;border-radius:var(--border-radius);padding:16px;cursor:pointer;transition:all .2s;border:1px solid var(--gray-200)}.bulan-card:active{transform:scale(.98)}.bulan-card h3{font-size:16px;font-weight:700;margin-bottom:10px}.bulan-card .total{font-size:24px;font-weight:800;color:var(--primary);margin-bottom:10px}.bulan-card .meta{font-size:11px;color:var(--gray-500);display:flex;gap:12px;flex-wrap:wrap}.harga-info-card{background:linear-gradient(135deg,var(--gray-50) 0%,white 100%);border-radius:var(--border-radius);padding:16px;margin-bottom:20px;display:flex;gap:20px;flex-wrap:wrap;align-items:center;border:1px solid var(--gray-200)}.harga-item{flex:1}.harga-info-card .label{font-size:11px;color:var(--gray-500);font-weight:500}.harga-info-card .value{font-size:18px;font-weight:700}.harga-info-card .value.harian{color:var(--primary)}.harga-info-card .value.bulanan{color:var(--success)}.btn-edit-harga{background:none;border:1px solid var(--gray-200);padding:8px 16px;border-radius:40px;font-size:13px;cursor:pointer}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:12px}.section-header h2{font-size:18px;font-weight:700;color:var(--gray-800)}.btn-group{display:flex;gap:8px;flex-wrap:wrap}.tahun-select{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}.tahun-select label{font-size:14px;font-weight:600;color:var(--gray-700)}.tahun-select select{padding:8px 16px;border:1px solid var(--gray-200);border-radius:40px;font-size:14px;background:#fff}.empty-state{text-align:center;padding:48px 20px;color:var(--gray-400)}.empty-icon{font-size:48px;margin-bottom:12px;opacity:.6}.empty-state p strong{color:var(--gray-500)}@media(max-width:767px){.menu-toggle{display:block}.tab-nav{display:none}.quick-actions,.mobile-card-view{display:flex}.desktop-only{display:none}.stats-grid{grid-template-columns:repeat(2,1fr)}.stat-value{font-size:20px}.filter-bar{flex-direction:column}.filter-group,.btn-group{width:100%}.btn-group .btn{flex:1}.harga-info-card{flex-direction:column;align-items:stretch;text-align:center}.btn-edit-harga{width:100%}.laporan-grid{grid-template-columns:1fr}}@media(min-width:768px)and (max-width:1023px){.stats-grid{grid-template-columns:repeat(3,1fr)}.mobile-card-view{display:none}.desktop-only{display:block}.quick-actions{display:none}}@media(min-width:1024px){.stats-grid{grid-template-columns:repeat(5,1fr)}.mobile-card-view{display:none}.desktop-only{display:block}.quick-actions{display:none}.content{padding:24px 32px}.stat-value{font-size:28px}.tab-btn{padding:14px 20px;font-size:14px}.section-header h2{font-size:20px}.pgl-tabel-desktop table{min-width:unset}}.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.topbar-left{display:flex;align-items:center;gap:10px;min-width:0}.topbar-brand{display:flex;align-items:center;gap:6px;font-size:16px;font-weight:700;white-space:nowrap}.brand-text{display:block}.topbar-center{display:flex;justify-content:center}.topbar-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.topbar-user-card{display:flex;align-items:center;gap:8px;background:#ffffff1f;border:1px solid rgba(255,255,255,.18);padding:6px 12px 6px 8px;border-radius:40px;cursor:default;transition:background .2s}.user-avatar-icon{font-size:20px;line-height:1}.topbar-user-info{display:flex;flex-direction:column;line-height:1.25}.topbar-nama{font-size:13px;font-weight:700;color:#fff}.topbar-username{font-size:11px;color:#ffffffa6}.btn-logout-icon{display:flex;align-items:center;gap:6px;padding:8px 14px;background:#ef44442e;color:#fca5a5;border:1px solid rgba(239,68,68,.3);border-radius:40px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;min-height:40px;white-space:nowrap}.btn-logout-icon:hover,.btn-logout-icon:active{background:var(--danger);color:#fff;border-color:var(--danger)}.logout-icon{font-size:16px}.notif-badge{display:inline-flex;align-items:center;gap:6px;background:#fef3c7;color:#92400e;border:1px solid #fcd34d;padding:5px 14px;border-radius:40px;font-size:12px;font-weight:600;cursor:pointer;animation:pulse-badge 2s ease-in-out infinite}@keyframes pulse-badge{0%,to{box-shadow:0 0 #f59e0b66}50%{box-shadow:0 0 0 6px #f59e0b00}}@media(max-width:767px){.topbar{grid-template-columns:auto 1fr auto;padding:0 10px}.brand-text,.topbar-username{display:none}.topbar-nama{font-size:12px}.topbar-user-card{padding:5px 8px;gap:5px}.user-avatar-icon{font-size:18px}.logout-text{display:none}.btn-logout-icon{padding:8px 10px;gap:0}.notif-badge{font-size:11px;padding:4px 10px}}@media(max-width:380px){.topbar-user-card{display:none}}.reminder-banner{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#fffbeb,#fef3c7);border:1px solid #fcd34d;border-left:4px solid #f59e0b;border-radius:var(--border-radius);padding:12px 16px;margin-bottom:16px;font-size:13px;color:#78350f;flex-wrap:wrap}.reminder-icon{font-size:20px;flex-shrink:0}#reminder-banner-text{flex:1;font-weight:500;min-width:150px}.reminder-action-btn{background:#f59e0b;color:#fff;border:none;padding:6px 14px;border-radius:40px;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;min-height:32px;transition:background .2s}.reminder-action-btn:hover{background:#d97706}.reminder-item{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--gray-100);gap:12px;flex-wrap:wrap}.reminder-item:last-child{border-bottom:none}.reminder-item-left{flex:1;min-width:0}.reminder-kamar{font-size:15px;font-weight:700;color:var(--primary)}.reminder-nama{font-size:13px;color:var(--gray-600);margin-top:2px}.reminder-item-right{text-align:right;flex-shrink:0}.reminder-checkout{font-size:13px;font-weight:600;color:var(--danger)}.reminder-sisa{font-size:11px;color:var(--gray-500);margin-top:2px}.reminder-wa-btn{display:inline-flex;align-items:center;gap:5px;margin-top:6px;background:#25d366;color:#fff;border:none;padding:5px 12px;border-radius:40px;font-size:11px;font-weight:600;cursor:pointer;min-height:28px;text-decoration:none;transition:background .2s}.reminder-wa-btn:hover{background:#1da851}.reminder-empty{text-align:center;padding:32px 20px;color:var(--gray-400);font-size:14px}.n8n-status{display:inline-flex;align-items:center;gap:5px;font-size:11px;padding:3px 10px;border-radius:20px;font-weight:600;margin-left:8px}.n8n-status.ok{background:#d1fae5;color:#065f46}.n8n-status.error{background:#fee2e2;color:#991b1b}.n8n-status.sending{background:#e0e7ff;color:#3730a3}.reminder-urgent{background:#fff7ed;border-left:3px solid var(--danger)}.text-danger{color:var(--danger);font-weight:600}.maintenance-banner{position:sticky;top:0;z-index:300;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:0;box-shadow:0 2px 8px #d9770659;animation:slideDown .3s ease}@keyframes slideDown{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}.maintenance-inner{display:flex;align-items:center;gap:12px;padding:10px 20px;max-width:1400px;margin:0 auto}.maintenance-icon{font-size:20px;flex-shrink:0}.maintenance-text{flex:1;font-size:13px;line-height:1.4}.maintenance-text strong{display:block;font-size:14px;margin-bottom:2px}.maintenance-dismiss{background:#fff3;border:1px solid rgba(255,255,255,.3);color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:14px;flex-shrink:0;transition:background .2s;min-height:auto;display:flex;align-items:center;justify-content:center}.maintenance-dismiss:hover{background:#ffffff59}@media(max-width:480px){.maintenance-inner{padding:10px 12px;gap:8px}.maintenance-text{font-size:12px}.maintenance-text strong{font-size:13px}}.settings-card{background:#fff;border-radius:var(--border-radius);border:1px solid var(--gray-200);margin-bottom:20px;overflow:hidden}.settings-card-header{display:flex;align-items:flex-start;gap:14px;padding:18px 20px;border-bottom:1px solid var(--gray-100);background:var(--gray-50)}.settings-icon{font-size:28px;flex-shrink:0;margin-top:2px}.settings-card-header h3{font-size:16px;font-weight:700;margin-bottom:4px;color:var(--gray-800)}.settings-card-header p{font-size:13px;color:var(--gray-500);line-height:1.5}.settings-card-body{padding:20px}.settings-actions{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--gray-100)}.saved-info{font-size:13px;color:var(--success);font-weight:600;animation:fadeInOut 3s ease forwards}@keyframes fadeInOut{0%{opacity:0}15%{opacity:1}75%{opacity:1}to{opacity:0}}.webhook-row{margin-bottom:8px}.webhook-divider{height:1px;background:var(--gray-100);margin:20px 0}.webhook-label-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}.webhook-info{flex:1;display:flex;align-items:center;gap:8px}.webhook-info strong{font-size:14px;color:var(--gray-800)}.webhook-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.5px;font-family:monospace}.badge-get{background:#d1fae5;color:#065f46}.badge-post{background:#e0e7ff;color:#3730a3}.webhook-url-row{display:flex;gap:8px;align-items:center}.webhook-url-row input{flex:1;padding:10px 14px;border:1.5px solid var(--gray-200);border-radius:var(--border-radius-sm);font-size:13px;font-family:Courier New,monospace;background:var(--gray-50);transition:border-color .2s}.webhook-url-row input:focus{border-color:var(--primary);outline:none;background:#fff}.btn-test-webhook{padding:10px 14px;background:var(--gray-100);border:1px solid var(--gray-200);border-radius:var(--border-radius-sm);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .2s;min-height:42px}.btn-test-webhook:hover{background:var(--gray-200)}.webhook-help{font-size:12px;color:var(--gray-500);margin-top:8px;line-height:1.6;padding:8px 12px;background:var(--gray-50);border-radius:8px;border-left:3px solid var(--gray-300)}.webhook-help code{background:var(--gray-200);padding:1px 5px;border-radius:3px;font-family:monospace;font-size:11px}.btn-icon-edit{background:none;border:1px solid var(--gray-200);border-radius:8px;padding:4px 8px;cursor:pointer;font-size:14px;min-height:auto;transition:background .2s}.btn-icon-edit:hover{background:var(--gray-100)}.toggle-label{display:flex;align-items:center;cursor:pointer;flex-shrink:0}.toggle-input{display:none}.toggle-track{width:44px;height:24px;background:var(--gray-300);border-radius:12px;position:relative;transition:background .2s}.toggle-track:after{content:"";position:absolute;width:18px;height:18px;background:#fff;border-radius:50%;top:3px;left:3px;transition:left .2s;box-shadow:0 1px 3px #0003}.toggle-input:checked+.toggle-track{background:var(--primary)}.toggle-input:checked+.toggle-track:after{left:23px}.endpoint-list{display:flex;flex-direction:column;gap:12px}.endpoint-item{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;gap:6px 10px;align-items:center;padding:12px;background:var(--gray-50);border-radius:10px;border:1px solid var(--gray-200)}.endpoint-method{padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;font-family:monospace;letter-spacing:.5px;grid-row:1}.endpoint-method.get{background:#d1fae5;color:#065f46}.endpoint-method.post{background:#e0e7ff;color:#3730a3}.endpoint-url{font-family:Courier New,monospace;font-size:12px;background:#fff;padding:4px 8px;border-radius:6px;border:1px solid var(--gray-200);color:var(--primary);grid-row:1;word-break:break-all}.btn-copy-endpoint{background:none;border:1px solid var(--gray-200);border-radius:6px;padding:4px 8px;cursor:pointer;font-size:14px;min-height:auto;grid-row:1;transition:background .2s}.btn-copy-endpoint:hover{background:var(--gray-200)}.endpoint-desc{grid-column:1 / -1;font-size:12px;color:var(--gray-500);line-height:1.5;grid-row:2}.room-action-tabs{display:flex;gap:4px;background:var(--gray-100);padding:4px;border-radius:12px;margin-bottom:20px}.room-tab-btn{flex:1;padding:10px;border:none;background:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;color:var(--gray-500);transition:all .2s;min-height:40px}.room-tab-btn.active{background:#fff;color:var(--primary);box-shadow:0 1px 4px #00000014}.room-tab-btn:hover:not(.active){color:var(--gray-700)}.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:480px){.form-row-2{grid-template-columns:1fr}}.form-divider{text-align:center;font-size:12px;color:var(--gray-400);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin:16px 0;position:relative}.form-divider:before,.form-divider:after{content:"";position:absolute;top:50%;width:calc(50% - 70px);height:1px;background:var(--gray-200)}.form-divider:before{left:0}.form-divider:after{right:0}.kamar-nama-sub{font-size:11px;color:var(--gray-400);margin-top:2px}.harga-custom-badge{display:inline-block;font-size:10px;background:#e0e7ff;color:#3730a3;padding:1px 6px;border-radius:4px;font-weight:600;margin-left:4px}.level-pill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;margin-left:6px}.level-pill.superadmin{background:#fef3c7;color:#92400e}.level-pill.premium{background:#ede9fe;color:#5b21b6}.level-pill.free{background:#ffffff26;color:#ffffffbf;border:1px solid rgba(255,255,255,.2)}.upgrade-notice{display:flex;align-items:center;gap:10px;background:linear-gradient(135deg,#ede9fe,#dbeafe);border:1px solid #c4b5fd;border-radius:var(--border-radius);padding:16px 20px;margin-bottom:20px;font-size:14px;color:#4c1d95}.modal-upgrade-panel{max-width:860px!important}.upgrade-modal-body{padding:20px}.upgrade-subtitle{text-align:center;color:var(--gray-500);font-size:14px;margin-bottom:20px}.upgrade-paket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-bottom:20px}.upgrade-card{border:2px solid var(--gray-200);border-radius:16px;padding:20px;position:relative;background:var(--white);transition:box-shadow .2s,border-color .2s;display:flex;flex-direction:column;gap:12px}.upgrade-card:hover{box-shadow:0 4px 20px #0000001a}.upgrade-card.featured{border-color:#4f46e5;box-shadow:0 4px 20px #4f46e526}.upgrade-card.current{border-color:var(--success);background:#f0fdf4}.upgrade-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;white-space:nowrap}.upgrade-card-header h3{font-size:18px;font-weight:700;color:var(--gray-900)}.upgrade-price{display:flex;align-items:baseline;gap:4px;margin-top:6px}.price-free{font-size:24px;font-weight:800;color:var(--success)}.price-main{font-size:28px;font-weight:800;color:#4f46e5}.price-period{font-size:13px;color:var(--gray-500)}.price-yearly{font-size:12px;color:var(--success);font-weight:600;margin-top:2px}.upgrade-desc{font-size:13px;color:var(--gray-500);line-height:1.5}.upgrade-fitur{list-style:none;display:flex;flex-direction:column;gap:6px;flex:1}.upgrade-fitur li{font-size:13px;color:var(--gray-700)}.upgrade-card-footer{margin-top:auto}.btn-upgrade-action{width:100%;padding:12px;border:none;border-radius:40px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff}.btn-upgrade-action:hover:not(:disabled){filter:brightness(1.1);transform:scale(.99)}.btn-upgrade-action:disabled{opacity:.6;cursor:not-allowed;background:var(--gray-300);color:var(--gray-600)}.btn-upgrade-action.current{background:var(--success);color:#fff}.btn-upgrade-action.pending{background:#f59e0b;color:#fff}.upgrade-status-info{border-radius:10px;padding:12px 16px;font-size:13px;margin-bottom:16px;display:flex;gap:8px;align-items:flex-start}.upgrade-status-info.pending{background:#fef3c7;color:#92400e;border:1px solid #fcd34d}.upgrade-status-info.approved{background:#d1fae5;color:#065f46;border:1px solid #6ee7b7}.upgrade-kontak-info{grid-column:1 / -1;background:#f8fafc;border-radius:12px;padding:16px 20px;border:1px solid var(--gray-200)}.upgrade-kontak-info h4{font-size:14px;font-weight:700;margin-bottom:6px}.upgrade-kontak-info p{font-size:13px;color:var(--gray-600);margin-bottom:12px}.btn-wa-upgrade,.btn-email-upgrade{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:40px;font-size:13px;font-weight:600;text-decoration:none;margin-right:8px;margin-top:4px;transition:filter .2s}.btn-wa-upgrade{background:#25d366;color:#fff}.btn-email-upgrade{background:#3b82f6;color:#fff}.btn-wa-upgrade:hover,.btn-email-upgrade:hover{filter:brightness(.9)}.upgrade-strip{background:linear-gradient(135deg,#eef2ff,#ede9fe);border:1px solid #c4b5fd;border-radius:var(--border-radius);padding:14px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}.upgrade-strip-text{font-size:13px;color:#4c1d95;flex:1;min-width:180px}.upgrade-strip-text strong{display:block;font-size:14px;margin-bottom:2px}.btn-strip-upgrade{padding:8px 18px;background:linear-gradient(135deg,#4f46e5,#7c3aed);color:#fff;border:none;border-radius:40px;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap;transition:filter .2s;min-height:36px}.btn-strip-upgrade:hover{filter:brightness(1.1)}.upgrade-loading,.upgrade-error{text-align:center;padding:40px;color:var(--gray-400);font-size:14px}@media(max-width:640px){.upgrade-paket-grid{grid-template-columns:1fr}.modal-upgrade-panel{max-width:100%!important}}.api-key-box{background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}.api-key-value{flex:1;font-family:Courier New,monospace;font-size:13px;color:#1e293b;word-break:break-all;min-width:0;background:none;border:none;padding:0}.api-key-actions{display:flex;gap:8px;flex-shrink:0}@media(max-width:600px){.api-key-box{flex-direction:column;align-items:stretch}.api-key-actions{justify-content:flex-end}}.pgl-badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600}.pgl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle}.pgl-tabel-desktop{display:block}.pgl-tabel-desktop .overflow-x-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.pgl-tabel-desktop table{min-width:480px}.pgl-tabel-desktop thead tr{background:#f8fafc}.pgl-tabel-desktop th{padding:10px 14px;text-align:left;font-size:11px;font-weight:700;color:var(--gray-500);text-transform:uppercase;letter-spacing:.4px;border-bottom:2px solid var(--gray-200)}.pgl-tabel-desktop td{padding:10px 14px;font-size:13px;border-bottom:1px solid var(--gray-100);vertical-align:middle;min-width:unset}.pgl-tabel-desktop tr:last-child td{border-bottom:none}.pgl-tabel-desktop tr:hover td{background:#fafbfc}.pgl-cards-mobile{display:none}.pgl-card{background:#fff;border:1px solid var(--gray-200);border-radius:var(--border-radius);padding:14px;margin-bottom:10px;box-shadow:0 1px 3px #0000000d}.pgl-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.pgl-card-tgl{font-size:12px;color:var(--gray-500)}.pgl-card-ket{font-size:13px;color:var(--gray-700);margin-bottom:10px;line-height:1.4}.pgl-card-bot{display:flex;justify-content:space-between;align-items:center}.pgl-card-jml{font-size:15px;font-weight:700;color:var(--danger)}.pgl-card-actions{display:flex;gap:6px}#pgl-kat-tbody td:nth-child(4){color:var(--gray-400);font-size:12px}@media(max-width:767px){.pgl-tabel-desktop{display:none!important}.pgl-cards-mobile{display:block!important}}@media(min-width:768px){.pgl-tabel-desktop{display:block!important}.pgl-cards-mobile{display:none!important}}.profil-grid{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}.profil-info-block{display:flex;align-items:center;gap:16px;flex:1;min-width:200px}.profil-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;font-size:28px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}.profil-meta{display:flex;flex-direction:column;gap:4px}.profil-nama{font-size:18px;font-weight:700;color:var(--gray-800)}.profil-username{font-size:13px;color:var(--gray-500)}.level-badge-lg{display:inline-block;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:700;margin-top:4px}.badge-level-free{background:#f1f5f9;color:#475569}.badge-level-premium{background:#ede9fe;color:#5b21b6}.badge-level-admin{background:#fef3c7;color:#92400e}.badge-level-blocked{background:#fee2e2;color:#991b1b}.profil-stats{display:flex;flex-direction:column;gap:10px;flex:1;min-width:180px}.profil-stat-item{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:var(--gray-50);border-radius:8px;font-size:13px}.profil-stat-label{color:var(--gray-500)}.profil-stat-value{font-weight:600;color:var(--gray-800)}.input-with-toggle{position:relative;display:flex;align-items:center}.input-with-toggle input{flex:1;padding-right:44px}.input-with-toggle .toggle-password{position:absolute;right:10px;background:none;border:none;cursor:pointer;font-size:16px;min-height:unset;min-width:unset;padding:4px;opacity:.6}.input-with-toggle .toggle-password:hover{opacity:1}.pw-strength-bar{height:4px;background:var(--gray-200);border-radius:2px;margin-top:8px;overflow:hidden}.pw-strength-fill{height:100%;border-radius:2px;transition:width .3s,background .3s}.paket-info-grid{display:flex;flex-direction:column;gap:10px}.paket-fitur-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;border:1px solid var(--gray-200);background:#fff}.paket-aktif{border-color:#d1fae5;background:#f0fdf4}.paket-locked{border-color:var(--gray-200);background:var(--gray-50);opacity:.7}.paket-fitur-icon{font-size:20px;width:28px;text-align:center;flex-shrink:0}.paket-fitur-info{flex:1;display:flex;flex-direction:column;gap:2px}.paket-fitur-info strong{font-size:13px;color:var(--gray-800)}.paket-fitur-info span{font-size:12px;color:var(--gray-500)}.paket-fitur-status{font-size:16px;flex-shrink:0}.paket-fitur-status.ok{color:#10b981}.paket-fitur-status.lock{color:var(--gray-400)}.upgrade-cta-box{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 20px;background:linear-gradient(135deg,#ede9fe,#dbeafe);border-radius:12px;border:1px solid #c4b5fd;flex-wrap:wrap}.upgrade-cta-text{display:flex;flex-direction:column;gap:4px}.upgrade-cta-text strong{font-size:14px;color:#4c1d95}.upgrade-cta-text span{font-size:13px;color:#5b21b6}@media(max-width:767px){.profil-grid{flex-direction:column}.profil-info-block,.upgrade-cta-box{flex-direction:column;text-align:center}.upgrade-cta-box .btn{width:100%}}.modal-scrollable .modal{max-height:90vh;display:flex;flex-direction:column}.modal-scrollable .modal-body{overflow-y:auto;flex:1;min-height:0}.settings-card-body .form-group,.settings-card-body .input-with-toggle{max-width:600px}.settings-card-body .profil-grid{max-width:100%}@keyframes pulse-cta{0%,to{transform:scale(1);box-shadow:none}50%{transform:scale(1.04);box-shadow:0 4px 16px #2563eb40}}.quick-action-btn.pulse-hint{animation:pulse-cta 2s ease-in-out 3}.harga-custom-count{font-size:12px;color:var(--gray-500);margin-top:4px}.harga-custom-count strong{color:var(--primary)}