/* ============================================================
   Wapnick Search — Interface de recherche Q/R
   v1.2.0 — Redesign complet + pills gold/navy/blanc
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap');

/* ── CONTENEUR PRINCIPAL ── */
#wapnick-search {
    font-family: 'Lato', system-ui, sans-serif;
    color-scheme: light;
    display: flex;
    flex-direction: column;
    min-height: 540px;
    background: #dce6f4;
    border-radius: 16px;
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
    border: 1px solid rgba(255,255,255,0.9);
    box-shadow: 0 4px 24px rgba(15,45,94,0.1), 0 1px 4px rgba(15,45,94,0.06);
    transition: transform 0.22s, box-shadow 0.22s;
}
#wapnick-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(15,45,94,0.14), 0 2px 6px rgba(15,45,94,0.07);
}

/* ── TOPBAR ── */
.ws-top {
    background: #0f2d5e;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ws-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1a4480;
    border: 2px solid rgba(201,168,76,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #c9a84c;
    flex-shrink: 0;
    font-family: Georgia, serif;
    letter-spacing: 0.03em;
}

.ws-modes {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
}

.ws-mode-tab {
    position: relative;
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(232,213,163,0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
    user-select: none;
    border: none;
    background: transparent;
}
.ws-mode-tab i { font-size: 14px; flex-shrink: 0; }
.ws-mode-tab:hover { color: rgba(232,213,163,0.8); background: rgba(255,255,255,0.06); }
.ws-mode-tab.active { background: #1a4480; color: #e8d5a3; }
.ws-mode-tab.active i { color: #c9a84c; }

/* Tooltip */
.ws-mode-tab .ws-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    background: #0a1e3d;
    color: rgba(232,213,163,0.85);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: none;
    white-space: nowrap;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid rgba(201,168,76,0.2);
    pointer-events: none;
    display: none;
    z-index: 100;
}
.ws-mode-tab .ws-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    right: 16px;
    border: 5px solid transparent;
    border-bottom-color: rgba(201,168,76,0.2);
}
.ws-mode-tab:hover .ws-tooltip { display: block; }

.ws-tab-label { display: inline; }

/* ── ZONE RÉSULTATS ── */
.ws-results {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* ── ÉTAT ACCUEIL ── */
.ws-home { display: flex; flex-direction: column; gap: 24px; padding: 4px 0; }
.ws-home-title { font-size: 22px; font-weight: 600; color: #0f2d5e; text-align: center; margin: 0; }
.ws-home-title em { color: #c9a84c; font-style: normal; }



.ws-stat:hover { transform: translateY(-3px); box-shadow: 0 7px 20px rgba(15,45,94,0.13); }

.ws-stat span { font-size: 14px; text-transform: uppercase; letter-spacing: 0.1em; color: #7090b0; }

/* Suggestions */
.ws-suggestions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ws-sug {
    background: white;
    border: 1.5px solid white;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 14px;
    color: #1a4480;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15,45,94,0.07);
    transition: transform 0.18s, box-shadow 0.18s, background 0.15s, color 0.15s;
}
.ws-sug:hover {
    transform: translateY(-2px);
    background: #1a4480;
    color: white;
    border-color: white;
    box-shadow: 0 5px 16px rgba(15,45,94,0.15);
}

/* ── BARRE DE MODE (commune aux 3 modes) ── */
.ws-mode-bar {
    background: white;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid rgba(255,255,255,0.0) !important;
    box-shadow: 0 2px 12px rgba(15,45,94,0.09);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.ws-mode-bar:focus-within {
    border-color: #1a4480;
    box-shadow: 0 4px 14px rgba(15,45,94,0.12);
}
.ws-mode-bar.active { border-color: #1a4480; box-shadow: 0 4px 14px rgba(15,45,94,0.12); }
.ws-mode-input {
    flex: 1;
    border: none !important;
    border-bottom: none !important;
    outline: none !important;
    box-shadow: none !important;
    font-size: 14px;
    color: #1c2b3a;
    font-family: 'Lato', inherit;
    background: transparent;
    padding: 4px 0;
}
.ws-mode-input::placeholder { color: #9aaabb; }
.ws-mode-hint { font-size: 12px; color: #9aaabb; white-space: nowrap; flex-shrink: 0; }
.ws-mode-send {
    background: #0f2d5e;
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: white;
    font-size: 16px;
    transition: transform 0.18s, box-shadow 0.18s, background 0.15s;
}
.ws-mode-send:hover { background: #1a4480; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,45,94,0.22); }

/* ── HINT ── */
.ws-hint {
    background: rgba(255,255,255,0.6);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    color: #2a4a6a;
    line-height: 1.65;
}

/* ── LABELS SECTIONS ── */
.ws-section-head { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.ws-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1a4480;
    opacity: 0.5;
}
.ws-badge {
    font-size: 11px;
    background: #0f2d5e;
    color: #c9a84c;
    border-radius: 4px;
    padding: 2px 7px;
    font-weight: 700;
}
.ws-badge.sem { background: #1a4480; color: #e8d5a3; }

/* ── CARTES RÉSULTATS ── */
.ws-card {
    background: white;
    border-radius: 12px;
    padding: 14px 18px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    border: 1.5px solid white;
    box-shadow: 0 2px 8px rgba(15,45,94,0.07);
    transition: transform 0.18s, box-shadow 0.18s;
}
.ws-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(15,45,94,0.13); }
.ws-card.active { border-color: #1a4480; }
.ws-card-top { display: flex; align-items: flex-start; gap: 12px; }
.ws-num {
    font-size: 12px;
    font-weight: 700;
    color: #c9a84c;
    font-family: monospace;
    min-width: 36px;
    flex-shrink: 0;
    padding-top: 2px;
}
.ws-body { flex: 1; }
.ws-q { font-size: 14px; color: #0f2d5e; font-weight: 600; margin: 0 0 4px; line-height: 1.35; }
.ws-excerpt { font-size: 14px; color: #4a5a6a; line-height: 1.6; margin: 6px 0 0; padding-top: 6px; border-top: 1px solid #e4ecf7; }
.ws-excerpt mark { background: #fef3cd; color: #0f2d5e; border-radius: 3px; padding: 0 2px; font-weight: 600; }
.ws-score { font-size: 12px; color: #9aaabb; margin: 4px 0 0; }
.ws-chev-card { color: #c8d8ee; font-size: 20px; flex-shrink: 0; padding-top: 2px; transition: transform 0.2s; }
.ws-card.active .ws-chev-card { transform: rotate(90deg); }

/* ── DÉTAIL Q/R ── */
.ws-detail {
    background: white;
    border: 1.5px solid white;
    border-radius: 12px;
    padding: 16px 18px;
    display: none;
    flex-direction: column;
    gap: 12px;
    box-shadow: 0 2px 8px rgba(15,45,94,0.07);
}
.ws-detail.open { display: flex; }
.ws-detail-num { font-size: 12px; font-weight: 700; color: #c9a84c; font-family: monospace; }
.ws-detail-title { font-size: 14px; color: #0f2d5e; font-weight: 700; line-height: 1.35; margin: 3px 0 0; }
.ws-sep { height: 1px; background: #dce6f4; }
.ws-detail-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #c9a84c; margin-bottom: 5px; }
.ws-detail-text { font-size: 14px; color: #2a3a4a; line-height: 1.75; }
.ws-detail-footer { display: flex; justify-content: flex-end; }

/* ── MODE NUMÉRO ── */
.ws-qr-full {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    border: 1.5px solid white;
    box-shadow: 0 2px 8px rgba(15,45,94,0.07);
    display: none;
    flex-direction: column;
}
.ws-qr-full.open { display: flex; }
.ws-qr-header { background: #0f2d5e; padding: 14px 20px; flex-shrink: 0; }
.ws-qr-ref { font-size: 12px; font-weight: 700; color: #c9a84c; font-family: monospace; display: block; margin-bottom: 3px; }
.ws-qr-titre { font-size: 15px; color: #e8d5a3; font-weight: 600; line-height: 1.3; }
.ws-qr-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; flex: 1; }
.ws-qr-q { font-size: 14px; color: #0f2d5e; font-weight: 600; font-style: italic; line-height: 1.6; }
.ws-qr-r { font-size: 14px; color: #2a3a4a; line-height: 1.8; }
.ws-qr-footer {
    padding: 12px 20px;
    display: flex;
    justify-content: flex-end;
    flex-shrink: 0;
    border-top: 1px solid #e4ecf7;
    background: white;
}

/* ── BOUTON LIEN ── */
.ws-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #0f2d5e;
    color: #e8d5a3;
    border: none;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    transition: background 0.15s, transform 0.18s, box-shadow 0.18s;
}
.ws-btn:hover { background: #1a4480; color: #e8d5a3; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,45,94,0.2); }

/* ── MODE MOTS-CLÉS — AUTOCOMPLÉTION ── */

/* Barre de recherche tag */
.ws-tag-bar {
    background: white;
    border-radius: 14px;
    padding: 12px 16px;
    border: 1.5px solid white;
    box-shadow: 0 2px 8px rgba(15,45,94,0.07);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 0.15s;
}
.ws-tag-bar.active { border-color: #c9a84c; }
.ws-tag-bar-icon { font-size: 18px; color: #9aaabb; flex-shrink: 0; transition: color 0.15s; }
.ws-tag-bar-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1c2b3a;
    font-family: 'Lato', inherit;
    background: transparent;
}
.ws-tag-bar-input::placeholder { color: #9aaabb; }
.ws-tag-count { font-size: 14px; color: #9aaabb; white-space: nowrap; flex-shrink: 0; }
.ws-tag-count-badge {
    background: #c9a84c;
    color: white;
    font-size: 14px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

/* Dropdown autocomplétion */
.ws-tag-dropdown {
    background: white;
    border-radius: 12px;
    border: 1.5px solid white;
    box-shadow: 0 6px 20px rgba(15,45,94,0.12);
    overflow: hidden;
    margin-top: 6px;
}
.ws-tag-dropdown:empty { display: none; }
.ws-tag-drop-item {
    padding: 11px 18px;
    font-size: 14px;
    color: #1a4480;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.12s;
}
.ws-tag-drop-item:hover { background: #f0f5fb; }
.ws-tag-drop-item + .ws-tag-drop-item { border-top: 0.5px solid #e8eef8; }
.ws-tag-match { color: #c9a84c; font-weight: 700; }

/* Suggestions */
.ws-tag-suggestions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.ws-tag-sug {
    background: white;
    border: 1.5px solid white;
    border-radius: 20px;
    padding: 7px 16px;
    font-size: 14px;
    color: #1a4480;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(15,45,94,0.06);
    transition: transform 0.18s, background 0.15s, color 0.15s, box-shadow 0.18s;
}
.ws-tag-sug:hover {
    transform: translateY(-2px);
    background: #1a4480;
    color: white;
    border-color: white;
    box-shadow: 0 5px 14px rgba(15,45,94,0.15);
}

#ws-tag-res { display: flex; flex-direction: column; gap: 8px; }

/* ── ZONE SAISIE (masquée — chaque mode a sa propre barre) ── */
.ws-bottom { display: none; }
.ws-bar {
    background: white;
    border-radius: 28px;
    display: flex;
    align-items: center;
    padding: 6px 6px 6px 20px;
    gap: 10px;
    border: 1.5px solid white;
    box-shadow: 0 2px 8px rgba(15,45,94,0.07);
    transition: box-shadow 0.18s;
    position: relative;
}
.ws-bar:hover { box-shadow: 0 4px 16px rgba(15,45,94,0.12); }
.ws-bar input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
    color: #1c2b3a;
    font-family: 'Lato', inherit;
    background: transparent;
    padding: 6px 0;
}
.ws-bar input::placeholder { color: #9aaabb; }
.ws-bar-hint { font-size: 12px; color: #9aaabb; white-space: nowrap; }
.ws-send {
    background: #0f2d5e;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    color: white;
    font-size: 18px;
    transition: transform 0.18s, box-shadow 0.18s, background 0.15s;
}
.ws-send:hover { background: #1a4480; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(15,45,94,0.22); }

/* Autocomplétion */
.ws-ac {
    position: absolute;
    bottom: 54px;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dce6f4;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(15,45,94,0.1);
    overflow: hidden;
    display: none;
    z-index: 100;
}
.ws-ac.open { display: block; }
.ws-ac-item { padding: 10px 18px; font-size: 14px; color: #0f2d5e; cursor: pointer; transition: background 0.15s; }
.ws-ac-item:hover { background: #e4ecf7; }

/* Loader */
.ws-loader { text-align: center; padding: 24px; color: #1a4480; font-size: 14px; opacity: 0.6; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
    #wapnick-search {
        border-radius: 0;
        border-left: none;
        border-right: none;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    .ws-top { padding: 10px 12px; gap: 6px; }
    .ws-tab-label { display: none; }
    .ws-mode-tab { padding: 7px 8px; }
    .ws-avatar { width: 34px; height: 34px; font-size: 11px; flex-shrink: 0; }
    .ws-modes { gap: 2px; }
    .ws-results { padding: 12px 14px; gap: 10px; }
    .ws-bottom { padding: 10px 14px 14px; }
    .ws-home { display: flex; flex-direction: column; gap: 24px; padding: 4px 0; }
    .ws-home-title { font-size: 22px; font-weight: 600; color: #0f2d5e; text-align: center; margin: 0; }
    
    
    
    
    .ws-suggestions { gap: 6px; }
    .ws-sug { font-size: 13px; padding: 6px 12px; }
    .ws-mode-bar { padding: 10px 14px; }
    .ws-mode-input { font-size: 14px; }
    .ws-card { padding: 12px 14px; }
    .ws-q { font-size: 14px; }
    .ws-tag-sug { font-size: 13px; padding: 6px 12px; }
    .ws-tag-suggestions { gap: 6px; }
    .ws-tag-bar { padding: 10px 14px; }
    .ws-home-title br { display: none; }
}

/* ============================================================
   MODE NUIT — body.dark-mode
   ============================================================ */

body.dark-mode #wapnick-search {
    background: #0f1e35;
    border-color: #1e3a5f;
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), 0 1px 4px rgba(0,0,0,0.3);
}
body.dark-mode #wapnick-search:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3);
}

/* Topbar — identique en mode nuit (déjà sombre) */
body.dark-mode .ws-top { background: #0a1628; }

/* Zone résultats */
body.dark-mode .ws-results { background: #0f1e35; }

/* État accueil */
body.dark-mode .ws-home-title { font-size: 22px; font-weight: 600; color: #0f2d5e; text-align: center; margin: 0; }
body.dark-mode .ws-home-title em { color: #c9a84c; }
body.dark-mode 

/* Stats */
body.dark-mode 
body.dark-mode .ws-stat:hover { box-shadow: 0 7px 20px rgba(0,0,0,0.4); }
body.dark-mode 
body.dark-mode .ws-stat span { color: #6080a0; }

/* Suggestions */
body.dark-mode .ws-sug {
    background: #1a2d4a;
    border-color: #1e3a5f;
    color: #a0bcd8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
body.dark-mode .ws-sug:hover {
    background: #1a4480;
    color: white;
    border-color: #2a5490;
}

/* Hint */
body.dark-mode .ws-hint { background: rgba(255,255,255,0.04); color: #8aa0bc; }

/* Labels sections */
body.dark-mode .ws-section-label { color: #6080a0; opacity: 1; }

/* Cartes résultats */
body.dark-mode .ws-card {
    background: #1a2d4a;
    border-color: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark-mode .ws-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
body.dark-mode .ws-card.active { border-color: #c9a84c; }
body.dark-mode .ws-q { color: #e8d5a3; }
body.dark-mode .ws-excerpt { color: #8aa0bc; border-top-color: #1e3a5f; }
body.dark-mode .ws-score { color: #5070a0; }
body.dark-mode .ws-chev-card { color: #2a4a6a; }

/* Détail Q/R */
body.dark-mode .ws-detail {
    background: #142238;
    border-color: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark-mode .ws-detail-title { color: #e8d5a3; }
body.dark-mode .ws-detail-text { color: #a0bcd8; }
body.dark-mode .ws-sep { background: #1e3a5f; }

/* Mode numéro */
body.dark-mode .ws-qr-full {
    background: #1a2d4a;
    border-color: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark-mode .ws-qr-header { background: #0a1628; }
body.dark-mode .ws-qr-body { background: #1a2d4a; }
body.dark-mode .ws-qr-q { color: #c8daf0; }
body.dark-mode .ws-qr-r { color: #8aa0bc; }
body.dark-mode .ws-qr-footer { background: #1a2d4a; border-top-color: #1e3a5f; }

/* Mode mots-clés — dark */
body.dark-mode .ws-tag-bar {
    background: #1a2d4a;
    border-color: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark-mode .ws-tag-bar.active { border-color: #c9a84c; }
body.dark-mode .ws-tag-bar-icon { color: #4a6a8a; }
body.dark-mode .ws-tag-bar-input { color: white; }
body.dark-mode .ws-tag-bar-input::placeholder { color: #4a6a8a; }
body.dark-mode .ws-tag-count { color: #4a6a8a; }
body.dark-mode .ws-tag-dropdown {
    background: #1a2d4a;
    border-color: #1e3a5f;
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
}
body.dark-mode .ws-tag-drop-item { color: #a0bcd8; }
body.dark-mode .ws-tag-drop-item:hover { background: #142238; }
body.dark-mode .ws-tag-drop-item + .ws-tag-drop-item { border-top-color: #1e3a5f; }
body.dark-mode .ws-tag-sug {
    background: #1a2d4a;
    border-color: #1e3a5f;
    color: #a0bcd8;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
body.dark-mode .ws-tag-sug:hover {
    background: #1a4480;
    color: white;
    border-color: #2a5490;
}

/* Barre mode */
body.dark-mode .ws-mode-bar {
    background: #1a2d4a;
    border-color: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark-mode .ws-mode-bar:focus-within { border-color: #2a5490; }
body.dark-mode .ws-mode-bar.active { border-color: #1a4480; box-shadow: 0 4px 14px rgba(15,45,94,0.12); }
body.dark-mode .ws-mode-input { color: white; }
body.dark-mode .ws-mode-input::placeholder { color: #4a6a8a; }
body.dark-mode .ws-mode-hint { color: #4a6a8a; }
body.dark-mode .ws-mode-send { background: #1a4480; }
body.dark-mode .ws-mode-send:hover { background: #234f99; }

/* Barre saisie (masquée) */
body.dark-mode .ws-bottom { display: none; }
body.dark-mode .ws-bar {
    background: #1a2d4a;
    border-color: #1e3a5f;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
body.dark-mode .ws-bar:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.35); }
body.dark-mode .ws-bar input { color: white; }
body.dark-mode .ws-bar input::placeholder { color: #4a6a8a; }
body.dark-mode .ws-bar-hint { color: #4a6a8a; }
body.dark-mode .ws-send { background: #1a4480; }
body.dark-mode .ws-send:hover { background: #234f99; }

/* Autocomplétion */
body.dark-mode .ws-ac {
    background: #1a2d4a;
    border-color: #1e3a5f;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
body.dark-mode .ws-ac-item { color: #e8d5a3; }
body.dark-mode .ws-ac-item:hover { background: #142238; }

/* Loader */
body.dark-mode .ws-loader { color: #6080a0; }

.ws-home-title-block { text-align: center; }
.ws-home-divider { width: 48px; height: 1.5px; background: #c9a84c; margin: 12px auto; border-radius: 2px; }
.ws-home-modes { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.ws-home-mode-pill { display: flex; align-items: center; gap: 7px; padding: 8px 18px; border-radius: 20px; background: white; border: 1px solid rgba(15,45,94,0.12); font-family: 'Lato', inherit; font-size: 13px; color: #0f2d5e; font-weight: 500; }
.ws-home-mode-pill i { font-size: 15px; color: #c9a84c; }
.ws-home-sug-block { text-align: center; }
.ws-home-sug-label { font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8a9bb0; margin-bottom: 12px; font-family: 'Lato', inherit; }