/* American Dream Roleplay: tema chiaro del forum, con testata 3D (jscripts/adrp/forum3d.js) e icone per sezione */

:root {
    --bg: #eef1f7;
    --surface: #ffffff;
    --surface-2: #f6f8fc;
    --border: #e1e6ef;
    --text: #1a2233;
    --muted: #5d687c;
    --link: #1f6fd6;
    --accent: #2e9bff;
    --accent-2: #8b5cff;
    --warm: #ff8a3d;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(20, 30, 60, .06), 0 8px 24px rgba(20, 30, 60, .07);
    --shadow-hover: 0 2px 4px rgba(20, 30, 60, .08), 0 16px 40px rgba(20, 30, 60, .12);
    --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: var(--bg) !important;
    color: var(--text) !important;
    font-family: var(--font) !important;
    font-size: 16px !important;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* MyBB fissa 970-990px di larghezza minima: sul telefono la pagina uscirebbe dallo schermo */
body, #container, .wrapper { min-width: 0 !important; }
.wrapper { width: auto; max-width: 1200px; padding: 0 20px; box-sizing: border-box; }
#container { color: var(--text); background: transparent; font-size: 16px; }

a:link, a:visited { color: var(--link); text-decoration: none; }
a:hover, a:active { color: #0f4fa8; text-decoration: underline; }

.smalltext { font-size: 13.5px !important; color: var(--muted); }
.largetext { font-size: 18px !important; }

/* ---------------------------------------------------------------- testata 3D */
#logo.adrp-hero {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    padding: 0;
    border: 0;
    background: linear-gradient(180deg, #3d5fae 0%, #c8705a 55%, #3a2232 100%);
    display: flex;
    align-items: flex-end;
}
#adrp-3d { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.adrp-hero-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 12, 30, .25) 0%, rgba(10, 12, 30, 0) 35%, rgba(10, 12, 30, .55) 100%);
    pointer-events: none;
}
#logo.adrp-hero .wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-top: 26px;
    padding-bottom: 54px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 14px 24px;
}
.adrp-brand img { display: block; width: 380px; max-width: 100%; height: auto; filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .35)); }
.adrp-tagline { margin: 8px 0 0 2px; color: rgba(255, 255, 255, .9); font-size: 15px; font-weight: 600; text-shadow: 0 2px 10px rgba(0, 0, 0, .4); }

#header ul.menu.top_links { float: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
#header ul.menu.top_links li { margin: 0; padding: 0; }
#header ul.menu.top_links li a {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px 8px 32px !important;
    border-radius: 999px;
    color: #fff !important;
    font-weight: 600;
    font-size: 14.5px;
    text-decoration: none;
    background-color: rgba(255, 255, 255, .14) !important;
    background-position: 11px center !important;
    border: 1px solid rgba(255, 255, 255, .25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: background-color .2s, transform .2s;
}
/* le iconcine di MyBB nel menu stonano sulla testata: solo testo */
#header ul.menu.top_links li a { background-image: none !important; padding-left: 15px !important; }
#header ul.menu.top_links li a:hover { background-color: rgba(255, 255, 255, .26) !important; transform: translateY(-1px); }
#header ul.menu.top_links li a.ucp {
    padding-left: 16px !important;
    background: linear-gradient(120deg, var(--accent), var(--accent-2)) !important;
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(46, 155, 255, .4);
}

/* barra utente: una card bianca che si appoggia sotto la testata */
#panel { position: relative; z-index: 2; }
#panel .upper {
    background: transparent;
    border: 0;
    padding: 0;
    color: var(--text);
}
#panel .upper > .wrapper {
    margin-top: -30px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 1160px;
}
#panel .upper a:link, #panel .upper a:visited { color: var(--text); font-weight: 600; }
#panel .upper .welcome { font-size: 15px; }
#panel .lower { background: transparent; border: 0; color: var(--muted); padding-top: 8px; }
#panel .lower a:link, #panel .lower a:visited { color: var(--muted); }
#search { float: none; order: 2; display: flex; gap: 8px; }
#search input.textbox { width: 230px; }

