/* ── System font stacks (no downloads needed) ── */


:root{
    --ink:#14161f;
    --ink-2:#1c1f2c;
    --paper:#f6f1e6;
    --paper-dim:#e9e2d1;
    --clay:#c1443a;
    --clay-soft:#e8b3ac;
    --gold:#c9a24b;
    --gold-soft:#e6d2a0;
    --slate:#8b92a8;
    --line: rgba(246,241,230,0.14);
    --line-soft: rgba(246,241,230,0.08);
    --bg-g1: #1d2133;
    --bg-g2: #201a1e;
    --overlay-bg: rgba(10,11,16,0.72);
    --tag-blue: #60a5fa;
    --tag-blue-bg: rgba(59, 130, 246, 0.15);
    --tag-blue-border: rgba(96, 165, 250, 0.3);
    --tag-red: #fb7185;
    --tag-red-bg: rgba(244, 63, 94, 0.15);
    --tag-red-border: rgba(251, 113, 133, 0.3);
  }
  :root[data-theme="light"] {
    --ink: #f6f1e6;
    --ink-2: #ffffff;
    --paper: #14161f;
    --paper-dim: #2a2e40;
    --clay: #c1443a;
    --clay-soft: #a83a31;
    --gold: #b38b36;
    --gold-soft: #8a6c2e;
    --slate: #5b6178;
    --line: rgba(20,22,31,0.14);
    --line-soft: rgba(20,22,31,0.08);
    --bg-g1: #e9e2d1;
    --bg-g2: #f0e6d8;
    --overlay-bg: rgba(246,241,230,0.72);
    --tag-blue: #1d4ed8;
    --tag-blue-bg: #eff6ff;
    --tag-blue-border: #bfdbfe;
    --tag-red: #be123c;
    --tag-red-bg: #fff1f2;
    --tag-red-border: #fecdd3;
  }
  .theme-toggle {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: 1px solid var(--line);
    color: var(--slate);
    border-radius: 50%;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    z-index: 999;
  }
  .theme-toggle:hover {
    border-color: var(--gold);
    color: var(--gold);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}

  body{
    margin:0;
    min-height:100vh;
    background:
      radial-gradient(1100px 700px at 15% -10%, var(--bg-g1) 0%, transparent 60%),
      radial-gradient(900px 600px at 110% 10%, var(--bg-g2) 0%, transparent 55%),
      var(--ink);
    color:var(--paper);
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    padding: clamp(20px, 5vw, 64px) clamp(16px, 4vw, 20px) 80px;
    display:flex;
    flex-direction:column;
    align-items:center;
    position:relative;
    overflow-x:hidden;
  }

  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image: repeating-linear-gradient(180deg, var(--line-soft) 0px, var(--line-soft) 1px, transparent 1px, transparent 84px);
    opacity:0.5;
    z-index:0;
  }

  .stage{
    width:100%;
    max-width:720px;
    position:relative;
    z-index:1;
  }

  /* ---------- HERO ---------- */
  .hero{
    text-align:center;
    margin-bottom:clamp(24px,4vw,36px);
  }

  .hero-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:11px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:14px;
  }
  .hero-eyebrow .dash{
    width:22px;height:1px;background:var(--gold);opacity:0.6;
  }

  .hero h1{
    font-family:Georgia,'Times New Roman',serif;
    font-weight:600;
    font-size:clamp(2.2rem, 5vw, 3.2rem);
    line-height:1.08;
    margin:0 0 10px;
    letter-spacing:-0.01em;
  }
  .hero h1 em{
    font-style:italic;
    font-weight:500;
    color:var(--clay);
  }

  .hero p{
    color:var(--slate);
    font-size:15px;
    line-height:1.6;
    max-width:480px;
    margin:0 auto;
  }

  /* ---------- SEARCH ---------- */
  .dig-form{
    margin-top:24px;
    display:flex;
    justify-content:center;
  }

  .dig-shell{
    position:relative;
    width:100%;
    max-width:480px;
    display:flex;
    align-items:center;
    gap:8px;
    background: var(--ink-2);
    border:1px solid var(--line);
    border-radius:14px;
    padding: 0 0 0 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .dig-shell:focus-within{
    border-color: var(--clay);
    box-shadow: 0 0 0 4px var(--line);
  }

  .dig-shell input{
    flex:1;
    background:none;
    border:none;
    outline:none;
    color:var(--paper);
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:16px;
    padding:13px 0;
  }
  .dig-shell input::placeholder{ color:var(--slate); }

  .dig-shell button{
    flex-shrink: 0;
    background: var(--clay);
    color: #fff;
    border: none;
    border-radius: 0 8px 8px 0;
    padding: 16px 24px;
    font-family: system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    cursor: pointer;
    display: flex;
    transition: background .18s ease, transform .12s ease;
  }
  .dig-shell button:hover{ background:#a83a31; }
  .dig-shell button:active{ transform:translateY(0); }
  .dig-shell button svg{ width:15px;height:15px; }

  /* ---------- STATUS ---------- */
  .status-wrap{
    display:none;
    align-items:center;
    justify-content:center;
    gap:12px;
    padding:32px 0;
    color:var(--slate);
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:13px;
  }
  .status-wrap.show{ display:flex; }
  .spade{
    width:16px;height:16px;
    border:2px solid var(--gold);
    border-top-color:transparent;
    border-radius:50%;
    animation:spin 0.8s linear infinite;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .error-wrap{
    display:none;
    text-align:center;
    padding:32px 24px;
    margin-top:24px;
    border:1px dashed var(--clay);
    border-radius:14px;
    background: var(--ink-2);
    color:var(--clay-soft);
    font-size:14.5px;
    line-height:1.6;
  }
  .error-wrap.show{ display:block; }
  .error-wrap strong{ color:var(--paper); }

  /* ---------- RESULT CARD ---------- */
  .result{
    display:none;
    margin-top:36px;
    animation: rise .45s cubic-bezier(.19,1,.22,1);
  }
  .result.show{ display:block; }

  @keyframes rise{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

  .word-head{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:14px 24px;
    padding-bottom:22px;
    border-bottom:1px solid var(--line);
    margin-bottom:26px;
  }

  .word-name{
    font-family:Georgia,'Times New Roman',serif;
    font-weight:700;
    font-size:clamp(2.4rem,7vw,3.4rem);
    line-height:1;
    letter-spacing:-0.01em;
    text-transform:lowercase;
    margin:0;
  }

  .word-meta{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    color:var(--gold);
    font-size:14px;
    text-align:right;
  }
  .word-meta .syll{ color:var(--slate); font-size:12.5px; letter-spacing:0.03em; }

  /* ---------- STRATA ---------- */
  .strata-title, .section-title{
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.16em;
    text-transform:uppercase;
    color:var(--slate);
    margin:0 0 14px;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .strata-title::after, .section-title::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }

  .strata{
    display:flex;
    flex-direction:column;
    margin-bottom:34px;
  }
  .stratum{
    position:relative;
    padding:14px 0 14px 26px;
    border-left:2px solid var(--paper-dim);
    margin-left:5px;
  }
  .stratum:not(:last-child){ border-left-color: var(--line); }
  .stratum::before{
    content:"";
    position:absolute;
    left:-7px; top:18px;
    width:12px;height:12px;
    border-radius:50%;
    background:var(--gold);
    border:2px solid var(--ink);
  }
  .stratum .era{
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:11.5px;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:4px;
  }
  .stratum .era-text{
    font-size:14.5px;
    color:var(--paper);
    line-height:1.55;
  }

  /* ---------- MEANINGS ---------- */
  .meanings{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:8px;
  }

  .meaning-row{
    display:flex;
    align-items:flex-start;
    gap:16px;
    padding:16px 0;
    border-top:1px solid var(--line-soft);
  }
  .meaning-row:first-child{ border-top:none; }

  .meaning-tag{
    flex-shrink:0;
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:10.5px;
    letter-spacing:0.05em;
    text-transform:uppercase;
    color:var(--clay);
    padding-top:3px;
    line-height:1.5;
  }
  .meaning-tag.plain{ color:var(--slate); }

  .meaning-content{
    flex:1;
    min-width:0;
  }

  .meaning-text-wrap{
    display:flex;
    align-items:flex-start;
    gap:6px;
  }

  .meaning-text{
    flex:1;
    font-size:15.5px;
    line-height:1.65;
    color:var(--paper);
  }

  .quote{
    margin-top:10px;
    padding-left:16px;
    border-left:2px solid var(--gold-soft);
    font-family:Georgia,'Times New Roman',serif;
    font-style:italic;
    font-weight:500;
    font-size:14.5px;
    line-height:1.6;
    color:var(--slate);
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px;
  }
  .quote .quote-text{
    font-style:italic;
  }
  .quote .who{
    display:inline-block;
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-style:normal;
    font-size:11px;
    letter-spacing:0.04em;
    color:var(--slate);
    text-transform:none;
  }
  .quote .who::before{ content:"— "; }

  /* Inline TTS Buttons (Definitions & Examples) */
  .tts-inline-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border-radius:50%;
    background:var(--ink-2);
    border:1px solid var(--line);
    color:var(--slate);
    cursor:pointer;
    padding:0;
    margin-left:6px;
    flex-shrink:0;
    vertical-align:middle;
    transition:all .18s ease;
  }
  .tts-inline-btn:hover {
    border-color:var(--gold);
    color:var(--gold);
    transform:scale(1.08);
  }
  .tts-inline-btn.speaking {
    color:var(--clay);
    border-color:var(--clay);
    animation:ttsPulse 1.2s infinite ease-in-out;
  }
  .tts-inline-btn svg {
    width:13px;
    height:13px;
  }
  .quote-tts-btn {
    margin-left:4px;
    width:22px;
    height:22px;
  }
  .quote-tts-btn svg {
    width:12px;
    height:12px;
  }

  /* ---------- ACTION BUTTONS ---------- */
  .word-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    vertical-align: middle;
  }
  .action-btn {
    background: var(--ink-2);
    border: 1px solid var(--line);
    color: var(--slate);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease;
    padding: 0;
  }
  .action-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-1px);
  }
  .action-btn.speaking {
    color: var(--clay);
    border-color: var(--clay);
    animation: ttsPulse 1.2s infinite ease-in-out;
  }
  @keyframes ttsPulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(193, 68, 58, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(193, 68, 58, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(193, 68, 58, 0); }
  }
  .action-btn svg { width: 17px; height: 17px; }

  /* ---------- THESAURUS (EŞ & ZIT ANLAMLILAR) ---------- */
  .thesaurus-wrap {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }

  .thesaurus-card {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 18px 20px;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .thesaurus-card:hover {
    border-color: var(--line-soft);
  }

  .thesaurus-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .thesaurus-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 15.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--paper);
  }

  .thesaurus-badge-count {
    font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', 'Roboto Mono', monospace;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: var(--line);
    color: var(--slate);
  }

  .tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .tag {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    text-decoration: none;
    transition: all .2s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid transparent;
    user-select: none;
  }

  .tag.syn-tag {
    background: var(--tag-blue-bg);
    color: var(--tag-blue);
    border-color: var(--tag-blue-border);
  }
  .tag.syn-tag:hover, .tag.syn-tag:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25);
  }

  .tag.ant-tag {
    background: var(--tag-red-bg);
    color: var(--tag-red);
    border-color: var(--tag-red-border);
  }
  .tag.ant-tag:hover, .tag.ant-tag:focus-visible {
    transform: translateY(-2px);
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(244, 63, 94, 0.25);
  }

  .tag-expand-btn {
    background: transparent;
    border: 1px dashed var(--line);
    color: var(--slate);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all .15s ease;
  }
  .tag-expand-btn:hover {
    color: var(--paper);
    border-color: var(--gold);
  }

  /* ---------- WORD WEB & CHIPS ---------- */
  .web-wrap, .featured-wrap{
    margin-top:36px;
  }
  .web-grid, .featured-grid{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
  }
  .web-chip{
    background: var(--ink-2);
    border:1px solid var(--line);
    color:var(--slate);
    padding:8px 15px;
    border-radius:20px;
    font-size:13.5px;
    cursor:pointer;
    transition: all .15s ease;
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    text-decoration:none;
    display:inline-block;
  }
  .web-chip:hover{
    border-color:var(--clay);
    color:var(--paper);
    background: var(--ink-2);
    transform:translateY(-1px);
  }

  /* ---------- ABOUT ---------- */
  .about-wrap{
    margin-top:40px;
    padding:22px 24px;
    background: var(--ink-2);
    border:1px solid var(--line);
    border-radius:14px;
  }
  .about-wrap .section-title{
    margin-bottom:12px;
  }
  .about-wrap p{
    margin:0;
    font-size:14.5px;
    line-height:1.75;
    color:var(--slate);
  }
  .about-wrap strong{
    color:var(--paper);
    font-weight:700;
  }

  /* ---------- FAQ ---------- */
  .faq-wrap{
    margin-top:36px;
  }
  .faq-list{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .faq-item{
    background: var(--ink-2);
    border:1px solid var(--line);
    border-radius:14px;
    overflow:hidden;
    transition: border-color .2s ease;
  }
  .faq-item:hover{
    border-color: var(--line-soft);
  }
  .faq-item[open]{
    border-color: var(--gold-soft);
  }
  .faq-item summary{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:16px 20px;
    cursor:pointer;
    list-style:none;
    user-select:none;
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    font-weight:700;
    font-size:14.5px;
    color:var(--paper);
    transition: color .15s ease;
  }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-item summary:hover{ color:var(--clay); }
  .faq-item summary::after{
    content:"+";
    flex-shrink:0;
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--line);
    border-radius:50%;
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:15px;
    line-height:1;
    color:var(--gold);
    transition: transform .25s cubic-bezier(.19,1,.22,1), border-color .2s ease;
  }
  .faq-item[open] summary::after{
    content:"−";
    transform:rotate(180deg);
    border-color:var(--gold);
  }
  .faq-item p{
    margin:0;
    padding:0 20px 18px;
    font-size:14px;
    line-height:1.7;
    color:var(--slate);
    animation: rise .3s cubic-bezier(.19,1,.22,1);
  }

  /* ---------- FOOTER ---------- */
  .attribution{
    margin-top:56px;
    text-align:center;
    font-size:12px;
    color:var(--slate);
    line-height:1.7;
  }
  .attribution a{ color:var(--slate); text-decoration:underline; text-underline-offset:3px; }
  .attribution a:hover{ color:var(--paper); }
  .attribution .copyright{
    margin:10px 0 0;
    font-size:11px;
    color:var(--slate);
    opacity:0.75;
  }

  /* ---------- MODAL ---------- */
  body.modal-open {
    overflow: hidden !important;
    touch-action: none;
  }

  .modal-overlay{
    position:fixed;
    inset:0;
    background:var(--overlay-bg, rgba(10,11,16,0.72));
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    z-index:1000;
    overscroll-behavior: contain;
  }
  .modal-overlay.show{ display:flex; }

  .modal-card{
    width:100%;
    max-width:520px;
    max-height:min(85vh, calc(100dvh - 36px));
    display:flex;
    flex-direction:column;
    background: var(--ink-2);
    border:1px solid var(--line);
    border-radius:18px;
    padding:24px 24px 20px;
    position:relative;
    box-shadow: 0 20px 48px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line);
    animation: pop .25s cubic-bezier(.19,1,.22,1);
    overflow:hidden;
  }
  @keyframes pop{
    from{ opacity:0; transform:scale(.96) translateY(8px); }
    to{ opacity:1; transform:scale(1) translateY(0); }
  }

  .modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-shrink: 0;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
  }

  .modal-head-left {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    min-width: 0;
    flex: 1;
  }

  .modal-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 0;
  }

  .modal-close{
    width:32px; height:32px;
    border-radius:50%;
    background:none;
    border:1px solid var(--line);
    color:var(--slate);
    font-size:18px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition: all .15s ease;
    flex-shrink: 0;
    padding: 0;
  }
  .modal-close:hover{ border-color:var(--clay); color:var(--paper); }

  .modal-word{
    font-family:Georgia,'Times New Roman',serif;
    font-weight:700;
    font-size:1.8rem;
    line-height: 1.2;
    text-transform:lowercase;
    margin:0;
    color: var(--paper);
    word-break: break-word;
  }

  .modal-body{
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding-right: 6px;
    font-size:14.5px;
    line-height:1.7;
    color:var(--paper);
  }

  .modal-body::-webkit-scrollbar{ width:5px; }
  .modal-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

  .modal-loading{
    display:flex;
    align-items:center;
    gap:10px;
    color:var(--slate);
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:12.5px;
    padding: 12px 0;
  }

  .modal-meanings-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
  }

  .modal-meaning-item {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--paper);
  }

  .modal-meaning-header {
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
    line-height: 1.6;
  }

  .modal-meaning-num {
    font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', 'Roboto Mono', monospace;
    font-weight: 600;
    color: var(--gold);
    margin-right: 2px;
  }

  .modal-meaning-tag {
    font-size: 11px;
    font-style: italic;
    color: var(--slate);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    padding: 1px 6px;
    border-radius: 4px;
    margin-right: 2px;
  }

  .modal-meaning-text {
    color: var(--paper);
    flex: 1;
  }

  .modal-meaning-quote {
    font-style: italic;
    color: var(--slate);
    font-size: 13.5px;
    margin-top: 6px;
    padding-left: 10px;
    border-left: 2px solid var(--clay);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  .modal-meaning-who {
    font-style: normal;
    color: var(--slate);
    font-size: 12px;
  }

  .modal-not-found {
    color: var(--slate);
    font-size: 14px;
    margin-bottom: 12px;
    padding: 12px 0;
  }

  .modal-footer {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px dashed var(--line);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }

  .modal-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--paper);
    background: var(--ink, #121318);
    border: 1px solid var(--line);
    padding: 8px 16px;
    border-radius: 8px;
    font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', 'Roboto Mono', monospace;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all .2s ease;
  }

  .modal-open-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 175, 55, 0.08);
  }

  /* ---------- FOCUS / ACCESSIBILITY ---------- */
  button:focus-visible, input:focus-visible, a:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:2px;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
    html{ scroll-behavior:auto; }
  }

  @media (max-width:480px){
    .dig-shell{ padding-left:16px; }
    .word-head{ flex-direction:column; align-items:flex-start; }
    .word-meta{ text-align:left; }
    .meaning-row{ flex-direction:column; gap:6px; }
    .meaning-tag{ width:auto; }
    .modal-overlay{ padding: 12px; }
    .modal-card{ max-width: 100%; max-height: calc(100dvh - 24px); padding: 18px 18px 16px; border-radius: 14px; }
    .modal-head{ margin-bottom: 12px; padding-bottom: 10px; }
    .modal-word{ font-size: 1.5rem; }
    .about-wrap{ padding:18px 18px; }
    .faq-item summary{ padding:14px 16px; font-size:14px; }
    .faq-item p{ padding:0 16px 16px; }
  }

  .home-logo {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
    font-size: 2.4rem;
    color: var(--paper);
    text-decoration: none;
    letter-spacing: -0.01em;
    transition: color .15s ease;
  }
  .home-logo:hover { color: var(--clay); }

  /* ---------- OFFLINE PANEL ---------- */
  .offline-panel{
    margin-top:48px;
  }

  .offline-bar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:10px 16px;
    border-radius:10px;
    background:var(--clay);
    color:var(--ink);
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:12px;
    font-weight:600;
    margin-bottom:14px;
    animation: rise .35s cubic-bezier(.19,1,.22,1);
  }

  .storage-details{
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--ink-2);
    overflow:hidden;
  }

  .storage-details summary{
    padding:14px 20px;
    cursor:pointer;
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:13px;
    color:var(--slate);
    list-style:none;
    user-select:none;
    transition:color .15s ease;
  }
  .storage-details summary::-webkit-details-marker{ display:none; }
  .storage-details summary::after{
    content:'▸';
    float:right;
    transition:transform .2s ease;
  }
  .storage-details[open] summary::after{
    transform:rotate(90deg);
  }
  .storage-details summary:hover{ color:var(--paper); }

  .storage-body{
    padding:0 20px 18px;
  }

  .cache-info{
    font-size:14px;
    color:var(--paper);
    margin:0 0 14px;
  }
  .cache-info span{
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-weight:700;
    color:var(--gold);
  }

  .storage-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }

  .btn-action{
    font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:13px;
    font-weight:600;
    border:none;
    border-radius:8px;
    padding:9px 18px;
    cursor:pointer;
    transition:all .15s ease;
  }
  .btn-action:disabled{
    opacity:0.5;
    cursor:not-allowed;
  }

  .btn-download{
    background:var(--gold);
    color:var(--ink);
  }
  .btn-download:hover:not(:disabled){
    background:var(--gold-soft);
    transform:translateY(-1px);
  }

  .btn-clear{
    background:transparent;
    border:1px solid var(--line) !important;
    color:var(--slate);
  }
  .btn-clear:hover:not(:disabled){
    border-color:var(--clay) !important;
    color:var(--clay);
  }

  .btn-cancel{
    background:var(--clay);
    color:var(--paper);
    padding:6px 14px;
    font-size:12px;
  }
  .btn-cancel:hover{ background:#a83a31; }

  .dl-progress{
    margin-top:16px;
  }

  .dl-bar-track{
    width:100%;
    height:6px;
    background:var(--line);
    border-radius:3px;
    overflow:hidden;
  }

  .dl-bar-fill{
    height:100%;
    width:0%;
    background:linear-gradient(90deg, var(--gold), var(--clay));
    border-radius:3px;
    transition:width .3s ease;
  }

  .dl-info{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-top:10px;
    font-family:ui-monospace,'Cascadia Code','Segoe UI Mono','Roboto Mono',monospace;
    font-size:12px;
    color:var(--slate);
  }