/* HXF Flashcards v6 ── scoped to #hxf-root ── #121212 / #eaeaea / #338bc1 */
/* Strict 3-color palette. No greys. Bold fix included. */

#hxf-root,#hxf-root *{box-sizing:border-box !important;-webkit-font-smoothing:antialiased !important;}

#hxf-root{
    background:#121212 !important;
    color:#eaeaea !important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif !important;
    font-size:15px !important;
    line-height:1.5 !important;
    min-height:400px !important;
    width:100% !important;
    max-width:100% !important;
    padding:0 !important;
}
#hxf-root a{color:#338bc1 !important;}
#hxf-root button{font-family:inherit !important;cursor:pointer !important;}

/* ── BOLD FIX — override any theme/WP reset that greys out <b>/<strong> ── */
#hxf-root b,
#hxf-root strong{
    font-weight:700 !important;
    color:#eaeaea !important;
}

/* ── Views ─────────────────────────────────────────────────── */
#hxf-root .hxf-view{display:none;}
#hxf-root .hxf-view[style*="flex"]{flex-direction:column;min-height:480px;}

/* ── Shell ─────────────────────────────────────────────────── */
#hxf-root .hxf-shell{
    width:100% !important;
    max-width:680px !important;
    margin:0 auto !important;
    padding:44px 24px 80px !important;
    flex:1 !important;
}

/* ── Gate (logged-out state) ───────────────────────────────── */
#hxf-root .hxf-gate{
    max-width:480px !important;
    margin:60px auto !important;
    padding:48px 40px !important;
    background:#121212 !important;
    border:1px solid rgba(234,234,234,.08) !important;
    border-radius:16px !important;
    text-align:center !important;
}
#hxf-root .hxf-gate-icon{
    width:56px !important;
    height:56px !important;
    background:rgba(51,139,193,.1) !important;
    border:1px solid rgba(51,139,193,.2) !important;
    border-radius:50% !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin:0 auto 24px !important;
}
#hxf-root .hxf-gate-title{
    font-size:22px !important;
    font-weight:700 !important;
    color:#eaeaea !important;
    letter-spacing:-.02em !important;
    margin:0 0 12px !important;
    line-height:1.2 !important;
}
#hxf-root .hxf-gate-desc{
    font-size:14px !important;
    color:#eaeaea !important;
    opacity:.5 !important;
    line-height:1.7 !important;
    margin:0 0 32px !important;
}
#hxf-root .hxf-gate-btn{
    display:inline-block !important;
    background:#338bc1 !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:600 !important;
    padding:13px 32px !important;
    border-radius:10px !important;
    text-decoration:none !important;
    transition:opacity .2s !important;
    letter-spacing:.01em !important;
}
#hxf-root .hxf-gate-btn:hover{opacity:.85 !important;}

/* ── Truncation banner ─────────────────────────────────────── */
#hxf-root .hxf-truncate-banner{
    background:rgba(180,130,0,.1) !important;
    border:1px solid rgba(180,130,0,.2) !important;
    border-radius:10px !important;
    color:#c8a040 !important;
    font-size:13px !important;
    margin-bottom:20px !important;
    padding:10px 16px !important;
}

/* ── Back button (shared) ──────────────────────────────────── */
#hxf-root .hxf-back{
    background:transparent !important;
    border:none !important;
    color:#eaeaea !important;
    opacity:.4 !important;
    font-size:13px !important;
    font-weight:600 !important;
    padding:0 !important;
    margin-bottom:28px !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:6px !important;
    transition:opacity .15s !important;
}
#hxf-root .hxf-back:hover{opacity:1 !important;}


/* ════════════════════════════════════════════════════════════
   VIEW 1 — LIBRARY
════════════════════════════════════════════════════════════ */

#hxf-root .hxf-lib-header{margin-bottom:24px !important;}
#hxf-root .hxf-lib-title{
    font-size:26px !important;font-weight:700 !important;
    color:#eaeaea !important;letter-spacing:-.02em !important;
    margin:0 0 4px !important;line-height:1.1 !important;
}
#hxf-root .hxf-lib-sub{
    font-size:13px !important;
    color:#eaeaea !important;
    opacity:.4 !important;
    margin:0 !important;
}

