/* page overrides */
header { z-index: 200; gap: 16px; }

/* ── HEADER ── */

    /* ── HERO ── */
    .hero {
      text-align:center; padding:80px 20px 50px;
      background:radial-gradient(ellipse at 50% 0%,rgba(107,33,212,.15),transparent 60%);
      position:relative; overflow:hidden;
    }
    .hero-particles { position:absolute; inset:0; pointer-events:none; }

    /* ── SEARCH ── */
    .search-wrap { max-width:680px; margin:44px auto 0; padding:0 24px; position:relative; z-index:10; }
    .lang-toggle { display:flex; gap:8px; margin-bottom:12px; justify-content:flex-end; }
    .lang-btn {
      padding:6px 16px; background:transparent; border:1px solid rgba(107,33,212,.3);
      color:rgba(255,255,255,.4); cursor:pointer;
      font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px;
      transition:border-color .3s, color .3s, background .3s;
    }
    .lang-btn.active, .lang-btn:hover { border-color:var(--purple-light); color:#fff; background:rgba(107,33,212,.15); }
    .search-inner { display:flex; position:relative; }
    .search-input {
      flex:1; padding:18px 24px;
      background:rgba(255,255,255,.04); border:1px solid rgba(107,33,212,.4); border-right:none;
      color:#fff; font-family:'Space Mono',monospace; font-size:14px; letter-spacing:1px;
      outline:none; transition:border-color .3s, background .3s;
    }
    .search-input::placeholder { color:rgba(255,255,255,.2); }
    .search-input:focus { border-color:var(--purple-light); background:rgba(107,33,212,.05); }
    .search-btn {
      padding:18px 28px; background:var(--purple); border:1px solid var(--purple);
      color:#fff; cursor:pointer; font-family:'Bebas Neue',sans-serif; font-size:18px; letter-spacing:2px;
      transition:background .3s, box-shadow .3s; white-space:nowrap;
    }
    .search-btn:hover { background:var(--purple-light); box-shadow:0 0 30px rgba(107,33,212,.5); }
    .suggestions {
      position:absolute; top:100%; left:0; right:68px;
      background:rgba(8,4,20,.98); border:1px solid rgba(107,33,212,.35); border-top:none;
      z-index:300; display:none;
    }
    .suggestions.show { display:block; }
    .sugg-item {
      padding:12px 24px; cursor:pointer;
      font-size:13px; color:rgba(255,255,255,.65);
      border-bottom:1px solid rgba(107,33,212,.1);
      transition:background .2s, color .2s;
    }
    .sugg-item:last-child{ border-bottom:none; }
    .sugg-item:hover { background:rgba(107,33,212,.15); color:#fff; }

    /* Quick topics */
    .quick-topics { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; justify-content:center; }
    .topic-btn {
      padding:6px 16px; background:rgba(107,33,212,.08); border:1px solid rgba(107,33,212,.2);
      color:rgba(155,95,227,.7); cursor:pointer;
      font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px;
      transition:border-color .3s, color .3s, background .3s;
    }
    .topic-btn:hover { border-color:var(--purple-light); color:#fff; background:rgba(107,33,212,.18); }

    /* ── CONTENT ── */
    .content { max-width:900px; margin:60px auto; padding:0 24px 100px; }

    .state-idle { text-align:center; padding:60px 20px; }
    .state-idle-icon { font-size:72px; display:block; margin-bottom:20px; animation:idleFloat 3s ease-in-out infinite; }
    .state-idle-text { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:3px; color:rgba(255,255,255,.2); }
    .state-loading { text-align:center; padding:60px 20px; }
    .loading-ring { width:52px; height:52px; border-radius:50%; border:3px solid rgba(107,33,212,.2); border-top-color:var(--purple-light); animation:spin .8s linear infinite; margin:0 auto 20px; }
    .loading-text { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:3px; color:rgba(255,255,255,.3); animation:eyebBlink 1s ease-in-out infinite; }
    .state-error { text-align:center; padding:60px 20px; }
    .state-error-icon { font-size:56px; margin-bottom:16px; display:block; }
    .state-error-text { font-family:'Space Mono',monospace; font-size:11px; letter-spacing:2px; color:rgba(255,80,80,.6); }

    /* Article card */
    #articleCard { display:none; animation:cardEnter .6s cubic-bezier(.16,1,.3,1); }
    #articleCard.show { display:block; }
    @keyframes cardEnter{ from{opacity:0;transform:translateY(28px)} to{opacity:1;transform:translateY(0)} }

    .article-wrap {
      background:rgba(255,255,255,.025);
      border:1px solid rgba(107,33,212,.25);
      position:relative; overflow:hidden;
      margin-bottom:32px;
    }
    .article-wrap::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--purple),var(--purple-light),var(--gold)); }

    /* Image + header */
    .article-hero { display:grid; grid-template-columns:auto 1fr; }
    .article-img-wrap { width:220px; position:relative; overflow:hidden; }
    .article-img { width:100%; height:100%; object-fit:cover; filter:saturate(1.2) contrast(1.05); transition:transform .5s; }
    .article-img-wrap:hover .article-img { transform:scale(1.05); }
    .article-img-overlay { position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(6,6,8,.5)); }
    .article-no-img { width:220px; display:flex; align-items:center; justify-content:center; font-size:80px; background:rgba(107,33,212,.06); }
    .article-header { padding:36px 36px 28px; }
    .article-lang-badge { display:inline-block; padding:3px 12px; border:1px solid rgba(107,33,212,.3); font-family:'Space Mono',monospace; font-size:8px; letter-spacing:3px; color:rgba(155,95,227,.7); margin-bottom:14px; }
    .article-title { font-family:'Bebas Neue',sans-serif; font-size:clamp(32px,5vw,60px); color:var(--white); line-height:1; margin-bottom:12px; }
    .article-desc { font-family:'Space Mono',monospace; font-size:10px; letter-spacing:2px; color:rgba(255,255,255,.35); margin-bottom:0; }

    /* Body */
    .article-body { padding:28px 36px 36px; border-top:1px solid rgba(107,33,212,.1); }
    .article-text { font-size:15px; line-height:2; color:rgba(255,255,255,.75); margin-bottom:24px; }
    .article-link {
      display:inline-flex; align-items:center; gap:10px;
      padding:12px 28px; border:1px solid rgba(107,33,212,.35);
      text-decoration:none; color:var(--purple-light);
      font-family:'Space Mono',monospace; font-size:10px; letter-spacing:3px;
      transition:border-color .3s, color .3s, background .3s;
    }
    .article-link:hover { border-color:var(--purple-light); color:#fff; background:rgba(107,33,212,.12); }

    /* ya comment */
    .ya-comment {
      padding:28px 32px;
      background:rgba(107,33,212,.06); border-left:4px solid var(--purple);
      position:relative; overflow:hidden;
    }
    .ya-comment::before { content:'✌️'; position:absolute; right:20px; top:10px; font-size:56px; opacity:.06; }
    .ya-comment-label { font-family:'Space Mono',monospace; font-size:8px; letter-spacing:4px; color:var(--purple-light); text-transform:uppercase; margin-bottom:12px; display:block; }
    .ya-comment-text { font-size:clamp(14px,2vw,18px); line-height:1.8; color:var(--white); font-weight:700; }

    /* history */
    .history-wrap { margin-top:48px; }
    .history-title { font-family:'Bebas Neue',sans-serif; font-size:32px; color:var(--white); margin-bottom:20px; }
    .history-title span { color:var(--purple-light); }
    .history-list { display:flex; flex-wrap:wrap; gap:8px; }
    .history-item {
      padding:6px 16px; background:rgba(107,33,212,.06); border:1px solid rgba(107,33,212,.15);
      color:rgba(155,95,227,.7); cursor:pointer;
      font-family:'Space Mono',monospace; font-size:9px; letter-spacing:2px;
      transition:border-color .3s, color .3s;
    }
    .history-item:hover { border-color:var(--purple-light); color:#fff; }

    @media(max-width:700px){
      .article-hero{ grid-template-columns:1fr; }
      .article-img-wrap, .article-no-img{ width:100%; height:180px; }
      .article-header{ padding:24px 20px 16px; }
      .article-body{ padding:20px; }
    }

    /* ── FOOTER ── */