/* ════════════════════════════════════════════════════════
   insery Hilfe-Center — main.css  (mobile-first v2)
════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --teal:#0ecfb0;--teal-d:#0bb89c;
  --r:8px;
  --font:"DM Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --t:.14s ease;
}
[data-theme=dark]{
  --bg:#0d1110;--bg2:#131918;--bg3:#192320;--bg4:#1f2826;--bg5:#252e2b;
  --b:rgba(255,255,255,.07);--bh:rgba(14,207,176,.22);
  --t1:#dde8e5;--t2:#6e8f88;--t3:#3a514c;
}
/* OLED: pure black on mobile */
@media(max-width:768px){
  [data-theme=dark]{
    --bg:#000000;--bg2:#0a0f0e;--bg3:#111916;--bg4:#17211f;--bg5:#1c2926;
  }
}
[data-theme=light]{
  --bg:#f3f7f6;--bg2:#fff;--bg3:#e8f0ee;--bg4:#ddeae7;--bg5:#d3e3e0;
  --b:rgba(0,0,0,.08);--bh:rgba(14,207,176,.35);
  --t1:#111a18;--t2:#4e6e67;--t3:#a0bab4;
}
html{font-size:15px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--t1);font-family:var(--font);line-height:1.55;min-height:100vh;transition:background var(--t),color var(--t)}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-thumb{background:var(--bg4);border-radius:99px}
a{color:inherit;text-decoration:none}
code{font-family:var(--mono);font-size:.86em;background:var(--bg3);padding:1px 6px;border-radius:4px;border:1px solid var(--b)}
pre{background:var(--bg3);border:1px solid var(--b);border-radius:var(--r);padding:16px;overflow-x:auto;margin:14px 0;font-family:var(--mono);font-size:.8em;line-height:1.6}
pre code{background:none;border:none;padding:0}
img{max-width:100%;height:auto}

