/* site.css, extracted from general_style.php inline <style> blocks so it can be
   cached separately instead of re-sent with every page. Content-identical to what
   used to render inline; only the @font-face src paths changed, from an absolute
   path built with PHP's $site_base_url to a path relative to this file's own
   location (/css/site.css), which resolves correctly under both the local
   /inengleza subfolder and the production root without needing PHP at all. */

/* Poppins, self-hosted. Was two render-blocking hops, one to
   fonts.googleapis.com for this CSS and one to fonts.gstatic.com for the
   files themselves. Now inlined and served from our own origin, with
   font-display:swap so text is visible while the font loads.
   Poppins is SIL Open Font License 1.1. */
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/poppins-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/poppins-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/poppins-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/poppins-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/poppins-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/poppins-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ===================================================================
   Bootstrap 3 compatibility layer.
   Bootstrap 5 changed container widths, grid gutters and control sizing,
   and dropped several components this site still uses (well, panel,
   form-group, form-horizontal, btn-block, media). These rules restore the
   Bootstrap 3 metrics so existing markup keeps its original spacing.
   Keep this block FIRST: the site's own styling below intentionally
   overrides parts of it.
   =================================================================== */

/* Container: BS5 grows to 1320px, BS3 capped at 1170px */
.container { width: 100%; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; max-width: none; }
@media (min-width: 768px)  { .container { max-width: 750px; } }
@media (min-width: 992px)  { .container { max-width: 970px; } }
@media (min-width: 1200px) { .container { max-width: 1170px; } }

/* Grid gutters: BS5 uses 24px, BS3 used 30px */
.row { --bs-gutter-x: 30px; }

/* Form controls: BS5 uses 16px font / larger padding */
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    border: 1px solid #ccc;
    border-radius: 4px;
}
textarea.form-control { height: auto; }
select.form-control { padding: 6px 12px; }
.form-control:focus { border-color: var(--accent); box-shadow: none; }
.form-group { margin-bottom: 15px; }
label { display: inline-block; max-width: 100%; margin-bottom: 5px; font-weight: 700; }

/* Horizontal / inline forms (removed in BS5).
   Both only go side-by-side above a breakpoint; below it they must stack.
   The labels use col-xl-* (BS3's col-lg-*), so the row only forms at >=1200px:
   below that the col classes define no width and a flex row would squash them. */
