:root{
      --blue:#0d6efd;
      --ndma-blue:#0b5db3;
      --ndma-dark:#0a2342;
      --green:#21b66f;
      --purple:#8b4efb;
      --orange:#ff9e18;
      --red:#ff4d4f;
      --pink:#ff4fa3;
      --teal:#1cb6a4;
      --bg:#f4f7fb;
      --card:#ffffff;
      --border:#dfe7f1;
      --text:#122033;
      --muted:#66788a;
      --shadow:0 1px 2px rgba(16,24,40,.05),0 4px 12px rgba(16,24,40,.04);
      --radius:10px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:var(--text)}
    a{text-decoration:none;color:inherit}
    .app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
    .sidebar{background:linear-gradient(180deg,#0a2749 0%, #0a2038 100%);color:#fff;position:sticky;top:0;height:100vh;overflow:auto}
    .logo{display:flex;align-items:center;gap:14px;padding:18px 18px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
    .logo-icon{width:36px;height:36px;position:relative}
    .logo-icon:before,.logo-icon:after{content:"";position:absolute;top:0;width:14px;height:36px;border-radius:8px;background:linear-gradient(180deg,#2fa1ff,#0d6efd)}
    .logo-icon:before{left:0;transform:skewY(-10deg)}
    .logo-icon:after{right:0;transform:skewY(10deg)}
    .logo-text h1{margin:0;font-size:18px;font-weight:800;letter-spacing:.2px}
    .logo-text h1 span{color:#2b91ff}
    .logo-text p{margin:2px 0 0;font-size:10px;opacity:.9}
    .menu-group{padding:8px 0}
    .menu-title{padding:10px 18px 6px;font-size:12px;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.75)}
    .menu a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 18px;color:#fff;font-size:15px}
    .menu a .left{display:flex;align-items:center;gap:12px}
    .menu a.active,.menu a:hover{background:#0d57b3}
    .icon{width:20px;text-align:center;font-size:16px;opacity:.95}
    .badge{min-width:22px;height:22px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;background:#ff3547;color:#fff;font-size:12px;padding:0 6px}

    .main{min-width:0}
    .topbar{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
    .hamburger{font-size:24px;color:#394556;padding:0 4px}
    .search-wrap{flex:1;position:relative}
    .search-wrap input{width:100%;height:42px;padding:0 44px 0 14px;border:1px solid #d8dee8;border-radius:8px;background:#fafbfd;font-size:14px}
    .search-wrap span{position:absolute;right:14px;top:50%;transform:translateY(-50%);font-size:20px;color:#394556}
    .top-icons{display:flex;align-items:center;gap:16px}
    .bell{position:relative;font-size:22px}
    .bell .dot{position:absolute;top:-6px;right:-7px;width:18px;height:18px;border-radius:50%;background:#ef233c;color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700}
    .profile{display:flex;align-items:center;gap:10px}
    .avatar{width:42px;height:42px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:25px;background:#fff}
    .profile .name{font-weight:700;font-size:15px}
    .profile .role{font-size:13px;color:var(--muted)}

    .content{padding:16px 14px 22px}
    .grid-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-bottom:12px}
    .card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow)}
    .stat-card{display:flex;align-items:center;gap:14px;padding:14px}
    .stat-card .bigicon{width:74px;height:74px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:34px;color:#fff;font-weight:700;flex:0 0 auto}
    .stat-card h4{margin:0 0 7px;font-size:15px;font-weight:700}
    .stat-card .num{margin:0;font-size:22px;font-weight:800;color:#11233f}
    .stat-card .sub{margin-top:5px;font-size:12px;color:#0d6efd}
    .stat-card .sub.green{color:#169b62}
    .stat-card .sub.purple{color:#7a49d8}
    .actions{padding:14px}
    .actions h3{margin:2px 0 14px;font-size:16px}
    .action-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
    .action-btn{height:68px;border-radius:6px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-size:14px;font-weight:700}
    .action-btn span:first-child{font-size:24px;line-height:1}

    .row{display:grid;grid-template-columns:2.1fr 1.2fr 1.1fr;gap:12px;margin-bottom:12px}
    .section-title{font-size:16px;font-weight:800;margin:0 0 12px}
    .panel{padding:12px 12px 10px}

    .chart-legend{display:flex;gap:18px;justify-content:flex-end;margin-top:-4px;margin-bottom:8px;font-size:13px;color:#324255}
    .chart-legend span{display:inline-flex;align-items:center;gap:6px}
    .chart-legend i{display:inline-block;width:11px;height:11px;border-radius:50%}
    .bar-chart{height:190px;border:1px solid #e6edf6;border-radius:6px;padding:10px 10px 24px 10px;position:relative;background:
      linear-gradient(to top, rgba(15,23,42,.08) 1px, transparent 1px) 0 100%/100% 25%,
      #fff}
    .bar-chart .ylabels{position:absolute;left:6px;top:8px;bottom:24px;display:flex;flex-direction:column;justify-content:space-between;font-size:12px;color:#66788a}
    .bars{position:absolute;left:34px;right:8px;bottom:26px;top:8px;display:flex;align-items:flex-end;gap:12px}
    .month{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
    .stack{height:100%;display:flex;align-items:flex-end;gap:3px}
    .bar{width:9px;border-radius:3px 3px 0 0}
    .m-label{margin-top:6px;font-size:12px;color:#44556a}

    .donut-wrap{display:flex;align-items:center;gap:22px;padding-top:8px}
    .donut{width:170px;height:170px;border-radius:50%;background:conic-gradient(var(--green) 0 95%, var(--orange) 95% 99%, var(--red) 99% 100%);position:relative;flex:0 0 auto;margin:0 auto}
    .donut:after{content:"";position:absolute;inset:28px;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 1px var(--border)}
    .donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
    .donut-center .n{font-size:34px;font-weight:800}
    .donut-center .t{font-size:15px;color:#55697c}
    .legend-list{display:flex;flex-direction:column;gap:14px;font-size:14px}
    .legend-item{display:flex;align-items:flex-start;gap:10px}
    .legend-dot{width:14px;height:14px;border-radius:50%;margin-top:2px}

    .provider-list{display:flex;flex-direction:column;gap:16px;padding-top:6px}
    .prov{display:grid;grid-template-columns:120px 1fr 34px;gap:10px;align-items:center;font-size:14px}
    .progress{height:16px;border-radius:4px;background:#edf1f6;overflow:hidden}
    .progress > div{height:100%}

    .row-2{display:grid;grid-template-columns:1.15fr 1.05fr;gap:12px;margin-bottom:12px}
    .panel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
    .panel-head .danger{color:#d22b2b}
    .small-btn{background:#edf5ff;border:1px solid #b9d8ff;color:#1e78d6;padding:7px 12px;border-radius:6px;font-size:13px;font-weight:700}
    .small-btn.primary{background:#1e88ff;color:#fff;border-color:#1e88ff}

    table{width:100%;border-collapse:collapse;font-size:13px}
    thead th{background:#f8fafc;padding:10px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);text-align:left;color:#27384c}
    tbody td{padding:9px 10px;border-bottom:1px solid #eef2f7;color:#2f3f52;vertical-align:middle}
    tbody tr:hover{background:#fcfdff}
    .status-chip{display:inline-block;padding:5px 9px;border-radius:6px;font-size:12px;font-weight:700}
    .chip-warn{background:#fff0bf;color:#b57400}
    .chip-danger{background:#ff6464;color:#fff}
    .chip-success{background:#d6f6df;color:#0c8e47}
    .service{display:inline-flex;align-items:center;gap:6px}
    .svc-ico{font-size:14px}
    .tbl-btn{padding:5px 10px;border-radius:6px;background:#edf5ff;border:1px solid #b9d8ff;color:#1e78d6;font-size:12px;font-weight:700}
    .campaign-type{font-weight:700;color:#2665c1}
    .link-blue{color:#0d6efd}
    .map-pin{font-size:18px}

    @media (max-width:1400px){
      .grid-cards{grid-template-columns:repeat(2,1fr)}
      .row{grid-template-columns:1fr}
      .row-2{grid-template-columns:1fr}
      .action-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media (max-width:980px){
      .app{grid-template-columns:1fr}
      .sidebar{position:relative;height:auto}
      .grid-cards{grid-template-columns:1fr}
      .topbar{flex-wrap:wrap}
      .search-wrap{order:2;width:100%;flex:0 0 100%}
      .content{padding:12px}
    }
  
/* V3 backend integration styling, preserving V2 approved visual structure */
body{font-family:Arial,Helvetica,sans-serif;background:#f4f7fb}.content{max-width:none;padding:15px}.menu a{white-space:nowrap}.sidebar{z-index:25}.topbar{z-index:15}.search-wrap{margin:0}.search-wrap button{position:absolute;right:0;top:0;height:100%;background:none;border:0;color:#223650;padding:0 14px;font-size:25px;cursor:pointer}.logout-btn{font-size:12px;color:#135ea1;border:1px solid #cdd8e5;background:#fff;padding:7px;border-radius:6px}.hamburger{background:none;border:0;cursor:pointer}.nav-link.active{background:#0d57b3}.ov-stat{text-decoration:none;color:#15283f}.overview-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:12px}.overview-grid>.ov-stat{grid-column:span 1}.ov-stat{padding:13px;display:flex;gap:12px;align-items:center;min-height:100px}.ov-stat .ov-icon{display:flex;align-items:center;justify-content:center;border-radius:8px;width:70px;height:70px;font-size:34px;flex:0 0 70px;color:white}.ov-icon.blue,.action-btn.blue{background:linear-gradient(#269cff,#0878e2)}.ov-icon.green,.action-btn.green{background:linear-gradient(#35c981,#129d59)}.ov-icon.orange,.action-btn.orange{background:linear-gradient(#ffb13c,#f68b0b)}.ov-icon.red{background:#f05b5f}.ov-icon.purple,.action-btn.purple{background:linear-gradient(#a765ff,#793fdf)}.action-btn.cyan{background:#1bacdf}.action-btn.pink{background:#ee4a96}.ov-stat strong,.ov-stat b,.ov-stat small{display:block}.ov-stat strong{font-size:13px}.ov-stat b{font-size:25px;margin:5px 0}.ov-stat small{font-size:11px;color:#168b58}.ov-actions{grid-column:span 2;grid-row:span 2;padding:13px}.ov-actions h3,.panel h3{font-size:16px;margin:0 0 12px}.ov-actions .action-btn{height:72px;color:#fff;font-size:12px;text-align:center}.ov-actions .action-btn span:first-child{font-size:24px}.ov-stat.mini{min-height:92px}.ov-stat.mini .ov-icon{width:50px;height:50px;flex-basis:50px;color:white;font-size:23px}.dashboard-charts{display:grid;grid-template-columns:2fr 1.1fr 1fr;gap:12px;margin-bottom:12px}.dashboard-tables{display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel{padding:14px}.panel table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;white-space:nowrap}.panel th,.panel td{border-bottom:1px solid #edf0f5;padding:10px;text-align:left;font-size:12px}.panel th{background:#f4f8fc}.dashboard-charts .panel{min-height:230px}.chart-key{display:flex;justify-content:flex-end;gap:15px;font-size:11px;margin-bottom:8px}.chart-key span:nth-child(1){color:#1d89f2}.chart-key span:nth-child(2){color:#28b96a}.chart-key span:nth-child(3){color:#fd9625}.chart-bars{height:155px;display:flex;gap:7px;align-items:flex-end;background:repeating-linear-gradient(to top,#eef3f8 0 1px,transparent 1px 31px);padding:0 8px}.chart-month{flex:1;height:100%;display:flex;flex-direction:column;justify-content:end;min-width:0}.chart-three{height:130px;display:flex;align-items:end;gap:2px;justify-content:center}.chart-bar{width:25%;min-height:1px;border-radius:3px 3px 0 0}.chart-bar.domain{background:#1d89f2}.chart-bar.hosting{background:#28b96a}.chart-bar.ssl{background:#fd9625}.chart-month small{text-align:center;font-size:10px;margin-top:4px}.status-flex{display:flex;align-items:center;gap:16px}.status-donut{position:relative;width:148px;height:148px;flex:0 0 148px;border-radius:50%;display:flex;align-items:center;justify-content:center}.status-donut:before{content:"";width:104px;height:104px;border-radius:50%;background:#fff;position:absolute}.status-donut span{z-index:1;text-align:center}.status-donut b,.status-donut small{display:block}.status-donut b{font-size:23px}.status-donut small{font-size:11px}.status-legend{font-size:12px}.provider-row{display:grid;grid-template-columns:90px 1fr 35px;align-items:center;gap:8px;margin:12px 0;font-size:12px}.provider-row>div{height:14px;border-radius:3px;background:#eef3f7}.provider-row i{height:100%;display:block;background:#1e91ed;border-radius:3px}.provider-row:nth-child(odd) i{background:#22b56e}.provider-row:nth-child(3n) i{background:#fb9b20}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.toolbar h3{margin:0}.btn,.small-btn,.tbl-btn,button:not(.hamburger):not(.logout-btn):not(.search-wrap button){background:#147ff0;color:#fff;border:1px solid #1179dc;border-radius:5px;padding:9px 12px;cursor:pointer;display:inline-block;font-size:13px}.small-btn,.tbl-btn{color:#116ccd;background:#eff7ff;border-color:#c5e0f9;font-size:12px;padding:5px 9px}.secondary{background:#fff!important;color:#2865b1!important;border:1px solid #a9cce8!important}.panel,.card{background:#fff;border:1px solid #e0e8f2;border-radius:9px;box-shadow:0 2px 6px #142b4210}.panel h1,.content h1{font-size:23px}.content>h1{margin:8px 0 18px}.panel{margin-bottom:12px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.formgrid .full{grid-column:1/-1}label{display:block;font-size:13px;margin-bottom:6px;font-weight:700}input,select,textarea{font:inherit;max-width:100%}.panel input:not([type=checkbox]),.panel select,.panel textarea,.login-main input{display:block;width:100%;border:1px solid #ced9e5;padding:10px;border-radius:6px;margin-top:5px}.panel textarea{min-height:80px}.panel a{color:#116dcc}.panel a.btn{color:#fff}.notice{padding:12px;border:1px solid #9ad2ba;background:#e8fff0;border-radius:7px;margin-bottom:12px}.muted{color:#6d7e91;font-size:13px}.grid{display:flex;gap:12px}.grid .card{padding:18px;flex:1}.grid b{display:block;font-size:26px;margin-top:8px}.customer-profile-grid{display:grid;grid-template-columns:2fr 1fr;gap:12px}.customer-data{display:grid;grid-template-columns:150px 1fr;gap:10px}.customer-data dt{font-weight:bold}.customer-data dd{margin:0;overflow-wrap:anywhere}.stat-line{padding:12px;border-bottom:1px solid #eee;display:flex;justify-content:space-between}.monthgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.month{padding:15px;border:1px solid #cfe0f0;border-radius:7px;background:#fff}.month.selected{background:#e7f3ff;border-color:#1181ee}.login-main{max-width:450px;margin:9vh auto}.login-main .panel{padding:26px}.inline{display:inline}.danger{color:#cf2222}.footer{padding:12px}.menu-group .nav-link{font-size:14px}.menu-title{font-size:11px}.menu a:hover{color:#fff}
@media(max-width:1600px){.overview-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ov-actions{grid-column:span 4;grid-row:auto}.dashboard-charts{grid-template-columns:1.5fr 1fr}.dashboard-charts .panel:last-child{grid-column:1/-1}}@media(max-width:1100px){.app{grid-template-columns:1fr}.sidebar{height:auto;position:fixed;left:-260px;width:240px;transition:left .2s;bottom:0}.sidebar.open{left:0}.overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-actions{grid-column:span 2}.dashboard-tables{grid-template-columns:1fr}.dashboard-charts{grid-template-columns:1fr}.dashboard-charts .panel:last-child{grid-column:auto}}@media(max-width:640px){.overview-grid{grid-template-columns:1fr}.overview-grid>*{grid-column:1/-1!important}.action-grid{grid-template-columns:repeat(2,1fr)}.customer-profile-grid,.formgrid{grid-template-columns:1fr}.formgrid .full{grid-column:1}.content{padding:10px}.profile .name,.profile .role{display:none}.monthgrid{grid-template-columns:repeat(3,1fr)}.status-flex{flex-wrap:wrap}.search-wrap{order:3;width:100%}.topbar{flex-wrap:wrap}}