/* =====================================================================================
   LangBee UI - new look ("soft UI" / flat 2.0)
   Shared design system for the step-by-step redesign of all screens.
   Ported from the WocaBee redesign (wocabee_new.css, 2026-10), brand colour = LangBee logo orange.
   Docs: app/data/css/langbee_new.md
   Load AFTER bootstrap + langbee.css; dark mode = langbee_new_dark.css (only redefines tokens).
   All classes are prefixed "lb-" so they never collide with the old styles.
   ===================================================================================== */

:root {
    /* brand + action colours (each action type keeps its colour on every screen) */
    --lb-brand:        #f4782e;   /* LangBee orange (logo) - selected state, highlights */
    --lb-brand-rgb:    244, 120, 46;   /* the same colour for rgba(var(--lb-brand-rgb), .x) */
    --lb-brand-dark:   #de6218;
    --lb-green:        #28a745;   /* create / manual / success */
    --lb-blue:         #007bff;   /* existing data / primary */
    --lb-teal:         #17a2b8;   /* AI */
    --lb-orange:       #e39a1c;   /* textbooks (honey - the brand orange is taken) */
    --lb-dark:         #3d3d3d;   /* topics / neutral strong */
    --lb-excel:        #1d6f42;   /* Excel / file import */
    --lb-red:          #dc3545;   /* deadline / danger */
    --lb-grey:         #6c757d;
    --lb-indigo:       #4f5bb5;   /* settings */
    --lb-purple:       #8e44ad;   /* games */

    /* surfaces + text (warm neutrals from student /class) */
    --lb-surface:      #ffffff;
    --lb-surface-alt:  #f7f9fc;   /* tiles inside a card */
    --lb-surface-warm: #fff3eb;   /* highlighted / "active now" boxes */
    --lb-border:       #EDE4D2;
    --lb-border-cool:  #d9dee3;   /* inputs, segmented buttons */
    --lb-text:         #2e2a22;
    --lb-text-soft:    #41484f;
    --lb-muted:        #8A8272;

    /* shape */
    --lb-radius-sm:    8px;       /* inputs, small buttons */
    --lb-radius:       10px;      /* action buttons */
    --lb-radius-lg:    14px;      /* cards */
    --lb-radius-pill:  999px;

    /* depth */
    --lb-shadow:       0 1px 2px rgba(46, 42, 34, .06), 0 8px 20px -8px rgba(46, 42, 34, .12);
    --lb-shadow-btn:   0 2px 6px rgba(0, 0, 0, .12);
    --lb-shadow-hover: 0 5px 14px rgba(0, 0, 0, .18);
    --lb-focus-ring:   0 0 0 .2rem rgba(var(--lb-brand-rgb), .35);

    /* rhythm */
    --lb-gap:          12px;
    --lb-action-h:     58px;
    --lb-transition:   .15s ease;
}

/* ---------------------------------------------------------------- card */
.lb-card {
    text-align: left;
    background: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow);
    padding: 18px;
    margin-bottom: 20px;
    color: var(--lb-text);
}

/* small uppercase grey caption above a field / section */
.lb-label {
    display: block;
    margin-bottom: 6px;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--lb-muted);
}
.lb-label i { margin-right: 4px; }

/* section heading (icon + title, like "Zoznam balíkov" in student /class) */
.lb-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--lb-text);
}

/* ---------------------------------------------------------------- tile with an accent bar */
.lb-tile {
    --lb-accent: var(--lb-green);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--lb-surface-alt);
    border-left: 4px solid var(--lb-accent);
}
.lb-tile .lb-label i { color: var(--lb-accent); }
.lb-tile--red    { --lb-accent: var(--lb-red); }
.lb-tile--blue   { --lb-accent: var(--lb-blue); }
.lb-tile--brand  { --lb-accent: var(--lb-brand); }

/* ---------------------------------------------------------------- big action buttons
   <div class="lb-actions">
     <div class="lb-action lb-action--green">
        <span class="lb-action-icon"><i class="far fa-keyboard"></i></span>
        <span class="lb-action-label">Text <span class="lb-action-sub">optional subtitle</span></span>
        <span class="lb-action-end"></span>
     </div>
   A row offering a choice = .lb-action-panel (not clickable) + <span class="lb-action-options"> with .lb-pill buttons */
.lb-actions {
    display: flex;
    flex-direction: column;
    gap: var(--lb-gap);
}

.lb-action {
    --lb-c: var(--lb-grey);
    display: grid;                                   /* no Bootstrap display class - its !important beats inline display:none */
    grid-template-columns: 1fr auto 1fr;             /* equal sides = label centred in the whole row */
    align-items: center;
    column-gap: 12px;
    width: 100%;
    min-height: var(--lb-action-h);
    padding: 8px 16px;
    border: 0;
    border-radius: var(--lb-radius);
    background: var(--lb-c);
    color: #fff !important;
    font-size: 1.15rem;
    line-height: 1.3;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: var(--lb-shadow-btn);
    transition: filter var(--lb-transition), transform var(--lb-transition), box-shadow var(--lb-transition);
    user-select: none;
}
.lb-action:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: var(--lb-shadow-hover); }
.lb-action:focus { outline: none; box-shadow: var(--lb-focus-ring); }

.lb-action--green  { --lb-c: var(--lb-green); }
.lb-action--blue   { --lb-c: var(--lb-blue); }
.lb-action--teal   { --lb-c: var(--lb-teal); }
.lb-action--orange { --lb-c: var(--lb-orange); }
.lb-action--dark   { --lb-c: var(--lb-dark); }
.lb-action--excel  { --lb-c: var(--lb-excel); }
.lb-action--red    { --lb-c: var(--lb-red); }
.lb-action--brand  { --lb-c: var(--lb-brand); }