#content { background: transparent; padding-top: 22px; }
.navigation { color: var(--muted); font-size: 14.5px; padding: 4px 2px 12px; }
.navigation .active { color: var(--text); font-size: 20px; font-weight: 800; }

/* ---------------------------------------------------------------- riquadro di benvenuto (solo nella home) */
.adrp-welcome {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 18px 28px;
    margin: 0 0 24px;
    padding: 24px 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow);
    position: relative;
    overflow: hidden;
}
.adrp-welcome::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    background: linear-gradient(180deg, var(--warm), #ff5fa2, var(--accent-2));
}
.adrp-welcome h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.adrp-welcome p { margin: 0; color: var(--muted); font-size: 16px; max-width: 640px; }
.adrp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.adrp-chips span { padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #3d4a63; background: var(--surface-2); border: 1px solid var(--border); }
.adrp-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
.adrp-btn:link, .adrp-btn:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
    background: var(--surface-2);
    border: 1px solid var(--border);
    text-decoration: none;
    white-space: nowrap;
    transition: transform .2s, box-shadow .2s;
}
.adrp-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); text-decoration: none; }
.adrp-btn.primary:link, .adrp-btn.primary:visited { color: #fff; border: 0; background: linear-gradient(120deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 22px rgba(46, 155, 255, .35); }

/* ---------------------------------------------------------------- tabelle e categorie */
.tborder {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 6px;
}
.thead {
    background: var(--surface) !important;
    color: var(--text);
    border-bottom: 1px solid var(--border);
    padding: 16px 18px !important;
}
.thead a:link, .thead a:visited { color: var(--text); }
.thead strong, .thead strong a { font-size: 18px; font-weight: 800; letter-spacing: -.005em; }
.thead .smalltext { color: var(--muted); font-size: 14px !important; margin-top: 2px; }
.thead .expcolimage { margin-top: 6px; opacity: .55; }

.tcat {
    background: var(--surface-2) !important;
    color: var(--muted);
    border-top: 0;
    border-bottom: 1px solid var(--border);
    padding: 8px 14px !important;
}
.tcat, .tcat .smalltext { font-size: 12px !important; text-transform: uppercase; letter-spacing: .08em; }
.tcat a:link, .tcat a:visited { color: var(--muted); }

.trow1, .trow2 { background: var(--surface); color: var(--text); border-color: #edf0f6 !important; padding: 14px !important; }
.trow1, .trow2, .trow_shaded { border-bottom: 1px solid #edf0f6; }
tr:hover > .trow1, tr:hover > .trow2 { background: #f7f9ff; }
.trow_shaded { background: #fff7e8; }
.trow_deleted, .post.deleted_post { background: #fdecef; }
.trow_selected, tr.trow_selected td { background: #e8f1ff; }
.tfoot { background: var(--surface-2); border-top: 1px solid var(--border); color: var(--muted); }
.tfoot a:link, .tfoot a:visited { color: var(--muted); }
.tborder td, .tborder th { border-left: 0 !important; border-right: 0 !important; }

/* categoria colorata: barra a sinistra, icona e un velo del suo colore */
.adrp-cat { --c: var(--accent); }
.adrp-cat > thead .thead {
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, #fff), #fff 70%) !important;
    position: relative;
    padding-left: 76px !important;
}
.adrp-cat > thead .thead::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--c);
}
.adrp-cat > thead .thead::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 50%;
    width: 42px;
    height: 42px;
    margin-top: -21px;
    border-radius: 13px;
    background: var(--c) var(--ci) center / 22px no-repeat;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--c) 40%, transparent);
}

.tborder td { font-size: 15px; }
/* nome e descrizione delle sezioni */
.tborder td strong a[href*="forumdisplay"] { font-size: 17.5px; font-weight: 700; color: var(--text); }
.tborder td strong a[href*="forumdisplay"]:hover { color: var(--link); text-decoration: none; }
.tborder td .smalltext { font-size: 14px !important; }

/* ---------------------------------------------------------------- icone delle sezioni (al posto delle lampadine di MyBB) */
.forum_status {
    --c: #7a8699;
    --fi: none;
    width: 48px !important;
    height: 48px !important;
    border-radius: 14px;
    background: color-mix(in srgb, var(--c) 12%, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--c) 22%, #fff);
    position: relative;
    display: inline-block;
    vertical-align: middle;
    transition: transform .2s, box-shadow .2s;
}
.forum_status::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--c);
    -webkit-mask: var(--fi) center / 24px no-repeat;
    mask: var(--fi) center / 24px no-repeat;
}
/* messaggi nuovi: icona piena e un punto arancio */
.forum_status.forum_on {
    background: linear-gradient(140deg, var(--c), color-mix(in srgb, var(--c) 70%, #000)) !important;
    border-color: transparent;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--c) 40%, transparent);
}
.forum_status.forum_on::before { background: #fff; }
.forum_status.forum_on::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--warm);
    border: 2px solid #fff;
}
.forum_status.forum_offclose, .forum_status.forum_offlock { filter: grayscale(1); opacity: .6; }
tr:hover .forum_status { transform: scale(1.06) rotate(-3deg); }
td:has(> .forum_status) { width: 60px; }
.forum_legend dt .forum_status { width: 26px !important; height: 26px !important; border-radius: 8px; }
.forum_legend dt .forum_status::before { -webkit-mask-size: 14px; mask-size: 14px; }

