:root {
      --bg: #0b0e13;
      --panel: #11161d;
      --card: #141a22;
      --muted: #9fb0c3;
      --text: #eaf2ff;
      --brand: #e11d48;
      --accent: #1f7aec;
      --radius: 16px;
      --shadow: 0 6px 24px rgba(0, 0, 0, .25);
      --switch-on-bg: #174d2b;
      --switch-on-border: #1f6a3e;
      --switch-off-bg: #3b0f1a;
      --switch-off-border: #5f1a2a;
    }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font: 16px/1.5 system-ui, sans-serif
    }

    .container {
      max-width: 1200px;
      margin: auto;
      padding: 24px
    }

    header {
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px
    }

    .title {
      font-size: clamp(20px, 3.5vw, 32px);
      font-weight: 700
    }

    .subtitle {
      color: var(--muted);
      font-size: 14px
    }

    /* Switch with inline label */
    .switch {
      --h: 36px;
      --knob: 26px;
      position: relative;
      display: inline-block;
      -webkit-user-select: none;
      user-select: none;
      cursor: pointer;
      border: none;
      background: none;
      padding: 20
    }

    .switch .track {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      height: var(--h);
       padding: 4px 15px 4px 52px;
       /* allow JS to nudge knob further right without changing layout width */
       --knob-right-boost: 0px;
      border-radius: 999px;
      border: 1px solid var(--switch-off-border);
      background: var(--switch-off-bg);
      transition: background .2s, border-color .2s, color .2s, padding .2s;
      box-shadow: 0 6px 24px rgba(0, 0, 0, .25)
    }

    .switch .txt {
      font-weight: 700;
      font-size: 14px;
      color: #ffe1e6;
      white-space: nowrap;
      margin-left: -15px;
      transition: transform .2s ease;
    }

    .switch .knob {
      position: absolute;
      top: 50%;
      left: 4px;
      width: var(--knob);
      height: var(--knob);
      border-radius: 50%;
      background: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
      transform: translateY(-50%);
      transition: left .2s
    }
        

    .switch[data-state="on"] .track {
      background: var(--switch-on-bg);
      border-color: var(--switch-on-border)
    }

    .switch[data-state="on"] .txt {
      color: #eaffef;
     /* push text ~20px further left when ON */
     transform: translateX(-35px);
   }

    /* when OFF, bias text slightly right to keep spacing from knob */
    .switch[data-state="off"] .txt {
      transform: translateX(5px);
    }



    /* Bring knob closer to the right edge when ON by reducing right padding */
    .switch[data-state="on"] .track {
       padding-right: 1px;
    }

    .switch:hover .track {
      filter: brightness(1.06)
    }

    /* Filters panel */
    .filters {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      background: var(--panel);
      border: 1px solid #1b2430;
      padding: 14px;
      border-radius: calc(var(--radius) + 4px);
      box-shadow: var(--shadow)
    }

    .filters .group {
      display: flex;
      gap: 12px;
      align-items: center;
      flex-wrap: wrap
    }

    .filters .hint {
      font-size: 14px;
      color: var(--muted);
      margin-right: 8px
    }

    /* Grid */
    .grid {
      display: grid;
      gap: 16px;
      margin-top: 16px
    }

    @media (min-width:640px) {
      .grid {
        grid-template-columns: repeat(2, 1fr)
      }
    }

    @media (min-width:1024px) {
      .grid {
        grid-template-columns: repeat(3, 1fr)
      }
    }

    /* Card */
    .card {
      position: relative;
      overflow: hidden;
      border-radius: var(--radius);
      border: 1px solid #1b2430;
      background: var(--card);
      box-shadow: var(--shadow);
      display: flex;
      flex-direction: column;
      min-height: 260px;
      transition: transform .2s, box-shadow .2s, border-color .2s
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 34px rgba(0, 0, 0, .35);
      border-color: #2a3a4f
    }

    .thumb {
      position: relative;
      aspect-ratio: 16/9;
      overflow: hidden;
      background: #0e1520
    }

    .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .placeholder {
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      background: repeating-linear-gradient(135deg, #0e1520, #0e1520 14px, #111b2b 14px, #111b2b 28px);
      color: #7c90a8;
      font-weight: 700;
      letter-spacing: .6px;
      text-transform: uppercase
    }

    .content {
      padding: 14px 14px 12px
    }

    .name {
      font-size: clamp(16px, 2.3vw, 20px);
      font-weight: 700;
      margin: 6px 0 2px
    }

    .datetime {
      font-size: 14px;
      color: var(--muted)
    }

    .desc {
      margin-top: 10px;
      color: #c9d6e6;
      font-size: 14px;
      max-height: 3.7em;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
      transition: max-height .2s
    }

    .card:hover .desc {
      max-height: 800px
    }

    .actions {
      display: flex;
      gap: 8px;
      margin: 12px 14px 16px
    }

    .btn {
      border: 1px solid #2a3a4f;
      background: #162033;
      color: #e7f0ff;
      border-radius: 10px;
      padding: 8px 10px;
      font-weight: 600;
      font-size: 14px;
      text-decoration: none;
      display: inline-flex;
      gap: 8px;
      align-items: center
    }

    .btn:focus {
      outline: 2px solid var(--accent);
      outline-offset: 2px
    }

    .badge-cat {
      position: absolute;
      top: 10px;
      left: 10px;
      background: rgba(0, 0, 0, .55);
      border: 1px solid rgba(255, 255, 255, .12);
      -webkit-backdrop-filter: blur(4px);
      backdrop-filter: blur(4px);
      color: #e9f1ff;
      font-weight: 700;
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 999px
    }

    .card[hidden] {
      display: none !important
    }

    @media (prefers-reduced-motion:reduce) {

      .card,
      .switch .track .knob {
        transition: none
      }
    }

    /* Detail overlay */
    .detail-overlay[hidden]{display:none !important}
    .detail-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;z-index:1000;padding:12px}
    .detail-modal{width:min(960px,96vw);max-height:92vh;overflow:hidden;background:var(--card);border:1px solid #1b2430;border-radius:var(--radius);box-shadow:0 18px 48px rgba(0,0,0,.45);position:relative;display:grid;grid-template-rows:auto 1fr}
    .detail-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:var(--panel);border-bottom:1px solid #1b2430}
    .detail-title{margin:0;font-size:clamp(18px,3.2vw,22px);font-weight:700}
    .detail-back,.detail-close{border:1px solid #2a3a4f;background:#162033;color:#e7f0ff;border-radius:10px;padding:6px 10px;font-weight:600;font-size:14px;cursor:pointer}
    .detail-back:focus,.detail-close:focus{outline:2px solid var(--accent);outline-offset:2px}
  .detail-body{display:grid;grid-template-columns:1fr;gap:12px;padding:12px;overflow:auto;grid-template-areas:"meta" "desc" "media"}
  .detail-media{grid-area:media}
  .detail-meta{grid-area:meta}
  .detail-description{grid-area:desc}
  @media(min-width:800px){.detail-body{grid-template-columns:1.2fr 1fr;grid-template-areas:"meta media" "desc media";align-items:start}}
    .detail-media img{width:100%;height:auto;display:block;border-radius:12px}
  .detail-meta{color:var(--muted);display:grid;gap:8px;margin:4px 0 8px}
  .detail-name{font-weight:800;color:#fff;font-size:clamp(20px,2.6vw,26px);margin-bottom:4px;line-height:1.2}
  .detail-datetime{color:#fff;font-weight:700;font-size:clamp(16px,2.1vw,20px)}
  .detail-place{color:#e7f0ff;font-weight:600;font-size:clamp(15px,2vw,19px)}
  .detail-category{display:none!important}
  .detail-description{color:#c9d6e6;font-size:15px;line-height:1.6}
  .detail-meta .detail-datetime,.detail-meta .detail-place{display:flex;align-items:center;gap:10px}
  .detail-meta .icon{width:36px;height:36px;flex:0 0 36px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(135deg,#1a2735,#12202e);border:1px solid #2a3a4f;box-shadow:0 4px 14px rgba(0,0,0,.35);color:#d3e2f4}
  .detail-meta .icon svg{width:20px;height:20px;display:block}
  @media (min-width:800px){.detail-meta .icon{width:42px;height:42px}.detail-meta .icon svg{width:22px;height:22px}}
    .detail-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:999px;border:1px solid #2a3a4f;background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;cursor:pointer}
    .detail-nav.prev{left:8px}
    .detail-nav.next{right:8px}
    .detail-nav:focus{outline:2px solid var(--accent);outline-offset:2px}

    /* Lightbox overlay */
    .lightbox-overlay[hidden]{display:none !important}
    .lightbox-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:2000;display:grid;place-items:center;padding:20px}
    .lightbox-close{position:absolute;top:16px;right:16px;width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.55);color:#fff;font-size:28px;display:grid;place-items:center;cursor:pointer;z-index:10}
    .lightbox-close:hover{background:rgba(0,0,0,.75);border-color:rgba(255,255,255,.4)}
    #lightboxImage{max-width:95vw;max-height:90vh;display:block;object-fit:contain;border-radius:8px;box-shadow:0 12px 48px rgba(0,0,0,.65)}
    .lightbox-counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);padding:8px 16px;background:rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.15);border-radius:999px;color:#fff;font-size:14px;font-weight:600}
    .lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:56px;height:56px;border-radius:50%;border:2px solid rgba(255,255,255,.2);background:rgba(0,0,0,.55);color:#fff;font-size:32px;display:grid;place-items:center;cursor:pointer}
    .lightbox-nav:hover{background:rgba(0,0,0,.75);border-color:rgba(255,255,255,.4)}
    .lightbox-nav:disabled{opacity:.3;cursor:not-allowed}
    .lightbox-nav.prev{left:24px}
    .lightbox-nav.next{right:24px}
    .lightbox-nav:focus,.lightbox-close:focus{outline:2px solid var(--accent);outline-offset:3px}