/* ─── ADMIN BAR ─── */
.admin-bar{background:var(--bg2);border-bottom:1px solid var(--bh);padding:0 16px;height:34px;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--t2);flex-wrap:wrap;overflow-x:auto}
.admin-bar a{color:var(--teal);text-decoration:none;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;transition:background var(--t);white-space:nowrap}
.admin-bar a:hover{background:var(--bg3)}
.ab-sep{width:1px;height:12px;background:var(--b);flex-shrink:0}
.ab-right{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ─── HEADER ─── */
header{border-bottom:1px solid var(--b);background:var(--bg);position:sticky;top:0;z-index:100;transition:background var(--t)}
.hdr{max-width:1140px;margin:0 auto;padding:0 20px;height:52px;display:flex;align-items:center;gap:0}
.hdr-logo{display:flex;align-items:center;text-decoration:none;padding-right:18px;flex-shrink:0;transition:opacity var(--t)}
.hdr-logo:hover{opacity:.75}
.hdr-logo img{height:24px;width:auto;display:block}
.logo-dot{width:7px;height:7px;border-radius:50%;background:var(--teal);flex-shrink:0;margin-right:8px}
.logo-text{font-size:14px;font-weight:600;letter-spacing:-.02em;color:var(--t1)}
.hdr-sep{width:1px;height:18px;background:var(--b);flex-shrink:0;margin-right:0}
.hdr-nav{display:flex;gap:2px;padding:0 14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.hdr-nav::-webkit-scrollbar{display:none}
.hdr-nav a{font-size:13px;color:var(--t2);text-decoration:none;padding:5px 10px;border-radius:7px;transition:background var(--t),color var(--t);white-space:nowrap;flex-shrink:0}
.hdr-nav a:hover{background:var(--bg3);color:var(--t1)}
.hdr-nav a.on{color:var(--teal)}
.hdr-right{display:flex;align-items:center;gap:6px;margin-left:auto;flex-shrink:0}
.hdr-burger{display:none}

/* ─── BUTTONS ─── */
.btn{font-family:var(--font);font-size:12px;font-weight:500;padding:5px 13px;border-radius:7px;cursor:pointer;transition:all var(--t);white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent;line-height:1.4}
.btn-ghost{background:none;color:var(--t2);border-color:var(--b)}
.btn-ghost:hover{background:var(--bg3);color:var(--t1);border-color:var(--bh)}
.btn-teal{background:var(--teal);color:#061410;font-weight:600}
.btn-teal:hover{background:var(--teal-d)}
.btn-sm{padding:4px 10px;font-size:11px}
.btn-lg{padding:8px 18px;font-size:14px}
.icon-btn{width:32px;height:32px;border-radius:7px;background:none;border:1px solid var(--b);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--t);flex-shrink:0}
.icon-btn:hover{background:var(--bg3);color:var(--t1);border-color:var(--bh)}
[data-theme=dark]  .i-sun{display:none!important}
[data-theme=light] .i-moon{display:none!important}

/* ─── MOBILE DRAWER ─── */
.drawer-wrap{display:none;position:fixed;inset:0;z-index:200}
.drawer-wrap.open{display:block}
.d-ov{position:absolute;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);cursor:pointer}
.drawer{position:absolute;top:0;left:0;bottom:0;width:280px;max-width:85vw;background:var(--bg2);display:flex;flex-direction:column;overflow-y:auto;animation:slideInLeft .2s ease;z-index:1}
@keyframes slideInLeft{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.d-head{padding:16px 18px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.d-logo{font-size:14px;font-weight:600;color:var(--t1)}
.d-sec{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:16px 18px 6px}
.d-link{display:flex;align-items:center;gap:9px;padding:10px 18px;font-size:14px;color:var(--t2);transition:background var(--t),color var(--t);border-left:2px solid transparent}
.d-link:hover{background:var(--bg3);color:var(--t1)}
.d-link.on{color:var(--teal);border-left-color:var(--teal);background:rgba(14,207,176,.05)}
.d-btns{padding:16px 18px;border-top:1px solid var(--b);display:flex;flex-direction:column;gap:8px;margin-top:auto}
.d-divider{height:1px;background:var(--b);margin:4px 18px}

/* ─── SEARCH HERO ─── */
.search-hero-wrap{border-bottom:1px solid var(--b);background:var(--bg);padding:40px 20px 36px;text-align:center}
.search-hero-wrap h1{font-size:clamp(20px,5vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.15;margin-bottom:10px}
.search-hero-wrap p{font-size:14px;color:var(--t2);margin-bottom:24px;font-weight:300}
.search-box{max-width:520px;margin:0 auto;position:relative}
.search-box input{width:100%;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:11px 52px 11px 40px;font-family:var(--font);font-size:14px;color:var(--t1);outline:none;transition:border-color var(--t);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.search-box input:focus{border-color:var(--bh)}
.search-box .s-ico{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--t3);pointer-events:none}
.search-box .s-hint{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--mono);font-size:10px;color:var(--t3);background:var(--bg3);border:1px solid var(--b);border-radius:4px;padding:2px 6px;pointer-events:none}

/* ─── PAGE LAYOUT ─── */
.page{max-width:1140px;margin:0 auto;padding:28px 20px 80px}
.sec{margin-bottom:32px}
.sec-title{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);margin-bottom:12px;display:flex;align-items:center;gap:10px}
.sec-title::after{content:'';flex:1;height:1px;background:var(--b)}

/* ─── BREADCRUMB ─── */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--t3);margin-bottom:20px;flex-wrap:wrap}
.breadcrumb a{color:var(--t2);transition:color var(--t)}
.breadcrumb a:hover{color:var(--teal)}