/* toolbar */
#hxf-root .hxf-toolbar{
    display:flex !important;gap:8px !important;
    margin-bottom:18px !important;align-items:center !important;
}
#hxf-root .hxf-search{flex:1 !important;position:relative !important;}
#hxf-root .hxf-search svg{
    position:absolute !important;left:14px !important;top:50% !important;
    transform:translateY(-50%) !important;pointer-events:none !important;
    color:#eaeaea !important;opacity:.3 !important;
}
#hxf-root .hxf-search input{
    width:100% !important;background:#121212 !important;
    border:1px solid rgba(234,234,234,.1) !important;border-radius:10px !important;
    padding:10px 14px 10px 40px !important;font-size:14px !important;
    color:#eaeaea !important;outline:none !important;
    transition:border-color .2s !important;font-family:inherit !important;display:block !important;
}
#hxf-root .hxf-search input::placeholder{color:#eaeaea !important;opacity:.25 !important;}
#hxf-root .hxf-search input:focus{border-color:#338bc1 !important;}

#hxf-root .hxf-filters{display:flex !important;gap:5px !important;}
#hxf-root .hxf-filter{
    background:#121212 !important;border:1px solid rgba(234,234,234,.1) !important;
    color:#eaeaea !important;opacity:.5 !important;font-size:12px !important;font-weight:600 !important;
    padding:8px 14px !important;border-radius:8px !important;
    transition:all .15s !important;white-space:nowrap !important;
}
#hxf-root .hxf-filter:hover{border-color:#338bc1 !important;color:#338bc1 !important;opacity:1 !important;}
#hxf-root .hxf-filter.on{background:#338bc1 !important;border-color:#338bc1 !important;color:#fff !important;opacity:1 !important;}

/* deck grid — single column, cards stack */
#hxf-root .hxf-deck-grid{
    display:flex !important;flex-direction:column !important;gap:8px !important;
}

/* deck card */
#hxf-root .hxf-dc{
    background:#121212 !important;
    border:1px solid rgba(234,234,234,.08) !important;
    border-radius:12px !important;
    padding:14px 16px !important;
    cursor:pointer !important;
    display:flex !important;flex-direction:column !important;gap:10px !important;
    text-align:left !important;width:100% !important;
    transition:border-color .2s !important;
}
#hxf-root .hxf-dc:hover{border-color:#338bc1 !important;}

/* child deck — left border indent */
#hxf-root .hxf-dc.is-child{
    margin-left:18px !important;
    border-left:2px solid rgba(234,234,234,.06) !important;
    border-radius:8px 12px 12px 8px !important;
}
#hxf-root .hxf-dc.is-child:hover{border-left-color:#338bc1 !important;}

/* deck head */
#hxf-root .hxf-dc-head{
    display:flex !important;justify-content:space-between !important;
    align-items:center !important;gap:12px !important;
}
#hxf-root .hxf-dc-name{
    font-size:15px !important;font-weight:600 !important;
    color:#eaeaea !important;line-height:1.3 !important;flex:1 !important;
    transition:color .15s !important;
}
#hxf-root .hxf-dc:hover .hxf-dc-name{color:#338bc1 !important;}

#hxf-root .hxf-dc-badge{
    font-size:11px !important;font-weight:600 !important;
    padding:3px 8px !important;border-radius:6px !important;flex-shrink:0 !important;
}
#hxf-root .hxf-dc-badge.leaf{
    background:rgba(51,139,193,.12) !important;
    color:#338bc1 !important;
}
#hxf-root .hxf-dc-badge.parent{
    background:rgba(234,234,234,.05) !important;
    color:#eaeaea !important;
    opacity:.5 !important;
}

