:root{
  --bg:#f4f5f7;--card:#fff;--ink:#1c1c2e;--muted:#6b7280;--sub:#9ca3af;
  --border:#e5e7eb;--accent:#4f46e5;--accent2:#0ea5e9;
  --green:#16a34a;--red:#dc2626;--amber:#d97706;
  --shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);
  --shadow-lg:0 10px 24px -8px rgba(16,24,40,.18);
}
@media(prefers-color-scheme:dark){
  :root{--bg:#0f1115;--card:#181b22;--ink:#e6e8ee;--muted:#9aa3b2;--sub:#6b7280;
  --border:#272b34;--accent:#818cf8;--accent2:#38bdf8;
  --shadow:0 1px 3px rgba(0,0,0,.4);--shadow-lg:0 10px 30px -8px rgba(0,0,0,.6)}
}
*{box-sizing:border-box}
body{font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg);color:var(--ink);max-width:1040px;margin:0 auto;padding:1.2rem 1rem 4rem}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.brand{display:flex;align-items:center;gap:.6rem}
.brand .logo{font-size:1.7rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.15))}
.brand h1{font-size:1.4rem;margin:0;font-weight:750;letter-spacing:-.02em}
.brand .sub{font-size:12px;color:var(--muted);font-weight:500;margin-top:1px}
.badges{display:flex;gap:.4rem;flex-wrap:wrap}
.badge{display:inline-flex;align-items:center;gap:.32rem;padding:.34rem .62rem;border-radius:999px;
  font-size:12px;font-weight:600;background:var(--card);border:1px solid var(--border);box-shadow:var(--shadow)}
.badge.b-on{color:var(--green)}.badge.b-off{color:var(--sub)}.badge.b-warn{color:var(--amber)}.badge.b-red{color:var(--red)}
.badge.b-acc{color:var(--accent)}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.dot.on{background:var(--green)}.dot.off{background:var(--sub)}.dot.warn{background:var(--amber)}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--green);position:relative;flex:none}
.live-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;background:var(--green);opacity:.45;
  animation:pulse 1.8s ease-out infinite}
@keyframes pulse{0%{transform:scale(.8);opacity:.5}100%{transform:scale(2.4);opacity:0}}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin:.9rem 0 1.1rem}
.stat{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:.7rem .9rem;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:.1rem}
.stat .k{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.stat .v{font-size:1.32rem;font-weight:750;letter-spacing:-.02em}
.stat .v .unit{font-size:.8rem;font-weight:600;color:var(--muted);margin-left:.15rem}
.stat.warn .v{color:var(--amber)}.stat.good .v{color:var(--green)}.stat.bad .v{color:var(--red)}

.tabs{display:flex;gap:.25rem;margin:.4rem 0 0;padding:.28rem;background:var(--card);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);width:fit-content;max-width:100%;overflow-x:auto}
.tab{padding:.42rem .8rem;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;border:0;background:transparent;
  color:var(--muted);white-space:nowrap;transition:all .14s;display:inline-flex;align-items:center;gap:.35rem}