/* ─── STATUS BAR ─── */
.status{border:1px solid var(--b);border-radius:var(--r);padding:11px 16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--t2);transition:border-color var(--t)}
.status:hover{border-color:var(--bh)}
.s-led{width:7px;height:7px;border-radius:50%;background:#22c55e;flex-shrink:0;animation:pulse 3s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}
.status strong{color:var(--t1);font-weight:500}
.status a{color:var(--teal)}
.status a:hover{text-decoration:underline}
.s-uptime{margin-left:auto;font-family:var(--mono);font-size:11px;color:#22c55e;flex-shrink:0}

/* ─── CAT GRID ─── */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--b);border:1px solid var(--b);border-radius:var(--r);overflow:hidden}
.cat{background:var(--bg);padding:20px 18px;text-decoration:none;display:flex;flex-direction:column;gap:6px;transition:background var(--t)}
.cat:hover{background:var(--bg2)}
.cat-ico{width:34px;height:34px;border:1px solid var(--b);border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--t2);margin-bottom:2px;transition:border-color var(--t),color var(--t)}
.cat:hover .cat-ico{border-color:var(--bh);color:var(--teal)}
.cat-name{font-size:13px;font-weight:500;color:var(--t1)}
.cat-desc{font-size:12px;color:var(--t2);line-height:1.45;flex:1}
.cat-n{font-size:10px;color:var(--t3);font-family:var(--mono);margin-top:4px}

/* ─── PANEL PAIR ─── */
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.panel{border:1px solid var(--b);border-radius:var(--r);overflow:hidden}
.ph{padding:11px 16px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;background:var(--bg2)}
.ph-t{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3)}
.ph-l{font-size:12px;color:var(--teal)}
.ph-l:hover{text-decoration:underline}
.art{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid var(--b);text-decoration:none;transition:background var(--t)}
.art:last-child{border-bottom:none}
.art:hover{background:var(--bg3)}
.art-dot{width:4px;height:4px;border-radius:50%;background:var(--b);flex-shrink:0;transition:background var(--t)}
.art:hover .art-dot{background:var(--teal)}
.art-title{flex:1;font-size:13px;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── ARTICLE LAYOUT ─── */
.art-layout{display:grid;grid-template-columns:1fr 220px;gap:28px;align-items:start}
.art-main{}
.art-sidebar{position:sticky;top:72px}
.art-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--b)}
.art-meta-item{font-size:12px;color:var(--t3);display:flex;align-items:center;gap:5px}
.art-sidebar-panel{border:1px solid var(--b);border-radius:var(--r);overflow:hidden;margin-bottom:12px}
.asp-head{padding:10px 14px;border-bottom:1px solid var(--b);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);background:var(--bg2)}
.asp-link{display:flex;align-items:center;gap:8px;padding:9px 14px;border-bottom:1px solid var(--b);text-decoration:none;font-size:12px;color:var(--t2);transition:background var(--t)}
.asp-link:last-child{border-bottom:none}
.asp-link:hover{background:var(--bg3);color:var(--t1)}
.asp-link.active{color:var(--teal)}