/* chips */
#hxf-root .hxf-dc-chips{display:flex !important;gap:6px !important;}
#hxf-root .hxf-chip{
    flex:1 !important;background:#121212 !important;
    border:1px solid rgba(234,234,234,.06) !important;
    border-radius:8px !important;padding:6px 8px !important;text-align:center !important;
}
#hxf-root .hxf-chip-val{
    display:block !important;font-size:17px !important;font-weight:700 !important;
    line-height:1 !important;margin-bottom:3px !important;
    font-variant-numeric:tabular-nums !important;color:#eaeaea !important;
}
#hxf-root .hxf-chip-lbl{
    display:block !important;font-size:9px !important;font-weight:700 !important;
    text-transform:uppercase !important;letter-spacing:.08em !important;
    color:#eaeaea !important;opacity:.35 !important;
}
#hxf-root .hxf-chip.c-new .hxf-chip-val{color:#338bc1 !important;}
#hxf-root .hxf-chip.c-due .hxf-chip-val{color:#338bc1 !important;}
#hxf-root .hxf-chip.c-tot .hxf-chip-val{color:#eaeaea !important;}

/* progress foot */
#hxf-root .hxf-dc-foot{display:flex !important;align-items:center !important;gap:8px !important;}
#hxf-root .hxf-dc-bar{
    flex:1 !important;height:3px !important;background:rgba(234,234,234,.08) !important;
    border-radius:2px !important;overflow:hidden !important;
}
#hxf-root .hxf-dc-bar-fill{
    height:100% !important;background:#338bc1 !important;border-radius:2px !important;
}
#hxf-root .hxf-dc-pct{
    font-size:11px !important;font-weight:600 !important;
    color:#eaeaea !important;opacity:.4 !important;
    min-width:30px !important;text-align:right !important;
}

#hxf-root .hxf-empty-state{
    text-align:center !important;padding:48px 20px !important;
    color:#eaeaea !important;opacity:.35 !important;font-size:14px !important;
}


/* ════════════════════════════════════════════════════════════
   VIEW 2 — MODE PICKER
════════════════════════════════════════════════════════════ */

#hxf-root .hxf-mode-deck-name{
    font-size:22px !important;font-weight:700 !important;
    color:#eaeaea !important;letter-spacing:-.02em !important;
    margin:0 0 6px !important;line-height:1.15 !important;
}
#hxf-root .hxf-mode-deck-stats{
    display:flex !important;gap:20px !important;flex-wrap:wrap !important;
    margin-bottom:24px !important;padding-bottom:20px !important;
    border-bottom:1px solid rgba(234,234,234,.07) !important;
}

#hxf-root .hxf-ms{display:flex !important;flex-direction:column !important;}
#hxf-root .hxf-ms-val{
    font-size:22px !important;font-weight:700 !important;
    line-height:1 !important;font-variant-numeric:tabular-nums !important;
    color:#eaeaea !important;
}
#hxf-root .hxf-ms-lbl{
    font-size:11px !important;color:#eaeaea !important;opacity:.4 !important;
    text-transform:uppercase !important;letter-spacing:.06em !important;margin-top:2px !important;
}

#hxf-root .hxf-section-lbl,#hxf-root p.hxf-section-lbl{
    font-size:10px !important;font-weight:700 !important;
    letter-spacing:.1em !important;text-transform:uppercase !important;
    color:#eaeaea !important;opacity:.35 !important;
    margin:0 0 10px !important;display:block !important;
}

/* mode buttons — single column radio-card */
#hxf-root .hxf-modes{
    display:flex !important;flex-direction:column !important;gap:6px !important;margin-bottom:20px !important;
}
#hxf-root .hxf-mode{
    background:#121212 !important;border:1px solid rgba(234,234,234,.08) !important;
    border-radius:10px !important;padding:12px 14px !important;
    text-align:left !important;cursor:pointer !important;
    display:flex !important;justify-content:space-between !important;align-items:center !important;
    transition:border-color .15s !important;
}
#hxf-root .hxf-mode:hover{border-color:#338bc1 !important;}
#hxf-root .hxf-mode.on{border-color:#338bc1 !important;background:rgba(51,139,193,.05) !important;}

#hxf-root .hxf-mode b{
    display:block !important;font-size:14px !important;font-weight:600 !important;
    color:#eaeaea !important;margin-bottom:2px !important;
}
#hxf-root .hxf-mode span{
    display:block !important;font-size:12px !important;
    color:#eaeaea !important;opacity:.4 !important;font-weight:400 !important;
}
#hxf-root .hxf-mode.on b{color:#338bc1 !important;}
#hxf-root .hxf-mode:hover b{color:#338bc1 !important;}

