/* The hidden attribute always wins, even over display: grid/flex rules below. */
[hidden] { display: none !important; }

/* L.O.S Farms community site. Themes are selected with <html data-theme>. */

:root,
[data-theme="classic"] {
    --bg: #fdf6e3;
    --surface: #fffaf0;
    --surface-alt: #f7eedb;
    --text: #3b2a1a;
    --muted: #7a6650;
    --link: #0f6e9c;
    --link-strong: #0b5a80;
    --border: #6b3f1d;
    --row-border: #eadfca;
    --head-from: #8b5a2b;
    --head-to: #5c3317;
    --head-text: #fff8e7;
    --header-from: #8b5a2b;
    --header-to: #5a2a12;
    --nav-text: #fff4dc;
    --nav-active-bg: rgba(242, 194, 48, 0.22);
    --nav-active-text: #f6c343;
    --brand-a: #f6c343;
    --brand-b: #8fd0f5;
    --gold: #f2c230;
    --gold-dark: #d9a514;
    --gold-text: #5a2a12;
    --accent: #0f6e9c;
    --accent-text: #ffffff;
    --icon-from: #e8762b;
    --icon-to: #c4501b;
    --input-bg: #ffffff;
    --input-border: #d6c4a4;
    --chip-bg: #eef5f0;
    --chip-border: #c9dccf;
    --footer-from: #17365a;
    --footer-to: #0c2034;
    --footer-text: #d6e2ef;
    --shadow: 0 4px 14px rgba(60, 35, 15, 0.12);
    --online: #1f9d55;
    --online-bg: #e5f6ec;
    color-scheme: light;
}

[data-theme="autumn"] {
    --bg: #fbf1e6;
    --surface: #fffaf4;
    --surface-alt: #f8e8d6;
    --text: #3d2016;
    --muted: #85604c;
    --link: #b3471c;
    --link-strong: #8f3512;
    --border: #9c3f1c;
    --row-border: #f0dccb;
    --head-from: #b8531f;
    --head-to: #7a2c12;
    --header-from: #c8641e;
    --header-to: #8a2f14;
    --nav-active-bg: rgba(255, 214, 150, 0.25);
    --nav-active-text: #ffd27a;
    --brand-a: #ffd27a;
    --brand-b: #ffe9c7;
    --gold: #e3a13b;
    --gold-dark: #c7841f;
    --gold-text: #4a1b0a;
    --accent: #b8531f;
    --icon-from: #e0662a;
    --icon-to: #b33c16;
    --input-border: #e2c3a8;
    --chip-bg: #fbeee2;
    --chip-border: #efd0b5;
    --footer-from: #6b2a14;
    --footer-to: #3f170a;
    --footer-text: #f6dcc8;
}

[data-theme="moonlit"] {
    --bg: #131b31;
    --surface: #1b2644;
    --surface-alt: #22305a;
    --text: #e3e9f7;
    --muted: #9fb0d4;
    --link: #7cc4f5;
    --link-strong: #a7d8fa;
    --border: #3a4f86;
    --row-border: #2a3a66;
    --head-from: #2c3e6b;
    --head-to: #1b2748;
    --head-text: #f1f5ff;
    --header-from: #0e1730;
    --header-to: #1f2f58;
    --nav-text: #dbe5ff;
    --nav-active-bg: rgba(232, 197, 71, 0.18);
    --nav-active-text: #e8c547;
    --brand-a: #e8c547;
    --brand-b: #8fd0f5;
    --gold: #e8c547;
    --gold-dark: #cfae2e;
    --gold-text: #1b2340;
    --accent: #4d9ee0;
    --icon-from: #4d78c4;
    --icon-to: #2d4f96;
    --input-bg: #111a33;
    --input-border: #3a4f86;
    --chip-bg: #22305a;
    --chip-border: #3a4f86;
    --footer-from: #0b1226;
    --footer-to: #070c1a;
    --footer-text: #b8c6e6;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
    --online: #5fd08a;
    --online-bg: rgba(95, 208, 138, 0.14);
    color-scheme: dark;
}

[data-theme="dark"] {
    --bg: #1d1f24;
    --surface: #272a31;
    --surface-alt: #30343c;
    --text: #e6e6e6;
    --muted: #a3a8b2;
    --link: #6cb6ea;
    --link-strong: #9ccff3;
    --border: #454a55;
    --row-border: #363a43;
    --head-from: #3b3f47;
    --head-to: #2a2d33;
    --head-text: #f2f2f2;
    --header-from: #2b2e35;
    --header-to: #1a1c20;
    --nav-text: #e2e2e2;
    --nav-active-bg: rgba(212, 176, 76, 0.18);
    --nav-active-text: #d4b04c;
    --brand-a: #d4b04c;
    --brand-b: #8fc6ec;
    --gold: #d4b04c;
    --gold-dark: #b8962f;
    --gold-text: #1d1f24;
    --accent: #3d8fcb;
    --icon-from: #5a606c;
    --icon-to: #40454f;
    --input-bg: #1d1f24;
    --input-border: #454a55;
    --chip-bg: #30343c;
    --chip-border: #454a55;
    --footer-from: #16181c;
    --footer-to: #0f1013;
    --footer-text: #b5b9c2;
    --shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    --online: #5fd08a;
    --online-bg: rgba(95, 208, 138, 0.14);
    color-scheme: dark;
}

/* ---------- Base ---------- */

html { -webkit-text-size-adjust: 100%; }

body.los-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.55;
    transition: background-color 0.3s, color 0.3s;
}

.los-body a { color: var(--link); text-decoration: none; }
.los-body a:hover { color: var(--link-strong); text-decoration: underline; }
.los-main { flex: 1; position: relative; z-index: 1; padding: 24px 16px 48px; }
.los-container { max-width: 960px; margin: 0 auto; }
.los-container-wide { max-width: 1180px; margin: 0 auto; }
.los-muted { color: var(--muted); }
.los-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Header ---------- */

.los-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: linear-gradient(180deg, var(--header-from), var(--header-to));
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
}

.los-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 0 24px;
}

.los-brand {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    white-space: nowrap;
    text-shadow: 0 2px 0 rgba(0, 0, 0, 0.25);
}
.los-body .los-brand:hover { text-decoration: none; }
.los-brand-a { color: var(--brand-a); }
.los-brand-b { color: var(--brand-b); }

.los-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.los-nav a,
.los-nav button {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--nav-text);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
}
.los-body .los-nav a:hover,
.los-nav button:hover { background: rgba(255, 255, 255, 0.1); color: #fff; text-decoration: none; }
.los-body .los-nav a.active { background: var(--nav-active-bg); color: var(--nav-active-text); }
.los-nav form { margin: 0; }

.los-nav-toggle {
    display: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--nav-text);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 1.2rem;
    cursor: pointer;
}

@media (max-width: 820px) {
    .los-header-inner { flex-wrap: wrap; padding: 10px 16px; }
    .los-nav-toggle { display: inline-block; }
    .los-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 8px; }
    .los-nav.open { display: flex; }
}

.los-impersonation {
    background: #f59e0b;
    color: #3b2303;
    text-align: center;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 0.9rem;
}
.los-impersonation button { background: none; border: 0; text-decoration: underline; font: inherit; cursor: pointer; color: inherit; }

/* ---------- Footer ---------- */

.los-footer {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, var(--footer-from), var(--footer-to));
    color: var(--footer-text);
    text-align: center;
    padding: 36px 16px;
    font-size: 0.88rem;
}
.los-footer-links { display: flex; justify-content: center; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
.los-body .los-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: var(--gold);
    font-weight: 600;
}
.los-body .los-footer-link:hover { background: rgba(255, 255, 255, 0.14); color: var(--gold); text-decoration: none; }
.los-footer-link svg { width: 18px; height: 18px; }

/* ---------- Breadcrumbs, headings, flash ---------- */

.los-breadcrumb { font-size: 0.9rem; color: var(--muted); margin: 0 0 16px; }
.los-breadcrumb span { margin: 0 4px; }

.los-page-title { font-size: 1.6rem; font-weight: 600; margin: 0 0 6px; color: var(--text); display: flex; align-items: center; gap: 10px; }
.los-page-intro { margin: 0 0 20px; color: var(--text); }

.los-flash {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--online-bg);
    color: var(--online);
    border: 1px solid var(--online);
    font-weight: 600;
}
.los-errors {
    margin: 0 0 16px;
    padding: 10px 14px;
    border-radius: 8px;
    background: #fdecec;
    color: #9b1c1c;
    border: 1px solid #f3b5b5;
}
.los-errors ul { margin: 0; padding-left: 18px; }

/* ---------- Cards ---------- */

.los-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 12px;
    box-shadow: var(--shadow);
    overflow: hidden;
    margin-bottom: 24px;
}
.los-card-head {
    background: linear-gradient(180deg, var(--head-from), var(--head-to));
    color: var(--head-text);
    padding: 12px 20px;
    font-weight: 700;
    font-size: 1.02rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.los-card-head.upper { text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.92rem; }
.los-card-head.center { justify-content: center; }
.los-card-body { padding: 18px 20px; }
.los-card-body.flush { padding: 0; }
.los-card-kicker { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.8; }
.los-card-title { font-size: 1.5rem; font-weight: 500; margin: 2px 0 0; }

/* ---------- Buttons ---------- */

.los-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 2px solid transparent;
    font: inherit;
    font-weight: 700;
    font-size: 0.9rem;
    cursor: pointer;
    line-height: 1.2;
    transition: transform 0.12s, filter 0.12s, background-color 0.12s;
}
.los-body .los-btn:hover { text-decoration: none; filter: brightness(1.05); transform: translateY(-1px); }
.los-body .los-btn-gold { background: linear-gradient(180deg, #ffd65a, var(--gold)); color: var(--gold-text); box-shadow: 0 3px 0 var(--gold-dark); }
.los-body .los-btn-gold:hover { color: var(--gold-text); }
.los-body .los-btn-blue { background: var(--accent); color: var(--accent-text); }
.los-body .los-btn-blue:hover { color: var(--accent-text); }
.los-body .los-btn-outline { background: transparent; border-color: var(--border); color: var(--text); }
.los-body .los-btn-outline:hover { color: var(--text); background: var(--surface-alt); }
.los-body .los-btn-danger { background: #b42318; color: #fff; }
.los-body .los-btn-danger:hover { color: #fff; }
.los-btn-sm { padding: 5px 12px; font-size: 0.8rem; }
.los-btn-lg { padding: 14px 36px; font-size: 1.05rem; }
.los-btn-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Forms ---------- */

.los-form { display: grid; gap: 16px; }
.los-field label, .los-label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.92rem; }
.los-hint { font-size: 0.83rem; color: var(--muted); margin-top: 4px; }
.los-input, .los-textarea, .los-select {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    background: var(--input-bg);
    color: var(--text);
    font: inherit;
}
.los-textarea { min-height: 160px; resize: vertical; }
.los-input:focus, .los-textarea:focus, .los-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.los-check { display: flex; gap: 10px; align-items: flex-start; }
.los-check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); }
.los-field-error { color: #c0392b; font-size: 0.85rem; margin-top: 4px; }

/* ---------- Layout with sidebar ---------- */

.los-with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
@media (max-width: 900px) { .los-with-sidebar { grid-template-columns: 1fr; } }

/* ---------- Forums ---------- */

.los-forum-row {
    display: grid;
    grid-template-columns: 44px minmax(0, 1.6fr) 80px 80px minmax(0, 1.4fr);
    gap: 14px;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid var(--row-border);
}
.los-forum-row:first-child { border-top: 0; }
.los-forum-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: linear-gradient(180deg, var(--icon-from), var(--icon-to));
    color: #fff;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}
.los-forum-name { font-weight: 700; font-size: 1rem; color: var(--text); }
.los-body a.los-forum-name { color: var(--text); }
.los-forum-desc { font-size: 0.86rem; color: var(--muted); }
.los-count { text-align: center; }
.los-count b { display: block; font-size: 1rem; font-weight: 600; }
.los-count span { font-size: 0.78rem; color: var(--muted); }
.los-latest { text-align: right; font-size: 0.86rem; color: var(--muted); min-width: 0; }
.los-latest a { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
@media (max-width: 700px) {
    .los-forum-row { grid-template-columns: 40px 1fr 60px; }
    .los-forum-row .los-count:nth-of-type(2), .los-forum-row .los-latest { display: none; }
}

.los-stat-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--row-border); }
.los-stat-row:last-child { border-bottom: 0; }
.los-stat-row b { font-weight: 700; }

.los-online-list { display: flex; flex-wrap: wrap; gap: 8px; }
.los-body .los-online-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--online-bg);
    border: 1px solid color-mix(in srgb, var(--online) 40%, transparent);
    color: var(--online);
    font-size: 0.85rem;
    font-weight: 600;
}
.los-online-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--online); }