.lb-action--grey  { --lb-c: var(--lb-grey); }
.lb-action--indigo { --lb-c: var(--lb-indigo); }
.lb-action--purple { --lb-c: var(--lb-purple); }
/* rarely used (e.g. archive): faded, dark text */
.lb-action--muted { --lb-c: #c9ced3; color: var(--lb-text-soft) !important; }

/* quiet action on a light background (e.g. logout) */
.lb-action--ghost {
    background: var(--lb-surface);
    color: var(--lb-text-soft) !important;
    border: 1px solid var(--lb-border-cool);
    box-shadow: none;
}
.lb-action--ghost:hover { filter: none; background: var(--lb-surface-alt); }
/* logout: quiet at rest, a red hint when pointed at */
.lb-action--exit:hover,
.lb-action--exit:focus { color: var(--lb-red) !important; border-color: rgba(220, 53, 69, .45); background: rgba(220, 53, 69, .06); }

.lb-action--sm { min-height: 44px; font-size: 1rem; }

/* tiles side by side (2 columns from 768px), e.g. the tools on a dashboard */
.lb-actions--grid { display: grid; grid-template-columns: 1fr; }
.lb-actions--grid .lb-action { font-size: 1.05rem; }
@media (min-width: 768px) {
    .lb-actions--grid { grid-template-columns: 1fr 1fr; }
    .lb-actions--grid > .lb-action--wide { grid-column: 1 / -1; }
    /* an odd last tile (or a single one) takes the whole row instead of half of it */
    .lb-actions--grid > .lb-action:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.lb-action-icon { justify-self: start; width: 30px; text-align: center; font-size: 1.35rem; }
.lb-action-end  { justify-self: end; font-size: 1.35rem; }   /* an icon in the end slot sits at the right edge */
.lb-action-label { min-width: 0; }
.lb-action-sub { display: block; margin-top: 3px; font-size: .72rem; opacity: .95; }

/* JS toggles .disabled (e.g. "submit" until a rating is picked) */
.lb-action.disabled, .lb-action:disabled,
.lb-action:disabled:hover,
.lb-action.disabled:hover { opacity: .5; cursor: default; filter: none; transform: none; box-shadow: var(--lb-shadow-btn); }

.lb-action-panel,
.lb-action-panel:hover { cursor: default; filter: none; transform: none; box-shadow: var(--lb-shadow-btn); }

.lb-action-options { justify-self: end; display: flex; gap: 6px; }

/* ---------------------------------------------------------------- pills
   .lb-pill        translucent, for coloured backgrounds (inside .lb-action)
   .lb-pill--light white with coloured text, for light backgrounds */
.lb-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 7.8em;
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: var(--lb-radius-pill);
    background: rgba(255, 255, 255, .16);
    color: #fff !important;
    font-size: .85rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: background var(--lb-transition), color var(--lb-transition), transform var(--lb-transition);
}
.lb-pill:hover,
.lb-pill:focus { background: #fff; color: var(--lb-c, var(--lb-blue)) !important; transform: translateY(-1px); outline: none; }

.lb-pill--light {
    border-color: var(--lb-border-cool);
    background: var(--lb-surface);
    color: var(--lb-text-soft) !important;
}
.lb-pill--light:hover,
.lb-pill--light:focus { background: var(--lb-surface-alt); color: var(--lb-text) !important; }
.lb-pill.disabled, .lb-pill:disabled { opacity: .45; pointer-events: none; }   /* JS toggles .disabled / disabled */

/* ---------------------------------------------------------------- segmented filter (student /class "Na splnenie / Hotové ...") */
.lb-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-seg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--lb-border-cool);
    border-radius: var(--lb-radius-pill);
    background: var(--lb-surface);
    color: var(--lb-text-soft);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
}
.lb-seg-btn:not(.active):hover { background: var(--lb-surface-alt); }
.lb-seg-btn.active { background: var(--lb-brand); border-color: var(--lb-brand); color: #fff; }
.lb-seg-btn.active:hover { background: var(--lb-brand-dark); border-color: var(--lb-brand-dark); }
.lb-seg-btn:disabled { opacity: .45; cursor: default; }

/* ---------------------------------------------------------------- form fields */
.lb-field .form-control,
.lb-field .input-group-text {
    border-color: var(--lb-border-cool);
}
.lb-field .form-control { border-radius: var(--lb-radius-sm); font-weight: 600; }
.lb-field .form-control:focus { border-color: var(--lb-brand); box-shadow: var(--lb-focus-ring); }
.lb-field .input-group > .form-control { border-radius: 0 var(--lb-radius-sm) var(--lb-radius-sm) 0; }
.lb-field .input-group-text { background: var(--lb-surface); color: var(--lb-grey); border-radius: var(--lb-radius-sm) 0 0 var(--lb-radius-sm); }
.lb-field .form-control[readonly].datepicker { background-color: var(--lb-surface) !important; cursor: pointer; text-align: center; }

/* ---------------------------------------------------------------- notices (messages, requests, results)
   <div class="alert lb-notice lb-notice--info">            .alert only where Bootstrap's data-dismiss="alert" must work
     <a href="#" class="close lb-notice-close" data-dismiss="alert">&times;</a>
     <span class="lb-notice-icon"><i class="fas fa-bullhorn"></i></span>
     <div class="lb-notice-body"><div class="lb-notice-title">Title</div><div class="lb-notice-text">...</div>
       <div class="lb-notice-actions"><span class="lb-pill lb-pill--solid lb-pill--green">OK</span></div></div>
   </div> */
.lb-notice {
    --lb-n: var(--lb-blue);
    --lb-n-soft: rgba(0, 123, 255, .12);
    position: relative;
    display: flex;
    align-items: center;   /* short texts sit in the middle of the icon */
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 16px;
    text-align: left;
    background: linear-gradient(135deg, var(--lb-n-soft) 0%, transparent 65%), var(--lb-surface);   /* tinted by type */
    border: 1px solid var(--lb-border);
    border-left: 5px solid var(--lb-n);
    border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow);
    color: var(--lb-text);
}
.lb-notice--info    { --lb-n: var(--lb-blue);  --lb-n-soft: rgba(0, 123, 255, .12); }
.lb-notice--success { --lb-n: var(--lb-green); --lb-n-soft: rgba(40, 167, 69, .13); }
.lb-notice--warning { --lb-n: var(--lb-brand); --lb-n-soft: rgba(var(--lb-brand-rgb), .16); }
.lb-notice--danger  { --lb-n: var(--lb-red);   --lb-n-soft: rgba(220, 53, 69, .12); }
.lb-notice:not(:has(> .lb-notice-icon)) { display: block; }   /* text-only notice (text + <b> ...) - flex would split it into columns */