/* radio dot */
#hxf-root .hxf-mode-dot{
    width:9px !important;height:9px !important;border-radius:50% !important;
    border:2px solid rgba(234,234,234,.2) !important;flex-shrink:0 !important;margin-left:12px !important;
    transition:border-color .15s,background .15s !important;
}
#hxf-root .hxf-mode.on .hxf-mode-dot{border-color:#338bc1 !important;background:#338bc1 !important;}

/* options */
#hxf-root .hxf-opts{display:flex !important;gap:8px !important;margin-bottom:24px !important;}
#hxf-root .hxf-opt{
    background:#121212 !important;border:1px solid rgba(234,234,234,.08) !important;
    color:#eaeaea !important;opacity:.5 !important;font-size:12px !important;font-weight:600 !important;
    padding:8px 16px !important;border-radius:8px !important;transition:all .15s !important;
}
#hxf-root .hxf-opt:hover,#hxf-root .hxf-opt.on{
    border-color:#338bc1 !important;color:#338bc1 !important;
    opacity:1 !important;background:rgba(51,139,193,.07) !important;
}

/* start button */
#hxf-root .hxf-start{
    width:100% !important;background:#338bc1 !important;color:#fff !important;
    border:none !important;border-radius:12px !important;
    font-size:15px !important;font-weight:600 !important;padding:14px !important;
    transition:opacity .2s,transform .1s !important;
}
#hxf-root .hxf-start:hover{opacity:.85 !important;}
#hxf-root .hxf-start:active{transform:scale(.99) !important;}


/* ════════════════════════════════════════════════════════════
   VIEW 3 — STUDY
════════════════════════════════════════════════════════════ */

/* top bar */
#hxf-root .hxf-study-top{
    display:flex !important;justify-content:space-between !important;
    align-items:center !important;margin-bottom:12px !important;
}
#hxf-root .hxf-study-deck{
    font-size:13px !important;color:#eaeaea !important;opacity:.4 !important;
    overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;
}
#hxf-root .hxf-study-count{
    font-size:13px !important;font-weight:600 !important;
    color:#eaeaea !important;font-variant-numeric:tabular-nums !important;white-space:nowrap !important;
}

/* progress bar */
#hxf-root .hxf-prog-track{
    height:3px !important;background:rgba(234,234,234,.07) !important;
    border-radius:2px !important;margin-bottom:12px !important;overflow:hidden !important;
}
#hxf-root .hxf-prog-fill{
    height:100% !important;background:#338bc1 !important;border-radius:2px !important;
    transition:width .4s ease !important;
}

/* session stats pills */
#hxf-root .hxf-stats{display:flex !important;gap:8px !important;margin-bottom:16px !important;}
#hxf-root .hxf-stat{
    font-size:11px !important;font-weight:600 !important;
    padding:4px 10px !important;border-radius:6px !important;
}
#hxf-root .hxf-stat.s-new  {background:rgba(51,139,193,.12) !important;color:#338bc1 !important;}
#hxf-root .hxf-stat.s-learn{background:rgba(224,112,112,.12) !important;color:#e07070 !important;}
#hxf-root .hxf-stat.s-known{background:rgba(94,201,138,.12) !important;color:#5ec98a !important;}

/* ── THE CARD ── */
#hxf-root .hxf-card{
    background:#121212 !important;border:1px solid rgba(234,234,234,.08) !important;
    border-radius:14px !important;padding:20px !important;
    margin-bottom:16px !important;min-height:180px !important;
    position:relative !important;width:100% !important;
    display:flex !important;flex-direction:column !important;
    transition:border-color .3s !important;
}
#hxf-root .hxf-card.answered{
    border-color:rgba(51,139,193,.35) !important;
}

/* card top meta row */
#hxf-root .hxf-card-meta{
    display:flex !important;justify-content:space-between !important;
    align-items:center !important;margin-bottom:16px !important;
}
#hxf-root .hxf-card-label{
    font-size:10px !important;font-weight:700 !important;
    letter-spacing:.1em !important;text-transform:uppercase !important;
    color:#eaeaea !important;opacity:.35 !important;transition:opacity .3s !important;
}
#hxf-root .hxf-card.answered .hxf-card-label{color:#338bc1 !important;opacity:1 !important;}
#hxf-root .hxf-card-type{
    font-size:10px !important;color:#eaeaea !important;opacity:.35 !important;
    background:#121212 !important;border:1px solid rgba(234,234,234,.08) !important;
    padding:2px 8px !important;border-radius:5px !important;
}

