:root{
  --bg:#0f0f12; --panel:#17171c; --ink:#eaeaf0; --muted:#a4a7b3;
  --line:#24252b; --brand:#8ad7ff; --accent:#ffd580;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui, -apple-system, Segoe UI, Roboto, sans-serif}
a{color:var(--brand);text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:1100px;margin:0 auto;padding:16px}
.site-header,.site-footer{border-bottom:1px solid var(--line);background:var(--panel)}
.site-footer{border-top:1px solid var(--line);border-bottom:none;margin-top:24px}
.site-header .container,.site-footer .container{display:flex;align-items:center;justify-content:space-between}
.brand{font-weight:700;letter-spacing:.3px}
.nav a{margin-left:12px}

h1,h2,h3{margin:.3rem 0 1rem}
h1{font-size:1.8rem}
h2{font-size:1.4rem}
.muted{color:var(--muted)}
.crumb{margin:4px 0 10px}

.grid{display:grid;gap:14px}
.grid-categories{grid-template-columns:repeat(2,minmax(0,1fr))} /* phones: 2 columns */
@media (min-width:1000px){
  .grid-categories{grid-template-columns:repeat(4,minmax(0,1fr))} /* desktop: 4 columns */
}
.grid-devices{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

.card{display:block;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;transition:transform .15s ease, border-color .15s ease}
.card:hover{transform:translateY(-2px);border-color:#333}
.card-title{font-weight:600;margin-top:6px}
.thumb{width:100%;height:160px;object-fit:cover;border-radius:8px;border:1px solid var(--line);background:#0b0b0d}

.hero{width:100%;max-height:460px;object-fit:contain;background:#0b0b0d;border:1px solid var(--line);border-radius:10px;margin:10px 0 16px}

.prose{white-space:pre-wrap}

.form label{display:block;margin:10px 0}
.form input[type="text"], .form input[type="url"], .form input[type="password"], .form textarea, .form input[type="file"]{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#121218;color:var(--ink)
}
.form button, .btn{
  display:inline-block;background:var(--brand);color:#0b0b0d;border:0;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer
}
.form button:hover,.btn:hover{filter:brightness(1.08);text-decoration:none}
.actions{margin-top:10px;display:flex;gap:8px}

.flash-wrap{margin:10px 0}
.flash{padding:10px 12px;border-radius:8px;font-size:.95rem;background:#203040;border:1px solid #406070}
.flash.error{background:#402020;border:1px solid #7a4a4a}

/* admin helpers */
.table th,.table td{padding:.5rem;border-bottom:1px solid var(--line)}
.search-form input{min-width:240px}