.lb-notice-icon {
    flex: 0 0 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--lb-surface);
    box-shadow: 0 0 0 3px var(--lb-n-soft);
    color: var(--lb-n);
    font-size: 1.1rem;
}
.lb-notice-body { flex: 1 1 auto; min-width: 0; }
.lb-notice-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; padding-right: 30px; font-weight: 800; }
.lb-notice-text { font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.lb-notice-text img { max-width: 100%; height: auto; }
.lb-notice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.lb-notice-close,
.lb-notice-close.close {           /* beats Bootstrap's .close (float, opacity, text-shadow) */
    position: absolute;
    top: 10px;
    right: 10px;
    float: none;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border-radius: 50%;
    background: var(--lb-surface-alt);
    color: var(--lb-muted);
    opacity: 1;
    text-shadow: none;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
}
.lb-notice-close:hover { color: var(--lb-text); background: var(--lb-border); text-decoration: none; }

/* solid pills for actions on light surfaces (approve / reject ...) */
.lb-pill--solid { --lb-c: var(--lb-blue); background: var(--lb-c); border-color: var(--lb-c); color: #fff !important; min-width: 0; }
.lb-pill--solid:hover, .lb-pill--solid:focus { background: var(--lb-c); color: #fff !important; filter: brightness(1.08); }
.lb-pill--green { --lb-c: var(--lb-green); }
.lb-pill--red   { --lb-c: var(--lb-red); }

/* ---------------------------------------------------------------- list item card (a class, a file, ...)
   <a class="lb-item" href="...">                       <div class="lb-item"> when not clickable
     <img class="lb-item-flag" src="flags/en.svg">      or <span class="lb-item-icon"><i ...></i></span>
     <span class="lb-item-body"><span class="lb-item-title">Name</span><span class="lb-item-sub">...</span></span>
     <span class="lb-item-end"><i class="fas fa-chevron-right"></i></span>   or pills
   </a>
   .lb-item--muted = inactive (archive, not valid yet) */
.lb-items { display: flex; flex-direction: column; gap: 10px; }
.lb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 16px;
    background: var(--lb-surface);
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-lg);
    box-shadow: var(--lb-shadow);
    color: var(--lb-text) !important;
    text-align: left;
    text-decoration: none !important;
    transition: box-shadow var(--lb-transition), transform var(--lb-transition);
}
a.lb-item:hover { box-shadow: var(--lb-shadow-hover); transform: translateY(-1px); }
.lb-item-flag { flex: 0 0 auto; width: 30px; height: auto; border-radius: 3px; box-shadow: var(--lb-shadow-btn); }
.lb-item-icon { flex: 0 0 30px; text-align: center; font-size: 1.3rem; color: var(--lb-muted); }
.lb-item-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.lb-item-title { font-weight: 700; font-size: 1.05em; overflow-wrap: break-word; }
.lb-item-sub { display: flex; flex-wrap: wrap; gap: 6px; font-size: .8rem; color: var(--lb-muted); }
.lb-item-end { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; color: var(--lb-muted); font-size: 1.1rem; }
a.lb-item:hover .lb-item-end { color: var(--lb-brand); }
.lb-item--muted { background: var(--lb-surface-alt); box-shadow: none; }
.lb-item--muted .lb-item-flag { filter: grayscale(.6); opacity: .8; }

/* small info chip (dates, counts) - inside .lb-item-sub, cards ... */
.lb-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 2px 9px; border-radius: var(--lb-radius-pill);
    background: var(--lb-surface-alt); border: 1px solid var(--lb-border);
    font-size: .78rem; color: var(--lb-text-soft); white-space: nowrap;
}

/* ---------------------------------------------------------------- table (inside a .lb-card)
   <table class="table lb-table"> - works with Bootstrap .table / .table-striped and DataTables */
.lb-table { width: 100%; margin: 0; color: var(--lb-text); background: transparent; border-collapse: separate; border-spacing: 0; }
.lb-table thead, .lb-table thead tr { background: transparent !important; }   /* langbee_dark.css paints thead grey */
.lb-table tr { background-color: transparent; }   /* langbee.css gives every tr a white wash - visible on dark cards */
.lb-table thead th,
.lb-table > thead > tr > th {
    padding: 6px 8px 8px;
    border-top: 0;
    border-bottom: 1px solid var(--lb-border) !important;
    background: transparent;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--lb-muted);
    white-space: nowrap;
    vertical-align: bottom;
}
.lb-table td { padding: 10px 8px; border-top: 1px solid var(--lb-border); vertical-align: middle; background: transparent; }
.lb-table tbody tr:first-child td { border-top: 0; }
.lb-table.table-striped tbody tr:nth-of-type(odd),
.lb-table tbody tr.odd,
.lb-table tbody tr.even { background: transparent; }
.lb-table tbody tr:hover td { background: var(--lb-surface-alt); }

/* ---------------------------------------------------------------- tile menu (like the student /class menu)
   <div class="lb-menu-title">Section</div>
   <div class="lb-menu">
     <a class="lb-menu-item lb-menu-item--green" href="...">
        <span class="lb-menu-tag"><i class="fa-solid fa-star"></i>AI</span>      optional corner tag
        <i class="fas fa-boxes-stacked"></i>
        <span class="lb-menu-label">Packages <span class="lb-menu-badge">12</span></span>
     </a>
   Pastel tile = the action colour mixed into the surface, so dark mode works by itself. */