/* question & answer content */
#hxf-root .hxf-q{
    font-size:17px !important;color:#eaeaea !important;
    line-height:1.7 !important;width:100% !important;
}
#hxf-root .hxf-ans-wrap{display:none;width:100%;}
#hxf-root .hxf-divider{
    border:none !important;border-top:1px solid rgba(234,234,234,.07) !important;margin:18px 0 !important;
}
#hxf-root .hxf-card.answered .hxf-divider{border-color:rgba(51,139,193,.15) !important;}
#hxf-root .hxf-ans-label{
    font-size:10px !important;font-weight:700 !important;
    letter-spacing:.1em !important;text-transform:uppercase !important;
    color:#338bc1 !important;display:block !important;margin-bottom:10px !important;
}
#hxf-root .hxf-ans{
    font-size:16px !important;color:#eaeaea !important;
    line-height:1.7 !important;width:100% !important;
}
#hxf-root .hxf-extra{
    margin-top:16px !important;padding:12px 14px !important;
    background:#121212 !important;border:1px solid rgba(234,234,234,.06) !important;
    border-radius:8px !important;font-size:13px !important;
    color:#eaeaea !important;line-height:1.7 !important;width:100% !important;
}
#hxf-root .hxf-extra-lbl{
    font-size:9px !important;font-weight:700 !important;
    letter-spacing:.1em !important;text-transform:uppercase !important;
    color:#338bc1 !important;display:block !important;margin-bottom:5px !important;
}
#hxf-root .hxf-tags{
    display:flex !important;flex-wrap:wrap !important;
    gap:5px !important;margin-top:14px !important;width:100% !important;
}
#hxf-root .hxf-tag{
    font-size:10px !important;font-weight:600 !important;
    color:#eaeaea !important;opacity:.4 !important;
    border:1px solid rgba(234,234,234,.1) !important;border-radius:5px !important;padding:2px 8px !important;
}

/* cloze */
#hxf-root .hxf-blank{
    display:inline-block !important;background:#338bc1 !important;
    color:#fff !important;border-radius:4px !important;
    padding:1px 8px !important;font-weight:700 !important;
}
#hxf-root .hxf-reveal{
    display:inline-block !important;background:rgba(94,201,138,.1) !important;
    color:#5ec98a !important;border:1px solid rgba(94,201,138,.25) !important;
    border-radius:4px !important;padding:1px 8px !important;font-weight:700 !important;
}
#hxf-root .hxf-dim{color:#eaeaea !important;}

/* occlusion */
#hxf-root .hxf-occl-wrap{position:relative !important;display:flex !important;justify-content:center !important;max-width:100% !important;}
#hxf-root .hxf-occl-wrap img{max-width:100% !important;height:auto !important;border-radius:8px !important;display:block !important;}
#hxf-root .hxf-occl-layer{position:absolute !important;inset:0 !important;pointer-events:none !important;}
#hxf-root .hxf-occl-layer svg{width:100% !important;height:100% !important;position:absolute !important;inset:0 !important;}
#hxf-root .hxf-occl-answer .hxf-occl-layer svg rect{fill:#5ec98a !important;opacity:.75 !important;}