.form-horizontal .form-group { margin-bottom: 15px; }
@media (min-width: 1200px) {
    .form-horizontal .form-group { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
    .form-horizontal .col-form-label { text-align: right; margin-bottom: 0; padding-top: 7px; }
}
@media (min-width: 768px) {
    .form-inline { display: flex; flex-flow: row wrap; align-items: center; }
}

/* Buttons: BS5 defaults to 16px text and, unlike BS3, no longer sets
   white-space:nowrap - so short labels ("1 litera") wrap onto two lines. */
.btn {
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    white-space: nowrap;
    border-radius: 4px;
}
.btn-sm { padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.btn-lg { padding: 10px 16px; font-size: 18px; line-height: 1.3333333; border-radius: 6px; }
.btn-block { display: block; width: 100%; }

/* Input groups: BS3 wrapped buttons in .input-group-btn */
.input-group-btn { display: flex; }
.input-group-btn > .btn { height: 100%; border-radius: 0; }

/* Navbar: BS3 had a 50px bar with 15px link padding */
.navbar { min-height: 50px; padding: 0; margin-bottom: 20px; }
.navbar > .container { padding-right: 15px; padding-left: 15px; }
.navbar-brand { display: block; padding: 15px; margin-right: 0; font-size: 18px; line-height: 20px; height: 50px; }
@media (min-width: 768px) {
    .navbar > .container .navbar-brand { margin-left: -15px; }
}
.navbar .nav-link { padding: 15px; font-size: 14px; line-height: 20px; }

/* Collapsed navbar: BS3 floated the toggler right inside a full-width
   .navbar-header. Under BS5's flex navbar, .navbar-header shrinks to fit and
   the toggler stacks above the brand, so lay it out explicitly. */
@media (max-width: 1199.98px) {
    .navbar-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex: 1 0 100%;
    }
    .navbar-header .navbar-brand { order: -1; }
    /* flex centring handles vertical placement; the legacy margin double-counts */
    .navbar-header .navbar-toggler { margin-top: 0 !important; margin-bottom: 0 !important; }
}
@media (max-width: 767.98px) {
    .navbar > .container .navbar-header { margin-right: -15px; margin-left: -15px; }
}
/* BS5 forces .5rem side padding via .navbar-expand-xl .navbar-nav .nav-link,
   which outranks the rule above, so match its specificity */
@media (min-width: 1200px) {
    .navbar-expand-xl .navbar-nav .nav-link { padding-right: 15px; padding-left: 15px; }
}
.dropdown-item { padding: 3px 20px; line-height: 1.42857143; font-size: 14px; }

/* Wells (removed in BS5) */
.well { min-height: 20px; padding: 19px; margin-bottom: 20px; }

/* Panels (removed in BS5) */
.panel { margin-bottom: 20px; background-color: #fff; }
.panel-group { margin-bottom: 20px; }
.panel-collapse { border-top: 1px solid #e2e8f0; }

/* List group: BS5 uses smaller padding and drops the bottom margin */
.list-group { margin-bottom: 20px; }
.list-group-item { padding: 10px 15px; }

/* Pagination: BS5 makes it a full-width flex row with 16px text */
.pagination { display: inline-flex; margin: 20px 0; }
.page-link { padding: 6px 12px; font-size: 14px; line-height: 1.42857143; }

/* Contextual colours. These used to restore the old Bootstrap 3 palette
   (#5cb85c green, #d9534f red), which was a third and fourth colour family
   sitting outside the system. They now point at the system's own semantic
   tokens, so a repaint carries here too. .btn-success itself is re-declared
   further down as the CTA button and does not belong to this group. */
.btn-danger { background-color: var(--bad); border-color: var(--bad); color: #fff; }
.btn-danger:hover, .btn-danger:focus, .btn-danger:active { background-color: var(--bad-text); border-color: var(--bad-text); color: #fff; }

.badge { padding: .2em .6em .3em; font-size: 75%; font-weight: 700; line-height: 1; border-radius: .25em; vertical-align: baseline; }
/* --ok-text, not --ok: badge type renders at 75% size, so white on the mid
   green only reached 3.3:1. The dark step carries it to 5.9:1. */
.badge.text-bg-success   { background-color: var(--ok-text) !important; color: #fff !important; }
.badge.text-bg-secondary { background-color: var(--ink-3) !important; color: #fff !important; }

.progress-bar { background-color: var(--accent); }
.progress-bar-success { background-color: var(--ok); }
.progress-bar-warning { background-color: var(--accent); }
.progress-bar-danger  { background-color: var(--bad); }

/* Headings: the site restyles h1-h3 itself, but h4-h6 fell back to BS5's
   larger defaults (h4 24px vs BS3's 18px) */
h4 { font-size: 18px; margin-top: 10px; margin-bottom: 10px; }
h5 { font-size: 14px; margin-top: 10px; margin-bottom: 10px; }
h6 { font-size: 12px; margin-top: 10px; margin-bottom: 10px; }

/* BS5 renders <hr> at 25% opacity */
hr { opacity: 1; border: 0; border-top: 1px solid #e2e8f0; }

/* BS3's img-responsive was display:block; BS5's img-fluid is not, so images
   pick up inline line-height leading and gain phantom vertical space */
.img-fluid { display: block; }

/* ============ end Bootstrap 3 compatibility layer ============ */

/* ===================================================================
   DESIGN SYSTEM
   One accent, one clashing CTA, one radius, one control height.
   Every colour and metric below lives here and nowhere else.
   =================================================================== */

:root {
    /* Accent: blue, hsl(218 94% 52%). Deployed as MASS (the 50px nav strip),
       never as a thin line.

       Blue is the one colour DESIGNER-BRAIN.md tells you not to reach for --
       "the default colour of the commercial web," used by 5 of 62 fleet
       accents -- UNLESS the brief actively demands it. This is that case:
       Cristi asked for blue directly, by name, after the orange and the
       violet both missed. The system's own rule for this situation is to
       still work at peak chroma (85-100% saturation, 45-55% lightness)
       rather than the flat corporate blue every other dictionary already
       uses, so it reads as vivid rather than generic.

       Real fleet anchor: ilex.ro's accent, hsl(217 94% 51%), already sitting
       almost exactly on the chroma peak out of the box -- walked one degree
       to 218 and 52% lightness, nothing more. Contrast on white is 4.9:1,
       the best of any accent tried so far, and high enough that the fill
       carries WHITE text cleanly with no ink-swap needed. */
    --accent:      #1266f8;
    --accent-ink:  #ffffff;

    /* The accent SPLIT into fill vs text. This is the one place we deliberately
       depart from the source designer, and the reason matters:

       #f56520 measures 3.10:1 on white. That is fine on his sites, which are
       product grids where links are sparse and short. This site is a wall of
       words: a dictionary page is hundreds of links stacked in dense lists,
       and low-contrast body text on a reading site kills dwell time, which is
       exactly the metric the ads depend on.

       So --accent stays for MASS (nav strip, buttons, badges, fills) and
       --accent-text carries any accent-coloured TEXT on a light surface.
       Same hue (218deg), lightness walked 52% -> 36%. Measures 8.39:1 on
       white, well past AA, with headroom to spare. */
    --accent-text: #0645b2;

    /* The second colour: warm orange, hsl(34 92% 58%). 176deg from the
       accent, essentially a textbook complementary clash -- sun against sky,
       which is the actual "summer, happy" pairing Cristi asked for, not just
       a rule-of-thumb clash.

       Real fleet anchor: eraft.ro's own CTA colour, hsl(33 91% 57%), which
       is the fleet's own established "cool mass + warm CTA" pattern (eraft's
       brand is a cyan, not blue, but the shape of the pairing -- cool mass,
       orange clash -- is the same one used here with a truer blue).

       White cannot sit on it (2.09:1), so it carries INK labels instead, at
       7.01:1. Same rule as every CTA colour tried before this one: a lit
       second colour carries dark text, never white. See --cta-ink below. */
    --cta:         #f6a131;
    --cta-ink:     #1e293b;   /* label colour on any --cta fill. Never white. */

    /* Ink: near-black, tinted toward the accent's complement (blue). */
    --ink:         #1e293b;
    --ink-2:       #475569;
    --ink-3:       #64748b;   /* muted text on LIGHT surfaces. 4.76:1, passes AA. */
    --on-ink-muted:#94a3b8;   /* muted text on the DARK footer. Needs to stay light. */

    --line:        #e2e8f0;
    --surface:     #ffffff;
    --surface-2:   #f8fafc;

    /* Accent tints. These replace the old blue tints that were hardcoded across
       ~40 lesson and category pages. Each keeps the EXACT lightness of the blue it
       replaces and only rotates the hue to 19deg, so nothing shifts in weight or
       layout, it simply stops being blue. */
    --accent-tint:  #f0f5ff;   /* hsl(218 94% 97%) - panel and callout backgrounds */
    --accent-tint-2:#dce9fe;   /* hsl(218 94% 93%) - icon circles, stronger fills  */
    --accent-line:  #bfd6fd;   /* hsl(218 94% 87%) - tinted borders                */
    --accent-rgb:   18, 102, 248;   /* for rgba() shadows and hover tints */

    /* CTA tints, so the one "practice" callout can read as different without
       introducing a third colour family. Recalculated at the new hue rather
       than copied across, otherwise they go muddy. */
    --cta-tint:     #fef2e2;
    --cta-line:     #fcdbb1;
    --cta-text:     #9d5c07;   /* same split as the accent: the orange is a FILL
                                  colour and is far too light to be read as text,
                                  so text on that tint uses this darker step.
                                  5.29:1 on white, passes. */

    /* Semantic. Right/wrong feedback in the lessons genuinely needs green and red,
       and no amount of brand discipline should override that. */
    --ok:      #16a34a;  --ok-tint:  #dcfce7;  --ok-text:  #166534;
    --bad:     #ef4444;  --bad-tint: #fef2f2;  --bad-text: #991b1b;

    /* The coupling law: buttons and inputs share BOTH of these. */
    --nav-h:        50px;   /* the accent nav strip. Always 50 on every site he builds. */
    --control-h:    50px;
    --control-h-sm: 40px;
    --radius:       6px;
    --radius-in:    5px;   /* nested inside a 1px border */

    /* Two weights. Never a ramp. */
    --w-display: 700;   /* components: nav, buttons, labels, card titles */
    --w-heading: 800;   /* h1/h2 only. His display weights run 700-900. */
    --w-body:    500;

    /* Negative tracking, scaled to size. This is his most recognisable
       typographic tic: the bigger the type, the tighter it is set. Below ~18px
       it goes to zero, because tightening small text just hurts legibility. */
    --ls-h1:  -0.8px;
    --ls-h2:  -0.5px;
    --ls-h3:  -0.3px;
    --ls-lg:  -0.2px;

    /* 5px spacing grid; 10 and 20 do most of the work. */
    --s-1:  5px;
    --s-2: 10px;
    --s-3: 15px;
    --s-4: 20px;
    --s-6: 30px;

    /* One shadow. Straight down, big, soft. */
    /* Two shadows, and only two. --shadow is his card shadow: straight down, big,
       soft. --shadow-sm is for things that genuinely float above the page
       (dropdowns, popovers), where a 40px blur would be absurd. Everything else
       uses a 1px border, the way he does. */
    --shadow: 0 20px 40px rgba(0,0,0,0.10);
    --shadow-sm: 0 2px 12px rgba(30,41,59,0.07);
    --t: 0.3s ease;

    /* --- Retarget Bootstrap's own variables so its rules inherit the system --- */
    --bs-primary: var(--accent);
    --bs-primary-rgb: 18, 102, 248;
    /* Bootstrap's own link rules inherit the readable blue, not the fill blue. */
    --bs-link-color: var(--accent-text);
    --bs-link-color-rgb: 6, 69, 178;
    --bs-link-hover-color: var(--ink);
    --bs-body-font-family: 'Poppins', 'Roboto', sans-serif;
    --bs-body-font-size: 15px;
    --bs-body-font-weight: var(--w-body);
    --bs-body-line-height: 1.35;
    --bs-body-color: var(--ink);
    --bs-emphasis-color: var(--ink);
    --bs-border-color: var(--line);
    --bs-border-radius: var(--radius);
    --bs-border-radius-sm: var(--radius);
    --bs-border-radius-lg: var(--radius);
    --bs-border-radius-xl: var(--radius);
}

/* The "crystal clear text" trick. Grayscale antialiasing removes the colour
   fringing on glyph edges, but also renders type thinner, which is why it only
   works shipped together with the heavy weights below. Both or neither. */
html, body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body {
    font-family: 'Poppins', 'Roboto', sans-serif;
    font-size: 15px;
    line-height: 20px;
    font-weight: var(--w-body);
    color: var(--ink);
    background-color: var(--surface);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ===================================================================
   HEADINGS - the part that actually makes it read as HIS.

   Three things, together, and they only work together:
     1. Heavy (800). 2. Tight leading (~1.2). 3. NEGATIVE tracking that scales
     with size. Big heavy type set loose looks like a template. Big heavy type
     set tight looks designed.

   MOBILE IS DELIBERATELY RESTRAINED. His own mobile builds (extended.ro,
   timoshop, megapet, depozitulcubaterii at 380px) run h1 at 22-30px, never
   larger. He does not blow up headings on phones, because that pushes content
   and ad units below the fold. Size arrives at 768px and up.
   =================================================================== */
h1 { font-size: 26px; line-height: 31px; letter-spacing: var(--ls-h2); font-weight: var(--w-heading); color: var(--ink); margin: 0 0 var(--s-3); }
h2 { font-size: 20px; line-height: 25px; letter-spacing: var(--ls-h3); font-weight: var(--w-heading); color: var(--ink); margin: 0 0 var(--s-3); padding-left: var(--s-3); border-left: 4px solid var(--accent); }
h3 { font-size: 17px; line-height: 22px; letter-spacing: var(--ls-lg); font-weight: var(--w-display); color: var(--ink); margin: 0 0 var(--s-2); }
@media (min-width: 768px) {
    h1 { font-size: 34px; line-height: 41px; letter-spacing: var(--ls-h1); }
    h2 { font-size: 26px; line-height: 32px; letter-spacing: var(--ls-h2); }
    h3 { font-size: 19px; line-height: 24px; }
}

/* THE ACCENT WORD.
   One word of a headline in the accent colour. This component ships on every
   one of his 66 sites and it is the single most recognisable thing he does.
   Wrap any word in a heading in <span> and it lights up. Works everywhere,
   costs nothing where it is not used. */
h1 span, h2 span, h3 span,
.heading span, .accent-word {
    color: var(--accent-text);
    font-weight: inherit;
}
/* icon spans (font-awesome/glyphicon) must not get caught by the rule above */
h1 span[class*="fa-"], h2 span[class*="fa-"], h3 span[class*="fa-"],
h1 span[class*="glyphicon"], h2 span[class*="glyphicon"], h3 span[class*="glyphicon"] { color: inherit; }

/* THE WORD ITSELF, on a dictionary entry page.
   On his e-commerce sites the PRODUCT TITLE is often rendered fully in the
   accent (tralala's is lime, eraft's is cyan). On a dictionary the word IS the
   product, so it gets that treatment: big, heavy, tight, fully accent. */
h1.h1-word {
    color: var(--accent-text);
    font-size: 32px; line-height: 38px;
    letter-spacing: var(--ls-h1);
    font-weight: var(--w-heading);
    margin-bottom: var(--s-1);
}
@media (min-width: 768px) {
    h1.h1-word { font-size: 42px; line-height: 48px; letter-spacing: -1.1px; }
}

/* The homepage h1 is a long SEO string, so it stays modest, but it still gets
   the weight and the tracking. */
.h1-homepage { font-size: 19px; line-height: 25px; letter-spacing: var(--ls-lg); font-weight: var(--w-heading); color: var(--ink); }
@media (min-width: 768px) {
    .h1-homepage { font-size: 24px; line-height: 30px; letter-spacing: var(--ls-h3); }
}

/* Section label. His mega-menu / footer column heading, applied to the homepage
   section dividers: uppercase, heavy, ink, positively tracked. Small caps text
   is the ONE place he tracks OUT instead of in, because at 13px letters need air. */
.section-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding-bottom: var(--s-3);
    font-size: 13px;
    line-height: 18px;
    font-weight: var(--w-heading);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

/* Language flag beside a section-label, so the reader clocks Engleza vs
   Romana before reading the heading text. */
.section-flag {
    display: block;
    flex-shrink: 0;
    height: 22px;
    width: 22px;
}

/* His two-line, weight-jump label. Small muted line over a heavy ink line.
   This is the header account/cart pattern, and it is his most transferable
   small component. Used on the dictionary entry pages and the lesson nav. */
.kicker {
    display: block;
    font-size: 12px; line-height: 16px;
    font-weight: var(--w-display);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

/* Links. --accent-text, not --accent: prose links sit in body copy and have to
   clear 4.5:1. The hover law is unchanged, it still flips to ink. */
a:link, a:visited { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: none; }

/* ===================================================================
   THE COUPLING LAW
   .btn and .form-control share the same height and the same radius.
   This intentionally supersedes the 34px/4px control metrics in the
   BS3 shim above; everything else in that shim still stands.
   =================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* flex drops whitespace-only text nodes, so the gap between an icon and
       its label has to be explicit */
    gap: var(--s-1);
    height: var(--control-h);
    padding: 0 var(--s-4);
    border: 1px solid transparent;
    border-radius: var(--radius);
    font-size: 15px;
    line-height: 1;
    font-weight: var(--w-display);
    white-space: nowrap;
    transition: all var(--t);
}
.btn-sm { height: var(--control-h-sm); padding: 0 var(--s-3); font-size: 14px; border-radius: var(--radius); }
.btn-lg { height: var(--control-h); padding: 0 var(--s-6); font-size: 16px; border-radius: var(--radius); }
.btn-block { display: flex; width: 100%; }

/* CLOSE BUTTON (the nav search panel).
   On his sites the close control is never a bare glyph: it IS a button
   (traditionalfashion literally writes `.close.buton`). So it obeys the coupling
   law like everything else, taking the SAME height and radius as the inputs it
   sits beside. That is what makes the row read as one composition instead of a
   form with a stray "x" floating next to it. Hover flips to ink. */
.btn-close-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    opacity: 1;
    transition: all var(--t);
}
.btn-close-x:hover {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}
/* Nav search panel now uses .home-search-compact (38px) fields, so the close
   button has to shrink to match instead of the site-wide --control-h. */
.btn-close-x.btn-close-x-compact {
    width: 38px;
    height: 38px;
    font-size: 20px;
}
/* Each search field has a small label above it (~20px text + 6px margin), so the
   close button has to be pushed down by that much to sit level with the INPUTS
   rather than with the labels. This was previously a magic 24px inline style. */
.nav-search-close-col { padding-top: 26px; }

@media (max-width: 991.98px) {
    /* Below lg the columns stack, so the button no longer sits beside an input.
       Drop the label offset and let it span the row instead of hanging in space. */
    .nav-search-close-col { padding-top: var(--s-2); }
    .btn-close-x { width: 100%; }
}

.form-control {
    height: var(--control-h);
    padding: 0 var(--s-3);
    font-size: 15px;
    line-height: 20px;
    font-weight: var(--w-body);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
textarea.form-control { height: auto; padding: var(--s-2) var(--s-3); line-height: 22px; }
select.form-control { padding: 0 var(--s-3); }
.form-control:focus { border-color: var(--accent); box-shadow: none; }
.form-control::placeholder { color: var(--ink-3); opacity: 1; }
label { font-weight: 600; color: var(--ink); margin-bottom: var(--s-1); }

/* Search button: the accent, welded into the input (see .input-group below). */
.btn-primary {
    --bs-btn-color: var(--accent-ink);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-hover-bg: var(--ink);
    --bs-btn-hover-border-color: var(--ink);
    --bs-btn-active-color: var(--accent-ink);
    --bs-btn-active-bg: var(--ink);
    --bs-btn-active-border-color: var(--ink);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--accent);
    box-shadow: none;
}

/* The real CTAs (submit a request, confirm an answer, contact) get the
   clashing colour. A CTA in the brand colour disappears into the brand. */
.btn-success,
.btn-success:focus {
    background-color: var(--cta);
    border-color: var(--cta);
    color: var(--cta-ink);   /* ink, not white: the cyan is lit. See --cta-ink. */
}
/* The hover law: flip to ink. Never darken or tint the accent. */
.btn-success:hover,
.btn-success:active {
    background-color: var(--ink);
    border-color: var(--ink);
    color: var(--accent-ink);
}

/* Layout */
.logo-area { background-color: #fff; border-radius: var(--radius); }
.header-background { background-size: cover; background-position: center; height: 70px; border-radius: var(--radius); }
.row-eq-height { display: flex; flex-wrap: wrap; height: 70px; background-color: #fff; border-radius: var(--radius); }
@media (max-width: 768px) {
    .row-eq-height { display: none; }
}
.row-alternate { overflow: hidden; }
[class*=s-height] { margin-bottom: -99999px; padding-bottom: 99999px; }

/* HEADER QUICKLINKS - his account/wishlist/cart cluster (tralala, timebike,
   frameworks: "Bun venit / CONTUL MEU", "0 produse / COSUL MEU"), repurposed
   as shortcuts to the site's 3 most-used lesson pages. Sits in the top white
   bar's empty col-xl-9, which previously had nothing but a background image
   slot.

   Checked against the actual fleet screenshots, not just the written spec:
   the icon is BARE - accent-coloured, no circle, no tint, no fill behind it.
   A pastel tinted circle (the first version of this component) is the wrong
   register; it reads as "friendly consumer app," not his flat, vivid,
   line-icon-next-to-text signature. Two-line label - small sentence-case
   grey hint over a heavy uppercase ink title - thin rules divide the three,
   exactly like the source.
   Desktop only: col-xl-3/9 only sit side by side from 1200px up (the same
   breakpoint the nav collapses at); below that this content already lives
   in the "Invata Engleza" dropdown. */
.header-quicklinks { display: none; }
@media (min-width: 1200px) {
    .header-quicklinks {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 100%;
        gap: var(--s-4);
        padding-right: var(--s-2);
    }
}
.header-quicklink {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding-left: var(--s-4);
    border-left: 1px solid var(--line);
}
.header-quicklink:first-child { border-left: none; padding-left: 0; }
.header-quicklink-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--accent-text);
    font-size: 21px;
    transition: color var(--t);
}
.header-quicklink-label {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.header-quicklink-hint {
    font-size: 12px;
    font-weight: var(--w-body);
    color: var(--ink-3);
}
.header-quicklink-title {
    font-size: 13px;
    font-weight: var(--w-heading);
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    transition: color var(--t);
}
/* The hover law: flip to ink. The icon starts in the accent already, so it
   deepens toward ink instead; the title (which starts ink) gets the accent
   moment on hover, the same trade the rest of the site's links make. */
.header-quicklink:hover .header-quicklink-icon { color: var(--ink); }
.header-quicklink:hover .header-quicklink-title { color: var(--accent-text); }

.bg-alternate-one {
    background-color: var(--surface);
    padding: var(--s-4);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin-bottom: var(--s-2);
}
.bg-alternate-two {
    background-color: var(--surface-2);
    padding: var(--s-4);
    border-radius: var(--radius);
    margin-bottom: var(--s-2);
}

/* Wells */
.well { background-color: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.well-green { background-color: var(--surface-2); padding: var(--s-4); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); }
.well-user { background-color: var(--surface); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--radius); }
.well-upwork { background-color: var(--ink); color: #fff; padding: var(--s-4); border-radius: var(--radius); }
.well-success { background-color: var(--ink); color: #fff; padding: var(--s-4); border-radius: var(--radius); }
/* Sits on a .btn-success, so it follows the CTA label colour, not white.
   The name is kept because two pages reference it in markup. */
.btn-success-white-color { color: var(--cta-ink) !important; white-space: normal !important; word-wrap: break-word; }

/* Navbar responsive.
   Below the xl breakpoint the collapse stays permanently hidden: mobile
   navigation is the #mnav overlay panel instead (see below), never the
   Bootstrap collapse-drop. */
@media (max-width: 1199.98px) {
    .navbar-header { float: none; }
    .navbar-toggler { display: block; }
    .navbar-collapse { display: none !important; }
    .navbar-text { float: none; margin: 15px 0; }
}

/* Burger button styling */
.navbar-toggler {
    border: none !important;
    background: rgba(255,255,255,0.18) !important;
    border-radius: var(--radius) !important;
    padding: 8px 10px !important;
    margin-right: 15px !important;
    margin-top: 10px !important;
    transition: background 0.15s ease;
    line-height: 1;
    box-shadow: none !important;
}
.navbar-toggler:hover,
.navbar-toggler:focus {
    background: rgba(255,255,255,0.3) !important;
}
.navbar-toggler .icon-bar {
    display: block;
    background-color: #fff !important;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    transition: all 0.2s ease;
}
.navbar-toggler .icon-bar + .icon-bar {
    margin-top: 4px;
}

/* MOBILE NAV OVERLAY (.mnav), the designer's fixed mobile-menu recipe.
   A full-bleed opaque white sheet, never a dropdown: nothing exists to tap
   "outside" once it's open, which is exactly why the X close earns its place. */
.mnav {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: var(--surface);
    visibility: hidden;
    opacity: 0;
    transition: opacity var(--t), visibility 0s linear var(--t);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.mnav.is-open {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--t);
}
@media (min-width: 1200px) { .mnav { display: none; } }
body.mnav-locked { overflow: hidden; }

.mnav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--control-h);
    padding: 0 var(--s-3);
    border-bottom: 1px solid var(--line);
}
.mnav-title { font-size: 20px; font-weight: var(--w-heading); color: var(--ink); letter-spacing: var(--ls-h3); }
.mnav-close {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-in);
    background: var(--accent);
    color: #fff;
    font-size: 22px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t);
}
.mnav-close:hover, .mnav-close:focus { background: var(--ink); }

.mnav-body { padding: var(--s-2) 0; }

.mnav-row, .mnav-parent {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: var(--control-h-sm);
    padding: 0 var(--s-3);
    border-bottom: 1px solid var(--line);
    background: none;
    border-left: none; border-right: none; border-top: none;
    text-align: left;
    font-size: 15px;
    font-weight: var(--w-display);
    color: var(--accent-text);
    text-decoration: none;
}
.mnav-row:hover, .mnav-row:focus,
.mnav-parent:hover, .mnav-parent:focus {
    color: var(--accent-text);
    background: var(--surface-2);
}
.mnav-row .m-ico, .mnav-parent .m-ico {
    width: 22px;
    text-align: center;
    margin-right: var(--s-2);
    opacity: 0.85;
}
.mnav-parent .chev {
    margin-left: auto;
    font-size: 13px;
    opacity: 0.7;
    transition: transform var(--t);
}
.mnav-group[data-open] .mnav-parent .chev { transform: rotate(180deg); }

.mnav-sub {
    display: none;
    background: var(--surface-2);
    padding: var(--s-1) 0;
}
.mnav-group[data-open] .mnav-sub { display: block; }
.mnav-sub a {
    display: flex;
    align-items: center;
    padding: 10px var(--s-3) 10px calc(var(--s-3) + 22px + var(--s-2));
    position: relative;
    font-size: 14px;
    font-weight: var(--w-body);
    color: var(--ink-2);
    text-decoration: none;
}
.mnav-sub a .m-ico {
    width: 16px;
    text-align: center;
    margin-right: var(--s-1);
    opacity: 0.7;
    flex: none;
}
.mnav-sub a::before {
    content: '';
    position: absolute;
    left: calc(var(--s-3) + 10px);
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: var(--line);
}
.mnav-sub a:hover { color: var(--accent-text); }

.col-space { margin-bottom: 10px; }

/* French/Italian word list cards */
.word-list-grid .col-space .word-inner {
    display: block;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-2) var(--s-3);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    transition: all var(--t);
}
/* Card hover is a card treatment, not the button hover: border and text to accent. */
.word-list-grid .col-space .word-inner:hover {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent);
}

/* The 50px flat accent nav strip. His signature structural element: a solid
   mass of the brand colour, edge to edge, no gradient, no shadow. */
.navbar {
    background-color: var(--accent) !important;
    border: none !important;
    box-shadow: none;
}
ul.nav a:link, ul.nav a:visited { color: #fff !important; }
ul.nav a:hover { color: #fff !important; }

/* THE CATALOG BLOCK.
   His nav strip is never a uniform bar. A contrasting colour block always
   anchors its left edge: an orange block inside a navy strip on megapet and
   timoshop, a darker-lime block inside the lime strip on tralala. A colour
   block inside a colour block. Here the brand sits in a darker step of the
   accent, which is the same trick tralala uses. Pure CSS, no markup change. */
.navbar-brand {
    color: #fff !important;
    background-color: var(--accent-text);
    height: var(--nav-h, 50px);
    display: flex !important;
    align-items: center;
    padding: 0 var(--s-4) !important;
    margin-right: var(--s-2);
    font-size: 16px;
    font-weight: var(--w-heading) !important;
    letter-spacing: -0.3px;
    transition: background-color var(--t);
}
.navbar-brand:hover {
    color: #fff !important;
    background-color: var(--ink) !important;   /* the hover law: flip to ink */
    opacity: 1;
}
@media (max-width: 1199.98px) {
    /* On mobile the strip collapses to brand + burger, so the block would span
       the full width and stop reading as a block. Drop the block, keep the text.

       The padding must stay at 15px: below 768px the BS3 shim pulls
       .navbar-header out with margin-left:-15px, and the brand's own 15px
       padding is what puts the text back on the container gutter. Zeroing it
       (as I did) is what pinned the title to the screen edge. */
    .navbar-brand {
        background-color: transparent;
        padding: 0 var(--s-3) !important;
        margin-right: 0;
    }
    .navbar-brand:hover { background-color: transparent !important; opacity: 0.9; }
}

/* Navbar links: heavy, per the heaviness law. */
.navbar-inverse .navbar-nav > li > a {
    font-weight: var(--w-display);
    transition: opacity 0.15s ease;
}
.navbar-inverse .navbar-nav > li > a:hover {
    background-color: transparent !important;
    color: #fff !important;
    opacity: 0.8;
}
.navbar-inverse .navbar-nav > li.active > a {
    background-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
.navbar-inverse .navbar-nav > li > a[aria-expanded="true"],
.navbar-inverse .navbar-nav > li > a[aria-expanded="true"]:hover,
.navbar-inverse .navbar-nav > li > a[aria-expanded="true"]:focus {
    background-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}

/* Dropdown: a genuinely elevated surface, so it gets the one shadow. */
.dropdown-menu {
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

/* POPOVERS (the CEFR "Nivel de dificultate" tooltip).
   These were still rendering as stock Bootstrap because every rule the site had
   for them used BOOTSTRAP 3 selectors (.popover.top > .arrow), which simply do
   not exist in Bootstrap 5. The real BS5 hooks are .popover-header,
   .popover-body and .popover-arrow. Restyled here, once, globally. */
.popover {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-family: inherit;
    --bs-popover-border-color: var(--line);
    --bs-popover-border-radius: var(--radius);
    --bs-popover-inner-border-radius: var(--radius-in);
    --bs-popover-header-bg: var(--accent-tint);
    --bs-popover-header-color: var(--ink);
    --bs-popover-body-color: var(--ink-2);
    --bs-popover-max-width: 280px;
}
.popover-header {
    background: var(--accent-tint);
    border-bottom: 1px solid var(--accent-line);
    color: var(--ink);
    font-size: 13px;
    line-height: 18px;
    font-weight: var(--w-heading);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-in) var(--radius-in) 0 0;
}
.popover-body {
    color: var(--ink-2);
    font-size: 14px;
    line-height: 22px;
    font-weight: var(--w-body);
    padding: var(--s-2) var(--s-3);
}
/* The level codes (A1, B2, C1...) read as data, so give them the accent. */
.popover-body strong, .popover-body b { color: var(--accent-text); font-weight: var(--w-display); }
.dropdown-menu li a:link, .dropdown-menu li a:visited {
    color: var(--ink) !important;
}
.dropdown-menu li a:hover {
    background-color: var(--surface-2) !important;
    color: var(--accent) !important;
}
.dropdown-menu > li > a { font-size: 15px; font-weight: 600; }

.modal-dialog { width: 900px !important; }

/* ===================================================================
   THE SEARCH BAR. The site's most important control.
   One 50px unit at one radius: flag, field, and a solid accent button
   WELDED into the right end, inside the input's own border radius.
   Not beside it, not floating.

   overflow stays visible on purpose: the autocomplete panel escapes this
   box, so the weld is done with per-child radii, not by clipping.
   =================================================================== */
.input-group {
    height: var(--control-h);
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    overflow: visible;
    transition: border-color var(--t);
}
.input-group:focus-within { border-color: var(--accent); }

.input-group .input-group-text {
    display: flex;
    align-items: center;
    height: 100%;
    background-color: var(--surface-2);
    border: none;
    border-right: 1px solid var(--line);
    border-radius: var(--radius-in) 0 0 var(--radius-in);
    padding: 0 var(--s-2);
}
.input-group .input-group-text img { height: 16px; width: auto; }

.input-group .form-control {
    height: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    font-size: 15px;
    font-weight: var(--w-body);
    padding: 0 var(--s-3);
}
.input-group .form-control:focus { box-shadow: none; outline: none; border: none; }

/* the button keeps its natural width; the field shrinks instead */
.input-group .input-group-btn { height: 100%; flex-shrink: 0; }
.input-group .input-group-btn .btn {
    height: 100%;
    border: none;
    border-radius: 0 var(--radius-in) var(--radius-in) 0;
    padding: 0 var(--s-4);
    font-size: 15px;
    font-weight: var(--w-display);
    background-color: var(--accent);
    color: var(--accent-ink);
}
.input-group .input-group-btn .btn:hover,
.input-group .input-group-btn .btn:focus,
.input-group .input-group-btn .btn:active {
    background-color: var(--ink);
    color: var(--accent-ink);
}

/* Buttons */
.btn-font-size { font-size: 14px !important; border-radius: var(--radius); }

/* Back to top */
#myBtn {
    display: none;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99;
    width: 40px;
    height: 40px;
    border: none !important;
    outline: none;
    cursor: pointer;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    background-color: var(--accent) !important;
    transition: all var(--t);
    box-shadow: var(--shadow);
    opacity: 0.9;
}
#myBtn:hover { opacity: 1; background-color: var(--ink) !important; }
@media (max-width: 800px) { #myBtn { bottom: 20px; right: 20px; width: 40px; height: 40px; } }

/* Word list buttons - the most visited pages. Heavy, coupled radius,
   and the hover flips to ink like every other button in the system. */
.btn-outline-secondary {
    background-color: var(--surface) !important;
    border: 1px solid var(--line) !important;
    color: var(--ink) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 var(--s-3) !important;
    border-radius: var(--radius) !important;
    transition: all var(--t) !important;
}
.btn-outline-secondary:hover {
    background-color: var(--ink) !important;
    color: #fff !important;
    border-color: var(--ink) !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .col-space { text-align: center; }
}

/* Two-letter combinations page - mobile letter headers.
   His column-heading treatment: uppercase, bold, accent, thin rule under. */
@media (max-width: 991px) {
    .letter-group-header {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        text-align: left !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid var(--line) !important;
        border-radius: 0 !important;
        color: var(--accent-text) !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 0 0 var(--s-1) !important;
        margin-bottom: var(--s-2) !important;
        cursor: default;
        pointer-events: none;
    }
}

/* Pagination */
.pagination .page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--accent);
    border-color: var(--accent);
    cursor: default;
}
.page-link { font-weight: 600; color: var(--ink); }
.page-link:hover { background-color: var(--ink); border-color: var(--ink); color: #fff; }

/* Ads */
.ads {
    margin: 12px 0;
    padding: 6px 0;
    text-align: center;
    overflow: hidden;
    clear: both;
}
@media (max-width: 1024px) {
    .ads { padding-bottom: 20px; }
}

h1 { margin-top: 0; }

/* (.btn-primary is defined with the coupling law above, via --bs-btn-*) */

/* List headers ("in Engleza" / "in Romana") get his column-heading treatment:
   uppercase, bold, accent, with a thin rule under. */
.list-group-item-info,
.list-group-item-success,
.list-group-item-warning,
.list-group-item-danger {
    background-color: var(--surface) !important;
    color: var(--accent-text) !important;
    border-color: var(--line) !important;
    border-bottom: 1px solid var(--line) !important;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.panel { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.panel-heading {
    background-color: var(--surface) !important;
    color: var(--accent-text) !important;
    border-color: var(--line) !important;
    border-radius: var(--radius) var(--radius) 0 0;
    padding: var(--s-2) var(--s-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.panel-title { margin: 0; font-size: 14px; font-weight: 700; }
.panel-body { padding: var(--s-3); }
.panel-default > .panel-heading,
.panel-info > .panel-heading { background-color: var(--surface) !important; color: var(--accent-text) !important; }

.list-group-item { font-weight: 600; }
/* AD SAFETY: his law says links take the accent, but these are dense link
   lists sitting in the sidebar beside ad slots, and a column of coloured
   links is exactly what a sponsored-links unit looks like. Keep them ink and
   let the accent arrive on hover. The accent stays deployed as mass (the nav
   strip, the search button) rather than scattered through link text.

   The selector has to cover BOTH shapes the markup uses:
     <li class="list-group-item"><a>..</a></li>   (descendant)
     <a class="list-group-item">..</a>            (the anchor IS the item)
   Only the first was covered before, so every word link in these cards fell
   through to the global accent and ended up the same colour as the card's own
   heading, which is what made the heading stop reading as a heading. */
.list-group-item a, .list-group-item a:link, .list-group-item a:visited,
a.list-group-item, a.list-group-item:link, a.list-group-item:visited {
    color: var(--ink);
    font-weight: 600;
}
.list-group-item a:hover,
a.list-group-item:hover { color: var(--accent); }
.list-group-item-heading { margin-top: 0; margin-bottom: var(--s-1); font-weight: 700; color: var(--ink); }
.list-group-item-text { margin-bottom: 0; line-height: 20px; font-weight: var(--w-body); }

/* Media object (removed in BS4+, kept as custom layout since it's still used) */
.media { display: flex; align-items: flex-start; margin-top: 15px; }
.media-left { padding-right: 12px; }
.media-body { flex: 1 1 auto; min-width: 0; }
.media-heading { margin-top: 0; margin-bottom: 5px; }

#activate, #activate2, #activate3, #activate4, #activate5, #activate6 {
    margin: 5px 5px 5px 0;
}

/* Footer */
.site-footer {
    background-color: var(--ink);
    color: var(--on-ink-muted);
    padding: var(--s-6) 0 var(--s-4);
    margin-top: var(--s-6);
    font-size: 14px;
    line-height: 20px;
}
.site-footer a, .site-footer a:link, .site-footer a:visited { color: #fff !important; }
.site-footer a:hover { color: var(--accent) !important; }
.footer-top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.footer-brand { color: #cbd5e1; font-size: 14px; max-width: 500px; }
.footer-brand strong { color: #fff; font-weight: var(--w-display); }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.footer-nav a { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.footer-bottom { margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid rgba(255,255,255,0.1); color: var(--on-ink-muted); font-size: 12px; }

/* Breadcrumb */
.breadcrumb-nav {
    font-size: 12px;
    color: var(--ink-3);
    margin-bottom: var(--s-2);
    padding: 0;
    font-weight: 600;
}
.breadcrumb-nav a { color: var(--ink-2) !important; }
.breadcrumb-nav a:hover { color: var(--accent) !important; }
.breadcrumb-nav span { margin: 0 var(--s-1); color: var(--ink-3); }

/* Inline search */
.inline-search {
    margin: var(--s-4) 0;
    padding: var(--s-3) var(--s-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}
.inline-search .input-group { border-color: var(--line); }

/* Match the homepage's compact search height (see .home-search-compact in
   index.php) - full width stays 100%, only the height/font-size shrink. */
.inline-search .input-group { height: 38px; }
.inline-search .input-group .input-group-text { padding: 0 8px; }
.inline-search .input-group .input-group-text img { height: 13px; }
.inline-search .input-group .form-control { font-size: 13px; padding: 0 10px; }
.inline-search .input-group .input-group-btn .btn { font-size: 13px; padding: 0 14px; }

/* Compact search field: smaller than the site-wide coupling-law height for
   spots where two search fields sit stacked (homepage, cauta.php) and read
   as oversized at the default control height. */
.home-search-compact.input-group { height: 38px; }
.home-search-compact .input-group-text { padding: 0 8px; }
.home-search-compact .input-group-text img { height: 13px; }
.home-search-compact .form-control { font-size: 13px; padding: 0 10px; }
.home-search-compact .input-group-btn .btn { font-size: 13px; padding: 0 14px; }

/* Related words */
.related-words { margin: var(--s-4) 0; }
.related-words-list { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-top: var(--s-2); }
.related-words-list a {
    display: inline-flex;
    align-items: center;
    height: var(--control-h);
    padding: 0 var(--s-4);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: all var(--t);
}
.related-words-list a:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}

/* Associated words grid (equal-height cards, no ragged rows) */
/* ONE column on phones.
   Two columns at 380px leaves each cell ~160px, which is narrower than a word
   like "Aproximativ". The cells were then breaking words mid-syllable
   ("Bro/ken", "Doct/or", "Compl/et") because the rule below allowed breaking
   anywhere. A dictionary must never hyphenate a headword: the word IS the
   content. One item per line below 768px, and no mid-word breaks at any size. */
.associated-words-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
    margin-bottom: var(--s-3);
}
@media (min-width: 768px) {
    .associated-words-grid { grid-template-columns: repeat(4, 1fr); }
}
.associated-words-grid a .example-number {
    margin-right: 8px;
    margin-top: 0;
}
.associated-words-grid a {
    display: flex;
    align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-2);
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    color: var(--ink);
    transition: all var(--t);
    /* grid items default to min-width:auto, so a long word would push the
       column past the viewport. min-width:0 lets the cell shrink.
       overflow-wrap: break-word (NOT "anywhere") only breaks a word when it
       genuinely cannot fit on a line of its own, instead of breaking it at the
       first convenient point. That is what was chopping "Broken" into "Bro/ken". */
    min-width: 0;
    overflow-wrap: break-word;
    word-break: normal;
}
.associated-words-grid a:hover {
    background: var(--surface);
    border-color: var(--accent);
    color: var(--accent-text);
}

/* ===================================================================
   THE TRANSLATION CARD. The hero of a word page, and the one place where
   his two-line label with a big weight jump already exists in the markup:

     .word-label   ENGLEZA   small, light, uppercase   (the light line)
     .word-source  House     big, heavy, ink           (the heavy line)
     .word-label   ROMANA
     .word-target  Casa      the payoff, in the accent
   =================================================================== */
/* Caption under the dictionary word. Small, muted, uppercase, tracked: the
   quiet half of his weight-jump pairing, with the word itself as the loud half. */
.word-kicker {
    font-size: 12px;
    line-height: 16px;
    font-weight: var(--w-display);
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 var(--s-4);
}

.translation-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--s-3);
    margin-bottom: var(--s-4);
    background: var(--surface);
    box-shadow: var(--shadow);
}
.translation-card .word-source {
    font-size: 28px;
    line-height: 34px;
    font-weight: var(--w-display);
    color: var(--ink);
    margin: 0 0 var(--s-1);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}
.translation-card .word-label {
    font-size: 12px;
    line-height: 16px;
    font-weight: 600;
    color: var(--ink-3);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--s-1);
}
.translation-card .word-divider {
    border: none;
    border-top: 1px solid var(--line);
    margin: var(--s-2) 0;
}
.translation-card .word-target {
    font-size: 20px;
    line-height: 26px;
    font-weight: var(--w-display);
    color: var(--accent-text);
}
.translation-card .word-target-alt {
    font-size: 15px;
    line-height: 22px;
    font-weight: var(--w-body);
    color: var(--ink-2);
}
/* Icon button: the same box as every other control, so it takes the radius.
   His system never writes border-radius: 50% for a button. */
.translation-card .btn-listen {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    width: var(--control-h-sm);
    height: var(--control-h-sm);
    padding: 0;
    cursor: pointer;
    color: var(--ink-2);
    font-size: 14px;
    transition: all var(--t);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.translation-card .btn-listen:hover {
    background: var(--ink);
    color: #fff;
    border-color: var(--ink);
}
.examples-section {
    margin: var(--s-3) 0;
}
.example-item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    font-size: 15px;
    line-height: 22px;
}
.example-item:last-child { border-bottom: none; }
.example-item .example-en { color: var(--ink); font-weight: var(--w-body); }
.example-item .example-ro { color: var(--ink-2); }
/* His numeric badge: a small filled disc. */
.example-number {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    border: 0;
    color: var(--accent-ink);
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    box-sizing: border-box;
}
.example-text { flex: 1 1 auto; min-width: 0; }
@media (min-width: 768px) {
    .translation-card { max-width: 600px; padding: var(--s-4); }
    .translation-card .word-source { font-size: 34px; line-height: 41px; }
}

/* Alphabet bar */
.alphabet-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    background: var(--surface);
    z-index: 90;
}
.alphabet-bar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink) !important;
    background: var(--surface-2);
    border-radius: var(--radius);
    transition: all var(--t);
}
.alphabet-bar a:hover {
    background: var(--ink);
    color: #fff !important;
}
.alphabet-bar a.active {
    background: var(--accent);
    color: #fff !important;
}
/* Regula de telefon sta obligatoriu dupa cele de mai sus. Are aceeasi
   specificitate, deci daca ar sta inainte ar fi anulata de ele si literele ar
   ramane la 34px pe telefon, sub minimul de 44px pentru o tinta de deget. */
/* Pe telefon bara nu se mai imparte pe patru randuri, sta pe unul singur si se
   trage cu degetul in lateral. Cele 26 de litere ocupau 212 pixeli din primul
   ecran, adica exact spatiul din care se vedea altfel primul cuvant al listei;
   pe un rand ocupa 64. Literele NU se micsoreaza: raman 44 pe 44, minimul pentru
   o tinta de deget, fiindca latimea vine acum din derulare, nu din inghesuit.
   justify-content ramane flex-start: cu center, un rand mai lat decat ecranul
   iese in afara si in stanga, iar partea aceea nu se mai poate derula.
   Ultima litera primeste aer in dreapta, altfel se lipeste de marginea ecranului
   si nu se mai vede ca bara continua. */
@media (max-width: 767px) {
    .alphabet-bar {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--s-1);
        padding: var(--s-2) var(--s-2) var(--s-2) 0;
    }
    .alphabet-bar::-webkit-scrollbar { display: none; }
    .alphabet-bar a { width: 44px; height: 44px; font-size: 15px; flex: 0 0 auto; }

    /* Marginea din care se vede ca bara continua. Fara ea, pe un ecran de 375 de
       pixeli taietura cade la 2 pixeli de litera a opta, adica bara pare ca se
       termina la G si nimeni nu incearca sa o traga. Nu e o culoare noua, e
       aceeasi bara stearsa spre transparent pe 28 de pixeli, pusa numai pe partea
       unde chiar mai sunt litere ascunse. */
    .alphabet-bar-fade-end {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    }
    .alphabet-bar-fade-start {
        -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to left, #000 calc(100% - 28px), transparent 100%);
    }
    .alphabet-bar-fade-start.alphabet-bar-fade-end {
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    }
}

/* Tighter spacing, on the 5px grid */
.row { margin-bottom: 0; }
h1 + .row, h2 + .row { margin-top: var(--s-1); }
hr { margin-top: var(--s-3); margin-bottom: var(--s-3); }
.bg-alternate-one, .bg-alternate-two { padding: var(--s-4); margin-bottom: var(--s-2); }
.well-green, .well-user { margin-bottom: var(--s-2); }
p { margin-bottom: var(--s-2); line-height: 22px; }

/* Word cards - list pages. These are the densest thing on the site, so they
   carry a border and take the accent on hover. Deliberately no shadow here:
   a shadow on 300 tiles turns the page to mush. */
.word-card { display:block; padding: var(--s-2) var(--s-3); background: var(--surface); border:1px solid var(--line); border-radius: var(--radius); text-decoration:none; transition: all var(--t); min-height:40px; }
.word-card:hover { background: var(--surface); border-color: var(--accent); text-decoration:none; }
.word-card-en { display:block; font-size:15px; font-weight:700; color: var(--ink); line-height:20px; }
.word-card:hover .word-card-en { color: var(--accent); }
@media (min-width: 992px) {
    .col-lg-3.col-space { width: 20%; }
}

/* Paginile de combinatie (cuvinte de N litere care incep cu X). Nici o valoare
   noua aici: aceleasi token-uri de spatiu, aceeasi linie, acelasi radius si
   aceeasi bara de litere ca pe restul listelor. Singurul lucru in plus este
   eticheta de deasupra fiecarei bare, pentru ca acum sunt doua bare pe pagina
   si trebuie sa se stie care ce filtreaza. */
/* Bara de litere este lipicioasa (position:sticky, top:0), ceea ce este bine cat
   timp exista una singura pe pagina. Paginile de combinatie au doua, iar indexul
   are peste douazeci, si toate s-ar pinui in acelasi loc, una peste alta, la
   derulare. Pe mobil ar fi acoperit jumatate din ecran. Deci ramane lipicioasa
   doar prima bara de pe pagina, restul stau la locul lor. */
.combo-filtre .alphabet-bar,
.combo-index-grup .alphabet-bar,
.alphabet-bar.alphabet-bar-static { position: static; }

.combo-intro { color: var(--ink-2); margin-bottom: var(--s-2); }
.combo-nav-titlu {
    margin: var(--s-3) 0 var(--s-1);
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
}
.combo-filtre {
    margin: var(--s-3) 0;
    padding-top: var(--s-2);
    border-top: 1px solid var(--line);
}
.combo-legaturi {
    margin: var(--s-3) 0 var(--s-4);
    padding-top: var(--s-2);
    border-top: 1px solid var(--line);
    font-size: 14px;
    color: var(--ink-3);
}
.combo-legaturi a { color: var(--accent-text); }
.combo-sep { color: var(--line); padding: 0 var(--s-1); }
.combo-index-titlu { margin-top: var(--s-6); }
.combo-index-grup { margin-bottom: var(--s-3); }
.combo-index-grup strong { display: block; font-size: 14px; color: var(--ink-3); margin-bottom: var(--s-1); }


/* ===================================================================
   Unealta de filtrare de pe listele dupa lungime.

   Nicio valoare noua: panoul foloseste tenta accentului si linia ei tinta,
   asa cum o face orice panou de pe site, casutele de litera iau exact
   --control-h si --radius ale celorlalte controale, iar rezultatele sunt
   aceleasi .word-card ca lista mare. Legea cuplarii se vede cel mai bine
   aici: casuta de litera, campul de text si butonul au toate 50px si
   aceeasi raza, deci randul citeste ca o singura compozitie.

   Panoul sta ascuns pana cand JavaScript il porneste. Fara asta ar ramane
   in capul paginii un formular care nu face nimic, adica exact lucrul care
   trimite omul inapoi in rezultatele Google.
   =================================================================== */
.filtru { display: none; }
.filtru.gata {
    display: block;
    margin: 0 0 var(--s-3);
    padding: var(--s-3) var(--s-4) var(--s-4);
    background: var(--accent-tint);
    border: 1px solid var(--accent-line);
    border-radius: var(--radius);
}

/* Titlul panoului ia anatomia lui h3, nu pe a lui h2: intr-un panou, bara de
   accent din stanga ar sta lipita de marginea panoului si ar arata ca o eroare
   de aliniere. */
.filtru-titlu {
    font-size: 17px;
    line-height: 22px;
    letter-spacing: var(--ls-lg);
    padding-left: 0;
    border-left: 0;
    margin-bottom: var(--s-1);
}
.filtru-sub {
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: var(--s-3);
}

.filtru-pozitii {
    display: flex;
    gap: var(--s-1);
    margin-bottom: var(--s-3);
}
/* Casutele impart latimea intre ele, dar nu trec de inaltimea controlului: pe
   pagina de 4 litere, patru casute intinse pe tot randul ar arata ca patru
   campuri de text, nu ca literele unui cuvant. */
.filtru-poz {
    flex: 1 1 0;
    min-width: 0;
    max-width: var(--control-h);
    height: var(--control-h);
    padding: 0;
    text-align: center;
    font-family: inherit;
    font-size: 20px;
    line-height: 20px;
    font-weight: var(--w-heading);
    text-transform: uppercase;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    transition: border-color var(--t);
}
.filtru-poz:focus {
    border-color: var(--accent);
    outline: none;
}
.filtru-poz.plin { border-color: var(--accent); }

.filtru-randuri {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
}
.filtru-camp { flex: 1 1 140px; }
.filtru-camp label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--ink-3);
    margin-bottom: var(--s-1);
}
.filtru-camp .form-control { background: var(--surface); }

.filtru-bara {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--accent-line);
}
.filtru-numar {
    font-size: 15px;
    font-weight: var(--w-display);
    color: var(--ink-2);
}
.filtru-numar b { color: var(--accent-text); }