.lb-menu-title {
    margin: 14px 0 6px 2px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--lb-muted);
    text-align: left;
}
.lb-menu-title:first-child { margin-top: 0; }
/* columns follow the width of the box (not the window): wrap title + grid in .lb-menu-box */
.lb-menu-box { container-type: inline-size; }
.lb-menu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@container (min-width: 380px) { .lb-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container (min-width: 600px) { .lb-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lb-menu-item {
    --lb-c: var(--lb-grey);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 54px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, var(--lb-c) 28%, transparent);
    border-radius: var(--lb-radius);
    background: color-mix(in srgb, var(--lb-c) 11%, var(--lb-surface));
    color: var(--lb-text) !important;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform var(--lb-transition), box-shadow var(--lb-transition), background var(--lb-transition);
}
.lb-menu-item:hover,
.lb-menu-item:focus { transform: translateY(-1px); box-shadow: var(--lb-shadow-btn); background: color-mix(in srgb, var(--lb-c) 17%, var(--lb-surface)); outline: none; }
.lb-menu-item > i { flex: 0 0 auto; font-size: 1.15rem; color: var(--lb-c); }
.lb-menu-label { min-width: 0; overflow-wrap: break-word; }
.lb-menu-badge {
    display: inline-block; min-width: 18px; padding: 0 5px;
    border-radius: var(--lb-radius-pill);
    background: color-mix(in srgb, var(--lb-c) 22%, transparent);
    font-size: .7rem; font-weight: 700; line-height: 17px; white-space: nowrap; vertical-align: 1px;
}
.lb-menu-tag {
    position: absolute; top: -1px; left: -1px;
    padding: 1px 6px;
    border-radius: var(--lb-radius) 0 var(--lb-radius) 0;
    background: var(--lb-green); color: #fff;
    font-size: .62rem; font-weight: 700; line-height: 14px; letter-spacing: .05em;
    pointer-events: none;
}
.lb-menu-tag i { font-size: .55rem; margin-right: 3px; vertical-align: 1px; }
.lb-menu-item.disabled { opacity: .45; pointer-events: none; }
.lb-menu-item--green  { --lb-c: var(--lb-green); }
.lb-menu-item--blue   { --lb-c: var(--lb-blue); }
.lb-menu-item--teal   { --lb-c: var(--lb-teal); }
.lb-menu-item--orange { --lb-c: var(--lb-orange); }
.lb-menu-item--red    { --lb-c: var(--lb-red); }
.lb-menu-item--brand  { --lb-c: var(--lb-brand); }
.lb-menu-item--indigo { --lb-c: var(--lb-indigo); }
.lb-menu-item--dark   { --lb-c: var(--lb-dark); }
.lb-menu-item--grey   { --lb-c: var(--lb-grey); }
.lb-menu-item--purple { --lb-c: var(--lb-purple); }
@media (max-width: 575px) {
    .lb-menu-item { min-height: 50px; font-size: .82rem; gap: 5px; padding: 5px 6px; }
    .lb-menu-item > i { font-size: 1.05rem; }
}

/* ---------------------------------------------------------------- hero tile = the main action of a screen + related sub-links
   <div class="lb-hero lb-hero--green">
     <a class="lb-hero-main" href="..."><i class="fas fa-boxes-stacked"></i><span class="lb-hero-label">Packages <span class="lb-menu-badge">4</span>
        <span class="lb-hero-sub">optional subtitle</span></span><i class="fas fa-chevron-right lb-hero-go"></i></a>
     <div class="lb-hero-links"><a class="lb-pill lb-pill--light" href="...">...</a> ...</div>
   </div> */
.lb-hero {
    --lb-c: var(--lb-green);
    padding: 12px 14px;
    border: 1px solid color-mix(in srgb, var(--lb-c) 30%, transparent);
    border-radius: var(--lb-radius-lg);
    background: color-mix(in srgb, var(--lb-c) 10%, var(--lb-surface));
    text-align: left;
}
.lb-hero--green { --lb-c: var(--lb-green); }
.lb-hero-main {
    display: flex; align-items: center; gap: 12px;
    color: var(--lb-text) !important; text-decoration: none !important;
}
.lb-hero-main > i:first-child {
    flex: 0 0 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--lb-c); color: #fff; font-size: 1.35rem;
    box-shadow: var(--lb-shadow-btn);
    transition: transform var(--lb-transition);
}
.lb-hero-main:hover > i:first-child { transform: translateY(-1px) scale(1.03); }
.lb-hero-label { flex: 1 1 auto; min-width: 0; font-size: 1.2rem; font-weight: 800; line-height: 1.2; }
.lb-hero-sub { display: block; margin-top: 2px; font-size: .78rem; font-weight: 500; color: var(--lb-muted); }
.lb-hero-go { flex: 0 0 auto; color: var(--lb-c); font-size: 1.1rem; transition: transform var(--lb-transition); }
.lb-hero-main:hover .lb-hero-go { transform: translateX(3px); }
.lb-hero-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-left: 58px; }
.lb-hero-links .lb-pill { min-width: 0; padding: 5px 11px; font-size: .8rem; }
.lb-hero-links .lb-pill > i { color: var(--lb-c); }
.lb-hero-links .lb-pill.disabled { opacity: .45; pointer-events: none; }
@media (max-width: 575px) { .lb-hero-links { padding-left: 0; } }

/* a quiet row of small extra links ("Bonus: ...") */
.lb-extras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; text-align: left; }
.lb-extras .lb-menu-title { flex-basis: 100%; margin: 0 0 0 2px; }   /* section title on its own line, like the other sections */
.lb-extras .lb-pill { min-width: 0; padding: 5px 11px; font-size: .8rem; }

/* ---------------------------------------------------------------- student list (rank | name | extras | LangPoints | packages | buttons)
   <div class="lb-students">
     <div class="lb-srow lb-srow--head">...</div>
     <div class="lb-srow [lb-srow--me]">
        <span class="lb-srow-rank">🥇 / 4.</span>
        <span class="lb-srow-name">Name <i class="status-icon ..."></i></span>
        <span class="lb-srow-extra">BeeDays pill</span>
        <span class="lb-srow-wp"><span class="lb-srow-wpPill">279 <small class="lb-srow-wpUnit">LangPoints</small></span></span>
        <span class="lb-srow-pkg"><span class="lb-srow-pkgNum"><b>1</b> / 4</span><span class="lb-bar"><span class="lb-bar-fill" style="width:25%"></span></span></span>
        <span class="lb-srow-btns"><a class="lb-round-btn" ...><i class="fas fa-envelope"></i></a></span>
     </div>
   Two lines when the card is narrow (container query). */