/* HTML passthrough — bold fix also applied here */
/* Override Anki <font color/colour="..."> tags and inline style colors inside card content */
#hxf-root .hxf-q font,#hxf-root .hxf-ans font{color:#eaeaea !important;}
#hxf-root .hxf-q [color],#hxf-root .hxf-ans [color]{color:#eaeaea !important;}
#hxf-root .hxf-q [colour],#hxf-root .hxf-ans [colour]{color:#eaeaea !important;}
#hxf-root .hxf-q [style*="color"],#hxf-root .hxf-ans [style*="color"]{color:#eaeaea !important;}
#hxf-root .hxf-q b,#hxf-root .hxf-ans b,
#hxf-root .hxf-q strong,#hxf-root .hxf-ans strong{
    font-weight:700 !important;
    color:#eaeaea !important;
}
#hxf-root .hxf-q i,#hxf-root .hxf-ans i{font-style:italic !important;}
#hxf-root .hxf-q ul,#hxf-root .hxf-ans ul,
#hxf-root .hxf-q ol,#hxf-root .hxf-ans ol{padding-left:20px !important;margin:8px 0 !important;}
#hxf-root .hxf-q li,#hxf-root .hxf-ans li{margin-bottom:3px !important;}
#hxf-root .hxf-q table,#hxf-root .hxf-ans table{border-collapse:collapse !important;margin:10px 0 !important;font-size:13px !important;}
#hxf-root .hxf-q td,#hxf-root .hxf-ans td,
#hxf-root .hxf-q th,#hxf-root .hxf-ans th{border:1px solid rgba(234,234,234,.08) !important;padding:6px 10px !important;}
#hxf-root .hxf-q img,#hxf-root .hxf-ans img,#hxf-root .hxf-extra img{
    max-width:min(100%,480px) !important;height:auto !important;
    border-radius:8px !important;display:block !important;
    margin:12px auto !important;border:1px solid rgba(234,234,234,.08) !important;
}

/* show answer button */
#hxf-root .hxf-show-btn{
    display:block !important;width:100% !important;
    background:#338bc1 !important;color:#fff !important;
    border:none !important;border-radius:12px !important;
    font-size:15px !important;font-weight:600 !important;
    padding:14px !important;margin-bottom:12px !important;
    transition:opacity .2s,transform .1s !important;
}
#hxf-root .hxf-show-btn:hover{opacity:.85 !important;}
#hxf-root .hxf-show-btn:active{transform:scale(.99) !important;}

/* rating area */
#hxf-root .hxf-rating-wrap{width:100% !important;}
#hxf-root .hxf-rating-label{
    text-align:center !important;font-size:11px !important;font-weight:600 !important;
    color:#eaeaea !important;opacity:.4 !important;
    letter-spacing:.06em !important;text-transform:uppercase !important;
    margin-bottom:10px !important;
}
#hxf-root .hxf-ratings{
    display:grid !important;grid-template-columns:repeat(4,1fr) !important;
    gap:8px !important;margin-bottom:12px !important;
}
#hxf-root .hxf-rate{
    padding:12px 6px !important;border-radius:10px !important;
    font-size:13px !important;font-weight:700 !important;
    border:1px solid !important;display:flex !important;
    flex-direction:column !important;align-items:center !important;gap:3px !important;
    transition:filter .15s,transform .1s !important;
}
#hxf-root .hxf-rate:hover{filter:brightness(1.15) !important;}
#hxf-root .hxf-rate:active{transform:scale(.96) !important;}
#hxf-root .hxf-rate small{font-size:10px !important;font-weight:500 !important;opacity:.8 !important;}

#hxf-root .hxf-rate.again{background:rgba(224,112,112,.1) !important;border-color:rgba(224,112,112,.35) !important;color:#e07070 !important;}
#hxf-root .hxf-rate.hard {background:rgba(224,180,60,.1)  !important;border-color:rgba(224,180,60,.35)  !important;color:#e0b43c !important;}
#hxf-root .hxf-rate.good {background:rgba(51,139,193,.1)  !important;border-color:rgba(51,139,193,.35)  !important;color:#338bc1 !important;}
#hxf-root .hxf-rate.easy {background:rgba(94,201,138,.1)  !important;border-color:rgba(94,201,138,.35)  !important;color:#5ec98a !important;}

/* nav */
#hxf-root .hxf-nav{
    display:flex !important;align-items:center !important;
    justify-content:space-between !important;margin-bottom:10px !important;
}
#hxf-root .hxf-nav-btn{
    background:transparent !important;border:1px solid rgba(234,234,234,.08) !important;
    color:#eaeaea !important;opacity:.4 !important;
    width:36px !important;height:36px !important;border-radius:50% !important;font-size:14px !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    padding:0 !important;transition:border-color .15s,color .15s,opacity .15s !important;
}
#hxf-root .hxf-nav-btn:hover:not(:disabled){border-color:#338bc1 !important;color:#338bc1 !important;opacity:1 !important;}
#hxf-root .hxf-nav-btn:disabled{opacity:.15 !important;cursor:default !important;}
#hxf-root .hxf-nav-hint{font-size:11px !important;color:#eaeaea !important;opacity:.3 !important;}

