/* CARTESIAN admin panel: design system + shell + components. Same brand tokens as the site (cartesianecu.com).
   Everything is class-based (no inline styles): the page runs under a strict CSP. */
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/russo-one-400.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-sans-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/plex-sans-ext-400.woff2) format('woff2');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --bg:#0f1215; --bg2:#0b0e10; --panel:#15181c; --panel2:#1a1e23; --panel3:#20252b; --line:#262c33; --line2:#323a43;
  --text:#e2e6ea; --muted:#8b939c; --faint:#5f6872; --accent:#ff8a3d; --accent2:#ffb37a; --accent-ink:#1a0f06; --accent-text:#ff8a3d;
  --ok:#4bd08a; --warn:#f2b64b; --bad:#ff6b6b; --info:#6aa8ff; --info-ink:#0b0e10; --focus:#ff8a3d;
  --ok-bg:rgba(75,208,138,.12); --warn-bg:rgba(242,182,75,.13); --bad-bg:rgba(255,107,107,.12); --info-bg:rgba(106,168,255,.12); --acc-bg:rgba(255,138,61,.12);
  --shadow:0 18px 50px rgba(0,0,0,.45); --radius:12px; --side:236px; --top:58px;
  --mono:ui-monospace,SFMono-Regular,'Cascadia Mono',Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f5f6f8; --bg2:#eceff3; --panel:#ffffff; --panel2:#f6f7f9; --panel3:#eef1f4; --line:#e3e7ec; --line2:#d3d9e0;
  --text:#171a1e; --muted:#5c646d; --faint:#8a929b; --accent:#e6761f; --accent2:#b95a10; --accent-ink:#ffffff; --accent-text:#9e4c0b;
  --ok:#1f9d63; --warn:#8a5700; --bad:#d23b3b; --info:#2566d6; --info-ink:#ffffff; --focus:#9e4c0b;
  --ok-bg:rgba(31,157,99,.10); --warn-bg:rgba(200,130,0,.12); --bad-bg:rgba(210,59,59,.09); --info-bg:rgba(37,102,214,.09); --acc-bg:rgba(230,118,31,.10);
  --shadow:0 16px 40px rgba(20,30,45,.14);
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 'IBM Plex Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;line-height:1.2}
.mono{font-family:var(--mono);font-size:12.5px;letter-spacing:.01em}
.muted{color:var(--muted)} .faint{color:var(--faint)} .ok{color:var(--ok)} .bad{color:var(--bad)} .warn{color:var(--warn)} .acc{color:var(--accent-text)}
.hidden{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the keyboard focus ring (UI / UX addition 7): visible in both themes, at least 3:1 on a panel and on a hovered row (the
   light accent #e6761f measures 2.8:1 on --panel2, its darker text shade 5.6:1) */
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* every P.icon (core.js) is a <span class="ic faic ..."> (a Font Awesome mask, icons.css): a 1em square unless a component
   rule sizes it. Zero specificity, so any component rule wins. A component rule names the icon "span:where(.ic)": the
   weight "svg" had when the icons were inline SVGs, so no cascade order changed in the move. Only the wordmark (.brand
   svg.wm), the charts and the flags are still SVG. */
:where(.ic){width:1em;height:1em;flex:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--side) 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;background:var(--bg2);border-right:1px solid var(--line);overflow-y:auto}
.brand{display:flex;align-items:center;gap:10px;padding:16px 18px 14px;border-bottom:1px solid var(--line)}
.brand svg{width:28px;height:28px;flex:none}
.brand b{display:block;color:var(--text)}
.brand svg.wm{display:block;width:auto;height:19px;overflow:visible}
.wm .cartWmCurve{fill:var(--accent)}
.brand small{display:block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-top:1px}
.nav{padding:10px 10px 16px;display:flex;flex-direction:column;gap:2px}
.nav-group{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--muted);font-size:13.5px;transition:background .15s,color .15s}
.nav a span:where(.ic){width:17px;height:17px;flex:none}
.nav a .cnt{margin-left:auto;font-size:11px;font-family:var(--mono);padding:1px 7px;border-radius:999px;background:var(--panel3);color:var(--muted)}
.nav a .cnt.hot{background:var(--warn-bg);color:var(--warn)}
@media (hover:hover){.nav a:hover{background:var(--panel2);color:var(--text)}}
.nav a.on{background:var(--acc-bg);color:var(--text)}
.nav a.on span:where(.ic){color:var(--accent)}
.side-foot{margin-top:auto;padding:12px 16px;border-top:1px solid var(--line);font-size:11.5px;color:var(--faint)}