/* Butonul si mesajul de gol sunt ascunse cu atributul hidden. .btn este
   inline-flex, iar display bate hidden, deci fara regula asta butonul ar fi
   vizibil tot timpul. */
.btn[hidden] { display: none; }

.filtru-rezultate { margin-bottom: var(--s-3); }
.filtru-gol {
    padding: var(--s-3);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-2);
}

@media (max-width: 767px) {
    /* Sapte casute, gapuri de 5px si un ecran de 360px: fiecare margine luata
       de la panou se duce direct in latimea casutei, deci aici panoul se
       stramteaza la --s-3. */
    .filtru.gata { padding: var(--s-3); }
}


/* ===================================================================
   Icons. Replaces the two Font Awesome stylesheets that used to load
   from cdnjs, which cost two render-blocking requests plus a webfont
   download of roughly 150 KB before any text could paint.

   Only the 29 icons this site actually uses are included, inlined as
   masks so they still inherit colour from the surrounding text exactly
   the way the font did. The existing <i class="fa fa-search"> markup is
   untouched, and so are the FA4 class names, which is why the v4-shims
   stylesheet is no longer needed either.

   Icons: Font Awesome Free 6.5.2, CC BY 4.0, https://fontawesome.com
   =================================================================== */
.fa,.fas,.far,.fab,.fa-solid,.fa-regular,.fa-brands{
  display:inline-block;width:var(--faw,1em);height:1em;vertical-align:-.125em;
  background-color:currentColor;
  -webkit-mask-image:var(--fai);mask-image:var(--fai);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* fa-spin is an animation, not a glyph, so it has to be kept by hand */
.fa-spin{animation:fa-spin 2s linear infinite}
@keyframes fa-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.fa-spin{animation:none}}
.fa-eye-slash{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L525.6 386.7c39.6-40.6 66.4-86.1 79.9-118.4c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C465.5 68.8 400.8 32 320 32c-68.2 0-125 26.3-169.3 60.8L38.8 5.1zM223.1 149.5C248.6 126.2 282.7 112 320 112c79.5 0 144 64.5 144 144c0 24.9-6.3 48.3-17.4 68.7L408 294.5c8.4-19.3 10.6-41.4 4.8-63.3c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3c0 10.2-2.4 19.8-6.6 28.3l-90.3-70.8zM373 389.9c-16.4 6.5-34.3 10.1-53 10.1c-79.5 0-144-64.5-144-144c0-6.9 .5-13.6 1.4-20.2L83.1 161.5C60.3 191.2 44 220.8 34.5 243.7c-3.3 7.9-3.3 16.7 0 24.6c14.9 35.7 46.2 87.7 93 131.1C174.5 443.2 239.2 480 320 480c47.8 0 89.9-12.9 126.2-32.5L373 389.9z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-search{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E")}
.fa-arrow-right{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-arrow-left{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L109.2 288 416 288c17.7 0 32-14.3 32-32s-14.3-32-32-32l-306.7 0L214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-volume-up{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M533.6 32.5C598.5 85.2 640 165.8 640 256s-41.5 170.7-106.4 223.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C557.5 398.2 592 331.2 592 256s-34.5-142.2-88.7-186.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM473.1 107c43.2 35.2 70.9 88.9 70.9 149s-27.7 113.8-70.9 149c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C475.3 341.3 496 301.1 496 256s-20.7-85.3-53.2-111.8c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zm-60.5 74.5C434.1 199.1 448 225.9 448 256s-13.9 56.9-35.4 74.5c-10.3 8.4-25.4 6.8-33.8-3.5s-6.8-25.4 3.5-33.8C393.1 284.4 400 271 400 256s-6.9-28.4-17.7-37.3c-10.3-8.4-11.8-23.5-3.5-33.8s23.5-11.8 33.8-3.5zM301.1 34.8C312.6 40 320 51.4 320 64V448c0 12.6-7.4 24-18.9 29.2s-25 3.1-34.4-5.3L131.8 352H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h67.8L266.7 40.1c9.4-8.4 22.9-10.4 34.4-5.3z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-info-circle{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336h24V272H216c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z'/%3E%3C/svg%3E")}
.fa-refresh{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160H352c-17.7 0-32 14.3-32 32s14.3 32 32 32H463.5c0 0 0 0 0 0h.4c17.7 0 32-14.3 32-32V80c0-17.7-14.3-32-32-32s-32 14.3-32 32v35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1V432c0 17.7 14.3 32 32 32s32-14.3 32-32V396.9l17.6 17.5 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.7c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352H160c17.7 0 32-14.3 32-32s-14.3-32-32-32H48.4c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z'/%3E%3C/svg%3E")}
.fa-book{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-repeat{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M386.3 160H336c-17.7 0-32 14.3-32 32s14.3 32 32 32H464c17.7 0 32-14.3 32-32V64c0-17.7-14.3-32-32-32s-32 14.3-32 32v51.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0s-87.5 229.3 0 316.8s229.3 87.5 316.8 0c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0c-62.5 62.5-163.8 62.5-226.3 0s-62.5-163.8 0-226.3s163.8-62.5 226.3 0L386.3 160z'/%3E%3C/svg%3E")}
.fa-check{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-trophy{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M400 0H176c-26.5 0-48.1 21.8-47.1 48.2c.2 5.3 .4 10.6 .7 15.8H24C10.7 64 0 74.7 0 88c0 92.6 33.5 157 78.5 200.7c44.3 43.1 98.3 64.8 138.1 75.8c23.4 6.5 39.4 26 39.4 45.6c0 20.9-17 37.9-37.9 37.9H192c-17.7 0-32 14.3-32 32s14.3 32 32 32H384c17.7 0 32-14.3 32-32s-14.3-32-32-32H357.9C337 448 320 431 320 410.1c0-19.6 15.9-39.2 39.4-45.6c39.9-11 93.9-32.7 138.2-75.8C542.5 245 576 180.6 576 88c0-13.3-10.7-24-24-24H446.4c.3-5.2 .5-10.4 .7-15.8C448.1 21.8 426.5 0 400 0zM48.9 112h84.4c9.1 90.1 29.2 150.3 51.9 190.6c-24.9-11-50.8-26.5-73.2-48.3c-32-31.1-58-76-63-142.3zM464.1 254.3c-22.4 21.8-48.3 37.3-73.2 48.3c22.7-40.3 42.8-100.5 51.9-190.6h84.4c-5.1 66.3-31.1 111.2-63 142.3z'/%3E%3C/svg%3E");--faw:1.125em}
.fa-thumbs-up{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M313.4 32.9c26 5.2 42.9 30.5 37.7 56.5l-2.3 11.4c-5.3 26.7-15.1 52.1-28.8 75.2H464c26.5 0 48 21.5 48 48c0 18.5-10.5 34.6-25.9 42.6C497 275.4 504 288.9 504 304c0 23.4-16.8 42.9-38.9 47.1c4.4 7.3 6.9 15.8 6.9 24.9c0 21.3-13.9 39.4-33.1 45.6c.7 3.3 1.1 6.8 1.1 10.4c0 26.5-21.5 48-48 48H294.5c-19 0-37.5-5.6-53.3-16.1l-38.5-25.7C176 420.4 160 390.4 160 358.3V320 272 247.1c0-29.2 13.3-56.7 36-75l7.4-5.9c26.5-21.2 44.6-51 51.2-84.2l2.3-11.4c5.2-26 30.5-42.9 56.5-37.7zM32 192H96c17.7 0 32 14.3 32 32V448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32V224c0-17.7 14.3-32 32-32z'/%3E%3C/svg%3E")}
.fa-pencil{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z'/%3E%3C/svg%3E")}
.fa-sort-numeric-asc{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M450.7 38c-8.3-6-19.1-7.7-28.8-4.4l-48 16c-16.8 5.6-25.8 23.7-20.2 40.5s23.7 25.8 40.5 20.2l5.9-2V160H384c-17.7 0-32 14.3-32 32s14.3 32 32 32h48 48c17.7 0 32-14.3 32-32s-14.3-32-32-32H464V64c0-10.3-4.9-19.9-13.3-26zM160 480c9 0 17.5-3.8 23.6-10.4l88-96c11.9-13 11.1-33.3-2-45.2s-33.3-11.1-45.2 2L192 365.7V64c0-17.7-14.3-32-32-32s-32 14.3-32 32V365.7L95.6 330.4c-11.9-13-32.2-13.9-45.2-2s-13.9 32.2-2 45.2l88 96C142.5 476.2 151 480 160 480zM418.3 307a32 32 0 1 1 27.4 57.9A32 32 0 1 1 418.3 307zM405.1 419.8l-6.8 9.2c-10.5 14.2-7.5 34.2 6.7 44.8s34.2 7.5 44.8-6.7l48.8-65.8c14-18.9 21.5-41.7 21.5-65.2c0-48.6-39.4-88-88-88s-88 39.4-88 88c0 39.2 25.6 72.4 61.1 83.8z'/%3E%3C/svg%3E");--faw:1.125em}
.fa-random{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M403.8 34.4c12-5 25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V160H352c-10.1 0-19.6 4.7-25.6 12.8L284 229.3 244 176l31.2-41.6C293.3 110.2 321.8 96 352 96h32V64c0-12.9 7.8-24.6 19.8-29.6zM164 282.7L204 336l-31.2 41.6C154.7 401.8 126.2 416 96 416H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c10.1 0 19.6-4.7 25.6-12.8L164 282.7zm274.6 188c-9.2 9.2-22.9 11.9-34.9 6.9s-19.8-16.6-19.8-29.6V416H352c-30.2 0-58.7-14.2-76.8-38.4L121.6 172.8c-6-8.1-15.5-12.8-25.6-12.8H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96c30.2 0 58.7 14.2 76.8 38.4L326.4 339.2c6 8.1 15.5 12.8 25.6 12.8h32V320c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c6 6 9.4 14.1 9.4 22.6s-3.4 16.6-9.4 22.6l-64 64z'/%3E%3C/svg%3E")}
.fa-globe{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z'/%3E%3C/svg%3E")}
.fa-gamepad{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M192 64C86 64 0 150 0 256S86 448 192 448H448c106 0 192-86 192-192s-86-192-192-192H192zM496 168a40 40 0 1 1 0 80 40 40 0 1 1 0-80zM392 304a40 40 0 1 1 80 0 40 40 0 1 1 -80 0zM168 200c0-13.3 10.7-24 24-24s24 10.7 24 24v32h32c13.3 0 24 10.7 24 24s-10.7 24-24 24H216v32c0 13.3-10.7 24-24 24s-24-10.7-24-24V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h32V200z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-clock-o{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M464 256A208 208 0 1 1 48 256a208 208 0 1 1 416 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z'/%3E%3C/svg%3E")}
.fa-usd{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M160 0c17.7 0 32 14.3 32 32V67.7c1.6 .2 3.1 .4 4.7 .7c.4 .1 .7 .1 1.1 .2l48 8.8c17.4 3.2 28.9 19.9 25.7 37.2s-19.9 28.9-37.2 25.7l-47.5-8.7c-31.3-4.6-58.9-1.5-78.3 6.2s-27.2 18.3-29 28.1c-2 10.7-.5 16.7 1.2 20.4c1.8 3.9 5.5 8.3 12.8 13.2c16.3 10.7 41.3 17.7 73.7 26.3l2.9 .8c28.6 7.6 63.6 16.8 89.6 33.8c14.2 9.3 27.6 21.9 35.9 39.5c8.5 17.9 10.3 37.9 6.4 59.2c-6.9 38-33.1 63.4-65.6 76.7c-13.7 5.6-28.6 9.2-44.4 11V480c0 17.7-14.3 32-32 32s-32-14.3-32-32V445.1c-.4-.1-.9-.1-1.3-.2l-.2 0 0 0c-24.4-3.8-64.5-14.3-91.5-26.3c-16.1-7.2-23.4-26.1-16.2-42.2s26.1-23.4 42.2-16.2c20.9 9.3 55.3 18.5 75.2 21.6c31.9 4.7 58.2 2 76-5.3c16.9-6.9 24.6-16.9 26.8-28.9c1.9-10.6 .4-16.7-1.3-20.4c-1.9-4-5.6-8.4-13-13.3c-16.4-10.7-41.5-17.7-74-26.3l-2.8-.7 0 0C119.4 279.3 84.4 270 58.4 253c-14.2-9.3-27.5-22-35.8-39.6c-8.4-17.9-10.1-37.9-6.1-59.2C23.7 116 52.3 91.2 84.8 78.3c13.3-5.3 27.9-8.9 43.2-11V32c0-17.7 14.3-32 32-32z'/%3E%3C/svg%3E");--faw:0.625em}
.fa-spinner{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z'/%3E%3C/svg%3E")}
.fa-question-circle{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM169.8 165.3c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E")}
.fa-pencil-square-o{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z'/%3E%3C/svg%3E")}
.fa-paypal{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M111.4 295.9c-3.5 19.2-17.4 108.7-21.5 134-.3 1.8-1 2.5-3 2.5H12.3c-7.6 0-13.1-6.6-12.1-13.9L58.8 46.6c1.5-9.6 10.1-16.9 20-16.9 152.3 0 165.1-3.7 204 11.4 60.1 23.3 65.6 79.5 44 140.3-21.5 62.6-72.5 89.5-140.1 90.3-43.4.7-69.5-7-75.3 24.2zM357.1 152c-1.8-1.3-2.5-1.8-3 1.3-2 11.4-5.1 22.5-8.8 33.6-39.9 113.8-150.5 103.9-204.5 103.9-6.1 0-10.1 3.3-10.9 9.4-22.6 140.4-27.1 169.7-27.1 169.7-1 7.1 3.5 12.9 10.6 12.9h63.5c8.6 0 15.7-6.3 17.4-14.9.7-5.4-1.1 6.1 14.4-91.3 4.6-22 14.3-19.7 29.3-19.7 71 0 126.4-28.8 142.9-112.3 6.5-34.8 4.6-71.4-23.8-92.6z'/%3E%3C/svg%3E");--faw:0.75em}
.fa-paper-plane{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M498.1 5.6c10.1 7 15.4 19.1 13.5 31.2l-64 416c-1.5 9.7-7.4 18.2-16 23s-18.9 5.4-28 1.6L284 427.7l-68.5 74.1c-8.9 9.7-22.9 12.9-35.2 8.1S160 493.2 160 480V396.4c0-4 1.5-7.8 4.2-10.7L331.8 202.8c5.8-6.3 5.6-16-.4-22s-15.7-6.4-22-.7L106 360.8 17.7 316.6C7.1 311.3 .3 300.7 0 288.9s5.9-22.8 16.1-28.7l448-256c10.7-6.1 23.9-5.5 34 1.4z'/%3E%3C/svg%3E")}
.fa-graduation-cap{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-eraser{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M290.7 57.4L57.4 290.7c-25 25-25 65.5 0 90.5l80 80c12 12 28.3 18.7 45.3 18.7H288h9.4H512c17.7 0 32-14.3 32-32s-14.3-32-32-32H387.9L518.6 285.3c25-25 25-65.5 0-90.5L381.3 57.4c-25-25-65.5-25-90.5 0zM297.4 416H288l-105.4 0-80-80L227.3 211.3 364.7 348.7 297.4 416z'/%3E%3C/svg%3E");--faw:1.125em}
.fa-copy{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M208 0H332.1c12.7 0 24.9 5.1 33.9 14.1l67.9 67.9c9 9 14.1 21.2 14.1 33.9V336c0 26.5-21.5 48-48 48H208c-26.5 0-48-21.5-48-48V48c0-26.5 21.5-48 48-48zM48 128h80v64H64V448H256V416h64v48c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V176c0-26.5 21.5-48 48-48z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-comments{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'%3E%3Cpath d='M208 352c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176c0 38.6 14.7 74.3 39.6 103.4c-3.5 9.4-8.7 17.7-14.2 24.7c-4.8 6.2-9.7 11-13.3 14.3c-1.8 1.6-3.3 2.9-4.3 3.7c-.5 .4-.9 .7-1.1 .8l-.2 .2 0 0 0 0C1 327.2-1.4 334.4 .8 340.9S9.1 352 16 352c21.8 0 43.8-5.6 62.1-12.5c9.2-3.5 17.8-7.4 25.3-11.4C134.1 343.3 169.8 352 208 352zM448 176c0 112.3-99.1 196.9-216.5 207C255.8 457.4 336.4 512 432 512c38.2 0 73.9-8.7 104.7-23.9c7.5 4 16 7.9 25.2 11.4c18.3 6.9 40.3 12.5 62.1 12.5c6.9 0 13.1-4.5 15.2-11.1c2.1-6.6-.2-13.8-5.8-17.9l0 0 0 0-.2-.2c-.2-.2-.6-.4-1.1-.8c-1-.8-2.5-2-4.3-3.7c-3.6-3.3-8.5-8.1-13.3-14.3c-5.5-7-10.7-15.4-14.2-24.7c24.9-29 39.6-64.7 39.6-103.4c0-92.8-84.9-168.9-192.6-175.5c.4 5.1 .6 10.3 .6 15.5z'/%3E%3C/svg%3E");--faw:1.25em}
.fa-check-square-o{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 80c-8.8 0-16 7.2-16 16V416c0 8.8 7.2 16 16 16H384c8.8 0 16-7.2 16-16V96c0-8.8-7.2-16-16-16H64zM0 96C0 60.7 28.7 32 64 32H384c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM337 209L209 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L303 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-flag{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z'/%3E%3C/svg%3E");--faw:0.875em}
.fa-star{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M316.9 18C311.6 7 300.4 0 288.1 0s-23.4 7-28.8 18L195 150.3 51.4 171.5c-12 1.8-22 10.2-25.7 21.7s-.7 24.2 7.9 32.7L137.8 329 113.2 474.7c-2 12 3 24.2 12.9 31.3s23 8 33.8 2.3l128.3-68.5 128.3 68.5c10.8 5.7 23.9 4.9 33.8-2.3s14.9-19.3 12.9-31.3L438.5 329 542.7 225.9c8.6-8.5 11.7-21.2 7.9-32.7s-13.7-19.9-25.7-21.7L381.2 150.3 316.9 18z'/%3E%3C/svg%3E");--faw:1.125em}
.fa-tags{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M345 39.1L472.8 168.4c52.4 53 52.4 138.2 0 191.2L360.8 472.9c-9.3 9.4-24.5 9.5-33.9 .2s-9.5-24.5-.2-33.9L438.6 325.9c33.9-34.3 33.9-89.4 0-123.7L310.9 72.9c-9.3-9.4-9.2-24.6 .2-33.9s24.6-9.2 33.9 .2zM0 229.5V80C0 53.5 21.5 32 48 32H197.5c17 0 33.3 6.7 45.3 18.7l168 168c25 25 25 65.5 0 90.5L277.3 442.7c-25 25-65.5 25-90.5 0l-168-168C6.7 262.7 0 246.5 0 229.5zM144 144a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z'/%3E%3C/svg%3E")}
.fa-eye{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M288 32c-80.8 0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7 0 24.6C17.3 304 48.6 356 95.4 399.4C142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1c3.3-7.9 3.3-16.7 0-24.6c-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM144 256a144 144 0 1 1 288 0 144 144 0 1 1 -288 0zm144-64c0 35.3-28.7 64-64 64c-7.1 0-13.9-1.2-20.3-3.3c-5.5-1.8-11.9 1.6-11.7 7.4c.3 6.9 1.3 13.8 3.2 20.7c13.7 51.2 66.4 81.6 117.6 67.9s81.6-66.4 67.9-117.6c-11.1-41.5-47.8-69.4-88.6-71.1c-5.8-.2-9.2 6.1-7.4 11.7c2.1 6.4 3.3 13.2 3.3 20.3z'/%3E%3C/svg%3E");--faw:1.125em}
.fa-chevron-down{--fai:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z'/%3E%3C/svg%3E");--faw:0.875em}