/* ─── ARTICLE BODY ─── */
.art-body{font-size:14px;line-height:1.75;color:var(--t2)}
.art-body h2{font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--t1);margin:26px 0 10px;padding-top:4px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:14px;font-weight:600;color:var(--t1);margin:20px 0 8px}
.art-body p{margin-bottom:12px}
.art-body ul,.art-body ol{padding-left:20px;margin-bottom:12px}
.art-body li{margin-bottom:4px}
.art-body a{color:var(--teal)}
.art-body a:hover{text-decoration:underline}
.art-body img{border-radius:var(--r);border:1px solid var(--b);margin:12px 0}
.art-body table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
.art-body th{padding:8px 12px;background:var(--bg2);border:1px solid var(--b);color:var(--t1);font-weight:600;text-align:left;font-size:11px;letter-spacing:.04em;text-transform:uppercase}
.art-body td{padding:8px 12px;border:1px solid var(--b);color:var(--t2)}
.callout{border-radius:var(--r);padding:14px 16px;margin:16px 0;font-size:13px;line-height:1.6}
.callout strong{display:block;margin-bottom:3px;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.callout a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.callout-info{background:rgba(14,207,176,.06);border:1px solid rgba(14,207,176,.18);color:var(--t2)}
.callout-info strong{color:var(--teal)}
.callout-warn{background:rgba(234,179,8,.06);border:1px solid rgba(234,179,8,.2);color:var(--t2)}
.callout-warn strong{color:#ca8a04}
.callout-danger{background:rgba(248,113,113,.06);border:1px solid rgba(248,113,113,.2);color:var(--t2)}
.callout-danger strong{color:#f87171}

/* ─── TAGS ─── */
.tag-list{display:flex;gap:6px;flex-wrap:wrap;margin-top:16px;padding-top:16px;border-top:1px solid var(--b)}
.tag{font-size:11px;background:var(--bg3);border:1px solid var(--b);padding:2px 9px;border-radius:4px;color:var(--t2);transition:border-color var(--t)}
.tag:hover{border-color:var(--bh);color:var(--t1)}

/* ─── VOTE BOX ─── */
.vote-box{margin-top:28px;padding:18px;background:var(--bg2);border:1px solid var(--b);border-radius:var(--r)}
.vote-label{font-size:13px;font-weight:500;color:var(--t1);margin-bottom:14px}
.vote-btns{display:flex;gap:8px;flex-wrap:wrap}
.vote-btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:13px;font-weight:500;padding:9px 16px;border-radius:var(--r);border:1px solid var(--b);background:var(--bg3);color:var(--t2);cursor:pointer;transition:all var(--t)}
.vote-btn:hover:not(:disabled){background:var(--bg4);color:var(--t1);border-color:var(--bh)}
.vote-btn:disabled{cursor:default}
.vote-icon{width:16px;height:16px;flex-shrink:0;transition:color var(--t)}
.vote-count{font-family:var(--mono);font-size:11px;color:var(--t3);min-width:14px}
.vote-btn.voted-yes{background:rgba(14,207,176,.1);border-color:rgba(14,207,176,.3);color:var(--teal)}
.vote-btn.voted-yes .vote-icon,.vote-btn.voted-yes .vote-count{color:var(--teal)}
.vote-btn.voted-no-active{background:rgba(248,113,113,.08);border-color:rgba(248,113,113,.25);color:#f87171}
.vote-btn.voted-no-active .vote-icon{color:#f87171}
.vote-btn.voted-no-dim{opacity:.45}
.vote-msg{margin-top:10px;font-size:12px;color:var(--t2)}
.vote-bar-wrap{margin-top:14px;display:flex;align-items:center;gap:10px}
.vote-bar{flex:1;height:4px;background:var(--bg4);border-radius:99px;overflow:hidden}
.vote-bar-fill{height:100%;background:var(--teal);border-radius:99px;transition:width .4s ease}
.vote-bar-label{font-size:11px;color:var(--t3);font-family:var(--mono);white-space:nowrap}

/* ─── CATEGORY PAGE ─── */
.cat-page-icon{width:48px;height:48px;border:1px solid var(--b);border-radius:10px;display:flex;align-items:center;justify-content:center;color:var(--teal);margin-bottom:12px;background:var(--bg2)}
.cat-page-title{font-size:22px;font-weight:600;letter-spacing:-.02em;margin-bottom:6px}
.cat-page-desc{font-size:14px;color:var(--t2);margin-bottom:0}
.cat-sidebar-list{border:1px solid var(--b);border-radius:var(--r);overflow:hidden}
.csl-head{padding:10px 14px;border-bottom:1px solid var(--b);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--t3);background:var(--bg2)}
.csl-item{display:block;padding:9px 14px;border-bottom:1px solid var(--b);font-size:13px;color:var(--t2);text-decoration:none;transition:background var(--t),color var(--t)}
.csl-item:last-child{border-bottom:none}
.csl-item:hover{background:var(--bg3);color:var(--t1)}
.csl-item.on{color:var(--teal);background:rgba(14,207,176,.05)}
.art-list-item{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-bottom:1px solid var(--b);text-decoration:none;transition:background var(--t)}
.art-list-item:last-child{border-bottom:none}
.art-list-item:hover{background:var(--bg3)}
.ali-ico{width:32px;height:32px;border:1px solid var(--b);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--t3);flex-shrink:0;background:var(--bg2);transition:border-color var(--t),color var(--t)}
.art-list-item:hover .ali-ico{border-color:var(--bh);color:var(--teal)}
.ali-body{flex:1;min-width:0}
.ali-title{font-size:13px;font-weight:500;color:var(--t1);margin-bottom:3px}
.ali-excerpt{font-size:12px;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ali-meta{font-size:11px;color:var(--t3);margin-top:4px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.art-list{border:1px solid var(--b);border-radius:var(--r);overflow:hidden;background:var(--bg)}

/* ─── SEARCH ─── */
.search-hero{border-bottom:1px solid var(--b);padding:32px 20px;text-align:center;background:var(--bg)}
.search-hero h1{font-size:20px;font-weight:600;margin-bottom:6px;letter-spacing:-.02em}
.search-hero p{font-size:13px;color:var(--t2);margin-bottom:20px}
.search-result{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;border-bottom:1px solid var(--b);text-decoration:none;transition:background var(--t)}
.search-result:last-child{border-bottom:none}
.search-result:hover{background:var(--bg3)}
.sr-ico{width:32px;height:32px;border:1px solid var(--b);border-radius:7px;display:flex;align-items:center;justify-content:center;color:var(--t3);flex-shrink:0;background:var(--bg2)}
.sr-title{font-size:14px;font-weight:500;color:var(--t1);margin-bottom:4px}
.sr-excerpt{font-size:12px;color:var(--t2);line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-meta{font-size:11px;color:var(--t3);margin-top:5px;display:flex;gap:8px}
.search-empty{text-align:center;padding:56px 20px;color:var(--t2)}
.search-empty p{font-size:14px;margin-bottom:6px;font-weight:500}
.search-empty small{font-size:12px;color:var(--t3)}
.search-result-list{border:1px solid var(--b);border-radius:var(--r);overflow:hidden;background:var(--bg)}

/* ─── FAQ ─── */
.faq-layout{display:grid;grid-template-columns:200px 1fr;gap:14px;align-items:start}
.faq-nav{border:1px solid var(--b);border-radius:var(--r);overflow:hidden;position:sticky;top:68px}
.faq-nav-item{width:100%;display:flex;align-items:center;gap:9px;padding:11px 14px;border:none;border-bottom:1px solid var(--b);background:var(--bg2);color:var(--t2);font-family:var(--font);font-size:12px;font-weight:500;text-align:left;cursor:pointer;transition:background var(--t),color var(--t)}
.faq-nav-item:last-child{border-bottom:none}
.faq-nav-item:hover{background:var(--bg3);color:var(--t1)}
.faq-nav-item.on{background:rgba(14,207,176,.07);color:var(--teal)}
.faq-nav-item.on .fni-icon{color:var(--teal)}
.fni-icon{flex-shrink:0;color:var(--t3);transition:color var(--t)}
.fni-label{flex:1;line-height:1.35}
.fni-count{font-family:var(--mono);font-size:10px;color:var(--t3);background:var(--bg3);border:1px solid var(--b);border-radius:4px;padding:1px 5px;flex-shrink:0}
.faq-nav-item.on .fni-count{color:var(--teal);background:rgba(14,207,176,.08);border-color:rgba(14,207,176,.2)}
.faq-panels{min-width:0}
.faq-group-title{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--teal);margin-bottom:10px}
.faq-item{border:1px solid var(--b);border-radius:var(--r);margin-bottom:6px;overflow:hidden;transition:border-color var(--t)}
.faq-item:hover{border-color:var(--bh)}
.faq-item.open{border-color:var(--bh)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 16px;background:none;border:none;border-radius:0;font-family:var(--font);font-size:13px;font-weight:500;color:var(--t1);text-align:left;cursor:pointer;transition:background var(--t);-webkit-appearance:none;appearance:none}
.faq-q:hover{background:var(--bg3)}
.faq-item.open .faq-q{background:var(--bg3)}
.faq-arr{flex-shrink:0;color:var(--t3);transition:transform var(--t)}
.faq-item.open .faq-arr{transform:rotate(180deg)}
.faq-ans{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-item.open .faq-ans{max-height:2000px}
.faq-ans-inner{padding:0 16px 14px;font-size:13px;color:var(--t2);line-height:1.65}

/* ─── ADMIN PAGES ─── */
.admin-layout{display:grid;grid-template-columns:220px 1fr;min-height:calc(100vh - 34px)}
.admin-nav{background:var(--bg2);border-right:1px solid var(--b);padding:20px 10px}
.admin-nav-section{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--t3);padding:10px 10px 4px}
.admin-nav-link{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:6px;font-size:13px;color:var(--t2);text-decoration:none;transition:background var(--t),color var(--t);margin-bottom:1px}
.admin-nav-link:hover{background:var(--bg3);color:var(--t1)}
.admin-nav-link.on{background:var(--bg3);color:var(--t1);font-weight:500}
.admin-nav-link.on svg{color:var(--teal)}
.admin-content{padding:28px 32px;min-width:0}
.admin-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.admin-card-head{padding:12px 16px;border-bottom:1px solid var(--b);display:flex;align-items:center;justify-content:space-between;gap:8px}
.admin-card-title{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3)}
.admin-card-body{padding:16px}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:20px}
.stat-card{background:var(--bg2);border:1px solid var(--b);border-radius:var(--r);padding:16px}
.stat-n{font-size:26px;font-weight:700;font-family:var(--mono);letter-spacing:-.03em;line-height:1}
.stat-l{font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--t3);margin-top:5px}

/* ─── FORMS ─── */
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.field label{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--t3)}
.field input,.field textarea,.field select{background:var(--bg);border:1px solid var(--b);border-radius:var(--r);padding:8px 11px;font-family:var(--font);font-size:13px;color:var(--t1);outline:none;transition:border-color var(--t);width:100%}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--bh)}
.field textarea{resize:vertical;min-height:80px;line-height:1.6}
.field select option{background:var(--bg2)}
.field-hint{font-size:11px;color:var(--t3);margin-top:2px}

