/* Reupload — customer-facing site. Intentionally, deliberately bad: MS Paint doodle energy, on
 * purpose, matching the VK community's own cover art (hand-drawn marker doodles, the scribbled
 * boar mascot) rather than any kind of polished "clean SaaS" look. Flat white canvas, thick black
 * marker outlines, raw unmixed Paint-palette colours, Comic Sans.
 * This is the joke on purpose — don't "fix" it toward good taste.
 *
 * A second pass killed everything that read as "2026 person's ironic pastiche" rather than
 * "genuinely 2000": no more organic blob border-radius (that's a 2020s shape language, nothing
 * looked like that in 2000 — corners were either square or a plain circle, nothing in between),
 * no more CSS transitions (hover states just snap — transitions didn't exist yet), and the page is
 * a genuinely FIXED-WIDTH 760px column, not a fluid responsive one — the "Лучше смотрится в IE
 * 800×600" badge is not a joke the layout contradicts, it's literally true now.
 *
 * Still shares a little DNA with assets/admin.css (status-colour meaning, same nav structure) so
 * the two feel like the same app, just one in a business suit and one in crayon.
 */
/* No @import here on purpose, this time: web fonts are 2010s technology (@font-face only shipped
 * broadly from ~2010, Google Fonts from 2010). A page from 2000 could only ever use whatever was
 * already installed on YOUR OWN machine — Comic Sans MS, Arial Black, Impact, Times New Roman.
 * That's also why headings now vary who-knows-how between visitors depending what they have.
 *
 * Third pass: the doodle-chaos look was its own kind of "too designed" — a real commerce/portal
 * page from 2000 (half.com, CDNow, eBay) wasn't hand-drawn-MS-Paint-cute, it was DENSE: default
 * Times New Roman body text, plain blue underlined links, and clashing SOLID colour bars (never
 * the same colour twice on one page) over a tight multi-column table of tiny text. That ugliness
 * comes from information density and a style author with no unifying palette, not from a joke
 * font. Comic Sans/Impact/the hand-drawn borders stay only as a thinner accent now, not the base. */

