:root{
    color-scheme:dark;
    --bg:#070B14;
    --bg2:#0D1322;
    --surface:#111827;
    --surface2:#182234;
    --surface3:#202D43;
    --text:#F8FAFC;
    --textSoft:#94A3B8;
    --textMuted:#64748B;
    --primary:#6D5DFC;
    --primary2:#4F46E5;
    --secondary:#00C2FF;
    --success:#22C55E;
    --warning:#F59E0B;
    --danger:#EF4444;
    --border:rgba(255,255,255,.08);
    --borderStrong:rgba(255,255,255,.14);
    --radius:16px;
    --radiusSmall:12px;
    --radiusLarge:20px;
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --shadowHover:0 20px 50px rgba(0,0,0,.45);
    --shadowSoft:0 1px 0 rgba(255,255,255,.04) inset,0 6px 16px rgba(0,0,0,.25);

    /* spacing scale */
    --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;--sp-6:24px;--sp-8:32px;--sp-10:40px;

    --sidebarWidth:236px;
    --topbarHeight:52px;
    --transition:.22s cubic-bezier(.2,.8,.2,1);
}

/* ─── PRO Mode ─── */
.mode-pro{--proPrimary:#F59E0B;--proPrimary2:#D97706;--proAccent:#FCD34D;--proBg:radial-gradient(circle at top left,#78350F30,transparent 35%),radial-gradient(circle at bottom right,#F59E0B20,transparent 30%),linear-gradient(180deg,#070B14,#0B1220 55%,#0A0F1C);}
.mode-pro .sidebar-item.active{background:rgba(245,158,11,.13)!important;color:var(--proPrimary)!important;}
.mode-pro .sidebar-item.active::before{background:var(--proPrimary)!important;}
.mode-pro .btn-primary{background:linear-gradient(135deg,#F59E0B,#D97706)!important;color:#fff!important;}
.mode-pro .btn-primary:hover{box-shadow:0 6px 20px rgba(245,158,11,.35)!important;}
.mode-pro .logo-icon{background:linear-gradient(135deg,#F59E0B,#D97706)!important;}
.mode-pro .glow-1{background:#F59E0B!important;}
.mode-pro .badge-primary{background:rgba(245,158,11,.15)!important;color:var(--proPrimary)!important;}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{width:100%;min-height:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:"Inter",sans-serif;-webkit-font-smoothing:antialiased;}
body{position:relative;font-size:14px;line-height:1.5;}
body.dark{background:radial-gradient(circle at top left,#312E8130,transparent 35%),radial-gradient(circle at bottom right,#06B6D430,transparent 30%),linear-gradient(180deg,#070B14,#0B1220 55%,#0A0F1C);}
body.mode-pro{background:radial-gradient(circle at top left,#78350F30,transparent 35%),radial-gradient(circle at bottom right,#F59E0B20,transparent 30%),linear-gradient(180deg,#070B14,#0B1220 55%,#0A0F1C)!important;}
::selection{background:var(--primary);color:#fff;}
a{color:inherit;text-decoration:none;}
button,input,textarea,select{font:inherit;outline:none;border:none;}
button{cursor:pointer;}
img{display:block;max-width:100%;}
h1,h2,h3,h4{letter-spacing:-.01em;}

/* ─── Background ─── */
.background-glow{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.glow{position:absolute;border-radius:999px;filter:blur(90px);opacity:.16;animation:glowFloat 9s ease-in-out infinite;}
.glow-1{width:350px;height:350px;top:-120px;left:-80px;background:#6D5DFC;}
.glow-2{width:380px;height:380px;right:-150px;bottom:-120px;background:#00C2FF;animation-delay:4s;}
.grid-overlay{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(circle,#fff 30%,transparent 100%);}
@keyframes glowFloat{0%,100%{transform:translate(0,0);}50%{transform:translate(20px,-20px);}}

/* Dashboard uses the root background layer so it never follows the sidebar,
   content wrapper, max-width container, or header geometry. */
body.dashboard-page{background-attachment:fixed;}
body.dashboard-page .background-glow{
    position:fixed;
    inset:0;
    width:100%;
    min-height:100dvh;
    overflow:hidden;
    pointer-events:none;
    z-index:0;
}
body.dashboard-page .site-footer{position:relative;z-index:2;}
body.dashboard-page .glow{filter:none;opacity:.13;}
body.dashboard-page .glow-1{background:radial-gradient(circle closest-side,#6D5DFC66,transparent 72%);}
body.dashboard-page .glow-2{background:radial-gradient(circle closest-side,#00C2FF55,transparent 72%);}

/* ─── Loader ─── */
#page-loader{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:var(--bg);transition:opacity .35s ease,visibility .35s ease;}
#page-loader.hide{opacity:0;visibility:hidden;}
.loader-card{text-align:center;}
.loader-logo{width:64px;height:64px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:800;background:linear-gradient(135deg,#6D5DFC,#00C2FF);border-radius:18px;color:#fff;animation:pulse 1.2s ease-in-out infinite;}
.loader-text strong{display:block;font-size:16px;color:var(--text);}
.loader-text span{display:block;font-size:13px;color:var(--textMuted);margin-top:4px;}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.05);opacity:.85;}}

/* ─── Animations ─── */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes slideRight{from{opacity:0;transform:translateX(-16px);}to{opacity:1;transform:translateX(0);}}
@keyframes scaleIn{from{opacity:0;transform:scale(.96);}to{opacity:1;transform:scale(1);}}
@keyframes shimmer{0%{background-position:-200% 0;}100%{background-position:200% 0;}}
.fade-up{animation:fadeUp .4s var(--transition);}
.fade-in{animation:fadeIn .3s ease;}
.scale-in{animation:scaleIn .3s var(--transition);}
.slide-right{animation:slideRight .35s var(--transition);}
.hover-lift{transition:transform var(--transition),box-shadow var(--transition);}
.hover-lift:hover{transform:translateY(-3px);box-shadow:var(--shadowHover);}

/* Skeleton loading */
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:var(--radiusSmall);min-height:16px;}

/* ─── App Layout ─── */
.app{display:flex;min-height:100vh;position:relative;z-index:2;}
.content{flex:1;margin-left:var(--sidebarWidth);padding:22px 28px 40px;transition:var(--transition);max-width:1440px;}

/* ─── Sidebar ─── */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:var(--sidebarWidth);background:rgba(11,16,29,.92);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:100;transition:transform var(--transition),visibility var(--transition);overflow-y:auto;}

/* Collapsed (mobile-friendly sidebar hiding) */
.sidebar.collapsed{transform:translateX(-100%);visibility:hidden;}
.sidebar.collapsed ~ .content{margin-left:0;}

/* Dim backdrop behind the sidebar when open on mobile (visual only, no markup/JS change needed) */
@media(max-width:768px){
    .sidebar.open{box-shadow:100vmax 0 0 100vmax rgba(4,7,15,.6);}
}

.sidebar-header{padding:18px 20px;border-bottom:1px solid var(--border);}
.sidebar-logo{display:flex;align-items:center;gap:11px;}
.logo-icon{width:36px;height:36px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#6D5DFC,#00C2FF);border-radius:10px;font-size:18px;color:#fff;flex-shrink:0;}
.logo-text strong{display:block;font-size:14.5px;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.logo-text span{display:block;font-size:10.5px;color:var(--textMuted);margin-top:1px;}
.sidebar-nav{padding:14px 12px;flex:1;display:flex;flex-direction:column;gap:1px;}
.sidebar-item{position:relative;display:flex;align-items:center;gap:11px;padding:8px 12px 8px 14px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--textSoft);transition:background var(--transition),color var(--transition);}
.sidebar-item:hover{background:var(--surface);color:var(--text);}
.sidebar-item.active{background:rgba(109,93,252,.12);color:var(--primary);font-weight:600;}
.sidebar-item.active::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:16px;border-radius:0 3px 3px 0;background:var(--primary);}
.sidebar-item i{font-size:15.5px;width:18px;text-align:center;flex-shrink:0;}
.sidebar-group{display:flex;flex-direction:column;}
.sidebar-toggle{width:100%;background:none;border:none;cursor:pointer;text-align:left;font:inherit;}
.sidebar-toggle .sidebar-chevron{margin-left:auto;font-size:12px;width:auto;transition:transform var(--transition);}
.sidebar-group.is-open > .sidebar-toggle .sidebar-chevron{transform:rotate(180deg);}
.sidebar-submenu{display:none;flex-direction:column;gap:1px;padding:2px 0 4px 12px;margin-left:16px;border-left:1px solid var(--border);}
.sidebar-group.is-open > .sidebar-submenu{display:flex;}
.sidebar-subitem{font-size:12.5px;padding:6px 12px 6px 12px;border-radius:8px;}
.sidebar-subitem i{font-size:13.5px;width:16px;}
.sidebar-subitem.active::before{height:13px;}
.sidebar-divider{height:1px;background:var(--border);margin:12px 10px;}
.sidebar-section-title{font-size:10px;font-weight:700;color:var(--textMuted);padding:6px 14px 6px;letter-spacing:.7px;text-transform:uppercase;}
.sidebar-footer{padding:14px 16px;border-top:1px solid var(--border);}
.sidebar-user{display:flex;align-items:center;gap:9px;}
.sidebar-avatar{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--surface);color:var(--textSoft);flex-shrink:0;}
.sidebar-user-info{min-width:0;}
.sidebar-user-info strong{display:block;font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sidebar-user-info span{display:block;font-size:10.5px;color:var(--textMuted);}

/* ─── Topbar ─── */
.topbar{display:flex;flex-direction:column;gap:12px;padding:0 0 20px;margin-bottom:4px;border-bottom:1px solid var(--border);}
.topbar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.topbar-button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:transparent;color:var(--textSoft);font-size:17px;transition:background var(--transition),color var(--transition);flex-shrink:0;border:none;cursor:pointer;}
.topbar-button:hover{background:var(--surface);color:var(--text);}
.topbar-heading{font-size:19px;font-weight:700;color:var(--text);margin:0;white-space:nowrap;letter-spacing:-.01em;}
.topbar-search{background:var(--surface);border:1px solid var(--border);border-radius:9px;padding:8px 14px;font-size:13px;color:var(--text);width:100%;max-width:320px;transition:border var(--transition),box-shadow var(--transition);}
.topbar-search:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(109,93,252,.15);}
.topbar-search::placeholder{color:var(--textMuted);}
.topbar-actions{display:flex;gap:2px;}
.topbar-mode-switch{display:flex;gap:4px;}

/* ─── Cards ─── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;transition:border-color var(--transition),box-shadow var(--transition);}
.card:hover{border-color:var(--borderStrong);}
.card-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px;gap:10px;}
.card-title h2{font-size:15px;font-weight:700;color:var(--text);margin:0;}
.card-title p{font-size:12px;color:var(--textMuted);margin-top:2px;}
.mb-3{margin-bottom:16px;}
.mb-2{margin-bottom:10px;}
.mt-1{margin-top:4px;}
.mt-2{margin-top:8px;}
.mt-3{margin-top:16px;}
.mt-4{margin-top:22px;}

/* ─── Page Title (compact page headings) ─── */
.page-title{font-size:19px;font-weight:700;line-height:1.2;margin:0;letter-spacing:-.01em;}
.page-subtitle{font-size:12.5px;color:var(--textMuted);margin-top:4px;}

/* ─── Service Row (replaces nested cards in health/monitoring) ─── */
.service-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);gap:10px;}
.service-row:last-child{border-bottom:none;}
.service-row-label{font-size:12.5px;color:var(--textSoft);}
.service-row-value{font-size:13px;font-weight:600;color:var(--text);}

/* ─── Info Grid (compact 2-col key-value) ─── */
.info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;}
.info-item{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;transition:border-color var(--transition);}
.info-item:hover{border-color:var(--borderStrong);}
.info-item .info-label{font-size:10px;color:var(--textMuted);font-weight:600;text-transform:uppercase;letter-spacing:.4px;}
.info-item .info-val{font-size:13px;font-weight:600;color:var(--text);margin-top:3px;word-break:break-word;}

/* ─── Stats Grid ─── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.stat-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--radiusSmall);padding:14px 16px;transition:border-color var(--transition),transform var(--transition),box-shadow var(--transition);overflow:hidden;}
.stat-card:hover{border-color:var(--borderStrong);box-shadow:var(--shadow);transform:translateY(-2px);}
.stat-label{font-size:10.5px;color:var(--textMuted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
.stat-value{font-size:24px;font-weight:800;color:var(--text);margin:6px 0 4px;line-height:1.1;letter-spacing:-.02em;}
.stat-footer{font-size:11px;color:var(--textSoft);display:flex;align-items:center;gap:6px;}

/* ─── Buttons ─── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 18px;border-radius:9px;font-size:13px;font-weight:600;transition:filter var(--transition),box-shadow var(--transition),transform var(--transition),background var(--transition),border-color var(--transition);border:none;cursor:pointer;white-space:nowrap;}
.btn-primary{background:linear-gradient(135deg,#6D5DFC,#4F46E5);color:#fff;}
.btn-primary:hover{box-shadow:0 6px 20px rgba(109,93,252,.35);filter:brightness(1.05);}
.btn-secondary{background:var(--surface2);border:1px solid var(--border);color:var(--text);}
.btn-secondary:hover{background:var(--surface3);border-color:var(--borderStrong);}
.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{box-shadow:0 4px 16px rgba(34,197,94,.3);}
.btn-warning{background:var(--warning);color:#fff;}
.btn-warning:hover{box-shadow:0 4px 16px rgba(245,158,11,.3);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{box-shadow:0 4px 16px rgba(239,68,68,.3);}
.btn-info{background:var(--secondary);color:#fff;}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:8px;}
.btn-lg{padding:12px 26px;font-size:15px;border-radius:10px;}

/* ─── Badges ─── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;}
.badge-success{background:rgba(34,197,94,.15);color:var(--success);}
.badge-warning{background:rgba(245,158,11,.15);color:var(--warning);}
.badge-danger{background:rgba(239,68,68,.15);color:var(--danger);}
.badge-info{background:rgba(0,194,255,.15);color:var(--secondary);}
.badge-primary{background:rgba(109,93,252,.15);color:var(--primary);}
.badge-secondary{background:var(--surface2);color:var(--textSoft);}

/* ─── Tables ─── */
.table-wrapper{overflow-x:auto;margin:-4px 0;}
.table{width:100%;border-collapse:collapse;font-size:13px;}
.table th,.table td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border);}
.table th{font-size:10.5px;font-weight:700;color:var(--textMuted);text-transform:uppercase;letter-spacing:.5px;user-select:none;background:var(--bg2);}
.table th:first-child{border-top-left-radius:8px;}
.table th:last-child{border-top-right-radius:8px;}
.table tr:last-child td{border-bottom:none;}
.table tr{transition:background var(--transition);}
.table tr:hover td{background:rgba(255,255,255,.025);}
.text-right{text-align:right;}

/* ─── Forms ─── */
.form-control{width:100%;padding:9px 14px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:13px;transition:border var(--transition),box-shadow var(--transition);}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(109,93,252,.15);}
.form-control::placeholder{color:var(--textMuted);}
select.form-control{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2364748B'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;background-size:18px;padding-right:36px;}
textarea.form-control{resize:vertical;min-height:80px;}
label{display:block;font-size:12px;font-weight:600;color:var(--textSoft);margin-bottom:5px;}
input[type="checkbox"]{width:16px;height:16px;cursor:pointer;accent-color:var(--primary);}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}

/* ─── Grid Utilities ─── */
.flex{display:flex;}
.flex-between{display:flex;align-items:center;justify-content:space-between;}
.grid{display:grid;gap:14px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
.grid-auto{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}

/* ─── Text ─── */
.text-muted{color:var(--textMuted);}
.text-soft{color:var(--textSoft);}
.text-success{color:var(--success);}
.text-danger{color:var(--danger);}
.text-center{text-align:center;}

/* ─── Login Page ─── */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative;z-index:2;}
.login-card{max-width:420px;width:100%;padding:40px 36px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radiusLarge);box-shadow:var(--shadowSoft);animation:fadeUp .45s var(--transition);}
.login-card h1{font-size:24px;font-weight:800;text-align:center;letter-spacing:-.01em;}

/* ─── Responsive ─── */
@media(max-width:1024px){
    .grid-3{grid-template-columns:repeat(2,1fr);}
    .grid-4{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:768px){
    .content{padding:14px;margin-left:0;}
    .sidebar{transform:translateX(-100%);visibility:hidden;}
    .sidebar.open{transform:translateX(0);visibility:visible;}
    .sidebar.collapsed{transform:translateX(-100%);visibility:hidden;}
    .grid-2{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:1fr;}
    .grid-4{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .topbar-search{max-width:100%;}
    .stat-value{font-size:19px;}
    .topbar-mode-switch .btn-sm{font-size:10px;padding:2px 6px;}
    .card{padding:13px 14px;}
    .info-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:480px){
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .content{padding:10px;}
    .card{padding:11px 12px;}
    .login-card{padding:24px 20px;}
    .stat-value{font-size:18px;}
}

/* ─── Utilities ─── */
code{background:var(--surface2);padding:2px 6px;border-radius:5px;font-size:12px;color:var(--secondary);}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2);}

/* ─── Notification Bell & Dropdown ─── */
.topbar-notif-wrap{position:relative;}
.topbar-bell{position:relative;}
.notif-badge{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;background:var(--danger);color:#fff;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg);pointer-events:none;}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-height:480px;background:var(--surface2);border:1px solid var(--borderStrong);border-radius:14px;box-shadow:0 20px 50px rgba(0,0,0,.5);z-index:1000;overflow:hidden;animation:fadeIn .18s ease;}
.notif-header{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border);}
.notif-header strong{font-size:14px;}
.notif-list{max-height:400px;overflow-y:auto;}
.notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.04);transition:background var(--transition);cursor:pointer;text-decoration:none;color:var(--text);}
.notif-item:hover{background:rgba(255,255,255,.04);}
.notif-item:last-child{border-bottom:none;}
.notif-content{flex:1;min-width:0;}
.notif-msg{font-size:12px;line-height:1.4;word-break:break-word;}
.notif-time{font-size:10px;color:var(--textMuted);margin-top:3px;}
.notif-empty{padding:30px 14px;text-align:center;color:var(--textMuted);font-size:13px;}

/* ─── Language Button ─── */
.topbar-lang-btn{width:auto;padding:0 8px;gap:2px;font-size:13px;}
.topbar-lang-btn span{font-size:10px;font-weight:700;}

/* ─── Table cell compact ─── */
.table td, .table th{padding:8px 10px;font-size:13px;}
.table th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;}

/* ─── Topbar consistent ─── */
.topbar-row{gap:6px;}
.topbar-mode-switch .btn-sm{font-size:11px;padding:4px 10px;}

/* ─── Footer ─── */
.site-footer{
    border-top:1px solid var(--border);
    padding:22px 32px;
    margin-top:48px;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.site-footer .footer-copyright{
    color:var(--textMuted);
    font-size:13px;
}
.site-footer .footer-links{
    display:flex;
    gap:22px;
    flex-wrap:wrap;
}
.site-footer .footer-links a{
    color:var(--textSoft);
    font-size:13px;
    transition:color var(--transition);
    position:relative;
}
.site-footer .footer-links a:hover{
    color:var(--primary);
}
@media(max-width:640px){
    .site-footer{
        flex-direction:column;
        text-align:center;
        padding:16px 20px;
    }
    .site-footer .footer-links{
        justify-content:center;
        gap:14px;
    }
}

/* ─── Login Page Footer ─── */
.login-body{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
}
.login-footer{
    flex-shrink:0;
    width:100%;
    text-align:center;
    padding:20px 20px 28px;
}
.login-footer p{
    color:var(--textMuted);
    font-size:12px;
    line-height:1.6;
    margin:0;
}
.login-footer .footer-links-login{
    margin-top:6px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:4px 12px;
    font-size:12px;
}
.login-footer .footer-links-login a{
    color:var(--textMuted);
    transition:color var(--transition);
}
.login-footer .footer-links-login a:hover{
    color:var(--primary);
}
.login-footer .footer-separator{
    color:var(--border);
    font-size:10px;
}
@media(max-width:480px){
    .login-footer{
        padding:16px 16px 24px;
    }
    .login-footer .footer-links-login{
        gap:3px 8px;
        font-size:11px;
    }
}
/* ─── Mobile Responsive Hamburger ─── */
@media(max-width:768px){
    .topbar-button#sidebar-toggle{
        width:44px;
        height:44px;
        font-size:22px;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   REDESIGN v2 — Modern, professional visual layer
   FAmotion (indigo/cyan) vs FAmotion Pro (premium gold/black)
   Additive only — does not alter layout or logic.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Refined base backdrop ─── */
body{background:radial-gradient(1200px 600px at -10% -20%,rgba(109,93,252,.18),transparent 60%),radial-gradient(1000px 500px at 110% 110%,rgba(0,194,255,.14),transparent 60%),linear-gradient(180deg,#060912,#0A0F1E 55%,#080C18);}
body.mode-pro{background:radial-gradient(1200px 600px at -10% -20%,rgba(217,119,6,.22),transparent 60%),radial-gradient(1000px 500px at 110% 110%,rgba(252,211,77,.10),transparent 60%),linear-gradient(180deg,#08060A,#12100C 55%,#0A0806)!important;}

/* Subtle noise/grain for premium feel */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}

/* ─── Sidebar polish ─── */
.sidebar{background:linear-gradient(180deg,rgba(13,18,32,.94),rgba(9,13,24,.94));border-right:1px solid rgba(255,255,255,.06);box-shadow:inset -1px 0 0 rgba(255,255,255,.02);}
.sidebar-item{letter-spacing:.01em;}
.sidebar-item:hover{background:rgba(255,255,255,.04);}
.sidebar-item.active{background:linear-gradient(90deg,rgba(109,93,252,.18),rgba(109,93,252,.04));box-shadow:inset 0 0 0 1px rgba(109,93,252,.22);}
.mode-pro .sidebar-item.active{background:linear-gradient(90deg,rgba(245,158,11,.20),rgba(245,158,11,.04))!important;box-shadow:inset 0 0 0 1px rgba(245,158,11,.28)!important;}
.logo-icon{box-shadow:0 8px 20px rgba(109,93,252,.35);}
.mode-pro .logo-icon{box-shadow:0 8px 22px rgba(217,119,6,.45)!important;background:linear-gradient(135deg,#FCD34D,#D97706,#78350F)!important;}

/* ─── Topbar polish ─── */
.topbar{padding:14px 0 18px;border-bottom:1px solid rgba(255,255,255,.06);}
.topbar-heading{color:#fff;}
.mode-pro .topbar-heading{color:#FBBF24;}

/* ═══ Mode Switch (segmented pill) ═══ */
.mode-switch{position:relative;display:inline-flex;align-items:center;gap:2px;padding:4px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 10px rgba(0,0,0,.25);}
.mode-switch-btn{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.01em;color:var(--textSoft);white-space:nowrap;transition:color var(--transition),background var(--transition),box-shadow var(--transition),transform var(--transition);}
.mode-switch-btn i{font-size:13px;}
.mode-switch-btn:hover{color:var(--text);}

/* FAmotion (indigo/cyan) active state */
.mode-switch-famotion.is-active{color:#fff;background:linear-gradient(135deg,#6D5DFC,#4F46E5 55%,#22D3EE);box-shadow:0 6px 18px rgba(109,93,252,.45),inset 0 1px 0 rgba(255,255,255,.18);}

/* FAmotion Pro (premium gold on black) active state */
.mode-switch-pro{position:relative;}
.mode-switch-pro::before{content:"";position:absolute;inset:0;border-radius:999px;padding:1px;background:linear-gradient(135deg,#FDE68A,#F59E0B 40%,#78350F 90%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity var(--transition);pointer-events:none;}
.mode-switch-pro:hover::before{opacity:.6;}
.mode-switch-pro.is-active{color:#1A1005;background:linear-gradient(135deg,#FDE68A 0%,#F59E0B 45%,#B45309 100%);box-shadow:0 8px 22px rgba(217,119,6,.45),inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.15);text-shadow:0 1px 0 rgba(255,255,255,.35);}
.mode-switch-pro.is-active::before{opacity:1;background:linear-gradient(135deg,#FEF3C7,#F59E0B 50%,#78350F 100%);}
.mode-switch-pro.is-active i{filter:drop-shadow(0 1px 1px rgba(120,53,15,.35));}

/* Small screens */
@media(max-width:640px){
    .mode-switch-btn{padding:6px 10px;font-size:11.5px;}
    .mode-switch-btn span{display:inline;}
}

/* ─── Cards elevated ─── */
.card{background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.30);}
.card:hover{border-color:rgba(255,255,255,.12);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 16px 40px rgba(0,0,0,.40);}
.mode-pro .card{border-color:rgba(245,158,11,.10);}
.mode-pro .card:hover{border-color:rgba(245,158,11,.28);box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 16px 40px rgba(0,0,0,.45),0 0 0 1px rgba(245,158,11,.08);}

/* ─── Stat cards get a subtle accent bar ─── */
.stat-card{background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0)),var(--surface);}
.stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:linear-gradient(180deg,#6D5DFC,#22D3EE);opacity:.85;}
.mode-pro .stat-card::before{background:linear-gradient(180deg,#FDE68A,#D97706)!important;}
.stat-value{background:linear-gradient(180deg,#fff,rgba(255,255,255,.78));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.mode-pro .stat-value{background:linear-gradient(180deg,#FEF3C7,#F59E0B);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}

/* ─── Buttons refined ─── */
.btn{letter-spacing:.01em;}
.btn-primary{background:linear-gradient(135deg,#7C6FFE,#4F46E5);box-shadow:0 6px 18px rgba(109,93,252,.30),inset 0 1px 0 rgba(255,255,255,.14);}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(109,93,252,.42),inset 0 1px 0 rgba(255,255,255,.18);}
.btn-secondary{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);}
.btn-secondary:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);}
.mode-pro .btn-primary{background:linear-gradient(135deg,#FDE68A,#F59E0B 55%,#B45309)!important;color:#1A1005!important;box-shadow:0 8px 22px rgba(217,119,6,.42),inset 0 1px 0 rgba(255,255,255,.5)!important;text-shadow:0 1px 0 rgba(255,255,255,.3);}
.mode-pro .btn-primary:hover{filter:brightness(1.04);transform:translateY(-1px);box-shadow:0 12px 28px rgba(217,119,6,.55),inset 0 1px 0 rgba(255,255,255,.55)!important;}

/* ─── Badges refined ─── */
.mode-pro .badge-primary{background:linear-gradient(135deg,rgba(253,230,138,.20),rgba(245,158,11,.14))!important;color:#FCD34D!important;box-shadow:inset 0 0 0 1px rgba(245,158,11,.28);}

/* ─── Tables refined ─── */
.table th{background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.06);}
.table tr:hover td{background:rgba(255,255,255,.03);}
.mode-pro .table tr:hover td{background:rgba(245,158,11,.05);}

/* ─── Forms focus color follows mode ─── */
.mode-pro .form-control:focus{border-color:#F59E0B!important;box-shadow:0 0 0 3px rgba(245,158,11,.18)!important;}
.mode-pro .topbar-search:focus{border-color:#F59E0B!important;box-shadow:0 0 0 3px rgba(245,158,11,.18)!important;}

/* ─── PRO ambient shimmer on active mode ─── */
.mode-pro .mode-switch-pro.is-active::after{content:"";position:absolute;inset:-2px;border-radius:999px;background:conic-gradient(from 0deg,transparent,rgba(253,230,138,.55),transparent 30%);animation:proSpin 4s linear infinite;filter:blur(6px);opacity:.55;z-index:-1;pointer-events:none;}
@keyframes proSpin{to{transform:rotate(1turn);}}

/* ─── Scrollbar refinement ─── */
*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:10px;}
*::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.16);}
.mode-pro *::-webkit-scrollbar-thumb{background:rgba(245,158,11,.22);}
.mode-pro *::-webkit-scrollbar-thumb:hover{background:rgba(245,158,11,.4);}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE POLISH v2 — mobile-first refinement (append only)
   Fixes: horizontal overflow on mobile, oversized cards clipping
   right edge, inconsistent font scale, loader flicker on page nav.
   ═══════════════════════════════════════════════════════════════ */

/* Global overflow containment — kill any horizontal scroll */
html,body{overflow-x:hidden;max-width:100vw;}
*,*::before,*::after{min-width:0;}
.app,.content,.card,section,main,header{max-width:100%;}
img,video,canvas,svg,iframe{max-width:100%;height:auto;}
pre,code{overflow-x:auto;white-space:pre-wrap;word-break:break-word;}

/* Refined fluid typography scale */
:root{
    --fs-xs:clamp(10px,1.6vw,11px);
    --fs-sm:clamp(11.5px,1.9vw,12.5px);
    --fs-base:clamp(12.5px,2.1vw,13.5px);
    --fs-md:clamp(13.5px,2.3vw,14.5px);
    --fs-lg:clamp(15px,2.6vw,17px);
    --fs-xl:clamp(17px,3vw,20px);
    --fs-2xl:clamp(20px,3.8vw,26px);
    --fs-3xl:clamp(24px,4.6vw,34px);
}
body{font-size:var(--fs-base);}
.topbar-heading{font-size:var(--fs-xl);line-height:1.2;}
.card-title h2{font-size:var(--fs-md);}
.stat-value{font-size:var(--fs-2xl);}
.btn{font-size:var(--fs-sm);}
.btn-sm{font-size:var(--fs-xs);}
.btn-lg{font-size:var(--fs-md);}
.form-control{font-size:var(--fs-sm);}
.table,.table td,.table th{font-size:var(--fs-sm);}
.badge{font-size:var(--fs-xs);}

/* Long strings (emails, IDs) never break layout */
.table td,.info-item .info-val,.notif-msg{overflow-wrap:anywhere;}
/* .card intentionally uses the gentler break-word (not anywhere): "anywhere" was
   forcing flex children (icon + model-name rows) to collapse to near-zero width,
   which split words like "MotionControl" into one letter per line on mobile. */
.card,.stat-card{overflow-wrap:break-word;}

/* Card sizing — prevent oversize on narrow screens */
.card{padding:16px;border-radius:14px;}
.stat-card{padding:14px;border-radius:12px;}

/* Sidebar refinements */
.sidebar{width:var(--sidebarWidth);}
.sidebar-nav{padding:12px 10px;}
.sidebar-item{padding:9px 12px;font-size:13px;}

/* Topbar improvements */
.topbar{padding:12px 0 14px;gap:10px;}
.topbar-row{gap:8px;row-gap:8px;}
.topbar-search{max-width:280px;min-width:0;flex:1 1 180px;}
.mode-switch{flex-wrap:nowrap;}

/* Content padding tuned per breakpoint */
.content{padding:20px 24px 40px;}

/* Grid gap tighter on small */
.grid-2,.grid-3,.grid-4,.grid-auto,.stats-grid,.info-grid{gap:12px;}

/* ───── Tablet (≤1024) ───── */
@media(max-width:1024px){
    .content{padding:18px 20px 36px;}
    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .info-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
}

/* ───── Mobile (≤768) ───── */
@media(max-width:768px){
    body.dashboard-page .glow{display:none;}
    .content{padding:14px 12px 32px;margin-left:0;max-width:100vw;}
    .card{padding:14px;border-radius:12px;}
    .stat-card{padding:12px;}
    .topbar{padding:10px 0 12px;}
    .topbar-row{gap:6px;}
    .topbar-heading{font-size:var(--fs-lg);}
    .topbar-search{max-width:100%;flex:1 1 100%;order:5;}
    .topbar-button{width:32px;height:32px;font-size:15px;}
    .mode-switch{padding:3px;gap:1px;}
    .mode-switch-btn{padding:6px 10px;font-size:11.5px;}
    .mode-switch-btn i{font-size:12px;}
    .mode-switch-btn span{font-size:11px;}
    .table-wrapper{margin:0 -6px;}
    .table th,.table td{padding:8px 10px;font-size:12px;}
    .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
    .stat-value{font-size:19px;}
    .info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
    .info-item{padding:8px 10px;}
    .btn{padding:8px 14px;min-height:40px;}
    .btn-sm{padding:6px 10px;min-height:34px;}
    .btn-lg{min-height:46px;}
    .card-header{flex-wrap:wrap;gap:8px;}
    .flex-between{flex-wrap:wrap;gap:8px;}
    .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
    /* Comfortable tap size for icon-only / nav buttons */
    .topbar-button,.sidebar-item,.notif-item,.mode-switch-btn{min-height:40px;}
    input[type="checkbox"],input[type="radio"]{width:20px;height:20px;}
}

/* ───── Small phones (≤480) ───── */
@media(max-width:480px){
    .content{padding:12px 10px 28px;}
    .card{padding:12px;border-radius:11px;}
    .topbar-heading{font-size:16px;}
    .mode-switch-btn{padding:6px 9px;}
    .mode-switch-btn i{font-size:14px;}
    .stats-grid{grid-template-columns:1fr 1fr;gap:8px;}
    .stat-card{padding:11px;}
    .stat-value{font-size:17px;}
    .info-grid{grid-template-columns:1fr;}
    .btn{padding:8px 12px;font-size:12px;}
    .btn-sm{padding:6px 10px;font-size:11px;}
    .table th,.table td{padding:6px 8px;font-size:11.5px;}
    .notif-dropdown{width:calc(100vw - 20px);right:-6px;}
    .footer-links{gap:8px;font-size:11px;}
    .site-footer{padding:16px;gap:10px;flex-direction:column;text-align:center;}
}

/* ═══ Auth pages polish (login / register) ═══ */
.login-page{padding:24px 16px;min-height:100vh;position:relative;z-index:2;}
.login-body{width:100%;max-width:440px;margin:0 auto;}
.login-card{width:100%;max-width:440px;margin:0 auto;padding:36px 32px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)),var(--surface);border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.06);animation:fadeUp .45s var(--transition);}
.login-card h1{font-size:clamp(22px,3.8vw,26px);font-weight:800;text-align:center;letter-spacing:-.02em;background:linear-gradient(180deg,#fff,rgba(255,255,255,.7));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;}
.login-card .form-control{padding:11px 14px;font-size:13.5px;border-radius:11px;}
.login-card .btn{padding:11px 18px;border-radius:11px;font-size:13.5px;}
.login-footer{width:100%;max-width:440px;margin:20px auto 0;text-align:center;color:var(--textMuted);font-size:11.5px;}
.login-footer p{margin-bottom:6px;}
.footer-links-login{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;}
.footer-links-login a{color:var(--textSoft);transition:color var(--transition);}
.footer-links-login a:hover{color:var(--text);}
.footer-separator{color:var(--textMuted);opacity:.5;}
@media(max-width:480px){
    .login-page{padding:16px 12px;}
    .login-card{padding:26px 20px;border-radius:16px;}
    .login-card h1{font-size:22px;}
}

/* ═══ Loader — smoother, no flicker ═══ */
#page-loader{background:radial-gradient(circle at center,#0B1220,#070B14);transition:opacity .28s ease,visibility .28s ease;}
#page-loader.hide{opacity:0;visibility:hidden;pointer-events:none;}
#page-loader.pending{opacity:0;visibility:hidden;}
.loader-logo{width:56px;height:56px;border-radius:16px;box-shadow:0 12px 30px rgba(109,93,252,.35);}
.mode-pro .loader-logo{box-shadow:0 12px 30px rgba(217,119,6,.4);}
.loader-text strong{font-size:15px;letter-spacing:-.01em;}
.loader-text span{font-size:12px;}

/* Utility: hide long overflow gracefully */
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}


/* ==========================================================
   v4 — Mode labels with subtitle, WIB clock, auth-top, lang pill
   ========================================================== */
.mode-switch-btn .ms-labels{display:flex;flex-direction:column;line-height:1.05;text-align:left;}
.mode-switch-btn .ms-name{font-size:12.5px;font-weight:700;letter-spacing:.1px;}
.mode-switch-btn .ms-sub{font-size:9.5px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;opacity:.7;margin-top:2px;}
.mode-switch-btn.is-active .ms-sub{opacity:.85;}
.mode-switch-pro.is-active .ms-sub{color:#fde68a;opacity:.9;}

.topbar-clock{display:inline-flex;align-items:center;gap:8px;margin-left:auto;padding:6px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);color:var(--textSoft,#cbd5e1);font-size:11.5px;}
.topbar-clock i{font-size:14px;color:#a78bfa;}
.topbar-clock-text{display:flex;flex-direction:column;line-height:1.1;}
.topbar-clock-text .tc-time{font-weight:700;color:#fff;font-size:12px;letter-spacing:.2px;font-variant-numeric:tabular-nums;}
.topbar-clock-text .tc-date{font-size:10px;opacity:.7;margin-top:1px;}
body.mode-pro .topbar-clock i{color:#d4a256;}
body.mode-pro .topbar-clock{border-color:rgba(212,162,86,.25);}

.auth-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 20px 4px;max-width:1200px;margin:0 auto;width:100%;}

/* Lang pill (public pages) */
.lang-pill{display:inline-flex;align-items:center;gap:2px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:4px;}
.lang-pill button{background:transparent;border:0;color:#cbd5e1;padding:5px 12px;border-radius:999px;cursor:pointer;font-weight:700;font-size:11px;letter-spacing:.4px;transition:.2s;}
.lang-pill button:hover{color:#fff;}
.lang-pill button.is-active{background:linear-gradient(135deg,#6D5DFC,#00C2FF);color:#fff;box-shadow:0 4px 12px rgba(109,93,252,.35);}

/* Mobile tightening */
@media (max-width: 640px){
  .topbar-clock{padding:5px 9px;gap:6px;}
  .topbar-clock-text .tc-date{display:none;}
  .topbar-clock i{font-size:13px;}
  .mode-switch-btn .ms-sub{display:none;}
}
@media (max-width: 480px){
  .topbar-clock{margin-left:auto;}
}

/* ============================================================
   v5 — Restructured topbar
   Row1 (sticky): [sidebar-toggle] [title] ... [lang pill] [clock] [bell]
   Divider line (border between row1 & row2)
   Row2 (dashboard-only): centered mode-switch (FAmotion / FAmotion Pro)
   ============================================================ */

.topbar{
    position:sticky;
    top:0;
    z-index:60;
    background:linear-gradient(180deg, rgba(11,16,32,.94) 0%, rgba(11,16,32,.82) 85%, rgba(11,16,32,0) 100%);
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
    padding:10px 0 0;
    margin-bottom:14px;
    border-bottom:0; /* divider moves onto row1 */
    gap:0;
}

/* Dashboard background is handled by the root .background-glow layer,
   so the transparent sticky header keeps its original geometry. */
.topbar--with-modeswitch{
    background:none;
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
}

.topbar-row--main{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:nowrap;
    padding:2px 0 10px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.topbar-row--main .topbar-heading{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
}

.topbar-right{
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    flex-shrink:0;
}

/* Language pill inside the topbar — same look as login page */
.topbar-lang-pill{ flex-shrink:0; }
.topbar-lang-pill button{ padding:4px 10px; font-size:11px; }

/* Clock: no longer pushes itself right — the wrapper does. */
.topbar-row--main .topbar-clock{ margin-left:0; }

/* Row 2 — centered mode-switch, appears only on dashboard */
.topbar-row--modeswitch{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:12px 0 4px;
}
.topbar-row--modeswitch .mode-switch{
    width:auto;
    max-width:100%;
}
.topbar-row--modeswitch .mode-switch-btn{
    padding:8px 22px;
    min-width:0;
}

/* Mobile tweaks: keep the right cluster visible, hide the page title if
   space is tight so bell/clock/lang never wrap or disappear. */
@media (max-width:520px){
    .topbar-right{ gap:6px; }
    .topbar-lang-pill button{ padding:3px 8px; font-size:10.5px; }
    .topbar-row--main .topbar-clock{ padding:5px 8px; }
    .topbar-row--main .topbar-clock-text .tc-date{ display:none; }
    .topbar-row--modeswitch .mode-switch-btn{ padding:8px 18px; }
    .topbar-row--modeswitch .mode-switch-btn .ms-labels{ display:flex; }
    .topbar-row--modeswitch .mode-switch-btn .ms-name{ font-size:12px; }
    .topbar-row--modeswitch .mode-switch-btn .ms-sub{ display:none; }
}
@media (max-width:380px){
    .topbar-row--main .topbar-heading{ font-size:15px; }
    .topbar-row--main .topbar-clock .topbar-clock-text{ display:none; }
    .topbar-row--main .topbar-clock{ padding:6px; }
}

/* Workspace maintenance flash banner */
.workspace-flash{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0 0 14px;border-radius:12px;font-size:13px;line-height:1.4;}
.workspace-flash--warning{background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.3);color:#FDE68A;}
.workspace-flash i.bi-info-circle-fill{font-size:16px;flex-shrink:0;}
.workspace-flash span{flex:1;}
.workspace-flash-close{background:none;border:none;color:inherit;opacity:.7;cursor:pointer;padding:2px;line-height:0;flex-shrink:0;}
.workspace-flash-close:hover{opacity:1;}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET v3 — semua halaman (mobile & desktop)
   Menangani pola yang masih bertabrakan di HP:
   - tabel lebar (inline min-width) → scroll di dalam kartu
   - grid inline kolom tetap → 1 kolom di layar kecil
   - stats-grid inline repeat(3/4/5) → 2 kolom
   - flex inline → boleh wrap, anak bisa menyusut
   ═══════════════════════════════════════════════════════════════ */

/* Tabel lebar di dalam kartu → scroll horizontal di dalam kartu,
   halaman tidak melar ke kanan (mobile & desktop). */
.card table.table,
table.table{ max-width:100%; }

@media(max-width:900px){
    .card table.table,
    .card > table{
        display:block;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }
}

/* Grid inline dengan kolom tetap → 1 kolom di layar kecil. */
@media(max-width:640px){
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr"]{
        grid-template-columns:1fr !important;
    }
}

/* Stats-grid inline repeat(3/4/5) → tetap 2 kolom (tidak 4-5 kolom sempit). */
@media(max-width:1024px){
    [style*="repeat(4,1fr)"],
    [style*="repeat(5,1fr)"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}
@media(max-width:640px){
    [style*="repeat(3,1fr)"]{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
}

/* Flex inline: boleh wrap di HP (cegah tabrakan).
   Tabel dikecualikan agar tetap bisa di-scroll horizontal.
   CATATAN: rule lama "[style*=\"min-width:\"]:not(table){min-width:0 !important;}"
   DIHAPUS dari sini — rule itu memaksa SEMUA min-width inline jadi 0, termasuk
   min-width proteksi yang sengaja dipasang (mis. kartu Motion Control
   min-width:220px) untuk mencegah teks pecah per-huruf. Akibatnya proteksi
   itu malah dibatalkan sendiri oleh rule ini, dan teks seperti "MotionControl"
   kembali collapse ke lebar ~0 lalu overflow-wrap memotongnya per karakter.
   Proteksi min-width yang genuinely perlu di-reset (mis. lebar tabel) sudah
   ditangani terpisah lewat rule .table/.jobs-table di bawah. */
@media(max-width:768px){
    [style*="display:flex"],
    [style*="display: flex"]{
        flex-wrap:wrap;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Tabel HISTORY / MY JOBS → kartu bertumpuk di HP
   Desktop tetap tabel biasa; di HP tiap baris jadi kartu dengan
   label per baris (data-label) supaya tidak bertabrakan.
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
    .jobs-table{ display:block; width:100%; }
    .jobs-table thead{ display:none; }
    .jobs-table tbody{ display:block; }
    .jobs-table tr{
        display:block;
        border:1px solid var(--border);
        border-radius:12px;
        padding:10px 12px;
        margin:0 0 10px;
        background:rgba(255,255,255,.02);
    }
    .jobs-table td{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:10px;
        border:none;
        padding:5px 0;
        font-size:12.5px;
    }
    .jobs-table td::before{
        content:attr(data-label);
        font-weight:700;
        font-size:10px;
        text-transform:uppercase;
        letter-spacing:.4px;
        color:var(--textMuted);
        flex-shrink:0;
        min-width:74px;
    }
    .jobs-table td.job-td-preview{ justify-content:flex-start; }
    .jobs-table td.job-td-prompt{
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
        overflow-wrap:anywhere;
        white-space:normal;
    }
    .jobs-table td.job-td-status{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }
    .jobs-table td.job-td-status .job-progress{
        width:100%;
        max-width:100% !important;
        min-width:0 !important;
        margin-left:0;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET v4 — bantu cell jobs-table di semua halaman
   - input/select harga → lebar wajar di HP (tidak melar/menyempit)
   - baris aksi (tombol) → wrap rapi, tidak bertabrakan
   - teks panjang (prompt/message/metadata) → wrap normal
   - baris accordion provider → tetap kartu walau display:table-row
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:768px){
    .jobs-table td.job-td-input input,
    .jobs-table td.job-td-input select{
        width:100%;
        max-width:260px;
        margin-left:auto;
    }
    .jobs-table td.job-td-actions{
        justify-content:flex-start;
        flex-wrap:wrap;
    }
    .jobs-table td.job-td-actions form{ display:inline-flex; margin:0; }
    .jobs-table td.job-td-stack{
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
    }
    .jobs-table td.job-td-stack .badge{ align-self:flex-start; }
    .jobs-table td.job-td-user{ justify-content:flex-start; flex-wrap:wrap; gap:8px; }
    .jobs-table td.job-td-wrap,
    .jobs-table td.job-td-wrap pre{
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
        overflow-wrap:anywhere;
        white-space:normal;
        max-width:100%;
    }
    .jobs-table td.job-td-wrap pre{ margin:0; width:100%; }
    .jobs-table td.job-td-nowrap{ white-space:nowrap; }
    .jobs-table td.job-td-img{ justify-content:flex-start; }
    .jobs-table tr[style*="table-row"]{ display:block !important; }
}

/* jobs-table: netralkan inline min-width dari tabel lama agar kartu HP
   tidak kepanjang/kebesaran, dan label kosong (baris accordion) disembunyikan */
@media(max-width:768px){
    .jobs-table{ min-width:0 !important; }
    .jobs-table td[data-label=""]::before{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET v6 — tabel info polos (.table)
   - wrapper universal: tabel tidak meluber, bisa di-scroll di HP
   - min-width inline di-reset, th label ber-width tetap dilepas
   - isi sel panjang (invoice/token/date) di-wrap, tidak tabrakan
   Catatan: tidak menyentuh .jobs-table (sudah jadi kartu di HP).
   ═══════════════════════════════════════════════════════════════ */
.table-wrapper{max-width:100%;-webkit-overflow-scrolling:touch;}
@media(max-width:768px){
    .table{min-width:0!important;}
    .table th[width]{width:auto!important;}
    .table:not(.jobs-table) th,
    .table:not(.jobs-table) td{
        white-space:normal!important;
        overflow-wrap:anywhere;
        word-break:break-word;
    }
    .table:not(.jobs-table) th{
        font-size:10px;
        padding:8px 10px;
    }
    .table:not(.jobs-table) td{
        padding:8px 10px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET v7 — root-cause fix untuk teks yang pecah
   jadi satu huruf per baris ("M-o-t-i-o-n-C-o-n-t-r-o-l") di kartu
   berpola [ikon kotak] + [nama model/provider] di seluruh halaman
   (Generate, History, Admin, Providers, Subscription, dst).

   Penyebab: kotak ikon (width+height tetap) ikut menyusut di flex
   row saat sempit, sehingga blok teks di sebelahnya kehabisan ruang
   dan overflow-wrap terpaksa memotong per-huruf.
   Solusi: kotak ikon dikunci ukurannya (flex-shrink:0), blok teks
   diberi ruang untuk menyusut & membungkus per-KATA (min-width:0).
   ═══════════════════════════════════════════════════════════════ */

/* Kotak ikon/thumbnail persegi (width+height px + border-radius) tidak
   pernah ikut menyusut dan merebut ruang dari teks di sebelahnya. */
[style*="px;height:"][style*="border-radius"]{ flex-shrink:0; }

/* Blok teks di sebelah ikon boleh menyusut di bawah lebar kontennya,
   supaya teks bungkus per-kata (bukan overflow-wrap:anywhere per-huruf). */
.flex > div:not([style*="width:"]),
[style*="display:flex"] > div:not([style*="width:"]),
[style*="display: flex"] > div:not([style*="width:"]){
    min-width:0;
}

/* Judul/nama model di dalam kartu: patahkan hanya jika benar-benar perlu
   (per kata dulu), tidak pernah per-karakter. */
.card h1,.card h2,.card h3,.card h4,.card strong{ overflow-wrap:break-word; }

/* Kolom "Model" (dan sejenisnya) di tabel jadi-kartu: max-width desktop
   (mis. 160px) tidak relevan lagi di HP karena kartu sudah full-width.
   Reset supaya nama model (mis. "motion-control") punya ruang
   penuh untuk membungkus per-kata, bukan dipaksa sempit. */
@media(max-width:768px){
    .jobs-table td[style*="max-width"]{ max-width:100% !important; width:100%; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE SAFETY NET v8 — bulletproof stacking (belt & suspenders)
   Beberapa device/browser Android lama menghitung ukuran flex-item
   secara berbeda walau min-width & flex-shrink sudah benar. Supaya
   nama model (mis. "Motion Control", "motion-control") TIDAK
   PERNAH bisa terjepit sampai pecah per-huruf, baris ikon+judul pada
   kartu Motion Control & kartu model (Video AI / Jobs)
   dipaksa bertumpuk vertikal begitu layar sangat sempit (≤480px).
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:480px){
    .motion-control-row,
    .model-card-row{
        flex-direction:column;
        align-items:flex-start !important;
    }
    .motion-control-row > a.btn{ width:100%; }
}

/* Kolom "Model" di tabel jadi-kartu (jobs-table): pastikan SELALU
   bertumpuk vertikal (bukan sejajar) apa pun class tambahannya,
   supaya nama model dapat lebar penuh kartu untuk membungkus per-kata. */
@media(max-width:768px){
    .jobs-table td[data-label="Model"]{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:4px;
    }
}

/* ============================================================
   HISTORY CARDS — layout horizontal & ringkas (semua halaman history)
   Format "Label : Nilai" (label di kiri nilai). Dua kolom sejajar;
   di layar sempit turun ke satu kolom TANPA kembali ke label di atas.
   ============================================================ */
.history-card{
    display:flex;
    gap:14px;
    padding:14px;
    margin-bottom:12px;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:var(--radiusSmall);
    transition:border-color var(--transition),box-shadow var(--transition);
}
.history-card:hover{border-color:var(--borderStrong);}
.history-card-preview{
    flex:0 0 auto;
    display:flex;
    align-items:flex-start;
}
.history-card-body{
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:7px;
}
.history-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:6px 24px;
    align-items:baseline;
}
.history-field{
    display:flex;
    align-items:baseline;
    gap:6px;
    min-width:0;
    font-size:12px;
    line-height:1.5;
}
.history-field.is-full{grid-column:1 / -1;}
.history-label{
    flex:0 0 auto;
    font-weight:600;
    color:var(--textMuted);
    white-space:nowrap;
}
.history-value{
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:var(--text);
}
.history-value.history-clamp{
    white-space:normal;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.history-actions{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    flex-wrap:wrap;
    margin-top:2px;
}
.history-empty{
    text-align:center;
    padding:40px;
    color:var(--textMuted);
}
.history-empty i{
    display:block;
    font-size:32px;
    margin-bottom:8px;
    opacity:.5;
}
@media(max-width:640px){
    .history-card{flex-direction:column;gap:10px;}
    .history-card-preview{justify-content:flex-start;}
    .history-grid{grid-template-columns:1fr;}
    .history-actions{justify-content:flex-start;}
}

/* ── Password visibility toggle (mata) ── */
.password-field{position:relative;}
.password-field .form-control{padding-right:38px;}
.password-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:transparent;border:none;color:var(--textMuted);cursor:pointer;font-size:17px;line-height:1;padding:6px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
.password-eye:hover{color:var(--primary);}
.password-eye:focus{outline:none;color:var(--primary);}


/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE POLISH v9 — kartu kompak & teks sejajar di mobile
   Permintaan user: kartu terlalu besar untuk teks sedikit; teks
   jatuh ke bawah padahal bisa sejajar ke samping. Rule memakai
   !important agar menang atas inline style.
   ═══════════════════════════════════════════════════════════════ */

/* ── Kartu feature Generate (halaman /generate, FAmotion & PRO) ── */
@media(max-width:768px){
    .generate-feature-card{ padding:14px !important; }
    .generate-feature-inner{
        flex-direction:row !important;
        flex-wrap:wrap;
        align-items:center !important;
        text-align:left !important;
        gap:12px !important;
    }
    .generate-feature-icon{
        width:52px !important;
        height:52px !important;
        font-size:30px !important;
        border-radius:14px !important;
        flex-shrink:0 !important;
    }
    .generate-feature-icon i{ font-size:22px !important; }
    .generate-feature-text{ flex:1 1 150px !important; min-width:0 !important; }
    .generate-feature-text h2{ font-size:16px !important; margin:0 !important; }
    .generate-feature-text p{ font-size:12px !important; }
    .generate-feature-btn{ flex:1 1 100% !important; }
}

/* ── Kartu Motion Control (halaman /generate) ── */
@media(max-width:768px){
    .motion-control-card{ padding:14px !important; }
    .motion-control-row{ gap:12px !important; }
    .motion-control-icon{
        width:52px !important;
        height:52px !important;
        font-size:30px !important;
        border-radius:14px !important;
    }
    .motion-control-icon i{ font-size:22px !important; }
    .motion-control-text{ min-width:0 !important; flex:1 1 180px !important; }
    .motion-control-text h2{ font-size:16px !important; }
    .motion-control-text p{ font-size:11.5px !important; }
}

/* Baris ikon+judul TETAP sejajar (override SAFETY NET v8 yang memaksa
   column di layar ≤480px). Teks membungkus per-kata (break-word),
   bukan per-karakter, jadi nama model panjang tetap aman. */
@media(max-width:480px){
    .motion-control-row,
    .model-card-row{
        flex-direction:row !important;
        align-items:center !important;
    }
    .motion-control-row > a.btn{
        width:auto !important;
        margin-left:auto;
        flex-shrink:0;
    }
}

/* ── Kartu model Image AI / Video AI / Jobs (PRO) ── */
@media(max-width:768px){
    .pro-model-card{ padding:12px !important; }
    .model-card-row{ gap:10px !important; }
    .model-card-row > div:first-child{
        width:38px !important;
        height:38px !important;
        border-radius:9px !important;
    }
    .model-card-row > div:first-child i{ font-size:17px !important; }
    .pro-model-card h3{ font-size:14px !important; }
    .pro-model-card .btn{ margin-top:8px !important; padding:7px !important; }
    .pro-model-card > div[style*="margin-top"]{ font-size:11px !important; }
}

/* ── Kartu akun (Account Pool) ── */
@media(max-width:768px){
    .account-card{ padding:12px !important; }
    .account-card strong{ font-size:13px !important; }
    .tutorial-provider-block{ max-width:100% !important; }
}

/* ── Kartu history (My Jobs, Credit History, Deposit History, Jobs,
       Subscription, admin) — preview + info TETAP sejajar; grid
       "Label : Nilai" tetap 2 kolom di HP (bukan menumpuk ke bawah). */
@media(max-width:640px){
    .history-card{ flex-direction:row !important; gap:10px !important; padding:12px !important; }
    .history-card-preview{ flex:0 0 auto !important; }
    .history-card-preview img,
    .history-card-preview video{ width:64px !important; height:46px !important; border-radius:6px !important; }
    .history-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:4px 12px !important; }
    .history-field{ font-size:11px !important; gap:4px !important; }
    .history-label{ font-size:10.5px !important; }
    .history-value{ font-size:11px !important; }
    .history-actions{ justify-content:flex-start !important; }
}
@media(max-width:380px){
    .history-grid{ grid-template-columns:1fr !important; }
}

/* ── Bulk Generate: konfigurasi & kartu upload ── */
@media(max-width:768px){
    .bulk-config-grid{ padding:12px !important; }
    .card-header{ padding:10px 12px !important; }
}
@media(max-width:640px){
    /* Dua kolom upload (Gambar | Video) tetap sejajar di HP
       (override SAFETY NET v3 yang memaksa 1 kolom). */
    .bulk-card-grid{ grid-template-columns:1fr 1fr !important; gap:8px !important; }
    .bulk-card-grid label{ font-size:11px !important; white-space:normal !important; }
    .bulk-card-grid .form-control{ font-size:11px !important; padding:6px 8px !important; }
}

/* ── Kartu statistik: label & angka lebih rapi di HP ── */
@media(max-width:640px){
    .stat-card{ padding:10px 12px !important; }
    .stat-label{ font-size:10px !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN PROVIDER v1 — halaman Provider gabungan (provider + model)
   Mobile-first, card ringkas, hierarki provider → model.
   ═══════════════════════════════════════════════════════════════════ */
.provider-page{
    padding:16px !important;
    max-width:100%;
}
.pv-page-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    margin-bottom:16px;flex-wrap:wrap;
}
.pv-page-title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text);}
.pv-page-sub{font-size:13px;color:var(--textMuted);margin-top:2px;}
.pv-add-btn{height:40px;border-radius:10px;font-size:13px;font-weight:600;padding:0 14px;}
.pv-alert{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:16px;}
.pv-alert-close{margin-left:auto;background:none;border:none;cursor:pointer;font-size:16px;color:inherit;line-height:1;}

/* ── Toolbar sinkron harga ── */
.pv-sync-card{
    min-height:88px;border-radius:16px;padding:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.30);
    display:flex;flex-direction:column;gap:12px;margin-bottom:16px;
}
.pv-sync-main{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pv-sync-info{min-width:0;}
.pv-sync-title{font-size:18px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.01em;}
.pv-sync-last{font-size:13px;color:var(--textMuted);margin-top:2px;}
.pv-sync-form{flex-shrink:0;}
.pv-sync-btn{height:40px;border-radius:10px;font-size:13px;font-weight:600;padding:0 16px;}
.pv-sync-stats{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--textMuted);}
.pv-stat{display:inline-flex;align-items:baseline;gap:5px;}
.pv-stat b{font-size:15px;font-weight:700;color:var(--text);}

/* ── Group card provider ── */
.pv-provider-list{display:flex;flex-direction:column;gap:12px;}
.pv-provider-card{
    border-radius:18px;padding:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.30);
    display:flex;flex-direction:column;gap:12px;
}
.pv-provider-head{display:flex;align-items:center;gap:12px;}
.pv-provider-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.pv-provider-logo{
    width:36px;height:36px;border-radius:10px;object-fit:cover;flex-shrink:0;
    background:linear-gradient(135deg,#6D5DFC,#4F46E5);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
    border:1px solid rgba(255,255,255,.12);
}
.pv-provider-logo-fallback{background:linear-gradient(135deg,#6D5DFC,#4F46E5);}
.pv-provider-id-text{min-width:0;flex:1;}
.pv-provider-name{font-size:17px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pv-provider-meta{font-size:13px;color:var(--textMuted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pv-provider-head-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.pv-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;}
.pv-badge-ok{background:rgba(34,197,94,.14);color:var(--success);}
.pv-badge-warn{background:rgba(245,158,11,.14);color:var(--warning);}
.pv-expand-btn{
    width:32px;height:32px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:var(--surface2);border:1px solid var(--border);color:var(--textSoft);
    transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.pv-expand-btn:hover{border-color:var(--borderStrong);color:var(--text);}
.pv-chevron{font-size:13px;transition:transform .2s ease;}
.pv-provider-card.is-open .pv-chevron{transform:rotate(180deg);}
.pv-provider-card.is-open .pv-expand-btn{color:var(--primary);border-color:rgba(109,93,252,.4);}

/* ── Aksi provider (outline kecil) ── */
.pv-provider-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.pv-action-btn{
    height:34px;padding:0 12px;border-radius:8px;
    display:inline-flex;align-items:center;gap:6px;
    background:transparent;border:1px solid var(--borderStrong);
    color:var(--textSoft);font-size:13px;font-weight:600;white-space:nowrap;
    transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.pv-action-btn:hover{border-color:rgba(109,93,252,.45);color:var(--text);background:rgba(109,93,252,.08);}
.pv-action-btn.is-warn{color:var(--warning);border-color:rgba(245,158,11,.35);}
.pv-action-btn.is-warn:hover{background:rgba(245,158,11,.08);color:var(--warning);}

/* ── Daftar model (list row, tanpa card) ── */
.pv-model-list{border-top:1px solid var(--border);margin-top:2px;}
.pv-model-row{
    min-height:64px;padding:10px 12px;
    display:flex;align-items:center;gap:12px;
    border-bottom:1px solid var(--border);
    transition:background var(--transition);
}
.pv-model-row:last-child{border-bottom:none;}
.pv-model-row:hover{background:rgba(255,255,255,.02);}
.pv-model-info{min-width:0;flex:1;}
.pv-model-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pv-model-id{font-size:12px;color:var(--textMuted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.pv-model-price{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;flex-shrink:0;}
.pv-model-actions{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.pv-inline-form{display:inline-flex;margin:0;}
.pv-icon-btn{
    width:32px;height:32px;border-radius:8px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface2);border:1px solid var(--border);color:var(--textSoft);
    transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.pv-icon-btn:hover{border-color:var(--borderStrong);color:var(--text);background:var(--surface3);}
.pv-icon-btn.is-warn{color:var(--warning);border-color:rgba(245,158,11,.35);background:rgba(245,158,11,.08);}
.pv-icon-btn.is-warn:hover{background:rgba(245,158,11,.12);}

/* ── Toggle switch kecil (Publish FAmotion) ── */
.pv-switch{
    width:36px;height:20px;border-radius:999px;padding:0;position:relative;flex-shrink:0;
    display:inline-flex;align-items:center;cursor:pointer;
    border:1px solid transparent;transition:background var(--transition),border-color var(--transition);
}
.pv-switch .pv-switch-knob{
    position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
    background:#fff;transition:left .18s ease,transform .18s ease;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.pv-switch.is-on{background:linear-gradient(135deg,#22C55E,#16A34A);border-color:rgba(255,255,255,.12);}
.pv-switch.is-on .pv-switch-knob{left:18px;}
.pv-switch.is-off{background:var(--surface3);border-color:var(--borderStrong);}
.pv-switch.is-off .pv-switch-knob{left:2px;opacity:.7;}
.pv-switch:hover{border-color:rgba(255,255,255,.28);}

/* ── Empty state ── */
.pv-empty-card{align-items:center;text-align:center;padding:32px 16px;}
.pv-empty-icon{font-size:36px;margin-bottom:8px;}
.pv-empty-title{font-size:15px;font-weight:700;color:var(--text);}
.pv-empty-sub{font-size:13px;color:var(--textMuted);margin-top:2px;}

/* HP kecil: rapatkan harga & aksi model */
@media(max-width:400px){
    .pv-model-row{gap:8px;padding:10px 8px;}
    .pv-model-price{font-size:13px;}
    .pv-model-actions{gap:4px;}
    .pv-provider-head-right{gap:6px;}
}

/* ── Pv alert variants (app.css tidak punya base .alert) ── */
.pv-alert.alert-danger{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);color:#fca5a5;}
.pv-alert.alert-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28);color:#86efac;}
.pv-alert.alert-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);color:#fcd34d;}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN SUBSCRIPTION v1 — Pengaturan Harga Langganan (billing dashboard)
   Mobile-first: statistik ringkas, daftar paket compact, bottom sheet.
   ═══════════════════════════════════════════════════════════════════ */
.sub-page{padding:16px !important;max-width:100%;}
.bs-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.bs-head-row{align-items:center;}
.bs-title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text);}
.bs-sub{font-size:13px;color:var(--textMuted);margin-top:2px;}
.bs-alert{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:16px;}
.bs-alert.alert-danger{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);color:#fca5a5;}
.bs-alert.alert-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28);color:#86efac;}
.bs-alert.alert-warning{background:rgba(245,158,11,.08);border:1px solid rgba(245,158,11,.28);color:#fcd34d;}
.bs-alert-close{margin-left:auto;background:none;border:none;cursor:pointer;font-size:16px;color:inherit;line-height:1;}
.bs-inline{display:inline-flex;margin:0;}

/* ── Statistik (3 card kecil) ── */
.bs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px;}
.bs-stat-card{
    height:96px;border-radius:16px;padding:14px;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
    display:flex;flex-direction:column;min-width:0;
}
.bs-stat-top{display:flex;flex-direction:column;gap:2px;min-width:0;}
.bs-stat-label{font-size:13px;font-weight:600;color:var(--textSoft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-stat-num{font-size:24px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.02em;}
.bs-stat-link{
    margin-top:auto;align-self:flex-end;
    height:28px;padding:0 10px;border-radius:8px;
    display:inline-flex;align-items:center;gap:4px;
    background:rgba(109,93,252,.12);color:var(--primary);font-size:12px;font-weight:600;
    transition:background var(--transition);
}
.bs-stat-link:hover{background:rgba(109,93,252,.2);}

/* ── Toolbar ── */
.bs-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.bs-search{
    flex:1;min-width:140px;height:40px;border-radius:10px;
    display:flex;align-items:center;gap:8px;padding:0 12px;
    background:var(--surface);border:1px solid var(--border);color:var(--textMuted);
}
.bs-search-flex{flex:1;}
.bs-search input{flex:1;background:transparent;border:none;color:var(--text);font-size:13px;min-width:0;}
.bs-search input::placeholder{color:var(--textMuted);}
.bs-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.bs-btn-secondary{
    height:40px;border-radius:10px;font-size:13px;font-weight:600;padding:0 14px;
    background:var(--surface2);border:1px solid var(--borderStrong);color:var(--text);
}
.bs-btn-secondary:hover{background:var(--surface3);}
.bs-btn-primary{height:40px;border-radius:10px;font-size:13px;font-weight:600;padding:0 14px;}

/* ── Daftar paket (compact list) ── */
.bs-list{
    border-radius:18px;padding:8px 16px;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.30);
    margin-bottom:16px;
}
.bs-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);margin-bottom:4px;}
.bs-list-title{font-size:18px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.01em;}
.bs-list-count{font-size:13px;color:var(--textMuted);}
.bs-plan-row{
    min-height:72px;display:flex;align-items:center;gap:10px;
    padding:10px 0;border-bottom:1px solid var(--border);
}
.bs-plan-row:last-child{border-bottom:none;}
.bs-plan-left{min-width:0;flex:1;}
.bs-plan-name{font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-plan-dur{font-size:13px;color:var(--textMuted);margin-top:1px;}
.bs-plan-price{font-size:16px;font-weight:700;color:var(--text);white-space:nowrap;flex-shrink:0;}
.bs-plan-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.bs-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;}
.bs-badge-ok{background:rgba(34,197,94,.14);color:var(--success);}
.bs-badge-off{background:rgba(148,163,184,.14);color:var(--textSoft);}
.bs-badge-warn{background:rgba(245,158,11,.14);color:var(--warning);}
.bs-badge-danger{background:rgba(239,68,68,.14);color:var(--danger);}
.bs-icon-btn{
    width:32px;height:32px;border-radius:8px;flex-shrink:0;
    display:inline-flex;align-items:center;justify-content:center;
    background:var(--surface2);border:1px solid var(--border);color:var(--textSoft);
    transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.bs-icon-btn:hover{border-color:var(--borderStrong);color:var(--text);background:var(--surface3);}
.bs-icon-danger:hover{color:var(--danger);border-color:rgba(239,68,68,.4);background:rgba(239,68,68,.08);}

/* ── Bottom sheet ── */
.bs-overlay{
    position:fixed;inset:0;z-index:9990;
    background:rgba(0,0,0,.62);backdrop-filter:blur(2px);
    display:flex;align-items:flex-end;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.bs-overlay[hidden]{display:none !important;}
.bs-overlay.is-open{opacity:1;pointer-events:auto;}
.bs-sheet{
    width:100%;max-width:600px;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid var(--borderStrong);border-bottom:none;
    border-radius:20px 20px 0 0;
    display:flex;flex-direction:column;
    transform:translateY(100%);transition:transform .22s cubic-bezier(.2,.8,.2,1);
    box-shadow:0 -12px 40px rgba(0,0,0,.45);
}
.bs-overlay.is-open .bs-sheet{transform:translateY(0);}
.bs-sheet-plan{height:70vh;}
.bs-sheet-give{height:75vh;}
.bs-sheet-head{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:14px 16px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.bs-sheet-title{font-size:18px;font-weight:700;color:var(--text);margin:0;display:flex;align-items:center;gap:8px;}
.bs-sheet-close{
    width:32px;height:32px;border-radius:8px;background:var(--surface2);border:1px solid var(--border);
    color:var(--textSoft);font-size:18px;display:flex;align-items:center;justify-content:center;
}
.bs-sheet-close:hover{color:var(--text);}
.bs-sheet-body{flex:1;overflow-y:auto;padding:16px;overscroll-behavior:contain;}
.bs-sheet-foot{
    display:flex;align-items:center;gap:8px;padding:12px 16px;
    border-top:1px solid var(--border);flex-shrink:0;
}
.bs-btn-lg{height:48px;border-radius:12px;font-size:13px;font-weight:600;padding:0 18px;}
.bs-btn-fill{flex:1;}
.bs-field{margin-bottom:14px;min-width:0;}
.bs-field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.bs-label{display:block;font-size:13px;font-weight:600;color:var(--text);margin-bottom:6px;}
.bs-input{
    height:48px;border-radius:12px;width:100%;
    background:var(--bg2);border:1px solid var(--border);color:var(--text);
    font-size:14px;padding:0 14px;
}
.bs-input:focus{border-color:rgba(109,93,252,.5);}
.bs-textarea{
    width:100%;border-radius:12px;background:var(--bg2);border:1px solid var(--border);
    color:var(--text);font-size:14px;padding:12px 14px;min-height:64px;resize:vertical;
}
.bs-switch{position:relative;display:inline-flex;width:44px;height:24px;vertical-align:middle;}
.bs-switch input{opacity:0;width:0;height:0;position:absolute;}
.bs-switch-slider{
    position:absolute;inset:0;border-radius:999px;background:var(--surface3);
    border:1px solid var(--borderStrong);transition:background var(--transition),border-color var(--transition);cursor:pointer;
}
.bs-switch-slider::before{
    content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
    background:#fff;transition:left .18s ease;box-shadow:0 1px 3px rgba(0,0,0,.4);
}
.bs-switch input:checked + .bs-switch-slider{background:linear-gradient(135deg,#22C55E,#16A34A);border-color:rgba(255,255,255,.12);}
.bs-switch input:checked + .bs-switch-slider::before{left:22px;}
.bs-switch-text{font-size:13px;color:var(--textSoft);margin-left:8px;}

/* ── Give subscription sheet ── */
.bs-give-sec{margin-bottom:16px;}
.bs-give-preview{font-size:13px;color:var(--textMuted);margin-top:6px;}
.bs-user-results{max-height:230px;overflow-y:auto;margin-top:8px;}
.bs-user-row{
    width:100%;min-height:64px;display:flex;align-items:center;gap:10px;
    padding:8px 12px;border-radius:12px;margin-bottom:8px;
    background:var(--bg2);border:1px solid var(--border);text-align:left;
    transition:border-color var(--transition),background var(--transition);
}
.bs-user-row:hover{border-color:rgba(109,93,252,.45);background:rgba(109,93,252,.06);}
.bs-avatar{
    width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0;
    background:linear-gradient(135deg,#6D5DFC,#4F46E5);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
    border:1px solid rgba(255,255,255,.12);
}
.bs-avatar-fallback{background:linear-gradient(135deg,#6D5DFC,#4F46E5);}
.bs-user-row-id{min-width:0;flex:1;display:flex;flex-direction:column;}
.bs-user-row-id strong{font-size:14px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-user-row-id span{font-size:12px;color:var(--textMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-user-row-sub{font-size:12px;color:var(--textMuted);white-space:nowrap;flex-shrink:0;}
.bs-user-empty{padding:14px;text-align:center;font-size:13px;color:var(--textMuted);}
.bs-user-panel{
    margin-top:10px;border-radius:14px;padding:12px;
    background:var(--bg2);border:1px solid var(--border);
}
.bs-user-panel-head{display:flex;align-items:center;gap:10px;}
.bs-avatar-lg{width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0;
    background:linear-gradient(135deg,#6D5DFC,#4F46E5);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;}
.bs-user-panel-id{min-width:0;}
.bs-user-panel-name{font-size:15px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-user-panel-email{font-size:12px;color:var(--textMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-user-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px;}
.bs-user-meta-cell{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px;min-width:0;}
.bs-user-meta-cell span{display:block;font-size:11px;color:var(--textMuted);}
.bs-user-meta-cell b{display:block;font-size:13px;font-weight:700;color:var(--text);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-give-last{font-size:12px;color:var(--textMuted);margin-top:10px;}
.bs-radio-row{display:flex;gap:10px;}
.bs-radio{flex:1;cursor:pointer;}
.bs-radio input{position:absolute;opacity:0;width:0;height:0;}
.bs-radio span{
    display:flex;align-items:center;justify-content:center;gap:6px;
    height:44px;border-radius:12px;border:1px solid var(--border);
    background:var(--bg2);color:var(--textSoft);font-size:13px;font-weight:600;
    transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.bs-radio input:checked + span{border-color:rgba(109,93,252,.55);color:var(--primary);background:rgba(109,93,252,.08);}
.bs-chip-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.bs-chip{
    padding:5px 12px;border-radius:999px;font-size:12px;color:var(--textSoft);
    background:var(--surface2);border:1px solid var(--border);
    transition:border-color var(--transition),color var(--transition);
}
.bs-chip:hover{border-color:rgba(109,93,252,.4);color:var(--text);}
.bs-grant-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;}
.bs-grant-item{
    display:flex;align-items:center;gap:12px;
    background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;
}
.bs-grant-days{font-size:15px;font-weight:700;color:var(--success);white-space:nowrap;flex-shrink:0;}
.bs-grant-meta{min-width:0;display:flex;flex-direction:column;}
.bs-grant-meta span{font-size:13px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-grant-meta small{font-size:11px;color:var(--textMuted);margin-top:1px;}
.bs-muted{font-size:12px;color:var(--textMuted);margin:0;}

/* ── Dialog konfirmasi ── */
.bs-confirm-overlay{align-items:center;padding:20px;}
.bs-confirm{
    width:100%;max-width:320px;border-radius:16px;padding:20px;text-align:center;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid var(--borderStrong);
}
.bs-confirm-icon{
    width:48px;height:48px;border-radius:14px;margin:0 auto 10px;
    background:rgba(109,93,252,.14);color:var(--primary);
    display:flex;align-items:center;justify-content:center;font-size:22px;
}
.bs-confirm-text{font-size:14px;color:var(--text);margin:0;}
.bs-confirm-actions{display:flex;gap:8px;margin-top:16px;}
.bs-confirm-actions .btn{flex:1;height:44px;border-radius:12px;font-size:13px;font-weight:600;}

/* ── Detail paket ── */
.bs-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px;}
.bs-summary-cell{
    border-radius:16px;padding:12px;min-width:0;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
}
.bs-summary-cell span{display:block;font-size:11px;color:var(--textMuted);}
.bs-summary-cell b{display:block;font-size:18px;font-weight:700;color:var(--text);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-summary-ok b{color:var(--success);}
.bs-summary-off b{color:var(--textSoft);}
.bs-summary-primary b{color:var(--primary);}
.bs-summary-name{font-size:13px !important;}
.bs-plan-row-full{flex-direction:column;align-items:stretch;gap:8px;padding:12px 0;}
.bs-plan-main{display:flex;align-items:center;gap:10px;}
.bs-plan-mid{min-width:0;text-align:right;}
.bs-plan-meta{font-size:12px;color:var(--textMuted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-plan-sub{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.bs-plan-created{font-size:12px;color:var(--textMuted);}
.bs-plan-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.bs-btn-sm-outline{
    height:30px;padding:0 10px;border-radius:8px;
    display:inline-flex;align-items:center;gap:5px;
    background:transparent;border:1px solid var(--borderStrong);color:var(--textSoft);
    font-size:12px;font-weight:600;transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.bs-btn-sm-outline:hover{border-color:rgba(109,93,252,.45);color:var(--text);background:rgba(109,93,252,.08);}
.bs-btn-sm-outline.is-warn{color:var(--warning);border-color:rgba(245,158,11,.35);}
.bs-btn-sm-outline.is-warn:hover{background:rgba(245,158,11,.08);}
.bs-btn-sm-outline.is-ok{color:var(--success);border-color:rgba(34,197,94,.35);}
.bs-btn-sm-outline.is-ok:hover{background:rgba(34,197,94,.08);}
.bs-btn-sm-outline.is-danger{color:var(--danger);border-color:rgba(239,68,68,.35);}
.bs-btn-sm-outline.is-danger:hover{background:rgba(239,68,68,.08);}

/* ── Detail subscriber ── */
.bs-filter-row{display:flex;gap:8px;margin-bottom:10px;}
.bs-chip-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px;}
.bs-filter-chip{
    height:32px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;
    background:var(--surface2);border:1px solid var(--border);color:var(--textSoft);
    transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.bs-filter-chip.is-active{border-color:rgba(109,93,252,.55);color:var(--primary);background:rgba(109,93,252,.1);}
.bs-sub-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--border);}
.bs-sub-row:last-child{border-bottom:none;}
.bs-sub-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.bs-sub-id-text{min-width:0;display:flex;flex-direction:column;}
.bs-sub-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-sub-email{font-size:12px;color:var(--textMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-sub-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.bs-sub-meta{width:100%;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.bs-sub-plan{font-size:13px;font-weight:600;color:var(--text);}
.bs-sub-days{font-size:13px;color:var(--textMuted);}
.bs-sub-end{color:var(--textSoft);}
.bs-sub-actions{width:100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}

/* ── Detail pendapatan ── */
.bs-rev-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px;}
.bs-rev-cell{
    border-radius:16px;padding:12px;min-width:0;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
}
.bs-rev-cell span{display:block;font-size:11px;color:var(--textMuted);}
.bs-rev-cell b{display:block;font-size:16px;font-weight:700;color:var(--text);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-rev-total{border-color:rgba(109,93,252,.4);}
.bs-rev-total b{color:var(--primary);}
.bs-chart{display:flex;align-items:stretch;gap:8px;height:150px;padding:14px 2px 6px;}
.bs-chart-col{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;}
.bs-chart-bar-wrap{flex:1;width:100%;display:flex;align-items:flex-end;}
.bs-chart-bar{
    width:100%;max-width:34px;margin:0 auto;border-radius:6px 6px 0 0;
    background:linear-gradient(180deg,#7C6FFE,#4F46E5);
    min-height:4px;transition:height .3s ease;
}
.bs-chart-label{font-size:10px;color:var(--textMuted);margin-top:6px;}
.bs-chart-value{font-size:9px;color:var(--textSoft);margin-top:2px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-rev-toolbar{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.bs-rev-filter{display:flex;align-items:center;gap:6px;flex:1;min-width:0;flex-wrap:wrap;}
.bs-rev-filter .bs-input{height:40px;flex:1;min-width:110px;font-size:12px;padding:0 10px;}
.bs-rev-sep{color:var(--textMuted);font-size:12px;}
.bs-tx-row{
    display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:12px 0;border-bottom:1px solid var(--border);
}
.bs-tx-row:last-child{border-bottom:none;}
.bs-tx-date{min-width:110px;display:flex;flex-direction:column;}
.bs-tx-date b{font-size:13px;font-weight:600;color:var(--text);}
.bs-tx-ref{font-size:11px;color:var(--textMuted);margin-top:1px;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-tx-user{min-width:0;flex:1;display:flex;flex-direction:column;}
.bs-tx-user strong{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-tx-user span{font-size:11px;color:var(--textMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.bs-tx-plan{font-size:13px;color:var(--textSoft);white-space:nowrap;}
.bs-tx-amount{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;}
.bs-tx-status{flex-shrink:0;}

/* ── Empty state ── */
.bs-empty{text-align:center;padding:28px 16px;}
.bs-empty-icon{font-size:34px;margin-bottom:8px;}
.bs-empty-title{font-size:15px;font-weight:700;color:var(--text);margin:0;}
.bs-empty-sub{font-size:13px;color:var(--textMuted);margin-top:2px;}

/* HP kecil */
@media(max-width:420px){
    .bs-stats{gap:8px;}
    .bs-stat-card{padding:12px;}
    .bs-stat-num{font-size:20px;}
    .bs-stat-label{font-size:12px;}
    .bs-plan-price{font-size:14px;}
    .bs-plan-name{font-size:15px;}
    .bs-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
    .bs-toolbar-actions{width:100%;}
    .bs-toolbar-actions .btn{flex:1;}
}

/* ═══════════════════════════════════════════════════════════════════
   ADMIN MONITORING v1 — dashboard operasional (mobile-first)
   Aktivitas sistem, provider, user, langganan, pendapatan.
   ═══════════════════════════════════════════════════════════════════ */
.mn-page{padding:16px !important;max-width:100%;}
.mn-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px;}
.mn-head-text{min-width:0;}
.mn-title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text);}
.mn-sub{font-size:13px;color:var(--textMuted);margin-top:2px;}
.mn-btn{height:40px;border-radius:10px;font-size:13px;font-weight:600;padding:0 14px;}
.mn-back-btn{height:36px;font-size:12px;padding:0 12px;}
.mn-alert{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:16px;}
.mn-alert.alert-success{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28);color:#86efac;}
.mn-alert.alert-danger{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);color:#fca5a5;}
.mn-alert-close{margin-left:auto;background:none;border:none;cursor:pointer;font-size:16px;color:inherit;line-height:1;}

/* ── Filter kurun waktu (segmented control) ── */
.mn-range-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:16px;}
.mn-range{
    display:flex;gap:2px;padding:3px;border-radius:12px;overflow-x:auto;
    background:var(--surface);border:1px solid var(--border);
}
.mn-range-chip{
    flex:1;min-width:64px;height:30px;border-radius:9px;padding:0 10px;
    display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;
    font-size:12px;font-weight:600;color:var(--textSoft);
    transition:background var(--transition),color var(--transition);
}
.mn-range-chip:hover{color:var(--text);}
.mn-range-chip.is-active{background:rgba(109,93,252,.14);color:var(--primary);}
.mn-updated{font-size:12px;color:var(--textMuted);display:inline-flex;align-items:center;gap:5px;white-space:nowrap;}
.mn-source-row{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;}
.mn-source-label{font-size:12px;font-weight:600;color:var(--textSoft);}
.mn-source{width:100%;}

/* ── Card umum ── */
.mn-card{
    border-radius:18px;padding:8px 16px;margin-bottom:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
    box-shadow:0 1px 0 rgba(255,255,255,.03) inset,0 10px 30px rgba(0,0,0,.30);
}
.mn-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);margin-bottom:2px;flex-wrap:wrap;}
.mn-section-title{font-size:18px;font-weight:700;color:var(--text);margin:0;letter-spacing:-.01em;}
.mn-count{font-size:13px;color:var(--textMuted);white-space:nowrap;}

/* ── Line toggle (chip) ── */
.mn-line-toggles{display:flex;gap:6px;flex-wrap:wrap;}
.mn-line-chip{
    display:inline-flex;align-items:center;gap:6px;
    height:28px;padding:0 10px;border-radius:999px;
    background:var(--surface2);border:1px solid var(--border);color:var(--textSoft);
    font-size:12px;font-weight:600;opacity:.55;
    transition:opacity var(--transition),border-color var(--transition),color var(--transition);
}
.mn-line-chip.is-on{opacity:1;border-color:var(--borderStrong);color:var(--text);}
.mn-dot{width:8px;height:8px;border-radius:50%;background:var(--dot,#8B5CF6);flex-shrink:0;}

/* ── Grafik ── */
.mn-chart{position:relative;padding:10px 0 4px;}
.mn-chart-main{height:240px;}
.mn-chart-rev{height:200px;}
.mn-chart canvas{width:100%;height:100%;display:block;}
.mn-chart-empty{
    position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;
    align-items:center;justify-content:center;color:var(--textMuted);font-size:13px;
}
.mn-chart-empty i{font-size:26px;opacity:.6;}

/* ── Statistik utama (7 card, 2 kolom) ── */
.mn-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.mn-stat{
    height:104px;border-radius:16px;padding:14px;min-width:0;
    display:flex;flex-direction:column;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
    transition:border-color var(--transition),box-shadow var(--transition);
}
.mn-stat:hover{border-color:rgba(109,93,252,.4);box-shadow:0 0 0 1px rgba(109,93,252,.15) inset;}
.mn-stat-wide{grid-column:1/-1;min-height:118px;}
.mn-stat-breakdown{display:flex;align-items:center;gap:2px;flex-wrap:wrap;font-size:13px;color:var(--textSoft);margin-top:3px;line-height:1.35;}
.mn-stat-breakdown b{color:var(--text);font-weight:700;}
.mn-stat-breakdown .mn-bd-dot{color:var(--textMuted);font-size:10px;}
.mn-stat-label{font-size:13px;font-weight:600;color:var(--textSoft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-stat-num{font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.02em;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-num-danger{color:var(--danger);}
.mn-num-processing{color:#60A5FA;}
.mn-stat-link{
    margin-top:auto;align-self:flex-end;
    height:28px;padding:0 10px;border-radius:8px;
    display:inline-flex;align-items:center;gap:4px;
    background:rgba(109,93,252,.12);color:var(--primary);font-size:12px;font-weight:600;
    transition:background var(--transition);
}
.mn-stat-link:hover{background:rgba(109,93,252,.2);}

/* ── Badge status ── */
.mn-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;}
.mn-badge-online{background:rgba(34,197,94,.14);color:var(--success);}
.mn-badge-processing{background:rgba(59,130,246,.14);color:#60A5FA;}
.mn-badge-queue{background:rgba(245,158,11,.14);color:var(--warning);}
.mn-badge-offline{background:rgba(239,68,68,.14);color:var(--danger);}
.mn-badge-degraded{background:rgba(245,158,11,.14);color:var(--warning);}
.mn-badge-muted{background:rgba(148,163,184,.14);color:var(--textSoft);}

/* ── Filter bar / search / select ── */
.mn-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px;}
.mn-filter-static{margin-bottom:10px;}
.mn-search{
    flex:1;min-width:150px;height:40px;border-radius:10px;
    display:flex;align-items:center;gap:8px;padding:0 12px;
    background:var(--surface);border:1px solid var(--border);color:var(--textMuted);
}
.mn-search input{flex:1;background:transparent;border:none;color:var(--text);font-size:13px;min-width:0;}
.mn-search input::placeholder{color:var(--textMuted);}
.mn-select{
    height:40px;border-radius:10px;padding:0 10px;font-size:12px;
    background:var(--surface);border:1px solid var(--border);color:var(--text);
    min-width:110px;flex:1;
}
.mn-date{min-width:130px;}
.mn-rev-sep{color:var(--textMuted);font-size:12px;}

/* ── Summary cells ── */
.mn-summary-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px;}
.mn-summary-cell{
    border-radius:16px;padding:12px;min-width:0;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
}
.mn-summary-cell span{display:block;font-size:11px;color:var(--textMuted);}
.mn-summary-cell b{display:block;font-size:18px;font-weight:700;color:var(--text);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-summary-ok{color:var(--success) !important;}
.mn-summary-warn{color:var(--warning) !important;}
.mn-summary-muted{color:var(--textSoft) !important;}
.mn-summary-sub{font-size:14px !important;}

/* ── Filter chip ── */
.mn-chip-filter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
.mn-filter-chip{
    height:32px;padding:0 12px;border-radius:999px;font-size:12px;font-weight:600;
    background:var(--surface2);border:1px solid var(--border);color:var(--textSoft);
    transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.mn-filter-chip.is-active{border-color:rgba(109,93,252,.55);color:var(--primary);background:rgba(109,93,252,.1);}

/* ── Row job / antrian / subscriber ── */
.mn-job-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--border);}
.mn-job-row:last-child{border-bottom:none;}
.mn-job-main{min-width:0;flex:1;display:flex;flex-direction:column;}
.mn-job-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-job-meta{font-size:12px;color:var(--textMuted);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-job-side{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.mn-job-dur{font-size:13px;color:var(--textSoft);white-space:nowrap;}
.mn-job-foot{width:100%;font-size:12px;color:var(--textMuted);}
.mn-queue-pos{
    width:26px;height:26px;border-radius:50%;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    background:rgba(245,158,11,.14);color:var(--warning);font-size:12px;font-weight:700;
}

/* ── Row provider ── */
.mn-provider-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 0;border-bottom:1px solid var(--border);}
.mn-provider-row:last-child{border-bottom:none;}
.mn-provider-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.mn-logo{
    width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0;
    background:linear-gradient(135deg,#6D5DFC,#4F46E5);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;
    border:1px solid rgba(255,255,255,.12);
}
.mn-logo-fallback{background:linear-gradient(135deg,#6D5DFC,#4F46E5);}
.mn-provider-id-text{min-width:0;display:flex;flex-direction:column;}
.mn-provider-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-provider-meta{font-size:12px;color:var(--textMuted);margin-top:1px;}
.mn-provider-right{display:flex;align-items:center;gap:8px;flex-shrink:0;flex-wrap:wrap;}
.mn-provider-foot{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--textMuted);}
.mn-btn-sm{
    height:30px;padding:0 10px;border-radius:8px;
    display:inline-flex;align-items:center;gap:5px;
    background:transparent;border:1px solid var(--borderStrong);color:var(--textSoft);
    font-size:12px;font-weight:600;transition:border-color var(--transition),color var(--transition),background var(--transition);
}
.mn-btn-sm:hover{border-color:var(--borderStrong);color:var(--text);background:var(--surface2);}
.mn-btn-sm.is-warn{color:var(--warning);border-color:rgba(245,158,11,.35);}
.mn-btn-sm.is-warn:hover{background:rgba(245,158,11,.08);}
.mn-btn-sm.is-ok{color:var(--success);border-color:rgba(34,197,94,.35);}
.mn-btn-sm.is-ok:hover{background:rgba(34,197,94,.08);}
.mn-inline{display:inline-flex;margin:0;}

/* ── Row failed ── */
.mn-fail-row{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.mn-fail-row:last-child{border-bottom:none;}
.mn-fail-main{min-width:0;flex:1;}
.mn-fail-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.mn-fail-title strong{font-size:14px;font-weight:600;color:var(--text);}
.mn-code{
    padding:1px 8px;border-radius:6px;font-size:11px;font-weight:700;font-family:ui-monospace,Menlo,monospace;
    background:rgba(239,68,68,.14);color:var(--danger);
}
.mn-fail-err{font-size:12px;color:var(--textSoft);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.mn-fail-meta{font-size:11px;color:var(--textMuted);margin-top:3px;}
.mn-fail-side{flex-shrink:0;}

/* ── Row user ── */
.mn-user-row{
    min-height:68px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    padding:10px 0;border-bottom:1px solid var(--border);
}
.mn-user-row:last-child{border-bottom:none;}
.mn-user-id{display:flex;align-items:center;gap:10px;min-width:0;flex:1;}
.mn-avatar{
    width:40px;height:40px;border-radius:10px;object-fit:cover;flex-shrink:0;
    background:linear-gradient(135deg,#6D5DFC,#4F46E5);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;
    border:1px solid rgba(255,255,255,.12);
}
.mn-avatar-fallback{background:linear-gradient(135deg,#6D5DFC,#4F46E5);}
.mn-user-id-text{min-width:0;display:flex;flex-direction:column;}
.mn-user-name{font-size:15px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-user-email{font-size:12px;color:var(--textMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-user-stats{display:flex;gap:10px;flex-shrink:0;}
.mn-user-stat{font-size:12px;color:var(--textMuted);}
.mn-user-stat b{font-weight:700;color:var(--text);}
.mn-user-stat-fail b{color:var(--danger);}
.mn-user-plan{flex-shrink:0;}
.mn-user-credit{flex-shrink:0;display:flex;align-items:center;}
.mn-user-joined{font-size:12px;color:var(--textMuted);flex-shrink:0;}

/* ── Revenue ── */
.mn-rev-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px;}
.mn-rev-cell{
    border-radius:16px;padding:12px;min-width:0;
    background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);
    border:1px solid rgba(255,255,255,.07);
}
.mn-rev-cell span{display:block;font-size:11px;color:var(--textMuted);}
.mn-rev-cell b{display:block;font-size:16px;font-weight:700;color:var(--text);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-rev-total{border-color:rgba(109,93,252,.4);}
.mn-rev-total b{color:var(--primary);}
.mn-tx-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--border);}
.mn-tx-row:last-child{border-bottom:none;}
.mn-tx-date{min-width:100px;display:flex;flex-direction:column;}
.mn-tx-date b{font-size:13px;font-weight:600;color:var(--text);}
.mn-tx-date span{font-size:11px;color:var(--textMuted);margin-top:1px;max-width:130px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-tx-user{min-width:0;flex:1;display:flex;flex-direction:column;}
.mn-tx-user strong{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-tx-user span{font-size:11px;color:var(--textMuted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-tx-plan{font-size:13px;color:var(--textSoft);white-space:nowrap;}
.mn-tx-amount{font-size:14px;font-weight:700;color:var(--text);white-space:nowrap;}
.mn-tx-status{flex-shrink:0;}
.mn-rev-card{display:flex;flex-direction:column;gap:14px;border-radius:18px;padding:16px;margin-bottom:16px;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),var(--surface);border:1px solid rgba(255,255,255,.07);}
.mn-rev-head{display:flex;flex-direction:column;gap:6px;min-width:0;}
.mn-rev-label{font-size:13px;font-weight:600;color:var(--textSoft);}
.mn-rev-total-num{font-size:28px;font-weight:700;color:var(--text);letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mn-rev-breakdown{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px;}
.mn-rev-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:13px;color:var(--textSoft);background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);}
.mn-rev-chip b{color:var(--text);font-weight:700;}
.mn-rev-chip i{font-size:8px;}
.mn-rev-chip-famotion i{color:#6D5DFC;}
.mn-rev-chip-pro i{color:#F59E0B;}
.mn-rev-periods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
.mn-rev-tx-source{font-size:10px;font-weight:700;padding:2px 8px;border-radius:999px;flex-shrink:0;white-space:nowrap;}
.mn-rev-tx-source-src-famotion{background:rgba(109,93,252,.14);color:#A5B4FC;}
.mn-rev-tx-source-src-pro{background:rgba(245,158,11,.14);color:#FCD34D;}

/* ── Empty ── */
.mn-empty{text-align:center;padding:28px 16px;}
.mn-empty-icon{font-size:34px;margin-bottom:8px;}
.mn-empty-title{font-size:15px;font-weight:700;color:var(--text);margin:0;}

/* HP kecil */
@media(max-width:480px){
    .mn-rev-periods{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:420px){
    .mn-stat-num{font-size:23px;}
    .mn-range{width:100%;}
    .mn-select{min-width:0;}
    .mn-summary-row{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ─────────────────────────────────────────────
   ADMIN PROVIDER HUB v2 — menu Provider (FAmotion) compact
   Tree 3 level: Provider → Model → Submodel
   Icon buttons (eye/wrench/save), mobile-first hemat ruang.
   ───────────────────────────────────────────── */
.ph-page{padding:16px !important;max-width:100%;}
.ph-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.ph-head-text{min-width:0;}
.ph-title{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text);}
.ph-sub{font-size:13px;color:var(--textMuted);margin-top:2px;}
.ph-btn{height:40px;border-radius:10px;font-size:13px;font-weight:600;padding:0 14px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:1px solid var(--borderStrong);background:var(--surface2);color:var(--text);transition:border-color var(--transition),background var(--transition);}
.ph-btn:hover{border-color:var(--primary);background:var(--surface3);}
.ph-sync-btn i{font-size:15px;}
.ph-sync-btn:active i{animation:phSpin .6s ease;}

.ph-alert{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:16px;}
.ph-alert-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28);color:#86efac;}
.ph-alert-err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);color:#fca5a5;}
.ph-alert-close{margin-left:auto;background:none;border:none;color:inherit;font-size:16px;cursor:pointer;padding:0 2px;opacity:.7;}

.ph-toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;}
.ph-search{flex:1;min-width:0;position:relative;display:flex;align-items:center;}
.ph-search-ic{position:absolute;left:12px;color:var(--textMuted);font-size:14px;pointer-events:none;}
.ph-search input{width:100%;height:40px;border-radius:10px;border:1px solid var(--borderStrong);background:var(--surface2);color:var(--text);font-size:14px;padding:0 12px 0 34px;outline:none;transition:border-color var(--transition);}
.ph-search input:focus{border-color:var(--primary);}
.ph-search input::placeholder{color:var(--textMuted);}
.ph-filter{height:40px;border-radius:10px;border:1px solid var(--borderStrong);background:var(--surface2);color:var(--text);font-size:13px;font-weight:600;padding:0 10px;outline:none;flex-shrink:0;}

.ph-list{display:flex;flex-direction:column;gap:10px;}
.ph-empty{display:flex;flex-direction:column;align-items:center;gap:6px;padding:32px 16px;color:var(--textMuted);font-size:14px;border:1px dashed var(--borderStrong);border-radius:16px;background:var(--surface);}
.ph-empty i{font-size:28px;}

/* ── Provider card (compact, 72px) ── */
.ph-provider{border-radius:16px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadowSoft);}
.ph-provider-head{display:flex;align-items:center;gap:8px;min-height:36px;}
.ph-arrow{background:none;border:none;color:var(--textMuted);padding:2px;cursor:pointer;flex-shrink:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.ph-arrow i{font-size:16px;transition:transform var(--transition);}
.ph-provider.ph-open > .ph-provider-head .ph-arrow i,
.ph-model.ph-open > .ph-model-row .ph-arrow i{transform:rotate(180deg);}
.ph-provider-ic{width:28px;height:28px;flex-shrink:0;border-radius:7px;background:linear-gradient(135deg,rgba(109,93,252,.22),rgba(79,70,229,.10));border:1px solid rgba(109,93,252,.35);display:flex;align-items:center;justify-content:center;color:#A5B4FC;}
.ph-provider-ic i{font-size:16px;}
.ph-provider-txt{flex:1;min-width:0;}
.ph-provider-name{font-size:16px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ph-provider-name .ph-badge{display:inline-block;vertical-align:middle;margin-left:8px;}
.ph-provider-meta{font-size:11px;color:var(--textMuted);margin-top:0;}
.ph-badge{height:20px;line-height:20px;padding:0 8px;border-radius:999px;font-size:11px;font-weight:700;background:rgba(245,158,11,.15);color:#FCD34D;border:1px solid rgba(245,158,11,.3);flex-shrink:0;}

/* ── Icon buttons (32x32) ── */
.ph-controls{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.ph-actions{display:flex;align-items:center;gap:4px;flex-shrink:0;}
.ph-icon{width:28px;height:28px;border-radius:7px;border:1px solid var(--borderStrong);background:var(--surface2);color:var(--textMuted);display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:border-color var(--transition),color var(--transition),background var(--transition),opacity var(--transition);}
.ph-icon i{font-size:16px;pointer-events:none;}
.ph-icon:hover{border-color:var(--primary);color:var(--text);}
.ph-icon.is-on{background:rgba(109,93,252,.18);border-color:rgba(109,93,252,.55);color:#A5B4FC;}
.ph-icon.ph-wrench.is-on{background:rgba(245,158,11,.18);border-color:rgba(245,158,11,.55);color:#FCD34D;}
.ph-icon.ph-save{color:var(--success);}
.ph-icon.ph-save:disabled{opacity:.35;cursor:default;border-color:var(--border);background:var(--surface2);}
.ph-icon.ph-save:disabled:hover{color:var(--success);border-color:var(--border);}
.ph-price-form{display:flex;align-items:center;gap:4px;}

/* ── Model rows (56px) ── */
.ph-models{display:none;margin-top:8px;margin-left:14px;padding-left:8px;border-left:1px solid var(--border);}
.ph-provider.ph-open > .ph-models{display:block;}
.ph-model-row{min-height:40px;display:flex;align-items:center;gap:8px;padding:3px 0;flex-wrap:wrap;}
.ph-model-txt{flex:1;min-width:0;}
.ph-model-name{font-size:14px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.ph-model-price{font-size:11px;color:var(--textMuted);margin-top:0;}
.ph-model + .ph-model{margin-top:4px;}

/* ── Submodel rows (48px) ── */
.ph-submodels{display:none;margin-left:12px;padding-left:8px;border-left:1px dashed var(--border);}
.ph-model.ph-open > .ph-submodels{display:block;}
.ph-submodel-row{min-height:40px;display:flex;align-items:center;gap:6px;padding:3px 0;flex-wrap:wrap;}
.ph-submodel-txt{flex:1;min-width:0;}
.ph-submodel-name{font-size:13px;font-weight:500;color:var(--textSoft);display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.ph-submodel-price{font-size:11px;color:var(--textMuted);margin-top:0;}
.ph-submodel + .ph-submodel{margin-top:4px;}

/* ── Price input (FAmotion) ── */
.ph-price{height:32px;width:52px;border-radius:8px;border:1px solid var(--borderStrong);background:var(--bg2);color:var(--text);font-size:13px;font-weight:600;text-align:center;outline:none;transition:border-color var(--transition);}
.ph-price:focus{border-color:var(--primary);}
.ph-price::placeholder{color:var(--textMuted);font-weight:500;font-size:12px;}

@keyframes phSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* HP sangat kecil */
@media(max-width:420px){
    .ph-head{flex-direction:column;}
    .ph-sync-form{width:100%;}
    .ph-sync-btn{width:100%;justify-content:center;}
    .ph-price{width:48px;}
}

/* ─────────────────────────────────────────────
   GENERATE GRID v1 — Generate Image / Video / Bulk
   Grid 2 kolom card kategori compact (FAmotion & Pro)
   ───────────────────────────────────────────── */
.gen-page{padding:16px !important;max-width:100%;}
.gen-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.gen-head-text{min-width:0;}
.gen-page-title{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0;color:var(--text);display:flex;align-items:center;gap:10px;}
.gen-page-title i{font-size:20px;color:#A5B4FC;}
.gen-page-sub{font-size:14px;font-weight:400;color:var(--textMuted);margin-top:2px;max-width:100%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.gen-back-btn{height:40px;border-radius:10px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;padding:0 14px;flex-shrink:0;}

.gen-alert{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:12px;font-size:13px;margin-bottom:16px;}
.gen-alert-ok{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.28);color:#86efac;}
.gen-alert-err{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);color:#fca5a5;}

/* Provider filter (Pro) */
.gen-filter{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;border-radius:14px;background:var(--surface);border:1px solid var(--border);}
.gen-filter-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:6px 12px;border:1px solid var(--borderStrong);background:var(--surface2);color:var(--textMuted);border-radius:8px;cursor:pointer;transition:all .15s ease;height:32px;font-weight:600;}
.gen-filter-btn:hover{border-color:var(--primary);color:var(--text);}
.gen-filter-btn.active{background:rgba(109,93,252,.2);border-color:var(--primary);color:#C7D2FE;}
.gen-filter-btn img{width:16px;height:16px;object-fit:contain;border-radius:4px;}

/* Grid 2 kolom */
.gen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}

/* Card kategori */
.gen-card{min-height:112px;border-radius:16px;padding:12px;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadowSoft);display:flex;flex-direction:column;gap:4px;min-width:0;}
.gen-top{display:flex;align-items:flex-start;gap:10px;min-width:0;}
.gen-icon{width:32px;height:32px;flex-shrink:0;border-radius:10px;background:linear-gradient(135deg,rgba(109,93,252,.25),rgba(79,70,229,.12));border:1px solid rgba(109,93,252,.4);display:flex;align-items:center;justify-content:center;color:#A5B4FC;}
.gen-icon i{font-size:16px;}
.gen-title{font-size:14px;font-weight:600;color:var(--text);line-height:1.25;min-width:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;}
.gen-badges{display:flex;gap:6px;flex-wrap:wrap;}
.gen-badge{height:20px;line-height:20px;padding:0 8px;border-radius:999px;font-size:10px;font-weight:500;background:var(--surface2);border:1px solid var(--border);color:var(--textSoft);white-space:nowrap;}
.gen-btn{height:32px;border-radius:10px;border:none;background:linear-gradient(135deg,#6D5DFC,#4F46E5);color:#fff;font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;margin-top:auto;text-decoration:none;transition:box-shadow var(--transition),opacity var(--transition);}
.gen-btn i{font-size:13px;}
.gen-btn:hover{color:#fff;box-shadow:0 6px 18px rgba(109,93,252,.35);}
.gen-btn.is-off{opacity:.45;cursor:not-allowed;box-shadow:none;}

.gen-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:36px 16px;color:var(--textMuted);font-size:14px;border:1px dashed var(--borderStrong);border-radius:18px;background:var(--surface);}
.gen-empty i{font-size:30px;}

/* HP kecil */
@media(max-width:380px){
    .gen-card{min-height:106px;}
    .gen-page-title{font-size:21px;}
    .gen-badge{font-size:9px;padding:0 6px;}
}

/* ===== Card grid Generate — FAmotion (badge Server/Model dinamis) ===== */
.gen-grid-fam{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.gen-card-fam{min-height:136px;border-radius:16px;padding:12px;gap:4px;}
.gen-card-fam .gen-icon{width:32px;height:32px;border-radius:10px;}
.gen-card-fam .gen-icon i{font-size:16px;}
.gen-title-fam{font-size:15px;font-weight:600;line-height:1.25;}
.gen-badge-fam{height:24px;line-height:22px;padding:0 10px;border-radius:999px;font-size:10px;font-weight:600;background:#111827;border:1px solid rgba(255,255,255,.12);color:#E5E7EB;}
.gen-btn-fam{height:44px;border-radius:12px;font-size:14px;font-weight:600;}
.gen-btn-fam i{font-size:15px;}

/* ===== Upload Card — komponen upload premium (Generate Image/Video/Bulk) ===== */
.upload-card{position:relative;border:1px solid var(--border);border-radius:16px;padding:14px;background:var(--surface);cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease;min-width:0;}
.upload-card:hover{border-color:rgba(109,93,252,.55);}
.upload-card.is-dragover{border-color:var(--primary);box-shadow:0 0 0 3px rgba(109,93,252,.2);}
.upload-card-empty{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:18px 10px;}
.upload-card-icon{width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,rgba(109,93,252,.25),rgba(79,70,229,.12));border:1px solid rgba(109,93,252,.4);display:flex;align-items:center;justify-content:center;color:#A5B4FC;}
.upload-card-icon i{font-size:16px;}
.upload-card-title{font-size:13px;font-weight:600;color:var(--text);}
.upload-card-sub{font-size:11px;color:var(--textMuted);}
.upload-card-fmt{font-size:10px;color:var(--textSoft);background:var(--surface2);border:1px solid var(--border);border-radius:999px;padding:2px 10px;margin-top:2px;}
.upload-card-preview{display:flex;flex-direction:column;gap:10px;min-width:0;}
.upload-card-media{position:relative;border-radius:12px;overflow:hidden;background:var(--bg-muted);display:flex;align-items:center;justify-content:center;min-height:160px;max-height:200px;}
.upload-card-img{width:100%;height:160px;object-fit:cover;display:block;}
.upload-card-video{width:100%;height:160px;object-fit:cover;display:block;}
.upload-card-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:999px;background:rgba(0,0,0,.55);color:#fff;display:flex;align-items:center;justify-content:center;pointer-events:none;}
.upload-card-play i{font-size:22px;margin-left:3px;}
.upload-card-uploading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:8px;background:rgba(11,16,32,.72);color:#fff;font-size:12px;font-weight:600;z-index:2;}
.upload-card-meta{display:flex;align-items:center;gap:10px;min-width:0;}
.upload-card-info{flex:1;min-width:0;}
.upload-card-name{font-size:12px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.upload-card-size{font-size:11px;color:var(--textMuted);margin-top:1px;}
.upload-card-actions{display:flex;gap:6px;flex-shrink:0;}
.upload-card-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--borderStrong);background:var(--surface2);color:var(--textSoft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease;}
.upload-card-btn i{font-size:15px;}
.upload-card-btn:hover{color:var(--text);border-color:var(--primary);}
.upload-card-btn.danger:hover{color:#fca5a5;border-color:rgba(239,68,68,.5);}
.upload-card-err{display:none;margin-top:8px;padding:8px 12px;border-radius:8px;font-size:11px;color:#fca5a5;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.28);}
.upload-card-input{display:none;}

/* ============================================================
   MOBILE UX 2026-08 — fix audit UI mobile
   ============================================================ */

/* ── iOS auto-zoom saat fokus input ──
   iOS Safari memperbesar halaman saat fokus ke input ber-font <16px.
   Semua input (login, register, prompt generate, nominal deposit)
   dibuat 16px di layar kecil supaya tidak zoom. */
@media(max-width:640px){
    input.form-control,
    textarea.form-control,
    select.form-control,
    .login-card .form-control,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    textarea,
    select{
        font-size:16px;
    }
}


/* ── Preview video history: hemat kuota mobile ──
   preload=none + ikon play; metadata hanya diambil saat perlu. */
.video-thumb-wrap{position:relative;display:inline-block;line-height:0;}
.video-thumb-wrap .video-play-badge{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    color:#fff;font-size:18px;
    background:rgba(0,0,0,.25);
    border-radius:8px;
    pointer-events:none;
}