:root {
      color-scheme: dark;
      --bg: #111820;
      --panel: #1b2631;
      --panel-raised: #24313d;
      --maroon: #702b3b;
      --tan: #e0c9a7;
      --text: #f4f0e9;
      --muted: #b6c0ca;
      --line: #34424e;
    }

    * { box-sizing: border-box; }
    body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Arial, sans-serif; }
    a { color: var(--tan); text-underline-offset: .2em; }
    :focus-visible { outline: 2px solid var(--tan); outline-offset: 4px; }
    [hidden] { display: none !important; }

    header {
      background: linear-gradient(120deg, #17222d, #4c202d);
      padding: 22px max(18px, calc((100% - 1144px) / 2));
      border-bottom: 1px solid #70404b;
    }
    .brand { display: flex; align-items: center; gap: 13px; }
    .crest {
      width: 54px; height: 54px; flex-shrink: 0; object-fit: cover;
      border-radius: 12px; border: 1px solid #5b4d49; background: #090e29;
    }
    .brand h1 { font-size: 19px; line-height: 1.3; margin: 2px 0 3px; }
    .sub { color: #d5c8bb; font-size: 12px; }
    .eyebrow { font-size: 11px; letter-spacing: 1.65px; color: var(--tan); font-weight: bold; }

    main { max-width: 1180px; margin: auto; padding: 26px 18px 50px; }
    .hero { display: flex; justify-content: space-between; align-items: end; gap: 15px; flex-wrap: wrap; }
    h2 { font-size: 26px; margin: 2px 0 5px; }
    .muted { color: var(--muted); }
    .status { margin: 4px 0 0; font-size: 13px; }
    .layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 16px; }
    .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 20px 0; }
    .stat, .panel, .story { background: var(--panel); border: 1px solid var(--line); border-radius: 13px; }
    .stat { padding: 15px; }
    .stat b { font-size: 22px; display: block; }
    .stat span { font-size: 11px; color: var(--muted); letter-spacing: .8px; }

    button, select, input {
      font: inherit; border-radius: 8px; border: 1px solid var(--line);
      padding: 10px 12px; background: var(--panel-raised); color: var(--text);
    }
    button { background: var(--maroon); border-color: #a16573; font-weight: bold; cursor: pointer; }
    button:disabled { opacity: .65; cursor: default; }
    .toolbar { display: flex; align-items: end; gap: 9px; flex-wrap: wrap; margin-bottom: 16px; }
    .toolbar label { display: grid; max-width: 100%; gap: 4px; color: var(--muted); font-size: 12px; }
    .toolbar .search { flex: 1; min-width: min(100%, 180px); }
    .toolbar label input, .toolbar label select { min-width: 0; font-size: 14px; }
    input::placeholder { color: var(--muted); }

    .section-head {
      display: flex; justify-content: space-between; align-items: baseline;
      flex-wrap: wrap; gap: 4px 12px; margin: 0 0 10px;
    }
    .section-head h3 { margin: 0; }
    #result-count { color: var(--muted); font-size: 12px; }
    .stories, .side-list { display: grid; gap: 10px; }
    .story { padding: 15px; overflow-wrap: anywhere; }
    .story h4 { margin: 0 0 8px; font-size: 17px; line-height: 1.35; }
    .story h4[lang="dv"] { font: 18px/1.75 Faruma, "MV Boli", "Noto Sans Thaana", sans-serif; }
    .story p { margin: 0 0 9px; color: #d1d8de; font-size: 13px; }
    .meta { display: flex; gap: 5px 9px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 12px; margin-bottom: 7px; }
    .tag { color: var(--tan); border: 1px solid #84636c; padding: 1px 7px; border-radius: 20px; }
    .story > a { font-size: 12px; }

    .panel { padding: 16px; margin-bottom: 13px; }
    .panel h3 { margin: 0 0 10px; font-size: 13px; color: var(--tan); letter-spacing: .85px; }
    .panel p { margin: 0 0 10px; font-size: 12px; }
    .panel p:last-child { margin-bottom: 0; }
    .side-item { padding: 10px; background: var(--panel-raised); border-radius: 8px; font-size: 12px; }
    .side-item b { display: block; }
    .side-item a { display: inline-block; margin-top: 4px; }
    details { font-size: 12px; }
    summary { color: var(--tan); cursor: pointer; font-weight: bold; }
    details ul { padding: 0; list-style: none; margin: 10px 0 0; }
    details li { padding: 6px 0; border-top: 1px solid var(--line); }
    details li small { display: block; font-size: 11px; color: var(--muted); }
    .feed-state { color: var(--muted); }
    .feed-error { color: #f0c888; }

    .empty { padding: 26px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--line); border-radius: 12px; }
    .notice { font-size: 12px; color: var(--muted); margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
    @media (max-width: 800px) { .layout { grid-template-columns: 1fr; } }
    @media (max-width: 480px) {
      .stats { gap: 7px; }
      .stat { padding: 9px; }
      .stat b { font-size: 18px; }
      .stat span { font-size: 10px; }
      .brand h1 { font-size: 16px; }
      .toolbar .search { flex-basis: 100%; }
    }