/*
Theme Name: VEKTARO
Author: VEKTARO
Version: 0.7
Text Domain: vektaro
*/
:root{color-scheme:light;--bg:#f5f7fa;--surface:#ffffff;--surface2:#eef2f7;--line:#dde3eb;--text:#0f172a;--muted:#5b6778;--accent:#0284c7;--on-accent:#ffffff;--header:rgba(245,247,250,.88);--glow:rgba(2,132,199,.14);--shadow:rgba(15,23,42,.12);--dim:rgba(15,23,42,.35);--warn:#b45309;--ok:#15803d}
html[data-theme="dark"]{color-scheme:dark;--bg:#0b0f14;--surface:#121821;--surface2:#18202b;--line:#232d3b;--text:#e6edf5;--muted:#8b98a9;--accent:#38bdf8;--on-accent:#04202f;--header:rgba(11,15,20,.88);--glow:rgba(56,189,248,.22);--shadow:rgba(0,0,0,.45);--dim:rgba(0,0,0,.5);--warn:#f59e0b;--ok:#15803d}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.6 Inter,system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.mono{font-family:'JetBrains Mono',monospace}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.site-header{position:sticky;top:0;z-index:5;background:var(--header);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:20px;min-height:60px}
.logo{font-weight:700;letter-spacing:.18em}.logo b{color:var(--accent)}
.site-nav{flex:1}
.site-nav ul,.lang{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap}
.site-nav a{display:block;padding:6px 12px;border-radius:8px;color:var(--muted);font-size:14px}
.site-nav a:hover,.site-nav .current-menu-item>a{color:var(--text);background:var(--surface2)}
.lang a{display:block;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:13px;text-transform:uppercase}
.hero{position:relative;margin:24px 0;padding:56px 44px 64px;border-radius:18px;color:#fff;min-height:300px;display:flex;align-items:center;
  background:linear-gradient(90deg,rgba(8,18,32,.88) 0%,rgba(8,18,32,.6) 45%,rgba(8,18,32,.1) 100%),var(--hero-img,linear-gradient(160deg,#1e3a5f 0%,#3b5b84 45%,#c9875a 85%,#f0b878 100%)) center/cover no-repeat;box-shadow:0 10px 30px var(--shadow)}
.hero-in{position:relative;max-width:560px;width:100%}
.hero .eyebrow{color:rgba(255,255,255,.8)}
.hero h1{color:#fff}.hero h1 span{color:#7dd3fc}
.hero .sub{color:rgba(255,255,255,.85);font-size:18px}
.hsearch{position:relative;display:flex;align-items:center;gap:10px;margin-top:26px;background:#fff;color:#5b6778;border-radius:99px;padding:0 18px;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.hsearch input{flex:1;border:0;background:none;padding:14px 0;font:inherit;color:#0f172a;outline:none;min-width:0}
.hsearch:focus-within{outline:2px solid #7dd3fc}
.hsearch .sugg{color:var(--text)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0}
.hsims{position:absolute;right:20px;bottom:18px;font-size:12px;padding:5px 12px;border-radius:99px;background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.2);color:#fff;backdrop-filter:blur(6px)}
@media(max-width:600px){.hero{padding:36px 20px 64px;min-height:0}.hsims{left:20px;right:auto}}
.eyebrow{font-size:12px;letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
h1{font-size:clamp(30px,5vw,48px);line-height:1.1;margin:10px 0}
h1 span{color:var(--accent)}
.sub{color:var(--muted)}
.row{margin:32px 0 14px}h2{font-size:20px;margin:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:.15s}
.card:hover{border-color:var(--accent);transform:translateY(-2px)}
.cover{aspect-ratio:16/9;display:flex;align-items:flex-end;padding:10px;background:linear-gradient(135deg,#0c4a6e,#1e3a8a);background-size:cover;background-position:center}
.badge{font-size:11px;padding:2px 8px;border-radius:99px;background:rgba(0,0,0,.55);color:#fff}
.card .b{padding:14px}.card h3{margin:0 0 6px;font-size:16px;line-height:1.35}
.meta{font-size:12px;color:var(--muted)}
.article{max-width:720px;margin:28px auto}
.article .hero-img{width:100%;height:auto;border-radius:14px;margin:18px 0}
.body img{max-width:100%;height:auto;border-radius:10px}
.body a{color:var(--accent)}
.pagination{margin:24px 0}.pagination .page-numbers{padding:6px 10px;border:1px solid var(--line);border-radius:8px;margin-right:4px}
footer.site-footer{margin-top:56px;padding:40px 0 24px;border-top:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:14px}
.searchbox{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0;max-width:760px}
.searchbox input{min-width:220px}
.searchbox input{flex:1;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:12px 14px;font:inherit}
.searchbox .csel{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:0 10px;font:inherit;max-width:200px}
.searchbox input:focus{outline:2px solid var(--accent);border-color:transparent}
.searchbox button{background:var(--accent);color:var(--on-accent);border:0;border-radius:10px;padding:0 18px;font:inherit;font-weight:600;cursor:pointer}
.btn{display:inline-block;background:var(--surface2);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:13px}
.list{display:grid;gap:8px}
.item{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
a.item:hover{border-color:var(--accent)}
.code{color:var(--accent);font-weight:500;min-width:52px}
.pill{margin-left:auto;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:1px 8px;white-space:nowrap}
.pill.warn{color:var(--warn);border-color:var(--warn)}
.facts{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin:20px 0}
.fact{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.fact .k{font-size:12px;color:var(--muted)}
.fact .v{font-size:16px}
.notice{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;margin:16px 0;color:var(--muted)}
.sechead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:36px 0 14px}
.raw{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;color:var(--accent);word-break:break-word;font-size:14px}
.rows{display:grid;gap:6px;margin-top:16px}
.rowitem{display:grid;grid-template-columns:110px 190px 1fr;gap:12px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px}
.rowhead{margin-top:10px;padding:6px 2px;border-bottom:1px solid var(--line);color:var(--accent);font-weight:600}
.dec{width:100%;background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:14px;font:14px/1.5 'JetBrains Mono',monospace;margin-top:16px;resize:vertical}
.dec:focus{outline:2px solid var(--accent);border-color:transparent}
.decbar{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.btnp{background:var(--accent);color:var(--on-accent);border:0;border-radius:8px;padding:6px 16px;font:inherit;font-weight:600;cursor:pointer}
button.btn{color:var(--text);font:inherit;font-size:13px;cursor:pointer}
@media(max-width:700px){.rowitem{grid-template-columns:1fr}}
.site-nav li{position:relative}
.site-nav .menu-item-has-children>a::after{content:' ▾'}
.site-nav .sub-menu{display:none;position:absolute;top:100%;left:0;min-width:240px;flex-direction:column;gap:2px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 32px var(--shadow);z-index:20}
.site-nav li:hover>.sub-menu,.site-nav li:focus-within>.sub-menu{display:flex}
.site-nav .sub-menu a{color:var(--text)}
.dform{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;align-items:end;margin:20px 0}
.dform label{display:grid;gap:6px;font-size:13px;color:var(--muted)}
.inp{background:var(--surface);border:1px solid var(--line);color:var(--text);border-radius:10px;padding:10px 12px;font:inherit}
.inp:focus{outline:2px solid var(--accent);border-color:transparent}
.wgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.wcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;transition:.15s}
.wcard:hover{border-color:var(--accent)}
.whead{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.wcode{color:var(--accent);font-size:20px;font-weight:600}
.wcond{font-size:13px;color:var(--muted)}
.wname{display:flex;flex-direction:column;align-items:flex-start;gap:6px;font-size:14px;margin-bottom:12px}
.rbs{display:flex;gap:4px;flex-wrap:wrap}
.rb{font-family:'JetBrains Mono',monospace;font-size:11px;padding:1px 6px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.rb.on{background:var(--ok);border-color:var(--ok);color:#fff}
.wmain{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--surface2);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:13px}
.wline{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:14px;border-bottom:1px dotted var(--line)}
.wline span:first-child{color:var(--muted)}
.wfoot{margin-top:8px;font-size:12px;color:var(--muted)}
.wrapw{max-width:1360px;margin:0 auto;padding:0 20px}
.sbtn{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:16px;flex:none}
.sbtn:hover{background:var(--surface2)}
.shell{display:flex;max-width:1360px;margin:0 auto}
.shell>main{flex:1;min-width:0;margin:0 auto}
.side{width:230px;flex:none;padding:20px 12px;border-right:1px solid var(--line);position:sticky;top:61px;height:calc(100vh - 61px);overflow-y:auto}
.admin-bar .side{top:93px;height:calc(100vh - 93px)}
html[data-side="closed"] .side{display:none}
.side h4{margin:20px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:500}
.side h4:first-child{margin-top:0}
.side a{display:flex;gap:10px;align-items:baseline;padding:7px 10px;border-radius:8px;color:var(--muted);font-size:14px}
.side a:hover,.side a.on{color:var(--text);background:var(--surface2)}
.side a .mono{color:var(--accent);font-size:12px;min-width:38px}
.backdrop{display:none}
.chips{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.chip{font-size:12px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:2px 10px}
.tcard{padding:18px}
.tcard h3{margin:0 0 6px;font-size:16px}
@media(max-width:999px){
  .side{position:fixed;top:61px;left:0;bottom:0;height:auto;width:260px;background:var(--bg);z-index:30;box-shadow:12px 0 32px var(--shadow)}
  html[data-side="open"] .backdrop{display:block;position:fixed;inset:61px 0 0 0;background:var(--dim);z-index:25}
}
.sugg{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:6px;box-shadow:0 12px 32px var(--shadow);z-index:15;max-height:360px;overflow-y:auto}
.sugg a{display:flex;gap:12px;align-items:center;padding:8px 10px;border-radius:8px}
.sugg a:hover,.sugg a.on{background:var(--surface2)}
.sugg-empty{padding:8px 10px;color:var(--muted);font-size:14px}
/* Logo image */
.logo{display:flex;align-items:center}
.logo img{display:block;height:30px;width:auto}
@media(max-width:600px){.logo img{height:24px}}

/* Footer */
.fgrid{display:grid;grid-template-columns:minmax(0,2fr) repeat(2,minmax(0,1fr));gap:32px}
.fbrand p{margin:14px 0 10px;max-width:360px}
.fmotto{color:var(--accent);font-size:12px;letter-spacing:.06em}
.fcol h4{margin:0 0 12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);font-weight:500}
.fcol ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.fcol a:hover{color:var(--text)}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);font-size:12px}
@media(max-width:800px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}.fbottom{flex-direction:column}}

/* Theme switch and logo per theme */
.tbtn{background:none;border:1px solid var(--line);color:var(--text);border-radius:8px;width:34px;height:34px;cursor:pointer;font-size:16px;line-height:1;flex:none}
.tbtn:hover{background:var(--surface2)}
.tbtn::before{content:'☾'}
html[data-theme="dark"] .tbtn::before{content:'☀'}
.logo .l-dark{display:none}
html[data-theme="dark"] .logo .l-light{display:none}
html[data-theme="dark"] .logo .l-dark{display:block}