:root {
    color-scheme: dark;
    --bg: #07060d;
    --panel: #11101a;
    --panel-2: #171322;
    --line: #44305f;
    --text: #f6f2ff;
    --muted: #b7a9c9;
    --purple: #a855f7;
    --pink: #ec4899;
    --green: #2ee59d;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
    min-height: 100vh;
    margin: 0;
    color: var(--text);
    background:
        radial-gradient(circle at 15% 0%, rgba(168, 85, 247, .16), transparent 35rem),
        radial-gradient(circle at 90% 35%, rgba(236, 72, 153, .09), transparent 32rem),
        var(--bg);
}

a { color: inherit; text-decoration: none; }
.topbar {
    height: 72px;
    padding: 0 max(24px, calc((100vw - 1180px) / 2));
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: rgba(10, 7, 17, .9);
    backdrop-filter: blur(14px);
}
.brand { font-weight: 900; letter-spacing: .12em; }
.brand span { margin-right: 8px; }
nav { display: flex; gap: 22px; align-items: center; color: #ded2ef; }
nav form { display: inline; }
.identity { color: var(--muted); }
.link-button, .subtle-link { border: 0; background: none; color: #d9c7f3; cursor: pointer; font: inherit; padding: 0; }
.shell { width: min(1180px, calc(100% - 40px)); margin: 48px auto 80px; }
.panel {
    background: linear-gradient(145deg, rgba(22, 18, 32, .96), rgba(12, 11, 20, .96));
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .24);
}
.hero { min-height: 590px; padding: clamp(36px, 7vw, 82px); display: grid; grid-template-columns: 1.05fr .95fr; gap: 70px; align-items: center; }
.eyebrow { color: #d58aff; font-size: .78rem; letter-spacing: .17em; font-weight: 850; margin: 0 0 14px; }
h1 { font-size: clamp(2.2rem, 5vw, 4.8rem); line-height: .98; letter-spacing: -.055em; margin: 0 0 22px; }
h1 span { color: #c77dff; }
h2 { margin: 0 0 7px; }
.hero > div > p:not(.eyebrow) { color: var(--muted); font-size: 1.12rem; line-height: 1.7; max-width: 570px; margin-bottom: 32px; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bd71ff;
    border-radius: 10px;
    padding: 13px 19px;
    color: white;
    background: linear-gradient(110deg, #7233a8, #943878);
    font-weight: 780;
    cursor: pointer;
    box-shadow: 0 9px 30px rgba(168, 85, 247, .18);
}
.button:hover { filter: brightness(1.13); transform: translateY(-1px); }
.button.compact { padding: 8px 13px; font-size: .88rem; }
.board-preview { border: 1px solid #51346f; border-radius: 14px; background: #0a0910; padding: 28px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; box-shadow: 0 0 70px rgba(168, 85, 247, .13); }
.board-preview strong { display: block; margin-bottom: 30px; }
.board-preview small { display: block; color: #c69cdd; margin: 24px 0 12px; }
.board-preview p { display: flex; gap: 12px; margin: 11px 0; font-size: .9rem; }
.board-preview p span { flex: 1; }
.board-preview time { color: #e5d8ed; }
.page-heading { display: flex; justify-content: space-between; gap: 25px; align-items: end; margin-bottom: 28px; }
.page-heading h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: 6px; }
.status { padding: 10px 14px; border: 1px solid #315e52; border-radius: 999px; color: #b7f6dc; background: #0d1e1a; white-space: nowrap; }
.status i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); margin-right: 8px; box-shadow: 0 0 10px var(--green); }
.guild-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 18px; }
.stat-card { padding: 22px; display: grid; gap: 4px; }
.stat-card strong { font-size: 2rem; color: #d39aff; }
.stat-card span { color: var(--muted); }
.guild-card { padding: 21px; display: flex; align-items: center; gap: 16px; }
.guild-card img, .guild-fallback { width: 58px; height: 58px; border-radius: 16px; flex: 0 0 auto; }
.guild-card img { object-fit: cover; }
.guild-fallback { display: grid; place-items: center; background: #5d327b; font-size: 1.4rem; font-weight: 900; }
.guild-copy { min-width: 0; flex: 1; }
.guild-copy h2 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
code { color: #c9a5eb; }
.pill { display: block; width: max-content; margin-top: 9px; font-size: .73rem; padding: 3px 8px; border-radius: 99px; }
.pill.good { color: #7af0bc; border: 1px solid #277556; }
.pill.warn { color: #ffd48b; border: 1px solid #755d27; }
.empty { grid-column: 1 / -1; padding: 50px; text-align: center; color: var(--muted); }
.settings-form { padding: clamp(24px, 5vw, 48px); display: grid; gap: 25px; }
.settings-form label { display: grid; gap: 8px; font-weight: 750; }
.settings-form label small { color: var(--muted); font-weight: 400; }
input, select {
    width: 100%; border: 1px solid #55406c; border-radius: 9px; padding: 12px 13px;
    color: var(--text); background: #0b0a12; font: inherit; outline: none;
}
input:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(168, 85, 247, .13); }
.form-row { display: grid; grid-template-columns: 1fr 220px; gap: 18px; }
.settings-form .button { justify-self: start; }
.help-panel { margin-top: 18px; padding: 25px; color: var(--muted); }
.help-panel h2 { color: var(--text); }
.alert { margin-bottom: 18px; padding: 13px 16px; border-radius: 9px; border: 1px solid; }
.alert.success { color: #b8f7dc; border-color: #2c7658; background: #0c211a; }
.alert.warning { color: #ffe0a4; border-color: #75602b; background: #201a0b; }
.alert.error, .validation { color: #ffb6c3; border-color: #80384a; background: #240d14; }
.validation:empty { display: none; }
footer { border-top: 1px solid #261b35; padding: 26px; text-align: center; color: #796d87; font-size: .83rem; }
.management-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
.management-panel { padding: 25px; min-width: 0; }
.management-panel h2 { margin-bottom: 8px; }
.muted, .management-row small { color: var(--muted); }
.inline-form { display: grid; grid-template-columns: 1fr auto; gap: 9px; margin: 18px 0; }
.catalog-panel { grid-column: 1 / -1; }
.catalog-form { display: grid; grid-template-columns: 1fr 180px 1fr auto; gap: 9px; margin: 18px 0; }
.management-row { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-top: 1px solid #2c2139; padding: 13px 0; }
.management-row span { min-width: 0; }
.management-row small { display: block; margin-top: 3px; overflow-wrap: anywhere; }
.catalog-item { display: grid; grid-template-columns: 42px 1fr auto; }
.catalog-emoji { width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.7rem; }
.catalog-emoji img { width: 34px; height: 34px; object-fit: contain; }
.catalog-copy { min-width: 0; }
.danger-button { color: #ffc1cc; border: 1px solid #80384a; border-radius: 7px; background: #2a1018; padding: 7px 10px; cursor: pointer; }
.server-list { display: grid; gap: 14px; }
.server-card { padding: 20px; display: flex; align-items: center; gap: 16px; }
.server-card > img { width: 58px; height: 58px; border-radius: 16px; }
.server-pills { display: flex; gap: 7px; }
.server-actions { display: flex; align-items: center; gap: 8px; }
.authorize-form { width: min(360px, 40%); display: grid; grid-template-columns: 1fr auto; gap: 8px; }

@media (max-width: 800px) {
    .hero { grid-template-columns: 1fr; gap: 36px; }
    .guild-grid { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: 1fr; }
    .form-row { grid-template-columns: 1fr; }
    .management-grid { grid-template-columns: 1fr; }
    .catalog-panel { grid-column: auto; }
    .catalog-form { grid-template-columns: 1fr; }
    .server-card { align-items: flex-start; flex-wrap: wrap; }
    .authorize-form { width: 100%; }
    .status { display: none; }
    .identity { display: none; }
    .shell { width: min(100% - 24px, 1180px); margin-top: 28px; }
    .topbar { padding: 0 16px; }
}