.los-latest-post { padding: 10px 0; border-bottom: 1px solid var(--row-border); }
.los-latest-post:last-child { border-bottom: 0; }
.los-latest-post a { font-weight: 600; color: var(--text); }
.los-latest-post div { font-size: 0.82rem; color: var(--muted); }

.los-thread-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 90px minmax(0, 200px);
    gap: 14px;
    align-items: center;
    padding: 14px 20px;
    border-top: 1px solid var(--row-border);
}
.los-thread-row:first-child { border-top: 0; }
.los-thread-title { font-weight: 700; font-size: 1rem; }
.los-thread-meta { font-size: 0.83rem; color: var(--muted); }
.los-tag { display: inline-block; padding: 1px 8px; margin-right: 6px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; vertical-align: 2px; }
.los-tag-pin { background: var(--gold); color: var(--gold-text); }
.los-tag-lock { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--row-border); }
@media (max-width: 700px) {
    .los-thread-row { grid-template-columns: 1fr 70px; }
    .los-thread-row > :nth-child(3), .los-thread-row > :nth-child(4) { display: none; }
}

.los-post { display: grid; grid-template-columns: 180px minmax(0, 1fr); border-top: 1px solid var(--row-border); }
.los-post:first-child { border-top: 0; }
.los-post-author { padding: 18px; background: var(--surface-alt); text-align: center; border-right: 1px solid var(--row-border); }
.los-post-author > img, .los-post-author > a > img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border); background: var(--surface); }
.los-post-author .name { display: block; font-weight: 700; margin-top: 8px; word-break: break-word; }
.los-post-author .title { display: block; font-size: 0.8rem; color: var(--muted); }
.los-post-author .badge-admin { display: inline-block; margin-top: 6px; padding: 1px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; }
.los-post-body { padding: 18px 20px; min-width: 0; }
.los-post-meta { font-size: 0.82rem; color: var(--muted); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.los-post-actions { display: flex; gap: 10px; align-items: center; }
.los-post-actions form { margin: 0; display: inline; }
.los-linkbtn { background: none; border: 0; padding: 0; color: var(--link); font: inherit; font-size: 0.82rem; cursor: pointer; }
.los-linkbtn:hover { text-decoration: underline; }
@media (max-width: 640px) {
    .los-post { grid-template-columns: 1fr; }
    .los-post-author { display: flex; gap: 12px; align-items: center; text-align: left; border-right: 0; border-bottom: 1px solid var(--row-border); padding: 12px 16px; }
    .los-post-author > img, .los-post-author > a > img { width: 44px; height: 44px; }
    .los-post-author .name { margin-top: 0; }
}

.los-empty { padding: 28px 20px; text-align: center; color: var(--muted); }

/* ---------- Prose (Markdown) ---------- */

.los-prose { font-size: 1.02rem; line-height: 1.75; overflow-wrap: anywhere; }
.los-prose > :first-child { margin-top: 0; }
.los-prose > :last-child { margin-bottom: 0; }
.los-prose p { margin: 0 0 1.1em; }
.los-prose h2 { font-size: 1.3rem; margin: 1.4em 0 0.5em; }
.los-prose h3 { font-size: 1.1rem; margin: 1.2em 0 0.4em; }
.los-prose ul, .los-prose ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.los-prose ul { list-style: disc; }
.los-prose ol { list-style: decimal; }
.los-prose li { margin: 0.25em 0; }
.los-prose blockquote { margin: 0 0 1.1em; padding: 6px 14px; border-left: 4px solid var(--gold); background: var(--surface-alt); border-radius: 0 8px 8px 0; }
.los-prose code { background: var(--surface-alt); padding: 1px 5px; border-radius: 4px; font-size: 0.9em; }
.los-prose pre { background: var(--surface-alt); padding: 12px; border-radius: 8px; overflow-x: auto; }
.los-prose pre code { background: none; padding: 0; }
.los-prose img { max-width: 100%; border-radius: 8px; }
.los-prose table { border-collapse: collapse; margin: 0 0 1.1em; }
.los-prose th, .los-prose td { border: 1px solid var(--row-border); padding: 6px 10px; overflow-wrap: normal; }
/* Tables start below the floating contents box, so their columns get the full width. */
.los-wiki-prose table { clear: right; }
.los-prose strong { font-weight: 700; }

/* ---------- Wiki ---------- */

.los-wiki { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.los-wiki-nav h4 { margin: 18px 0 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); }
.los-wiki-nav h4:first-child { margin-top: 0; }
.los-wiki-nav a { display: block; padding: 5px 10px; border-radius: 6px; font-size: 0.92rem; }
.los-body .los-wiki-nav a.active { background: var(--accent); color: var(--accent-text); font-weight: 700; text-decoration: none; }
.los-wiki-top { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 14px; }
.los-wiki-footer { font-size: 0.82rem; color: var(--muted); margin-top: 16px; }
@media (max-width: 800px) {
    .los-wiki { grid-template-columns: 1fr; }
    .los-wiki-nav { columns: 2; column-gap: 20px; }
    .los-wiki-nav h4 { break-after: avoid; }
}

/* ---------- Catalog ---------- */

.los-search { display: flex; gap: 8px; margin: 18px 0 14px; max-width: 460px; }
.los-search .los-input { border-radius: 8px; }
.los-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.los-body .los-chip {
    display: inline-block;
    padding: 6px 13px;
    border-radius: 999px;
    border: 1px solid var(--chip-border);
    background: var(--chip-bg);
    color: var(--link);
    font-size: 0.85rem;
    font-weight: 600;
}
.los-body .los-chip:hover { text-decoration: none; filter: brightness(0.97); }
.los-body .los-chip.active { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

.los-table-wrap { border-radius: 10px; overflow-x: auto; box-shadow: var(--shadow); background: var(--surface); }
.los-table { width: 100%; border-collapse: collapse; }
.los-table thead th {
    background: linear-gradient(180deg, var(--head-from), var(--head-to));
    color: var(--head-text);
    text-align: left;
    padding: 12px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.los-table td { padding: 10px 14px; border-top: 1px solid var(--row-border); vertical-align: middle; }
.los-table .icon-cell { width: 56px; }
.los-table .icon-cell img, .los-icon-fallback { width: 40px; height: 40px; object-fit: contain; display: block; }
.los-icon-fallback { border-radius: 8px; background: var(--surface-alt); }
.los-table .cost { font-size: 0.9rem; line-height: 1.35; }

.los-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.76rem; font-weight: 700; white-space: nowrap; }
.los-badge-market { background: #e3f5e9; color: #18794e; }
.los-badge-limited { background: #fff3d6; color: #b7791f; }
.los-badge-not_market { background: #e6f0fb; color: #1d5fa5; }
.los-badge-retired { background: #fde8e8; color: #c53030; }
.los-badge-unavailable { background: #ececec; color: #555; }
[data-theme="moonlit"] .los-badge, [data-theme="dark"] .los-badge { filter: saturate(0.9) brightness(0.95); }

.los-legend { display: grid; gap: 6px; font-size: 0.85rem; color: var(--muted); margin-top: 16px; }

/* ---------- Pagination ---------- */

.los-pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 18px 0 0; padding: 0; list-style: none; }
.los-pagination a, .los-pagination span {
    display: inline-block;
    min-width: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--chip-border);
    background: var(--surface);
    text-align: center;
    font-size: 0.88rem;
}
.los-pagination .current { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.los-pagination .disabled { opacity: 0.45; }

/* ---------- Leaderboard ---------- */

.los-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 22px; }
.los-body .los-tab {
    display: inline-block;
    padding: 9px 18px;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    cursor: pointer;
}
.los-body .los-tab:hover { text-decoration: none; background: var(--surface-alt); color: var(--text); }
.los-body .los-tab.active { background: linear-gradient(180deg, var(--head-from), var(--head-to)); color: var(--head-text); border-color: var(--head-to); }

.los-leader-row { display: grid; grid-template-columns: 32px 48px minmax(0, 1fr) 90px 110px 80px; gap: 14px; align-items: center; padding: 12px 20px; border-top: 1px solid var(--row-border); }
.los-leader-row:first-child { border-top: 0; }
.los-rank { text-align: center; font-weight: 800; color: var(--muted); font-size: 1.1rem; }
.los-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--border); background: var(--surface-alt); }
.los-leader-name { font-weight: 700; font-size: 1.02rem; }
.los-body a.los-leader-name { color: var(--gold-dark); }
[data-theme="moonlit"] .los-body a.los-leader-name, [data-theme="dark"] a.los-leader-name { color: var(--gold); }
.los-leader-sub { font-size: 0.8rem; color: var(--muted); }
.los-leader-stat { text-align: center; }
.los-leader-stat b { display: block; font-size: 1.02rem; }
.los-leader-stat span { font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.los-leader-stat.hl b { color: var(--gold-dark); }
@media (max-width: 640px) {
    .los-leader-row { grid-template-columns: 28px 40px minmax(0, 1fr) 80px; }
    .los-leader-row .los-leader-stat:not(.hl) { display: none; }
}

/* ---------- Profile (settings) ---------- */

.los-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.los-theme-card {
    position: relative;
    text-align: left;
    padding: 16px 18px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.12s;
}
.los-theme-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.los-theme-card.selected { outline: 3px solid var(--icon-to); outline-offset: 3px; }
.los-theme-card .check { position: absolute; top: 12px; right: 16px; font-size: 1.1rem; display: none; color: var(--text); }
.los-theme-card.selected .check { display: block; }
.los-theme-card strong { display: block; font-size: 1.05rem; margin: 10px 0 4px; }
.los-theme-card span.desc { font-size: 0.88rem; color: var(--muted); }
.los-swatches { display: flex; gap: 6px; }
.los-swatches i { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.12); display: block; }

.los-kv { display: grid; grid-template-columns: 160px 1fr; gap: 8px 16px; font-size: 0.95rem; }
.los-kv dt { font-weight: 600; color: var(--muted); }
.los-kv dd { margin: 0; }

.los-save-note { font-size: 0.85rem; color: var(--online); font-weight: 600; min-height: 1.2em; }

/* ---------- Member profile ---------- */

.los-member-hero { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.los-member-hero img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 4px solid var(--member-accent, var(--border)); background: var(--surface-alt); }
.los-member-hero h1 { margin: 0; font-size: 1.7rem; }
.los-member-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 18px; }
.los-member-stat { background: var(--surface-alt); border-radius: 10px; padding: 12px; text-align: center; }
.los-member-stat b { display: block; font-size: 1.25rem; }
.los-member-stat span { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.los-socials { display: flex; flex-wrap: wrap; gap: 8px; }
/* A social link: the site's colour and logo (App\Support\SocialLinks). */
.los-social-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--social-bg); color: var(--social-fg); font-size: 0.85rem; line-height: 1.2; box-shadow: 0 1px 2px rgba(0,0,0,.25); max-width: 100%; }
.los-social-btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
.los-social-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.los-body a.los-social-btn:hover { text-decoration: none; filter: brightness(1.08); color: var(--social-fg); }

/* ---------- Home ---------- */

.los-home-bg { background: linear-gradient(180deg, #8fd0ee 0%, #bfe6c4 26%, #74b63d 42%, #4a8f22 100%); }
[data-theme="moonlit"] .los-home-bg { background: linear-gradient(180deg, #0e1730 0%, #1f2f58 30%, #20452a 48%, #132b18 100%); }
[data-theme="dark"] .los-home-bg { background: linear-gradient(180deg, #2b2e35 0%, #1d1f24 45%); }
[data-theme="autumn"] .los-home-bg { background: linear-gradient(180deg, #f6c98f 0%, #f3d9b0 26%, #c8862f 42%, #9a5a1c 100%); }
.los-banner { max-width: 900px; margin: -24px auto 24px; display: block; }
.los-banner img { width: 100%; display: block; }
.los-banner-art { position: relative; height: 220px; overflow: hidden; border-radius: 0 0 16px 16px; }
.los-banner-art .title {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2.2rem, 7vw, 4rem);
    font-weight: 800;
    -webkit-text-stroke: 7px #5a2a12;
    paint-order: stroke fill;
    text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}
.los-home-card { max-width: 680px; margin: 0 auto 32px; }
.los-news-item { padding: 14px 0; border-bottom: 1px solid var(--row-border); text-align: left; }
.los-news-item:last-child { border-bottom: 0; }
.los-news-item h3 { margin: 0 0 2px; font-size: 1.05rem; }
.los-notice {
    max-width: 830px;
    margin: 12px auto 16px;
    padding: 16px 22px;
    border-radius: 10px;
    background: rgba(17, 38, 24, 0.92);
    color: #f3f6f1;
    text-align: center;
    font-size: 0.92rem;
    line-height: 1.6;
}

/* ---------- Chat widget ---------- */

.los-chat-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 60;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(180deg, #1784bd, #0b5a80);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.los-chat-fab svg { width: 28px; height: 28px; }
.los-chat-fab .unread {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #e53e3e;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 20px;
    display: none;
}
.los-chat-fab .unread.show { display: block; }

.los-chat-dock {
    position: fixed;
    right: 92px;
    bottom: 12px;
    z-index: 59;
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}
.los-chat-panel {
    pointer-events: auto;
    width: 320px;
    height: 440px;
    max-height: calc(100vh - 110px);
    background: #fff;
    color: #1f2933;
    border-radius: 12px 12px 8px 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
[data-theme="moonlit"] .los-chat-panel, [data-theme="dark"] .los-chat-panel { background: var(--surface); color: var(--text); }
.los-chat-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px;
    color: #fff;
    font-weight: 700;
    background: linear-gradient(180deg, var(--head-from), var(--head-to));
}
.los-chat-panel-head.blue { background: linear-gradient(180deg, #1784bd, #0b5a80); }
.los-chat-panel-head.staff { background: linear-gradient(180deg, #c07a2a, #8a4d14); }
.los-chat-panel-head .title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.los-chat-panel-head .title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.los-chat-panel-head .actions { display: flex; gap: 6px; }
.los-chat-iconbtn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}
.los-chat-iconbtn:hover { background: rgba(255, 255, 255, 0.32); }
.los-chat-channels { flex: 1; overflow-y: auto; }
.los-chat-channel {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.los-chat-channel:hover { background: rgba(0, 0, 0, 0.05); }
.los-chat-channel .info { min-width: 0; flex: 1; }
.los-chat-channel .name { font-weight: 700; display: block; }
.los-chat-channel .preview { display: block; font-size: 0.82rem; opacity: 0.65; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.los-chat-channel .count { background: #e53e3e; color: #fff; font-size: 0.72rem; font-weight: 800; border-radius: 999px; padding: 1px 7px; }
.los-chat-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #fff; }
.los-chat-avatar.public { background: #1470a0; }
.los-chat-avatar.staff { background: #b8742a; }
.los-chat-search { padding: 10px 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); }
.los-chat-messages { flex: 1; overflow-y: auto; padding: 12px; background: var(--surface-alt); display: flex; flex-direction: column; gap: 10px; }
[data-theme="moonlit"] .los-chat-messages, [data-theme="dark"] .los-chat-messages { background: var(--bg); }
.los-chat-msg { display: flex; gap: 8px; align-items: flex-start; }
.los-chat-msg > img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.los-chat-msg .bubble { background: var(--surface); color: var(--text); border-radius: 12px; padding: 6px 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); max-width: 220px; overflow-wrap: anywhere; }
[data-theme="moonlit"] .los-chat-msg .bubble, [data-theme="dark"] .los-chat-msg .bubble { background: var(--surface-alt); }
.los-chat-msg .who { font-size: 0.75rem; font-weight: 700; }
.los-chat-msg .los-avatar-framed { flex-shrink: 0; }
.los-chat-msg.mine .bubble .los-reaction { color: #5a3a12; }
.los-chat-msg .when { font-size: 0.68rem; opacity: 0.6; margin-left: 4px; font-weight: 400; }
.los-chat-msg.mine { flex-direction: row-reverse; }
.los-chat-msg.mine .bubble { background: #1478ac; color: #fff; }
.los-chat-empty { margin: auto; text-align: center; opacity: 0.55; font-size: 0.9rem; }
.los-chat-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(0, 0, 0, 0.08); }
.los-chat-form input {
    flex: 1;
    min-width: 0;
    border: 1px solid #c9d3dc;
    border-radius: 999px;
    padding: 9px 14px;
    font: inherit;
    background: #fff;
    color: #1f2933;
}
[data-theme="moonlit"] .los-chat-form input, [data-theme="dark"] .los-chat-form input { background: var(--input-bg); color: var(--text); border-color: var(--input-border); }
.los-chat-form input:focus { outline: 2px solid #1478ac; border-color: #1478ac; }
.los-chat-form .los-emoji-btn { width: auto; height: 40px; background: transparent; color: inherit; border-radius: 8px; font-size: 1.25rem; padding: 0 4px; }
.los-chat-form button:not(.los-emoji-btn) { width: 40px; height: 40px; border-radius: 50%; border: 0; background: #1478ac; color: #fff; cursor: pointer; font-size: 1rem; }
@media (max-width: 720px) {
    .los-chat-dock { right: 8px; left: 8px; bottom: 90px; flex-direction: column-reverse; align-items: stretch; }
    .los-chat-panel { width: auto; height: 60vh; }
    .los-chat-dock .los-chat-panel:not(:first-child) { display: none; }
}

/* ---------- Theme effects ---------- */

.los-fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.los-leaf { position: absolute; top: -40px; will-change: transform; animation: los-fall linear infinite; opacity: 0.85; }
@keyframes los-fall {
    0% { transform: translate3d(0, -40px, 0) rotate(0deg); }
    25% { transform: translate3d(40px, 25vh, 0) rotate(90deg); }
    50% { transform: translate3d(-20px, 50vh, 0) rotate(180deg); }
    75% { transform: translate3d(35px, 75vh, 0) rotate(270deg); }
    100% { transform: translate3d(0, 105vh, 0) rotate(360deg); }
}
.los-star { position: absolute; border-radius: 50%; background: #fff; animation: los-twinkle ease-in-out infinite; }
@keyframes los-twinkle { 0%, 100% { opacity: 0.15; } 50% { opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {
    .los-leaf { display: none; }
    .los-star { animation: none; opacity: 0.6; }
}

/* ---------- Admin: players, stats, audit log ---------- */

.los-admin-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 0 0 20px; }
.los-admin-stat {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px 18px; border-radius: 10px;
    background: var(--surface); box-shadow: var(--shadow);
    border-top: 4px solid var(--tone, var(--accent));
}
.los-admin-stat span { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.los-admin-stat b { font-size: 1.9rem; line-height: 1.1; color: var(--tone, var(--text)); }
.tone-blue { --tone: #0f6e9c; }
.tone-green { --tone: #1f9d55; }
.tone-orange { --tone: #c97a1a; }
.tone-red { --tone: #b42318; }

.los-admin-filter { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.los-admin-filter .los-input { flex: 1 1 240px; }
.los-admin-filter .los-select { flex: 0 0 auto; width: auto; }

.los-admin-charts { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 860px) { .los-admin-charts { grid-template-columns: minmax(0, 1fr); } }

.los-bars { display: flex; align-items: flex-end; gap: 3px; height: 200px; border-left: 1px solid var(--row-border); border-bottom: 1px solid var(--row-border); padding: 0 4px; }
.los-bar { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; }
.los-bar i { display: block; width: 100%; min-height: 1px; background: var(--accent); border-radius: 3px 3px 0 0; }
.los-bars-axis { display: flex; gap: 3px; padding: 4px 4px 0; font-size: 0.72rem; color: var(--muted); }
.los-bars-axis span { flex: 1 1 0; white-space: nowrap; overflow: visible; }

.los-donut { width: 180px; max-width: 100%; aspect-ratio: 1; margin: 6px auto 14px; border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%); mask: radial-gradient(circle, transparent 52%, #000 53%); }
.los-donut-legend { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; font-size: 0.85rem; color: var(--muted); }
.los-donut-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.los-donut-legend b { color: var(--text); margin-left: 4px; }

.los-wealth-row { display: grid; grid-template-columns: 32px minmax(90px, 180px) minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; }
.los-wealth-bar { background: var(--surface-alt); border-radius: 999px; overflow: hidden; }
.los-wealth-bar i { display: block; padding: 3px 10px; text-align: right; font-style: normal; font-size: 0.78rem; font-weight: 700; color: var(--gold-text);
    background: linear-gradient(90deg, #ffe08a, var(--gold)); border-radius: 999px; white-space: nowrap; min-width: fit-content; }
@media (max-width: 600px) { .los-wealth-row { grid-template-columns: 28px minmax(0, 1fr) auto; } .los-wealth-bar { grid-column: 1 / -1; } }

.los-badge-admin { background: #dbeafe; color: #0b4f8a; }
.los-badge-banned { background: #fde2e1; color: #9b1c1c; }
.los-badge-online { background: var(--online-bg); color: var(--online); }
.los-badge-player { background: var(--surface-alt); color: var(--muted); }
.los-badge-action { background: #fdeede; color: #8a4410; text-transform: uppercase; letter-spacing: 0.03em; font-size: 0.7rem; }

.los-footer-legal { margin-top: 12px; font-size: 0.82rem; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.los-footer-legal a { color: var(--footer-text); opacity: 0.85; }
.los-footer-legal a:hover { opacity: 1; }

/* ---------- Auction House ---------- */

.los-auction-balance { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 18px; }
.los-auction-balance .los-chip { font-weight: 700; font-size: 0.95rem; padding: 6px 14px; }
.los-auction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; }
.los-auction-card { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.los-auction-card.sold-out { opacity: 0.6; }
.los-auction-art { display: grid; place-items: center; height: 150px; background: var(--surface-alt); font-size: 3rem; }
.los-auction-art img { max-width: 110px; max-height: 110px; image-rendering: auto; }
.los-auction-info { padding: 0 16px; flex: 1; }
.los-auction-info h2 { margin: 2px 0 6px; font-size: 1.08rem; }
.los-auction-price { display: flex; gap: 12px; font-weight: 700; margin-bottom: 4px; }
.los-auction-card form, .los-auction-card > .los-btn { padding: 0 16px; }
.los-auction-card .los-btn { width: 100%; }
.los-auction-card > .los-btn { width: auto; margin: 0 16px; }
.los-auction-slot-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.los-auction-slot-form .los-input { width: 92px; padding: 5px 8px; }
.los-auction-slot-form .los-input[name="item_code"] { width: 84px; }

/* ---------- Forum features ---------- */

.los-thread-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.los-tag-solved { background: var(--online-bg); color: var(--online); border: 1px solid var(--online); }
.los-tag-new { background: var(--accent); color: var(--accent-text); text-decoration: none; }
.los-body .los-tag-new:hover { color: var(--accent-text); text-decoration: none; }
.los-tag-prefix { background: var(--surface-alt); color: var(--text); border: 1px solid var(--row-border); }
.prefix-question { background: #e0efff; color: #0b4f8a; border-color: #b9d6f5; }
.prefix-guide { background: #e5f6ec; color: #16693a; border-color: #b8e2c7; }
.prefix-bug { background: #fde2e1; color: #9b1c1c; border-color: #f3b5b5; }
.prefix-suggestion { background: #f3e8ff; color: #6b21a8; border-color: #dcc3f5; }
.prefix-trade { background: #fff4d6; color: #7a5200; border-color: #f0d890; }
.prefix-showcase { background: #ffe8dc; color: #9a3412; border-color: #f5c6aa; }
.los-thread-title.unread, .los-latest-post a.unread { font-weight: 800; }

.los-solution-banner { margin: 0 0 18px; padding: 12px 16px; border-radius: 10px; background: var(--online-bg); border: 1px solid var(--online); color: var(--text); }
.los-solution-banner blockquote { margin: 8px 0 0; padding-left: 10px; border-left: 3px solid var(--online); color: var(--muted); }
.los-post.is-solution { box-shadow: inset 4px 0 0 var(--online); }
.los-unread-divider { display: flex; align-items: center; gap: 10px; padding: 6px 18px; color: var(--accent); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; }
.los-unread-divider::before, .los-unread-divider::after { content: ""; flex: 1; border-top: 2px solid var(--accent); }
.los-farm-level { display: block; font-size: 0.78rem; font-weight: 700; color: var(--online); }
.los-permalink { color: inherit; }
.los-post-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 0.82rem; }
.los-post-actions form { display: inline; }
.los-report { position: relative; display: inline-block; }
.los-report summary { list-style: none; cursor: pointer; }
.los-report summary::-webkit-details-marker { display: none; }
.los-report-form { position: absolute; right: 0; z-index: 5; display: flex; gap: 6px; width: min(340px, 80vw); margin-top: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--row-border); border-radius: 8px; box-shadow: var(--shadow); }
.los-report-form .los-input { flex: 1; padding: 5px 8px; }

.los-reactions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.los-reactions form { display: inline; }
.los-reaction { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--row-border); background: var(--surface-alt); color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; line-height: 1.6; }
.los-reaction .n { font-weight: 700; min-width: 0; }
.los-reaction.empty { opacity: 0.55; }
.los-reaction.empty:hover, .los-reaction.empty:focus-visible { opacity: 1; }
.los-reaction.mine { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); opacity: 1; }

.los-composer { position: relative; }
.los-composer-bar { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 6px; border: 1px solid var(--input-border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface-alt); }
.los-composer-bar button { min-width: 32px; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.los-composer-bar button:hover, .los-composer-bar button:focus-visible { border-color: var(--row-border); background: var(--surface); }
.los-composer-tabs { margin-left: auto; display: inline-flex; gap: 2px; }
.los-composer-tabs button.active { background: var(--surface); border-color: var(--row-border); font-weight: 700; }
.los-composer textarea { border-top-left-radius: 0; border-top-right-radius: 0; min-height: 170px; }
.los-composer-preview { min-height: 170px; padding: 12px 14px; border: 1px solid var(--input-border); border-radius: 0 0 8px 8px; background: var(--input-bg); }
.los-mention-list { position: absolute; left: 12px; z-index: 10; margin: 4px 0 0; padding: 4px; list-style: none; min-width: 200px; background: var(--surface); border: 1px solid var(--row-border); border-radius: 8px; box-shadow: var(--shadow); }
.los-mention-list li { padding: 6px 10px; border-radius: 6px; cursor: pointer; }
.los-mention-list li:hover, .los-mention-list li.active { background: var(--surface-alt); }
.los-composer-draft { color: var(--online); }

.los-search-result { padding: 12px 18px; border-bottom: 1px solid var(--row-border); }
.los-search-result:last-child { border-bottom: 0; }
.los-search-result p { margin: 4px 0 0; color: var(--muted); }

.los-bell { position: relative; }
.los-badge-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: #d64545; color: #fff; font-size: 0.7rem; font-weight: 800; line-height: 18px; text-align: center; vertical-align: 1px; }
.los-notification { display: flex; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--row-border); color: var(--text); }
.los-body a.los-notification:hover { text-decoration: none; background: var(--surface-alt); }
.los-notification.unread { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.los-notification-icon { font-size: 1.3rem; }
.los-notification-excerpt { display: block; color: var(--muted); font-size: 0.88rem; margin: 2px 0; }

.los-report-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 14px 18px; border-bottom: 1px solid var(--row-border); }
.los-report-reason { margin: 6px 0; font-weight: 600; }
.los-report-row blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--row-border); }

/* ---------- Wiki features ---------- */

.los-wiki-top { display: flex; gap: 8px; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.los-wiki-top form { display: inline; }
.los-wiki-search { margin: 0 0 12px; }
.los-wiki-search .los-input { width: 100%; }
.los-wiki-prose a.missing { color: #c0392b; border-bottom: 1px dashed currentColor; }
.los-wiki-prose .los-anchor { margin-left: 6px; opacity: 0; font-size: 0.8em; text-decoration: none; }
.los-wiki-prose :is(h2, h3):hover .los-anchor, .los-wiki-prose .los-anchor:focus { opacity: 0.6; }
.los-wiki-prose .los-toc { float: right; max-width: 280px; margin: 0 0 16px 20px; padding: 12px 18px 12px 30px; background: var(--surface-alt); border: 1px solid var(--row-border); border-radius: 10px; font-size: 0.9rem; }
.los-wiki-prose .los-toc::before { content: "Contents"; display: block; margin: 0 0 6px -12px; font-weight: 700; }
@media (max-width: 700px) { .los-wiki-prose .los-toc { float: none; max-width: none; margin: 0 0 16px; } }
.los-wiki-prose table, .los-item-page table { border-collapse: collapse; margin: 12px 0; }
.los-wiki-prose :is(th, td), .los-item-page :is(th, td) { padding: 6px 12px; border: 1px solid var(--row-border); }
.los-wiki-prose th, .los-item-page th { background: var(--surface-alt); }

.los-diff { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; border: 1px solid var(--row-border); border-radius: 8px; overflow-x: auto; }
.los-diff-line { display: block; padding: 1px 10px; white-space: pre-wrap; word-break: break-word; }
.los-diff-line > span[aria-hidden] { display: inline-block; width: 1.4em; color: var(--muted); }
.los-diff-line.add, .los-diff-legend .add { background: #e6f6ea; color: #14532d; }
.los-diff-line.del, .los-diff-legend .del { background: #fdecec; color: #7f1d1d; text-decoration: line-through; text-decoration-color: rgba(127, 29, 29, 0.35); }
.los-diff-line.gap { color: var(--muted); text-align: center; background: var(--surface-alt); }
.los-diff-legend span { padding: 0 6px; border-radius: 4px; margin-left: 6px; }

.los-item-result { display: flex; gap: 12px; align-items: center; padding: 8px 18px; border-bottom: 1px solid var(--row-border); color: var(--text); }
.los-item-result img { width: 36px; height: 36px; object-fit: contain; }
.los-item-page { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; padding: 24px 28px; }
.los-item-page > .los-prose { grid-column: 1; grid-row: 1; }
.los-infobox { grid-column: 2; grid-row: 1; align-self: start; border: 1px solid var(--row-border); border-radius: 10px; background: var(--surface-alt); overflow: hidden; }
.los-infobox-art { display: grid; place-items: center; min-height: 140px; background: var(--surface); }
.los-infobox-art img { max-width: 120px; max-height: 120px; }
.los-infobox dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; padding: 14px 16px; font-size: 0.88rem; }
.los-infobox dt { font-weight: 700; color: var(--muted); }
.los-infobox dd { margin: 0; word-break: break-word; }
@media (max-width: 760px) { .los-item-page { grid-template-columns: minmax(0, 1fr); padding: 18px; } .los-infobox { grid-column: 1; grid-row: 1; } .los-item-page > .los-prose { grid-row: 2; } }
.los-callout { padding: 10px 14px; border-radius: 8px; background: var(--surface-alt); border-left: 4px solid var(--gold); }

.los-collections { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 18px; }
.los-collectibles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin: 0 0 12px; padding: 0; list-style: none; }
.los-collectibles li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border-radius: 8px; background: var(--surface-alt); text-align: center; font-size: 0.8rem; }
.los-collectibles img { width: 44px; height: 44px; object-fit: contain; }
.los-collectibles small { color: var(--muted); text-transform: uppercase; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; }
.los-collectibles .rarity-uncommon small { color: #1f6fb2; }
.los-collectibles .rarity-rare small { color: #9a3412; }
.los-quest-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 24px; }
.los-quest-body h3 { margin: 0 0 4px; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.los-quest-body ul { margin: 0; padding-left: 18px; }

[data-theme="sunflower"] {
    --bg: #fffbe6;
    --surface: #fffef6;
    --surface-alt: #fbf3cf;
    --text: #2f3a17;
    --muted: #6b7043;
    --link: #2f7a3c;
    --link-strong: #1f5c2b;
    --border: #5b8a2a;
    --row-border: #efe5b8;
    --head-from: #4f8f2a;
    --head-to: #2f6118;
    --head-text: #fffbe0;
    --header-from: #3f7d20;
    --header-to: #245214;
    --nav-text: #fff9d6;
    --nav-active-bg: rgba(247, 195, 37, 0.25);
    --nav-active-text: #ffd84a;
    --brand-a: #ffd84a;
    --brand-b: #fff3b0;
    --gold: #f7c325;
    --gold-dark: #d9a40f;
    --gold-text: #3a2c00;
    --accent: #2f8f5b;
    --accent-text: #ffffff;
    --icon-from: #f7c325;
    --icon-to: #d98e0b;
    --input-border: #e2d59a;
    --chip-bg: #f3f8e4;
    --chip-border: #d6e4b3;
    --footer-from: #2f5a17;
    --footer-to: #1a360c;
    --footer-text: #eef5d6;
}

[data-theme="blossom"] {
    --bg: #fff5f8;
    --surface: #fffafc;
    --surface-alt: #fde8ef;
    --text: #3d1f2b;
    --muted: #8a5a6c;
    --link: #b0476f;
    --link-strong: #8c2f55;
    --border: #c46a8f;
    --row-border: #f6d9e4;
    --head-from: #c8618a;
    --head-to: #93385e;
    --head-text: #fff5f9;
    --header-from: #d0578a;
    --header-to: #8c2f55;
    --nav-text: #fff0f6;
    --nav-active-bg: rgba(255, 255, 255, 0.2);
    --nav-active-text: #ffe0ec;
    --brand-a: #ffe0ec;
    --brand-b: #ffffff;
    --gold: #f4a7c3;
    --gold-dark: #d97fa3;
    --gold-text: #4a1328;
    --accent: #b0476f;
    --accent-text: #ffffff;
    --icon-from: #ee8fb4;
    --icon-to: #c8618a;
    --input-border: #efc3d4;
    --chip-bg: #fdeef4;
    --chip-border: #f5cfdd;
    --footer-from: #7a2848;
    --footer-to: #4d162c;
    --footer-text: #fbe2ec;
}

/* ---------- Profiles & customization ---------- */

/* Preset banners, drawn in CSS: sky, hills, and a sun or moon. */
.los-profile-banner { height: 190px; background-size: cover; background-position: center; background-color: #8fd0f5; position: relative; }
.los-profile-banner.mini { display: block; height: 54px; border-radius: 8px; }
.banner-meadow { background-image: radial-gradient(circle at 82% 30%, #fff6b0 0 7%, transparent 8%), radial-gradient(ellipse 60% 40% at 20% 100%, #6fbf3a 0 98%, transparent 100%), radial-gradient(ellipse 70% 45% at 80% 105%, #57a92c 0 98%, transparent 100%), linear-gradient(#8fd0f5, #cdeefc); }
.banner-sunset { background-image: radial-gradient(circle at 70% 70%, #ffd36e 0 9%, transparent 10%), radial-gradient(ellipse 80% 35% at 50% 105%, #5a3a1a 0 98%, transparent 100%), linear-gradient(#ff8f5a, #ffc27a 55%, #ffe0a8); }
.banner-orchard { background-image: radial-gradient(circle at 15% 60%, #d9571f 0 4%, transparent 5%), radial-gradient(circle at 35% 55%, #e3a13b 0 5%, transparent 6%), radial-gradient(circle at 60% 62%, #b8531f 0 4%, transparent 5%), radial-gradient(ellipse 90% 40% at 50% 110%, #7a5a1c 0 98%, transparent 100%), linear-gradient(#f6c98a, #fbe3bd); }
.banner-night { background-image: radial-gradient(circle at 80% 28%, #f7f2d0 0 6%, transparent 7%), radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 15%, #fff, transparent), radial-gradient(1px 1px at 60% 40%, #fff, transparent), radial-gradient(1.5px 1.5px at 12% 55%, #fff, transparent), radial-gradient(ellipse 90% 35% at 50% 108%, #0e2a1a 0 98%, transparent 100%), linear-gradient(#0e1730, #2c3e6b); }
.banner-snow { background-image: radial-gradient(ellipse 70% 40% at 25% 105%, #ffffff 0 98%, transparent 100%), radial-gradient(ellipse 70% 45% at 80% 108%, #eef6fb 0 98%, transparent 100%), linear-gradient(#b9dbf0, #e8f4fb); }
.banner-cove { background-image: radial-gradient(circle at 20% 30%, #fff6b0 0 6%, transparent 7%), linear-gradient(transparent 62%, #2f7fb8 62%, #1f5f94), linear-gradient(#9fd7f7, #d6f0fc); }
.banner-blossom { background-image: radial-gradient(circle at 15% 25%, #f4a7c3 0 5%, transparent 6%), radial-gradient(circle at 30% 45%, #fbd9e6 0 4%, transparent 5%), radial-gradient(circle at 75% 30%, #ee8fb4 0 5%, transparent 6%), radial-gradient(circle at 88% 55%, #f7c6d9 0 4%, transparent 5%), radial-gradient(ellipse 90% 35% at 50% 110%, #7fbf5a 0 98%, transparent 100%), linear-gradient(#ffe3ee, #fff5f8); }

.los-profile-card { overflow: hidden; }
.los-profile-head { display: flex; gap: 20px; align-items: flex-end; flex-wrap: wrap; padding: 0 24px; margin-top: -48px; position: relative; }
.los-profile-avatar { flex: 0 0 auto; }
.los-profile-avatar img { width: 112px !important; height: 112px !important; }
.los-profile-id { flex: 1 1 280px; min-width: 0; padding-top: 52px; }
.los-profile-id h1 { margin: 0; font-size: 1.7rem; word-break: break-word; }
.los-profile-sub { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 0.92rem; }
.los-profile-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; }
.los-profile-actions form { margin: 0; }
.los-profile-card .los-member-stats { padding: 0 24px; }
.los-profile-tabs { padding: 0 24px; margin-bottom: 16px; }
.los-profile-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.los-profile-grid.even { grid-template-columns: 1fr 1fr; }
@media (max-width: 820px) { .los-profile-grid, .los-profile-grid.even { grid-template-columns: minmax(0, 1fr); } .los-profile-head { padding: 0 16px; } }

/* Avatar frames and name effects: css/los-cosmetics.css (shared with the game page) */

/* Group banners, ranks, badges */
.los-user-banners { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.los-user-banner { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--banner); color: #fff; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; text-shadow: 0 1px 1px rgba(0,0,0,.25); }
.los-rank { display: inline-block; padding: 1px 8px; border-radius: 4px; background: var(--surface-alt); border: 1px solid var(--row-border); font-size: 0.75rem; font-weight: 700; }
.los-badge-pill { display: inline-flex; align-items: center; gap: 4px; margin: 2px 4px 2px 0; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 700; border: 1px solid; }
.los-badge-pill.small { padding: 0 6px; font-size: 0.85rem; }
.los-badge-pill input { margin: 0 4px 0 0; }
.tier-bronze { background: #f7e6d6; border-color: #d9a57a; color: #7a4520; }
.tier-silver { background: #eef1f5; border-color: #b6c0cc; color: #45505e; }
.tier-gold { background: #fff4cc; border-color: #e6c14d; color: #6b4e00; }
.los-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.los-badge-grid li { display: flex; flex-direction: column; gap: 3px; padding: 12px; border-radius: 10px; border: 1px solid; }
.los-badge-grid li.locked { background: var(--surface-alt); border-color: var(--row-border); color: var(--muted); filter: grayscale(1); opacity: 0.65; }
.los-badge-grid .icon { font-size: 1.8rem; }
.los-badge-grid span { font-size: 0.85rem; }
.los-badge-grid small { text-transform: uppercase; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; }
.los-post-badges { display: block; margin: 2px 0; }

/* Showcase, wall */
.los-showcase { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.los-showcase li, .los-showcase li a { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 0.78rem; color: var(--text); }
.los-showcase li { padding: 8px 4px; border-radius: 8px; background: var(--surface-alt); position: relative; }
.los-showcase img { width: 52px; height: 52px; object-fit: contain; }
.los-showcase.editable { margin-bottom: 10px; }
.los-showcase.editable [data-remove] { position: absolute; top: 2px; right: 6px; }
.los-wall-post { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--row-border); }
.los-wall-post .los-prose p { margin: 4px 0; }

/* Settings forms */
.los-fieldset { border: 1px solid var(--row-border); border-radius: 10px; padding: 12px 16px 16px; margin: 0; }
.los-fieldset legend, .los-fieldset > summary { font-weight: 700; padding: 0 6px; cursor: default; }
details.los-fieldset > summary { cursor: pointer; }
.los-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; align-items: end; }
.los-choice-grid { display: grid; gap: 10px; }
.los-choice-grid.banners { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.los-choice-grid.frames { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.los-choice { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px; border: 2px solid var(--row-border); border-radius: 10px; cursor: pointer; text-align: center; font-size: 0.85rem; }
.los-choice:has(input:checked) { border-color: var(--accent); background: var(--surface-alt); }
.los-choice input { position: absolute; opacity: 0; pointer-events: none; }
.los-choice:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.los-choice .los-profile-banner.mini { width: 100%; }
.los-choice .los-avatar-framed img { width: 56px; height: 56px; }
.los-choice.locked { cursor: not-allowed; opacity: 0.55; }
.los-choice small { color: var(--muted); font-size: 0.72rem; }
.los-banner-current { height: 70px; margin: 8px 0; border-radius: 8px; background-size: cover; background-position: center; }
.los-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.los-inline-form .los-input { width: auto; flex: 1 1 160px; }
.los-input.narrow { flex: 0 0 72px !important; width: 72px !important; }
.los-input.wide { flex: 2 1 240px !important; }
.los-card-head .los-inline-form { flex: 1; }
.los-card-head:has(.los-inline-form) { display: flex; gap: 10px; align-items: center; }
.los-admin-forum-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--row-border); }
.los-admin-forum-row .los-input { width: auto; flex: 1 1 150px; }
.los-admin-forum-row.new { background: var(--surface-alt); }
.los-chips form.los-chip { display: inline-flex; gap: 6px; align-items: center; }

/* Forum posts: author panel, signatures, ignored posts, compact layout, polls */
.los-post-author-info { min-width: 0; }
.los-post-author .los-avatar-framed img { width: 72px; height: 72px; }
.los-post-author-stats { display: grid; gap: 2px; margin: 8px 0 0; font-size: 0.78rem; color: var(--muted); }
.los-post-author-stats div { display: flex; justify-content: center; gap: 5px; }
.los-post-author-stats dt { font-weight: 600; }
.los-post-author-stats dt::after { content: ':'; }
.los-post-author-stats dd { margin: 0; }
.los-post-author .los-user-banners { justify-content: center; }
.los-signature { margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--row-border); font-size: 0.85rem; color: var(--muted); max-height: 7em; overflow: hidden; }
.los-signature p { margin: 0 0 4px; }
.los-post-ignored { border-top: 1px solid var(--row-border); }
.los-post-ignored > summary { padding: 10px 18px; color: var(--muted); font-size: 0.88rem; cursor: pointer; }
.los-posts-compact .los-post { grid-template-columns: minmax(0, 1fr); }
.los-posts-compact .los-post-author { display: flex; gap: 12px; align-items: center; text-align: left; border-right: 0; border-bottom: 1px solid var(--row-border); padding: 10px 18px; }
.los-posts-compact .los-post-author .los-avatar-framed img { width: 40px; height: 40px; }
.los-posts-compact .los-post-author-info { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.los-posts-compact .los-post-author .name { margin: 0; }
.los-posts-compact .los-post-author-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
@media (max-width: 700px) { .los-post-author-stats { display: flex; flex-wrap: wrap; gap: 4px 10px; } .los-post-author .los-avatar-framed img { width: 44px; height: 44px; } }
.los-poll-result { margin-bottom: 10px; }
.los-poll-label { display: flex; justify-content: space-between; gap: 10px; font-size: 0.92rem; margin-bottom: 3px; }
.los-poll-bar { height: 12px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; }
.los-poll-bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.los-poll-result.mine .los-poll-bar i { background: var(--gold); }

/* ---------- Discovery: lists, tags, ideas, members, activity ---------- */

.los-community-nav { margin-top: 0; }
.los-tag-chip { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--text); font-size: 0.75rem; }
.los-body a.los-tag-chip:hover { text-decoration: none; filter: brightness(0.97); }
.los-tag-chip.big { margin: 0 8px 8px 0; padding: 4px 12px; font-size: 0.95rem; }
.los-tag-chip.big span { color: var(--muted); font-size: 0.8rem; margin-left: 4px; }
.los-tag-cloud { display: flex; flex-wrap: wrap; }
.los-thread-row.is-idea { grid-template-columns: 64px minmax(0, 1fr) 80px 80px 170px; }
.los-vote { display: flex; flex-direction: column; align-items: center; gap: 0; font-size: 0.72rem; color: var(--muted); }
.los-vote button { border: 1px solid var(--row-border); background: var(--surface-alt); color: var(--muted); border-radius: 8px; width: 38px; height: 28px; cursor: pointer; font-size: 0.9rem; }
.los-vote button.voted { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.los-vote button:disabled { cursor: not-allowed; opacity: 0.6; }
.los-vote b { font-size: 1.05rem; color: var(--text); }
.los-vote.inline { flex-direction: row; gap: 6px; font-size: 0.85rem; }
.los-thread-extras { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: -8px 0 16px; }
.los-thread-extras .los-tag-chip { margin-left: 0; }
.los-thread-tools { margin-bottom: 16px; }
.los-thread-tools > summary { cursor: pointer; }
.los-similar { margin-top: 8px; padding: 10px 14px; border-radius: 8px; background: var(--surface-alt); border-left: 4px solid var(--gold); font-size: 0.9rem; }
.los-similar ul { margin: 6px 0 0; padding-left: 18px; }
.los-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.los-member-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 10px; border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); text-align: center; color: var(--text); }
.los-body a.los-member-card:hover { text-decoration: none; transform: translateY(-2px); }
.los-member-card .los-avatar-framed img { width: 64px; height: 64px; }
.los-member-card .los-user-banners { justify-content: center; }
.los-activity-item { display: flex; gap: 12px; align-items: center; padding: 10px 18px; border-bottom: 1px solid var(--row-border); }
.los-activity-icon { font-size: 1.2rem; width: 26px; text-align: center; }
@media (max-width: 700px) { .los-thread-row.is-idea { grid-template-columns: 56px minmax(0, 1fr); } }

/* ---------- Posting experience, hover cards, events ---------- */

.los-prose img { max-width: 100%; height: auto; border-radius: 8px; }
.los-emoji-panel { position: absolute; z-index: 12; top: 44px; right: 8px; display: grid; grid-template-columns: repeat(10, 34px); gap: 2px; padding: 8px; background: var(--surface); border: 1px solid var(--row-border); border-radius: 10px; box-shadow: var(--shadow); }
.los-emoji-panel button { width: 34px; height: 34px; border: 0; background: transparent; border-radius: 6px; font-size: 1.2rem; cursor: pointer; }
.los-emoji-panel button:hover, .los-emoji-panel button:focus-visible { background: var(--surface-alt); }
@media (max-width: 480px) { .los-emoji-panel { grid-template-columns: repeat(7, 34px); } }
.los-kbd-focus { box-shadow: inset 4px 0 0 var(--gold); }
.los-kbd-help { position: fixed; right: 16px; bottom: 90px; z-index: 40; padding: 14px 18px; background: var(--surface); border: 1px solid var(--row-border); border-radius: 12px; box-shadow: var(--shadow); font-size: 0.88rem; }
.los-kbd-help dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 8px 0 0; }
.los-kbd-help dt { font-family: ui-monospace, monospace; font-weight: 700; }
.los-kbd-help dd { margin: 0; }
.los-live-replies { position: sticky; bottom: 16px; z-index: 5; margin: 12px auto; width: fit-content; }
.los-live-replies a { display: block; padding: 8px 18px; border-radius: 999px; background: var(--accent); color: var(--accent-text); font-weight: 700; box-shadow: var(--shadow); }
.los-body .los-live-replies a:hover { color: var(--accent-text); text-decoration: none; }
.los-hovercard { position: absolute; z-index: 60; width: 320px; background: var(--surface); border: 1px solid var(--row-border); border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2); overflow: hidden; font-size: 0.88rem; }
.los-hovercard .los-profile-banner { height: 64px; }
.los-hovercard-head { display: flex; gap: 10px; align-items: flex-end; padding: 0 14px; margin-top: -26px; }
.los-hovercard-head .los-avatar-framed img { width: 56px; height: 56px; }
.los-hovercard-name { font-weight: 800; font-size: 1.05rem; }
.los-hovercard .los-user-banners, .los-hovercard-badges, .los-hovercard-stats { padding: 0 14px; }
.los-hovercard-badges { font-size: 0.8rem; }
.los-hovercard-stats { padding-bottom: 12px; color: var(--muted); font-size: 0.8rem; margin-top: 6px; }
.los-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.los-calendar-head { text-align: center; font-size: 0.75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.los-calendar-day { min-height: 84px; padding: 4px; border-radius: 8px; background: var(--surface-alt); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.los-calendar-day.other { opacity: 0.4; }
.los-calendar-day.today { outline: 2px solid var(--accent); }
.los-calendar-day .num { font-size: 0.8rem; font-weight: 700; }
.los-calendar-event { display: block; padding: 1px 4px; border-radius: 4px; background: var(--accent); color: var(--accent-text); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.los-body a.los-calendar-event:hover { color: var(--accent-text); }
@media (max-width: 700px) { .los-calendar-day { min-height: 56px; } .los-calendar-event { font-size: 0; } .los-calendar-event::first-letter { font-size: 0.9rem; } }

/* ---------- Homepage hero with the L.O.S Farms logo ---------- */

.los-hero { height: auto; min-height: 420px; display: grid; }
.los-hero-scene, .los-hero-content { grid-area: 1 / 1; }
.los-hero-scene svg { width: 100%; height: 100%; display: block; }
.los-hero-content { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 18px 16px 26px; text-align: center; }
.los-hero-logo { width: min(300px, 70vw); height: auto; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25)); }
.los-hero-pill { padding: 4px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.85); color: #5a2a12; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.los-hero-tagline { margin: 0; color: #2f3a17; font-weight: 600; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
.los-banner-art.los-hero .title { display: none; }
.los-brand { display: inline-flex; align-items: center; gap: 8px; }
.los-brand-logo { width: 36px; height: 36px; flex: 0 0 auto; }

/* ---------- Name effects, status, flair, farm stats, badge progress ---------- */

.los-status { margin: 2px 0 4px; font-size: 0.92rem; font-style: italic; color: var(--muted); }
.los-status.small { display: block; font-size: 0.78rem; margin: 2px 0; }
.los-flair { width: 22px; height: 22px; object-fit: contain; vertical-align: -5px; margin-left: 4px; }
.los-flair.big { width: 34px; height: 34px; vertical-align: -6px; }
.los-farm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.los-farm-stats div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 10px; background: var(--surface-alt); text-align: center; }
.los-farm-stats span { font-size: 1.3rem; }
.los-farm-stats b { font-size: 1.1rem; }
.los-farm-stats small { color: var(--muted); font-size: 0.75rem; }
.los-pinned-thread { border-left: 4px solid var(--gold); }
.los-badge-category { margin: 18px 0 10px; font-size: 1rem; }
.los-badge-category:first-child { margin-top: 0; }
.los-badge-progress { height: 8px; border-radius: 999px; background: var(--row-border); overflow: hidden; margin-top: 4px; }
.los-badge-progress i { display: block; height: 100%; background: var(--accent); }
.los-badge-grid li.locked .los-badge-progress { filter: none; }
.banner-pumpkin { background-image: radial-gradient(ellipse 9% 7% at 20% 78%, #f07f1e 0 95%, transparent 100%), radial-gradient(ellipse 7% 6% at 42% 84%, #e86f10 0 95%, transparent 100%), radial-gradient(ellipse 8% 6% at 70% 80%, #f38d2c 0 95%, transparent 100%), radial-gradient(ellipse 90% 35% at 50% 108%, #5a7d2a 0 98%, transparent 100%), linear-gradient(#f3b36b, #fbe0b5); }
.banner-rain { background-image: repeating-linear-gradient(105deg, transparent 0 14px, rgba(255, 255, 255, 0.35) 14px 15px), radial-gradient(ellipse 90% 35% at 50% 108%, #4f7a3a 0 98%, transparent 100%), linear-gradient(#6f8aa3, #b7c7d6); }
.banner-wheat { background-image: repeating-linear-gradient(80deg, transparent 0 6px, rgba(160, 110, 20, 0.35) 6px 8px), linear-gradient(transparent 55%, #d9a93c 55%, #b8871f), linear-gradient(#9fd7f7, #fdeac0); }
.frame-star { --frame: conic-gradient(#fff1a8, #f2c230, #fff1a8, #f2c230, #fff1a8); }
.frame-moon { --frame: radial-gradient(circle at 30% 30%, #fffbe6, #c9b87a 60%, #6b5e2a); }
.frame-globe { --frame: conic-gradient(#2f7fb8, #3fbf5a, #2f7fb8, #3fbf5a, #2f7fb8); }
.frame-heart { --frame: linear-gradient(135deg, #ff8fb1, #e0457b); }

/* Profile: themed farm levels */
.los-world-levels { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; }
.los-world-levels li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; }
.los-world-levels li[hidden] { display: none; }
.los-world-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.los-world-level { font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.los-world-levels .los-badge-progress { grid-column: 1 / -1; }
.los-farm-stats b small { font-size: 0.75rem; color: var(--muted); font-weight: 400; }

/* Care packages */
.los-care-package { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--row-border); }
.los-care-package:last-child { border-bottom: 0; }
.los-care-package div { flex: 1; }
.los-care-box { font-size: 2rem; animation: los-care-wiggle 2.4s ease-in-out infinite; }
@keyframes los-care-wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 90% { transform: rotate(8deg); } 95% { transform: rotate(-4deg); } }
@media (prefers-reduced-motion: reduce) { .los-care-box { animation: none; } }

/* Community goals */
.los-goal { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--row-border); }
.los-goal:last-child { border-bottom: 0; }
.los-goal-icon { font-size: 2.2rem; line-height: 1; }
.los-goal-main { flex: 1; min-width: 0; }
.los-goal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.los-goal-top h3 { margin: 0; font-size: 1.1rem; }
.los-goal-main p { margin: 4px 0 8px; }
.los-goal-bar { height: 14px; border-radius: 999px; background: var(--row-border); overflow: hidden; margin: 8px 0 6px; }
.los-goal-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--gold, #f2c230)); transition: width .6s ease; }
.los-goal-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.9rem; color: var(--muted); }
.los-goal-completed .los-goal-bar i { background: #1f9d55; }
.los-goal-missed { opacity: .75; }
.los-goal-upcoming .los-goal-bar { opacity: .5; }
.los-goal-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }

/* Browser play paused */
.los-paused-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; background: rgba(242, 194, 48, .18); border: 1px solid rgba(242, 194, 48, .5); font-weight: 600; font-size: .9rem; }
.los-steps { margin: 0; padding-left: 1.4rem; line-height: 2; }

/* ---------- Developer dashboard ---------- */
body.los-dev-body { background: #081729; }
.los-dev {
    --d-bg: #0b1d33; --d-card: rgba(19, 38, 66, .82); --d-raised: #263452; --d-line: rgba(255,255,255,.08);
    --d-text: #e9f1f7; --d-muted: #8ea3b8; --d-teal: #2fd3d9; --d-orange: #f7a534; --d-purple: #8b5cf6; --d-red: #ff6b6b; --d-green: #3ddc97;
    --d-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--d-text);
    margin: -24px -16px -48px; padding: 24px 20px 48px;
    background:
        radial-gradient(1200px 600px at 85% -10%, rgba(18, 132, 150, .45), transparent 60%),
        radial-gradient(700px 500px at 10% 40%, rgba(24, 90, 160, .25), transparent 60%),
        linear-gradient(180deg, #0a2440, #081729 60%);
    min-height: 100vh;
}
.los-dev a { color: var(--d-teal); }
.los-dev .mono { font-family: var(--d-mono); }
.los-dev .small, .los-dev small { font-size: .78rem; }
.los-dev .good { color: var(--d-green); } .los-dev .meh { color: var(--d-orange); } .los-dev .bad { color: var(--d-red); }
.los-dev .los-flash, .los-dev .los-errors { max-width: 1400px; margin: 0 auto 16px; }
.los-dev-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 18px; }
.los-dev-card { background: var(--d-card); border: 1px solid var(--d-line); border-radius: 16px; padding: 20px 22px; box-shadow: 0 20px 40px rgba(0,0,0,.25); min-width: 0; backdrop-filter: blur(6px); }
.los-dev-card.raised { background: var(--d-raised); transform: translateY(-8px); box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.los-dev-card.span-2 { grid-column: span 2; } .los-dev-card.span-3 { grid-column: span 3; }
.los-dev-card.digest { grid-row: span 1; }
@media (max-width: 1100px) { .los-dev-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .los-dev-card.span-3 { grid-column: span 2; } .los-dev-card.raised { transform: none; } }
@media (max-width: 700px) { .los-dev-grid { grid-template-columns: minmax(0, 1fr); } .los-dev-card.span-2, .los-dev-card.span-3 { grid-column: auto; } }
.los-dev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.los-dev-head h2 { margin: 0; font-family: var(--d-mono); font-size: 1.05rem; letter-spacing: .06em; font-weight: 700; }
.los-dev-head h2 small { color: var(--d-muted); font-weight: 400; letter-spacing: 0; margin-left: 6px; }
.los-dev-head h2.prompt { color: var(--d-orange); font-size: 1.3rem; }
.los-dev-head .icon { font-size: 1.4rem; text-decoration: none; opacity: .9; }
.los-dev-sub { margin: 0 0 14px; color: var(--d-muted); font-size: .9rem; }
.los-dev-range select { background: transparent; color: var(--d-text); border: 1px solid var(--d-line); border-radius: 8px; padding: 6px 10px; font: inherit; }
.los-dev-range option { color: #111; }
.los-dev-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 8px 0 18px; }
.los-dev-kpis small { display: block; color: var(--d-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.los-dev-kpis b { font-family: var(--d-mono); font-size: 1.25rem; }
.los-dev-kpis b.small { font-size: .8rem; word-break: break-all; }
@media (max-width: 700px) { .los-dev-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.los-dev-chart { display: grid; grid-template-columns: 34px 1fr; gap: 8px; height: 240px; background: rgba(0,0,0,.18); border-radius: 12px; padding: 12px 12px 34px 6px; }
.los-dev-chart .axis { display: flex; flex-direction: column; justify-content: space-between; font-size: .68rem; color: var(--d-muted); text-align: right; font-family: var(--d-mono); }
.los-dev-chart .bars { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 4px; align-items: end; height: 100%; position: relative;
    background-image: linear-gradient(var(--d-line) 1px, transparent 1px); background-size: 100% 20%; }
.los-dev-chart .bar { position: relative; height: 100%; display: flex; align-items: flex-end; justify-content: center; outline: none; }
.los-dev-chart .stack { width: min(16px, 80%); height: 100%; display: flex; flex-direction: column-reverse; justify-content: flex-start; }
.los-dev-chart .stack i { display: block; width: 100%; }
.los-dev-chart .stack i:last-child { border-radius: 6px 6px 0 0; }
.los-dev-chart .ok, .los-dev-legend .ok, .los-dev-keys .ok { background: var(--d-teal); }
.los-dev-chart .err, .los-dev-legend .err, .los-dev-keys .err { background: var(--d-orange); }
.los-dev-chart .nf, .los-dev-legend .nf, .los-dev-keys .nf { background: var(--d-purple); }
.los-dev-keys .idle { background: #52627a; }
.los-dev-chart em { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%) rotate(-40deg); transform-origin: center; font-style: normal; font-size: .6rem; color: var(--d-muted); white-space: nowrap; font-family: var(--d-mono); }
.los-dev-chart .tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 5; background: #0d2239; border: 1px solid var(--d-line); border-radius: 10px; padding: 8px 10px; font-size: .75rem; white-space: nowrap; box-shadow: 0 10px 20px rgba(0,0,0,.4); }
.los-dev-chart .bar:hover .tip, .los-dev-chart .bar:focus .tip { display: block; }
.los-dev-legend { display: flex; gap: 14px; align-items: center; margin-top: 10px; font-size: .78rem; color: var(--d-muted); }
.los-dev-legend span { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: -8px; }

.los-dev-donut-row { display: flex; align-items: center; gap: 18px; margin: 6px 0 16px; }
.los-dev-donut { --size: 120px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center;
    background: conic-gradient(var(--d-teal) 0 calc(var(--a) * 1%), var(--d-orange) 0 calc((var(--a) + var(--b)) * 1%), var(--d-purple) 0 100%); }
.los-dev-donut.players { background: conic-gradient(var(--d-teal) 0 calc(var(--a) * 1%), var(--d-orange) 0 calc((var(--a) + var(--b)) * 1%), #52627a 0 100%); }
.los-dev-donut span { width: 74%; height: 74%; border-radius: 50%; background: var(--d-bg); display: grid; place-items: center; font-family: var(--d-mono); font-weight: 700; }
.los-dev-card.raised .los-dev-donut span { background: var(--d-raised); }
.los-dev-keys { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .9rem; }
.los-dev-keys i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }

.los-dev-list { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; font-size: .88rem; }
.los-dev-list dt { color: var(--d-muted); }
.los-dev-list dd { margin: 0; text-align: right; font-family: var(--d-mono); word-break: break-word; }

.los-dev-services { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.los-dev-services li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; }
.los-dev-services li:hover { background: rgba(255,255,255,.04); }
.los-dev-services .dot { width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 3px; border: 2px solid var(--d-muted); }
.los-dev-services .ok .dot { background: var(--d-teal); border-color: var(--d-teal); box-shadow: 0 0 10px rgba(47,211,217,.6); }
.los-dev-services .warn .dot { background: var(--d-orange); border-color: var(--d-orange); }
.los-dev-services .down .dot { background: transparent; border-color: var(--d-red); animation: los-dev-pulse 1.4s infinite; }
@keyframes los-dev-pulse { 50% { box-shadow: 0 0 0 5px rgba(255,107,107,.25); } }
.los-dev-services strong { display: block; font-size: .92rem; }
.los-dev-services small { display: block; color: var(--d-muted); }
.los-dev-services small.meta { opacity: .75; }

.los-dev-numbers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.los-dev-numbers li { position: relative; display: grid; grid-template-columns: 70px 1fr auto; gap: 10px; align-items: baseline; padding: 4px 6px; border-radius: 8px; overflow: hidden; }
.los-dev-numbers li b { font-family: var(--d-mono); color: var(--d-teal); text-align: right; }
.los-dev-numbers.warn li b { color: var(--d-orange); }
.los-dev-numbers li span { word-break: break-all; font-size: .85rem; }
.los-dev-numbers li small { color: var(--d-muted); }
.los-dev-numbers .meter { position: absolute; left: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--d-teal), transparent); }
.los-dev-h3 { font-family: var(--d-mono); font-size: .82rem; letter-spacing: .05em; color: var(--d-muted); margin: 16px 0 8px; font-weight: 600; }
.los-dev-h3 small { letter-spacing: 0; font-weight: 400; }
.los-dev-empty { color: var(--d-muted); font-style: italic; }

.los-dev-table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.los-dev-table th { text-align: left; color: var(--d-muted); font-weight: 400; font-size: .78rem; padding: 6px 8px; border-bottom: 1px solid var(--d-line); }
.los-dev-table td { padding: 8px; border-bottom: 1px solid var(--d-line); vertical-align: top; }
.los-dev-table td small { display: block; color: var(--d-muted); }
.los-dev-table td img { border-radius: 50%; }
.los-dev-table tr:last-child td { border-bottom: 0; }
.los-dev-table .prio.high { color: var(--d-red); } .los-dev-table .prio.medium { color: var(--d-orange); } .los-dev-table .prio.low { color: var(--d-teal); }
.los-dev-table td.mono.small { word-break: break-all; }

.los-dev-spark { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.los-dev-spark i { width: 8px; background: var(--d-orange); border-radius: 2px; opacity: .85; }
.los-dev-slow { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.los-dev-slow li { display: grid; grid-template-columns: 76px 1fr auto; gap: 8px; align-items: baseline; }
.los-dev-slow b { font-family: var(--d-mono); color: var(--d-orange); text-align: right; font-size: .82rem; }
.los-dev-slow span { word-break: break-all; }
.los-dev-slow small { color: var(--d-muted); }

.los-dev-actions { display: grid; gap: 8px; }
.los-dev-actions button { width: 100%; text-align: left; padding: 9px 12px; border-radius: 10px; border: 1px solid var(--d-line); background: rgba(255,255,255,.04); color: var(--d-text); font: inherit; font-size: .88rem; cursor: pointer; }
.los-dev-actions button:hover { background: rgba(139,92,246,.25); border-color: var(--d-purple); }
.los-dev-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .8rem; color: var(--d-muted); }

.los-dev-env { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; }
@media (max-width: 900px) { .los-dev-env { grid-template-columns: minmax(0, 1fr); } }
.los-dev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.los-dev-chips span { font-family: var(--d-mono); font-size: .72rem; padding: 3px 8px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--d-line); }
.los-dev-chips .good { color: var(--d-green); } .los-dev-chips .bad { color: var(--d-red); }
.los-dev .lvl-error, .los-dev .lvl-critical, .los-dev .lvl-alert, .los-dev .lvl-emergency { color: var(--d-red); }
.los-dev .lvl-warning { color: var(--d-orange); }
.los-dev .lvl-info { color: var(--d-teal); }
.los-dev-log { max-height: 340px; overflow: auto; background: rgba(0,0,0,.28); border-radius: 12px; padding: 10px 12px; font-family: var(--d-mono); font-size: .76rem; line-height: 1.55; }
.los-dev-log div { white-space: pre-wrap; word-break: break-word; color: var(--d-text); padding: 2px 0; border-bottom: 1px dashed rgba(255,255,255,.05); }
.los-dev-log div span { color: var(--d-muted); margin-right: 8px; }
.los-dev-log div b { margin-right: 8px; }
.los-dev-foot { max-width: 1400px; margin: 18px auto 0; color: var(--d-muted); font-size: .8rem; text-align: right; }

/* Admin / developer section switcher */
.los-sections { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1400px; margin: 0 auto 18px; }
.los-sections a { padding: 8px 16px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9rem; border: 1px solid var(--row-border, rgba(0,0,0,.1)); color: inherit; }
.los-sections a.active { background: var(--gold, #f2c230); color: #3a2a00; border-color: transparent; }
.los-dev .los-sections a { border-color: rgba(255,255,255,.15); color: #e9f1f7; }
.los-dev .los-sections a.active { background: #2fd3d9; color: #062331; }
/* Staff panels: the row of games (App\Support\StaffPanels) */
.los-staff-games { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1400px; margin: 0 auto 4px; padding: 6px; border-radius: 14px; background: var(--surface-alt, rgba(0,0,0,.04)); }
.los-staff-games a { flex: 1 1 auto; text-align: center; padding: 9px 14px; border-radius: 10px; text-decoration: none; font-weight: 700; font-size: .92rem; color: inherit; white-space: nowrap; }
.los-staff-games a:hover { background: rgba(127,127,127,.12); text-decoration: none; }
.los-staff-games a.active { background: var(--surface, #fff); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.los-dev .los-staff-games { background: rgba(255,255,255,.06); }
.los-dev .los-staff-games a { color: #e9f1f7; }
.los-dev .los-staff-games a.active { background: #2fd3d9; color: #062331; }
.los-game-tag { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; font-size: .75rem; font-weight: 700; background: var(--surface-alt, rgba(0,0,0,.06)); color: var(--muted, inherit); vertical-align: middle; }
.los-admin-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 22px; }
.los-admin-game { display: flex; flex-direction: column; gap: 10px; }
.los-admin-game .los-card-body dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: .9rem; }
.los-admin-game .los-card-body dt { color: var(--muted); }
.los-admin-game .los-card-body dd { margin: 0; font-weight: 600; text-align: right; }
.los-admin-game-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
@media (max-width: 640px) { .los-staff-games a { flex: 1 1 40%; } }
.los-admin-h2 { font-size: 1rem; margin: 18px 0 10px; }

/* Main menu: Community dropdown and Play button */
.los-nav-menu { position: relative; }
.los-nav-menu > summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; color: var(--nav-text); font-weight: 600; font-size: .95rem; cursor: pointer; user-select: none; }
.los-nav-menu > summary::-webkit-details-marker { display: none; }
.los-nav-menu > summary:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.los-nav-menu > summary.active { background: var(--nav-active-bg); color: var(--nav-active-text); }
.los-nav-menu > summary .caret { font-size: .75rem; transition: transform .15s; }
.los-nav-menu[open] > summary .caret { transform: rotate(180deg); }
.los-nav-menu-list { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border-radius: 12px;
    background: linear-gradient(180deg, var(--header-from), var(--header-to)); box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.08); }
.los-nav .los-nav-menu-list a { justify-content: flex-start; gap: 10px; padding: 9px 12px; }
.los-nav .los-nav-menu-list a .los-badge-count { margin-left: auto; }
.los-body .los-nav a.los-nav-play { background: var(--gold, #f2c230); color: #3a2a00; margin-left: 4px; }
.los-body .los-nav a.los-nav-play:hover { background: #ffd54a; color: #3a2a00; }
@media (max-width: 820px) {
    .los-nav-menu-list { position: static; box-shadow: none; border: 0; background: rgba(0, 0, 0, 0.12); margin: 4px 0; }
    .los-nav-menu > summary { width: 100%; }
    .los-body .los-nav a.los-nav-play { margin: 4px 0 0; justify-content: center; }
}

/* Footer staff links */
.los-footer-staff { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; margin-top: 12px; font-size: .88rem; opacity: .9; }
.los-footer-staff > span { opacity: .7; }
.los-footer-staff a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }

/* Admin: Discord channels */
.los-discord-channels { display: grid; gap: 6px; }
.los-discord-channel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(180px, 1fr) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--surface-alt); }
.los-discord-channel small { display: block; }
@media (max-width: 700px) { .los-discord-channel { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FarmVille rank tags (groups) ---------- */
.los-ranktag {
    --rank-h: 24px;
    display: inline-flex; align-items: stretch; height: var(--rank-h); vertical-align: middle;
    border: 2px solid #3b2410; border-radius: 7px; overflow: hidden;
    box-shadow: 0 2px 0 #1e1208, 0 3px 6px rgba(0, 0, 0, .25);
    font-family: "Lilita One", "Figtree", system-ui, sans-serif; font-weight: 400;
    text-transform: uppercase; letter-spacing: .05em; line-height: 1; white-space: nowrap;
}
.los-ranktag-lg { --rank-h: 32px; font-size: 1.05rem; border-radius: 9px; }
.los-ranktag-md { font-size: .82rem; }
.los-ranktag-sm { --rank-h: 20px; font-size: .7rem; border-width: 1.5px; border-radius: 5px; }
.los-ranktag-icon {
    width: var(--rank-h); display: grid; place-items: center; flex: none; font-size: .9em;
    background: linear-gradient(180deg, #fbeecb, #e6c98c); border-right: 2px solid #3b2410;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6);
}
.los-ranktag-icon img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); }
.los-ranktag-label {
    position: relative; display: flex; align-items: center; padding: 0 .75em; color: #fff;
    background:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, .16) 0 5px, transparent 5px 13px),
        linear-gradient(180deg, var(--rank-from), var(--rank-to));
    text-shadow: 0 2px 0 rgba(0, 0, 0, .45), 1px 0 0 rgba(0, 0, 0, .55), -1px 0 0 rgba(0, 0, 0, .55), 0 -1px 0 rgba(0, 0, 0, .55), 0 1px 0 rgba(0, 0, 0, .55);
}
.los-ranktag-label::before { content: ""; position: absolute; inset: 0 0 52% 0; background: linear-gradient(180deg, rgba(255, 255, 255, .45), rgba(255, 255, 255, .05)); pointer-events: none; }
.los-ranktag-label::after { content: ""; position: absolute; inset: 2px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 3px; pointer-events: none; }
.los-ranktag.is-rainbow .los-ranktag-label {
    background:
        repeating-linear-gradient(120deg, rgba(255, 255, 255, .16) 0 5px, transparent 5px 13px),
        linear-gradient(90deg, #ff6b88, #ffae45, #ffe35c, #6fe06a, #6ee6ff, #7b95ff, #bd7bff);
    background-size: auto, 200% 100%;
    animation: los-rank-rainbow 6s linear infinite;
}
@keyframes los-rank-rainbow { to { background-position: 0 0, 200% 0; } }
@media (prefers-reduced-motion: reduce) { .los-ranktag.is-rainbow .los-ranktag-label { animation: none; } }
.los-rank-pack { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.los-rank-pack form { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--surface-alt); }

/* Uploaded profile picture and signature image */
.los-upload-row { display: flex; gap: 16px; align-items: flex-start; }
.los-upload-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--row-border); flex: none; }
.los-signature-image { display: block; max-width: min(600px, 100%); max-height: 150px; height: auto; margin-top: 6px; border-radius: 6px; }
.los-dev-beads { display: inline-flex; gap: 2px; }
.los-dev-beads i { width: 5px; height: 16px; border-radius: 2px; background: var(--d-green); }
.los-dev-beads i.down { background: var(--d-red); }
.los-dev-gauges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 18px; }
@media (max-width: 900px) { .los-dev-gauges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.los-dev-gauge div { display: flex; justify-content: space-between; font-size: .82rem; color: var(--d-muted); }
.los-dev-gauge b { font-family: var(--d-mono); color: var(--d-teal); }
.los-dev-gauge b.meh { color: var(--d-orange); } .los-dev-gauge b.bad { color: var(--d-red); }
.los-dev-gauge i { display: block; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: 6px 0 4px; }
.los-dev-gauge em { display: block; height: 100%; background: linear-gradient(90deg, var(--d-teal), #6ee6ff); border-radius: 999px; }
.los-dev-gauge em.meh { background: var(--d-orange); } .los-dev-gauge em.bad { background: var(--d-red); }
.los-dev-gauge small { color: var(--d-muted); font-size: .72rem; }

/* Unofficial / disclaimer labels */
.los-notice { margin: 1.25rem auto; max-width: 52rem; padding: 1rem 1.4rem; border-radius: .6rem; background: rgba(20, 44, 26, .92); color: #f3f6f1; font-size: .9rem; line-height: 1.6; text-align: center; }
.los-notice a { color: #f6c343; }
.los-notice-sub { display: block; margin-top: 6px; font-size: .8rem; opacity: .8; }
.los-notice-compact { display: table; margin: 14px auto; padding: 6px 14px; border-radius: 999px; font-size: .8rem; }

/* Admin: shop */
.los-shop-publish { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.los-shop-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--row-border); }
.los-shop-row:last-child { border-bottom: 0; }
.los-shop-item { display: flex; gap: 10px; align-items: center; min-width: 0; }
.los-shop-item small { display: block; }
.los-shop-sell { display: grid; grid-template-columns: 110px 100px 80px 140px auto; gap: 6px; align-items: center; }
@media (max-width: 1000px) { .los-shop-row { grid-template-columns: minmax(0, 1fr); } .los-shop-sell { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.los-post-video { display: block; max-width: min(720px, 100%); max-height: 480px; border-radius: 10px; background: #000; margin: 8px 0; }

/* Theme helpers for older (Breeze-era) pages and components */
.los-field-errors { margin: 6px 0 0; padding: 0; list-style: none; color: #b42318; font-size: .85rem; }
[data-theme="moonlit"] .los-field-errors, [data-theme="dark"] .los-field-errors, [data-theme="moonlit"] .los-error-text, [data-theme="dark"] .los-error-text { color: #ff8a80; }
.los-error-text { color: #b42318; font-size: .9rem; }
.los-success-text { color: var(--online); font-size: .9rem; font-weight: 600; }
.los-tool-section { padding: 16px 18px; margin-bottom: 18px; border: 1px solid var(--row-border); border-radius: 12px; background: var(--surface); max-width: 46rem; }
.los-tool-section h3 { margin-top: 0; }
/* Leftover Tailwind colour utilities follow the theme instead of fixed greys and whites. */
.los-body .text-gray-900, .los-body .text-gray-800, .los-body .text-gray-700 { color: var(--text) !important; }
.los-body .text-gray-600, .los-body .text-gray-500, .los-body .text-gray-400 { color: var(--muted) !important; }
.los-body .bg-white, .los-body .bg-gray-50, .los-body .bg-gray-100 { background-color: var(--surface) !important; }
.los-body .border-gray-200, .los-body .border-gray-300 { border-color: var(--row-border) !important; }
.los-body .text-indigo-600, .los-body a.underline { color: var(--link) !important; }

/* Admin → Holiday events */
.los-holiday-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.los-holiday-grid .los-card { margin: 0; }
.los-holiday .los-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.los-holiday.is-active { border-color: var(--gold); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
.los-holiday-icons { display: flex; gap: 4px; min-height: 34px; margin-bottom: 8px; flex-wrap: wrap; }
.los-holiday-icons img { border-radius: 6px; background: var(--surface-alt); }
.los-holiday-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }

/* Admin → Groups & ranks: one compact row per automatic rank. */
.los-rank-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.los-rank-row > .los-ranktag { flex: 0 0 auto; min-width: 150px; }
.los-rank-row input[name="name"] { flex: 0 1 150px; width: 150px; }
.los-rank-row select[name="auto_rule"] { flex: 0 1 180px; width: 180px; }
.los-rank-row input[name="auto_min"], .los-rank-row input[name="position"] { flex: 0 0 72px; width: 72px; }
.los-rank-row input[name="description"] { flex: 1 1 200px; }
.los-rank-row select { width: auto; }

/* ---------- Admin → Discord ---------- */

.los-subtabs { gap: 8px; margin: -8px 0 20px; }
.los-body .los-subtabs .los-tab { padding: 6px 14px; font-size: 0.85rem; border-width: 1px; }
.los-admin-stat small { font-size: 0.78rem; }
.los-serverlog-detail { max-width: 520px; overflow-wrap: anywhere; }
.los-serverlog-detail details { margin-top: 6px; }
.los-serverlog-detail summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.los-serverlog-detail blockquote { margin: 4px 0 8px; padding: 6px 10px; border-left: 3px solid var(--row-border); background: var(--surface-alt); white-space: pre-wrap; }
.los-serverlog-detail p, .los-serverlog-detail ul { margin: 6px 0; }

/* ---------- The CastleVille site (castle.losfarms.xyz, App\Support\CastleSite) ---------- */

/* The castle palettes (themes) are in los-castle.css, loaded only on the castle site. */

.castle-brand-logo { height: 36px; width: auto; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }

.castle-hero {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    margin-bottom: 18px;
    box-shadow: var(--shadow);
    background: #2a1749;
}
.castle-hero img { display: block; width: 100%; height: auto; }
.castle-hero-text {
    padding: 22px 28px 24px;
    color: #fff8e7;
    background: linear-gradient(135deg, #3b2366, #2a1749);
}
.castle-hero-text .los-btn:not(.los-btn-gold) { background: rgba(255, 255, 255, 0.12); color: #fff8e7; border-color: rgba(255, 255, 255, 0.35); }
.castle-hero-text h1 { margin: 0 0 6px; font-size: clamp(1.6rem, 4vw, 2.6rem); line-height: 1.1; }
.castle-hero-text p { margin: 0 0 14px; max-width: 38rem; }
.castle-kicker { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: #f6c343; margin-bottom: 4px !important; }
.castle-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }

.castle-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 18px; }

.castle-update { padding: 14px 20px; border-top: 1px solid var(--row-border); }
.castle-update:first-child { border-top: 0; }
.castle-update time { font-size: 0.8rem; color: var(--muted); }
.castle-update h2 { margin: 2px 0 4px; font-size: 1.05rem; }
.castle-update p { margin: 0; line-height: 1.55; }

@media (max-width: 640px) {
    .castle-hero-text { padding: 18px 16px; }
}