/* ---------------------------------------------------------------- elenco delle discussioni */
.inline_row td { padding: 14px !important; }
.inline_row a[href*="showthread"] { font-size: 16.5px; font-weight: 600; color: var(--text); }
.inline_row a[href*="showthread"]:hover { color: var(--link); }
.forumdisplay_sticky, .forumdisplay_announcement { background: #fffaf2 !important; }

/* ---------------------------------------------------------------- messaggi */
.post {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 18px;
}
.post .post_author {
    background: linear-gradient(90deg, #f4f7ff, #fff);
    border-bottom: 1px solid var(--border);
    border-top: 0;
    padding: 16px 18px;
}
.post .post_author div.author_avatar img {
    width: 72px !important;
    height: 72px !important;
    max-width: 72px !important;
    max-height: 72px !important;
    object-fit: cover;
    border-radius: 18px;
    border: 3px solid #fff;
    box-shadow: 0 6px 16px rgba(20, 30, 60, .15);
    padding: 0;
    background: #fff;
}
.post .post_author div.author_information { padding: 6px 0 0 8px; }
.post .post_author div.author_information .largetext a { font-size: 18px; font-weight: 800; }
.post .post_author div.author_statistics { color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.post .post_head { border-bottom: 1px dashed var(--border); padding: 10px 18px 10px; }
.post .post_head span.post_date { color: var(--muted); font-size: 14px; }
.post .post_body { font-size: 16.5px; line-height: 1.75; color: var(--text); padding: 18px 20px; }
.post_content { padding: 0 !important; }
.post_controls { background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 0; padding: 10px 14px; }
.postbit_buttons > a:link, .postbit_buttons > a:visited {
    display: inline-flex;
    align-items: center;
    margin: 2px 3px;
    padding: 6px 12px !important;
    border-radius: 999px;
    background-color: #fff !important;
    border: 1px solid var(--border) !important;
    color: var(--text) !important;
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .2s, box-shadow .2s;
}
.postbit_buttons > a:hover { border-color: var(--accent) !important; box-shadow: 0 4px 12px rgba(46, 155, 255, .18); text-decoration: none; }
.post .post_meta, .post .post_meta a:link, .post .post_meta a:visited { color: var(--muted); }
.signature { border-top: 1px dashed var(--border); }

blockquote { background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: 12px; padding: 12px 14px; }
blockquote cite { border-bottom: 1px solid var(--border); color: var(--muted); }
.codeblock { background: #0f1524; color: #e6eaf2; border: 0; border-radius: 12px; }
.codeblock .title { border-bottom: 1px solid rgba(255, 255, 255, .1); color: #9aa6bd; }
.codeblock code { color: #ffd9a8; }

/* ---------------------------------------------------------------- moduli e pulsanti */
input.textbox, textarea, select, input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="search"] {
    background: #fff !important;
    color: var(--text) !important;
    border: 1px solid #d3dae6 !important;
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 15px;
    font-family: var(--font);
}
input.textbox:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent) !important; box-shadow: 0 0 0 4px rgba(46, 155, 255, .18); }

button, input.button, a.button:link, a.button:visited, a.button:hover, a.button:active {
    background: linear-gradient(120deg, var(--accent), var(--accent-2)) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 9px 18px !important;
    font-weight: 700;
    font-size: 14.5px;
    font-family: var(--font);
    box-shadow: 0 6px 18px rgba(46, 155, 255, .28);
    cursor: pointer;
    text-decoration: none !important;
}
button:hover, input.button:hover, a.button:hover { filter: brightness(1.08); }
a.button span { color: #fff; }

fieldset { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }

/* ---------------------------------------------------------------- avvisi, menu, paginazione */
.red_alert, .error { background: #fdecef; border: 1px solid #f5c2cb; color: #a3172f; border-radius: 12px; }
.pm_alert { background: #e8f1ff; border: 1px solid #bcd6ff; color: #154a99; border-radius: 12px; }
.popup_menu { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-hover); }
.popup_menu .popup_item { background: #fff; color: var(--text); }
.popup_menu .popup_item:hover { background: #eef4ff; color: var(--text); }
.pagination a, .pagination .pagination_current { border-radius: 8px; border: 1px solid var(--border); background: #fff; }
.pagination .pagination_current { background: var(--accent); color: #fff; border-color: transparent; }
.modal { border-radius: 16px; border: 1px solid var(--border); box-shadow: var(--shadow-hover); }

/* ---------------------------------------------------------------- piede */
#footer { margin-top: 30px; }
#footer .upper { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 0; padding: 14px 0; }
#footer .lower { background: transparent; color: var(--muted); }
#footer .lower a:link, #footer .lower a:visited { color: var(--muted); }
#footer ul.menu li a { color: var(--text); font-weight: 600; }
#footer .adrp-footer-links a { color: var(--link); font-weight: 700; }

/* ---------------------------------------------------------------- telefono */
@media (max-width: 760px) {
    .wrapper { padding: 0 14px; }
    #logo.adrp-hero { min-height: 230px; }
    #logo.adrp-hero .wrapper { grid-template-columns: 1fr; padding-top: 22px; padding-bottom: 46px; }
    .adrp-brand img { width: 270px; }
    .adrp-tagline { font-size: 14px; }
    #header ul.menu.top_links { justify-content: flex-start; gap: 6px; }
    #header ul.menu.top_links li a { padding: 7px 12px !important; font-size: 13.5px; }
    #panel .upper > .wrapper { margin: -26px 12px 0; flex-direction: column; align-items: stretch; }
    #search { order: 2; }
    #search input.textbox { width: auto; flex: 1; }
    .adrp-welcome { grid-template-columns: 1fr; padding: 20px; }
    .adrp-welcome h2 { font-size: 21px; }
    .adrp-welcome-actions { justify-content: flex-start; }
    .adrp-welcome-actions .adrp-btn { flex: 1 1 auto; justify-content: center; }
    .hide-sm { display: none !important; }
    .float_left, .float_right { float: none; }
    .adrp-cat > thead .thead { padding-left: 66px !important; }
    .adrp-cat > thead .thead::after { left: 14px; width: 38px; height: 38px; margin-top: -19px; }
    .forum_status { width: 42px !important; height: 42px !important; border-radius: 12px; }
    .post.classic .post_author { width: auto; float: none; }
    .post.classic .post_content { width: auto; float: none; }
    .post .post_author .author_statistics { display: none; }
    .post .post_body { font-size: 16px; padding: 16px; }
    .tborder td, .tborder th { word-break: break-word; }
    input.textbox, textarea { max-width: 100%; }
    table { max-width: 100%; }
}

/* ---------------------------------------------------------------- colori e icone (generati da build_css.py) */
.forum_status { --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.cat-3 { --c: #f26b1d; --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.7 5.6 6.1.9-4.4 4.3 1 6.1L12 17l-5.4 2.9 1-6.1-4.4-4.3 6.1-.9z'/%3E%3C/svg%3E"); }
.cat-8 { --c: #1f9d61; --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M15.5 8.5l-2 5-5 2 2-5z'/%3E%3C/svg%3E"); }
.cat-13 { --c: #dc3545; --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h12l-2.5 4L17 12H5'/%3E%3C/svg%3E"); }
.cat-17 { --c: #2563eb; --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21h18'/%3E%3Cpath d='M5 21V10l4-3v14'/%3E%3Cpath d='M9 21V4l6 3v14'/%3E%3Cpath d='M15 21v-9l4 2v7'/%3E%3C/svg%3E"); }
.cat-23 { --c: #d39a00; --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='M17 6H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E"); }
.cat-27 { --c: #7c3aed; --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4a7 7 0 0 0-10 0l-5 5v10h10l5-5a7 7 0 0 0 0-10z'/%3E%3Cpath d='M16 8L3 21'/%3E%3Cpath d='M17 15H9'/%3E%3C/svg%3E"); }
.cat-32 { --c: #db2777; --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h13v5a6 6 0 0 1-6 6h-1a6 6 0 0 1-6-6z'/%3E%3Cpath d='M17 10h1a3 3 0 0 1 0 6h-1'/%3E%3Cpath d='M8 2v3'/%3E%3Cpath d='M12 2v3'/%3E%3C/svg%3E"); }
.cat-36 { --c: #475569; --ci: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.fi-4 { --c: #f26b1d; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11v2a1 1 0 0 0 1 1h3l5 4V6L7 10H4a1 1 0 0 0-1 1z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6'/%3E%3Cpath d='M19 6a8 8 0 0 1 0 12'/%3E%3C/svg%3E"); }
.fi-5 { --c: #f26b1d; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18'/%3E%3Cpath d='M5 7h14'/%3E%3Cpath d='M5 7l-3 7a3 3 0 0 0 6 0z'/%3E%3Cpath d='M19 7l-3 7a3 3 0 0 0 6 0z'/%3E%3Cpath d='M8 21h8'/%3E%3C/svg%3E"); }
.fi-6 { --c: #f26b1d; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 15c-1.5 1.5-2 5-2 5s3.5-.5 5-2'/%3E%3Cpath d='M14.5 4.5c3-1.5 5-1 5-1s.5 2-1 5L12 15l-3-3z'/%3E%3Cpath d='M9 12l-3-1 2-3h4'/%3E%3Cpath d='M12 15l1 3 3-2v-4'/%3E%3C/svg%3E"); }
.fi-7 { --c: #f26b1d; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0'/%3E%3Cpath d='M19 8v6'/%3E%3Cpath d='M16 11h6'/%3E%3C/svg%3E"); }
.fi-9 { --c: #1f9d61; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 5h6a4 4 0 0 1 4 4v12a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 5h-6a4 4 0 0 0-4 4v12a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E"); }
.fi-10 { --c: #1f9d61; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M5.6 5.6l3.6 3.6'/%3E%3Cpath d='M14.8 14.8l3.6 3.6'/%3E%3Cpath d='M14.8 9.2l3.6-3.6'/%3E%3Cpath d='M5.6 18.4l3.6-3.6'/%3E%3C/svg%3E"); }
.fi-11 { --c: #1f9d61; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='6' width='8' height='14' rx='4'/%3E%3Cpath d='M12 20v-9'/%3E%3Cpath d='M3 13h5'/%3E%3Cpath d='M16 13h5'/%3E%3Cpath d='M4 7l4 2'/%3E%3Cpath d='M20 7l-4 2'/%3E%3Cpath d='M4 19l4-2'/%3E%3Cpath d='M20 19l-4-2'/%3E%3Cpath d='M9 6a3 3 0 0 1 6 0'/%3E%3C/svg%3E"); }
.fi-12 { --c: #1f9d61; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-4 10.5c.7.7 1 1.5 1 2.5h6c0-1 .3-1.8 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E"); }
.fi-14 { --c: #dc3545; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4'/%3E%3Cpath d='M5 4h12l-2.5 4L17 12H5'/%3E%3C/svg%3E"); }
.fi-15 { --c: #dc3545; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 3.5l6 6-3 3-6-6z'/%3E%3Cpath d='M11.5 9.5L4 17l3 3 7.5-7.5'/%3E%3Cpath d='M13 21h8'/%3E%3C/svg%3E"); }
.fi-16 { --c: #dc3545; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2.5'/%3E%3Cpath d='M14 10h4'/%3E%3Cpath d='M14 14h4'/%3E%3Cpath d='M5.5 17a3.5 3.5 0 0 1 7 0'/%3E%3C/svg%3E"); }
.fi-18 { --c: #2563eb; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2l8 3v6c0 5-3.5 9-8 11-4.5-2-8-6-8-11V5z'/%3E%3Cpath d='M9 12l2 2 4-4'/%3E%3C/svg%3E"); }
.fi-19 { --c: #2563eb; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-8-5.2-8-11a5 5 0 0 1 8-4 5 5 0 0 1 8 4c0 5.8-8 11-8 11z'/%3E%3Cpath d='M6 12h3l1.5-2.5 2 5 1.5-2.5H18'/%3E%3C/svg%3E"); }
.fi-20 { --c: #2563eb; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2' width='6' height='12' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0'/%3E%3Cpath d='M12 18v4'/%3E%3Cpath d='M8 22h8'/%3E%3C/svg%3E"); }
.fi-21 { --c: #2563eb; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 16l8-3V5a2 2 0 0 1 4 0v8l8 3v2l-8-2v4l2 2v1l-4-1-4 1v-1l2-2v-4l-8 2z'/%3E%3C/svg%3E"); }
.fi-22 { --c: #2563eb; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='4' width='14' height='18' rx='2'/%3E%3Crect x='9' y='2' width='6' height='4' rx='1'/%3E%3Cpath d='M9 11h6'/%3E%3Cpath d='M9 15h4'/%3E%3C/svg%3E"); }
.fi-24 { --c: #d39a00; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M8 7V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'/%3E%3Cpath d='M3 13h18'/%3E%3C/svg%3E"); }
.fi-25 { --c: #d39a00; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.5'/%3E%3Ccircle cx='18' cy='20' r='1.5'/%3E%3Cpath d='M2 3h3l2.5 12h11l2-8H6.2'/%3E%3C/svg%3E"); }
.fi-26 { --c: #d39a00; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 18h18'/%3E%3Cpath d='M5 18v-3a7 7 0 0 1 14 0v3'/%3E%3Cpath d='M10 8V5h4v3'/%3E%3C/svg%3E"); }
.fi-28 { --c: #7c3aed; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 4a7 7 0 0 0-10 0l-5 5v10h10l5-5a7 7 0 0 0 0-10z'/%3E%3Cpath d='M16 8L3 21'/%3E%3Cpath d='M17 15H9'/%3E%3C/svg%3E"); }
.fi-29 { --c: #7c3aed; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='4'/%3E%3Cpath d='M2 21a7 7 0 0 1 14 0'/%3E%3Cpath d='M16 4a4 4 0 0 1 0 8'/%3E%3Cpath d='M22 21a7 7 0 0 0-4-6.3'/%3E%3C/svg%3E"); }
.fi-30 { --c: #7c3aed; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3Cpath d='M12 13l1 2 2.2.3-1.6 1.5.4 2.2-2-1-2 1 .4-2.2-1.6-1.5 2.2-.3z'/%3E%3C/svg%3E"); }
.fi-31 { --c: #7c3aed; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E"); }
.fi-33 { --c: #db2777; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.5 7.2L4 21l1.8-5.5A8 8 0 1 1 21 12z'/%3E%3C/svg%3E"); }
.fi-34 { --c: #db2777; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='11' rx='5'/%3E%3Cpath d='M7 10.5v3.5'/%3E%3Cpath d='M5.2 12.2h3.6'/%3E%3Ccircle cx='15.5' cy='11' r='.8'/%3E%3Ccircle cx='18' cy='13.5' r='.8'/%3E%3C/svg%3E"); }
.fi-35 { --c: #db2777; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2'/%3E%3Ccircle cx='16' cy='11' r='2'/%3E%3Cpath d='M10 11h4'/%3E%3Cpath d='M6 19l2-3h8l2 3'/%3E%3C/svg%3E"); }
.fi-37 { --c: #475569; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E"); }
.fi-38 { --c: #475569; --fi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6'/%3E%3Cpath d='M8 13h8'/%3E%3Cpath d='M8 17h6'/%3E%3C/svg%3E"); }