/* ─── FOOTER ─── */
footer{border-top:1px solid var(--b);padding:16px 20px}
.footer-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.f-copy{font-size:12px;color:var(--t3)}
.f-links{display:flex;gap:16px;flex-wrap:wrap}
.f-links a{font-size:12px;color:var(--t3);transition:color var(--t)}
.f-links a:hover{color:var(--t2)}

/* ─── MISC ─── */
.empty{text-align:center;padding:52px 20px;color:var(--t2);font-size:13px}
.alert{border-radius:var(--r);padding:10px 14px;font-size:12px;margin-bottom:14px;border:1px solid;display:flex;gap:8px;align-items:flex-start}
.alert-err{background:rgba(248,113,113,.06);border-color:rgba(248,113,113,.2);color:#f87171}
.alert-ok{background:rgba(14,207,176,.06);border-color:rgba(14,207,176,.2);color:var(--teal)}

/* ════════════════════════════════════════════
   RESPONSIVE — mobile-first breakpoints
════════════════════════════════════════════ */

/* ─ ≤960px: Tablet / small desktop ─ */
@media(max-width:960px){
  .art-layout{grid-template-columns:1fr}
  .art-sidebar{position:static;margin-top:24px}
  .faq-layout{grid-template-columns:180px 1fr}
  .admin-layout{grid-template-columns:180px 1fr}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
}

/* ─ ≤768px: Mobile ─ */
@media(max-width:768px){
  /* Nav: hide links, show burger */
  .hdr-nav{display:none}
  .hdr-burger{display:flex!important}
  .hdr{padding:0 14px}
  .hdr-right .btn-ghost:not(.hdr-theme-btn){display:none}

  /* Search hero smaller */
  .search-hero-wrap{padding:28px 14px 24px}
  .search-hero-wrap h1{font-size:clamp(18px,6vw,26px)}

  /* Page padding */
  .page{padding:20px 14px 60px}

  /* FAQ: sidebar becomes pill row */
  .faq-layout{grid-template-columns:1fr}
  .faq-nav{display:flex;flex-wrap:wrap;gap:4px;border:none;background:none;overflow:visible;position:static}
  .faq-nav-item{width:auto;border:1px solid var(--b);border-radius:7px;padding:5px 10px;font-size:11px;gap:5px}
  .faq-nav-item.on{border-color:rgba(14,207,176,.3)}
  .fni-label,.fni-count{display:none}

  /* Cat grid */
  .cat-grid{grid-template-columns:repeat(2,1fr)}

  /* Two columns */
  .two{grid-template-columns:1fr}

  /* Article */
  .art-meta{gap:8px}

  /* Admin */
  .admin-layout{grid-template-columns:1fr}
  .admin-nav{display:none}
  .admin-content{padding:16px}

  /* Stat row */
  .stat-row{grid-template-columns:1fr 1fr}
}

/* ─ ≤520px: Small mobile ─ */
@media(max-width:520px){
  .cat-grid{grid-template-columns:1fr 1fr}
  .search-box input{font-size:13px}
  .art-body{font-size:13px}
  .art-body h2{font-size:15px}
  .vote-btns{flex-direction:column}
  .vote-btn{width:100%;justify-content:center}
  .faq-q{font-size:13px;padding:11px 14px}
  .search-result{padding:12px 14px}
  .hdr{height:48px}
  .hdr-logo img{height:21px}
  /* Footer stack */
  .footer-inner{flex-direction:column;align-items:flex-start;gap:8px}
  /* Breadcrumb tighter */
  .breadcrumb{font-size:11px;gap:4px}
}

/* ─ ≤360px: Very small ─ */
@media(max-width:360px){
  .cat-grid{grid-template-columns:1fr}
  .stat-row{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════
   MOBILE POLISH — added pass
══════════════════════════════════════════════ */

/* Responsive utility grids */
.g-1-side{display:grid;grid-template-columns:1fr 200px;gap:28px;align-items:start}
.g-1-side2{display:grid;grid-template-columns:1fr 220px;gap:24px;align-items:start}

@media(max-width:860px){
  .g-1-side{grid-template-columns:1fr}
  .g-1-side2{grid-template-columns:1fr}
  /* category sidebar goes below content */
  .g-1-side aside{order:2}
  .g-1-side .cat-sidebar-list{display:flex;flex-wrap:wrap;gap:5px;overflow:hidden;border:none;background:none}
  .g-1-side .csl-head{display:none}
  .g-1-side .csl-item{width:auto;border:1px solid var(--b);border-radius:7px;padding:5px 11px;font-size:12px}
  .g-1-side .csl-item.on{border-color:rgba(14,207,176,.3);background:rgba(14,207,176,.05)}
}

/* Larger tap targets throughout */
.art:hover,.art{min-height:40px}
.faq-q{min-height:48px}
.d-link{min-height:44px}
.btn-teal,.btn-ghost{min-height:36px}

/* Article body: readable on small screens */
@media(max-width:520px){
  .art-body{font-size:14px;line-height:1.75}
  .art-body h2{font-size:16px}
  .art-body pre{font-size:.75em;padding:12px}
  /* vote buttons full-width on very small */
  .vote-btns{flex-direction:column}
  .vote-btn{width:100%;justify-content:center}
}

/* Safe-area padding for iPhone notch/home-indicator */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  footer{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  header{padding-top:env(safe-area-inset-top,0px)}
}