* { box-sizing: border-box; }
:root {
  --bg: #0c1420;
  --bg-elev: #101b2b;
  --border: #1f2a3b;
  --border-soft: #2a3d5e;
  --text: #e6edf3;
  --text-dim: #a8b3c7;
  --brand-700: #10497D;
  --brand-500: #1495D0;
  --accent-500: #E79614;
}
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; color: var(--text); background: var(--bg); }

/* Layout */
.site-header, .site-footer { padding: 16px 0; background: var(--bg-elev); border-bottom: 1px solid var(--border); }
.site-footer { border-top: 1px solid var(--border); border-bottom: 0; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.disclosure { color: var(--text-dim); font-size: 12px; }

/* Top nav */
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap: nowrap; }
.topbar nav { margin-left: auto; display:flex; gap:10px; align-items:center; }
.brand-title { margin:0; }

/* Gutter layout */
.gutter-layout { padding: 16px 0; }
.gutter { display:none; }
@media (min-width: 1024px) {
  .gutter-layout { display:grid; grid-template-columns: 200px minmax(0, 1100px) 200px; justify-content:center; gap: 16px; }
  .gutter { display:block; }
  .gutter .gutter-box { position: sticky; top: 16px; border: 1px dashed #2a3d5e; background:#0f1929; border-radius:10px; min-height: 600px; }
  .gutter .ad-badge { display:inline-block; margin:8px; font-size:11px; color:#8fb3ff; background:#0c1a2e; border:1px solid #1f3357; padding:2px 6px; border-radius:999px; }
}

/* Grid & Cards */
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (min-width: 800px) { .grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid { grid-template-columns: repeat(4, 1fr); } }
.card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 1px 0 rgba(0,0,0,.2); }
.card-image { display: block; width: 100%; height: 220px; background: #0d1726; overflow: hidden; }
.card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color: var(--text-dim); }
.card-title { margin: 12px; font-size: 16px; line-height: 1.3; color: var(--text); }
.card-actions { margin: 0 12px 12px; }

/* Buttons */
.btn { display: inline-block; padding: 10px 14px; background: var(--accent-500); color: #0b0b0b; text-decoration: none; border-radius: 8px; border: 1px solid #00000022; font-weight: 600; transition: transform .05s ease, filter .15s ease; }
.btn:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn.secondary { background: linear-gradient(135deg, var(--brand-700), var(--brand-500)); color: #fff; border-color: #0b2d4a; }
.btn.ghost { background: #173457; color:#eaf4ff; border:1px solid var(--border-soft); }
.btn.danger { background: #7d1f2b; color:#fff; border-color:#a83a49; }
.btn[disabled], .btn:disabled { cursor: not-allowed; opacity: .6; transform: none; }

/* Pagination */
.pagination { display:flex; gap:12px; align-items:center; justify-content:center; margin:24px 0; color: var(--text-dim); }
.pagination a { color: #fff; text-decoration: none; background: #0f2238; border:1px solid var(--border); padding:8px 12px; border-radius:8px; }
.pagination a:hover { background: #143055; }

/* Detail */
.detail { display:grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.detail-media img { width: 100%; border:1px solid var(--border); border-radius: 10px; }
.back { text-decoration:none; color:#bcd7ff; }

/* Ads */
.ad { margin: 16px 0; border-radius: 10px; border:1px dashed #1e3456; background: #0f1929; position: relative; }
.ad.ad-hero { min-height: 90px; display:flex; align-items:center; justify-content:center; }
.ad.infeed { min-height: 90px; }
.ad .ad-badge { position:absolute; top:6px; left:6px; font-size:11px; color:#8fb3ff; background:#0c1a2e; border:1px solid #1f3357; padding:2px 6px; border-radius:999px; }
.ad .ad-placeholder { color:#6f86a0; font-size:13px; padding: 16px; text-align:center; }

/* Tables (admin) */
table { width:100%; border-collapse: collapse; background: var(--bg-elev); border:1px solid var(--border-soft); border-radius: 8px; overflow: hidden; }
th, td { border-bottom:1px solid var(--border-soft); padding:10px; text-align:left; color: var(--text); vertical-align: middle; }
th { background:#0f2238; color:#dfe8f5; }
.table-thumb { width: 40px; height: 40px; border-radius: 8px; border:1px solid var(--border-soft); object-fit: cover; background:#0d1726; }
.row-actions .btn { padding:8px 12px; }

/* Forms (admin) */
input[type=text], input[type=password], textarea, select { width:100%; padding:12px; background:#0e1828; color: var(--text); border:1px solid var(--border-soft); border-radius:8px; outline: none; }
input::placeholder, textarea::placeholder { color: #7f8ba3; }
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
  border-color: #28527f;
  box-shadow: 0 0 0 2px rgba(20,149,208,0.12);
  outline: none;
}

.form-row { margin-bottom:14px; }
.flash { background:#0f2a18; border:1px solid #1f4a30; padding:10px 12px; border-radius:8px; margin-bottom:12px; color:#c6f3d3; }
.error { background:#2a1414; border:1px solid #4a1f1f; color:#f3c6c6; }

/* Responsive */
@media (max-width: 800px) {
  .detail { grid-template-columns: 1fr; }
  .card-image { height: 180px; }
}