:root { --bg:#0b1220; --card:#12203a; --ink:#f4f1ea; --muted:#a8b3c7; --teal:#3ddc97; --line:#2a3f63; }
    body { margin:0; font-family: Arial, sans-serif; background:var(--bg); color:var(--ink); }
    header, footer, main { max-width: 980px; margin: 0 auto; padding: 16px 20px; }
    header a, nav a { color: var(--teal); text-decoration:none; font-weight:700; letter-spacing:.02em; }
    nav { font-size:13px; margin: 8px 0; display:flex; gap:12px; flex-wrap:wrap; }
    nav span { color: var(--muted); }
    h1 { font-size: 28px; margin: 12px 0 8px; }
    p, td, th, li { color: var(--muted); }
    table { width:100%; border-collapse: collapse; background:var(--card); }
    th, td { border:1px solid var(--line); padding:8px 10px; text-align:left; font-size:14px; }
    th { color:var(--ink); }
    .src { font-size:12px; color:#7b879c; }
    .badge { display:inline-block; padding:2px 8px; border:1px solid var(--line); border-radius:99px; font-size:12px; color:var(--teal); }
    .player { width:100%; aspect-ratio:16/9; background:#050912; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
    .player video, .player iframe { width:100%; height:100%; border:0; display:block; background:#050912; }
    .ok { color: var(--teal); }
    .no { color: #e06c75; }
    code { color: var(--teal); }
    .search { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:14px; margin:16px 0; }
    .search label { display:block; color:var(--ink); font-weight:700; margin-bottom:8px; }
    .search-row { display:flex; gap:8px; }
    .filter-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
    .filter-row label { color:var(--muted); font-size:13px; margin:0; }
    select { border:1px solid var(--line); border-radius:10px; background:#07101f; color:var(--ink); padding:8px 10px; }
    .related { margin-top:10px; border-left:2px solid var(--line); padding-left:10px; }
    .related strong { color:var(--ink); font-size:13px; }
    input { flex:1; min-width:0; border:1px solid var(--line); border-radius:10px; background:#07101f; color:var(--ink); padding:10px 12px; font-size:16px; }
    button { border:1px solid var(--teal); border-radius:10px; background:var(--teal); color:#07101f; font-weight:700; padding:10px 14px; cursor:pointer; }
    .results { padding-left:18px; }
    .results li { margin:0 0 18px; }
    .results a { color:var(--ink); font-weight:700; text-decoration:none; }
    .results p { margin:6px 0; }
    .news-article { background:rgba(18,32,58,.72); border:1px solid var(--line); border-radius:24px; padding:18px; box-shadow:0 24px 80px rgba(0,0,0,.28); }
    .article-hero { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:22px; align-items:stretch; margin-bottom:22px; }
    .hero-copy { padding:18px 4px; }
    .kicker { color:var(--teal); text-transform:uppercase; letter-spacing:.12em; font-weight:800; font-size:12px; margin:0 0 8px; }
    .lead { color:#dbe5f5; font-size:18px; line-height:1.65; }
    .hero-visual { margin:0; border:1px solid var(--line); border-radius:22px; overflow:hidden; background:#07101f; }
    .hero-visual img { width:100%; height:100%; min-height:260px; object-fit:cover; display:block; }
    .hero-visual figcaption { color:var(--muted); font-size:12px; padding:10px 12px; border-top:1px solid var(--line); }
    .fact-panel { background:linear-gradient(135deg, rgba(61,220,151,.14), rgba(64,112,244,.08)); border:1px solid rgba(61,220,151,.32); border-radius:18px; padding:14px 18px; margin:18px 0; }
    .fact-panel ul { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; padding-left:18px; }
    .article-body { max-width:760px; }
    .article-body p, .news-article section p, .side-panel p { font-size:16px; line-height:1.72; }
    .article-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start; }
    .side-panel, .editor-note, .faq details { background:#0d192d; border:1px solid var(--line); border-radius:16px; padding:14px; }
    .faq details { margin:10px 0; }
    .faq summary { color:var(--ink); cursor:pointer; font-weight:700; }
    .related-list a { color:var(--ink); }

    .home-hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr); gap:22px; align-items:stretch; background:linear-gradient(135deg, rgba(61,220,151,.12), rgba(18,32,58,.8)); border:1px solid var(--line); border-radius:28px; padding:24px; margin:10px 0 18px; }
    .home-hero h1 { font-size:42px; line-height:1.05; letter-spacing:-1.2px; margin:4px 0 12px; }
    .home-search { margin:0; align-self:center; }
    .section-strip { display:flex; gap:10px; flex-wrap:wrap; margin:18px 0; }
    .section-pill { background:#0d192d; color:var(--ink); border-color:var(--line); }
    .section-pill.active, .section-pill:hover { background:var(--teal); color:#07101f; border-color:var(--teal); }
    .section-heading { display:flex; justify-content:space-between; gap:18px; align-items:end; margin:18px 0 12px; }
    .section-heading h2 { margin:0; font-size:24px; }
    .section-heading p { margin:0; max-width:480px; text-align:right; }
    .news-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
    .news-card { position:relative; background:rgba(18,32,58,.78); border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:0 18px 50px rgba(0,0,0,.18); }
    .news-card[hidden] { display:none; }
    .card-media { display:block; aspect-ratio:16/9; background:#07101f; overflow:hidden; }
    .card-media img { width:100%; height:100%; display:block; object-fit:cover; transition:transform .2s ease; }
    .news-card:hover .card-media img { transform:scale(1.025); }
    .card-body { padding:14px 16px 16px; }
    .card-body h3 { margin:8px 0; font-size:19px; line-height:1.24; }
    .card-body h3 a { color:var(--ink); text-decoration:none; }
    .card-body p { margin:8px 0; }
    .play-badge { position:absolute; top:12px; right:12px; padding:8px 11px; box-shadow:0 12px 30px rgba(0,0,0,.32); }
    .article-modal[hidden], .video-modal[hidden] { display:none; }
    .article-modal, .video-modal { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:24px; }
    .modal-backdrop { position:absolute; inset:0; background:rgba(4,9,18,.72); backdrop-filter:blur(10px); }
    .modal-panel { position:relative; width:min(1180px,96vw); max-height:92vh; overflow:auto; background:rgba(11,18,32,.88); border:1px solid rgba(168,179,199,.28); border-radius:28px; box-shadow:0 30px 90px rgba(0,0,0,.55); padding:22px; }
    .video-panel { position:relative; width:min(980px,96vw); background:rgba(11,18,32,.92); border:1px solid rgba(168,179,199,.28); border-radius:24px; padding:18px; box-shadow:0 30px 90px rgba(0,0,0,.55); }
    .modal-close { position:absolute; top:12px; right:12px; z-index:2; width:38px; height:38px; border-radius:999px; padding:0; font-size:25px; line-height:1; }
    .modal-content { display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:22px; }
    .modal-article { min-width:0; }
    .modal-related { position:sticky; top:0; align-self:start; background:rgba(18,32,58,.78); border:1px solid var(--line); border-radius:20px; padding:16px; }
    .modal-related h2 { margin-top:0; font-size:18px; }
    .modal-related ul { padding-left:18px; }
    .modal-related li { margin:0 0 12px; }
    .modal-related a, .full-link { color:var(--teal); font-weight:700; text-decoration:none; }
    .modal-video-thumb { width:100%; height:100%; min-height:260px; border:0; border-radius:0; background:#07101f; color:var(--teal); display:grid; place-items:center; position:relative; padding:0; overflow:hidden; }
    .modal-video-thumb img { width:100%; height:100%; object-fit:cover; opacity:.72; }
    .modal-video-thumb span { position:absolute; width:74px; height:74px; border-radius:999px; display:grid; place-items:center; background:rgba(61,220,151,.95); color:#07101f; font-size:32px; box-shadow:0 14px 40px rgba(0,0,0,.4); }
    body.modal-open { overflow:hidden; }
    @media (max-width: 900px) { header, footer, main { max-width:100%; } .home-hero, .news-grid, .modal-content { grid-template-columns:1fr; } .section-heading { display:block; } .section-heading p { text-align:left; margin-top:6px; } .modal-related { position:static; } }
    @media (max-width: 820px) { .article-hero, .article-grid { grid-template-columns:1fr; } .fact-panel ul { grid-template-columns:1fr; } .news-article { padding:14px; border-radius:18px; } }