.lb-students { container-type: inline-size; }
.lb-srow {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 62px 92px 112px 76px;
    align-items: center;
    column-gap: 10px;
    padding: 8px 6px;
    border-top: 1px solid var(--lb-border);
    text-align: left;
    color: var(--lb-text);
}
.lb-srow:not(.lb-srow--head):hover { background: var(--lb-surface-alt); border-radius: var(--lb-radius-sm); }
.lb-srow--head {
    border-top: 0;
    padding-bottom: 4px;
    font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--lb-muted);
}
.lb-srow--me { font-weight: 700; }
.lb-srow-rank { text-align: center; font-weight: 700; color: var(--lb-muted); }
.lb-srow-medal { font-size: 1.25rem; line-height: 1; }
.lb-srow-name { font-weight: 600; overflow-wrap: break-word; }
.lb-srow-name .status-icon { margin-left: 5px; font-size: .6rem; vertical-align: 2px; }
.lb-srow-extra, .lb-srow-wp, .lb-srow--head .lb-srow-pkg { text-align: center; }
.lb-srow-wpPill {
    display: inline-block; min-width: 54px; padding: 2px 10px;
    border-radius: var(--lb-radius-pill);
    background: var(--lb-surface-warm); border: 1px solid var(--lb-border);
    font-weight: 700; text-align: center;
}
.lb-srow-wpUnit { display: none; font-size: .7rem; font-weight: 600; color: var(--lb-muted); }
.lb-srow-pkg { display: flex; flex-direction: column; gap: 4px; }
.lb-srow-pkgNum { font-size: .9rem; text-align: center; }
.lb-srow-pkgNum.done { color: var(--lb-green); font-weight: 700; }
.lb-srow-btns { display: flex; justify-content: flex-end; gap: 6px; }
.lb-bar { display: block; height: 6px; border-radius: var(--lb-radius-pill); background: var(--lb-surface-alt); border: 1px solid var(--lb-border); overflow: hidden; }
.lb-bar-fill { display: block; height: 100%; border-radius: var(--lb-radius-pill); background: var(--lb-green); }
.lb-bar-fill--low { background: var(--lb-brand); }
.lb-round-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--lb-surface); border: 1px solid var(--lb-border-cool);
    color: var(--lb-grey) !important; font-size: .9rem; text-decoration: none !important;
    transition: transform var(--lb-transition), color var(--lb-transition), border-color var(--lb-transition);
}
.lb-round-btn i { color: inherit !important; }
.lb-round-btn:hover { transform: translateY(-1px); color: var(--lb-blue) !important; border-color: var(--lb-blue); }
.lb-round-btn--green { color: var(--lb-green) !important; }
.lb-round-btn--green:hover { color: var(--lb-green) !important; border-color: var(--lb-green); }
/* "show the detail" (student, package): light blue with a magnifier - the same as the package detail on /student/class */
.lb-round-btn--detail { background: #e8f1fd; border-color: #cfe0f8; color: #1d6fd6 !important; font-size: .8rem; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.lb-round-btn--detail:hover, .lb-round-btn--detail:focus { background: var(--lb-blue); border-color: var(--lb-blue); color: #fff !important; }
@container (max-width: 560px) {
    .lb-srow--head { display: none; }
    .lb-srow {
        grid-template-columns: 30px minmax(0, 1fr) auto;
        grid-template-areas: "rank name btns" ". stats pkg";
        row-gap: 6px; column-gap: 8px;
    }
    .lb-srow-rank { grid-area: rank; }
    .lb-srow-name { grid-area: name; }
    .lb-srow-btns { grid-area: btns; }
    .lb-srow-extra { display: none; }                         /* shown inside .lb-srow-stats instead */
    .lb-srow-wp   { grid-area: stats; text-align: left; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
    .lb-srow-wpUnit { display: inline; }
    .lb-srow-pkg  { grid-area: pkg; width: 104px; }
}
.lb-srow-wp .lb-srow-extraMobile { display: none; }
@container (max-width: 560px) { .lb-srow-wp .lb-srow-extraMobile { display: inline-flex; } }

/* ---------------------------------------------------------------- badges / counters */
.lb-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 7px;
    border-radius: var(--lb-radius-pill);
    background: rgba(0, 0, 0, .08);
    font-size: .75rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------- dashboards (/teacher, /student)
   top bar, logo, welcome panel with the orange glow, info chips, sections, footer */
.lbDash { padding-top: 12px; }

.lbDash-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.lbDash-top .lb-pill { min-width: 0; }
.lbDash-inbox {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--lb-surface); border: 1px solid var(--lb-border-cool);
    color: var(--lb-text-soft); font-size: 1.15rem; box-shadow: var(--lb-shadow-btn);
    transition: transform var(--lb-transition);
}
.lbDash-inbox:hover { color: var(--lb-blue); transform: translateY(-1px); text-decoration: none; }

.lbDash-logo { display: block; margin: 0 auto 14px; max-width: 100%; cursor: pointer; }

/* welcome panel - information only, so it must not look like a clickable card:
   brand-tinted, no shadow, no hover; every few seconds an orange glow sweeps across it */
.lbDash-hello {
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: 20px;
    padding: 16px 18px;
    border-radius: var(--lb-radius-lg);
    background: linear-gradient(135deg, rgba(var(--lb-brand-rgb), .18) 0%, rgba(var(--lb-brand-rgb), .05) 100%);
    border: 1px solid rgba(var(--lb-brand-rgb), .35);
    color: var(--lb-text);
}
.lbDash-hello > * { position: relative; z-index: 1; }
.lbDash-hello::after {
    content: "";
    position: absolute; top: 0; left: -45%;
    width: 35%; height: 100%;
    background: linear-gradient(100deg, transparent 0%, rgba(var(--lb-brand-rgb), .35) 45%, rgba(255, 196, 160, .55) 50%, rgba(var(--lb-brand-rgb), .35) 55%, transparent 100%);
    transform: skewX(-20deg);
    filter: blur(2px);
    animation: lbHelloGlow 6s ease-in-out infinite;
    animation-delay: 1.2s;
    pointer-events: none;
    z-index: 0;
}
@keyframes lbHelloGlow { 0% { left: -45%; } 30%, 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .lbDash-hello::after { animation: none; display: none; } }
.lbDash-helloTitle { font-size: 1.5rem; line-height: 1.3; margin-bottom: 10px; }

.lbDash-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.lbDash-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--lb-radius-pill);
    background: var(--lb-surface-warm); border: 1px solid var(--lb-border);
    font-size: .85rem; color: var(--lb-text-soft);
}
.lbDash-hello .lbDash-chip { background: var(--lb-surface); border-color: rgba(var(--lb-brand-rgb), .3); }

.lbDash-section { margin: 22px 0; }
.lbDash-section > .lb-heading { justify-content: flex-start; }
.lbDash-section > .lb-heading i { color: var(--lb-brand); }

.lbDash-account { margin-top: 22px; }
.lbDash-footer { padding-top: 25px; color: var(--lb-muted); }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 767px) {
    .lb-card { padding: 14px 12px; }
    /* a row with a choice: the pills go under the label, sharing the width */
    .lb-action-panel { grid-template-columns: 30px 1fr 30px; row-gap: 8px; }
    .lb-action-panel .lb-action-options { grid-column: 1 / -1; justify-self: stretch; }
    .lb-action-panel .lb-pill { flex: 1 1 0; min-width: 0; }
}

@media (max-width: 575px) {
    .lb-action { grid-template-columns: 24px 1fr 24px; font-size: 1rem; padding: 8px 12px; column-gap: 8px; }
    .lb-action-icon { width: 24px; font-size: 1.15rem; }
    .lb-action-end  { font-size: 1.15rem; }
    .lb-action-sub  { font-size: .7rem; }
}

