/* Flarum Rankings — styled to match flarum.org (light, orange, Mukta/Inter) */
:root {
    --bg:          #f7f9f9;
    --bg-soft:     #f8fafc;
    --surface:     #ffffff;
    --surface-2:   #f1f5f9;
    --border:      #e6eaf0;
    --border-2:    #cbd5e0;
    --ink:         #1a1f2e;   /* headings — Flarum's dark navy */
    --text:        #334155;
    --muted:       #64748b;
    --muted-2:     #94a3b8;
    --primary:     #e7742e;   /* Flarum orange */
    --primary-d:   #cf6322;
    --primary-soft:#fdf0e7;
    --green:       #2f9e69;
    --green-soft:  #e8f6ef;
    --amber:       #b7791f;
    --amber-soft:  #fdf3e0;
    --red:         #dc2626;
    --red-soft:    #fdeaea;
    --blue:        #2563eb;
    --shadow-sm:   0 1px 2px rgba(16,24,40,.05);
    --shadow:      0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
    --shadow-lg:   0 12px 28px -8px rgba(16,24,40,.16);
    --font:        'Inter', -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
    --font-display:'Mukta', 'Inter', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); }
.container { max-width: 980px; margin: 0 auto; padding: 0 1.25rem; }

/* Header */
.site-header {
    position: sticky; top: 0; z-index: 20;
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.95);
    border-bottom: 1px solid #e5e7eb;       /* gray-200 */
}
html.dark .site-header { background: rgba(17,24,39,.95); border-bottom-color: #1f2937; } /* gray-900/95, gray-800 */
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; position: relative; }
.brand { display: inline-flex; align-items: center; }
.brand-logo svg { height: 1.6rem; width: auto; display: block; }
.nav { display: flex; gap: 1.5rem; align-items: center; font-size: .875rem; font-weight: 500; color: #374151; } /* gray-700 */
html.dark .nav { color: #d1d5db; }          /* gray-300 */
.nav > a:hover { color: #111827; }           /* gray-900 */
html.dark .nav > a:hover { color: #f3f4f6; } /* gray-100 */
/* Mobile menu (checkbox hack) */
.nav-burger { display: none; cursor: pointer; color: #374151; padding: .3rem; }
html.dark .nav-burger { color: #d1d5db; }
.nav-burger svg { width: 1.5rem; height: 1.5rem; display: block; }
.theme-toggle { background: none; border: 0; cursor: pointer; color: #6b7280; display: inline-flex; align-items: center; padding: .3rem; border-radius: 8px; }
.theme-toggle:hover { color: #111827; }
html.dark .theme-toggle { color: #9ca3af; }
html.dark .theme-toggle:hover { color: #f3f4f6; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; display: block; }
.theme-toggle .th-sun { display: none; }
html.dark .theme-toggle .th-moon { display: none; }
html.dark .theme-toggle .th-sun { display: block; }

/* Hero */
.hero { padding: 3rem 0 1.6rem; text-align: center; }
.hero h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 0 0 .7rem; font-weight: 800; letter-spacing: -.02em; }
.hero h1 span { color: var(--primary); }
.hero p { color: var(--muted); max-width: 38rem; margin: 0 auto; font-size: 1.08rem; }
.hero-actions { margin-top: 1.6rem; display: flex; gap: .6rem; justify-content: center; }

/* Section heading */
.section-label { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; margin: 2.2rem 0 .9rem; }

/* Podium (top 3) */
.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.podium .card {
    background: var(--surface); border: 1px solid var(--border); border-radius: 1rem;
    padding: 1.2rem; box-shadow: var(--shadow-sm); transition: box-shadow .15s, transform .15s, border-color .15s;
}
.podium .card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--border-2); }
.podium .card.gold { border-color: #f3c969; }
.podium .rank-chip {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.1rem; height: 2.1rem; border-radius: 999px; font-family: var(--font-display); font-weight: 800; font-size: 1rem;
    background: var(--surface-2); color: var(--muted); margin-bottom: .7rem;
}
.podium .gold .rank-chip   { background: #fbf0d2; color: #b7791f; }
.podium .silver .rank-chip { background: #eef1f5; color: #64748b; }
.podium .bronze .rank-chip { background: #f6e9df; color: #b06a3a; }
.podium .name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); margin-bottom: .1rem; }
.podium .host { color: var(--muted-2); font-size: .8rem; word-break: break-all; }
.podium .stat { margin-top: .8rem; font-size: .88rem; color: var(--muted); }
.podium .stat b { color: var(--green); font-weight: 700; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .4rem 0 1.1rem; }
.chip {
    display: inline-block; padding: .38rem .85rem; border-radius: 999px; font-size: .84rem; font-weight: 500;
    background: var(--surface); border: 1px solid var(--border); color: var(--muted);
}
.chip:hover { border-color: var(--primary); color: var(--ink); }
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.search { margin-left: auto; }
.search input {
    background: var(--surface); border: 1px solid var(--border); color: var(--ink);
    padding: .5rem .85rem; border-radius: 10px; font-size: .88rem; width: 14rem; max-width: 50vw;
}
.search input::placeholder { color: var(--muted-2); }
.search input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.cat-select {
    background: var(--surface); border: 1px solid var(--border); color: var(--ink);
    padding: .5rem 2.1rem .5rem .85rem; border-radius: 10px; font-size: .88rem; font-weight: 500;
    font-family: var(--font); cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right .65rem center; background-size: .85rem;
}
.cat-select:hover { border-color: var(--border-2); }
.cat-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }

/* Ranking list */
.list { display: flex; flex-direction: column; gap: .6rem; }
.row {
    display: flex; align-items: center; gap: 1rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: .85rem;
    padding: .85rem 1.1rem; box-shadow: var(--shadow-sm); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.row:hover { border-color: var(--primary); transform: translateY(-1px); box-shadow: var(--shadow); }
.row .rk { width: 2.4rem; flex-shrink: 0; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--muted); }
.avatar {
    border-radius: 11px; flex-shrink: 0;
    background: #fff; border: 1px solid var(--border); object-fit: contain; padding: 3px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; color: var(--primary);
}
.row .avatar { width: 2.6rem; height: 2.6rem; }
.row .meta { min-width: 0; flex: 1; }
.row .meta .nm { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .meta .sub { font-size: .8rem; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .nums { text-align: right; flex-shrink: 0; }
.row .nums .total { font-weight: 700; color: var(--ink); }
.row .nums .total span { color: var(--muted-2); font-weight: 400; font-size: .78rem; }
.delta { font-size: .8rem; color: var(--muted-2); }
.delta.up { color: var(--green); font-weight: 600; }
.cat-tag { display: inline-block; font-size: .72rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: .08rem .5rem; margin-left: .4rem; font-weight: 500; }

/* Pagination */
.pager { display: flex; justify-content: center; align-items: center; gap: .5rem; margin: 1.8rem 0; }
.pager a, .pager span {
    padding: .45rem .8rem; border-radius: 10px; border: 1px solid var(--border);
    background: var(--surface); font-size: .85rem; color: var(--muted); font-weight: 500;
}
.pager a:hover { border-color: var(--primary); color: var(--primary); }
.pager .disabled { opacity: .45; }

/* Profile */
.profile-head { display: flex; align-items: center; gap: 1.2rem; margin: 2.2rem 0 1.3rem; }
.profile-head .avatar { width: 4.2rem; height: 4.2rem; border-radius: 1rem; font-size: 1.5rem; padding: 6px; }
.profile-head h1 { margin: 0; font-size: 1.7rem; font-weight: 800; }
.profile-head .host { color: var(--muted); }
.btn {
    display: inline-block; padding: .55rem 1.1rem; border-radius: 10px; font-weight: 600; font-size: .9rem;
    background: var(--primary); color: #fff; border: 1px solid var(--primary); cursor: pointer; font-family: var(--font);
}
.btn:hover { background: var(--primary-d); border-color: var(--primary-d); }
.btn.ghost { background: var(--surface); color: var(--ink); border-color: var(--border-2); }
.btn.ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }

.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; }
.statgrid .box { background: var(--surface); border: 1px solid var(--border); border-radius: .85rem; padding: 1.1rem; box-shadow: var(--shadow-sm); }
.statgrid .box .lbl { font-size: .72rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); font-weight: 700; }
.statgrid .box .val { font-family: var(--font-display); font-size: 1.7rem; font-weight: 800; color: var(--ink); margin-top: .25rem; }
.statgrid .box .val small { font-size: .8rem; color: var(--muted); font-weight: 400; }
.statgrid .box .val.up { color: var(--green); }

.panel { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.2rem 1.3rem; margin-top: 1.2rem; box-shadow: var(--shadow-sm); }
.panel h3 { margin: 0 0 .8rem; font-size: 1rem; font-weight: 700; }
.kv { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; border-top: 1px solid var(--border); font-size: .9rem; }
.kv:first-of-type { border-top: 0; }
.kv .k { color: var(--muted); }
.badge { display: inline-block; padding: .18rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600; }
.badge.ok   { background: var(--green-soft); color: var(--green); }
.badge.warn { background: var(--amber-soft); color: var(--amber); }
.badge.bad  { background: var(--red-soft);   color: var(--red); }
.badge.mut  { background: var(--surface-2);  color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tags .t { font-size: .78rem; color: var(--muted); background: var(--surface-2); border-radius: 999px; padding: .12rem .6rem; }

.empty { text-align: center; color: var(--muted); padding: 3rem 1rem; }

/* Flash */
.flash {
    background: var(--green-soft); border: 1px solid #bfe6d2; color: var(--green);
    border-radius: 12px; padding: .75rem 1rem; margin: 1.2rem 0 0; font-size: .9rem; font-weight: 500;
}
.text-muted { color: var(--muted-2); }

/* Nav logout button */
.navlink-btn { background: none; border: 0; color: var(--muted); cursor: pointer; font: inherit; font-weight: 500; padding: 0; }
.navlink-btn:hover { color: var(--ink); }

/* Forms */
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 1.6rem; margin-top: 1rem; box-shadow: var(--shadow-sm); }
.field { display: block; margin-bottom: 1.1rem; }
.field-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin-bottom: .4rem; }
.field-label .opt { color: var(--muted-2); font-weight: 400; }
.field-hint { display: block; font-size: .76rem; color: var(--muted-2); margin-top: .35rem; }
.field-error { display: block; font-size: .8rem; color: var(--red); margin-top: .35rem; }
.form-card input[type=url], .form-card input[type=email], .form-card input[type=text],
.form-card input[type=password], .form-card select {
    width: 100%; background: var(--bg-soft); border: 1px solid var(--border); color: var(--ink);
    padding: .65rem .8rem; border-radius: 10px; font-size: .92rem; font-family: var(--font);
}
.form-card input:focus, .form-card select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); background: var(--surface); }
.checkrow { display: flex; align-items: center; gap: .5rem; font-size: .88rem; color: var(--muted); margin-bottom: 1.1rem; }
.checkrow input { accent-color: var(--primary); }

/* Admin */
.admin-row {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: var(--surface); border: 1px solid var(--border); border-radius: .85rem;
    padding: .75rem 1rem; margin-bottom: .55rem; box-shadow: var(--shadow-sm);
}
.admin-meta { min-width: 0; flex: 1 1 16rem; }
.admin-meta .nm { font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.admin-meta .nm a { color: inherit; }
.admin-meta .nm a:hover { color: var(--primary); }
.admin-meta .sub { font-size: .8rem; color: var(--muted-2); }
.admin-meta .sub a { color: var(--muted); }
.admin-actions { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.admin-actions form { display: inline; margin: 0; }
.btn-sm {
    background: var(--surface); border: 1px solid var(--border-2); color: var(--text);
    padding: .34rem .65rem; border-radius: 8px; font-size: .8rem; cursor: pointer; font: inherit; font-weight: 500; line-height: 1.2;
}
.btn-sm:hover { border-color: var(--primary); color: var(--primary); }
.btn-success { background: var(--green-soft); border-color: #bfe6d2; color: var(--green); }
.btn-success:hover { background: #d8efe3; border-color: var(--green); color: var(--green); }
.btn-danger { background: var(--red-soft); border-color: #f3c6c6; color: var(--red); }
.btn-danger:hover { background: #f9dada; border-color: var(--red); color: var(--red); }
.select-sm {
    background: var(--bg-soft); border: 1px solid var(--border); color: var(--ink);
    padding: .32rem .5rem; border-radius: 8px; font-size: .8rem;
}
.cat-add { display: flex; gap: .5rem; margin-bottom: .9rem; }
.cat-add input { background: var(--bg-soft); border: 1px solid var(--border); color: var(--ink); padding: .45rem .75rem; border-radius: 9px; font-size: .85rem; }
.cat-list { display: flex; flex-wrap: wrap; gap: .5rem; }
.cat-pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: .32rem .45rem .32rem .85rem; font-size: .85rem; color: var(--ink); }
.cat-pill form { display: inline; margin: 0; }
.cat-pill .x { background: none; border: 0; color: var(--muted-2); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 .2rem; }
.cat-pill .x:hover { color: var(--red); }

/* Footer */
/* Footer — dark, matching flarum.org's gray-900 footer */
.site-footer { margin-top: 4rem; background: #111827; color: #9ca3af; padding: 3.5rem 0 1.6rem; } /* gray-900 / gray-400 */
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer-brand .footer-wordmark { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: #fff; }
.footer-brand .footer-wordmark span { color: var(--primary); }
.footer-brand p { font-size: .875rem; line-height: 1.6; margin: .8rem 0 1.1rem; max-width: 23rem; color: #9ca3af; }
.footer-social { display: flex; gap: .9rem; }
.footer-social a { color: #9ca3af; display: inline-flex; transition: color .15s; }
.footer-social a:hover { color: #fff; }
.footer-col h4 { color: #fff; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; margin: 0 0 1rem; font-weight: 700; }
.footer-col a { display: block; color: #9ca3af; font-size: .875rem; padding: .28rem 0; transition: color .15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .6rem; margin-top: 2.8rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.1); font-size: .8rem; color: #6b7280; } /* gray-500 */
.footer-bottom a { color: #9ca3af; }
.footer-bottom a:hover { color: #fff; }

/* ── Dark mode (flarum.org parity: .dark on <html>) ─────────────────────── */
html.dark {
    --bg:          #0f1117;
    --bg-soft:     #141a26;
    --surface:     #1a2030;
    --surface-2:   #242c3e;
    --border:      #2a3344;
    --border-2:    #3a445a;
    --ink:         #f1f5f9;
    --text:        #c7d2de;
    --muted:       #94a3b8;
    --muted-2:     #6b7890;
    --primary:     #f0843e;
    --primary-d:   #e7742e;
    --primary-soft:rgba(240,132,62,.16);
    --green:       #4ecb8b;
    --green-soft:  rgba(78,203,139,.15);
    --amber:       #f0b429;
    --amber-soft:  rgba(240,180,41,.15);
    --red:         #f87171;
    --red-soft:    rgba(248,113,113,.15);
    --blue:        #60a5fa;
    --shadow-sm:   0 1px 2px rgba(0,0,0,.35);
    --shadow:      0 2px 8px rgba(0,0,0,.4);
    --shadow-lg:   0 16px 34px -10px rgba(0,0,0,.6);
    color-scheme: dark;
}
html.dark body { background: radial-gradient(1100px 520px at 50% -240px, #1d2230, var(--bg) 62%) no-repeat, var(--bg); }
/* tints that were hard-coded for light need dark equivalents */
html.dark .btn-success { border-color: rgba(78,203,139,.4); }
html.dark .btn-success:hover { background: rgba(78,203,139,.24); }
html.dark .btn-danger { border-color: rgba(248,113,113,.4); }
html.dark .btn-danger:hover { background: rgba(248,113,113,.24); }
html.dark .flash { border-color: rgba(78,203,139,.4); }
html.dark .podium .card.gold { border-color: rgba(243,201,105,.5); }
html.dark .podium .gold .rank-chip   { background: rgba(243,201,105,.16); color: #f3c969; }
html.dark .podium .silver .rank-chip { background: rgba(148,163,184,.16); color: #cbd5e0; }
html.dark .podium .bronze .rank-chip { background: rgba(176,106,58,.2);  color: #d6a06a; }

/* Header collapses to a burger menu; footer columns reflow */
@media (max-width: 860px) {
    .nav-burger { display: inline-flex; }
    .nav {
        display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 30;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--border);
        padding: .5rem 1.25rem 1rem; box-shadow: var(--shadow); font-size: .95rem;
    }
    .nav > a, .nav > form { width: 100%; padding: .6rem 0; border-top: 1px solid var(--border); }
    .nav > a:first-child { border-top: 0; }
    .nav .theme-toggle { align-self: flex-start; margin-top: .4rem; }
    #nav-toggle:checked ~ .nav { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
    .podium { grid-template-columns: 1fr; }
    .statgrid { grid-template-columns: repeat(2, 1fr); }
    .search { margin-left: 0; width: 100%; }
    .search input { width: 100%; max-width: none; }
}

@media (max-width: 460px) {
    .footer-grid { grid-template-columns: 1fr; }
}