:root{--bg:#060a14;--panel:#0a1120;--card:#0f1a2e;--line:#1a2844;--txt:#e8eef9;--mut:#8394b3;--acc:#3b8cff;--red:#ff5b6b;--ok:#3ccf8e}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--txt);font:15px/1.5 'Barlow',system-ui,Segoe UI,sans-serif}
a{color:var(--acc);text-decoration:none}a:hover{text-decoration:underline}
button,.btn{font:600 15px 'Barlow Condensed',sans-serif;letter-spacing:.03em;cursor:pointer;color:#fff;background:var(--acc);border:0;border-radius:8px;padding:8px 16px;display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.btn:hover{text-decoration:none;filter:brightness(1.1)}button:hover{filter:brightness(1.1)}
button.ghost,.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--txt)}
button.danger{background:transparent;border:1px solid #5a2330;color:var(--red)}
button.small{padding:4px 10px;font-size:13.5px}
button:disabled{opacity:.5;cursor:default}
input,select,textarea{width:100%;background:var(--card);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:9px 11px;font:inherit}
textarea{resize:vertical;min-height:140px}
input:focus,select:focus,textarea:focus{outline:1px solid var(--acc);border-color:var(--acc)}
input[type=file]{padding:7px}
label{display:block;margin:14px 0 5px;color:#b3c1dc;font-size:13.5px}
h1,h2{font-family:'Barlow Condensed',sans-serif;font-weight:700;letter-spacing:.02em;margin:0}
h1{font-size:30px}h2{font-size:14px;letter-spacing:.14em;color:var(--acc);margin:28px 0 10px;text-transform:uppercase}
.mut{color:var(--mut)}

header{display:flex;align-items:center;gap:24px;padding:10px 24px;background:var(--panel);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5;flex-wrap:wrap}
.brand{display:flex;gap:12px;align-items:center;color:var(--txt)}.brand:hover{text-decoration:none}
.logo{width:42px;height:42px;border-radius:10px;background:var(--acc);color:#fff;display:grid;place-items:center;font:700 16px 'Barlow Condensed',sans-serif;transform:skewX(-6deg)}
.title{font:700 21px/1 'Barlow Condensed',sans-serif;letter-spacing:.03em}.title em{font-style:normal;color:var(--acc)}
.title small{display:block;font:400 12px 'Barlow',sans-serif;color:var(--mut);letter-spacing:0;margin-top:3px}
nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
nav a{color:var(--mut);font:600 15px 'Barlow Condensed',sans-serif;padding:6px 12px;border-radius:7px;border-bottom:2px solid transparent}
nav a:hover{color:var(--txt);text-decoration:none}nav a.on{color:var(--txt);background:var(--card)}
#me{display:flex;gap:10px;align-items:center;font-size:14px}
.role{font:600 11px 'Barlow Condensed',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--card);border:1px solid var(--line);color:var(--mut)}
.role.admin{color:var(--acc);border-color:#1f3d70}.role.poster{color:var(--ok);border-color:#1d4a3a}

main{max-width:1100px;margin:0 auto;padding:28px 20px 60px}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:6px}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:18px}
.cat{background:linear-gradient(160deg,#10203d,var(--card) 60%);border:1px solid var(--line);border-radius:12px;padding:18px;color:var(--txt);display:block}
.cat:hover{border-color:var(--acc);text-decoration:none}
.cat b{display:block;font:700 22px 'Barlow Condensed',sans-serif}
.cat span{color:var(--mut);font-size:13.5px}
.cat .price{float:right;font:700 28px 'Barlow Condensed',sans-serif;color:var(--acc)}

.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:14px}
.post{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;color:var(--txt);display:flex;flex-direction:column}
.post:hover{border-color:var(--acc);text-decoration:none}
.thumb{aspect-ratio:16/10;background:radial-gradient(circle at 50% 40%,#1a2c4f,#0b1428 75%);display:grid;place-items:center;color:#2b406a;font:700 34px 'Barlow Condensed',sans-serif}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.post div.info{padding:10px 13px 12px}
.post b{display:block;font:600 18px/1.2 'Barlow Condensed',sans-serif}
.post small{color:var(--mut);font-size:12.5px}
.empty{padding:40px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:12px;margin-top:14px}

.detail{display:grid;grid-template-columns:1fr 300px;gap:24px;margin-top:18px}
.box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.desc{white-space:pre-wrap;word-wrap:break-word}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:18px}
.gallery a,.gallery div{display:block;aspect-ratio:1;border-radius:9px;overflow:hidden;background:#0b1428;border:1px solid var(--line);position:relative}
.gallery img{width:100%;height:100%;object-fit:cover;display:block}
.gallery button{position:absolute;top:6px;right:6px}
.big{width:100%;justify-content:center;padding:13px;font-size:18px}
dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:14px}dt{color:var(--mut)}dd{margin:0;word-break:break-all}
.actions{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}

form.card,.login{max-width:720px}
.login{max-width:380px;margin:9vh auto 0;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:28px}
.login .brand{margin-bottom:10px}
.login button{width:100%;justify-content:center;margin-top:20px;padding:11px}
.err{color:var(--red);font-size:14px;margin-top:12px;min-height:1em}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-top:12px}.bar i{display:block;height:100%;width:0;background:var(--acc);transition:width .2s}

table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
th{color:var(--mut);font-weight:500;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em}
td select{width:auto;padding:5px 8px}
td .actions{margin:0}
tr.banned td:first-child{color:var(--red);text-decoration:line-through}
.inline{display:grid;grid-template-columns:1fr 1fr 180px auto;gap:10px;align-items:end}
.inline label{margin-top:0}

#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--acc);padding:10px 18px;border-radius:9px;z-index:10}
#toast.bad{border-color:var(--red)}

@media (max-width:760px){
  header{padding:10px 16px;gap:10px;justify-content:space-between}
  nav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap}nav a{white-space:nowrap}
  main{padding:20px 16px 50px}
  .detail,.row,.inline{grid-template-columns:1fr}
  .tablewrap{overflow-x:auto}
}