:root{
  color-scheme:dark;
  --bg:#060e20; --surface:#0b1326; --panel:#131b2e; --panel2:#1a233a;
  --line:#26314a; --line2:#1b2540;
  --ink:#e8edf6; --soft:#9aa7bd; --dim:#63708a;
  --accent:#f59e0b; --accent2:#d97706; --accent-ink:#1a1206;
  --danger:#ef4444; --danger-bg:#2a1417; --danger-ink:#ff9a9a;
  --warn:#f59e0b; --warn-bg:#241c07; --warn-ink:#f2ca77;
  --ok:#10b981; --ok-bg:#0c2a20; --ok-ink:#3ddc97;
  --link:#7cc0ff;
  --mono:ui-monospace,"Cascadia Mono","Cascadia Code",Consolas,"SF Mono",Menlo,monospace;
  --ui:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);border-top:3px solid var(--accent);
  font:13px/1.45 var(--ui);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{margin:0;font-weight:700}
.muted{color:var(--soft)} .tiny{font-size:11.5px} .hidden,[hidden]{display:none !important}
a{color:var(--link)}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:214px minmax(0,1fr);height:calc(100vh - 3px);overflow:hidden}

/* ---------- sidebar ---------- */
.side{background:var(--surface);display:flex;flex-direction:column;overflow-y:auto;min-width:0;
  border-right:1px solid #050b18}
.side-brand{display:flex;gap:.6rem;align-items:center;padding:.85rem .8rem;
  border-bottom:1px solid rgba(255,255,255,.06)}
.side-brand .mark{width:34px;height:34px;flex:none}
.side-brand .mark svg{width:100%;height:100%;display:block;border-radius:9px;
  border:1px solid rgba(255,255,255,.08)}
.side-brand .wordmark{font-size:10.5px;font-weight:800;letter-spacing:.11em;
  color:var(--soft);line-height:1.3}
.side-nav{display:flex;flex-direction:column;padding:.5rem .4rem;gap:2px}
.side-nav button{display:flex;align-items:center;gap:.6rem;width:100%;text-align:left;
  border:0;background:none;color:var(--soft);font:inherit;font-weight:600;min-height:40px;
  padding:.55rem .6rem;border-radius:8px;cursor:pointer;letter-spacing:.01em}
.side-nav button .ic{font-size:14px;width:18px;text-align:center}
.side-nav button .lbl-s{display:none}
.side-nav button:hover{background:var(--panel2);color:var(--ink)}
.side-nav button.active{background:var(--panel2);color:#fff;box-shadow:inset 3px 0 0 var(--accent)}
.side-foot{margin-top:auto;padding:.75rem .8rem;border-top:1px solid rgba(255,255,255,.06)}
.side-foot .kbline{color:var(--dim);font:10.5px/1.55 var(--mono);word-break:break-word}
.side-foot .foot-tag{margin-top:.4rem;color:#55617a;letter-spacing:.06em;
  text-transform:uppercase;font:800 9px var(--mono)}

/* ---------- main ---------- */
.main{display:flex;flex-direction:column;min-width:0;background:var(--bg)}
.topstrip{display:flex;justify-content:space-between;align-items:center;flex:none;
  background:var(--surface);border-bottom:1px solid var(--line);padding:.55rem .95rem}
.crumb{font-size:13px;font-weight:700;color:var(--ink);display:flex;align-items:center;gap:.5rem}
.crumb::before{content:"";width:7px;height:7px;background:var(--accent);border-radius:2px;
  box-shadow:0 0 8px var(--accent)}
.badge{font:700 11px/1 var(--mono);background:var(--panel2);border:1px solid var(--line);
  color:var(--soft);border-radius:999px;padding:.34rem .65rem;letter-spacing:.02em}
.badge.on{background:var(--ok-bg);color:var(--ok-ink);border-color:#1f5641}
.badge.off{background:var(--danger-bg);color:var(--danger-ink);border-color:#5a2b2b}

.content{flex:1;min-width:0;overflow-y:auto;overflow-x:hidden;padding:14px;scrollbar-width:thin}
.content>.tab{max-width:1180px}
.tab{display:none} .tab.active{display:block}

.panel{background:var(--panel);border:1px solid #2c3a58;border-radius:10px;
  padding:.8rem .9rem;margin-bottom:.8rem;max-width:100%;overflow-x:auto}
.panel h3{font-size:13px;border-left:3px solid var(--accent);padding-left:.55rem;color:var(--ink);
  margin-bottom:.65rem;display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap}

/* ---------- forms ---------- */
.rowflex{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;margin-bottom:.55rem}
select,input:not([type=checkbox]):not([type=radio]){font:inherit;padding:.45rem .55rem;min-height:38px;
  border:1px solid var(--line);border-radius:7px;background:#0d1526;color:var(--ink)}
select:focus,input:focus{outline:2px solid rgba(245,158,11,.3);border-color:var(--accent)}
::placeholder{color:#5c6880}
.askrow{display:flex;gap:.45rem;flex-wrap:wrap}
.askrow input:not([type=number]){flex:1;min-width:220px}
.calcgrid{display:flex;gap:.85rem;flex-wrap:wrap;align-items:flex-end}
.calcgrid label{display:flex;flex-direction:column;gap:.25rem;color:var(--soft);
  font:700 10px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.04em}
.calcgrid input{width:124px}
.calcgrid button{align-self:flex-end}
button{font:inherit;font-weight:700;background:var(--accent);color:var(--accent-ink);min-height:38px;
  border:1px solid var(--accent2);border-radius:7px;padding:.5rem 1.05rem;cursor:pointer}
button:hover{background:var(--accent2)}
button:active{transform:translateY(1px)}
button.ghost{background:#0d1526;color:var(--ink);border-color:var(--line);font-weight:600}
button.ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- quick pills ---------- */
.pills{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
.pill{font:600 11.5px var(--ui);background:#0d1526;border:1px solid var(--line);color:var(--soft);
  border-radius:999px;padding:.34rem .75rem;min-height:0;cursor:pointer}
.pill:hover{border-color:var(--accent);color:var(--ink);background:#0d1526}

/* ---------- chat ---------- */
.chatlog{display:flex;flex-direction:column;gap:.55rem;margin:.55rem 0;max-height:58vh;
  overflow:auto;padding-right:.2rem;scrollbar-width:thin}
.msg{padding:.6rem .8rem;border-radius:9px;max-width:88%;font-size:13px}
.msg.user{align-self:flex-end;background:#182238;border:1px solid #2b3a5c}
.msg.bot{align-self:flex-start;background:var(--panel);border:1px solid var(--line);border-left:2px solid var(--accent)}
.msg.bot.nf{background:var(--warn-bg);border-left-color:var(--warn);color:#efe1bd}
.msg pre{white-space:pre-wrap;font:inherit;margin:0}

/* ---------- sources ---------- */
.sources{margin-top:.55rem;display:flex;flex-direction:column;gap:.28rem}
.sources>.muted{text-transform:uppercase;letter-spacing:.05em;font-size:10px;font-weight:800;color:var(--dim)}
.src{font:11.5px/1.4 var(--mono);background:#0d1526;border:1px solid var(--line);
  border-left:2px solid var(--accent);border-radius:5px;padding:.3rem .55rem;
  display:inline-flex;gap:.45rem;flex-wrap:wrap;align-items:center}
.src .cat{font-weight:700;color:var(--ink)}
.src a{color:var(--link);text-decoration:none;font-weight:700;cursor:pointer}
.src a:hover{text-decoration:underline}
.src .sec{color:var(--soft)}

/* ---------- cards ---------- */
.cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.65rem;margin-bottom:.8rem}
.card{background:var(--panel);border:1px solid var(--line);border-radius:9px;
  padding:.65rem .75rem;cursor:pointer;transition:border-color .12s,background .12s}
.card:hover{border-color:var(--accent);background:#182238}
.card h4{font-size:12.5px;color:var(--ink);margin-bottom:.4rem}
.card h4::before{content:"▸ ";color:var(--accent)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:.15rem .6rem;font-size:12px}
.kv dt{color:var(--soft);font:11.5px var(--mono)}
.kv dd{margin:0;color:var(--ink)}

/* ---------- tables ---------- */
table{border-collapse:collapse;width:100%;font-size:12.5px}
th,td{padding:.35rem .55rem;text-align:left;vertical-align:top}
th{background:#0d1526;color:var(--soft);font:800 10.5px var(--mono);
  text-transform:uppercase;letter-spacing:.05em;border-bottom:2px solid var(--line);position:sticky;top:0}
td{border-bottom:1px solid var(--line2);color:var(--ink)}
tr:hover td{background:#182238}
td.num,th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- chips + tags ---------- */
.chip{display:inline-block;background:var(--panel2);border:1px solid var(--line);color:var(--soft);
  border-radius:5px;padding:.12rem .55rem;font:11px var(--mono);margin:.1rem .2rem .1rem 0}
.chip.pick{cursor:pointer}
.chip.pick.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent2);font-weight:700}
.tag{font:800 10px var(--mono);padding:.08rem .45rem;border-radius:4px;
  text-transform:uppercase;letter-spacing:.03em;background:var(--panel2);color:var(--soft)}
.tag.ALARM{background:var(--danger-bg);color:var(--danger-ink);border:1px solid #5a2b2b}
.tag.UYARI{background:var(--warn-bg);color:var(--warn-ink);border:1px solid #5a4a1e}

/* ---------- notes ---------- */
.note{background:var(--warn-bg);border:1px solid #5a4a1e;border-left:3px solid var(--warn);
  border-radius:6px;padding:.5rem .7rem;font-size:11.5px;color:#e8d9a8;margin-top:.55rem}
.ok{color:var(--ok-ink);font-weight:700} .bad{color:var(--danger-ink);font-weight:700}

/* ---------- türetilmiş oran çubuğu (yük / kapasite) ---------- */
.wrapv{display:flex;flex-direction:column;gap:.22rem;align-items:flex-start}
.ratio{display:inline-flex;align-items:center;gap:.4rem;font:700 11px var(--mono);color:var(--soft)}
.ratio i{width:64px;height:6px;border-radius:3px;background:#0d1526;border:1px solid var(--line);
  overflow:hidden;position:relative;display:inline-block}
.ratio i::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0%);background:var(--ok)}
.ratio.mid i::after{background:var(--warn)}
.ratio.hi i::after{background:var(--danger)}

/* ---------- fault cards ---------- */
.fc{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:8px;
  padding:.6rem .75rem;margin:.5rem 0;background:var(--panel)}
.fc.exact{border-left-color:var(--accent);background:#182238;box-shadow:0 0 0 1px var(--accent)}
.fc h4{font-size:12.5px;color:var(--ink);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.fc ul{margin:.35rem 0 .35rem 1rem;padding:0}
.fc li{font-size:12px;line-height:1.45}
.fc pre{white-space:pre-wrap;font:12px/1.45 var(--mono);margin:.35rem 0;background:#0d1526;color:#cdd7e8;
  padding:.45rem .55rem;border-radius:6px;overflow-x:auto}

/* ---------- figure + viewer ---------- */
figure{margin:.45rem 0}
figure img{width:100%;border:1px solid var(--line);border-radius:8px;background:#fff}
figcaption{font:11.5px var(--mono);color:var(--soft);margin-top:.3rem}
.viewer{position:fixed;inset:0;background:rgba(3,7,16,.72);display:flex;align-items:center;
  justify-content:center;padding:1.1rem;z-index:50}
.viewer-box{background:var(--panel);border:1px solid var(--line);border-radius:10px;max-width:980px;
  width:100%;max-height:90vh;overflow:auto;padding:1rem;position:relative;color:var(--ink)}
.viewer .x{position:absolute;top:.55rem;right:.55rem;padding:.25rem .6rem;min-height:0}
.spin{color:var(--soft);padding:.85rem;text-align:center;font:12px var(--mono)}

/* ---------- scrollbars ---------- */
.content::-webkit-scrollbar,.chatlog::-webkit-scrollbar,.side::-webkit-scrollbar,
.panel::-webkit-scrollbar,.fc pre::-webkit-scrollbar{width:10px;height:10px}
.content::-webkit-scrollbar-thumb,.chatlog::-webkit-scrollbar-thumb,
.panel::-webkit-scrollbar-thumb,.fc pre::-webkit-scrollbar-thumb{background:#2c3a58;border-radius:5px}
.side::-webkit-scrollbar-thumb{background:#1e2a44;border-radius:5px}
.content::-webkit-scrollbar-track,.side::-webkit-scrollbar-track{background:transparent}

/* ---------- responsive: mobilde alt navigasyon çubuğu ---------- */
@media (max-width:820px){
  body{height:auto;min-height:100%;padding-top:env(safe-area-inset-top)}
  .app{grid-template-columns:minmax(0,1fr);height:auto;overflow:visible}
  .content{padding:12px 12px calc(66px + env(safe-area-inset-bottom));overflow:visible}
  .topstrip{position:sticky;top:0;z-index:30}
  .side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:50;height:auto;
    flex-direction:row;align-items:stretch;overflow-x:auto;overflow-y:hidden;
    border:0;border-top:1px solid var(--line);box-shadow:0 -6px 18px rgba(0,0,0,.45);
    padding-bottom:env(safe-area-inset-bottom)}
  .side-brand,.side-foot{display:none}
  .side-nav{display:flex;flex:1;flex-direction:row;flex-wrap:nowrap;gap:0;padding:0}
  .side-nav button{flex:1;width:auto;min-width:0;flex-direction:column;justify-content:center;
    align-items:center;gap:3px;min-height:58px;padding:.4rem .1rem;border-radius:0;text-align:center;letter-spacing:0}
  .side-nav button .ic{font-size:18px;width:auto}
  .side-nav button .lbl{display:none}
  .side-nav button .lbl-s{display:block;font:800 9px/1 var(--mono);text-transform:uppercase}
  .side-nav button.active{background:var(--panel2);color:#fff;box-shadow:inset 0 3px 0 var(--accent)}
  .chatlog{max-height:none}
}

/* ---------- mobil uygulama ekleri ---------- */
.topbtn{background:var(--panel2);border:1px solid var(--line);color:var(--soft);border-radius:8px;
  min-height:32px;padding:.3rem .6rem;font:700 12px var(--mono);cursor:pointer;display:inline-flex;align-items:center;gap:.35rem}
.topbtn:hover{border-color:var(--accent);color:var(--accent)}
.topstrip .right{display:flex;align-items:center;gap:.5rem}

.setrow{display:flex;flex-direction:column;gap:.3rem;margin:.6rem 0}
.setrow label{font:700 10px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--soft)}
.setrow input[type=text],.setrow input[type=password]{width:100%}
.setrow .hint{font-size:11px;color:var(--dim)}
.toggle{display:flex;align-items:center;gap:.5rem;font-size:12.5px}

.loadwrap{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem;z-index:300;text-align:center;padding:1.5rem}
.loadwrap .mk{width:56px;height:56px}
.loadwrap .bar{width:190px;height:6px;border-radius:3px;background:var(--panel2);overflow:hidden}
.loadwrap .bar i{display:block;height:100%;width:40%;background:var(--accent);
  animation:ld 1.1s ease-in-out infinite}
@keyframes ld{0%{margin-left:-40%}100%{margin-left:100%}}
.loadwrap .msg{font:600 12px var(--mono);color:var(--soft)}

.rep-frame{width:100%;height:70vh;border:1px solid var(--line);border-radius:8px;background:#fff}