:root {
    --bg: #ffffff;
    --bg-raised: #ffffff;
    --bg-card: #fffef2;
    --bg-input: #ffffff;
    --border: #000000;
    --border-strong: #000000;
    --text: #0a0a0a;
    --text-muted: #45433a;
    --text-dim: #716f63;
    --accent: #1a3bff;
    --accent-hover: #0022cc;
    --accent-soft: #dfe6ff;
    --money: #ff2200;
    --money-hover: #cc1b00;
    --money-soft: #ffe0d9;
    --ok: #12a83a;
    --ok-soft: #d7f7de;
    --err: #ff2200;
    --err-soft: #ffe0d9;
    --gold: #ffb800;
    --radius-pill: 2px;
    --radius-card: 0px;
    --radius-sm: 2px;
    --shadow-card: 3px 3px 6px rgba(0, 0, 0, 0.55);
    --bevel-raised: #fff #888 #888 #fff;
    --bevel-sunken: #888 #fff #fff #888;
    --font-display: 'Impact', 'Arial Black', 'Comic Sans MS', sans-serif;
    --font-body: 'Times New Roman', Times, serif;
    --font-type: 'Times New Roman', Times, serif;
    --font-doodle: 'Comic Sans MS', cursive, sans-serif;
    --link-blue: #0000ee;
    --link-visited: #551a8b;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding-top: 24px;
    background: #c0c0c0;
    background-image:
        radial-gradient(circle, #00000014 1.5px, transparent 1.6px),
        radial-gradient(circle, rgba(26, 59, 255, 0.1) 2px, transparent 2.2px),
        radial-gradient(circle, rgba(236, 90, 44, 0.08) 1.8px, transparent 2px);
    background-size: 22px 22px, 71px 71px, 53px 53px;
    background-position: 0 0, 12px 19px, 40px 6px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M12 0 L14.5 9.5 L24 12 L14.5 14.5 L12 24 L9.5 14.5 L0 12 L9.5 9.5 Z' fill='%23ff2200' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 12 12, auto;
}

/* Plain default-browser blue links for anything that's prose/content, not a styled button or nav
 * item — real pages from 2000 almost never bothered recolouring every link, so most of them just
 * stayed #0000EE/visited #551A8B (the literal old Mosaic/Netscape defaults). */
a { color: var(--link-blue); text-decoration: underline; }
a:visited { color: var(--link-visited); }
.app-nav a, .btn, .dash-card, .section-bar, .ad-slot, .retro-badge, .rating-badge, .app-nav-balance,
.page-back, .retro-footer a, .webring-nav a { text-decoration: none; }
a.link-plain { color: var(--link-blue); text-decoration: underline; cursor: pointer; }
a.link-plain:visited { color: var(--link-visited); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; line-height: 1.15; color: var(--text); }
code { font-family: Consolas, monospace; background: #fff6b8; border: 2px solid #000; padding: 0 4px; }

input, textarea, select, button {
    font-family: inherit;
    font-size: 15px;
}
/* Typed/selected values stay in the (still bad, just more legible) Comic Sans register — you still
 * need to be able to proofread the amount you're about to pay. Everything you only ever READ gets
 * the full marker treatment. */
input:not([type=submit]):not([type=button]), textarea, select { font-family: var(--font-type); }

.ui-icon { display: block; flex-shrink: 0; filter: url(#reupload-wobble); }

/* ---- the caution-tape marquee strip, because this is still not quite bad enough ---- */
.caution-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 9998; height: 24px; overflow: hidden; background: repeating-linear-gradient(135deg, #000 0 12px, #ffe600 12px 24px); border-bottom: 3px solid #000; display: flex; align-items: center; }
.caution-bar-track { display: inline-block; white-space: nowrap; padding-left: 100%; font-family: var(--font-type); font-weight: 700; font-size: 11px; letter-spacing: .04em; color: #000; background: #fff; border: 2px solid #000; padding-top: 1px; padding-bottom: 1px; animation: caution-scroll 22s steps(60) infinite; }
@keyframes caution-scroll { from { transform: translateX(0); } to { transform: translateX(-200%); } }
@keyframes blink-hard { 0%, 49% { opacity: 1; } 50%, 100% { opacity: .35; } }
.badge.warn, .app-nav-balance-plus { animation: blink-hard 1.1s step-start infinite; }
.app-nav-brand, .auth-box h1, .page-head h1 { text-shadow: 2px 2px 0 var(--money), -1px -1px 0 var(--accent); }
.btn:not(.small):not(.danger)::after { content: " !!!"; }

/* ---- the whole site sits in a fixed 760px "table", same as the real 2000 experience — a plain
 * grey desktop behind it, not a fluid column that quietly reflows for whatever screen you have. ---- */
.app-shell { width: 760px; margin: 0 auto; background: var(--bg); border-left: 1px solid #888; border-right: 1px solid #888; min-height: 100vh; }

/* ---- VK sign-in screen ---- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
    background: #c0c0c0;
    background-image: radial-gradient(circle, #00000014 1.5px, transparent 1.6px);
    background-size: 22px 22px;
}
.auth-box {
    width: 100%;
    max-width: 420px;
    background: var(--bg-card);
    border: 4px solid #000;
    padding: 38px 34px;
    box-shadow: var(--shadow-card);
    transform: rotate(-1deg);
}
.auth-box-mark {
    width: 54px; height: 54px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #000;
    color: #000;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 16px;
    transform: rotate(4deg);
}
.auth-box h1 { margin: 0 0 8px; font-size: 32px; transform: rotate(-1deg); }
.auth-box p { color: var(--text-muted); font-size: 15px; line-height: 1.6; }
.auth-box form { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; }
.auth-box label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--text-muted); font-weight: 700; }
.auth-box input {
    background: #fff;
    border-width: 2px;
    border-style: inset;
    border-color: var(--bevel-sunken);
    padding: 10px 12px;
    color: var(--text);
}
.auth-box input:focus { outline: 1px dotted #000; outline-offset: -4px; }
.auth-box button {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--money);
    color: #fff;
    border-width: 3px;
    border-style: outset;
    border-color: var(--bevel-raised);
    padding: 13px;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 15px;
    cursor: pointer;
}
.auth-box button:hover { background: var(--money-hover); }
.auth-box button:active { border-style: inset; border-color: var(--bevel-sunken); }
.auth-error { color: var(--err); font-size: 13.5px; font-weight: 700; }
.auth-ok { color: var(--ok); font-size: 13.5px; font-weight: 700; }
#qrHolder { display: flex; justify-content: center; margin: 18px auto; background: #fff; padding: 14px; border: 3px solid #000; width: fit-content; }
.auth-manual-key-row {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff6b8;
    border: 3px solid #000;
    padding: 9px 10px 9px 14px;
}
.auth-manual-key-row code { flex: 1; min-width: 0; color: var(--text); font-size: 13px; word-break: break-all; background: none; border: none; padding: 0; }

/* ---- one-click copy button ---- */
.copy-btn {
    position: relative;
    flex-shrink: 0;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    background: #d4d0c8;
    border-width: 2px;
    border-style: outset;
    border-color: var(--bevel-raised);
    color: #000;
    cursor: pointer;
    padding: 0;
}
.copy-btn:active { border-style: inset; border-color: var(--bevel-sunken); }
.copy-btn:hover { background: #fff6b8; }
.copy-btn-icon, .copy-btn-check {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
}
.copy-btn-check { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
.copy-btn.copied { color: var(--ok); border-color: var(--ok); background: var(--ok-soft); }
.copy-btn.copied .copy-btn-icon { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
.copy-btn.copied .copy-btn-check { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ---- app shell: a solid-colour top tab strip (half.com's own orange nav bar, not a styled
 * modern pill nav), then a 3-column table-portal body below it. ---- */
.app-nav {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 3px;
    padding: 6px 10px;
    background: #ff9900;
    border-bottom: 3px solid #000;
}
.app-nav-brand {
    display: flex; align-items: center; gap: 7px;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 19px;
    color: #000;
    margin-right: 14px;
}
.app-nav-brand-mark { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 2px solid #000; color: #000; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.app-nav a:not(.app-nav-brand) {
    display: flex; align-items: center; gap: 5px;
    padding: 6px 12px 7px;
    border: 2px solid #000;
    border-bottom: none;
    background: #ffcc66;
    color: #000;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px 4px 0 0;
}
.app-nav a .ui-icon { color: #553300; width: 14px; height: 14px; }
.app-nav a:hover { background: #fff2d9; }
.app-nav a:hover .ui-icon { color: #000; }
.app-nav a.active { background: #fff; }
.app-nav a.active .ui-icon { color: #000; }
.app-nav-account { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.app-nav-balance {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 5px 4px 10px;
    background: var(--money);
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    border-width: 2.5px;
    border-style: outset;
    border-color: var(--bevel-raised);
}
.app-nav-balance:hover { background: var(--money-hover); }
.app-nav-balance:active { border-style: inset; border-color: var(--bevel-sunken); }
.app-nav-balance-plus {
    display: flex; align-items: center; justify-content: center;
    width: 20px; height: 20px;
    border-radius: 999px;
    background: #fff;
    color: var(--money);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
}
.app-nav-user { font-size: 12.5px; color: var(--text-muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.app-nav-logout button {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    background: #d4d0c8;
    border-width: 2.5px;
    border-style: outset;
    border-color: var(--bevel-raised);
    color: #000;
    padding: 0;
    cursor: pointer;
}
.app-nav-logout button:hover { background: #fff6b8; }
/* ---- the real signature of the reference: a dense 3-column "table" body — categorised link
 * list on the left, content in the middle, ads/ratings/newsletter on the right, every section a
 * different solid colour with no attempt at a shared palette. ---- */
.app-page { display: grid; grid-template-columns: 136px 1fr 150px; align-items: start; }
.app-main { padding: 14px 14px 30px; min-width: 0; }
.side-col { padding: 8px 8px 16px; font-size: 11px; }
.side-left { background: #fff; border-right: 2px solid #000; }
.side-right { background: #fff; border-left: 2px solid #000; }
.section-bar { background: #cc0000; color: #fff; font-family: Arial, Helvetica, sans-serif; font-weight: 700; font-size: 11px; padding: 3px 6px; margin: 10px 0 4px; }
.side-col .section-bar:first-child { margin-top: 0; }
.sidebar-links { list-style: none; margin: 0 0 4px; padding: 0 0 0 4px; }
.sidebar-links li { margin: 2px 0; }
.sidebar-links a { font-size: 11px; }
.side-ads { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 6px; }
.side-ads .ad-slot-square { width: 110px !important; min-height: 90px !important; margin: 0; }
.side-right .ratings-row { flex-direction: column; align-items: flex-start; gap: 4px; margin: 0 0 4px; }
.side-right .rating-badge { width: 100%; height: auto; padding: 2px 4px; align-items: flex-start; font-size: 8.5px; }
.side-right .newsletter-form { flex-direction: column; align-items: stretch; background: none; border: none; padding: 0; margin: 0; gap: 4px; }
.side-right .newsletter-form input[type=email] { width: 100%; }
@media (max-width: 800px) {
    .app-page { grid-template-columns: 1fr; }
    .side-left, .side-right { border: none; border-top: 2px solid #000; }
}
.nav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--money); color: #fff; font-size: 11px; font-weight: 700; border: 2px solid #000; }

/* ---- dashboard / quick-stat tiles ---- */
.dash-cards { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 24px; }
.dash-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 3.5px solid #000;
    padding: 20px 24px;
    text-decoration: none;
    min-width: 230px;
    flex: 1 1 230px;
    box-shadow: var(--shadow-card);
}
.dash-card:nth-child(odd) { transform: rotate(-1.2deg); }
.dash-card:nth-child(even) { transform: rotate(1deg); }
a.dash-card:hover { background: var(--bg-card); }
.dash-card-icon {
    flex-shrink: 0;
    width: 46px; height: 46px;
    background: #fff;
    border: 3px solid #000;
    color: #000;
    display: flex; align-items: center; justify-content: center;
}
.dash-card-num { font-family: var(--font-type); font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.dash-card-label { color: var(--text-muted); font-size: 13px; margin-top: 3px; font-weight: 700; }

/* ---- page head ---- */
.app-main .page-head { margin: 0 0 22px; }
.page-back { display: inline-block; margin-bottom: 6px; font-size: 13px; line-height: 1.4; color: var(--text-muted); text-decoration: none; font-weight: 700; }
.page-back:hover { color: var(--text); }
.page-head-row { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 20px; }
.page-head-titles { flex: 1 1 280px; min-width: 0; }
.app-main .page-head h1 { margin: 0; font-size: 22px; overflow-wrap: anywhere; transform: rotate(-0.6deg); display: inline-block; }
.page-note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); max-width: 640px; font-weight: 400; font-family: var(--font-type); }
.page-note a { color: var(--accent); font-weight: 700; text-decoration: underline; }

/* ---- buttons: classic Win95 GUI bevel (border-style: outset, pressed = inset) — that's what a
 * real <button> looked like in 2000, not a flat "sticker" with an offset drop-shadow (that trick
 * is itself a 2020s design trend, ironically the exact kind of thing this pass is hunting down). ---- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--money);
    color: #fff;
    border-width: 3px;
    border-style: outset;
    border-color: var(--bevel-raised);
    border-radius: var(--radius-pill);
    padding: 10px 20px;
    text-decoration: none;
    cursor: pointer;
    font-weight: 700;
    font-family: var(--font-body);
    font-size: 15px;
}
.btn:hover { background: var(--money-hover); }
.btn:active { border-style: inset; border-color: var(--bevel-sunken); }
.btn.secondary { background: #d4d0c8; border-color: var(--bevel-raised); color: var(--text); }
.btn.secondary:hover { background: #e4e0d8; }
.btn.secondary:active { border-style: inset; border-color: var(--bevel-sunken); }
.btn.danger { background: #fff; color: var(--err); border-style: solid; border-color: var(--err); }
.btn.danger:hover { background: var(--err-soft); }
.btn.small { padding: 7px 14px; font-size: 13px; }

/* ---- tables ---- */
.table-wrap { background: var(--bg-card); border: 3.5px solid #000; box-shadow: var(--shadow-card); overflow: hidden; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; background: transparent; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 2.5px solid #000; font-size: 14.5px; vertical-align: middle; }
th { color: #fff; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; background: #000; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fff6b8; }
.actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.actions form { margin: 0; display: contents; }

/* ---- forms ---- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; color: var(--text-muted); font-weight: 700; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field textarea, .field select {
    background: #fff;
    border-width: 2px;
    border-style: inset;
    border-color: var(--bevel-sunken);
    padding: 10px 12px;
    color: var(--text);
    width: 100%;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: 1px dotted #000; outline-offset: -4px; }
.field textarea { resize: vertical; min-height: 90px; font-family: var(--font-type); }
.number-field { position: relative; display: flex; }
.number-field input[type=number] { padding-right: 30px; }
.number-stepper { position: absolute; top: 2px; right: 2px; bottom: 2px; display: flex; flex-direction: column; width: 24px; border-left: 3px solid #000; overflow: hidden; }
.number-stepper button {
    flex: 1;
    background: #d4d0c8;
    border-width: 1.5px;
    border-style: outset;
    border-color: var(--bevel-raised);
    color: #000;
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    padding: 0;
}
.number-stepper button:active { border-style: inset; border-color: var(--bevel-sunken); }
.number-stepper button:hover { background: var(--gold); }

/* ---- panels (profile card, topup flow, etc.) ---- */
.panel { background: var(--bg-card); border: 3.5px solid #000; padding: 24px; margin-bottom: 20px; box-shadow: var(--shadow-card); }
.panel h2 { margin: 0 0 16px; font-size: 20px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-size: 18px; }

/* ---- status pills (circular tags were period-plausible — think wax-seal/sticker graphics —
 * unlike the asymmetric organic blobs this pass removed everywhere else) ---- */
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; border: 2.5px solid #000; color: #000; background: #fff; white-space: nowrap; vertical-align: middle; }
.badge.warn { color: #000; background: var(--gold); }
.badge.ok { color: #fff; background: var(--ok); border-color: #000; }
.badge.err { color: #fff; background: var(--err); border-color: #000; }
.badge.info { color: #fff; background: var(--accent); border-color: #000; }

.md-icon { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; }

/* ---- flash / toast ---- */
.flash { display: none; }
#toast-container { position: fixed; top: 18px; right: 18px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 380px; pointer-events: none; }
.toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 15px;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.45;
    color: var(--text);
    background: #fff;
    border: 3px solid #000;
    box-shadow: var(--shadow-card);
}
.toast-icon { flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.toast.ok .toast-icon { color: var(--ok); }
.toast.err .toast-icon { color: var(--err); }
.toast-text { flex: 1; min-width: 0; }

/* ---- drag-and-drop file picker (upload.php) ---- */
.dropzone {
    border: 4px dashed #000;
    padding: 44px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-card);
    max-width: 440px;
    transform: rotate(-0.6deg);
}
.dropzone:hover, .dropzone:focus-visible { background: #fff6b8; }
.dropzone.drag-over { border-color: var(--money); background: var(--money-soft); }
.dropzone-text { color: var(--text-muted); font-size: 15px; font-weight: 700; }
.dropzone-browse { color: var(--accent); font-weight: 700; text-decoration: underline; }
.dropzone-filename { margin-top: 12px; font-family: Consolas, monospace; font-size: 13px; color: var(--text); word-break: break-all; }

/* ---- support/guestbook thread — a real phpBB-style forum post (black name/date bar, body
 * below), not a modern messenger's left/right message bubbles — that UI pattern (and the AJAX
 * live chat behind it) is a 2010s thing a 2000 community site never had. ---- */
.chat-thread { display: flex; flex-direction: column; gap: 12px; margin: 0 0 20px; }
.chat-msg { border: 2.5px solid #000; font-size: 14.5px; line-height: 1.5; overflow-wrap: anywhere; }
.chat-msg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: #000; color: #fff; padding: 4px 10px; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.chat-msg-author { font-family: var(--font-type); }
.chat-msg-meta { font-weight: 400; opacity: .85; white-space: nowrap; }
.chat-msg-body { padding: 10px 15px; font-weight: 700; background: #fff; }
.chat-msg.mine .chat-msg-head { background: var(--accent); }
.chat-msg.mine .chat-msg-body { background: var(--accent-soft); }
.chat-empty { color: var(--text-muted); font-size: 14px; margin: 0 0 20px; font-weight: 700; }
.chat-compose { display: flex; gap: 10px; align-items: flex-end; }
.chat-compose .field { flex: 1; margin-bottom: 0; }
.chat-compose textarea { min-height: 52px; resize: vertical; }
.chat-compose .btn { height: 48px; }

/* ---- nothing stays symmetrical: per-element jitter, a clashing second "bad" font for emphasis —
 * the thrown-together, no-grid feel of a 2000s B2B site, not a tidy design system with one wobble
 * applied everywhere identically. Data inside table cells is left alone: the row/column grid itself
 * still has to line up, only the chrome around it doesn't. ---- */
h2 { display: inline-block; transform: rotate(-0.8deg); }
strong, b { font-family: 'Times New Roman', Times, serif; font-style: italic; font-weight: 700; text-decoration: underline; }
.panel:nth-of-type(2n) .panel-head h2, .panel:nth-of-type(2n) > h2 { font-family: 'Times New Roman', Times, serif; font-style: italic; letter-spacing: 0.02em; transform: rotate(1deg); }
.field:nth-of-type(odd) label { display: inline-block; transform: rotate(-0.7deg); }
.field:nth-of-type(even) label { display: inline-block; transform: rotate(0.6deg); letter-spacing: 0.05em; }
th { transform: rotate(-1deg); }
th:nth-child(2n) { transform: rotate(0.8deg); letter-spacing: 0.08em; }
th:nth-child(3n) { transform: rotate(-0.5deg); letter-spacing: 0.02em; }
.badge { transform: rotate(-2deg); }
tr:nth-child(even) .badge { transform: rotate(2.5deg); }
.app-nav a:nth-child(odd):not(.app-nav-brand) { transform: rotate(-0.7deg); }
.app-nav a:nth-child(even):not(.app-nav-brand) { transform: rotate(0.6deg); }
.app-nav a.active { transform: rotate(0deg); }
.dash-card-label { display: inline-block; transform: rotate(-0.6deg); }
.panel-head h2 { transform: rotate(-0.6deg); display: inline-block; }

/* ---- the retro personal-homepage pack: hit counter, "best viewed in", webring row ---- */
.hr-fancy { height: 6px; margin: 36px 0 20px; background: repeating-linear-gradient(90deg, var(--money) 0 10px, var(--accent) 10px 20px, var(--ok) 20px 30px, #ffb800 30px 40px); border: 2px solid #000; }
.retro-footer { padding: 18px; background: #000; border: 3px solid #000; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.visitor-counter { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; justify-content: center; color: #fff; font-family: 'Comic Sans MS', cursive, sans-serif; font-size: 12.5px; font-weight: 700; }
.counter-digit { display: inline-flex; align-items: center; justify-content: center; width: 17px; background: #111; border: 1px solid #0f0; margin-left: 3px; font-family: 'Courier New', monospace; font-weight: 700; font-size: 15px; color: #ff2200; text-shadow: 0 0 5px #ff2200; }
.retro-badge-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.retro-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 9px; background: #fff; color: #000; border: 2px solid var(--accent); font-family: var(--font-type); font-size: 10.5px; font-weight: 700; text-decoration: none; line-height: 1.6; }
.rainbow-text {
    font-family: var(--font-display); font-size: 13px; font-weight: 400; text-align: center;
    background: linear-gradient(90deg, #ff0000, #ff9900, #ffee00, #33cc33, #3399ff, #cc33ff, #ff0000);
    background-size: 400% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
    animation: rainbow-slide 4s steps(14) infinite;
}
@keyframes rainbow-slide { from { background-position: 0% 0; } to { background-position: 400% 0; } }

/* ---- ad-exchange banner slots — dithered diagonal stripes, the way a cheap GIF banner actually
 * tiled in a 256-colour palette, not a smooth modern CSS gradient mesh ---- */
.ad-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    text-align: center;
    text-decoration: none;
    color: #000;
    font-family: var(--font-type);
    border: 3px dashed #000;
    padding: 10px 14px;
    cursor: pointer;
    background: repeating-linear-gradient(135deg, var(--ad-c1) 0 9px, var(--ad-c2) 9px 18px);
    transform: rotate(var(--ad-rot));
    box-shadow: 3px 3px 0 0 #000;
}
.ad-slot:hover { background: repeating-linear-gradient(135deg, var(--ad-c2) 0 9px, var(--ad-c1) 9px 18px); }
.ad-slot-tag { font-weight: 700; font-size: var(--ad-fs-tag, 13.5px); line-height: 1.2; text-shadow: 1px 1px 0 #fff; }
.ad-slot-sub { font-weight: 700; font-size: var(--ad-fs-sub, 10px); letter-spacing: .02em; text-shadow: 1px 1px 0 #fff; }
.ad-slot-price { font-weight: 700; font-size: var(--ad-fs-price, 11px); background: #000; color: #fff; padding: 2px 9px; animation: blink-hard 1s step-start infinite; }
/* Size is now fixed per slot type (no more price-driven scaling) — these corner arrows are what
 * hint the real banner a buyer gets can run bigger than the box drawn here. Sitting outside the
 * box (negative offsets) got them clipped by .ad-rail's overflow and painted over by the next
 * slot down the stack, so they're inset instead, in their own little high-contrast tag so the
 * dithered stripes behind can't swallow them. */
.ad-slot-arrow { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 16px; height: 16px; font-weight: 900; font-size: 11px; color: #ff0000; background: #fff; border: 1px solid #000; line-height: 1; pointer-events: none; }
.ad-slot-arrow-tl { top: 3px; left: 3px; }
.ad-slot-arrow-tr { top: 3px; right: 3px; }
.ad-slot-arrow-bl { bottom: 3px; left: 3px; }
.ad-slot-arrow-br { bottom: 3px; right: 3px; }
/* Width/min-height come inline per instance (ui_ad_slot() in lib/ui.php) — price-driven, so these
 * are just fallbacks and layout behaviour: banner always fills its row, square/skyscraper are
 * inline boxes sized by their own style attribute. */
.ad-slot-banner { width: 100%; margin: 18px auto; }
.ad-slot-square { margin: 14px auto; }
.ad-slot-skyscraper { margin: 10px auto; }
.ad-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: flex-end; margin: 18px 0; }

/* Side rails: fixed to the viewport edge, filling the grey dead margin outside the fixed 760px
 * column tier by tier — nobody leaves unsold space empty, so once there's room for a SECOND
 * column of banners out there, it gets one too, and a third past that. Each tier is gated behind
 * its own min-width so it only ever appears once it actually fits without overlapping the last. */
.ad-rail { display: none; position: fixed; top: 60px; bottom: 8px; z-index: 40; flex-direction: column; gap: 10px; overflow-y: auto; scrollbar-width: none; }
.ad-rail::-webkit-scrollbar { display: none; }
.ad-rail-l1 { right: calc(50% + 400px); }
.ad-rail-r1 { left: calc(50% + 400px); }
.ad-rail-l2 { right: calc(50% + 610px); }
.ad-rail-r2 { left: calc(50% + 610px); }
.ad-rail-l3 { right: calc(50% + 820px); }
.ad-rail-r3 { left: calc(50% + 820px); }
@media (min-width: 1220px) { .ad-rail-l1, .ad-rail-r1 { display: flex; } }
@media (min-width: 1640px) { .ad-rail-l2, .ad-rail-r2 { display: flex; } }
@media (min-width: 2060px) { .ad-rail-l3, .ad-rail-r3 { display: flex; } }

/* ---- favourites nag, webmaster credit, ratings row, newsletter box, music toggle, 2nd marquee ---- */
.favorites-banner { background: var(--gold); border-bottom: 3px solid #000; color: #000; text-align: center; padding: 6px; font-weight: 700; font-size: 13px; letter-spacing: .04em; animation: blink-hard 1.4s step-start infinite; }
.webmaster-credit { text-align: center; font-size: 10.5px; color: var(--text-dim); font-family: var(--font-type); font-weight: 700; margin: 10px 0 24px; }

.ratings-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0; }
.rating-badge { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 88px; height: 31px; background: #e8e8e8; border: 1px solid #000; color: #000; font-size: 9px; line-height: 1.3; font-family: 'Courier New', monospace; font-weight: 700; text-align: center; text-decoration: none; }
.rating-badge-img { border: 1px solid #000; background: #fff; }

.music-toggle { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: #d4d0c8; border-width: 2.5px; border-style: outset; border-color: var(--bevel-raised); color: #000; font-size: 16px; cursor: pointer; padding: 0; }
.music-toggle.playing { background: var(--ok); color: #fff; border-style: inset; border-color: var(--bevel-sunken); animation: blink-hard 0.5s step-start infinite; }

.newsletter-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: center; background: #fff6b8; border: 2.5px solid #000; padding: 10px 14px; margin: 16px 0; }
.newsletter-label { font-weight: 700; font-size: 12px; font-family: var(--font-type); }
.newsletter-form input[type=email] { border: 2px solid #000; padding: 6px 9px; font-family: var(--font-type); font-size: 13px; width: 180px; }

.inline-marquee { margin: 18px 0; height: 24px; overflow: hidden; background: #000; border: 2px solid #000; display: flex; align-items: center; }
.inline-marquee-track { display: inline-block; white-space: nowrap; padding-left: 100%; color: #0f0; font-family: 'Courier New', monospace; font-weight: 700; font-size: 12px; animation: inline-marquee-scroll 18s steps(80) infinite; }
@keyframes inline-marquee-scroll { from { transform: translateX(0); } to { transform: translateX(-200%); } }

.webring-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin: 14px 0; font-family: var(--font-type); font-size: 12px; font-weight: 700; }
.webring-label { color: var(--text-dim); }
.webring-nav a { color: #0000ee; text-decoration: underline; }
.webring-nav a:visited { color: #551a8b; }

/* ---- reklama.php: the add-on checklist and the (deliberately huge) lot picker ---- */
.addon-list { display: flex; flex-direction: column; margin-bottom: 16px; border: 2.5px solid #000; background: var(--bg-card); }
.addon-item { display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 13px; font-family: var(--font-type); font-weight: 700; cursor: pointer; border-bottom: 1px solid #ccc; }
.addon-item:last-child { border-bottom: none; }
.addon-item:hover { background: #fff6b8; }
.addon-label { flex: 1; min-width: 0; }
.addon-price { flex-shrink: 0; font-weight: 700; color: var(--accent); white-space: nowrap; }
.addon-total { font-family: var(--font-display); font-size: 20px; text-align: right; margin: 6px 0 14px; }
.addon-total span { color: var(--accent); }
/* A real rate card this size would never fit one screen either — scroll it, don't paginate it. */
.reklama-lot-list { max-height: 260px; overflow-y: auto; }

/* ---- narrow screens: the nav still wraps so the site stays navigable, but the 760px column does
 * NOT — same as a real browser on a real 2000 site, you scroll sideways or zoom out, the page
 * does not politely reflow around you. ---- */
@media (max-width: 800px) {
    .app-shell { width: 760px; border: none; }
    .app-nav { padding: 10px 14px; gap: 2px; row-gap: 8px; }
    .app-nav-brand { margin-right: 0; }
    .app-nav a:not(.app-nav-brand) { padding: 7px 11px; font-size: 13.5px; }
}