/* ---------------------------------------------------------------- breadcrumb + page heading
   a page heading right under the breadcrumb is centred, and the breadcrumb drops its last item
   (it would repeat the heading): "home / class" on the left, the page name in the middle */
.lbDash > nav[aria-label="breadcrumb"] + .lb-heading,
.lbDash > nav[aria-label="breadcrumb"] + style + .lb-heading { justify-content: center; }   /* breadcrumb.php prints a <style> after the nav */
.lbDash > nav[aria-label="breadcrumb"]:has(+ .lb-heading, + style + .lb-heading) .breadcrumb-item:last-child { display: none; }

/* ---------------------------------------------------------------- toggles
   modern iOS-like look for the old <label class="switch"><input type="checkbox"><span class="slider round"></span></label>
   put .lb-toggles on any wrapper: off = quiet grey (not red), on = green */
.lb-toggles .switch { width: 48px; height: 28px; margin: 4px 0 0; }
.lb-toggles .slider { background-color: #c9ced3; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .12); }
.lb-toggles .slider:before { width: 22px; height: 22px; left: 3px; bottom: 3px; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
.lb-toggles input:checked + .slider { background-color: var(--lb-green); }
.lb-toggles input:checked + .slider:before { transform: translateX(20px); }
.lb-toggles input:focus-visible + .slider { box-shadow: var(--lb-focus-ring); }

/* ---------------------------------------------------------------- honeycombs + bonus (same look as the /student/class package list)
   package progress = getPackageHexProgressHTML() / getHexIconHTML() in config/functions.php (inline svg colours) */
.lbHexRow { display: inline-flex; gap: 2px; vertical-align: middle; }
.lbHex { display: inline-block; vertical-align: middle; }
.lb-chip .lbHex { width: 14px; height: 15px; }
/* +X LangPoints for completing every level on a different day */
.lb-bonus {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border: 1px solid var(--lb-brand);
    border-radius: var(--lb-radius-pill);
    background: color-mix(in srgb, var(--lb-brand) 15%, var(--lb-surface));
    color: color-mix(in srgb, var(--lb-brand-dark) 45%, var(--lb-text));
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
    vertical-align: middle;
    cursor: help;
}
.lb-bonus i { color: var(--lb-brand-dark); }

/* DataTables paging as honeycombs, centred - the hexagon is a clip-path, so the button background is the
   outline and ::before the fill (previous / next are chevron icons, see the pages' language.paginate) */
.dataTables_wrapper .dataTables_paginate { float: none; text-align: center; padding-top: 10px; }
.dataTables_wrapper .dataTables_paginate > span { display: inline-flex; gap: 3px; vertical-align: middle; }
.dataTables_wrapper .dataTables_paginate .paginate_button {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 46px;
    min-width: 0;
    margin: 0 1px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--lb-border-cool) !important;
    color: var(--lb-text) !important;
    box-shadow: none !important;
    font-weight: 700;
    vertical-align: middle;
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button::before {
    content: "";
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    background: var(--lb-surface);
    clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.disabled):not(.current):hover { background: var(--lb-brand) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--lb-brand) !important; color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current::before { background: var(--lb-brand); }
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled { color: var(--lb-muted) !important; opacity: .55; cursor: default; }
.dataTables_wrapper .dataTables_paginate .ellipsis { padding: 0 4px; }
@media (max-width: 575px) {
    .dataTables_wrapper .dataTables_paginate .paginate_button { width: 34px; height: 39px; font-size: 14px; }
}

/* ---------------------------------------------------------------- welcome panel hover (dashboards)
   decorative only - the panel stays non-clickable (no pointer, it does not move): a soft honey light follows
   the mouse (position from data/js/langbee_new.js) and the chips do one small wave; nothing on touch screens */
.lbDash-hello::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .7) 0%, rgba(255, 170, 125, .4) 35%, rgba(255, 170, 125, 0) 70%);
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
    z-index: 0;
}
@keyframes lbChipWave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .lbDash-hello:hover::before { opacity: 1; }
    .lbDash-hello:hover .lbDash-chip { animation: lbChipWave .55s ease-out both; }
    .lbDash-hello:hover .lbDash-chip:nth-child(2) { animation-delay: .07s; }
    .lbDash-hello:hover .lbDash-chip:nth-child(3) { animation-delay: .14s; }
    .lbDash-hello:hover .lbDash-chip:nth-child(4) { animation-delay: .21s; }
    .lbDash-hello:hover .lbDash-chip:nth-child(5) { animation-delay: .28s; }
    .lbDash-hello:hover .lbDash-chip:nth-child(6) { animation-delay: .35s; }
}

/* ---------------------------------------------------------------- Bootstrap modals in the new look (all pages with this file)
   Low priority on purpose (:where): a modal styled by its page (#xyzModal ...) keeps its own look.
   The saving modal of the practice screens (#modalSavingPackage) stays as it is - play screens are not restyled.
   No backgrounds here: the light / dark modal colours come from Bootstrap / langbee_dark.css. */