/* keyboard hint */
#hxf-root .hxf-kbd-hint{
    text-align:center !important;font-size:10px !important;
    color:#eaeaea !important;opacity:.3 !important;margin:0 !important;
}
#hxf-root .hxf-kbd-hint kbd{
    display:inline-block !important;background:#121212 !important;
    border:1px solid rgba(234,234,234,.12) !important;border-radius:4px !important;
    padding:1px 5px !important;font-family:inherit !important;
    font-size:9px !important;color:#eaeaea !important;opacity:.5 !important;
}


/* ════════════════════════════════════════════════════════════
   VIEW 4 — DONE
════════════════════════════════════════════════════════════ */

#hxf-root .hxf-done{
    display:flex !important;flex-direction:column !important;
    align-items:center !important;text-align:center !important;padding:32px 0 !important;
}
#hxf-root .hxf-done-icon{
    width:56px !important;height:56px !important;
    background:rgba(51,139,193,.1) !important;
    border:2px solid #338bc1 !important;border-radius:50% !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    font-size:22px !important;color:#338bc1 !important;margin-bottom:20px !important;
}
#hxf-root .hxf-done h2{
    font-size:24px !important;font-weight:700 !important;
    color:#eaeaea !important;letter-spacing:-.02em !important;margin:0 0 6px !important;
}
#hxf-root .hxf-done-sub{
    font-size:14px !important;color:#eaeaea !important;
    opacity:.4 !important;margin:0 0 28px !important;
}
#hxf-root .hxf-done-stats{
    display:flex !important;gap:10px !important;
    justify-content:center !important;flex-wrap:wrap !important;margin-bottom:28px !important;
}
#hxf-root .hxf-done-stat{
    background:#121212 !important;border:1px solid rgba(234,234,234,.08) !important;
    border-radius:12px !important;padding:20px 24px !important;min-width:100px !important;
}
#hxf-root .hxf-done-num{
    font-size:32px !important;font-weight:700 !important;
    color:#eaeaea !important;
    line-height:1 !important;margin-bottom:5px !important;
}
#hxf-root .hxf-done-lbl{
    font-size:10px !important;font-weight:700 !important;color:#eaeaea !important;opacity:.4 !important;
    text-transform:uppercase !important;letter-spacing:.08em !important;
}
#hxf-root .hxf-done-actions{display:flex !important;gap:8px !important;flex-wrap:wrap !important;justify-content:center !important;}
#hxf-root .hxf-btn-primary{
    background:#338bc1 !important;color:#fff !important;border:none !important;
    border-radius:10px !important;font-size:14px !important;font-weight:600 !important;
    padding:12px 24px !important;transition:opacity .2s !important;
}
#hxf-root .hxf-btn-primary:hover{opacity:.85 !important;}
#hxf-root .hxf-btn-ghost{
    background:transparent !important;border:1px solid rgba(234,234,234,.1) !important;
    color:#eaeaea !important;opacity:.5 !important;
    border-radius:10px !important;font-size:14px !important;font-weight:600 !important;
    padding:12px 24px !important;transition:all .15s !important;
}
#hxf-root .hxf-btn-ghost:hover{border-color:#338bc1 !important;color:#338bc1 !important;opacity:1 !important;}


/* ════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════ */

@media(max-width:560px){
    #hxf-root .hxf-shell{padding:28px 14px 60px !important;}
    #hxf-root .hxf-toolbar{flex-direction:column !important;align-items:stretch !important;}
    #hxf-root .hxf-dc.is-child{margin-left:10px !important;}
    #hxf-root .hxf-q{font-size:16px !important;}
    #hxf-root .hxf-ans{font-size:15px !important;}
    #hxf-root .hxf-rate{font-size:12px !important;padding:10px 4px !important;}
    #hxf-root .hxf-done-stat{padding:16px 18px !important;min-width:85px !important;}
}

/* occlusion card header */
#hxf-root .hxf-occl-header{
    font-size:14px !important;font-weight:600 !important;
    color:#eaeaea !important;margin:0 0 10px !important;
}