/* Existing asset style.css */
:root{--blue:#075bc7;--navy:#061b3c;--soft:#f4f8ff;--border:#e5efff;--text:#10233f;--muted:#64748b;--green:#16a34a;--red:#dc2626;--orange:#f59e0b}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background:var(--soft);color:var(--text)}a{text-decoration:none;color:inherit}.login-page{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,#061b3c,#075bc7)}.login-card{width:min(420px,92%);background:#fff;border-radius:24px;padding:32px;box-shadow:0 20px 60px rgba(0,0,0,.25)}.brand{font-weight:900;font-size:32px;color:var(--blue)}.brand span{display:block;font-size:12px;color:var(--muted);font-weight:700;margin-top:3px}.form-group{margin:14px 0}.form-group label{display:block;font-weight:800;margin-bottom:7px}.input,select,textarea{width:100%;border:1px solid var(--border);border-radius:12px;padding:12px;background:#fff;outline:none}.btn{border:0;border-radius:12px;padding:12px 16px;font-weight:900;cursor:pointer;display:inline-block}.btn-primary{background:var(--blue);color:#fff}.btn-dark{background:var(--navy);color:#fff}.btn-green{background:var(--green);color:#fff}.btn-red{background:var(--red);color:#fff}.layout{display:grid;grid-template-columns:270px 1fr;min-height:100vh}.sidebar{background:var(--navy);color:#fff;padding:24px;position:sticky;top:0;height:100vh}.sidebar .brand{color:#66aaff;margin-bottom:22px}.menu a{display:block;padding:12px 14px;border-radius:12px;margin-bottom:7px;color:#dbeafe;font-weight:800}.menu a:hover,.menu a.active{background:rgba(255,255,255,.12);color:#fff}.main{padding:26px}.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.topbar h1{font-size:28px}.card{background:#fff;border:1px solid var(--border);border-radius:22px;padding:22px;box-shadow:0 10px 28px rgba(0,0,0,.06);margin-bottom:20px}.grid{display:grid;gap:18px}.grid-4{grid-template-columns:repeat(4,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.stat{padding:22px;border-radius:20px;background:#fff;border:1px solid var(--border);box-shadow:0 10px 25px rgba(0,0,0,.06)}.stat small{color:var(--muted);font-weight:800}.stat h2{font-size:32px;margin-top:8px;color:var(--blue)}table{width:100%;border-collapse:collapse;background:#fff}th,td{padding:12px;border-bottom:1px solid #edf2ff;text-align:left;font-size:14px}th{color:var(--muted);font-size:12px;text-transform:uppercase}.badge{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:900;display:inline-block}.badge.active{background:#dcfce7;color:#166534}.badge.isolir{background:#fee2e2;color:#991b1b}.badge.pending{background:#fef3c7;color:#92400e}.badge.paid{background:#dcfce7;color:#166534}.actions{display:flex;gap:8px;flex-wrap:wrap}.alert{padding:12px 16px;border-radius:14px;margin-bottom:16px;background:#e0f2fe;color:#075985;font-weight:800}.muted{color:var(--muted)}.invoice{max-width:800px;margin:auto;background:#fff;padding:34px;border-radius:20px}.invoice-head{display:flex;justify-content:space-between;border-bottom:2px solid #e5efff;padding-bottom:18px;margin-bottom:18px}.print-hide{}@media(max-width:900px){.layout{grid-template-columns:1fr}.sidebar{height:auto;position:relative}.grid-4,.grid-3{grid-template-columns:1fr}.main{padding:16px}.topbar{display:block}.menu a{display:inline-block}}@media print{.print-hide,.sidebar,.topbar{display:none!important}.layout{display:block}.main{padding:0}.invoice{box-shadow:none;border-radius:0}}



/* From includes/header.php */
*{box-sizing:border-box}
    body{
      margin:0;
      font-family:Arial, Helvetica, sans-serif;
      background:#f4f8ff;
      color:#061b3c;
    }

    .layout{
      display:flex;
      min-height:100vh;
    }

    .sidebar{
      width:280px;
      min-height:100vh;
      background:#061b3c;
      color:white;
      padding:28px 24px;
      position:fixed;
      left:0;
      top:0;
      bottom:0;
      overflow-y:auto;
    }

    .brand{
      margin-bottom:34px;
      padding-left:4px;
    }

    .brand-title{
      font-size:38px;
      line-height:1;
      font-weight:900;
      letter-spacing:1px;
      color:#63a4ff;
    }

    .brand-subtitle{
      margin-top:8px;
      color:#91a7c6;
      font-size:14px;
      font-weight:700;
    }

    .side-menu a,
    .side-parent{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      text-decoration:none;
      color:white;
      padding:13px 14px;
      border-radius:12px;
      margin:7px 0;
      font-size:18px;
      font-weight:900;
      background:transparent;
      border:0;
      cursor:pointer;
      text-align:left;
      font-family:inherit;
    }

    .side-menu a:hover,
    .side-parent:hover{
      background:rgba(255,255,255,.08);
    }

    .side-menu a.active,
    .side-parent.open{
      background:#075bc7;
      box-shadow:0 10px 24px rgba(7,91,199,.25);
    }

    .side-parent .chev{
      font-size:24px;
      transition:.2s;
    }

    .side-parent.open .chev{
      transform:rotate(90deg);
    }

    .side-submenu{
      display:none;
      margin:4px 0 12px 12px;
      padding-left:12px;
      border-left:2px solid rgba(255,255,255,.16);
    }

    .side-submenu.show{
      display:block;
    }

    .side-submenu a{
      font-size:14px;
      font-weight:800;
      color:#dbeafe;
      padding:10px 12px;
      margin:5px 0;
      border-radius:10px;
    }

    .side-submenu a.active{
      background:#eaf3ff;
      color:#075bc7;
      box-shadow:none;
    }

    .main{
      margin-left:280px;
      width:calc(100% - 280px);
      padding:28px;
    }

    .topbar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      margin-bottom:20px;
    }

    .topbar h1{
      margin:0;
      font-size:32px;
      color:#061b3c;
    }

    .actions{display:flex;gap:10px;flex-wrap:wrap}

    .card{
      background:#fff;
      border:1px solid #e5efff;
      border-radius:20px;
      padding:24px;
      box-shadow:0 12px 30px rgba(0,0,0,.05);
      margin-bottom:18px;
    }

    .grid{display:grid;gap:18px}
    .grid-2{grid-template-columns:repeat(2,1fr)}
    .grid-3{grid-template-columns:repeat(3,1fr)}
    .grid-4{grid-template-columns:repeat(4,1fr)}

    .stat{
      background:#fff;
      border:1px solid #e5efff;
      border-radius:18px;
      padding:22px;
      box-shadow:0 12px 30px rgba(0,0,0,.05);
    }
    .stat small{color:#64748b;font-weight:800}
    .stat h2{margin:10px 0 0;color:#075bc7;font-size:34px}

    .input, input, select, textarea{
      width:100%;
      border:1px solid #dbeafe;
      border-radius:12px;
      padding:12px 14px;
      font-size:15px;
      outline:none;
      background:white;
    }

    textarea{min-height:90px}

    .form-group{margin-bottom:18px}
    .form-group label{
      display:block;
      margin-bottom:8px;
      font-weight:900;
      color:#061b3c;
      font-size:16px;
    }

    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      border:0;
      border-radius:12px;
      padding:11px 16px;
      font-weight:900;
      cursor:pointer;
      color:white;
      font-size:14px;
      background:#0f172a;
    }

    .btn-primary{background:#075bc7}
    .btn-dark{background:#061b3c}
    .btn-green{background:#16a34a}
    .btn-red{background:#dc2626}

    .alert{
      background:#dff2ff;
      color:#075985;
      border-radius:16px;
      padding:16px 18px;
      margin-bottom:18px;
      font-weight:800;
    }

    table{
      width:100%;
      border-collapse:collapse;
    }

    th,td{
      padding:14px 12px;
      border-bottom:1px solid #e5efff;
      text-align:left;
      vertical-align:top;
    }

    th{
      font-size:13px;
      color:#475569;
      text-transform:uppercase;
    }

    th a{
      color:#475569;
      text-decoration:none;
    }

    .badge{
      display:inline-block;
      border-radius:999px;
      padding:6px 10px;
      font-weight:900;
      font-size:12px;
      background:#eaf3ff;
      color:#075bc7;
    }

    .badge.active{background:#dcfce7;color:#166534}
    .badge.isolir{background:#fee2e2;color:#991b1b}
    .badge.inactive{background:#e5e7eb;color:#374151}

    @media(max-width:900px){
      .sidebar{position:relative;width:100%;min-height:auto}
      .layout{display:block}
      .main{margin-left:0;width:100%}
      .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
    }


/* From app/billing/payment_public.php */
:root{--blue:#075bea;--dark:#07183d;--muted:#62708f;--line:#e7eefc;--shadow:0 12px 28px rgba(12,50,110,.08)}body.payment-public *{box-sizing:border-box}html{scroll-behavior:smooth}body.payment-public{margin:0;min-height:100vh;background:#edf4ff;font-family:Arial,Helvetica,sans-serif;color:var(--dark)}body.payment-public .page{width:100%;min-height:100vh;background:linear-gradient(180deg,#f7fbff 0%,#fff 100%);padding-bottom:34px}body.payment-public .hero{position:relative;background:radial-gradient(circle at 10% 20%,rgba(255,255,255,.15),transparent 28%),radial-gradient(circle at 85% 10%,rgba(255,255,255,.12),transparent 30%),linear-gradient(135deg,#078df4 0%,#0042d9 88%);min-height:210px;padding:42px 24px 86px;text-align:center;color:#fff;overflow:hidden}body.payment-public .hero:before,body.payment-public .hero:after{content:"";position:absolute;left:-10%;right:-10%;height:96px;bottom:-58px;background:rgba(255,255,255,.22);border-radius:50% 50% 0 0;transform:rotate(3deg)}body.payment-public .hero:after{bottom:-70px;background:#f7fbff;transform:rotate(-2deg)}body.payment-public .hero h1{position:relative;z-index:2;margin:0;font-size:clamp(30px,4vw,48px);line-height:1.15;font-weight:900}body.payment-public .secure{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px;font-size:clamp(14px,2vw,20px)}body.payment-public .wrap{position:relative;z-index:3;width:min(1120px,calc(100% - 44px));margin:-46px auto 0}body.payment-public .card{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden}body.payment-public .provider-card{padding:clamp(20px,2.6vw,32px);display:flex;justify-content:space-between;align-items:center;gap:22px;min-height:138px}body.payment-public .label{color:var(--muted);font-weight:800;font-size:clamp(14px,1.5vw,17px);margin-bottom:9px}body.payment-public .provider-name{color:#075bea;font-size:clamp(29px,3.6vw,42px);font-weight:900;letter-spacing:.3px}body.payment-public .subtext{margin-top:8px;color:#43506e;font-size:clamp(14px,1.5vw,17px)}body.payment-public .icon-circle{width:clamp(82px,10vw,126px);height:clamp(82px,10vw,126px);flex:0 0 clamp(82px,10vw,126px);border-radius:50%;background:linear-gradient(135deg,#eef5ff,#f8fbff);display:flex;align-items:center;justify-content:center}body.payment-public .wifi-icon{font-size:clamp(40px,5vw,66px);color:#075bea;line-height:1}body.payment-public .info-card{padding:clamp(18px,2.4vw,28px);display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}body.payment-public .info-block{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;min-width:0}body.payment-public .info-block + .info-block{border-left:1px solid #dfe8f7;padding-left:22px}body.payment-public .round-icon{width:clamp(48px,6vw,64px);height:clamp(48px,6vw,64px);border-radius:18px;background:linear-gradient(135deg,#eaf3ff,#f8fbff);display:flex;align-items:center;justify-content:center;color:#075bea;box-shadow:inset 0 0 0 1px #dbeafe}body.payment-public .round-icon svg{width:54%;height:54%;stroke:currentColor;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}body.payment-public .info-title{color:#55617d;font-weight:800;font-size:clamp(14px,1.4vw,16px);margin-bottom:7px}body.payment-public .big{font-size:clamp(23px,2.8vw,31px);font-weight:900;word-break:break-word}body.payment-public .blue{color:#075bea}body.payment-public .period-pill{display:inline-block;margin-top:9px;background:#eaf3ff;color:#075bea;padding:7px 12px;border-radius:999px;font-weight:800;font-size:14px}body.payment-public .period-text{margin-top:10px;color:#18233f;font-size:clamp(13px,1.4vw,16px)}body.payment-public .pill{display:inline-block;margin-top:9px;background:#ffe3e6;color:#e21717;padding:8px 14px;border-radius:999px;font-weight:900;font-size:clamp(13px,1.4vw,16px)}body.payment-public .pill.paid{background:#dcfce7;color:#166534}body.payment-public .detail-card{padding:clamp(20px,2.6vw,30px)}body.payment-public .section-title{display:flex;align-items:center;gap:12px;font-size:clamp(19px,2vw,23px);font-weight:900;margin-bottom:22px}body.payment-public .section-title span{color:#075bea}body.payment-public .row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}body.payment-public .item-name,body.payment-public .price{font-size:clamp(17px,1.8vw,20px)}body.payment-public .item-sub{color:#5f6b85;margin-top:5px;font-size:clamp(13px,1.3vw,15px)}body.payment-public .price{white-space:nowrap;text-align:right}body.payment-public .bill-card{background:radial-gradient(circle at 80% 20%,rgba(255,255,255,.14),transparent 22%),linear-gradient(135deg,#0036b8,#087ff0);color:#fff;padding:clamp(26px,3.5vw,40px);display:flex;justify-content:space-between;align-items:center;min-height:190px;border-radius:20px;box-shadow:0 18px 38px rgba(0,77,200,.24)}body.payment-public .bill-title{font-size:clamp(19px,2vw,24px);font-weight:800;margin-bottom:17px}body.payment-public .bill-amount{font-size:clamp(38px,5.4vw,62px);font-weight:900;letter-spacing:.3px}body.payment-public .bill-note{font-size:clamp(14px,1.5vw,17px);margin-top:16px;opacity:.95}body.payment-public .receipt{width:clamp(120px,15vw,176px);height:clamp(115px,14vw,155px);position:relative;background:#fff;border-radius:22px 22px 12px 12px;transform:rotate(7deg);box-shadow:0 18px 24px rgba(0,0,0,.12)}body.payment-public .receipt:after{content:"$";position:absolute;right:18%;bottom:16%;width:34%;aspect-ratio:1/1;background:#278eff;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:clamp(26px,4vw,40px);font-weight:900}body.payment-public .receipt-line{position:absolute;left:18%;right:20%;height:9px;background:#c7d4fa;border-radius:999px}body.payment-public .receipt-line.a{top:28%}body.payment-public .receipt-line.b{top:44%;right:32%}body.payment-public .receipt-line.c{top:60%;right:46%}body.payment-public .warn{border:1px solid #b8d3ff;background:#f7fbff;border-radius:17px;padding:18px 22px;display:flex;align-items:center;gap:16px;margin-bottom:16px;color:#27344f;line-height:1.55;font-size:clamp(14px,1.5vw,17px)}body.payment-public .warn-icon{width:52px;height:52px;border-radius:50%;background:#eaf3ff;display:flex;align-items:center;justify-content:center;color:#075bea;font-size:26px;flex:0 0 52px}body.payment-public .btn-main{width:100%;border:0;background:linear-gradient(135deg,#087ff0,#004ee8);color:white;padding:20px 24px;border-radius:15px;font-size:clamp(20px,2.3vw,25px);font-weight:900;cursor:pointer;box-shadow:0 12px 22px rgba(0,79,225,.22)}body.payment-public .btn-sub{text-align:center;margin-top:13px;color:#8a94aa;font-size:clamp(14px,1.4vw,16px)}body.payment-public .method-card,body.payment-public .selected-card{display:none;padding:clamp(20px,2.6vw,30px)}body.payment-public .method-title{font-size:clamp(21px,2.3vw,26px);font-weight:900;margin-bottom:18px}body.payment-public .pay-option{border:1px solid #e3ecfb;border-radius:17px;padding:18px;display:flex;gap:15px;align-items:center;cursor:pointer;margin-bottom:12px;transition:.2s}body.payment-public .pay-option:hover{border-color:#075bea;box-shadow:0 10px 24px rgba(7,91,234,.12)}body.payment-public .pay-icon{width:60px;height:60px;border-radius:16px;background:#eef5ff;display:flex;align-items:center;justify-content:center;font-size:23px;color:#075bea;font-weight:900;flex:0 0 60px}body.payment-public .opt-title{font-size:clamp(18px,1.9vw,21px);font-weight:900}body.payment-public .opt-sub{margin-top:5px;color:#64708b;font-size:clamp(13px,1.3vw,15px)}body.payment-public .pay-summary{background:#f7fbff;border:1px solid #d9e8ff;border-radius:17px;padding:20px}body.payment-public .summary-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:11px 0;font-size:clamp(16px,1.6vw,19px);flex-wrap:wrap}body.payment-public .final{color:#075bea;font-size:clamp(22px,2.4vw,28px);font-weight:900}body.payment-public .change-btn,body.payment-public .copy{border:0;background:#075bea;color:#fff;padding:10px 14px;border-radius:10px;font-weight:900;cursor:pointer}body.payment-public .qris-img{width:230px;max-width:100%;display:block;margin:14px auto;border:1px solid #e5eaf5;border-radius:16px;padding:8px;background:white}body.payment-public .footer{text-align:center;color:#71809c;margin-top:20px;font-size:14px}@media(min-width:980px){body.payment-public .desktop-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;align-items:start}body.payment-public .desktop-grid .detail-card{margin-bottom:0}body.payment-public .desktop-grid .side-stack{display:flex;flex-direction:column;gap:16px}body.payment-public .desktop-grid .warn{margin-bottom:0}}@media(max-width:780px){body.payment-public .wrap{width:calc(100% - 32px)}body.payment-public .provider-card{min-height:124px}body.payment-public .info-card{grid-template-columns:1fr}body.payment-public .info-block + .info-block{border-left:0;border-top:1px solid #dfe8f7;padding-left:0;padding-top:18px}body.payment-public .bill-card{min-height:168px}}@media(max-width:520px){body.payment-public .hero{min-height:176px;padding:34px 18px 68px}body.payment-public .wrap{width:calc(100% - 24px);margin-top:-34px}body.payment-public .card{border-radius:16px;margin-bottom:12px}body.payment-public .provider-card{padding:18px;gap:12px;min-height:108px}body.payment-public .provider-name{font-size:28px}body.payment-public .subtext{font-size:13px}body.payment-public .icon-circle{width:74px;height:74px;flex-basis:74px}body.payment-public .wifi-icon{font-size:38px}body.payment-public .info-card{padding:18px}body.payment-public .info-block{grid-template-columns:50px 1fr;gap:12px}body.payment-public .round-icon{width:48px;height:48px;border-radius:15px}body.payment-public .big{font-size:22px}body.payment-public .period-text{font-size:13px}body.payment-public .bill-card{padding:20px;min-height:132px}body.payment-public .bill-amount{font-size:34px}body.payment-public .bill-note{font-size:13px}body.payment-public .receipt{display:none}body.payment-public .detail-card,body.payment-public .method-card,body.payment-public .selected-card{padding:18px}body.payment-public .row{align-items:center}body.payment-public .item-name,body.payment-public .price{font-size:16px}body.payment-public .warn{padding:15px;align-items:flex-start;gap:11px;font-size:13px}body.payment-public .warn-icon{width:42px;height:42px;flex-basis:42px;font-size:21px}body.payment-public .btn-main{padding:17px;border-radius:14px}body.payment-public .pay-option{padding:15px}body.payment-public .pay-icon{width:52px;height:52px;flex-basis:52px}}@media(max-width:380px){body.payment-public .wrap{width:calc(100% - 18px)}body.payment-public .provider-card{align-items:flex-start}body.payment-public .icon-circle{display:none}body.payment-public .info-block{grid-template-columns:1fr}body.payment-public .round-icon{display:none}body.payment-public .bill-amount{font-size:31px}}



/* From app/customer/customer_form.php */
.premium-form-wrap{max-width:1180px;margin:auto}
.hero-form{background:linear-gradient(135deg,#075bc7,#061b3c);color:white;border-radius:24px;padding:28px;margin-bottom:20px;box-shadow:0 18px 45px rgba(7,91,199,.25)}
.hero-form h2{margin:0 0 8px;font-size:30px}
.hero-form p{opacity:.9;margin:0}
.section-card{background:#fff;border:1px solid #e5efff;border-radius:22px;padding:24px;box-shadow:0 12px 30px rgba(0,0,0,.06);margin-bottom:18px}
.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.section-head h3{margin:0;color:#08234f}
.section-note{font-size:13px;color:#64748b}
.advanced-toggle{background:#eaf3ff;border:1px solid #cfe3ff;color:#075bc7;border-radius:12px;padding:10px 14px;font-weight:900;cursor:pointer}
.hidden-section{display:none}
.form-actions-sticky{position:sticky;bottom:0;background:rgba(244,248,255,.92);backdrop-filter:blur(10px);padding:16px;border-radius:18px;display:flex;gap:10px;z-index:9;border:1px solid #e5efff}
.input-hint{font-size:12px;color:#64748b;margin-top:5px}


/* From login.php */
body[data-page="login"] *{box-sizing:border-box}body[data-page="login"]{margin:0;min-height:100vh;font-family:Arial,Helvetica,sans-serif;background:linear-gradient(135deg,#061b3c,#075bc7);display:flex;align-items:center;justify-content:center;color:#061b3c;padding:24px}body[data-page="login"] .login-card{width:100%;max-width:430px;background:white;border-radius:26px;padding:34px;box-shadow:0 24px 60px rgba(0,0,0,.25)}body[data-page="login"] .brand{text-align:center;margin-bottom:28px}body[data-page="login"] .brand h1{margin:0;font-size:42px;letter-spacing:1px;color:#075bc7;font-weight:900}body[data-page="login"] .brand p{margin:8px 0 0;color:#64748b;font-weight:700}body[data-page="login"] .form-group{margin-bottom:18px}body[data-page="login"] label{display:block;font-weight:900;margin-bottom:8px}body[data-page="login"] input{width:100%;border:1px solid #dbeafe;border-radius:14px;padding:14px 15px;font-size:16px;outline:none}body[data-page="login"] input:focus{border-color:#075bc7;box-shadow:0 0 0 4px rgba(7,91,199,.12)}body[data-page="login"] .btn{width:100%;border:0;border-radius:14px;padding:14px 18px;background:#075bc7;color:white;font-weight:900;font-size:16px;cursor:pointer;margin-top:8px}body[data-page="login"] .alert{background:#fee2e2;color:#991b1b;border-radius:14px;padding:13px 15px;font-weight:800;margin-bottom:18px}body[data-page="login"] .hint{text-align:center;color:#64748b;font-size:13px;margin-top:18px;line-height:1.6}


/* =========================================================
   TAHAP 3.1 - Mobile Responsive iPhone 12 Pro Focus
   Acuan: lebar layar 390px. Sidebar jadi drawer, tabel jadi card.
   ========================================================= */
.mobile-topbar{
  display:none;
  position:sticky;
  top:0;
  z-index:1000;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);
  border-bottom:1px solid #e5efff;
  box-shadow:0 10px 24px rgba(6,27,60,.08);
}
.mobile-brand-mini{display:flex;align-items:center;gap:10px;min-width:0}
.mobile-logo-dot{width:38px;height:38px;border-radius:14px;background:linear-gradient(135deg,#075bc7,#38bdf8);box-shadow:0 10px 22px rgba(7,91,199,.25)}
.mobile-brand-text{font-weight:900;color:#061b3c;line-height:1.05;font-size:15px}
.mobile-brand-text small{display:block;color:#64748b;font-size:11px;margin-top:3px;font-weight:800}
.mobile-menu-btn{border:0;border-radius:14px;background:#061b3c;color:#fff;width:44px;height:44px;font-size:24px;font-weight:900;cursor:pointer;box-shadow:0 10px 22px rgba(6,27,60,.2)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(3,7,18,.48);z-index:1090;opacity:0;transition:.2s}
.sidebar-close{display:none;position:absolute;right:14px;top:14px;width:38px;height:38px;border:0;border-radius:13px;background:rgba(255,255,255,.12);color:#fff;font-size:24px;font-weight:900;cursor:pointer}
body.sidebar-open{overflow:hidden}
body.sidebar-open .sidebar-backdrop{display:block;opacity:1}

.table-responsive{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mobile-only{display:none!important}

@media(max-width:900px){
  body{background:#f4f8ff}
  .mobile-topbar{display:flex}
  .layout{display:block;min-height:100vh}
  .main{margin-left:0!important;width:100%!important;padding:14px!important;padding-top:16px!important}
  .sidebar{
    position:fixed!important;
    left:0!important;top:0!important;bottom:0!important;
    width:min(84vw,320px)!important;
    height:100vh!important;min-height:100vh!important;
    z-index:1100;
    transform:translateX(-105%);
    transition:transform .24s ease;
    padding:22px 18px!important;
    border-radius:0 24px 24px 0;
    box-shadow:18px 0 44px rgba(2,8,23,.28);
  }
  body.sidebar-open .sidebar{transform:translateX(0)}
  .sidebar-close{display:block}
  .sidebar .brand{margin-bottom:22px!important;padding-right:44px}
  .brand-title{font-size:30px!important}
  .brand-subtitle{font-size:12px!important}
  .side-menu a,.side-parent{font-size:15px!important;padding:12px 13px!important;margin:5px 0!important;border-radius:14px!important}
  .side-submenu{max-height:260px;overflow:auto}
  .side-submenu a{font-size:13px!important;padding:10px 11px!important}
  .topbar{align-items:flex-start!important;gap:10px!important;margin-bottom:12px!important}
  .topbar h1{font-size:23px!important;line-height:1.15}
  .topbar .actions{width:100%;display:grid!important;grid-template-columns:1fr;gap:8px!important}
  .card{border-radius:18px!important;padding:14px!important;margin-bottom:12px!important;box-shadow:0 8px 22px rgba(6,27,60,.06)!important}
  .grid,.grid-2,.grid-3,.grid-4{grid-template-columns:1fr!important;gap:12px!important}
  .stat{padding:16px!important;border-radius:16px!important}
  .stat h2{font-size:27px!important}
  .btn{min-height:40px;padding:10px 12px!important;border-radius:12px!important;font-size:13px!important;line-height:1.1;text-align:center}
  .actions{gap:7px!important}
  .input,input,select,textarea{font-size:16px!important;border-radius:13px!important;padding:11px 12px!important}
  form[method="get"]{display:grid!important;grid-template-columns:1fr 1fr;gap:9px!important}
  form[method="get"] .input,form[method="get"] input,form[method="get"] select{max-width:none!important;width:100%!important}
  form[method="get"] input[name="q"]{grid-column:1/-1}
  form[method="get"] button,form[method="get"] a.btn{width:100%}
  .mobile-only{display:block!important}
}

@media(max-width:520px){
  .main{padding-left:10px!important;padding-right:10px!important}
  .topbar h1{font-size:21px!important}
  .customer-nav,.nav-tabs{overflow-x:auto;white-space:nowrap;padding-bottom:4px}

  /* khusus tabel Data Pelanggan: ubah jadi kartu mobile */
  .card > table{display:block;background:transparent;border-collapse:separate}
  .card > table thead{display:none}
  .card > table tbody{display:block}
  .card > table tr{display:block;background:#fff;border:1px solid #e5efff;border-radius:18px;padding:12px;margin-bottom:12px;box-shadow:0 8px 20px rgba(6,27,60,.06)}
  .card > table td{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border:0!important;padding:7px 0!important;font-size:13px!important;line-height:1.35}
  .card > table td:before{flex:0 0 86px;color:#64748b;font-size:11px;text-transform:uppercase;font-weight:900;letter-spacing:.2px}
  .card > table td:nth-child(1){display:none}
  .card > table td:nth-child(2){display:block;padding-top:0!important}
  .card > table td:nth-child(2):before{display:none}
  .card > table td:nth-child(2) b{font-size:16px;color:#061b3c;display:block;margin-bottom:2px}
  .card > table td:nth-child(2) small{font-size:12px;color:#64748b}
  .card > table td:nth-child(3):before{content:'Paket'}
  .card > table td:nth-child(4):before{content:'Area'}
  .card > table td:nth-child(5):before{content:'Tempo'}
  .card > table td:nth-child(6):before{content:'Status'}
  .card > table td:nth-child(7){display:block;border-top:1px solid #edf2ff!important;margin-top:7px;padding-top:10px!important}
  .card > table td:nth-child(7):before{display:none}
  .card > table td.actions{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:7px!important}
  .card > table td.actions .btn{width:100%;min-width:0;padding-left:6px!important;padding-right:6px!important;font-size:12px!important}
  .badge{font-size:11px!important;padding:6px 9px!important}
  .card > div[style*="margin-top:16px"]{display:grid!important;grid-template-columns:repeat(5,1fr);gap:6px!important}
  .card > div[style*="margin-top:16px"] .btn{padding:9px 6px!important;min-width:0;width:100%}
}

@media(max-width:390px){
  .mobile-brand-text{font-size:14px}.mobile-brand-text small{font-size:10px}
  .mobile-topbar{padding:10px 11px}.mobile-menu-btn{width:42px;height:42px}
  form[method="get"]{grid-template-columns:1fr!important}
  .card > table td.actions{grid-template-columns:1fr 1fr!important}
  .card > table td.actions .btn:first-child{grid-column:1/-1}
}

/* =========================================================
   TAHAP 3.2 - Mobile HP polish sesuai revisi
   Fokus iPhone 12 Pro: 390px, form rapi, tabel scroll mandiri.
   ========================================================= */
.mobile-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:16px;
}
.billing-generate-row{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(110px,.7fr) auto;
  gap:12px;
  align-items:end;
}
.billing-generate-button{display:flex;align-items:end;margin-bottom:0}
.billing-generate-button .btn{height:44px;min-width:120px}
.wa-settings-grid .wa-wide{grid-column:1/-1!important}
.invoice-scroll{width:100%;overflow:auto;-webkit-overflow-scrolling:touch;max-height:62vh;border-radius:16px;border:1px solid #e5efff}
.invoice-scroll table{margin:0;min-width:940px}
.invoice-scroll thead th{position:sticky;top:0;background:#f8fbff;z-index:2;box-shadow:0 1px 0 #e5efff}

@media(max-width:900px){
  /* Dashboard kotak kecil */
  .mobile-stat-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important;margin-bottom:10px!important}
  .mobile-stat-grid .stat,.grid .stat{padding:10px 8px!important;border-radius:15px!important;min-height:76px;display:flex;flex-direction:column;justify-content:center}
  .mobile-stat-grid .stat small,.grid .stat small{font-size:10px!important;letter-spacing:.1px!important;line-height:1.05;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .mobile-stat-grid .stat h2,.grid .stat h2{font-size:22px!important;line-height:1;margin-top:5px!important}

  /* Form tambah/edit pelanggan: per baris biar lega */
  .customer-mobile-form .section-card{padding:14px!important;border-radius:18px!important;margin-bottom:12px!important}
  .customer-mobile-form .section-head{display:block!important;margin-bottom:12px!important}
  .customer-mobile-form .section-head h3{font-size:17px!important;margin-bottom:4px!important}
  .customer-mobile-form .section-note{font-size:12px!important;line-height:1.35!important}
  .customer-mobile-form .grid,
  .customer-mobile-form .grid-2,
  .customer-mobile-form .grid-3,
  .customer-mobile-form .grid-4,
  .customer-mobile-form .data-extra-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .customer-mobile-form .form-group,
  .customer-mobile-form .form-group[style*="grid-column"],
  .customer-mobile-form .data-extra-notes{
    grid-column:1/-1!important;
    min-width:0!important;
  }
  .customer-mobile-form .form-group label{font-size:12px!important;margin-bottom:6px!important}
  .customer-mobile-form textarea{min-height:88px!important}
  .customer-mobile-form .form-group div[style*="display:flex"]{display:grid!important;grid-template-columns:1fr!important;gap:8px!important}
  .customer-mobile-form .form-group div[style*="display:flex"] .btn{width:100%!important}
  .data-extra-section .data-extra-grid{background:#f8fbff;border:1px solid #e5efff;border-radius:16px;padding:10px}
  .form-actions-sticky{display:grid!important;grid-template-columns:1fr 1fr 1fr;gap:8px!important;padding:10px!important;border-radius:16px!important}
  .form-actions-sticky .btn{width:100%!important;min-width:0!important}

  /* Generate tagihan tetap sebaris: Bulan | Tahun | Generate */
  .billing-generate-row{grid-template-columns:1.15fr .75fr auto!important;gap:8px!important;align-items:end!important}
  .billing-generate-row .form-group{margin:0!important;min-width:0!important}
  .billing-generate-row label{font-size:11px!important;margin-bottom:5px!important;white-space:nowrap}
  .billing-generate-row .input{height:42px!important;padding:9px 8px!important;font-size:14px!important}
  .billing-generate-button .btn{height:42px!important;min-width:86px!important;padding-left:10px!important;padding-right:10px!important}

  /* WA Blast: setting kebawah, table invoice scroll sendiri */
  .wa-settings-panel{margin-top:12px!important}
  .wa-settings-panel h3{font-size:17px!important;line-height:1.2;margin-bottom:8px!important}
  .wa-settings-grid{grid-template-columns:1fr!important;gap:10px!important}
  .wa-settings-grid .form-group,
  .wa-settings-grid .wa-wide{grid-column:1/-1!important}
  .wa-settings-grid textarea{min-height:96px!important}
  .invoice-scroll{max-height:58vh;overflow:auto!important;border-radius:16px;background:#fff;touch-action:pan-x pan-y}
  .invoice-scroll table{display:table!important;min-width:980px!important;width:max-content!important;border-collapse:collapse!important}
  .invoice-scroll thead{display:table-header-group!important}
  .invoice-scroll tbody{display:table-row-group!important}
  .invoice-scroll tr{display:table-row!important;box-shadow:none!important;border-radius:0!important;margin:0!important;padding:0!important}
  .invoice-scroll th,.invoice-scroll td{display:table-cell!important;white-space:nowrap;padding:10px 12px!important;border-bottom:1px solid #edf2ff!important;font-size:12px!important}
  .invoice-scroll td:before{display:none!important}
  .invoice-scroll .btn{min-height:32px!important;padding:8px 10px!important;font-size:12px!important}
}

@media(max-width:520px){
  .mobile-stat-grid{grid-template-columns:repeat(3,1fr)!important}
  .topbar .actions .btn{width:100%}
  .billing-generate-row{grid-template-columns:1fr .68fr 86px!important}
  .billing-generate-row .input{font-size:13px!important}
  .billing-generate-button .btn{min-width:0!important;width:86px!important;font-size:12px!important}
  .card:has(.billing-generate-row){padding:12px!important}
  .card:has(.billing-generate-row) h3{font-size:16px!important;margin-bottom:-4px!important}
  .invoice-scroll{max-height:56vh}
}

@media(max-width:390px){
  .mobile-stat-grid{gap:7px!important}
  .mobile-stat-grid .stat,.grid .stat{min-height:68px;padding:8px 6px!important}
  .mobile-stat-grid .stat small,.grid .stat small{font-size:9px!important}
  .mobile-stat-grid .stat h2,.grid .stat h2{font-size:20px!important}
  .billing-generate-row{grid-template-columns:1fr .62fr 78px!important;gap:6px!important}
  .billing-generate-button .btn{width:78px!important;padding-left:6px!important;padding-right:6px!important}
}