.modal:where(:not(#modalSavingPackage)) .modal-content {
    border: 1px solid var(--lb-border);
    border-radius: var(--lb-radius-lg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}
.modal:where(:not(#modalSavingPackage)) .modal-header { align-items: center; border-bottom: 1px solid var(--lb-border); }
.modal:where(:not(#modalSavingPackage)) .modal-title { font-weight: 700; }
.modal:where(:not(#modalSavingPackage)) .modal-title > i:first-child { margin-right: 6px; color: var(--lb-brand); }
.modal:where(:not(#modalSavingPackage)) .modal-header .close {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; margin: -4px -6px -4px auto; padding: 0;
    border-radius: 50%; opacity: .55; text-shadow: none; transition: background var(--lb-transition), opacity var(--lb-transition);
}
.modal:where(:not(#modalSavingPackage)) .modal-header .close:hover { opacity: 1; background: var(--lb-surface-alt); }
.modal:where(:not(#modalSavingPackage)) .modal-footer { gap: 8px; border-top: 1px solid var(--lb-border); }
.modal:where(:not(#modalSavingPackage)) .modal-footer > * { margin: 0; }

/* buttons: pills (full-width ones keep the rounded rectangle), the grey "Zavrieť" = light pill */
.modal:where(:not(#modalSavingPackage)) .btn { border-radius: var(--lb-radius-pill); font-weight: 700; box-shadow: none; }
.modal:where(:not(#modalSavingPackage)) .btn:where(:not(.h1, .h2, .h3, .h4, .h5, .btn-lg)) { padding: 7px 16px; font-size: .9rem; }   /* big icon buttons (.btn.h2 ...) keep their size */
.modal:where(:not(#modalSavingPackage)) .btn.btn-block { border-radius: var(--lb-radius); padding: 10px 16px; font-size: 1rem; }
.modal:where(:not(#modalSavingPackage)) .btn.btn-lg { border-radius: var(--lb-radius); font-size: 1.25rem; }   /* Bootstrap size, also when .btn-block */
.modal:where(:not(#modalSavingPackage)) .btn.btn-sm { padding: 4px 11px; font-size: .8rem; }
.modal:where(:not(#modalSavingPackage)) .btn-secondary { background: var(--lb-surface); border: 1px solid var(--lb-border-cool); color: var(--lb-text-soft); }
.modal:where(:not(#modalSavingPackage)) .btn-secondary:hover,
.modal:where(:not(#modalSavingPackage)) .btn-secondary:focus { background: var(--lb-surface-alt); border-color: var(--lb-border-cool); color: var(--lb-text); }
/* a grey / orange / light button that just closes the modal = light "Zavrieť" (old pages used orange .btn-warning);
   coloured action buttons that also close it (e.g. "Uložiť" .btn-primary) keep their colour */
.modal:where(:not(#modalSavingPackage)) :is(.btn-secondary, .btn-warning, .btn-light, .lb-pill--light)[data-dismiss="modal"] { min-width: 0; padding: 7px 16px; font-size: .9rem; border-radius: var(--lb-radius-pill); background: var(--lb-surface); border: 1px solid var(--lb-border-cool); color: var(--lb-text-soft); filter: none; }
.modal:where(:not(#modalSavingPackage)) :is(.btn-secondary, .btn-warning, .btn-light, .lb-pill--light)[data-dismiss="modal"]:hover,
.modal:where(:not(#modalSavingPackage)) :is(.btn-secondary, .btn-warning, .btn-light, .lb-pill--light)[data-dismiss="modal"]:focus { background: var(--lb-surface-alt); color: var(--lb-text); }
.modal:where(:not(#modalSavingPackage)) .btn-warning { background: var(--lb-brand); border-color: var(--lb-brand); color: #fff; }
.modal:where(:not(#modalSavingPackage)) .btn-warning:hover { filter: brightness(1.06); color: #fff; }
.modal:where(:not(#modalSavingPackage)) .btn:focus { box-shadow: var(--lb-focus-ring); }

/* Bootstrap alerts inside a modal = .lb-notice look (coloured left edge, tinted) */
.modal:where(:not(#modalSavingPackage)) .alert {
    --lb-n: var(--lb-blue); --lb-n-soft: rgba(0, 123, 255, .12);
    border: 1px solid var(--lb-border); border-left: 5px solid var(--lb-n); border-radius: var(--lb-radius-lg);
    background: linear-gradient(135deg, var(--lb-n-soft) 0%, transparent 65%), var(--lb-surface);
    color: var(--lb-text); text-align: left;
}
.modal:where(:not(#modalSavingPackage)) .alert-success { --lb-n: var(--lb-green); --lb-n-soft: rgba(40, 167, 69, .13); }
.modal:where(:not(#modalSavingPackage)) .alert-warning { --lb-n: var(--lb-brand); --lb-n-soft: rgba(var(--lb-brand-rgb), .16); }
.modal:where(:not(#modalSavingPackage)) .alert-danger  { --lb-n: var(--lb-red);   --lb-n-soft: rgba(220, 53, 69, .12); }

/* tables: small grey caps in the head, thin lines (like .lb-table; a .lb-table keeps its own rules) */
.modal:where(:not(#modalSavingPackage)) .table { color: inherit; }
.modal:where(:not(#modalSavingPackage)) .table th,
.modal:where(:not(#modalSavingPackage)) .table td { border-top-color: var(--lb-border); vertical-align: middle; }
.modal:where(:not(#modalSavingPackage)) .table:where(:not(.lb-table)) thead th {
    border-top: 0; border-bottom: 1px solid var(--lb-border);
    color: var(--lb-muted); font-size: .75rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.modal:where(:not(#modalSavingPackage)) .table-striped:where(:not(.lb-table)) tbody tr:nth-of-type(odd) { background: var(--lb-surface-alt); }
.modal:where(:not(#modalSavingPackage)) .table-bordered,
.modal:where(:not(#modalSavingPackage)) .table-bordered th,
.modal:where(:not(#modalSavingPackage)) .table-bordered td { border-left: 0; border-right: 0; }

/* inputs */
.modal:where(:not(#modalSavingPackage)) .form-control { border-color: var(--lb-border-cool); border-radius: var(--lb-radius-sm); }
.modal:where(:not(#modalSavingPackage)) .form-control:focus { border-color: var(--lb-brand); box-shadow: var(--lb-focus-ring); }

/* ---------------------------------------------------------------- "Späť" buttons (config/shared.php $backBtn ...)
   soft brand tint instead of the bright yellow btn-warning, chevron on the far left, text in the middle.
   By id, so the play screens (.lbPlay: practice, test - "Späť / Uložiť a odísť") stay as they are;
   a play screen with .lbNewBack gets the new "Späť" too. */
:is(#backBtn, #backBtnLevelUp, #backBtn2LevelsUp, #leavePageBtn).btn-warning:not(.lbPlay:not(.lbNewBack) *) {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 9px 48px;
    border: 1px solid var(--lb-brand);
    border-radius: var(--lb-radius);
    background: #fff1e8;
    color: #9a3f0c;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    text-decoration: none;
}
:is(#backBtn, #backBtnLevelUp, #backBtn2LevelsUp, #leavePageBtn).btn-warning:not(.lbPlay:not(.lbNewBack) *):hover,
:is(#backBtn, #backBtnLevelUp, #backBtn2LevelsUp, #leavePageBtn).btn-warning:not(.lbPlay:not(.lbNewBack) *):focus {
    background: #ffe4d3;
    border-color: var(--lb-brand-dark);
    color: #7a300a;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
/* the icon: the one in the button, or a chevron when the button has none */
:is(#backBtn, #backBtnLevelUp, #backBtn2LevelsUp, #leavePageBtn).btn-warning:not(.lbPlay:not(.lbNewBack) *) > i:first-child {
    position: absolute;
    left: 18px;
    top: 50%;
    margin: 0;
    transform: translateY(-50%);
}
:is(#backBtn, #backBtnLevelUp, #backBtn2LevelsUp, #leavePageBtn).btn-warning:not(.lbPlay:not(.lbNewBack) *):not(:has(> i))::before {
    content: "\f053";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
}
/* space under "Späť": an invisible block hanging under the button makes the page scroll a bit further */
:is(#backBtn, #backBtnLevelUp, #backBtn2LevelsUp, #leavePageBtn).btn-warning:not(.lbPlay:not(.lbNewBack) *)::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 1px;
    height: 24px;
    pointer-events: none;
}
/* the <hr> (e.g. before "Späť"): langbee.css paints it as a 2px grey bar - a thin line in the new look */
hr { height: 1px; border: 0; color: var(--lb-border); background-color: var(--lb-border); }

/* ---------------------------------------------------------------- BeeDays streak pill - see getBeeDaysPillHTML() (config/ui_functions.php) */
.beeDaysCounter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 46px;
    padding: 1px 9px 1px 7px;
    margin-left: 5px;
    border-radius: var(--lb-radius-pill);
    background: linear-gradient(135deg, #ff9a1f, #fb6f1d);
    color: #fff;
    font-weight: 700;
    line-height: 1.5;
    white-space: nowrap;
    transition: box-shadow .3s ease, background .3s ease, color .3s ease;
}
.beeDaysCounter i { font-size: .95em; }
.beeDaysCounter-0 { background: #e9ecef; color: #868e96; }   /* no streak - "burnt out" */
.beeDaysCounter-hot {                                           /* 5+ days - glowing */
    background: linear-gradient(135deg, #ff7a1a, #e8420f);
    box-shadow: 0 0 0 2px rgba(255, 140, 40, .25), 0 2px 8px rgba(232, 66, 15, .45);
}
.beeDaysCounter-lg { font-size: 1.3em; padding: 2px 13px 2px 10px; }

/* disabled hero tile (e.g. no class yet) */
.lb-hero-main:where(div) { cursor: default; }

/* ---------------------------------------------------------------- more colours of the shared components */
.lb-hero--brand  { --lb-c: var(--lb-brand); }
.lb-hero--blue   { --lb-c: var(--lb-blue); }
.lb-hero--teal   { --lb-c: var(--lb-teal); }
.lb-hero--indigo { --lb-c: var(--lb-indigo); }
.lb-chip--green { background: color-mix(in srgb, var(--lb-green) 12%, var(--lb-surface)); border-color: color-mix(in srgb, var(--lb-green) 35%, transparent); color: var(--lb-text); }
.lb-chip--green i { color: var(--lb-green); }
.lb-chip--red   { background: color-mix(in srgb, var(--lb-red) 10%, var(--lb-surface));   border-color: color-mix(in srgb, var(--lb-red) 35%, transparent);   color: var(--lb-red); font-weight: 700; }
.lb-chip--brand { background: color-mix(in srgb, var(--lb-brand) 12%, var(--lb-surface)); border-color: color-mix(in srgb, var(--lb-brand) 40%, transparent); color: var(--lb-text); }
.lb-chip--brand i { color: var(--lb-brand); }
.lb-item .lb-bar { width: 100%; }
.lb-round-btn--danger:hover, .lb-round-btn--danger:focus { color: var(--lb-red) !important; border-color: var(--lb-red); }

/* ---------------------------------------------------------------- settings (sharedViews/lbSettings.php: student + company) */
.lbSet-speed { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0 10px; }
.lbSet-speed img { width: 44px; }
.lbSet-speed i { font-size: 2.2rem; cursor: pointer; }
.lbSet-speed .minus { color: var(--lb-red); }
.lbSet-speed .plus { color: var(--lb-green); }
.lbSet-speed i.disabled { opacity: .35; pointer-events: none; }
.lbSet-speed #speed { width: 56px; height: 44px; padding: 0; border-radius: var(--lb-radius-sm); text-align: center; font-size: 1.3rem; font-weight: 800; background: var(--lb-surface) !important; color: var(--lb-text); }
.lbSet-speedBar { height: 10px; margin: 0 auto 8px; max-width: 320px; border-radius: var(--lb-radius-pill); background: var(--lb-surface-alt); }
.lbSet-hint { color: var(--lb-muted); font-size: .82rem; text-align: center; }
.lbSet-list { margin-top: 14px; border-top: 1px solid var(--lb-border); }
#speedWrapper[style*="none"] + .lbSet-list { margin-top: 0; border-top: 0; }
.lbSet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--lb-border); text-align: left; }
.lbSet-list > div:last-child .lbSet-row:last-child { border-bottom: 0; }
.lbSet-label { font-weight: 600; color: var(--lb-text); }
.lbSet-label i { width: 22px; margin-right: 6px; text-align: center; color: var(--lb-muted); }
.lbSet-row .switch { margin: 0; flex: 0 0 auto; }
.lbSet-pwd { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--lb-border); text-align: left; }
.lbSet-pwd .lbSet-hint { text-align: left; margin-top: 4px; }
.lb-chip--teal { background: color-mix(in srgb, var(--lb-teal) 14%, var(--lb-surface)); border-color: color-mix(in srgb, var(--lb-teal) 40%, transparent); color: var(--lb-text); font-weight: 700; }
.lb-chip--teal i { color: var(--lb-teal); }

/* ---------------------------------------------------------------- Bootstrap tabs as segmented buttons
   <div class="nav nav-tabs lb-tabs"> ... <button class="nav-link active" data-toggle="tab"> - Bootstrap keeps switching .active */
.lb-tabs.nav-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; border: 0; }
.lb-tabs.nav-tabs .nav-link {
    flex: 1 1 0;
    min-height: 42px;
    padding: 7px 12px;
    border: 1px solid var(--lb-border-cool) !important;
    border-radius: var(--lb-radius-pill) !important;
    background: var(--lb-surface) !important;
    color: var(--lb-text-soft) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none !important;
    margin: 0;
}
.lb-tabs.nav-tabs .nav-link:hover { background: var(--lb-surface-alt) !important; }
.lb-tabs.nav-tabs .nav-link.active { background: var(--lb-brand) !important; border-color: var(--lb-brand) !important; color: #fff !important; }
@media (max-width: 575px) { .lb-tabs.nav-tabs { flex-direction: column; } }
.lb-tabs.nav-tabs > .nav-item { flex: 1 1 0; display: flex; }
.lb-tabs.nav-tabs > .nav-item > .nav-link { width: 100%; }