.main{min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:30;height:var(--top);display:flex;align-items:center;gap:12px;padding:0 22px;background:rgba(15,18,21,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
:root[data-theme="light"] .top{background:rgba(245,246,248,.92)}
.top h1{font-size:16px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.crumb{display:flex;align-items:center;gap:8px;min-width:0}
.crumb a{color:var(--muted)} .crumb .sep{color:var(--faint)}
.top-tools{margin-left:auto;display:flex;align-items:center;gap:8px}
.gsearch{position:relative;width:280px}
.gsearch input{width:100%;height:34px;padding:0 12px 0 34px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);outline:none;font-size:13px}
.gsearch input:focus{border-color:var(--accent)}
.gsearch > span:where(.ic){position:absolute;left:10px;top:9px;width:16px;height:16px;color:var(--muted)}
.gsearch .res{position:absolute;top:40px;left:0;right:0;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);padding:6px;max-height:360px;overflow:auto}
.gsearch .res a{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:7px;font-size:13px}
.gsearch .res a span:where(.ic){width:15px;height:15px;flex:none;color:var(--muted)}
.gsearch .res a small{margin-left:auto;color:var(--faint);font-size:11px}
.gsearch .res a.on,.gsearch .res a:hover{background:var(--panel2)}
.env{font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--warn-bg);color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 35%,transparent)}
.icon-btn{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;color:var(--muted)}
.icon-btn span:where(.ic){width:17px;height:17px}
@media (hover:hover){.icon-btn:hover{color:var(--text);border-color:var(--muted)}}
.me{display:flex;align-items:center;gap:8px;padding:3px 10px 3px 3px;border-radius:999px;border:1px solid var(--line2);background:var(--panel);cursor:pointer}
.me small{display:block;font-size:10.5px;color:var(--muted);line-height:1}
.me b{display:block;font-size:12.5px;font-weight:600;line-height:1.2}
.avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--acc-bg);color:var(--accent-text);font-size:11.5px;font-weight:700;flex:none}
.avatar.lg{width:44px;height:44px;font-size:15px}
.menu-btn{display:none}
.side-scrim{display:none}
.view{padding:22px;max-width:1440px;width:100%}
.view:focus{outline:none}
/* the area's page strip (#subnav, shell.js P.markNav): under the top bar; Ayarlar's as a left column */
.subnav-box{padding:16px 22px 0}
.subnav-box[hidden]{display:none}
.subnav{flex-wrap:wrap}
.subnav .cnt{font-size:12px;color:var(--faint);margin-left:4px}
.subnav .cnt.hot{color:var(--warn)}
.main.vsub{display:grid;grid-template-columns:220px minmax(0,1fr);align-content:start}   /* a short page: no stretched row */
.main.vsub .top{grid-column:1/-1}
.main.vsub .subnav-box{padding:22px 0 22px 22px}
@media (max-width:900px){.main.vsub{display:flex}.main.vsub .subnav-box{padding:16px 22px 0}}
.menu-pop{position:absolute;right:22px;top:52px;min-width:210px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);padding:6px;z-index:40}
.menu-pop button,.menu-pop a{display:flex;width:100%;align-items:center;gap:9px;padding:8px 10px;border:0;border-radius:7px;background:none;text-align:left;cursor:pointer;font-size:13px}
.menu-pop button span:where(.ic),.menu-pop a span:where(.ic){width:16px;height:16px;flex:none;color:var(--muted)}
.menu-pop button:hover,.menu-pop a:hover{background:var(--panel2)}
.menu-pop hr{border:0;border-top:1px solid var(--line);margin:6px 0}

/* ---------- layout helpers ---------- */
.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:14px;min-width:0}
.grid{display:grid;gap:14px;align-items:start}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.sp{flex:1}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.page-head h2{font-size:21px}
.page-head p{margin:4px 0 0;color:var(--muted);font-size:13px}

