* { 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: 1200px; 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: 150px 1000px 150px; justify-content:center; gap: 20px; }
  .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 16px; 
  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;
  min-width: 80px;
  text-align: center;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}
.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; }
  
  /* Header ad specific styling */
  header .ad.ad-hero {
    background: #0a1420;
    border: 2px solid #1f3357;
    margin: 0;
    border-radius: 0;
    min-height: 100px;
  }
  
  /* Ad unit styling */
  .adsbygoogle {
    display: block !important;
    width: 100% !important;
  }

/* Tables (admin) */
table { 
  width:100%; 
  border-collapse: separate; 
  border-spacing: 0;
  background: var(--bg-elev); 
  border-radius: 8px; 
  overflow: hidden; 
  border: none !important;
}
th, td { 
  padding:12px; 
  text-align:left; 
  color: var(--text); 
  vertical-align: middle; 
  border: none !important;
  border-bottom: none !important;
  border-right: none !important;
  border-left: none !important;
  border-top: none !important;
}
th { 
  background:#0f2238; 
  color:#dfe8f5; 
  border: none !important;
}
tr:nth-child(even) { background: var(--bg-elev); }
tr:nth-child(odd) { background: #0d1726; }
tr:hover { background: #0f1a2a; }
tbody tr { border: none !important; }
tbody td { border: none !important; }
thead tr { border: none !important; }
thead th { border: none !important; }
  .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 16px; 
    background:#0e1828; 
    color: var(--text); 
    border:1px solid var(--border-soft) !important; 
    border-radius:8px; 
    outline: none; 
    font-size: 14px;
    transition: all 0.2s ease;
  }
  input::placeholder, textarea::placeholder { color: #7f8ba3; }
  input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(20,149,208,0.15);
    outline: none;
    background: #0f1a2a;
  }

  /* File upload styling */
  input[type=file] {
    width: 100%;
    padding: 12px 16px;
    background: #0e1828;
    color: var(--text);
    border: 1px solid var(--border-soft) !important;
    border-radius: 8px;
    outline: none;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  input[type=file]:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px rgba(20,149,208,0.15);
    background: #0f1a2a;
  }
  input[type=file]::file-selector-button {
    background: var(--brand-500);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    margin-right: 12px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s ease;
  }
  input[type=file]::file-selector-button:hover {
    background: var(--brand-700);
    transform: translateY(-1px);
  }

  /* Checkbox styling */
  input[type=checkbox] {
    width: 18px;
    height: 18px;
    accent-color: var(--brand-500);
    margin-right: 8px;
    cursor: pointer;
  }

  /* Form labels */
  label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--text);
    font-size: 14px;
  }

  /* Table row actions */
  .row-actions {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
  }

  /* TinyMCE styling */
  .tox-tinymce {
    border: 1px solid var(--border-soft) !important;
    border-radius: 8px !important;
    background: #0e1828 !important;
  }
  .tox .tox-editor-header {
    background: #0f1a2a !important;
    border-bottom: 1px solid var(--border-soft) !important;
  }
  .tox .tox-toolbar {
    background: #0f1a2a !important;
  }
  .tox .tox-edit-area__iframe {
    background: #ffffff !important;
  }
  .tox .tox-button {
    color: var(--text) !important;
  }
  .tox .tox-button:hover {
    background: var(--border-soft) !important;
  }

  .form-row { margin-bottom:14px; }
.flash { background:#0f2a18; border:1px solid #1f4a30; padding:10px 12px; border-radius:8px; margin-bottom:12px; color:#c6f3d3; }
.flash.success { background:#0f2a18; border:1px solid #1f4a30; 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; }
  }