:root{
  --bg:#07172f;--bg2:#0b1d3b;--panel:#10254b;--panel2:#132a55;--panel3:#0c2043;
  --text:#f6f8ff;--muted:#8da0c9;--line:rgba(142,166,219,.14);
  --cyan:#16d9f4;--cyan2:#04a9e8;--pink:#ff2f86;--violet:#7d5cff;
  --ok:#2ce3a0;--bad:#ff5370;--warn:#ffb54d;--shadow:0 22px 70px rgba(0,8,28,.34);
}
*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 80% -10%,rgba(22,217,244,.08),transparent 34%),linear-gradient(145deg,#06152c,#081a37 48%,#07152d);color:var(--text);min-height:100vh}a{color:#7ae8fb;text-decoration:none}a:hover{color:#fff}h1,h2,h3{margin-top:0}small{display:block;color:var(--muted);margin-top:4px}.muted{color:var(--muted)}
.app-shell{display:flex;min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:250px;padding:22px 16px 18px;background:linear-gradient(180deg,#0b1e3d 0%,#091833 100%);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:30;box-shadow:18px 0 55px rgba(0,0,0,.15)}
.brand-wrap{display:flex;align-items:center;gap:11px;padding:4px 7px 20px}.brand-mark{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,var(--cyan),#6ef8ff);box-shadow:0 0 24px rgba(22,217,244,.35);color:#03203a;font-weight:900}.brand{font-size:18px;color:#fff;font-weight:800;letter-spacing:.01em}.brand b{color:var(--cyan)}.sidebar-label{padding:6px 10px 9px;color:#5f79aa;font-size:10px;text-transform:uppercase;letter-spacing:.14em;font-weight:800}.sidebar nav{display:grid;gap:7px}.sidebar nav a{position:relative;display:flex;align-items:center;gap:11px;color:#91a4c9;padding:11px 12px;border-radius:8px;font-size:14px;font-weight:650;transition:.18s ease}.sidebar nav a .nav-icon{width:24px;height:24px;display:grid;place-items:center;border-radius:7px;background:rgba(255,255,255,.035);color:#7893c2;font-size:14px}.sidebar nav a:hover{background:rgba(255,255,255,.055);color:#fff;transform:translateX(2px)}.sidebar nav a.active{color:#fff;background:linear-gradient(90deg,#0fcde9,#12b8e8);box-shadow:0 10px 28px rgba(4,169,232,.23)}.sidebar nav a.active .nav-icon{background:rgba(5,25,55,.2);color:#fff}.sidebar nav a.active:before{content:"";position:absolute;left:-16px;width:3px;height:26px;border-radius:0 3px 3px 0;background:#5cf4ff;box-shadow:0 0 16px #1ee4ff}.nav-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--pink);display:grid;place-items:center;color:white;font-size:10px;font-weight:800}.sidebar-spacer{height:10px}.sidebar-foot{margin-top:auto;padding:15px 9px 2px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px}.mini-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#18dcf1,#7f6bff);font-weight:900;color:#07152d}.sidebar-user{min-width:0;flex:1}.sidebar-user b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sidebar-user span{font-size:11px;color:#6f85af}.logout-link{font-size:18px;color:#6982ad!important}
.main{margin-left:250px;width:calc(100% - 250px);min-height:100vh}.topbar{height:78px;padding:0 28px;background:rgba(8,25,53,.72);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;position:sticky;top:0;z-index:20}.topbar h1{font-size:20px;margin:0;font-weight:780}.topbar-meta{font-size:11px;margin-top:4px}.top-actions{margin-left:auto;display:flex;align-items:center;gap:10px}.icon-btn{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);background:#0d244a;color:#9fb7e5;display:grid;place-items:center;cursor:pointer;position:relative}.icon-btn .ping{position:absolute;right:7px;top:7px;width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 9px var(--cyan)}.top-avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#1de3f5,#8e54ff);box-shadow:0 0 18px rgba(22,217,244,.22);font-weight:900;color:#07162d;border:2px solid rgba(255,255,255,.15)}.menu-btn{display:none}.content{padding:24px 28px 34px;max-width:1800px;margin:auto}
.dashboard-grid{display:grid;grid-template-columns:1.1fr .95fr .9fr;gap:16px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}.stat{position:relative;overflow:hidden;background:linear-gradient(155deg,rgba(18,43,86,.98),rgba(12,32,67,.98));padding:18px 18px 16px;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}.stat:after{content:"";position:absolute;width:110px;height:110px;border-radius:50%;right:-50px;top:-55px;background:radial-gradient(circle,rgba(22,217,244,.14),transparent 68%)}.stat span{display:block;color:#8399c5;font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:750}.stat b{font-size:30px;display:block;margin-top:8px}.stat small{font-size:11px}.stat.accent b{color:var(--cyan)}.stat.good b{color:var(--ok)}.stat.danger b{color:var(--pink)}.stat.warn b{color:var(--warn)}
.card{background:linear-gradient(155deg,rgba(17,41,82,.96),rgba(12,31,64,.98));border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:var(--shadow);margin-bottom:16px}.card h2{font-size:15px;letter-spacing:.01em}.card h3{font-size:13px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px}.card-head h2{margin:0}.card-link{font-size:11px;color:#79e7f7}.grid-2{display:grid;grid-template-columns:minmax(0,2fr) minmax(290px,1fr);gap:16px}.dash-main{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}.dash-side{display:grid;grid-template-columns:1fr 1fr;gap:16px}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}.mini-metric{background:rgba(6,22,49,.55);border:1px solid var(--line);border-radius:9px;padding:11px;text-align:center}.mini-metric b{display:block;font-size:18px}.mini-metric span{font-size:10px;color:#7189b6;text-transform:uppercase}.chart-shell{height:210px;position:relative;background:linear-gradient(180deg,rgba(12,35,74,.2),rgba(4,18,43,.55));border-radius:9px;border:1px solid rgba(128,154,211,.07);overflow:hidden}.chart-shell:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 40px,rgba(138,164,220,.075) 41px),repeating-linear-gradient(to right,transparent 0,transparent 70px,rgba(138,164,220,.055) 71px)}.trend-svg{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);overflow:visible}.trend-line{fill:none;stroke:url(#trendGradient);stroke-width:3;filter:drop-shadow(0 0 5px rgba(255,47,134,.55))}.trend-fill{fill:url(#fillGradient);opacity:.4}.trend-dot{fill:#ff2f86;stroke:#ffd2e3;stroke-width:1.5}.chart-empty{height:100%;display:grid;place-items:center;color:#6c82ad;font-size:12px}.chart-labels{position:absolute;left:12px;right:12px;bottom:8px;display:flex;justify-content:space-between;color:#6178a4;font-size:9px}
.health-card{display:flex;gap:18px;align-items:center}.donut{--pct:0;--ring:var(--cyan);width:128px;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--ring) calc(var(--pct)*1%),rgba(80,108,164,.18) 0);display:grid;place-items:center;box-shadow:0 0 28px rgba(22,217,244,.12)}.donut:before{content:"";width:86px;aspect-ratio:1;border-radius:50%;background:#10264d;box-shadow:inset 0 0 24px rgba(0,0,0,.18)}.donut-center{position:absolute;text-align:center}.donut-wrap{position:relative;display:grid;place-items:center}.donut-center b{font-size:24px;display:block}.donut-center span{font-size:10px;color:#7087b4}.health-legend{flex:1;display:grid;gap:9px}.legend-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#a9b8d7}.legend-item i{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px currentColor}.legend-item.bad i{background:var(--pink)}.legend-item.warn i{background:var(--warn)}.legend-item b{margin-left:auto;color:#fff}
.progress-list{display:grid;gap:15px}.progress-row .progress-label{display:flex;justify-content:space-between;font-size:11px;color:#94a7ce;margin-bottom:7px}.progress{height:5px;border-radius:99px;background:#263e6a;overflow:visible;position:relative}.progress>i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--cyan),var(--violet));position:relative}.progress>i:after{content:"";width:10px;height:10px;border-radius:50%;background:var(--pink);position:absolute;right:-4px;top:-3px;box-shadow:0 0 10px var(--pink)}
.table-wrap{overflow:auto;border-radius:9px}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;padding:12px 10px;border-bottom:1px solid rgba(139,164,215,.11);vertical-align:top;font-size:12px}th{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#667eaa;background:rgba(2,18,42,.24)}tr:last-child td{border-bottom:0}tbody tr:hover{background:rgba(255,255,255,.018)}
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;font-size:10px;font-weight:800}.badge:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}.badge.ok{background:rgba(44,227,160,.1);color:var(--ok)}.badge.bad{background:rgba(255,83,112,.1);color:var(--bad)}.badge.warn{background:rgba(255,181,77,.1);color:var(--warn)}.badge.muted{background:rgba(138,161,203,.11);color:#8ba0c7}
.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid rgba(118,146,202,.22);background:#10284f;color:#dbe7ff;border-radius:8px;padding:9px 13px;font-weight:750;font-size:12px;cursor:pointer;transition:.18s ease}.btn:hover{background:#15325f;color:#fff;border-color:rgba(22,217,244,.35)}.btn.primary{background:linear-gradient(90deg,#11cde8,#0baee6);border-color:transparent;color:#03203a;box-shadow:0 8px 22px rgba(10,184,231,.18)}.btn.primary:hover{filter:brightness(1.08)}.btn.ghost{background:rgba(9,31,64,.76);color:#70e6f5;border-color:rgba(22,217,244,.18)}.btn.danger{color:#ff7690}.btn.small{padding:6px 8px;font-size:10px}.btn.wide{width:100%;margin-top:8px}.actions{display:flex;gap:7px;flex-wrap:wrap}.inline{display:inline-flex;gap:6px}
.form-card{max-width:980px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.form-grid h3{grid-column:1/-1;margin:8px 0 -4px}.form-grid .full{grid-column:1/-1}label{font-size:11px;font-weight:750;color:#91a6ce;display:block}input,select,textarea{width:100%;margin-top:7px;border:1px solid rgba(126,151,202,.2);background:#0a2146;border-radius:8px;padding:11px 12px;font:inherit;color:#eef5ff;outline:none}input:focus,select:focus,textarea:focus{border-color:#20d8ee;box-shadow:0 0 0 3px rgba(22,217,244,.08)}option{background:#0c2144;color:#fff}label.check{display:flex;align-items:center;gap:8px;padding-top:26px}label.check input{width:auto;margin:0}.split{display:grid;grid-template-columns:1fr 1fr;gap:8px}.alert{padding:11px 13px;border-radius:8px;margin-bottom:14px;font-size:12px}.alert.success{background:rgba(44,227,160,.1);color:#64efbb;border:1px solid rgba(44,227,160,.18)}.alert.danger{background:rgba(255,83,112,.1);color:#ff7f98;border:1px solid rgba(255,83,112,.2)}.alert.warn{background:rgba(255,181,77,.1);color:#ffc979;border:1px solid rgba(255,181,77,.18)}.note{padding:11px 13px;background:rgba(3,18,43,.42);border:1px solid var(--line);border-radius:8px;color:#8da3cc;font-size:11px}.status-strip{display:flex;flex-wrap:wrap;gap:18px;border-top:1px solid var(--line);margin-top:18px;padding-top:16px}.incident-list>div{padding:10px 0;border-bottom:1px solid var(--line)}.incident-list small{margin-left:17px}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px}.dot.red{background:var(--bad);box-shadow:0 0 10px rgba(255,83,112,.6)}pre{white-space:pre-wrap;word-break:break-all;background:#06152e;color:#dbeafe;padding:12px;border-radius:8px;font-size:11px;border:1px solid var(--line)}.pager{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}.text-warn{color:var(--warn)}
.service-card{position:relative;overflow:hidden}.service-orb{position:absolute;width:150px;height:150px;border-radius:50%;right:-70px;bottom:-80px;background:radial-gradient(circle,rgba(22,217,244,.17),transparent 68%)}.service-state{display:flex;align-items:center;gap:10px;margin-bottom:12px}.service-state .pulse{width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(44,227,160,.4);animation:pulse 2s infinite}@keyframes pulse{70%{box-shadow:0 0 0 8px rgba(44,227,160,0)}100%{box-shadow:0 0 0 0 rgba(44,227,160,0)}}
.login-body,.install-body{min-height:100vh;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 70% 0,rgba(22,217,244,.12),transparent 30%),linear-gradient(145deg,#06152c,#0b2145)}.login-card,.install-card{width:min(440px,100%);background:linear-gradient(155deg,#112a55,#0a2044);padding:30px;border-radius:16px;border:1px solid var(--line);box-shadow:0 30px 90px rgba(0,0,0,.35)}.brand.big{font-size:28px;color:#fff;margin-bottom:8px}.login-card form{display:grid;gap:16px;margin-top:24px}.install-card{width:min(780px,100%)}.install-card .form-grid{margin-top:20px}
@media(max-width:1180px){.stats{grid-template-columns:1fr 1fr}.dash-main{grid-template-columns:1fr}.dash-side{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.sidebar{transform:translateX(-100%);transition:.22s}.main{margin-left:0;width:100%}.menu-open .sidebar{transform:translateX(0)}.menu-btn{display:inline-grid;place-items:center;width:38px;height:38px;border:1px solid var(--line);background:#10284f;color:#d9e7ff;border-radius:9px}.content{padding:18px}.topbar{padding:0 18px}.top-actions .btn{display:none}}
@media(max-width:640px){.stats{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:14px}.stat b{font-size:24px}.form-grid,.dash-side{grid-template-columns:1fr}.form-grid .full,.form-grid h3{grid-column:1}.content{padding:12px}.card{padding:14px;border-radius:10px}.topbar{height:70px}.topbar h1{font-size:17px}.topbar-meta{display:none}.login-card,.install-card{padding:22px}.status-strip{display:grid;grid-template-columns:1fr 1fr}.actions{min-width:180px}.health-card{align-items:flex-start}.donut{width:110px}.donut:before{width:74px}.top-actions .icon-btn{display:none}}

/* v1.2.0 müşteri + ödeme modülü */
.stats{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.payment-pill{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 9px;border-radius:999px;font-size:10px;font-weight:850;border:1px solid transparent}
.payment-pill.ok{color:var(--ok);background:rgba(44,227,160,.10);border-color:rgba(44,227,160,.16)}
.payment-pill.due{color:#ffd86b;background:rgba(255,216,107,.10);border-color:rgba(255,216,107,.17)}
.payment-pill.warn{color:var(--warn);background:rgba(255,181,77,.10);border-color:rgba(255,181,77,.17)}
.payment-pill.bad{color:var(--bad);background:rgba(255,83,112,.11);border-color:rgba(255,83,112,.18)}
.payment-pill.muted{color:#91a4c9;background:rgba(145,164,201,.08);border-color:rgba(145,164,201,.12)}
.payment-preview{display:flex;align-items:center;gap:10px;align-self:end;min-height:62px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:rgba(4,20,45,.42)}
.payment-preview span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}.payment-preview b{margin-left:auto}.payment-preview small{margin:0}
.payment-list{display:grid;gap:7px}.payment-list>a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);color:#eef5ff}.payment-list>a:last-child{border-bottom:0}.payment-list b{display:block;font-size:12px}.payment-list small{font-size:10px}
.text-danger{color:var(--bad)!important}.login-alt{text-align:center;margin:18px 0 0;font-size:12px}.login-alt a{color:#79e7f7}
.customer-site-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}.site-status-card{display:block;background:linear-gradient(155deg,rgba(17,41,82,.96),rgba(12,31,64,.98));border:1px solid var(--line);border-radius:12px;padding:18px;color:var(--text);box-shadow:var(--shadow);transition:.18s}.site-status-card:hover{transform:translateY(-2px);border-color:rgba(22,217,244,.26);color:#fff}.site-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.site-card-top h2{margin:5px 0 3px;font-size:18px}.site-card-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:18px 0 12px}.site-card-metrics>div,.detail-metrics>div{padding:11px;border:1px solid rgba(126,151,202,.12);background:rgba(5,22,50,.42);border-radius:9px}.site-card-metrics span,.detail-metrics span{display:block;color:#748bb5;font-size:9px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}.site-card-metrics b{font-size:13px}.site-payment-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:11px;color:#9eb1d4}.site-last-check{font-size:10px;color:#6f84ad;padding-top:8px}.detail-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:9px}.detail-metrics b{font-size:13px}.detail-metrics b.ok{color:var(--ok)}.detail-metrics b.due{color:#ffd86b}.detail-metrics b.warn{color:var(--warn)}.detail-metrics b.bad{color:var(--bad)}
@media(max-width:640px){.customer-site-grid{grid-template-columns:1fr}.site-card-metrics{grid-template-columns:1fr 1fr}.payment-preview{grid-column:1}.detail-metrics{grid-template-columns:1fr 1fr}}

/* v1.3.0 TROOM customer dashboard */
.customer-ui{background:
 radial-gradient(circle at 15% 0,rgba(0,174,255,.12),transparent 25%),
 radial-gradient(circle at 100% 5%,rgba(112,46,255,.10),transparent 28%),
 linear-gradient(145deg,#041126,#071a38 48%,#06152f);}
.customer-ui .customer-sidebar{width:230px;background:linear-gradient(180deg,rgba(8,28,63,.98),rgba(5,19,44,.99));border-right:1px solid rgba(38,136,255,.18);box-shadow:16px 0 55px rgba(0,0,0,.24)}
.customer-ui .customer-main{margin-left:230px;width:calc(100% - 230px)}
.customer-brand{padding-top:8px}.customer-brand .brand{font-size:24px;letter-spacing:.02em}.customer-brand-mark{border-radius:12px;background:linear-gradient(145deg,#03cfff,#394bff 58%,#8c34ff);color:white;box-shadow:0 0 24px rgba(20,153,255,.45)}
.customer-ui .customer-sidebar nav a{border:1px solid transparent;padding:12px 13px;border-radius:9px}.customer-ui .customer-sidebar nav a.active{background:linear-gradient(90deg,#1665ff,#7b2cff);border-color:rgba(58,155,255,.35);box-shadow:0 0 20px rgba(61,64,255,.26),inset 0 0 18px rgba(255,255,255,.06)}
.customer-ui .customer-sidebar nav a.active:before{background:#0bd9ff;box-shadow:0 0 18px #0bd9ff}
.customer-ui .customer-sidebar nav a .nav-icon{background:rgba(51,106,196,.14);font-size:15px;color:#9bbcff}
.customer-ui .customer-topbar{height:72px;background:rgba(4,18,43,.82);border-bottom:1px solid rgba(43,116,223,.18)}
.customer-top-title h1{font-size:18px!important}.top-customer-name{display:grid;line-height:1.2}.top-customer-name b{font-size:12px}.top-customer-name span{font-size:10px;color:#8094bb;margin-top:3px}.customer-bell{background:rgba(35,56,126,.38);border-color:rgba(89,87,235,.28);font-size:16px}.notify-count{position:absolute;right:-4px;top:-5px;min-width:18px;height:18px;border-radius:99px;display:grid;place-items:center;background:#ff2e7d;color:#fff;font-size:9px;font-weight:900;box-shadow:0 0 10px rgba(255,46,125,.65)}
.customer-content{max-width:1500px;padding:20px 24px 40px}.customer-welcome{display:flex;justify-content:space-between;align-items:center;margin:3px 0 18px}.customer-welcome h2{font-size:26px;margin:0 0 5px;font-weight:830}.customer-welcome p{margin:0;color:#9aaed1;font-size:13px}.customer-welcome.small h2{font-size:22px}
.customer-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}.customer-kpi{min-height:108px;padding:16px;border-radius:11px;background:linear-gradient(145deg,rgba(10,34,75,.98),rgba(8,27,60,.98));border:1px solid rgba(67,114,205,.28);display:flex;align-items:center;gap:14px;box-shadow:0 18px 45px rgba(0,6,24,.22);position:relative;overflow:hidden}.customer-kpi:after{content:"";position:absolute;right:-28px;top:-45px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,rgba(68,101,255,.16),transparent 70%)}.customer-kpi.blue{border-color:rgba(0,155,255,.58)}.customer-kpi.green{border-color:rgba(0,226,155,.55)}.customer-kpi.red{border-color:rgba(255,45,116,.62)}.customer-kpi.purple{border-color:rgba(141,45,255,.65)}.kpi-icon{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:900;flex:0 0 auto;background:rgba(0,135,255,.18);color:#10cfff;box-shadow:inset 0 0 0 1px rgba(58,169,255,.25),0 0 22px rgba(0,145,255,.16)}.green .kpi-icon{background:rgba(0,223,147,.13);color:#00e7a1}.red .kpi-icon{background:rgba(255,49,119,.14);color:#ff3b7d}.purple .kpi-icon{background:rgba(147,50,255,.16);color:#b04cff}.customer-kpi b{font-size:25px;display:block;line-height:1}.customer-kpi span{display:block;font-size:13px;font-weight:760;margin-top:7px}.customer-kpi small{font-size:10px;margin-top:6px;color:#7f95bd}
.customer-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(290px,.85fr);gap:14px;margin-bottom:14px}.customer-dashboard-side{display:grid;gap:14px}.customer-panel{background:linear-gradient(150deg,rgba(7,28,63,.98),rgba(5,22,51,.99));border:1px solid rgba(46,101,187,.24);border-radius:11px;padding:16px;box-shadow:0 18px 50px rgba(0,5,22,.22);margin-bottom:14px}.customer-panel.compact{margin:0}.customer-panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.customer-panel-head h3{font-size:15px;margin:0}.customer-panel-head>a,.customer-panel-head>span{font-size:10px;color:#20bfff}
.customer-chart{height:245px;position:relative;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,rgba(6,26,58,.42),rgba(4,17,40,.16));border:1px solid rgba(45,90,166,.12)}.customer-chart:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 49px,rgba(74,116,189,.11) 50px),repeating-linear-gradient(to right,transparent 0,transparent 88px,rgba(74,116,189,.08) 89px)}.customer-chart svg{position:absolute;left:18px;right:18px;top:16px;width:calc(100% - 36px);height:calc(100% - 45px);overflow:visible;filter:drop-shadow(0 0 7px rgba(5,196,255,.23))}.chart-axis{position:absolute;left:14px;right:14px;bottom:7px;display:flex;justify-content:space-between;color:#6f86b0;font-size:9px}.customer-chart.detail{height:280px}
.pay-row,.incident-row{display:flex;align-items:center;gap:11px;color:#eef5ff;padding:8px 0}.pay-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;background:rgba(255,45,113,.13);border:1px solid rgba(255,45,113,.15);color:#ff3b83;font-size:20px}.pay-row>span:nth-child(2),.incident-row>span{min-width:0;flex:1}.pay-row b,.incident-row b{display:block;font-size:13px}.pay-row small,.incident-row small{font-size:10px;color:#8499bd}.pay-right{text-align:right!important}.pay-right em,.payment-card-right em,.site-info-panel em,.customer-site-card-foot em{display:block;font-style:normal;font-size:10px;font-weight:800}.pay-right b,.payment-card-right b{font-size:13px;margin-top:8px}.pay-right .warn,.payment-card-right .warn,.site-info-panel .warn,.customer-site-card-foot .warn{color:#ffb43e}.pay-right .bad,.payment-card-right .bad,.site-info-panel .bad,.customer-site-card-foot .bad{color:#ff4778}.pay-right .due,.payment-card-right .due,.site-info-panel .due,.customer-site-card-foot .due{color:#ffd35b}.pay-right .ok,.payment-card-right .ok,.site-info-panel .ok,.customer-site-card-foot .ok{color:#1fe2a0}.incident-row i{width:13px;height:13px;border-radius:50%;background:#ff386f;box-shadow:0 0 14px rgba(255,55,111,.72)}.incident-row strong{font-size:10px;color:#ff4778}.empty-mini{min-height:56px;display:grid;place-items:center;color:#7086ae;font-size:11px}
.customer-sites-panel{margin-bottom:0}.customer-site-list{display:grid}.customer-site-list>a{display:flex;align-items:center;gap:11px;color:#edf5ff;padding:11px 4px;border-top:1px solid rgba(87,122,185,.11)}.customer-site-list>a:first-child{border-top:0}.site-orb{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:rgba(0,220,151,.12);color:#00e5a1;border:1px solid rgba(0,224,154,.23);box-shadow:0 0 13px rgba(0,224,154,.08)}.site-orb.down{background:rgba(255,48,113,.13);color:#ff407a;border-color:rgba(255,48,113,.23)}.site-list-main{min-width:0;flex:1}.site-list-main b{display:block;font-size:12px}.site-list-main small{font-size:9px;color:#8195ba}.site-list-main i{font-style:normal;margin:0 6px;color:#536e9e}.chev{color:#79bfff;font-size:22px}.customer-site-list .badge{font-size:9px}
.customer-sites-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px}.customer-site-card{display:block;color:#f5f8ff;background:linear-gradient(145deg,rgba(7,29,65,.98),rgba(6,23,53,.98));border:1px solid rgba(54,108,195,.25);border-radius:12px;padding:16px;box-shadow:0 18px 45px rgba(0,6,25,.20);transition:.18s}.customer-site-card:hover{transform:translateY(-2px);border-color:rgba(0,194,255,.45);color:#fff}.customer-site-card-top{display:flex;align-items:center;gap:11px}.customer-site-card-top>div{min-width:0;flex:1}.customer-site-card-top h3{margin:0 0 4px;font-size:15px}.customer-site-card-top p{margin:0;color:#7f94b8;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-site-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.customer-site-metrics div{padding:10px;border-radius:8px;background:rgba(2,17,40,.48);border:1px solid rgba(68,107,173,.12)}.customer-site-metrics span{display:block;font-size:8px;text-transform:uppercase;color:#7087ad}.customer-site-metrics b{display:block;margin-top:5px;font-size:12px}.customer-site-card-foot{display:flex;justify-content:space-between;gap:10px;border-top:1px solid rgba(82,117,179,.12);padding-top:10px;font-size:9px;color:#6f84a9}
.site-detail-header{background:linear-gradient(145deg,rgba(7,29,66,.98),rgba(6,23,53,.98));border:1px solid rgba(42,120,225,.28);border-radius:12px;padding:15px;margin-bottom:10px}.site-detail-header>a:first-child{display:block;margin-bottom:12px;color:#b8d2ff;font-size:12px}.site-detail-header>div{display:inline-flex;align-items:center;gap:12px}.site-detail-header h2{font-size:18px;margin:0 0 3px;display:flex;align-items:center;gap:9px}.site-detail-header p{margin:0;color:#7790b9;font-size:10px}.site-detail-header>.btn{float:right;margin-top:9px}.site-detail-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:11px}.site-detail-kpis>div{position:relative;min-height:98px;padding:14px 12px 12px 58px;background:linear-gradient(145deg,rgba(8,31,68,.98),rgba(6,23,53,.98));border:1px solid rgba(55,104,186,.20);border-radius:10px}.metric-icon{position:absolute;left:12px;top:19px;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:17px;background:rgba(0,142,255,.12);color:#13c8ff}.metric-icon.amber{background:rgba(255,174,53,.12);color:#ffb33f}.metric-icon.green{background:rgba(0,219,143,.12);color:#08dc97}.metric-icon.teal{background:rgba(0,220,199,.12);color:#03dac6}.site-detail-kpis p{font-size:9px;color:#7d91b6;margin:0 0 5px}.site-detail-kpis b{font-size:14px}.site-detail-kpis small{font-size:9px;margin-top:3px}.site-detail-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,.85fr);gap:11px}.site-info-panel dl{margin:0}.site-info-panel dl>div{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid rgba(78,114,177,.11)}.site-info-panel dl>div:last-child{border:0}.site-info-panel dt{font-size:10px;color:#90a4c8}.site-info-panel dd{font-size:10px;font-weight:750;margin:0;text-align:right}
.customer-payment-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:12px}.payment-card{display:flex;align-items:center;gap:13px}.pay-icon.large{width:50px;height:50px;font-size:23px}.payment-card>div:nth-child(2){flex:1}.payment-card span{font-size:9px;color:#8195b9}.payment-card h3{margin:4px 0;font-size:17px}.payment-card-right{text-align:right}.notification-list>a{display:flex;align-items:center;gap:11px;padding:12px 4px;border-bottom:1px solid rgba(81,118,183,.11);color:#eef5ff}.notification-list>a:last-child{border-bottom:0}.notification-list>a>span:nth-child(2){flex:1}.notification-list b{font-size:12px}.notification-list small{font-size:10px}.notification-list strong{font-size:10px}.notification-dot{width:12px;height:12px;border-radius:50%;background:#00db9a;box-shadow:0 0 11px rgba(0,219,154,.5)}.notification-dot.bad{background:#ff3c73;box-shadow:0 0 11px rgba(255,60,115,.5)}
.support-grid,.account-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.support-card{text-align:center;padding:28px}.support-card>span{width:58px;height:58px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;background:rgba(0,163,255,.12);color:#12c8ff;font-size:26px}.support-card p{color:#8ca1c5;font-size:12px;min-height:32px}.customer-form{display:grid;gap:13px}.customer-form .btn{justify-self:start}
.customer-mobile-nav{display:none}
@media(max-width:1120px){.customer-kpis{grid-template-columns:1fr 1fr}.customer-dashboard-grid,.site-detail-grid{grid-template-columns:1fr}.site-detail-kpis{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.customer-ui .customer-sidebar{transform:translateX(-100%)}.customer-ui .customer-main{margin-left:0;width:100%}.customer-ui.menu-open .customer-sidebar{transform:translateX(0)}.customer-content{padding:16px 16px 88px}.top-customer-name{display:none}.customer-mobile-nav{position:fixed;left:0;right:0;bottom:0;height:66px;padding-bottom:env(safe-area-inset-bottom);background:rgba(4,17,41,.96);border-top:1px solid rgba(51,110,202,.30);backdrop-filter:blur(16px);z-index:25;display:grid;grid-template-columns:repeat(4,1fr)}.customer-mobile-nav a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#8095bb;font-size:9px;font-weight:750}.customer-mobile-nav a span{font-size:17px}.customer-mobile-nav a.active{color:#1ccfff;text-shadow:0 0 11px rgba(28,207,255,.5)}}
@media(max-width:640px){.customer-topbar{height:62px!important;padding:0 13px!important}.customer-content{padding:13px 12px 82px}.customer-welcome{margin:4px 0 13px}.customer-welcome h2{font-size:19px}.customer-welcome p{font-size:11px}.customer-kpis{gap:8px}.customer-kpi{min-height:85px;padding:11px;gap:8px}.kpi-icon{width:37px;height:37px;font-size:18px}.customer-kpi b{font-size:19px}.customer-kpi span{font-size:10px;margin-top:5px}.customer-kpi small{font-size:8px}.customer-dashboard-grid{gap:10px}.customer-chart-panel{display:none}.customer-panel{padding:12px;border-radius:9px}.customer-panel-head h3{font-size:13px}.customer-site-list>a{padding:10px 0}.site-detail-header>.btn{float:none;display:flex;margin-top:12px}.site-detail-header>div{display:flex}.site-detail-kpis{grid-template-columns:1fr 1fr;gap:7px}.site-detail-kpis>div{padding:11px 8px 10px 46px;min-height:86px}.metric-icon{left:8px;top:16px;width:31px;height:31px}.site-detail-kpis b{font-size:12px}.customer-chart.detail{height:210px}.support-grid,.account-grid{grid-template-columns:1fr}.customer-sites-cards{grid-template-columns:1fr}.customer-site-metrics{grid-template-columns:1fr 1fr 1fr;gap:5px}.customer-site-metrics div{padding:8px 6px}.customer-site-metrics b{font-size:10px}.customer-payment-grid{grid-template-columns:1fr}.payment-card{padding:12px}.top-actions{gap:7px}.customer-bell{width:34px;height:34px}.top-avatar{width:34px;height:34px}.customer-ui .menu-btn{width:34px;height:34px}.customer-ui .customer-sidebar{width:min(82vw,270px)}}