/* ---------- cards ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0}
.card-h{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:13.5px;font-weight:600}
.card-h .tools{margin-left:auto;display:flex;gap:6px;align-items:center}
.card-b{padding:14px 16px}
.card-b.flush{padding:0}
.kpi{padding:14px 16px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.kpi .l{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi .l span:where(.ic){width:14px;height:14px}
.kpi .v{font-size:26px;font-weight:600;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.kpi .d{font-size:12px;color:var(--muted)}
.kpi .d.up{color:var(--ok)} .kpi .d.down{color:var(--bad)}
.kpi.link{cursor:pointer;transition:border-color .15s}
@media (hover:hover){.kpi.link:hover{border-color:var(--line2)}}
.kpi .spark{position:absolute;right:12px;bottom:10px;width:90px;height:30px;opacity:.9}

/* ---------- buttons & inputs ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;border-radius:9px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;transition:background .15s,border-color .15s,color .15s}
.btn span:where(.ic){width:15px;height:15px}
@media (hover:hover){.btn:hover{border-color:var(--muted)}}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
@media (hover:hover){.btn-primary:hover{background:var(--accent2);border-color:var(--accent2)}}
.btn-danger{background:var(--bad-bg);border-color:color-mix(in srgb,var(--bad) 45%,transparent);color:var(--bad)}
@media (hover:hover){.btn-danger:hover{border-color:var(--bad)}}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
@media (hover:hover){.btn-ghost:hover{color:var(--text);background:var(--panel2);border-color:transparent}}
.btn-sm{height:28px;padding:0 10px;font-size:12px;border-radius:7px}
.field{display:flex;flex-direction:column;gap:5px}
.field > span{font-size:12px;color:var(--muted);font-weight:600}
.field small{font-size:11.5px;color:var(--faint)}
.input,.select,.textarea{width:100%;min-height:36px;padding:7px 11px;border-radius:9px;border:1px solid var(--line2);background:var(--panel2);outline:none;font-size:13.5px}
.textarea{min-height:84px;resize:vertical;line-height:1.45}
.input:focus,.select:focus,.textarea:focus{border-color:var(--accent);background-color:var(--panel)}
.select.err{border-color:var(--bad)}
.input.err,.textarea.err{border-color:var(--bad)}
.select{appearance:none;-webkit-appearance:none;padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.filters .input{width:260px;min-height:34px;height:34px}
.filters .select{width:auto;min-height:34px;height:34px;padding-top:4px;padding-bottom:4px}
.seg{display:inline-flex;border:1px solid var(--line2);border-radius:9px;overflow:hidden;background:var(--panel)}
.seg button{border:0;background:none;padding:6px 11px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;display:flex;gap:6px;align-items:center}
.seg button + button{border-left:1px solid var(--line2)}
.seg button.on{background:var(--acc-bg);color:var(--accent-text)}
.seg button .n{font-family:var(--mono);font-size:11px;opacity:.8}
.check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-size:13px}
.check input{accent-color:var(--accent);width:15px;height:15px}

/* ---------- v3 shared parts: status dot, page switcher links, save bar, folded field help ---------- */
.st{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.st i{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.st-active i,.st-online i{background:var(--ok)}
.st-expiring i,.st-pending i,.st-suspended i{background:var(--warn)}
.st-expiring,.st-pending,.st-suspended{color:var(--warn)}
.st-revoked i{background:var(--bad)}
.st-expired,.st-offline{color:var(--muted)}
.seg a{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;white-space:nowrap}
.seg a + a{border-left:1px solid var(--line2)}
.seg a.on{background:var(--panel3);color:var(--text)}
.seg a .n{font-size:12px;color:var(--faint)}
@media (hover:hover){.seg a:hover{color:var(--text)}}
.seg-v{flex-direction:column;align-items:stretch;border:0;border-radius:0;background:transparent;overflow:visible;min-width:200px}
.seg-v a{border-radius:8px;padding:8px 12px}
.seg-v a + a{border-left:0}
.seg-v a.on{background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.savebar{display:flex;align-items:center;gap:10px;padding:10px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:14px}
.savebar[hidden]{display:none}
.savebar-sp{flex:1}
.savebar-err{color:var(--bad)}
@media (max-width:560px){.savebar{position:sticky;bottom:0;border-radius:12px 12px 0 0;flex-wrap:wrap}}
.field-wrap{display:flex;flex-direction:column;gap:6px}
.field-help{margin:0;font-size:13px;color:var(--muted)}

/* ---------- badges ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap;border:1px solid transparent}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.plain::before{display:none}
.b-active{background:var(--ok-bg);color:var(--ok)}
.b-expiring{background:var(--warn-bg);color:var(--warn)}
.b-expired{background:var(--panel3);color:var(--muted)}
.b-suspended{background:var(--warn-bg);color:var(--warn)}
.b-revoked{background:var(--bad-bg);color:var(--bad)}
.b-pending{background:var(--info-bg);color:var(--info)}
.b-online{background:var(--ok-bg);color:var(--ok)}
.b-offline{background:var(--panel3);color:var(--faint)}
.plan{display:inline;padding:0;border:0;background:transparent;font:inherit;color:var(--text);letter-spacing:0;text-transform:none}
.tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;font-size:11px;background:var(--panel3);color:var(--muted)}

/* ---------- table ---------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{position:sticky;top:0;text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600;padding:9px 14px;background:var(--panel);border-bottom:1px solid var(--line);white-space:nowrap}
.tbl th.sort{cursor:pointer;user-select:none}
.tbl th.sort::after{content:"";display:inline-block;margin-left:6px;width:0;height:0;border:4px solid transparent;border-top-color:var(--faint);vertical-align:-1px;opacity:.5}
.tbl th.sort.asc::after{border-top-color:transparent;border-bottom-color:var(--accent);vertical-align:3px;opacity:1}
.tbl th.sort.desc::after{border-top-color:var(--accent);opacity:1}
.tbl td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tr.click{cursor:pointer}
@media (hover:hover){.tbl tr.click:hover td{background:var(--panel2)}}
.tbl td.num,.tbl th.num{text-align:right;font-variant-numeric:tabular-nums}
.tbl td .sub{display:block;font-size:11.5px;color:var(--faint)}
.pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.empty{padding:34px 16px;text-align:center;color:var(--muted)}
.empty span:where(.ic){width:28px;height:28px;color:var(--faint);display:block;margin:0 auto 8px}

/* ---------- key/value, progress, lists ---------- */
.kv{display:grid;grid-template-columns:140px 1fr;gap:9px 14px;font-size:13px}
.kv dt{color:var(--muted)} .kv dd{margin:0;min-width:0;word-break:break-word}
.bar{height:6px;border-radius:99px;background:var(--panel3);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:var(--accent)}
.bar.ok i{background:var(--ok)} .bar.warn i{background:var(--warn)} .bar.bad i{background:var(--bad)}
.list{display:flex;flex-direction:column}
.list > *{padding:10px 16px;border-bottom:1px solid var(--line)}
.list > *:last-child{border-bottom:0}
.li{display:flex;align-items:center;gap:10px;font-size:13px;min-width:0}
.li .t{min-width:0;flex:1}
.li > span:where(.ic){width:16px;height:16px;flex:none}
a.li{color:inherit}
@media (hover:hover){a.li:hover{background:var(--panel2)}}
.li .t b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .t small{display:block;color:var(--faint);font-size:11.5px}
.li-ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--panel3);color:var(--muted);flex:none}
.li-ico span:where(.ic){width:15px;height:15px}
.li-ico.acc{background:var(--acc-bg);color:var(--accent-text)} .li-ico.bad{background:var(--bad-bg);color:var(--bad)} .li-ico.ok{background:var(--ok-bg);color:var(--ok)} .li-ico.info{background:var(--info-bg);color:var(--info)}
.timeline{position:relative;padding-left:18px}
.timeline::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:var(--line2)}
.timeline .ev{position:relative;padding:0 0 14px}
.timeline .ev::before{content:"";position:absolute;left:-17px;top:6px;width:9px;height:9px;border-radius:50%;background:var(--panel);border:2px solid var(--line2)}
.timeline .ev.t-acc::before{border-color:var(--accent)} .timeline .ev.t-bad::before{border-color:var(--bad)} .timeline .ev.t-ok::before{border-color:var(--ok)}
.timeline .ev b{font-weight:600;font-size:13px} .timeline .ev p{margin:2px 0 0;font-size:12.5px;color:var(--muted)} .timeline .ev small{font-size:11.5px;color:var(--faint)}
.hwid{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;padding:2px 6px;border-radius:6px;background:var(--panel3);max-width:100%;overflow:hidden}
.hwid span:where(:not(.ic)){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hwid button{border:0;background:none;color:var(--muted);cursor:pointer;padding:0;display:grid}
.hwid button span:where(.ic){width:14px;height:14px}

.callout{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-radius:10px;border:1px solid var(--line2);background:var(--panel2);font-size:13px;color:var(--muted)}
.callout span:where(.ic){width:16px;height:16px;flex:none;margin-top:2px;color:var(--info)}
.callout.warn{border-color:color-mix(in srgb,var(--warn) 40%,transparent);background:var(--warn-bg)} .callout.warn span:where(.ic){color:var(--warn)}
.callout b{color:var(--text)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto;overflow-y:hidden}
.tabs button{border:0;background:none;padding:10px 12px;font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs button.on{color:var(--text);border-bottom-color:var(--accent)}
.tabs button .n{margin-left:6px;font-family:var(--mono);font-size:11px;color:var(--faint)}

/* ---------- overlays: drawer, modal, toasts ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(5,7,9,.55);animation:fade .15s ease}
:root[data-theme="light"] .scrim{background:rgba(20,30,45,.28)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:61;width:min(560px,100vw);background:var(--panel);border-left:1px solid var(--line2);box-shadow:var(--shadow);display:flex;flex-direction:column;animation:slide .2s ease}
.drawer-h{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.drawer-h h3{font-size:15px}
/* a long title / subtitle (a file name without spaces) wraps inside the header: the drawer never grows past its box and
   the close button stays in view */
.drawer-h > div{min-width:0;flex:1}
.drawer-h h3,.drawer-h .muted{overflow-wrap:anywhere}
.drawer-b{padding:16px 18px;overflow-y:auto;flex:1}
.drawer-f{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.modal{position:fixed;left:50%;top:50%;z-index:62;width:min(480px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;transform:translate(-50%,-50%);background:var(--panel);border:1px solid var(--line2);border-radius:14px;box-shadow:var(--shadow);animation:pop .16s ease}
.modal-h{padding:16px 18px 6px;display:flex;align-items:flex-start;gap:12px}
.modal-h h3{font-size:15.5px}
.modal-h p{margin:5px 0 0;font-size:13px;color:var(--muted)}
.modal-h .li-ico{width:36px;height:36px}
.modal-b{padding:10px 18px}
.modal-f{padding:12px 18px 16px;display:flex;gap:8px;justify-content:flex-end}
.toasts{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;flex-direction:column;gap:8px;align-items:flex-end;pointer-events:none}
.toast{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:10px;background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:13px;animation:pop .16s ease;max-width:420px}
.toast span:where(.ic){width:16px;height:16px;flex:none}
.toast.ok span:where(.ic){color:var(--ok)} .toast.bad span:where(.ic){color:var(--bad)} .toast.info span:where(.ic){color:var(--info)}
.x-btn{margin-left:auto;width:30px;height:30px;border-radius:8px;border:1px solid var(--line2);background:var(--panel);cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.x-btn span:where(.ic){width:15px;height:15px}
@keyframes fade{from{opacity:0}}
@keyframes slide{from{transform:translateX(24px);opacity:0}}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%) scale(.98)}}
.toast{animation-name:toastIn}
@keyframes toastIn{from{opacity:0;transform:translateY(6px)}}
.skel{border-radius:8px;background:linear-gradient(90deg,var(--panel2),var(--panel3),var(--panel2));background-size:200% 100%;animation:skel 1.2s linear infinite;min-height:14px}
@keyframes skel{to{background-position:-200% 0}}
.loading{padding:40px;display:grid;gap:10px}

/* ---------- charts (SVG drawn by core.js) ---------- */
.chart{width:100%;display:block}
.chart-box{width:100%;min-width:0}
/* login / setup: recovery codes */
.linkish{border:0;background:none;color:var(--text);font:inherit;font-size:13px;cursor:pointer;padding:4px 0;text-decoration:underline;text-underline-offset:3px}
.setup-codes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 18px;margin:12px 0 4px;padding:12px 14px 12px 34px;border-radius:10px;background:var(--panel2);border:1px solid var(--line);font-size:14px}
.setup-codes li{white-space:nowrap}
@media (max-width:440px){.setup-codes{grid-template-columns:minmax(0,1fr)}}
.btn.disabled{opacity:.5;pointer-events:none}
.chart .grid-l{stroke:var(--line);stroke-width:1}
.chart .axis{fill:var(--faint);font-size:10.5px;font-family:var(--mono)}
.chart .area{fill:var(--acc-bg)}
.chart .ln{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.chart .ln2{fill:none;stroke:var(--info);stroke-width:1.6;stroke-dasharray:4 3}
.chart .bar-r{fill:var(--accent);opacity:.85}
.chart .bar-r.alt{fill:var(--info);opacity:.8}
.chart .dot{fill:var(--accent)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--accent)}
.legend i.alt{background:var(--info)} .legend i.c3{background:var(--ok)} .legend i.c4{background:var(--warn)} .legend i.c5{background:var(--faint)}
.hbars{display:flex;flex-direction:column;gap:9px}
.hbar{display:grid;grid-template-columns:minmax(0,1.3fr) 2fr 44px;gap:10px;align-items:center;font-size:12.5px}
.hbar > span:first-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.hbar .n{text-align:right;font-family:var(--mono);color:var(--muted);font-size:12px}

/* ---------- login ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(60% 50% at 70% 10%,rgba(255,138,61,.10),transparent 70%),var(--bg)}
.auth-card{width:min(400px,100%);background:var(--panel);border:1px solid var(--line2);border-radius:16px;box-shadow:var(--shadow);padding:26px}
.auth-card .brand{border:0;padding:0 0 18px}
.auth-card h2{font-size:18px;margin-bottom:4px}
.auth-card p{margin:0 0 18px;color:var(--muted);font-size:13px}
.auth-card .btn{width:100%;height:40px;margin-top:6px}
.otp{display:flex;gap:8px;justify-content:space-between}
.otp input{width:min(46px,calc((100% - 40px) / 6));height:52px;text-align:center;font-size:20px;font-family:var(--mono);border-radius:10px;border:1px solid var(--line2);background:var(--panel2);outline:none}
.otp input:focus{border-color:var(--accent)}
.auth-note{margin-top:16px;font-size:11.5px;color:var(--faint);text-align:center}
.form-err{color:var(--bad);font-size:12.5px;margin:4px 0 0;min-height:18px}

/* ---------- language (owner decision 2026-09-29: a dropdown, English first). Login and setup card: core.js P.langMenu
   (a button, then a small menu of menuitemradio); the user menu: a labelled group of the same items (shell.js). Every
   icon here has its own size (and an inline one, P.icon's px). ---------- */
.lang-dd{position:relative;flex:none}
.auth-card .brand .lang-dd{margin-left:auto;align-self:flex-start}
.lang-btn{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 7px 0 8px;border:1px solid var(--line2);border-radius:8px;background:var(--panel);color:var(--muted);font-size:12.5px;line-height:1;white-space:nowrap;cursor:pointer}
.lang-btn[aria-expanded="true"]{background:var(--panel2);color:var(--text)}
@media (hover:hover){.lang-btn:hover{background:var(--panel2);color:var(--text)}}
.lang-dd .lang-ic,.menu-pop .lang-ic{width:16px;height:16px;flex:none}
/* the flags (core.js P.langFlag: 20x15 images); the button's globe only stands in for a flag that could not load */
.lang-flag{display:block;width:20px;height:15px;flex:none;border-radius:2px;object-fit:cover;background:var(--line2);box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.lang-flag[hidden]{display:none}
.lang-btn .lang-ic{display:none}
.lang-btn.no-flag .lang-ic{display:block}
.lang-dd .lang-chev{width:12px;height:12px;flex:none}
.lang-btn .lang-code{display:none;font-weight:700;letter-spacing:.06em}
@media (max-width:359.98px){.lang-btn .lang-cur,.lang-btn .lang-chev{display:none}.lang-btn .lang-code{display:inline}}
.lang-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:45;min-width:148px;background:var(--panel);border:1px solid var(--line2);border-radius:10px;box-shadow:var(--shadow);padding:5px}
.lang-pop[hidden]{display:none}
.lang-opt{display:flex;width:100%;align-items:center;gap:9px;padding:7px 10px;border:0;border-radius:7px;background:none;color:var(--text);text-align:left;font-size:13px;cursor:pointer}
.lang-opt:focus-visible{outline-offset:-2px}
@media (hover:hover){.lang-opt:hover{background:var(--panel2)}}
.lang-opt .lang-ck{width:16px;height:16px;flex:none;color:var(--accent-text)}
.lang-opt[aria-checked="false"] .lang-ck{visibility:hidden}
.lang-opt[aria-checked="true"]{font-weight:600}
.menu-pop .lang-lbl{display:flex;align-items:center;gap:9px;padding:4px 10px 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- the simplification's shared parts (core.js P.menu, P.row, P.disclosure) ---------- */
/* P.menu: the trigger (a row's ⋯, a header's "İşlemler ▾") and its popup, appended to <body> and placed by the script
   (left, top and z-index set through CSSOM); the items share .menu-pop's look */
.p-more{width:30px;padding:0}
.p-more span:where(.ic){width:16px;height:16px}
.p-menu-btn .p-chev{width:12px;height:12px}
.menu-pop.p-menu{position:fixed;right:auto;top:auto;min-width:200px;max-width:min(340px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow-y:auto}
.p-menu .p-mi{color:var(--text)}
.p-menu .p-mi-t{display:flex;flex-direction:column;gap:1px;min-width:0}
.p-menu .p-why{font-size:11.5px;line-height:1.35;color:var(--faint);white-space:normal}
.p-menu .p-mi[aria-disabled="true"]{color:var(--muted);cursor:not-allowed}
.p-menu .p-mi[aria-disabled="true"]:hover{background:none}
.p-menu .p-mi.danger,.p-menu .p-mi.danger span:where(.ic){color:var(--bad)}
.p-menu .p-mi.accent,.p-menu .p-mi.accent span:where(.ic){color:var(--accent-text)}
.p-menu .p-mi:focus-visible{outline-offset:-2px;text-decoration:none}
.p-menu .p-ck{visibility:hidden}
.p-menu [aria-checked="true"] .p-ck{visibility:visible;color:var(--accent-text)}
.p-one.accent{color:var(--accent-text)}
.p-one-w{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.p-one-w .p-why{font-size:11.5px;color:var(--faint)}
/* P.row: one record per line in a ul.p-rows (p-list: decision C, one line for every role, the owner too: the cut is CSS
   only, the whole value stays in the DOM and in title). The facts are cut first, a warning chip never (it wraps). Under
   560 px the facts and chips wrap under the title; row buttons are 44 px touch targets 8 px apart (UI / UX addition 2) */
.p-rows{list-style:none;margin:0;padding:0;min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
.p-row{display:flex;align-items:center;gap:10px;min-width:0;padding:10px 14px;border-bottom:1px solid var(--line)}
.p-row:last-child{border-bottom:0}
.p-row.p-open{cursor:pointer}
@media (hover:hover){.p-row.p-open:hover{background:var(--panel2)}}
.p-row:focus-visible{outline-offset:-2px}
.p-row-ic{display:grid;place-items:center;flex:none;color:var(--faint)}
.p-row-ic span:where(.ic){width:16px;height:16px}
.p-row-h{display:flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:45%}
.p-row-t{min-width:0;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-row-t.mono{font-family:var(--mono);font-size:12.5px}
.p-row-b{display:flex;align-items:center;gap:6px;flex:none}
.p-row-f{display:flex;align-items:center;gap:8px;flex:1 1 0;min-width:0}
.p-meta{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12.5px;color:var(--muted)}
.p-meta span:where(.ic){width:13px;height:13px;margin-right:3px;vertical-align:-2px}
.p-sep{color:var(--faint)}
.p-warn{display:inline-flex;align-items:flex-start;gap:6px;flex:0 0 auto;max-width:50%;padding:3px 8px;border-radius:7px;background:var(--warn-bg);color:var(--warn);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.p-warn span:where(.ic){width:13px;height:13px;flex:none;margin-top:2px}
.p-warn a{text-decoration:underline;text-underline-offset:2px}
.p-row-a{display:flex;align-items:center;gap:6px;flex:none;margin-left:auto}
@media (max-width:560px){
  .p-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:10px;row-gap:6px}
  .p-row-ic{grid-column:1;grid-row:1}
  .p-row-h{grid-column:2;grid-row:1;max-width:none}
  .p-row-a{grid-column:3;grid-row:1;gap:8px}
  .p-row-f{grid-column:2 / -1;grid-row:2;flex-wrap:wrap}
  .p-row-2 .p-row-a{grid-column:1 / -1;grid-row:3;justify-content:flex-end}
  .p-meta{white-space:normal}
  .p-warn{max-width:100%}
  .p-row-a .btn{min-height:44px}
  .p-row-a .p-more{min-width:44px}
}
/* P.disclosure: a quiet text link with a chevron (never styled like an action button: UI / UX addition 4), its section
   right under it, left-aligned; the section stays in the DOM while closed */
.disc{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.disc-btn{display:inline-flex;align-items:center;gap:6px;padding:2px 0;border:0;background:none;color:var(--muted);font:inherit;font-size:13px;text-align:left;cursor:pointer}
.disc-btn .disc-chev{width:14px;height:14px;transition:transform .15s}
.disc-btn[aria-expanded="true"] .disc-chev{transform:rotate(90deg)}
@media (hover:hover){.disc-btn:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}}
.disc-btn:focus-visible{color:var(--text);text-decoration:underline;text-underline-offset:3px}
.disc-body{align-self:stretch;min-width:0}
.disc-body[hidden]{display:none}
/* active-filter chips: the on-but-controlless filters as removable pills, with a "clear all" after them (addition 8) */
.p-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-width:0}
.p-chip{display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:3px 3px 3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);font-size:12.5px;color:var(--text)}
.p-chip .p-chip-i{width:14px;height:14px;flex:none;color:var(--muted)}
.p-chip-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-chip-x{flex:none;width:24px;height:24px;display:grid;place-items:center;border:0;border-radius:999px;background:none;color:var(--muted);cursor:pointer}
.p-chip-x span:where(.ic){width:13px;height:13px}
@media (hover:hover){.p-chip-x:hover{background:var(--panel3);color:var(--text)}}
.p-chip-x:focus-visible{outline:2px solid var(--accent);outline-offset:1px;color:var(--text)}
.p-chips-clear{border:0;background:none;padding:3px 4px;font:inherit;font-size:12.5px;color:var(--muted);cursor:pointer}
@media (hover:hover){.p-chips-clear:hover{color:var(--text);text-decoration:underline;text-underline-offset:3px}}
.p-chips-clear:focus-visible{color:var(--text);text-decoration:underline;text-underline-offset:3px}
/* the "Sırala ▾" bar above a sort-menu table, right-aligned (the trigger reuses .p-menu-btn) */
.tbl-sort{display:flex;justify-content:flex-end;margin:0 0 8px}
/* ---------- responsive ---------- */
@media (max-width:1180px){.g5{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g-main{grid-template-columns:minmax(0,1fr)}.gsearch{width:220px}.tbl .hide-t{display:none}}
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;z-index:70;width:min(280px,86vw);transform:translateX(-100%);transition:transform .2s ease}
  body.nav-open .side{transform:none;box-shadow:var(--shadow)}
  body.nav-open .side-scrim{display:block}
  .side-scrim{display:none;position:fixed;inset:0;z-index:69;background:rgba(5,7,9,.5)}
  .menu-btn{display:grid}
  .gsearch{display:none}
  .g3,.g2{grid-template-columns:minmax(0,1fr)}
  .view{padding:16px}
  .top{padding:0 14px}
  .kv{grid-template-columns:110px 1fr}
  .tbl .hide-m{display:none}
}
@media (max-width:560px){.g5,.g4{grid-template-columns:1fr 1fr}.me small,.me b{display:none}.me{padding:3px}.env{display:none}.filters .input{width:100%}.tbl-ms thead{display:none}}