.tab .ct{font-size:10.5px;background:var(--border);color:var(--muted);padding:.05rem .35rem;border-radius:6px;font-weight:700}
.tab:hover{color:var(--ink)}
.tab.active{background:var(--accent);color:#fff}
.tab.active .ct{background:rgba(255,255,255,.25);color:#fff}
.panel-pane{display:none}
.panel-pane.active{display:block;animation:fade .2s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

section.card{background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:1rem 1.1rem;margin:.7rem 0;box-shadow:var(--shadow)}
section.card>h2{margin:.1rem 0 .7rem;font-size:.82rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);display:flex;align-items:center;gap:.4rem}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:.7rem}
.ext{border:1px solid var(--border);border-radius:13px;padding:.72rem .85rem;background:var(--bg);transition:all .2s}
.ext.on{border-color:var(--green);background:color-mix(in srgb,var(--green) 7%,var(--card))}
.ext.on .live-dot{display:inline-block}
.ext .eh{display:flex;align-items:center;gap:.5rem;margin-bottom:.42rem}
.ext .num{font:650 1.12rem/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.ext .acts{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.4rem}
.ext .contact{font-size:11px;color:var(--sub);font-family:ui-monospace,monospace;margin-top:.2rem;word-break:break-all}
table{border-collapse:collapse;width:100%;font-size:13px}
th,td{padding:.46rem .55rem;text-align:left;border-bottom:1px solid var(--border)}
th{color:var(--muted);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
tbody tr:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.row-alt tbody tr:nth-child(even){background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.addrow{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
input[type=text]{padding:.42rem .5rem;border:1px solid var(--border);border-radius:8px;
  background:var(--card);color:var(--ink);font-size:13px}
input[type=text]:focus{outline:2px solid color-mix(in srgb,var(--accent) 40%,transparent);border-color:var(--accent)}
button,.btn{background:var(--accent);color:#fff;border:0;padding:.4rem .75rem;border-radius:8px;
  cursor:pointer;font-size:12.5px;font-weight:600;transition:filter .12s}
button:hover,.btn:hover{filter:brightness(1.08)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--border)}
.btn-rm{background:var(--red)}
.result{padding:.7rem .9rem;border-radius:10px;margin:0 0 .8rem;font-size:13.5px;font-weight:500}
.result.ok{background:color-mix(in srgb,var(--green) 12%,var(--card));color:var(--green);border:1px solid color-mix(in srgb,var(--green) 30%,transparent)}
.result.err{background:color-mix(in srgb,var(--red) 12%,var(--card));color:var(--red);border:1px solid color-mix(in srgb,var(--red) 30%,transparent)}
.newpass{font-family:ui-monospace,monospace;font-weight:700;color:var(--amber)}
.note{color:var(--sub);font-size:12px}
.empty{color:var(--sub);font-size:13px;padding:.3rem 0}
.price .hi{color:var(--red);font-weight:700}
.live-meta{display:flex;align-items:center;gap:.4rem;font-size:11.5px;color:var(--muted)}
footer{margin-top:1.4rem;text-align:center}
footer .pill{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .85rem;border-radius:999px;font-size:12px;
  background:var(--card);border:1px solid var(--border);color:var(--muted)}
.spin{width:9px;height:9px;border:2px solid var(--sub);border-top-color:var(--accent);border-radius:50%;animation:sp .6s linear infinite;display:none}
.refreshing .spin{display:inline-block}
@keyframes sp{to{transform:rotate(360deg)}}

/* --- Faz 2: pricing grid + simülatör + cost --- */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:.9rem;margin-top:.6rem}
.price-box{background:color-mix(in srgb,var(--bg) 50%,var(--card));border:1px solid var(--border);border-radius:12px;padding:.8rem .9rem}
.price-box h3{font-size:13px;margin:.1rem 0 .5rem;color:var(--ink);display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.price-box .unit{font-size:11px;color:var(--muted);font-weight:500}
.price-box.wa{background:linear-gradient(135deg,color-mix(in srgb,#25D366 14%,var(--card)),var(--card))}
.wa-price{font-size:1.6rem;font-weight:800;color:#25D366;font-family:ui-monospace,monospace}
.b-wa{background:#25D366;color:#063d1f}
.ext .contact.warn{color:var(--amber)}
table.sm{font-size:12px}
table.sm td,table.sm th{padding:.28rem .35rem}
.sm .hi{color:var(--red);font-weight:700}
select.ui-input{background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:.4rem .6rem;font-size:13px;font-family:inherit}
.sim-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:end}
.sim-form label{display:flex;flex-direction:column;font-size:11px;color:var(--sub);gap:.2rem}
.sim-form input{width:78px;background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:8px;padding:.35rem .5rem;font-size:13px;font-family:ui-monospace,monospace}
.sim-out{margin-top:.6rem;padding:.6rem .7rem;border-radius:10px;background:color-mix(in srgb,var(--accent) 8%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 25%,transparent);font-size:13px}
.sim-out .big{font-size:1.3rem;font-weight:800;color:var(--accent);font-family:ui-monospace,monospace}
.sim-out .row{display:flex;justify-content:space-between;padding:.12rem 0;color:var(--muted)}
.cost{font-family:ui-monospace,monospace;font-size:11.5px}
.cost.has{color:var(--amber)}
.cost.none{color:var(--muted)}

/* --- Faz 3: grafikler --- */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:.9rem;margin-top:.6rem}
.chart-box{background:color-mix(in srgb,var(--bg) 50%,var(--card));border:1px solid var(--border);border-radius:12px;padding:.7rem .9rem}
.chart-box h3{font-size:13px;margin:.1rem 0 .5rem;color:var(--ink)}
.chart-box>div{min-height:230px}

/* --- v2.1: tablo kırma + taşma koruması + mobil --- */
td,th{overflow-wrap:anywhere;word-break:break-word}
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:10px}
.tbl-wrap table{min-width:480px}
.wa-table .c-msg,.sms-table .c-msg{min-width:9ch}
.wa-send-row{align-items:flex-end!important}
@media(max-width:680px){
  body{padding:.7rem .55rem 4rem;font-size:13px}
  section.card{padding:.75rem .7rem}
  .brand h1{font-size:1.1rem}.brand .logo{font-size:1.35rem}
  .stat .v{font-size:1.05rem}
  .grid,.price-grid,.charts{grid-template-columns:1fr}
  .addrow{flex-direction:column;align-items:stretch;gap:.5rem}
  .addrow input[type=text]{width:100%}
  .wa-send-row{flex-direction:column!important;align-items:stretch!important}
  .wa-send-row input,.wa-send-row #wa-to{width:100%!important}
  .tabs{width:100%}
  .topbar{flex-direction:column;align-items:flex-start}
  .tbl-wrap table{min-width:420px}
}

/* === Auth overlay + logout === */
.login-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:1000;padding:1rem}
.login-overlay[hidden]{display:none}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:1.5rem 1.4rem;box-shadow:var(--shadow-lg);width:100%;max-width:340px;display:flex;flex-direction:column;gap:.85rem}
.login-brand{text-align:center;margin-bottom:.4rem}
.login-brand .logo{font-size:2rem}
.login-brand h1{margin:.2rem 0 0;font-size:1.5rem;font-weight:750;letter-spacing:-.02em}
.login-brand .sub{font-size:11px;color:var(--muted);font-weight:500}
.login-card label{display:flex;flex-direction:column;gap:.25rem;font-size:12px;color:var(--muted);font-weight:600}
.login-card input{padding:.65rem .75rem;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--ink);font-size:14px;font-weight:500;outline:none}
.login-card input:focus{border-color:var(--accent)}
.btn-login{padding:.75rem;background:var(--accent);color:#fff;border:none;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;margin-top:.2rem}
.btn-login:hover{filter:brightness(1.08)}
.btn-login:disabled{opacity:.6;cursor:not-allowed}
.login-err{font-size:12px;color:var(--red);min-height:1em;text-align:center;font-weight:500}
.badge{cursor:default;border:none}
.badge#logout-btn{cursor:pointer;font-family:inherit;transition:filter .15s}
.badge#logout-btn:hover{filter:brightness(.92)}