:root {
    --bg: #0a0c11;
    --surface: #12161f;
    --text: #e8ebf2;
    --accent: #7c83ff;
    --accent-2: #3ddcb4;
    --radius: 14px;
    --radius-sm: 10px;
    --scale: 1;
    --on-accent: #ffffff;
    --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root {
    --heading: var(--text);
    --bg-2: color-mix(in srgb, var(--bg) 55%, var(--surface));
    --surface-2: color-mix(in srgb, var(--surface) 94%, var(--text));
    --surface-3: color-mix(in srgb, var(--surface) 88%, var(--text));
    --border: color-mix(in srgb, var(--surface) 89%, var(--text));
    --border-2: color-mix(in srgb, var(--surface) 81%, var(--text));
    --text-2: color-mix(in srgb, var(--text) 74%, var(--bg));
    --text-3: color-mix(in srgb, var(--text) 52%, var(--bg));
    --accent-soft: color-mix(in srgb, var(--accent) 14%, transparent);
    --accent-line: color-mix(in srgb, var(--accent) 40%, transparent);
    --accent-ink: color-mix(in srgb, var(--accent) 78%, var(--text));
    --mint: #22c58b;
    --mint-soft: color-mix(in srgb, var(--mint) 14%, transparent);
    --amber: #f0a43a;
    --amber-soft: color-mix(in srgb, var(--amber) 15%, transparent);
    --rose: #f2546b;
    --rose-soft: color-mix(in srgb, var(--rose) 14%, transparent);
    --shadow: 0 10px 30px -12px color-mix(in srgb, #000 55%, transparent);
    --sidebar-w: 264px;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font);
    --bs-border-color: var(--border);
    --bs-secondary-color: var(--text-2);
    --bs-emphasis-color: var(--heading);
    --bs-link-color: var(--accent);
    --bs-link-hover-color: var(--heading);
    --bs-tertiary-bg: var(--surface-2);
    --bs-secondary-bg: var(--surface-2);
}
[data-bs-theme] {
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-border-color: var(--border);
    --bs-tertiary-bg: var(--surface-2);
    --bs-secondary-bg: var(--surface-2);
    --bs-emphasis-color: var(--heading);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs, 14.5px);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { color: var(--heading); }
::selection { background: var(--accent-line); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }
.mono { font-family: var(--mono); font-size: .86em; letter-spacing: 0; }
.text-muted-2 { color: var(--text-3) !important; }
.text-2 { color: var(--text-2) !important; }
h1, h2, h3, h4, h5, .brand-text, .stat-value, .price { font-family: var(--font-head, var(--font)); }
h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -0.02em; color: var(--heading); }

.app-shell { display: flex; min-height: 100vh; }
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 1040;
    width: var(--sidebar-w);
    background: var(--bg-2);
    border-right: 1px solid var(--border);
    display: flex; flex-direction: column;
    padding: 18px 14px;
    transition: transform .25s ease;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 18px; color: var(--heading); }
.brand:hover { color: var(--heading); }
.brand-mark {
    width: 34px; height: 34px; border-radius: 10px;
    display: grid; place-items: center; font-size: 19px; color: var(--on-accent);
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 70%, #000) 60%, var(--accent-2));
    box-shadow: 0 6px 18px -6px var(--accent-line);
}
.brand-text { font-weight: 800; font-size: 16px; letter-spacing: -.02em; }
.side-nav { flex: 1; overflow-y: auto; }
.side-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
    color: var(--text-3); padding: 16px 12px 8px;
}
.side-link {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; margin-bottom: 2px;
    border-radius: var(--radius-sm);
    color: var(--text-2); font-weight: 600; font-size: 14px;
    transition: background .15s, color .15s;
}
.side-link i { font-size: 19px; opacity: .85; }
.side-link:hover { background: var(--surface-2); color: var(--heading); }
.side-link.active { background: var(--accent-soft); color: var(--heading); box-shadow: inset 2px 0 0 var(--accent); }
.side-link.active i { color: var(--accent-ink); opacity: 1; }
.side-user {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 10px; margin-top: 10px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--surface);
}
.avatar {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: grid; place-items: center; font-weight: 800;
    background: var(--accent-soft); color: var(--accent-ink);
}
.side-user-meta { flex: 1; min-width: 0; line-height: 1.25; }
.side-user-meta strong { display: block; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-meta small { color: var(--text-3); font-size: 12px; }
.icon-btn {
    width: 36px; height: 36px; border-radius: 10px; flex: none;
    display: inline-grid; place-items: center;
    background: transparent; border: 1px solid var(--border); color: var(--text-2);
    font-size: 19px; transition: all .15s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--heading); border-color: var(--border-2); }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; display: flex; flex-direction: column; }
.topbar {
    position: sticky; top: 0; z-index: 1020;
    display: flex; align-items: center; gap: 14px;
    padding: 16px 32px;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--border);
    min-height: 74px;
}
.topbar-title { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.topbar-title h1 { font-size: 20px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-3); font-weight: 700; }
.back-link {
    width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
    border: 1px solid var(--border); color: var(--text-2); font-size: 22px;
}
.back-link:hover { background: var(--surface-2); }
.topbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.content { padding: 28px 32px 40px; flex: 1; width: 100%; max-width: 1440px; }
.footer {
    display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 18px 32px; border-top: 1px solid var(--border);
    color: var(--text-3); font-size: 13px;
}
.footer a { color: var(--text-3); }
.footer a:hover { color: var(--text); }
.sidebar-backdrop { display: none; }

@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow); }
    body.sidebar-open .sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop {
        display: block; position: fixed; inset: 0; z-index: 1030; background: color-mix(in srgb, #000 55%, transparent);
    }
    .main { margin-left: 0; }
    .topbar { padding: 12px 16px; min-height: 64px; }
    .topbar-title h1 { font-size: 17px; }
    .content { padding: 20px 16px 32px; }
    .footer { padding: 16px; }
}

.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.panel-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: calc(var(--pad, 20px) * .8) var(--pad, 20px); border-bottom: 1px solid var(--border);
}
.panel-head h2, .panel-head h3 { font-size: 15.5px; margin: 0; display: flex; align-items: center; gap: 8px; }
.panel-head h2 i, .panel-head h3 i { color: var(--accent-ink); font-size: 18px; }
.panel-head p { margin: 2px 0 0; color: var(--text-3); font-size: 13px; }
.panel-body { padding: var(--pad, 20px); }
.panel-body.flush { padding: 0; }

.stat {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: calc(var(--pad, 20px) * .9) var(--pad, 20px); display: flex; align-items: center; gap: 16px; height: 100%;
}
.stat-icon {
    width: 44px; height: 44px; border-radius: 12px; flex: none;
    display: grid; place-items: center; font-size: 22px;
    background: var(--accent-soft); color: var(--accent-ink);
}
.stat-icon.mint { background: var(--mint-soft); color: var(--mint); }
.stat-icon.amber { background: var(--amber-soft); color: var(--amber); }
.stat-icon.rose { background: var(--rose-soft); color: var(--rose); }
.stat-value { font-size: 24px; font-weight: 800; color: var(--heading); line-height: 1.1; letter-spacing: -.02em; }
.stat-label { color: var(--text-3); font-size: 13px; font-weight: 600; }

.bot-card {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    padding: var(--pad, 20px); height: 100%; display: flex; flex-direction: column; gap: 16px;
    transition: border-color .2s, transform .2s, box-shadow .2s;
    position: relative;
}
.bot-card:hover { border-color: var(--border-2); transform: translateY(-2px); box-shadow: var(--shadow); }
.bot-card-top { display: flex; gap: 14px; align-items: flex-start; }
.bot-avatar {
    width: 48px; height: 48px; border-radius: 14px; flex: none;
    display: grid; place-items: center; font-size: 24px;
    background: linear-gradient(135deg, var(--accent-line), color-mix(in srgb, var(--accent-2) 16%, transparent));
    color: var(--heading); border: 1px solid var(--border-2);
}
.bot-avatar.lg { width: 64px; height: 64px; font-size: 32px; border-radius: 18px; }
.bot-card h3 { font-size: 16px; margin: 0 0 2px; }
.bot-card h3 a { color: var(--heading); }
.bot-card h3 a::after { content: ''; position: absolute; inset: 0; } .bot-meta { color: var(--text-3); font-size: 12.5px; }
.bot-card .actions { display: flex; gap: 8px; margin-top: auto; position: relative; z-index: 2; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 13px; }
.kv dt { color: var(--text-3); font-weight: 600; }
.kv dd { margin: 0; color: var(--text-2); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.meter { height: 6px; background: var(--surface-3); border-radius: 6px; overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.meter.warn > span { background: linear-gradient(90deg, var(--amber), #ff8a47); }
.meter.danger > span { background: var(--rose); }

.pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
    border: 1px solid transparent; white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-success { color: var(--mint); background: var(--mint-soft); border-color: var(--mint-soft); }
.pill-success .dot { box-shadow: 0 0 0 3px var(--mint-soft); }
.pill-warning { color: var(--amber); background: var(--amber-soft); border-color: var(--amber-soft); }
.pill-danger { color: var(--rose); background: var(--rose-soft); border-color: var(--rose-soft); }
.pill-muted { color: var(--text-2); background: var(--surface-3); border-color: var(--border-2); }
.pill-accent { color: var(--accent-ink); background: var(--accent-soft); border-color: var(--accent-line); }

.btn {
    --bs-btn-font-weight: 700; --bs-btn-font-size: 13.5px;
    --bs-btn-padding-x: 14px; --bs-btn-padding-y: 8px;
    --bs-btn-border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: all .15s;
}
.btn i { font-size: 17px; }
.btn-sm { --bs-btn-padding-x: 10px; --bs-btn-padding-y: 5px; --bs-btn-font-size: 12.5px; --bs-btn-border-radius: 8px; }
.btn-sm i { font-size: 15px; }
.btn-lg { --bs-btn-padding-x: 20px; --bs-btn-padding-y: 11px; --bs-btn-font-size: 15px; }
.btn-primary {
    --bs-btn-color: var(--on-accent); --bs-btn-hover-color: var(--on-accent); --bs-btn-active-color: var(--on-accent); --bs-btn-disabled-color: var(--on-accent);
    --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 88%, var(--text)); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 88%, var(--text));
    --bs-btn-active-bg: color-mix(in srgb, var(--accent) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 80%, #000);
    --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
    box-shadow: 0 6px 18px -8px var(--accent-line);
}
.btn-ghost {
    --bs-btn-color: var(--text); --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border-2);
    --bs-btn-hover-color: var(--heading); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-border-color: var(--border-2);
    --bs-btn-active-bg: var(--surface-3); --bs-btn-active-color: var(--heading);
}
.btn-success-soft {
    --bs-btn-color: var(--mint); --bs-btn-bg: var(--mint-soft); --bs-btn-border-color: var(--mint-soft);
    --bs-btn-hover-color: #0a0c11; --bs-btn-hover-bg: var(--mint); --bs-btn-hover-border-color: var(--mint);
}
.btn-danger-soft {
    --bs-btn-color: var(--rose); --bs-btn-bg: var(--rose-soft); --bs-btn-border-color: var(--rose-soft);
    --bs-btn-hover-color: var(--heading); --bs-btn-hover-bg: var(--rose); --bs-btn-hover-border-color: var(--rose);
}
.btn-warning-soft {
    --bs-btn-color: var(--amber); --bs-btn-bg: var(--amber-soft); --bs-btn-border-color: var(--amber-soft);
    --bs-btn-hover-color: #0a0c11; --bs-btn-hover-bg: var(--amber); --bs-btn-hover-border-color: var(--amber);
}
.btn-icon { width: 34px; padding-left: 0; padding-right: 0; }

.form-label { font-weight: 700; font-size: 13px; color: var(--text-2); margin-bottom: 6px; }
.form-control, .form-select {
    background-color: var(--bg-2); border: 1px solid var(--border-2); color: var(--text);
    border-radius: 10px; padding: 9px 12px; font-size: 14px;
}
.form-control::placeholder { color: var(--text-3); }
.form-control:focus, .form-select:focus {
    background-color: var(--bg-2); color: var(--heading); border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-control:disabled, .form-control[readonly] { background-color: var(--surface-2); color: var(--text-2); }
.form-text { color: var(--text-3); font-size: 12.5px; }
.form-check-input { background-color: var(--surface-3); border-color: var(--border-2); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.input-group > .btn { border-radius: 10px; }
.input-group .form-control { border-radius: 10px; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-3); font-size: 18px; pointer-events: none; }
.input-icon > .form-control { padding-left: 40px; }
.input-icon > .toggle-pass {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: none; border: 0; color: var(--text-3); font-size: 18px; padding: 6px;
}
.color-field { display: flex; gap: 8px; }
.color-field input[type=color] {
    width: 44px; height: 40px; padding: 4px; border-radius: 10px; flex: none;
    background: var(--bg-2); border: 1px solid var(--border-2); cursor: pointer;
}

.tabs {
    display: flex; gap: 4px; border-bottom: 1px solid var(--border);
    overflow-x: auto; scrollbar-width: none; margin-bottom: 22px;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs .nav-link {
    border: 0; background: none; color: var(--text-3); font-weight: 700; font-size: 14px;
    padding: 10px 14px; border-bottom: 2px solid transparent; border-radius: 0;
    white-space: nowrap; display: flex; gap: 7px; align-items: center;
}
.tabs .nav-link:hover { color: var(--text); }
.tabs .nav-link.active { color: var(--heading); border-bottom-color: var(--accent); background: none; }
.tabs .count { font-size: 11px; background: var(--surface-3); padding: 1px 7px; border-radius: 99px; color: var(--text-2); }

.cfg-group { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 14px; overflow: hidden; }
.cfg-group > summary {
    list-style: none; cursor: pointer; padding: 16px 20px;
    display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--heading);
}
.cfg-group > summary::-webkit-details-marker { display: none; }
.cfg-group > summary i.lead { color: var(--accent-ink); font-size: 19px; }
.cfg-group > summary .chev { margin-left: auto; color: var(--text-3); transition: transform .2s; font-size: 20px; }
.cfg-group[open] > summary { border-bottom: 1px solid var(--border); }
.cfg-group[open] > summary .chev { transform: rotate(180deg); }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px 18px; padding: 20px; }
.cfg-key { font-family: var(--mono); font-size: 11px; color: var(--text-3); font-weight: 400; margin-left: 4px; }
.switch-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border: 1px solid var(--border-2); border-radius: 10px; background: var(--bg-2);
}
.switch-row .form-check { margin: 0; padding-left: 2.6em; min-height: auto; }
.save-bar {
    position: sticky; bottom: 16px; z-index: 10;
    display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 16px; margin-top: 18px;
    background: color-mix(in srgb, var(--surface-2) 92%, transparent); backdrop-filter: blur(10px);
    border: 1px solid var(--border-2); border-radius: var(--radius); box-shadow: var(--shadow);
}

.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.cmd {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-2);
    transition: border-color .15s;
}
.cmd:hover { border-color: var(--border-2); }
.cmd.off { opacity: .6; }
.cmd strong { font-family: var(--mono); font-size: 13.5px; color: var(--heading); font-weight: 500; }
.cmd small { display: block; color: var(--text-3); font-size: 12.5px; margin-top: 2px; }
.cmd .form-check { margin: 0; }

.list-row {
    display: flex; align-items: center; gap: 14px; padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
.list-row:last-child { border-bottom: 0; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row .title { font-weight: 700; color: var(--heading); }
.list-row .sub { color: var(--text-3); font-size: 12.5px; }

.table-wrap { overflow-x: auto; }
.table {
    --bs-table-bg: transparent; --bs-table-color: var(--text-2); --bs-table-border-color: var(--border);
    --bs-table-hover-bg: color-mix(in srgb, var(--text) 3%, transparent); --bs-table-hover-color: var(--text);
    margin: 0; font-size: 13.5px; vertical-align: middle;
}
.table thead th {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--text-3); padding: 12px 16px; white-space: nowrap; background: var(--bg-2);
}
.table td { padding: 12px 16px; }
.table td strong { color: var(--heading); }

.log-row { display: flex; gap: 12px; padding: 12px 20px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.log-row:last-child { border-bottom: 0; }
.log-type {
    font-family: var(--mono); font-size: 10.5px; font-weight: 500;
    padding: 2px 8px; border-radius: 6px; height: fit-content; white-space: nowrap; letter-spacing: .03em;
    background: var(--surface-3); color: var(--text-2);
}
.log-type.info { background: var(--accent-soft); color: var(--accent-ink); }
.log-type.warning { background: var(--amber-soft); color: var(--amber); }
.log-type.error, .log-type.ban { background: var(--rose-soft); color: var(--rose); }
.log-type.restore { background: var(--mint-soft); color: var(--mint); }
.log-type.security { background: var(--rose-soft); color: var(--rose); }
.log-time { color: var(--text-3); font-size: 12px; white-space: nowrap; margin-left: auto; }

.console {
    background: color-mix(in srgb, var(--bg) 70%, #000); border: 1px solid var(--border); border-radius: 12px;
    font-family: var(--mono); font-size: 12.5px; color: var(--text-2);
    height: 420px; overflow-y: auto; padding: 14px 16px; line-height: 1.7;
}
.console .ln { white-space: pre-wrap; word-break: break-word; }
.console .t { color: var(--text-3); }
.console .info { color: var(--accent); }
.console .warning { color: var(--amber); }
.console .error, .console .ban, .console .security { color: var(--rose); }
.console .restore { color: var(--mint); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); display: inline-block; animation: pulse 1.6s infinite; }
.live-dot.off { background: var(--text-3); animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--mint-soft); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

.secret {
    display: flex; align-items: center; gap: 8px;
    background: var(--bg-2); border: 1px dashed var(--border-2); border-radius: 10px; padding: 8px 8px 8px 12px;
}
.secret code { flex: 1; color: var(--accent-ink); font-family: var(--mono); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.secret.revealed code { white-space: normal; word-break: break-all; }

.empty { text-align: center; padding: 48px 20px; }
.empty-icon {
    width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px;
    display: grid; place-items: center; font-size: 30px;
    background: var(--surface-2); color: var(--text-3); border: 1px solid var(--border);
}
.empty h3 { font-size: 17px; margin-bottom: 6px; }
.empty p { color: var(--text-3); max-width: 420px; margin: 0 auto 18px; }

.plan {
    background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
    padding: 26px; height: 100%; display: flex; flex-direction: column; position: relative;
    transition: border-color .2s, transform .2s;
}
.plan:hover { border-color: var(--border-2); transform: translateY(-3px); }
.plan.featured { border-color: var(--accent-line); background: linear-gradient(180deg, var(--accent-soft), var(--surface) 40%); }
.plan-badge { position: absolute; top: 18px; right: 18px; }
.plan h3 { font-size: 18px; margin-bottom: 4px; }
.plan .duration { color: var(--text-3); font-weight: 600; font-size: 13px; }
.plan .price { font-size: 34px; font-weight: 800; color: var(--heading); margin: 18px 0 4px; letter-spacing: -.03em; }
.plan .price small { font-size: 14px; color: var(--text-3); font-weight: 600; }
.plan .per-day { color: var(--text-3); font-size: 12.5px; }
.plan ul { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; color: var(--text-2); font-size: 14px; }
.plan li i { color: var(--mint); font-size: 18px; flex: none; }
.plan .btn { margin-top: auto; }

.alert {
    border-radius: 12px; border-width: 1px; font-size: 14px; display: flex; align-items: flex-start; gap: 10px;
}
.alert > i { font-size: 19px; flex: none; margin-top: 1px; }
.alert-success { background: var(--mint-soft); border-color: var(--mint-soft); color: var(--mint); }
.alert-danger { background: var(--rose-soft); border-color: var(--rose-soft); color: var(--rose); }
.alert-warning { background: var(--amber-soft); border-color: var(--amber-soft); color: var(--amber); }
.alert-info { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
.alert .btn-close { margin-left: auto; padding: .5rem; position: static; opacity: .5; }

.modal-content { background: var(--surface); border: 1px solid var(--border-2); border-radius: 16px; }
.modal-header, .modal-footer { border-color: var(--border); }
.modal-title { font-size: 17px; }
.dropdown-menu { background: var(--surface-2); border-color: var(--border-2); border-radius: 12px; padding: 6px; }
.dropdown-item { border-radius: 8px; color: var(--text-2); font-weight: 600; font-size: 13.5px; padding: 7px 10px; display: flex; gap: 8px; align-items: center; }
.dropdown-item:hover { background: var(--surface-3); color: var(--heading); }

.swal2-popup { background: var(--surface) !important; color: var(--text) !important; border: 1px solid var(--border-2); border-radius: 16px !important; font-family: var(--font) !important; }
.swal2-title { color: var(--heading) !important; font-size: 20px !important; }
.swal2-html-container { color: var(--text-2) !important; font-size: 14.5px !important; }
.swal2-input, .swal2-select, .swal2-textarea { background: var(--bg-2) !important; border: 1px solid var(--border-2) !important; color: var(--heading) !important; border-radius: 10px !important; font-size: 14px !important; }
.swal2-styled { border-radius: 10px !important; font-weight: 700 !important; }
.swal2-styled.swal2-confirm { background: var(--accent) !important; }
.swal2-styled.swal2-cancel { background: var(--surface-3) !important; }
.swal2-styled.swal2-deny { background: var(--rose) !important; }
.swal2-toast { background: var(--surface-2) !important; }

body.auth { background: var(--bg); }
.auth-wrap { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 100vh; }
.auth-side {
    position: relative; overflow: hidden;
    padding: 40px 56px; display: flex; flex-direction: column; justify-content: space-between;
    background:
        radial-gradient(600px 400px at 0% 0%, var(--accent-soft), transparent 60%),
        radial-gradient(500px 400px at 100% 100%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 60%),
        var(--bg-2);
    border-right: 1px solid var(--border);
}
.auth-side::before {
    content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35;
    background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse at 30% 40%, #000 20%, transparent 70%);
}
.auth-side > * { position: relative; }
.auth-pitch h2 { font-size: clamp(30px, 3.4vw, 46px); font-weight: 800; line-height: 1.08; letter-spacing: -.035em; margin-bottom: 16px; }
.auth-pitch h2 span { background: linear-gradient(90deg, var(--accent-ink), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-pitch p { color: var(--text-2); font-size: 16px; max-width: 440px; }
.auth-points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
.auth-points li { display: flex; align-items: center; gap: 12px; color: var(--text-2); font-weight: 600; }
.auth-points i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--accent-ink); font-size: 18px; }
.auth-main { display: grid; place-items: center; padding: 40px 24px; }
.auth-card { width: 100%; max-width: 410px; }
.auth-card h1 { font-size: 26px; margin-bottom: 6px; }
.lead-sm { color: var(--text-3); margin-bottom: 26px; }
.auth-foot { text-align: center; color: var(--text-3); margin-top: 22px; font-size: 14px; }
@media (max-width: 899.98px) {
    .auth-wrap { grid-template-columns: 1fr; }
    .auth-side { padding: 22px 20px; border-right: 0; border-bottom: 1px solid var(--border); }
    .auth-pitch, .auth-side > small { display: none; }
    .auth-main { padding: 28px 16px 40px; place-items: start center; }
}

.error-wrap {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
    background: radial-gradient(700px 500px at 50% 0%, var(--accent-soft), transparent 70%), var(--bg);
}
.error-card { text-align: center; max-width: 480px; }
.error-icon {
    width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 22px;
    display: grid; place-items: center; font-size: 36px;
    background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line);
}
.error-icon.code-403, .error-icon.code-500 { background: var(--rose-soft); color: var(--rose); border-color: var(--rose-soft); }
.error-icon.code-419, .error-icon.code-429 { background: var(--amber-soft); color: var(--amber); border-color: var(--amber-soft); }
.error-code { font-family: var(--mono); color: var(--text-3); font-size: 14px; letter-spacing: .2em; }
.error-card h1 { font-size: 28px; margin: 6px 0 10px; }
.error-card p { color: var(--text-2); }

.page-hero {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    padding: 22px; margin-bottom: 22px;
    background: linear-gradient(120deg, var(--accent-soft), color-mix(in srgb, var(--accent-2) 5%, transparent) 60%, transparent), var(--surface);
    border: 1px solid var(--border); border-radius: 18px;
}
.page-hero h2 { font-size: 22px; margin: 0 0 4px; }
.hero-meta { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--text-3); font-size: 13px; }
.hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.hero-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.setup-steps { display: grid; gap: 10px; counter-reset: s; }
.setup-steps li { list-style: none; display: flex; gap: 12px; color: var(--text-2); }
.setup-steps li::before {
    counter-increment: s; content: counter(s); flex: none;
    width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
    background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; font-size: 12px;
}
.setup-steps li.done::before { content: '✓'; background: var(--mint-soft); color: var(--mint); }
.bar-chart { display: flex; align-items: flex-end; gap: 4px; height: 160px; padding-top: 10px; }
.bar-chart .bar { flex: 1; background: var(--accent-soft); border-radius: 4px 4px 0 0; position: relative; min-height: 2px; transition: background .15s; }
.bar-chart .bar:hover { background: var(--accent); }
.bar-chart .bar[data-v]:hover::after {
    content: attr(data-v); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    background: var(--surface-3); color: var(--heading); font-size: 11px; padding: 3px 7px; border-radius: 6px; white-space: nowrap; z-index: 2;
}
.search-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.search-bar .form-control, .search-bar .form-select { width: auto; flex: 1 1 180px; }
.pre-code { background: color-mix(in srgb, var(--bg) 70%, #000); border: 1px solid var(--border); border-radius: 12px; padding: 14px; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); white-space: pre; overflow: auto; max-height: 520px; }

.app-shell, .auth-wrap, .error-wrap, .install { zoom: var(--scale); }
.brand-logo { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.avatar img, .bot-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar, .bot-avatar { overflow: hidden; }
.bot-avatar { color: var(--heading); }
body.sidebar-compact { --sidebar-w: 84px; }
@media (min-width: 992px) {
    body.sidebar-compact .brand-text, body.sidebar-compact .side-label, body.sidebar-compact .side-link span, body.sidebar-compact .side-user-meta { display: none; }
    body.sidebar-compact .side-link { justify-content: center; padding: 11px 0; }
    body.sidebar-compact .side-link i { font-size: 21px; }
    body.sidebar-compact .side-user { flex-direction: column; padding: 10px 6px; }
    body.sidebar-compact .brand { justify-content: center; padding-left: 0; padding-right: 0; }
}
.credit-row { display: flex; gap: 10px; flex-wrap: wrap; }
.credit { flex: 1 1 140px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-2); }
.credit strong { display: block; font-size: 20px; color: var(--heading); line-height: 1.2; }
.credit span { font-size: 12.5px; color: var(--text-3); font-weight: 600; }
.tree { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.tree li { padding: 5px 0; display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.tree li i { color: var(--text-3); font-size: 16px; }
.tree .cat { margin-top: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 11.5px; color: var(--text-3); }
.tree .cat:first-child { margin-top: 0; }
.tree .child { padding-left: 18px; }
.role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); background: var(--bg-2); margin: 0 6px 6px 0; }
.role-chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.swatch { border: 2px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; background: var(--surface); transition: border-color .15s, transform .15s; text-align: left; color: var(--text); }
.swatch:hover { transform: translateY(-2px); }
.swatch.active { border-color: var(--accent); }
.swatch .bars { display: flex; gap: 4px; margin-bottom: 10px; height: 34px; border-radius: 8px; overflow: hidden; }
.swatch .bars span { flex: 1; }
.swatch strong { font-size: 13.5px; color: var(--heading); }
.image-field { display: flex; gap: 8px; align-items: center; }
.image-field .thumb { width: 40px; height: 40px; flex: none; border-radius: 10px; border: 1px solid var(--border-2); background: var(--bg-2) center/cover no-repeat; }
.image-field .form-control { min-width: 0; }
.product-card { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); padding: 22px; height: 100%; display: flex; flex-direction: column; gap: 10px; position: relative; transition: border-color .2s, transform .2s; }
.product-card:hover { border-color: var(--border-2); transform: translateY(-3px); }
.product-icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--accent-soft); color: var(--accent); }
.product-card .price { font-size: 26px; font-weight: 800; color: var(--heading); letter-spacing: -.02em; }
.old-price { text-decoration: line-through; color: var(--text-3); font-size: 14px; font-weight: 600; margin-left: 6px; }
.pay-methods { display: grid; gap: 10px; }
.pay-method { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border: 2px solid var(--border); border-radius: var(--radius); cursor: pointer; background: var(--bg-2); transition: border-color .15s; }
.pay-method:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.pay-method input { margin: 0; }
.pay-method i { font-size: 24px; color: var(--accent); }
.pay-method strong { color: var(--heading); display: block; }
.pay-method small { color: var(--text-3); }
.discord-btn { --bs-btn-bg: #5865f2; --bs-btn-border-color: #5865f2; --bs-btn-color: #fff; --bs-btn-hover-bg: #4752c4; --bs-btn-hover-border-color: #4752c4; --bs-btn-hover-color: #fff; --bs-btn-active-bg: #3c45a5; --bs-btn-active-color: #fff; }
.divider { display: flex; align-items: center; gap: 12px; color: var(--text-3); font-size: 12.5px; margin: 18px 0; }
.divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.danger-zone { border-color: color-mix(in srgb, var(--rose) 35%, var(--border)); }
.json-editor { font-family: var(--mono); font-size: 12.5px; min-height: 460px; line-height: 1.55; white-space: pre; }
.preview-bar { height: 8px; border-radius: 4px; background: var(--accent); }
.text-white { color: var(--heading) !important; }
.table .bot-avatar { width: 34px; height: 34px; font-size: 17px; border-radius: 10px; flex: none; }
.theme-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.form-range, input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
.form-range::-webkit-slider-thumb { background: var(--accent); }
.form-range::-moz-range-thumb { background: var(--accent); }
.form-range::-webkit-slider-runnable-track { background: var(--surface-3); }
.restore-box.tone-info { border-color: var(--accent-line); }
.restore-box.tone-warning { border-color: color-mix(in srgb, var(--amber) 45%, var(--border)); }
.restore-box.tone-danger { border-color: color-mix(in srgb, var(--rose) 45%, var(--border)); }
.restore-box.tone-success { border-color: color-mix(in srgb, var(--mint) 45%, var(--border)); }
.rsteps { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 14px; font-size: 13px; }
.rsteps li { display: flex; align-items: center; gap: 8px; color: var(--text-3); }
.rsteps li i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; background: var(--surface-2); flex: none; }
.rsteps li.done { color: var(--text-2); }
.rsteps li.done i { background: var(--mint-soft); color: var(--mint); }
.rsteps li.active { color: var(--heading); font-weight: 700; }
.rsteps li.active i { background: var(--accent-soft); color: var(--accent); }
.rsteps li.failed i { background: var(--rose-soft); color: var(--rose); }
.rsteps li.skip { opacity: .45; text-decoration: line-through; }
.help-tip { display: inline-grid; place-items: center; width: 17px; height: 17px; padding: 0; border-radius: 50%; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text-3); font-size: 12px; line-height: 1; cursor: help; flex: none; transition: all .15s; vertical-align: middle; }
.help-tip:hover, .help-tip:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent); outline: none; }
.help-pop { --bs-popover-bg: var(--surface-3); --bs-popover-border-color: var(--border-2); --bs-popover-body-color: var(--text); --bs-popover-max-width: 320px; --bs-popover-body-padding-x: 14px; --bs-popover-body-padding-y: 11px; --bs-popover-font-size: 13px; box-shadow: var(--shadow); border-radius: var(--radius-sm); line-height: 1.5; }

.text-accent { color: var(--accent-ink) !important; }
.srv-voicebar { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; margin-bottom: 1rem; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.srv-voicebar .pill { margin-left: .35rem; font-size: .7rem; vertical-align: middle; }
.srv-me { width: 40px; height: 40px; border-radius: 50%; flex: none; }
.srv-vbtn { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; border: 1px solid var(--border-2); background: var(--surface-2); color: var(--text); font-size: 1.2rem; transition: .15s; }
.srv-vbtn:hover { background: var(--surface-3); }
.srv-vbtn.off { color: var(--rose); background: var(--rose-soft); border-color: transparent; }
.srv-vbtn.danger { color: #fff; background: var(--rose); border-color: transparent; }
.srv-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr) 300px; gap: 1rem; align-items: start; }
.srv-col { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; min-width: 0; }
.srv-col-head { display: flex; align-items: center; gap: .5rem; padding: .6rem .75rem; border-bottom: 1px solid var(--border); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); }
.srv-tree { padding: .5rem; max-height: 640px; overflow: auto; }
.srv-ch { display: flex; align-items: center; gap: .45rem; width: 100%; padding: .35rem .55rem; border: 0; background: none; color: var(--text-2); border-radius: 8px; font-size: .9rem; text-align: left; }
.srv-ch i { font-size: 1.05rem; color: var(--text-3); flex: none; }
.srv-ch:hover { background: var(--surface-2); color: var(--text); }
.srv-ch.active { background: var(--accent-soft); color: var(--heading); }
.srv-ch .srv-tag { margin-left: auto; font-size: .9rem; }
.srv-ch .srv-tag + .srv-tag { margin-left: .2rem; }
.srv-cat { display: flex; align-items: center; margin-top: .65rem; border-radius: 6px; }
.srv-cat button { border: 0; background: none; color: var(--text-3); padding: .15rem .2rem; }
.srv-cat-name { flex: 1; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.srv-cat:hover button, .srv-cat.active .srv-cat-name { color: var(--text); }
.srv-cat-add { opacity: 0; }
.srv-cat:hover .srv-cat-add { opacity: 1; }
.srv-vm { padding: 0 0 .25rem 1.75rem; }
.srv-vm-item { display: flex; align-items: center; gap: .4rem; padding: .15rem .3rem; font-size: .82rem; color: var(--text-2); }
.srv-vm-item img { width: 20px; height: 20px; border-radius: 50%; }
.srv-vm-item.me span { color: var(--accent-ink); }
.srv-vm-item i { font-size: .9rem; color: var(--rose); }
.srv-live { font-size: .6rem; font-weight: 700; background: var(--rose); color: #fff; padding: 0 .3rem; border-radius: 4px; }
.srv-detail { padding: 1.1rem; min-height: 320px; }
.srv-detail-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .9rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.srv-detail-head > i { font-size: 1.5rem; color: var(--text-3); }
.srv-sec { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.srv-sec-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin-bottom: .6rem; }
.srv-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; }
.srv-row img { width: 28px; height: 28px; border-radius: 50%; }
.srv-bot { font-size: .6rem; font-weight: 700; background: var(--accent); color: #fff; padding: .05rem .3rem; border-radius: 4px; vertical-align: middle; }
.srv-guild { display: flex; align-items: center; gap: 1rem; }
.srv-guild img, .srv-guild-ph { width: 64px; height: 64px; border-radius: 18px; flex: none; }
.srv-guild-ph { display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; font-size: 1.3rem; }
.srv-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1.25rem; }
.srv-stats div { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; }
.srv-stats b { display: block; font-size: 1.25rem; color: var(--heading); }
.srv-stats span { font-size: .78rem; color: var(--text-3); }
.srv-empty-icon { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; border-radius: 16px; background: var(--surface-2); font-size: 1.6rem; color: var(--text-3); }
.srv-tabs { display: flex; gap: .25rem; width: 100%; }
.srv-tabs button { flex: 1; border: 0; background: none; color: var(--text-3); padding: .45rem; border-radius: 8px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.srv-tabs button span { opacity: .7; margin-left: .2rem; }
.srv-tabs button.active { background: var(--surface-2); color: var(--heading); }
.srv-side-body { padding: .6rem; }
.srv-roles, .srv-members { max-height: 560px; overflow: auto; }
.srv-role { display: flex; align-items: center; gap: .45rem; padding: .25rem .35rem; border-radius: 8px; font-size: .88rem; }
.srv-role:hover { background: var(--surface-2); }
.srv-role .btn-icon { width: 26px; height: 26px; padding: 0; opacity: 0; }
.srv-role:hover .btn-icon { opacity: 1; }
.srv-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; display: inline-block; }
.srv-search { position: relative; margin-bottom: .5rem; }
.srv-search i { position: absolute; left: .6rem; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.srv-search input { padding-left: 1.9rem; }
.srv-member { display: flex; align-items: center; gap: .55rem; width: 100%; border: 0; background: none; color: var(--text); padding: .35rem .4rem; border-radius: 8px; font-size: .88rem; }
.srv-member:hover { background: var(--surface-2); }
.srv-member img { width: 32px; height: 32px; border-radius: 50%; flex: none; }
.srv-member .pill { font-size: .65rem; padding: .05rem .35rem; }
.srv-role-picker { display: flex; flex-wrap: wrap; gap: .35rem; max-height: 220px; overflow: auto; }
.srv-pick { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .55rem; border: 1px solid var(--border-2); border-radius: 999px; font-size: .82rem; cursor: pointer; }
.srv-pick input { margin: 0; }
.srv-pick.disabled { opacity: .5; cursor: not-allowed; }
@media (max-width: 1199.98px) {
    .srv-grid { grid-template-columns: 240px minmax(0, 1fr); }
    .srv-side { grid-column: 1 / -1; }
}
@media (max-width: 767.98px) {
    .srv-grid { grid-template-columns: minmax(0, 1fr); }
    .srv-tree { max-height: 320px; }
    .srv-stats { grid-template-columns: repeat(2, 1fr); }
    .srv-voicebar { flex-wrap: wrap; }
    .srv-role .btn-icon { opacity: 1; }
}
.tr-list { max-height: 75vh; overflow: auto; }
.tr-msg { display: flex; gap: .8rem; padding: .35rem 0; }
.tr-msg:not(.cont) { margin-top: .6rem; }
.tr-av { width: 38px; flex: none; }
.tr-av img { width: 38px; height: 38px; border-radius: 50%; }
.tr-body { min-width: 0; flex: 1; }
.tr-head b { color: var(--heading); }
.tr-head span { font-size: .75rem; color: var(--text-3); margin-left: .35rem; }
.tr-text { color: var(--text-2); word-wrap: break-word; }
.tr-mention { background: var(--accent-soft); color: var(--accent-ink); padding: 0 .2rem; border-radius: 4px; }
.tr-embed { border-left: 3px solid var(--accent); background: var(--surface-2); padding: .5rem .75rem; border-radius: 6px; margin-top: .3rem; font-size: .9rem; color: var(--text-2); }
.tr-file { display: inline-flex; align-items: center; gap: .3rem; margin-top: .3rem; margin-right: .5rem; font-size: .88rem; }
.tk-list { display: flex; flex-direction: column; }
.tk-row { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-top: 1px solid var(--border); color: var(--text); text-decoration: none; transition: background .15s; }
.tk-row:hover { background: var(--surface-2); color: var(--text); }
.tk-num { font-size: 12px; color: var(--text-3); width: 52px; flex: none; }
.tk-main { flex: 1; min-width: 0; }
.tk-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-title strong { color: var(--heading); }
.tk-meta { font-size: 12.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tk-tags { display: flex; gap: 6px; flex: none; }
.tk-go { color: var(--text-3); font-size: 20px; }
.tc-list { display: flex; flex-direction: column; gap: 10px; }
.tc-row { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.tc-emoji { width: 58px !important; flex: none; text-align: center; font-size: 20px; padding: 6px; }
.tc-fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.tc-fields [data-k=roles] { grid-column: 1 / -1; font-size: 12.5px; }
.tc-tools { display: flex; flex-direction: column; gap: 4px; }
.tk-page { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.tk-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.tk-side .panel { margin: 0; }
.tk-chat { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 520px; overflow: hidden; margin: 0; }
.tk-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.tk-chat-head > i { font-size: 22px; color: var(--text-3); }
.tk-live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--mint); }
.tk-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 var(--mint); animation: tkPulse 1.8s infinite; }
@keyframes tkPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.tk-messages { flex: 1; overflow-y: auto; padding: 8px 0 16px; background: color-mix(in srgb, var(--surface) 85%, var(--bg)); }
.tk-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; color: var(--text-3); }
.tk-empty i { font-size: 40px; }
.tk-composer { padding: 12px 16px 14px; border-top: 1px solid var(--border); }
.tk-composer-box { display: flex; align-items: flex-end; gap: 8px; background: var(--surface-2); border: 1px solid var(--border-2); border-radius: 12px; padding: 6px 6px 6px 14px; }
.tk-composer-box:focus-within { border-color: var(--accent-line); }
.tk-composer textarea { flex: 1; border: 0; background: none; color: var(--text); resize: none; outline: none; padding: 7px 0; max-height: 200px; line-height: 1.45; }
.tk-composer textarea:disabled { opacity: .5; }
.tk-composer-note { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.tk-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tk-actions .btn { flex: 1 1 auto; }
.tk-reason { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: var(--text-2); word-wrap: break-word; }
.dc-divider { display: flex; align-items: center; gap: 8px; margin: 18px 16px 6px; color: var(--text-3); font-size: 12px; font-weight: 600; }
.dc-divider::before, .dc-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.dc-msg { display: flex; gap: 14px; padding: 4px 16px 2px; margin-top: 12px; position: relative; }
.dc-msg.grouped { margin-top: 0; padding-top: 1px; }
.dc-msg:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.dc-msg.from-panel { box-shadow: inset 2px 0 0 var(--accent); }
.dc-av { width: 40px; flex: none; }
.dc-av img, .dc-av-ph { width: 40px; height: 40px; border-radius: 50%; display: block; background: var(--surface-3); }
.dc-hover-time { display: none; font-size: 10.5px; color: var(--text-3); padding-top: 4px; text-align: right; }
.dc-msg.grouped:hover .dc-hover-time { display: block; }
.dc-body { flex: 1; min-width: 0; }
.dc-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.dc-name { font-weight: 600; color: var(--heading); }
.dc-badge { font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 4px; background: var(--accent); color: #fff; letter-spacing: .02em; transform: translateY(-1px); }
.dc-badge.hook { background: var(--mint); color: #062018; }
.dc-badge.owner { background: var(--amber); color: #2a1a00; }
.dc-badge.staff { background: var(--rose); }
.dc-time-label { font-size: 11.5px; color: var(--text-3); }
.dc-content { color: var(--text-2); line-height: 1.5; word-wrap: break-word; overflow-wrap: anywhere; }
.dc-content a, .dc-embed a { color: #00a8fc; }
.dc-edited { font-size: 10.5px; color: var(--text-3); margin-left: 4px; }
.dc-mention { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent-ink); border-radius: 4px; padding: 0 3px; font-weight: 500; }
.dc-time { background: var(--surface-3); border-radius: 4px; padding: 0 3px; }
.dc-code { background: var(--surface-3); border-radius: 4px; padding: 1px 4px; font-family: 'JetBrains Mono', monospace; font-size: .86em; }
.dc-pre { background: var(--bg-2); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; margin: 4px 0; font-size: 12.5px; white-space: pre-wrap; color: var(--text-2); }
.dc-quote { border-left: 4px solid var(--border-2); padding-left: 10px; margin: 2px 0; }
.dc-h1 { font-size: 1.4em; font-weight: 700; color: var(--heading); }
.dc-h2 { font-size: 1.2em; font-weight: 700; color: var(--heading); }
.dc-h3 { font-size: 1.05em; font-weight: 700; color: var(--heading); }
.dc-spoiler { background: var(--text-3); color: transparent; border-radius: 3px; cursor: pointer; }
.dc-spoiler:hover, .dc-spoiler:focus { background: var(--surface-3); color: inherit; }
.dc-emoji { width: 22px; height: 22px; vertical-align: -5px; }
.dc-embed { display: flex; gap: 12px; max-width: 520px; margin-top: 6px; padding: 10px 14px 12px 12px; background: var(--surface-2); border: 1px solid var(--border); border-left: 4px solid; border-radius: 6px; }
.dc-embed-main { flex: 1; min-width: 0; }
.dc-embed-author { font-size: 12.5px; font-weight: 600; color: var(--heading); margin-bottom: 4px; }
.dc-embed-title { font-weight: 700; color: var(--heading); margin-bottom: 4px; }
.dc-embed-desc { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.dc-embed-fields { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.dc-field { flex: 1 1 100%; min-width: 0; font-size: 13px; }
.dc-field.inline { flex: 1 1 140px; }
.dc-field-name { font-weight: 700; color: var(--heading); margin-bottom: 2px; }
.dc-field-value { color: var(--text-2); }
.dc-embed-footer { font-size: 11.5px; color: var(--text-3); margin-top: 8px; }
.dc-embed-image { max-width: 100%; border-radius: 4px; margin-top: 10px; display: block; }
.dc-embed-thumb { width: 72px; height: 72px; border-radius: 4px; object-fit: cover; flex: none; }
.dc-attach-img img { max-width: min(400px, 100%); max-height: 300px; border-radius: 8px; margin-top: 6px; display: block; }
.dc-file { display: inline-flex; align-items: center; gap: 10px; min-width: 240px; max-width: 420px; margin-top: 6px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text); text-decoration: none; }
.dc-file i { font-size: 24px; color: var(--accent-ink); }
.dc-file small { display: block; color: var(--text-3); font-size: 11.5px; }
@media (max-width: 1199.98px) {
    .tk-page { grid-template-columns: minmax(0, 1fr); }
    .tk-side { position: static; order: -1; }
    .tk-chat { height: 70vh; }
}
@media (max-width: 767.98px) {
    .tc-fields { grid-template-columns: 1fr; }
    .tk-row { padding: 12px; gap: 10px; }
    .tk-tags { flex-direction: column; align-items: flex-end; }
    .tk-num, .tk-go { display: none; }
    .dc-msg { gap: 10px; padding: 4px 10px 2px; }
    .dc-av, .dc-av img, .dc-av-ph { width: 32px; height: 32px; }
}
.icon-btn { align-items: center; justify-content: center; }
.content .row.g-3, .content .row.g-4 { --bs-gutter-x: var(--gap, 16px); --bs-gutter-y: var(--gap, 16px); }
.content .panel.mb-3, .content .row.mb-3, .content .row.mb-4 { margin-bottom: var(--gap, 16px) !important; }
.tk-side, .tk-page { gap: var(--gap, 16px); }

@media (min-width: 992px) {
    .sidebar, .main { transition: transform .3s ease, margin-left .3s ease; }
    body.sidebar-hidden .sidebar { transform: translateX(-100%); }
    body.sidebar-hidden .main { margin-left: 0; }
}

.app-shell, .auth-wrap, .error-wrap, .install { position: relative; }
.fx-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fx-bg > div { position: absolute; inset: 0; display: none; opacity: calc(.25 + var(--fx, .5) * .75); }
body.fx-bg-waves .fx-waves, body.fx-bg-aurora .fx-aurora, body.fx-bg-grid .fx-grid, body.fx-bg-stars .fx-stars, body.fx-bg-gradient .fx-gradient { display: block; }

.fx-waves { top: auto !important; height: 46vh; }
.fx-waves i {
    position: absolute; left: 0; bottom: 0; width: 200%; height: 100%;
    --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0 60 C 150 10 300 10 450 60 S 750 110 900 60 S 1050 10 1200 60 V120 H0Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask: var(--wave) repeat-x 0 100% / 50% 100%; mask: var(--wave) repeat-x 0 100% / 50% 100%;
    animation: fxWave 18s linear infinite;
}
.fx-waves i:nth-child(1) { background: linear-gradient(to top, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 6%, transparent)); height: 92%; animation-duration: 26s; }
.fx-waves i:nth-child(2) { background: linear-gradient(to top, color-mix(in srgb, var(--accent-2) 20%, transparent), color-mix(in srgb, var(--accent-2) 4%, transparent)); height: 70%; animation-duration: 18s; animation-direction: reverse; }
.fx-waves i:nth-child(3) { background: linear-gradient(to top, color-mix(in srgb, var(--accent) 26%, transparent), transparent); height: 48%; animation-duration: 12s; }
@keyframes fxWave { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.fx-aurora span { position: absolute; width: 55vmax; height: 55vmax; border-radius: 50%; filter: blur(90px); opacity: .32; animation: fxFloat 22s ease-in-out infinite alternate; }
.fx-aurora span:nth-child(1) { background: var(--accent); top: -20vmax; left: -10vmax; }
.fx-aurora span:nth-child(2) { background: var(--accent-2); bottom: -25vmax; right: -15vmax; animation-duration: 28s; }
.fx-aurora span:nth-child(3) { background: color-mix(in srgb, var(--accent) 50%, var(--accent-2)); top: 30%; left: 40%; width: 35vmax; height: 35vmax; animation-duration: 18s; opacity: .22; }
@keyframes fxFloat { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8vw, 6vh) scale(1.12); } 100% { transform: translate(-6vw, 10vh) scale(.92); } }

.fx-grid {
    background-image: linear-gradient(color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--accent) 18%, transparent) 1px, transparent 1px);
    background-size: 46px 46px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%); mask-image: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%);
    animation: fxGrid 6s linear infinite;
}
@keyframes fxGrid { from { background-position: 0 0, 0 0; } to { background-position: 0 46px, 46px 0; } }

.fx-stars {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, var(--text), transparent),
        radial-gradient(1px 1px at 140px 70px, var(--accent), transparent),
        radial-gradient(1.5px 1.5px at 90px 160px, var(--text), transparent),
        radial-gradient(1px 1px at 200px 120px, var(--accent-2), transparent),
        radial-gradient(1px 1px at 260px 220px, var(--text), transparent);
    background-size: 300px 260px;
    opacity: calc(.15 + var(--fx, .5) * .45) !important;
    animation: fxStars 60s linear infinite;
}
@keyframes fxStars { from { background-position: 0 0; } to { background-position: 300px 520px; } }

.fx-gradient { background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent), transparent 35%, color-mix(in srgb, var(--accent-2) 12%, transparent) 65%, transparent); background-size: 300% 300%; animation: fxGrad 16s ease infinite; }
@keyframes fxGrad { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

.fx-card-lift :is(.panel, .stat, .bot-card, .product-card, .plan-card, .credit, .tk-row) { transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.fx-card-lift :is(.stat, .bot-card, .product-card, .plan-card):hover { transform: translateY(-4px); box-shadow: 0 14px 34px -14px color-mix(in srgb, #000 60%, transparent); border-color: var(--border-2); }
.fx-card-glow :is(.panel, .stat, .bot-card, .product-card, .plan-card) { transition: box-shadow .25s ease, border-color .25s ease; }
.fx-card-glow :is(.panel, .stat, .bot-card, .product-card, .plan-card):hover { border-color: var(--accent-line); box-shadow: 0 0 0 1px var(--accent-line), 0 10px 40px -12px color-mix(in srgb, var(--accent) 55%, transparent); }
.fx-card-spotlight :is(.panel, .stat, .bot-card, .product-card, .plan-card) { position: relative; }
.fx-card-spotlight :is(.panel, .stat, .bot-card, .product-card, .plan-card)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%); }
.fx-card-spotlight :is(.panel, .stat, .bot-card, .product-card, .plan-card):hover::after { opacity: 1; }
.fx-card-tilt :is(.stat, .bot-card, .product-card, .plan-card) { transition: transform .15s ease, box-shadow .2s ease; transform-style: preserve-3d; will-change: transform; }
.fx-card-tilt :is(.stat, .bot-card, .product-card, .plan-card):hover { box-shadow: 0 18px 40px -18px color-mix(in srgb, #000 70%, transparent); }
@property --fxa { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fx-card-border :is(.stat, .bot-card, .product-card, .plan-card) { position: relative; }
.fx-card-border :is(.stat, .bot-card, .product-card, .plan-card)::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0; transition: opacity .3s; background: conic-gradient(from var(--fxa), transparent 0 60%, var(--accent), var(--accent-2), transparent 90%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: fxSpin 3s linear infinite; }
.fx-card-border :is(.stat, .bot-card, .product-card, .plan-card):hover::before { opacity: 1; }
@keyframes fxSpin { to { --fxa: 360deg; } }

.fx-neon .btn-primary { box-shadow: 0 0 calc(4px + 22px * var(--neon)) color-mix(in srgb, var(--accent) calc(var(--neon) * 85%), transparent); }
.fx-neon :is(.panel, .stat, .bot-card, .product-card, .plan-card) { border-color: color-mix(in srgb, var(--accent) calc(15% + var(--neon) * 45%), var(--border)); box-shadow: 0 0 calc(18px * var(--neon)) -4px color-mix(in srgb, var(--accent) calc(var(--neon) * 70%), transparent), inset 0 0 calc(14px * var(--neon)) -8px color-mix(in srgb, var(--accent) calc(var(--neon) * 60%), transparent); }
.fx-neon .topbar h1, .fx-neon .brand-text, .fx-neon .stat-value { text-shadow: 0 0 calc(14px * var(--neon)) color-mix(in srgb, var(--accent) calc(var(--neon) * 90%), transparent); }
.fx-neon .side-link.active { box-shadow: 0 0 calc(16px * var(--neon)) -2px color-mix(in srgb, var(--accent) calc(var(--neon) * 80%), transparent); }
.fx-neon .stat-icon, .fx-neon .brand-mark { box-shadow: 0 0 calc(18px * var(--neon)) color-mix(in srgb, var(--accent) calc(var(--neon) * 70%), transparent); }
.fx-neon .pill-accent, .fx-neon .pill-success { box-shadow: 0 0 calc(10px * var(--neon)) color-mix(in srgb, currentColor calc(var(--neon) * 60%), transparent); }

.fx-glass :is(.panel, .stat, .bot-card, .product-card, .plan-card, .cfg-group) { background: color-mix(in srgb, var(--surface) 68%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); }
.fx-glass .sidebar { background: color-mix(in srgb, var(--bg-2) 72%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }

.fx-still .fx-bg *, .fx-still .fx-bg > div { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
    .fx-bg *, .fx-bg > div { animation: none !important; }
    .fx-card-tilt :is(.stat, .bot-card, .product-card, .plan-card) { transform: none !important; }
}
.theme-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-3); margin: 26px 0 12px; display: flex; align-items: center; gap: 8px; }
.theme-section-title::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ann-board { display: flex; flex-direction: column; gap: 12px; }
.ann-card { --ann: var(--accent); position: relative; display: flex; gap: 14px; padding: 16px 18px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--ann) 35%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--ann) 12%, var(--surface)), var(--surface) 60%); transition: opacity .25s, transform .25s; }
.ann-card.ann-out { opacity: 0; transform: translateY(-6px); }
.ann-card.ann-success, .ann-ico.ann-success { --ann: var(--mint); }
.ann-card.ann-warning, .ann-ico.ann-warning { --ann: var(--amber); }
.ann-card.ann-danger, .ann-ico.ann-danger { --ann: var(--rose); }
.ann-ico { --ann: var(--accent); width: 42px; height: 42px; flex: none; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: var(--ann); background: color-mix(in srgb, var(--ann) 16%, transparent); }
.ann-card .ann-ico { --ann: inherit; }
.ann-main { flex: 1; min-width: 0; }
.ann-top { display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.ann-type { color: var(--ann); }
.ann-pin { color: var(--text-3); display: inline-flex; align-items: center; gap: 3px; }
.ann-date { color: var(--text-3); font-weight: 500; margin-left: auto; letter-spacing: 0; text-transform: none; }
.ann-card h3 { font-size: 16px; margin: 4px 0 4px; }
.ann-body { color: var(--text-2); font-size: 14px; line-height: 1.55; word-wrap: break-word; }
.ann-body code { background: var(--surface-3); padding: 1px 5px; border-radius: 4px; }
.ann-img { display: block; max-width: min(520px, 100%); max-height: 260px; border-radius: 10px; margin-top: 10px; object-fit: cover; }
.ann-close { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 8px; border: 0; background: transparent; color: var(--text-3); display: grid; place-items: center; font-size: 18px; }
.ann-close:hover { background: var(--surface-3); color: var(--heading); }
.ann-card[data-dismissible] .ann-date { margin-right: 30px; }
.ann-targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ann-admin-list { display: flex; flex-direction: column; }
.ann-admin-item { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-top: 1px solid var(--border); }
.ann-snippet { margin: 2px 0; }
@media (max-width: 767.98px) {
    .ann-targets { grid-template-columns: 1fr; }
    .ann-card { padding: 14px; }
}
.es-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.es-opt { text-align: left; border: 2px solid var(--border); background: var(--surface-2); border-radius: var(--radius); padding: 14px; color: var(--text); display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .15s; }
.es-opt:not(:disabled):hover { border-color: var(--border-2); transform: translateY(-1px); }
.es-opt.active { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.es-opt:disabled { opacity: .55; cursor: not-allowed; }
.es-opt strong { color: var(--heading); margin-top: 6px; }
.es-opt small { color: var(--text-3); line-height: 1.4; }
.es-prev { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #313338; font-size: 18px; line-height: 1; }
.es-prev .es-bar { font-size: 15px; letter-spacing: 1px; color: #dbdee1; display: flex; align-items: center; }
.es-emo { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
.es-bar .es-emo { width: 20px; height: 20px; margin-right: -2px; }
.es-join { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border: 1px dashed var(--border-2); border-radius: var(--radius-sm); }
.es-join .small { flex: 1; min-width: 220px; }
@media (max-width: 767.98px) { .es-options { grid-template-columns: 1fr; } }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.emo-item { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: #313338; }
.emo-item img { width: 32px; height: 32px; object-fit: contain; }
.emo-item span { font-size: 11px; color: #b5bac1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emo-item.missing { opacity: .5; }
.emo-item.missing i { font-size: 30px; color: var(--rose); }
.console { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.console .cmd-echo { margin-top: 6px; }
.console .prompt-echo { color: var(--accent-2); font-weight: 600; }
.console .out { padding-left: 14px; }
.console .out-success { color: var(--mint); }
.console .out-error { color: var(--rose); }
.console .out-warning { color: var(--amber); }
.console .out-info { color: var(--text-2); }
.console .out-cmd { color: var(--accent-ink); }
.console-input { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: #07090d; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 var(--radius-sm) var(--radius-sm); font-family: var(--mono); }
.console-input .prompt { color: var(--accent-2); font-weight: 700; }
.console-input input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: #e8ebf2; font-family: var(--mono); font-size: 13px; }
.console-input input:disabled { opacity: .5; }
.console-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.console-hint { border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); border-radius: 999px; padding: 3px 10px; font-size: 12px; font-family: var(--mono); }
.console-hint:hover { color: var(--heading); border-color: var(--border-2); }
.tc-drawer > summary { list-style: none; cursor: pointer; border-bottom: 0; }
.tc-drawer > summary::-webkit-details-marker { display: none; }
.tc-drawer[open] > summary { border-bottom: 1px solid var(--border); }
.tc-chev { font-size: 22px; color: var(--text-3); transition: transform .2s; }
.tc-drawer[open] .tc-chev { transform: rotate(180deg); }
.tc-drawer > summary:hover .tc-chev { color: var(--heading); }
.be-sec { padding: 14px 0; border-bottom: 1px solid var(--border); }
.be-sec:first-child { padding-top: 0; }
.be-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.be-title { font-weight: 700; color: var(--heading); margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
.be-title i { color: var(--accent-ink); font-size: 18px; }
.be-mods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.be-mod { display: flex; gap: 8px; align-items: flex-start; padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.be-mod i { font-size: 20px; color: var(--accent-ink); }
.be-mod span { display: flex; flex-direction: column; min-width: 0; }
.be-mod small { color: var(--text-3); font-size: 11.5px; line-height: 1.35; }
.be-mod input { margin-top: 3px; flex: none; }
.be-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.be-num { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); }
.be-num-head { display: flex; align-items: center; gap: 6px; font-weight: 600; color: var(--heading); font-size: 13.5px; }
.be-num-head i { color: var(--accent-ink); font-size: 17px; }
.be-num small { color: var(--text-3); font-size: 11.5px; }
.be-stepper { display: flex; gap: 4px; }
.be-stepper input { flex: 1; }
.be-danger { margin-top: 4px; }
@media (max-width: 767.98px) { .be-mods { grid-template-columns: 1fr; } }

.shop-tabs { display: flex; gap: 10px; flex-wrap: wrap; }
.shop-tab { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: border-color .2s, background .2s, color .2s; text-align: left; }
.shop-tab i { font-size: 22px; color: var(--text-3); }
.shop-tab strong { display: block; font-size: 14px; color: var(--heading); line-height: 1.2; }
.shop-tab small { font-size: 12px; color: var(--text-3); }
.shop-tab:hover { border-color: var(--border-2); }
.shop-tab.active { border-color: var(--accent-line); background: var(--accent-soft); }
.shop-tab.active i { color: var(--accent); }
.shop-desc { display: flex; align-items: center; gap: 8px; color: var(--text-3); font-size: 13px; margin-bottom: 14px; }
.shop-desc i { color: var(--accent); font-size: 16px; }
.plan.plan-compact { padding: 20px; }
.plan.plan-compact .plan-badge { top: 14px; right: 14px; }
.plan.plan-compact h3 { font-size: 16.5px; padding-right: 86px; }
.plan.plan-compact .duration { font-weight: 500; font-size: 12.5px; line-height: 1.4; }
.plan.plan-compact .price { font-size: 27px; margin: 12px 0 2px; }
.plan.plan-compact ul { margin: 14px 0 12px; gap: 7px; }
.plan.plan-compact li { font-size: 13px; gap: 7px; line-height: 1.35; }
.plan.plan-compact li i { font-size: 16px; }
.plan-mods { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.plan-mods span { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); }
.plan-mods i { font-size: 13px; color: var(--accent); }
.plan-more { margin: -4px 0 12px; }
.plan-more summary { cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--accent); list-style: none; }
.plan-more summary::-webkit-details-marker { display: none; }
.plan-more ul { margin: 8px 0 0 !important; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap: 16px; align-items: start; }
.shop-sec { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 2px); padding: 6px; }
.shop-sec-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); padding: 10px 12px 6px; }
.shop-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); transition: background .2s; }
.shop-item:hover { background: var(--surface-2); }
.shop-item .product-icon { width: 40px; height: 40px; border-radius: 12px; font-size: 20px; flex: none; }
.shop-item-body { flex: 1; min-width: 0; }
.shop-item-name { font-weight: 700; color: var(--heading); font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.shop-item-name .pill { font-size: 10.5px; padding: 2px 7px; }
.shop-item-desc { font-size: 12.5px; color: var(--text-3); line-height: 1.35; }
.shop-item-buy { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.shop-item-price { font-weight: 800; color: var(--heading); font-size: 16px; white-space: nowrap; }
.shop-item-price .old-price { font-size: 12px; }
@media (max-width: 520px) {
    .shop-item { flex-wrap: wrap; }
    .shop-item-buy { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; padding-left: 52px; }
}
.safe-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12px; color: var(--text-3); }
.safe-meta span { display: inline-flex; align-items: center; gap: 4px; }
.safe-meta i { font-size: 14px; color: var(--text-3); }
.verify-note { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--radius-sm); background: rgba(88, 101, 242, .12); border: 1px solid rgba(88, 101, 242, .35); margin-bottom: 18px; }
.verify-note > i { font-size: 26px; color: #8891f2; flex: none; }
.verify-note strong { display: block; color: var(--heading); font-size: 14px; }
.verify-note span { font-size: 13px; color: var(--text-2); }
.code-input { font-size: 28px; letter-spacing: .5em; text-align: center; font-weight: 800; font-family: var(--mono, ui-monospace, monospace); padding: 12px; }
.join-steps { display: grid; gap: 10px; }
.join-step { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); }
.join-step .n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--surface-2); color: var(--heading); flex: none; }
.join-step.done .n { background: rgba(61, 220, 151, .18); color: var(--mint); }
.join-step strong { display: block; color: var(--heading); font-size: 14px; }
.join-step small { display: block; color: var(--text-3); font-size: 12.5px; }
.case-row { cursor: pointer; }
.list-row.case-row:hover { background: var(--surface-2); }
.case-table .avatar { width: 32px; height: 32px; flex: none; font-size: 16px; }
.dot-live { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--mint); margin-left: 4px; vertical-align: middle; box-shadow: 0 0 0 3px rgba(61, 220, 151, .18); }
.cm-head { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.cm-avatar { width: 64px; height: 64px; font-size: 28px; flex: none; }
.cm-name { font-size: 18px; font-weight: 800; color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin: 16px 0; }
.cm-grid > div { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--border); }
.cm-grid span { display: block; font-size: 11.5px; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.cm-grid b { color: var(--heading); font-size: 13.5px; }
.cm-sec { border-top: 1px solid var(--border); padding-top: 14px; margin-top: 14px; }
.cm-sec-title { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--heading); font-size: 14px; margin-bottom: 10px; }
.cm-sec-title > i { color: var(--accent); font-size: 17px; }
.cm-reason { white-space: pre-wrap; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--border); color: var(--text-2); font-size: 13.5px; }
.cm-left { font-size: 13.5px; color: var(--text-2); margin-bottom: 8px; }
.cm-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cm-set { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cm-set input { width: 80px; }
.cm-set select { width: 110px; }
.cm-note-form { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 10px; }
.cm-note-form textarea { flex: 1; }
.cm-notes { display: grid; gap: 6px; }
.cm-note { display: flex; gap: 10px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--surface-2); font-size: 13.5px; color: var(--text-2); }
.cm-note > i { font-size: 17px; color: var(--accent); margin-top: 1px; }
.cm-note.duration > i { color: var(--amber, #f5a524); }
.cm-note small { color: var(--text-3); font-size: 11.5px; }
.cm-hist { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-2); text-decoration: none; font-size: 13px; }
.cm-hist:hover { background: var(--surface-2); color: var(--heading); }
.cm-hist small { color: var(--text-3); white-space: nowrap; }
.role-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.role-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--rc) 45%, transparent); background: color-mix(in srgb, var(--rc) 12%, transparent); color: var(--heading); font-size: 12.5px; font-weight: 600; }
.role-chip i { width: 9px; height: 9px; border-radius: 50%; background: var(--rc); }
.cm-sec-title .btn-link, .cm-note .btn-link { text-decoration: none; }
.guide-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.guide-tab { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: var(--text-2); text-decoration: none; transition: border-color .2s, transform .2s; }
.guide-tab:hover { border-color: var(--border-2); transform: translateY(-2px); color: var(--text-2); }
.guide-tab.active { border-color: var(--accent-line); background: var(--accent-soft); }
.guide-tab .gi { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: var(--accent-soft); color: var(--accent); flex: none; }
.guide-tab strong { display: block; color: var(--heading); font-size: 14.5px; }
.guide-tab small { display: block; font-size: 12.5px; color: var(--text-3); line-height: 1.35; }
.guide-frame { display: block; width: 100%; height: calc(100vh - 260px); min-height: 560px; border: 0; background: #525659; border-radius: 0 0 var(--radius) var(--radius); }
.guide-mobile { display: none; align-items: center; gap: 10px; padding: 16px; }
.guide-mobile i { font-size: 30px; color: var(--rose); }
.guide-mobile span { flex: 1; font-size: 13px; color: var(--text-2); }
@media (max-width: 768px) {
    .guide-frame { display: none; }
    .guide-mobile { display: flex; }
}
.side-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; display: inline-grid; place-items: center; }
.side-badge[hidden], .cart-btn b[hidden] { display: none; }
.cart-btn { position: relative; }
.cart-btn b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.topbar-actions { display: flex; align-items: center; gap: 8px; }
.plan-actions, .sq-actions { display: flex; gap: 8px; margin-top: auto; }
.plan-actions .grow, .sq-actions .grow { flex: 1; }
.sq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; width: 100%; }
.sq-grid > * { min-width: 0; }
.sq-card { position: relative; aspect-ratio: 1 / 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); transition: transform .2s, border-color .2s, box-shadow .2s; }
.sq-card:hover { transform: translateY(-3px); border-color: var(--accent-line); box-shadow: var(--shadow); }
.sq-card.hot { border-color: var(--accent-line); }
.sq-badge { position: absolute; top: 12px; right: 12px; }
.sq-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: 6px; }
.sq-name { font-weight: 700; color: var(--heading); font-size: 15px; line-height: 1.3; }
.sq-desc { font-size: 12.5px; color: var(--text-2); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sq-price { font-size: 20px; font-weight: 800; color: var(--heading); margin-top: auto; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sq-price .old-price { font-size: 12px; }
.sq-card .sq-actions, .sq-card > .btn { width: 100%; margin-top: 8px; }
@media (max-width: 575px) { .sq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sq-card { aspect-ratio: auto; min-height: 0; padding: 14px; } .sq-price { font-size: 17px; } }
.cart-row.invalid { opacity: .75; }
.cart-row .avatar { background: var(--accent-soft); color: var(--accent-ink); }
.kv.totals dd { text-align: right; }
.seg { display: inline-flex; padding: 4px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); gap: 4px; }
.seg label { margin: 0; cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; font-size: 13px; color: var(--text-2); transition: background .2s, color .2s; }
.seg input:checked + span { background: var(--accent-soft); color: var(--heading); box-shadow: inset 0 0 0 1px var(--accent-line); }
.pay-acc { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); margin-bottom: 10px; overflow: hidden; }
.pay-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 14px 16px; font-weight: 600; color: var(--heading); }
.pay-acc > summary::-webkit-details-marker { display: none; }
.pay-acc > summary .chev { margin-left: auto; transition: transform .2s; color: var(--text-3); font-size: 20px; }
.pay-acc[open] > summary .chev { transform: rotate(180deg); }
.pay-acc[open] > summary { border-bottom: 1px solid var(--border); }
.pay-acc > .cfg-grid { padding: 16px; }
.pay-items { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: var(--text-2); }
.dev-grid { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 991px) { .dev-grid { grid-template-columns: 1fr; } }
.dev-files .panel-body { max-height: 640px; overflow: auto; }
.dev-file { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .15s; }
.dev-file:hover { background: var(--surface-2); }
.dev-file.active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
.dev-file > i { font-size: 20px; color: var(--accent-ink); }
.dev-file .grow { min-width: 0; flex: 1; }
.dev-file .name { font-family: var(--mono); font-size: 12.5px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dev-file small { color: var(--text-3); font-size: 11px; }
.dev-editor { overflow: hidden; }
.dev-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px; border-bottom: 1px solid var(--border); }
.dev-name { flex: 1 1 200px; min-width: 160px; }
.dev-tpl { flex: 0 1 230px; }
.dev-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.dev-status { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12px; color: var(--text-2); border-bottom: 1px solid var(--border); background: var(--surface-2); }
.dev-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.dev-status[data-tone="ok"] .dot { background: var(--mint); }
.dev-status[data-tone="warn"] .dot { background: var(--amber); }
.dev-editor .CodeMirror { height: 560px; font-family: var(--mono); font-size: 13px; background: #0d1117; }
.dev-editor textarea#devCode { width: 100%; min-height: 560px; font-family: var(--mono); font-size: 13px; background: #0d1117; color: #e6edf3; border: 0; padding: 12px; }
.CodeMirror .cm-hit { background: rgba(242, 84, 107, .25); }
.dev-report { border-top: 1px solid var(--border); padding: 12px 14px; font-size: 13px; }
.dev-report[data-tone="block"] { background: var(--rose-soft); }
.dev-report[data-tone="warn"] { background: var(--amber-soft); }
.dev-report[data-tone="ok"] { background: var(--mint-soft); }
.dev-report-head { display: flex; align-items: center; gap: 8px; color: var(--heading); }
.dev-report-head i { font-size: 18px; }
.dev-report ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.dev-report li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dev-report li code { flex-basis: 100%; font-size: 11.5px; color: var(--text-2); background: rgba(0,0,0,.25); padding: 4px 8px; border-radius: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-rules > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.dev-rules > summary::-webkit-details-marker { display: none; }
.dev-rule-list { display: flex; flex-wrap: wrap; gap: 6px; }
.sq-actions .btn { white-space: nowrap; }
@media (max-width: 575px) { .sq-actions .grow i { display: none; } .sq-actions .btn { font-size: 12px; padding-left: 6px; padding-right: 6px; } }

.text-rose { color: var(--rose) !important; }
.text-mint { color: var(--mint) !important; }
.text-amber { color: var(--amber) !important; }
.seg button { border: 0; background: transparent; color: var(--text-2); font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 9px; cursor: pointer; }
.seg button.active { background: var(--accent); color: #fff; }
.fm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.fm-card { border: 1px solid var(--border); background: var(--surface-2); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fm-card.off { opacity: .72; }
.fm-top { display: flex; align-items: center; gap: 12px; }
.fm-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.fm-name { font-weight: 700; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); }
.fm-meta i { margin-right: 6px; color: var(--text-3); }
.fm-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.fm-editor { display: grid; grid-template-columns: 210px 1fr; min-height: 62vh; }
.fm-nav { border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--surface-2); }
.fm-nav button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; color: var(--text-2); padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 13.5px; text-align: left; cursor: pointer; }
.fm-nav button i { font-size: 18px; }
.fm-nav button.active, .fm-nav button:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--heading); }
.fm-body { padding: 20px 24px; min-width: 0; }
.fm-body h3 { font-size: 17px; color: var(--heading); margin-bottom: 14px; }
.fm-body section { display: flex; flex-direction: column; gap: 12px; }
.fm-body section[hidden] { display: none; }
.fm-field .form-label { margin-bottom: 4px; }
.fm-field .form-text { font-size: 12px; color: var(--text-3); margin-top: 4px; }
.fm-q-row { display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: start; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); margin-bottom: 10px; }
.fm-q-num { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.fm-q-tools { display: flex; flex-direction: column; gap: 4px; }
.role-picker .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.role-picker .chips:empty { display: none; }
.rp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); color: var(--heading); font-size: 12.5px; font-weight: 600; }
.rp-chip .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.rp-chip .x { border: 0; background: transparent; color: var(--text-3); font-size: 16px; line-height: 1; padding: 0 6px; cursor: pointer; }
.rp-chip .x:hover { color: var(--rose); }
.fp-preview { background: #313338; border-radius: 14px; padding: 16px; position: sticky; top: 0; }
.fp-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fp-embed { background: #2b2d31; border-left: 4px solid #7c83ff; border-radius: 6px; padding: 12px 14px; max-width: 100%; width: 100%; color: #dbdee1; font-size: 13.5px; }
.fp-row { display: flex; gap: 12px; }
.fp-title { font-weight: 700; color: #f2f3f5; margin-bottom: 6px; word-break: break-word; }
.fp-desc { line-height: 1.45; word-break: break-word; }
.fp-desc a { color: #00a8fc; }
.fp-thumb { width: 72px; height: 72px; border-radius: 6px; object-fit: cover; flex: none; }
.fp-image { width: 100%; border-radius: 6px; margin-top: 10px; max-height: 240px; object-fit: cover; }
.fp-foot { font-size: 11.5px; color: #b5bac1; margin-top: 8px; }
.fp-btn { display: inline-block; color: #fff; font-weight: 600; font-size: 13.5px; padding: 6px 14px; border-radius: 4px; }
.fm-qa { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--surface-2); }
.fm-q { font-size: 12.5px; font-weight: 700; color: var(--text-2); margin-bottom: 4px; }
.fm-a { color: var(--heading); white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.inv-feed { display: flex; flex-direction: column; }
.inv-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--border); }
.inv-row:last-child { border-bottom: 0; }
.inv-row > i { font-size: 20px; margin-top: 2px; }
.inv-row .grow { flex: 1; min-width: 0; }
@media (max-width: 767.98px) {
    .fm-editor { grid-template-columns: 1fr; }
    .fm-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--border); }
    .fm-nav button span { display: none; }
    .fm-body { padding: 16px; }
    .fm-q-row { grid-template-columns: 1fr; }
    .fm-q-num { display: none; }
    .fm-q-tools { flex-direction: row; }
}
.addon-promo { display: flex; gap: 22px; align-items: flex-start; padding: 28px; }
.addon-promo h2 { font-size: 22px; color: var(--heading); margin: 6px 0 8px; }
.addon-ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 32px; flex: none; color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, transparent); }
.addon-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 6px; }
.addon-list li { display: flex; gap: 8px; color: var(--text-2); font-size: 14px; }
.addon-list i { color: var(--mint); font-size: 18px; }
@media (max-width: 575.98px) { .addon-promo { flex-direction: column; padding: 20px; } }
.cfg-locked { border: 0; padding: 0; margin: 0; min-width: 0; position: relative; opacity: .5; }
.cfg-locked .form-control, .cfg-locked .form-select, .cfg-locked .switch-row { cursor: not-allowed; }
.cfg-lock-tag { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--amber); }
.emo-wrap { position: relative; }
.emo-wrap .form-control { padding-right: 42px; }
.emo-btn { position: absolute; right: 6px; top: 6px; width: 30px; height: 30px; border-radius: 8px; border: 0; background: transparent; color: var(--text-3); font-size: 20px; display: grid; place-items: center; cursor: pointer; }
.emo-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.emo-pop { position: absolute; z-index: 2000; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.45); padding: 10px; }
.emo-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.emo-head .form-control { flex: 1; min-width: 0; }
.emo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 4px; max-height: 240px; overflow-y: auto; }
.emo-grid[hidden] { display: none; }
.emo-item { border: 0; background: transparent; border-radius: 8px; height: 38px; font-size: 22px; display: grid; place-items: center; cursor: pointer; padding: 0; }
.emo-item:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.emo-item img { width: 28px; height: 28px; object-fit: contain; }
.emo-item[hidden] { display: none; }
.emo-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--text-3); padding: 12px 4px; }
.fp-emo { width: 20px; height: 20px; vertical-align: -4px; object-fit: contain; }

.pk { position: relative; }
.pk-src { display: none !important; }
.pk-box { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 42px; padding: 5px 34px 5px 8px; border-radius: var(--radius-sm, 10px); background: var(--surface-2); border: 1px solid var(--border-2); cursor: text; position: relative; transition: border-color .15s, box-shadow .15s; }
.pk.open .pk-box { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.pk-chips { display: contents; }
.pk-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 4px 3px 8px; border-radius: 8px; background: var(--surface-3); border: 1px solid var(--border-2); font-size: 13px; color: var(--heading); }
.pk-chip.single { background: transparent; border-color: transparent; padding-left: 4px; font-size: 14px; }
.pk-chip[draggable="true"] { cursor: grab; }
.pk-chip img { width: 18px; height: 18px; border-radius: 50%; }
.pk-chip i.bx { font-size: 15px; color: var(--text-2); }
.pk-chip .pk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.pk-ord { font-size: 11px; min-width: 18px; height: 18px; border-radius: 6px; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pk-x { border: 0; background: transparent; color: var(--text-3); width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; padding: 0; }
.pk-x:hover { background: color-mix(in srgb, var(--danger, #f2546b) 18%, transparent); color: var(--danger, #f2546b); }
.pk-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--surface) 70%, transparent); }
.pk-q { flex: 1; min-width: 110px; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; padding: 4px 2px; }
.pk.has-value:not(.pk-multi) .pk-q { min-width: 60px; }
.pk-caret { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--text-3); font-size: 20px; padding: 0; width: 24px; height: 24px; display: grid; place-items: center; }
.pk.open .pk-caret { transform: translateY(-50%) rotate(180deg); }
.pk-menu { position: absolute; z-index: 1080; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto; padding: 5px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 18px 50px rgba(0,0,0,.4); }
.pk-opt { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--text); }
.pk-opt img { width: 24px; height: 24px; border-radius: 50%; }
.pk-opt i.bx { font-size: 17px; color: var(--text-2); }
.pk-opt small { margin-left: auto; color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45%; }
.pk-opt .pk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-opt.active, .pk-opt:hover { background: var(--accent-soft); }
.pk-opt.selected { color: var(--heading); font-weight: 600; }
.pk-tick { color: var(--accent) !important; margin-left: 6px; }
.pk-opt.selected small { margin-left: 8px; }
.pk-note { padding: 10px; font-size: 13px; color: var(--text-3); }
.pk-foot { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 4px; }
.pk-refresh { border: 0; background: transparent; color: var(--text-2); font-size: 12.5px; padding: 6px 8px; border-radius: 8px; width: 100%; text-align: left; }
.pk-refresh:hover { background: var(--surface-2); color: var(--heading); }
.pk.pk-disabled .pk-box { opacity: .6; cursor: not-allowed; }
.pk.pk-disabled .pk-x, .pk.pk-disabled .pk-caret { display: none; }
.swal2-popup.swal-overflow, .swal2-popup.swal-overflow .swal2-html-container { overflow: visible; }
.seg.seg-wide { display: flex; width: 100%; }
.seg button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 14px; border-radius: 9px; border: 0; background: transparent; font-size: 13px; font-weight: 600; color: var(--text-2); transition: background .2s, color .2s; }
.seg button.active { background: var(--accent-soft); color: var(--heading); box-shadow: inset 0 0 0 1px var(--accent-line); }
.srv-msgs-wrap { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: color-mix(in srgb, var(--surface) 85%, var(--bg)); }
.srv-msgs-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--border); }
.srv-msgs { max-height: 560px; overflow-y: auto; padding: 4px 0 12px; }
.srv-msgs .dc-msg { padding: 4px 12px 2px; gap: 10px; }
.srv-msgs .dc-av, .srv-msgs .dc-av img, .srv-msgs .dc-av-ph { width: 34px; height: 34px; }
.srv-msgs-empty { text-align: center; padding: 50px 16px; color: var(--text-3); font-size: 14px; }
.srv-msgs-empty i { font-size: 34px; display: block; margin-bottom: 8px; }
.update-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.update-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.update-list li i { font-size: 18px; color: var(--success, #2ecc8f); flex: none; margin-top: 1px; }
.update-list.pending li i { color: var(--accent); }
.avatar.safe-role { background: var(--accent-soft); color: var(--accent); font-size: 20px; }
.invite-group .btn-icon { border-left: 0; }

.tm-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tm-toolbar .input-icon { flex: 1; min-width: 220px; max-width: 420px; }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.tm-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; transition: border-color .2s, transform .2s; }
.tm-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--tc, var(--accent)); }
.tm-card:hover { border-color: color-mix(in srgb, var(--tc, var(--accent)) 45%, var(--border)); transform: translateY(-1px); }
.tm-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tm-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; background: var(--surface-3); }
.tm-logo.ph { display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--tc, var(--accent)), color-mix(in srgb, var(--tc, var(--accent)) 50%, #000)); }
.tm-title { min-width: 0; }
.tm-title h3 { font-size: 16px; margin: 0 0 2px; color: var(--heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--tc, var(--accent)); margin-right: 6px; vertical-align: middle; }
.tm-warn { display: flex; gap: 6px; align-items: center; font-size: 12.5px; color: var(--amber); background: var(--amber-soft); padding: 6px 10px; border-radius: 8px; }
.tm-sec { display: flex; flex-direction: column; gap: 6px; }
.tm-sec > span { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.tm-bosses { display: flex; flex-wrap: wrap; gap: 6px; }
.tm-boss { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 99px; background: var(--amber-soft); color: var(--heading); font-size: 12.5px; font-weight: 600; }
.tm-boss img, .tm-boss .ph { width: 22px; height: 22px; border-radius: 50%; }
.tm-avatars { display: flex; align-items: center; flex-wrap: wrap; }
.tm-avatars img, .tm-avatars .ph { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--surface-2); margin-right: -6px; background: var(--surface-3); object-fit: cover; }
.tm-avatars .ph { display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; color: var(--text-2); }
.tm-avatars b { margin-left: 12px; font-size: 12px; color: var(--text-2); }
.tm-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--text-3); }
.tm-meta span { display: inline-flex; align-items: center; gap: 4px; }
.tm-actions { display: flex; gap: 8px; margin-top: auto; }
.tm-actions .btn { flex: 1; }
.tm-empty { grid-column: 1 / -1; text-align: center; padding: 48px 16px; color: var(--text-3); }
.tm-empty > i { font-size: 34px; display: block; margin-bottom: 8px; color: var(--accent); }
.tm-mlist { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow: auto; text-align: left; }
.tm-mrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 10px; }
.tm-mrow:hover { background: var(--surface-2); }
.tm-mrow img { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-3); }

.eb-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.eb-side { position: sticky; top: 84px; }
.eb-block { border: 1px solid var(--border); border-radius: 12px; padding: 0 14px; margin-bottom: 12px; background: var(--surface-2); }
.eb-block > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 12px 0; cursor: pointer; font-weight: 700; color: var(--heading); }
.eb-block > summary::-webkit-details-marker { display: none; }
.eb-block[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 12px; }
.eb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
.eb-field { margin-bottom: 12px; min-width: 0; }
.eb-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.eb-frow { display: grid; grid-template-columns: 1fr 1.6fr auto auto; gap: 6px; align-items: center; }
.eb-frow.btn-row { grid-template-columns: 110px 1fr 1.4fr auto; }
.eb-frow .form-control { min-width: 0; }
.color-field { display: flex; gap: 6px; align-items: center; }
.color-field input[type=color] { width: 42px; height: 38px; padding: 2px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; flex: none; }
.dc-preview { background: #313338; color: #dbdee1; border-radius: 10px; padding: 12px 0; min-height: 120px; overflow: hidden; }
[data-bs-theme=light] .dc-preview { background: #ffffff; color: #313338; border: 1px solid var(--border); }
.dc-preview .dc-msg { margin-top: 0; }
.dc-preview .dc-name { color: #f2f3f5; }
[data-bs-theme=light] .dc-preview .dc-name { color: #060607; }
.dc-preview .dc-embed { background: #2b2d31; border-color: transparent; }
[data-bs-theme=light] .dc-preview .dc-embed { background: #f2f3f5; }
.dc-av-ph.bot { background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.dc-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 4px; font-size: 13.5px; font-weight: 500; background: #4e5058; color: #fff; }
.dc-btn.link i { font-size: 13px; opacity: .8; }
.dc-btn img.dc-emoji { width: 18px; height: 18px; }
.dc-container { margin-top: 6px; max-width: 520px; padding: 14px 16px; border-radius: 8px; background: #2b2d31; border-left: 4px solid var(--ac, var(--accent)); }
[data-bs-theme=light] .dc-container { background: #f2f3f5; }
.dc-container hr { border-color: rgba(255,255,255,.08); margin: 10px 0; opacity: 1; }
.dc-cimg { display: block; width: 100%; max-height: 260px; object-fit: cover; border-radius: 6px; }

.tk-evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tk-ev { position: relative; display: block; border-radius: 10px; overflow: hidden; background: var(--surface-3); aspect-ratio: 4 / 3; border: 1px solid var(--border); }
.tk-ev img, .tk-ev video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-ev small { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 5px; font-size: 10.5px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.tk-ev-play { position: absolute; inset: 0; display: grid; place-items: center; font-size: 30px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,.6); }

.tu-page { background: var(--bg); min-height: 100vh; }
.tu-wrap { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; }
.tu-card { width: 100%; max-width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 28px; box-shadow: 0 30px 80px -40px rgba(0,0,0,.6); }
.tu-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.tu-head h1 { font-size: 20px; margin: 0; color: var(--heading); }
.tu-head p { margin: 2px 0 0; font-size: 13px; color: var(--text-3); }
.tu-icon { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); flex: none; }
.tu-drop { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 30px 18px; border: 2px dashed var(--border-2); border-radius: 16px; background: var(--surface-2); cursor: pointer; transition: border-color .2s, background .2s; position: relative; }
.tu-drop:hover, .tu-drop.over { border-color: var(--accent); background: var(--accent-soft); }
.tu-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tu-drop > i { font-size: 36px; color: var(--accent); }
.tu-drop strong { color: var(--heading); }
.tu-drop span { font-size: 12.5px; color: var(--text-3); }
.tu-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.tu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.tu-item > img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; flex: none; }
.tu-item > i { font-size: 22px; color: var(--accent); width: 40px; text-align: center; flex: none; }
.tu-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--heading); font-size: 13.5px; }
.tu-item > small { color: var(--text-3); font-size: 12px; white-space: nowrap; }
.tu-item.bad { border-color: var(--rose); }
.tu-item.bad > small { color: var(--rose); }
.tu-progress { position: relative; height: 26px; margin-top: 14px; border-radius: 99px; background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.tu-progress > div { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width .2s; }
.tu-progress > span { position: relative; display: block; text-align: center; line-height: 24px; font-size: 12px; font-weight: 700; color: var(--heading); }
.tu-done { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 6px; }
.tu-done-h { font-size: 13px; font-weight: 700; color: var(--mint); margin-bottom: 4px; }
.tu-foot { margin: 18px 0 0; font-size: 12px; color: var(--text-3); display: flex; gap: 6px; }

.shift-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
.shift-row:last-child { border-bottom: 0; }
.shift-row > i { font-size: 18px; }
.dot-live { width: 10px; height: 10px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 var(--mint); animation: dotlive 1.8s infinite; flex: none; }
@keyframes dotlive { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 60%, transparent); } 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.shift-board { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.shift-board .n { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.shift-board .grow, .shift-row .grow { flex: 1; min-width: 0; }
.shift-bar { height: 6px; border-radius: 99px; background: var(--surface-3); margin: 4px 0; overflow: hidden; }
.shift-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.shift-recent { max-height: 360px; overflow: auto; }

.dbm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1300px) { .dbm:has(.dbm-editor:not([hidden])) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.dbm-crumbs { font-size: 13px; color: var(--text-3); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.dbm-crumbs a { color: var(--accent-ink); text-decoration: none; font-weight: 600; }
.dbm-desc { padding: 0 20px 12px; }
.dbm-table td { vertical-align: middle; }
.dbm-row { cursor: pointer; }
.dbm-row.active td { background: var(--accent-soft) !important; }
.dbm-name { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.dbm-name > i { font-size: 20px; color: var(--text-3); }
.dbm-name > i.bxs-folder { color: var(--amber); }
.dbm-name > i.bx-code-curly { color: var(--accent); }
.dbm-name > span:first-of-type { color: var(--heading); font-weight: 600; word-break: break-all; }
.dbm-foot { padding: 10px 20px; border-top: 1px solid var(--border); }
.dbm-editor { position: sticky; top: 84px; }
.dbm-status { font-size: 12.5px; margin-bottom: 10px; color: var(--text-3); display: flex; gap: 6px; align-items: flex-start; min-height: 18px; }
.dbm-status.ok { color: var(--mint); }
.dbm-status.bad { color: var(--rose); }
.dbm-code { display: flex; height: 62vh; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--bg-2); font-family: var(--mono); font-size: 12.5px; line-height: 1.6; }
.dbm-gutter { flex: none; width: 48px; padding: 10px 8px 10px 0; text-align: right; color: var(--text-3); background: var(--surface-2); white-space: pre; overflow: hidden; user-select: none; border-right: 1px solid var(--border); }
.dbm-code textarea { flex: 1; border: 0; outline: 0; resize: none; padding: 10px 12px; background: transparent; color: var(--text); font: inherit; white-space: pre; tab-size: 2; }
.dbm-ui { max-height: 62vh; overflow: auto; padding: 4px 2px; font-size: 13px; }
.dbm-node { position: relative; }
.dbm-kids { margin-left: 14px; padding-left: 12px; border-left: 1px dashed var(--border-2); }
.dbm-line { display: flex; align-items: center; gap: 6px; padding: 3px 0; min-width: 0; }
.dbm-tog { width: 22px; height: 22px; border: 0; background: transparent; color: var(--text-3); border-radius: 6px; display: grid; place-items: center; flex: none; padding: 0; }
.dbm-tog:hover { background: var(--surface-3); color: var(--heading); }
.dbm-key { font-family: var(--mono); font-size: 12.5px; color: var(--accent-ink); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; width: 160px; flex: none; }
input.dbm-key:hover, input.dbm-key:focus { border-color: var(--border-2); background: var(--surface); outline: 0; }
.dbm-key.idx { width: auto; min-width: 28px; color: var(--text-3); }
.dbm-key.root { width: auto; color: var(--text-3); }
.dbm-type { font-size: 11.5px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); border-radius: 6px; padding: 2px 4px; flex: none; }
.dbm-val { flex: 1; min-width: 80px; font-size: 13px; border: 1px solid var(--border); background: var(--surface); color: var(--heading); border-radius: 7px; padding: 4px 8px; }
.dbm-val:focus { outline: 0; border-color: var(--accent); }
textarea.dbm-val { resize: vertical; }
.dbm-val.num { max-width: 200px; font-family: var(--mono); }
.dbm-null { font-style: italic; color: var(--text-3); font-size: 12.5px; }
.dbm-prev { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbm-hint { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.dbm-x { border: 0; background: transparent; color: var(--text-3); width: 24px; height: 24px; border-radius: 6px; margin-left: auto; flex: none; padding: 0; }
.dbm-x:hover { background: var(--rose-soft, rgba(242,84,107,.14)); color: var(--rose); }
.dbm-add { border: 0; background: transparent; color: var(--accent-ink); font-size: 12px; font-weight: 600; padding: 4px 6px; border-radius: 6px; }
.dbm-add:hover { background: var(--accent-soft); }
#dbmSave.pulse { box-shadow: 0 0 0 0 var(--accent-line); animation: dotlive 1.6s infinite; }

.cart-ref { border-top: 1px solid var(--border); }
.twofa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-2); }
.twofa-codes span { text-align: center; font-size: 14px; letter-spacing: .08em; color: var(--heading); padding: 4px; }
.seg[data-seg-radio] label span { cursor: pointer; }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input input { position: absolute; opacity: 0; pointer-events: none; }
.star-input label { font-size: 28px; color: var(--border-2); cursor: pointer; transition: color .15s, transform .15s; }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #fbbf24; }
.star-input label:active { transform: scale(.9); }
.rv-stars { color: #fbbf24; font-size: 14px; white-space: nowrap; }
.rv-admin-grid, .dash-rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dash-rv { padding: 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.ref-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.ref-admin { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.ref-admin.off { opacity: .55; }
.ref-logo-prev { width: 42px; height: 42px; border-radius: 10px; background: var(--surface-3); display: grid; place-items: center; overflow: hidden; flex: none; color: var(--text-3); font-weight: 800; font-size: 13px; }
.ref-logo-prev.lg { width: 48px; height: 48px; }
.ref-logo-prev img { width: 100%; height: 100%; object-fit: contain; }
.seg > a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.seg > a.active { background: var(--accent-soft); color: var(--heading); box-shadow: inset 0 0 0 1px var(--accent-line); }
.nav.tabs .side-badge { position: static; margin-left: 6px; }

.cf-ads { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.cf-ads-panel_side { margin: 8px 12px 12px; }
.cf-ads-panel_inline { margin-top: 24px; }
.cf-ad { position: relative; border-radius: 14px; overflow: hidden; background: var(--surface-2); border: 1px solid var(--border); }
.cf-ad-tag { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 99px; background: rgba(0,0,0,.55); color: #fff; }
.cf-ad-x { position: absolute; top: 6px; right: 6px; z-index: 3; width: 26px; height: 26px; border-radius: 50%; border: 0; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; padding: 0; font-size: 16px; }
.cf-ad-x:hover { background: rgba(0,0,0,.75); }
.cf-ad-banner img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; }
.cf-ad-banner.side img { max-height: none; }
.cf-ad-card { display: flex; align-items: center; gap: 14px; padding: 14px 44px 14px 14px; }
.cf-ad-card .cf-ad-tag { position: static; align-self: flex-start; order: 0; display: none; }
.cf-ad-media { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; font-size: 28px; flex: none; }
.cf-ad-media img { width: 100%; height: 100%; object-fit: cover; }
.cf-ad-body { flex: 1; min-width: 0; }
.cf-ad-body strong { display: block; color: var(--heading); font-size: 15px; }
.cf-ad-body p { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.cf-ad-btn { display: inline-flex; align-items: center; gap: 4px; padding: 8px 14px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; flex: none; }
.cf-ad-btn:hover { color: var(--on-accent); filter: brightness(1.08); }
.cf-ad.side { border-radius: 12px; }
.cf-ad-card.side { flex-direction: column; text-align: center; padding: 14px; }
.cf-ad-card.side .cf-ad-btn { width: 100%; justify-content: center; }
.cf-ad-html { padding: 0; }
.cf-ad-pop { position: fixed; inset: 0; z-index: 2000; display: grid; place-items: center; padding: 16px; background: rgba(5,8,14,.6); backdrop-filter: blur(4px); opacity: 0; transition: opacity .25s; }
.cf-ad-pop.open { opacity: 1; }
.cf-ad-pop-in { width: 100%; max-width: 460px; transform: translateY(12px) scale(.98); transition: transform .3s; }
.cf-ad-pop.open .cf-ad-pop-in { transform: none; }
.cf-ad-pop .cf-ad { box-shadow: 0 40px 100px -30px rgba(0,0,0,.7); }
.cf-ad-pop .cf-ad-card { flex-direction: column; text-align: center; padding: 28px 22px 22px; }
.cf-ad-pop .cf-ad-media { width: 100%; height: auto; aspect-ratio: 16 / 9; font-size: 44px; }
.cf-ad-pop .cf-ad-btn { width: 100%; justify-content: center; padding: 11px; }
.cf-ad-pop .cf-ad-banner img { max-height: 70vh; object-fit: contain; }
.sidebar-hidden .cf-ads-panel_side { display: none; }
.ad-preview .cf-ad-x { display: none; }
.seo-serp { padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.seo-serp-url { font-size: 12.5px; color: #4d5156; }
.seo-serp-title { font-size: 19px; color: #1a0dab; line-height: 1.3; margin: 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: Arial, sans-serif; }
.seo-serp-desc { font-size: 13.5px; color: #4d5156; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: Arial, sans-serif; }
.seo-files details { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 8px; }
.seo-files summary { padding: 8px 12px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--heading); }
.seo-files pre { margin: 0; max-height: 280px; overflow: auto; border-radius: 0 0 10px 10px; font-size: 11.5px; }

.dev-assist .panel-head { flex-wrap: wrap; gap: 10px; }
.dev-prev-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; }
.dc-cmd-preview { background: #2b2d31; color: #dbdee1; border-radius: 10px; overflow: hidden; min-height: 100px; }
.dc-cmd-head { padding: 10px 14px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b5bac1; background: #1e1f22; display: flex; align-items: center; gap: 6px; }
.dc-cmd-row { display: flex; gap: 10px; padding: 10px 14px; align-items: center; }
.dc-cmd-row:hover { background: #35373c; }
.dc-cmd-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; flex: none; }
.dc-cmd-name { font-weight: 600; color: #f2f3f5; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dc-cmd-desc { font-size: 12.5px; color: #b5bac1; }
.dc-opt { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; padding: 1px 8px; border-radius: 4px; background: #1e1f22; color: #dbdee1; }
.dc-opt.req { box-shadow: inset 0 0 0 1px #5865f2; }
.dc-opt small { color: #949ba4; font-size: 10.5px; }
.dc-cmd-opts { border-top: 1px solid #1e1f22; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; }
.dc-cmd-opts span { display: block; color: #949ba4; font-size: 12px; }
.dev-checks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.dev-checks li { display: flex; gap: 6px; align-items: flex-start; }
.dev-checks li.ok i { color: var(--mint); }
.dev-checks li.bad { color: var(--rose); }
.dev-snips { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.dev-snip { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--heading); font-size: 13px; font-weight: 600; text-align: left; transition: border-color .2s, background .2s; }
.dev-snip:hover { border-color: var(--accent); background: var(--accent-soft); }
.dev-snip i { font-size: 18px; color: var(--accent); }
.dev-ref .table { font-size: 12.5px; }
.dev-ref td:first-child { white-space: nowrap; color: var(--accent-ink); }
.dev-editor[data-font="1"] .CodeMirror { font-size: 15px; }
.dev-editor[data-font="2"] .CodeMirror { font-size: 17px; }
#devWrap.active { background: var(--accent-soft); color: var(--heading); }
body.dev-fullscreen .dev-editor { position: fixed; inset: 0; z-index: 1500; border-radius: 0; margin: 0; display: flex; flex-direction: column; }
body.dev-fullscreen .dev-editor .CodeMirror { flex: 1; height: auto; }

@media (max-width: 1100px) {
    .eb-layout, .dev-prev-grid { grid-template-columns: minmax(0, 1fr); }
    .eb-side, .dbm-editor { position: static; }
}
@media (max-width: 640px) {
    .eb-grid { grid-template-columns: minmax(0, 1fr); }
    .eb-frow, .eb-frow.btn-row { grid-template-columns: 1fr auto; }
    .eb-frow .form-control:nth-child(2), .eb-frow.btn-row .form-control:nth-child(3) { grid-column: 1 / -1; order: 3; }
    .tk-evidence { grid-template-columns: repeat(2, 1fr); }
    .tu-card { padding: 20px; }
    .cf-ad-card { flex-wrap: wrap; }
    .cf-ad-btn { width: 100%; justify-content: center; }
    .dbm-key { width: 110px; }
    .twofa-codes { grid-template-columns: 1fr 1fr; }
}
.dev-assist .seg button { flex: none; white-space: nowrap; }
.sec-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border); }
.sec-row:last-of-type { border-bottom: 0; }
.sec-row > i { font-size: 20px; margin-top: 1px; }
.sec-row.ok > i { color: var(--mint); }
.sec-row.warn > i { color: var(--amber); }
.sec-row.bad > i { color: var(--rose); }
.sec-row strong { display: block; color: var(--heading); font-size: 13.5px; }
.sec-row small { color: var(--text-3); font-size: 12.5px; }

.cfg-shell { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; scroll-margin-top: 90px; }
.cfg-nav { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 10px; max-height: calc(100vh - 110px); }
.cfg-nav nav { display: flex; flex-direction: column; gap: 3px; overflow: auto; padding-right: 2px; }
.cfg-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 12px; color: var(--text-2); text-decoration: none; border: 1px solid transparent; transition: background .15s, border-color .15s, color .15s; }
.cfg-nav-item > i:first-child { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px; background: var(--surface-2); color: var(--accent-ink); flex: none; transition: background .15s, color .15s; }
.cfg-nav-item span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cfg-nav-item b { font-size: 13.5px; color: var(--heading); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cfg-nav-item small { font-size: 11.5px; color: var(--text-3); }
.cfg-nav-item:hover { background: var(--surface-2); color: var(--heading); }
.cfg-nav-item.active { background: var(--accent-soft); border-color: var(--accent-line); }
.cfg-nav-item.active > i:first-child { background: var(--accent); color: var(--on-accent); }
.cfg-nav-item.locked { opacity: .55; }
.cfg-nav-item.dim { opacity: .3; }
.cfg-nav-sep { font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 12px 11px 4px; }
.cfg-main { min-width: 0; }
.cfg-shell .cfg-group { display: none; margin-bottom: 14px; }
.cfg-shell .cfg-group.active, .cfg-shell.searching details.cfg-group.match { display: block; }
.cfg-shell.searching .cfg-locked-group, .cfg-shell.searching details.cfg-group:not(.match) { display: none; }
.cfg-shell .cfg-group > summary { cursor: default; display: flex; align-items: center; gap: 14px; padding: 18px 22px; list-style: none; border-bottom: 1px solid var(--border); background: linear-gradient(135deg, var(--accent-soft), transparent 60%); }
.cfg-gicon { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; font-size: 22px; background: var(--accent); color: var(--on-accent); flex: none; box-shadow: 0 8px 22px -10px var(--accent); }
.cfg-gtitle { display: flex; flex-direction: column; min-width: 0; }
.cfg-gtitle b { font-size: 17px; color: var(--heading); }
.cfg-gtitle small { font-size: 13px; color: var(--text-2); font-weight: 400; }
.cfg-shell .cfg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 22px; }
.cfg-field { min-width: 0; }
.cfg-field.cfg-wide { grid-column: 1 / -1; }
.cfg-label { font-weight: 650; color: var(--heading); font-size: 13.5px; }
.cfg-hint { font-size: 12.3px; color: var(--text-3); line-height: 1.45; }
.cfg-switch { display: flex; align-items: center; gap: 12px; height: 100%; width: 100%; cursor: pointer; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); transition: border-color .15s, background .15s; margin: 0; }
.cfg-switch:hover { border-color: var(--border-2); }
.cfg-switch:has(input:checked) { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface-2)); }
.cfg-sw-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cfg-sw-text .cfg-label { display: flex; align-items: center; gap: 4px; }
.cfg-switch .form-check { margin: 0 0 0 auto; padding-left: 2.6em; flex: none; }
.cfg-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; }
.cfg-save { position: sticky; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 14px 22px; border-top: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(8px); z-index: 2; }
.cfg-dirty, .cfg-reset { display: none !important; }
form.dirty .cfg-dirty { display: inline-flex !important; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--amber); }
form.dirty .cfg-reset { display: inline-flex !important; }
form.dirty .cfg-save .btn-primary { box-shadow: 0 0 0 4px var(--accent-soft); }
.cfg-lock-card { display: flex; align-items: center; gap: 14px; padding: 22px; }
.cfg-lock-card .cfg-gicon { background: var(--surface-3); color: var(--text-3); box-shadow: none; }
.cfg-lock-card b { display: block; color: var(--heading); }
.cfg-lock-card small { color: var(--text-3); }
.cfg-empty { text-align: center; padding: 50px 20px; color: var(--text-3); border: 1px dashed var(--border-2); border-radius: var(--radius); }
.cfg-empty > i { font-size: 34px; display: block; margin-bottom: 6px; }
.cfg-shell .cfg-locked { opacity: .5; }
@media (max-width: 1100px) {
    .cfg-shell { grid-template-columns: minmax(0, 1fr); }
    .cfg-nav { position: static; max-height: none; }
    .cfg-nav nav { flex-direction: row; overflow-x: auto; padding-bottom: 4px; }
    .cfg-nav-item { flex: none; }
    .cfg-nav-item small { display: none; }
    .cfg-nav-sep { display: none; }
}
@media (max-width: 700px) {
    .cfg-shell .cfg-grid { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .cfg-shell .cfg-group > summary { padding: 14px 16px; }
}

.pk-box { min-height: 44px; padding: 6px 36px 6px 8px; border-radius: 12px; background: var(--surface); }
.pk-box:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border-2)); }
.pk-chip { border-radius: 9px; padding: 4px 4px 4px 9px; font-weight: 600; animation: pkIn .18s ease; }
.pk-chip.role { background: color-mix(in srgb, var(--rc) 16%, var(--surface-2)); border-color: color-mix(in srgb, var(--rc) 45%, transparent); }
.pk-chip.role .pk-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--rc) 30%, transparent); }
.pk-chip.single.role { background: color-mix(in srgb, var(--rc) 12%, transparent); border-color: color-mix(in srgb, var(--rc) 35%, transparent); padding-left: 9px; }
@keyframes pkIn { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.pk-clear { border: 0; background: transparent; color: var(--text-3); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; padding: 3px 6px; border-radius: 7px; }
.pk-clear:hover { color: var(--rose); background: var(--rose-soft); }
.pk-menu { max-height: 340px; padding: 6px; border-radius: 14px; animation: pkMenu .16s ease; }
@keyframes pkMenu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.pk-head { position: sticky; top: -6px; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: -6px -6px 4px; padding: 8px 12px; font-size: 11.5px; color: var(--text-3); background: var(--surface); border-bottom: 1px solid var(--border); }
.pk-head b { color: var(--accent-ink); font-size: 11.5px; }
.pk-group { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); padding: 10px 10px 4px; }
.pk-opt { padding: 8px 10px; border-radius: 9px; }
.pk-cb { width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--border-2); display: grid; place-items: center; flex: none; transition: background .12s, border-color .12s; }
.pk-cb i { font-size: 14px !important; color: var(--on-accent) !important; }
.pk-opt.selected .pk-cb { background: var(--accent); border-color: var(--accent); }
.pk-foot { display: flex; justify-content: space-between; align-items: center; gap: 6px; position: sticky; bottom: -6px; background: var(--surface); margin: 4px -6px -6px; padding: 6px; }
.pk-refresh { width: auto; }
.pk-done { border: 0; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: 9px; }
.lv-box { display: flex; flex-direction: column; gap: 8px; }
.lv-list { display: flex; flex-direction: column; gap: 8px; }
.lv-row { display: grid; grid-template-columns: 150px 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.lv-row > i { color: var(--text-3); font-size: 18px; text-align: center; }
.lv-num { position: relative; }
.lv-num .form-control { padding-right: 52px; }
.lv-num span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 12px; color: var(--text-3); pointer-events: none; }
.lv-add { align-self: flex-start; }
@media (max-width: 600px) { .lv-row { grid-template-columns: 110px minmax(0, 1fr) auto; } .lv-row > i { display: none; } }
.ip-panel > summary { list-style: none; cursor: pointer; }
.ip-panel > summary::-webkit-details-marker { display: none; }
.ip-panel:not([open]) > summary { border-bottom: 0; }
.ip-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--accent-ink); flex: none; }
.ip-toggle i { transition: transform .2s; font-size: 18px; }
.ip-panel[open] .ip-toggle i { transform: rotate(180deg); }
.ip-toggle .hide, .ip-panel[open] .ip-toggle .show { display: none; }
.ip-panel[open] .ip-toggle .hide { display: inline; }
.sec-grid .panel.h-100 { margin: 0; }
.pk.pk-up .pk-menu { top: auto; bottom: calc(100% + 4px); }
.panel:has(.pk.open), details:has(.pk.open), .tc-row:has(.pk.open), .cfg-group:has(.pk.open) { overflow: visible; }
.pk.open { z-index: 30; }
.tc-row .emo-wrap { flex: none; width: 96px; }
.tc-row .emo-wrap .tc-emoji { width: 100% !important; height: 44px; padding: 6px 38px 6px 8px; font-size: 22px; line-height: 1; text-overflow: clip; }
.tc-row .emo-wrap .emo-btn { top: 7px; }
.tc-row { align-items: stretch; }
.emo-prev { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; display: none; }
.emo-prev img { width: 26px; height: 26px; object-fit: contain; }
.emo-wrap.has-custom .emo-prev { display: block; }
.emo-wrap.has-custom > input, .emo-wrap.has-custom > textarea { color: transparent; caret-color: var(--text); }
.emo-wrap.has-custom > input:focus { color: var(--text); }
.emo-wrap.has-custom:focus-within .emo-prev { display: none; }

.mod-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 18px; align-items: start; }
.mod-list { position: sticky; top: 86px; display: flex; flex-direction: column; gap: 4px; }
.mod-item { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 12px; text-decoration: none; color: var(--text-2); border: 1px solid transparent; }
.mod-item:hover { background: var(--surface-2); }
.mod-item.active { background: var(--accent-soft); border-color: var(--accent-line); }
.mod-item.off { opacity: .55; }
.mod-item span:last-child { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.mod-item b { color: var(--heading); font-size: 13.5px; }
.mod-item small { color: var(--text-3); font-size: 11.5px; }
.mod-item.add .mod-ic { background: transparent; border: 1.5px dashed var(--border-2); color: var(--text-3); }
.mod-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: var(--accent-soft); color: var(--accent-ink); flex: none; }
.mod-ic.custom { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; }
.mod-ic.lg { width: 50px; height: 50px; font-size: 26px; border-radius: 14px; }
.mod-editor { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.mod-editor .panel { margin: 0; }
.mod-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-icons button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 20px; display: grid; place-items: center; }
.mod-icons button.active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.mod-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mod-checks.one { grid-template-columns: minmax(0, 1fr); gap: 6px; max-height: 420px; overflow: auto; }
.mod-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); cursor: pointer; margin: 0; }
.mod-check.sm { padding: 8px 10px; align-items: center; }
.mod-check input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.mod-check span { display: grid; grid-template-columns: auto 1fr; gap: 0 8px; min-width: 0; }
.mod-check span i { grid-row: span 2; font-size: 20px; color: var(--accent-ink); }
.mod-check.sm span { grid-template-columns: auto 1fr auto; align-items: center; }
.mod-check.sm span i { grid-row: auto; font-size: 17px; }
.mod-check.sm span small { justify-self: end; }
.mod-check b { color: var(--heading); font-size: 13.5px; }
.mod-check small { color: var(--text-3); font-size: 12px; }
.mod-check:has(input:checked) { border-color: var(--accent-line); background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface-2)); }
.mod-check.owned, .mod-cmd.owned { opacity: .55; cursor: default; }
.mod-cmds { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.mod-cat { border: 1px solid var(--border); border-radius: 12px; padding: 10px; background: var(--surface-2); }
.mod-cat-head { display: flex; justify-content: space-between; align-items: center; padding: 2px 4px 8px; font-size: 13px; color: var(--heading); }
.mod-cmd { display: flex; gap: 9px; align-items: flex-start; padding: 6px 6px; border-radius: 8px; cursor: pointer; margin: 0; }
.mod-cmd:hover { background: var(--surface-3); }
.mod-cmd input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.mod-cmd span { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.mod-cmd b { font-family: var(--mono); font-size: 12.5px; color: var(--heading); }
.mod-cmd small { color: var(--text-3); font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-cmd em { font-style: normal; font-size: 10.5px; color: var(--text-3); white-space: nowrap; padding-top: 2px; }
.mod-save { position: sticky; bottom: 0; display: flex; gap: 10px; padding: 14px 0; background: linear-gradient(transparent, var(--bg) 35%); z-index: 3; }
@media (max-width: 1000px) { .mod-layout { grid-template-columns: minmax(0, 1fr); } .mod-list { position: static; } }

.foot-links { display: inline-flex; flex-wrap: wrap; gap: 6px 14px; }
.legal-item { display: flex; align-items: center; gap: 10px; padding: 11px 18px; border-bottom: 1px solid var(--border); color: var(--text-2); text-decoration: none; }
.legal-item:last-child { border-bottom: 0; }
.legal-item > i { font-size: 20px; color: var(--accent-ink); }
.legal-item span:not(.pill) { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.legal-item b { color: var(--heading); font-size: 13.5px; }
.legal-item small { color: var(--text-3); font-size: 11.5px; font-family: var(--mono); }
.legal-item:hover, .legal-item.active { background: var(--accent-soft); }
.legal-item.off { opacity: .5; }
.legal-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.legal-bar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.legal-bar button { width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: 18px; display: grid; place-items: center; }
.legal-bar button:hover { color: var(--heading); border-color: var(--border-2); }
.legal-bar select { width: auto; }
.legal-text { font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.legal-preview { min-height: 420px; padding: 20px 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.lg-content { color: var(--text-2); font-size: 15px; line-height: 1.75; }
.lg-content h2 { font-size: 20px; color: var(--heading); margin: 28px 0 10px; padding-top: 6px; }
.lg-content h3 { font-size: 17px; color: var(--heading); margin: 22px 0 8px; }
.lg-content h4 { font-size: 15px; color: var(--heading); margin: 18px 0 6px; }
.lg-content p { margin: 0 0 14px; }
.lg-content ul, .lg-content ol { padding-left: 22px; margin: 0 0 16px; }
.lg-content li { margin-bottom: 6px; }
.lg-content strong { color: var(--heading); }
.lg-content a { color: var(--accent-ink); }
.lg-content blockquote { border-left: 3px solid var(--accent); padding: 8px 14px; background: var(--accent-soft); border-radius: 0 10px 10px 0; margin: 0 0 14px; }
.legal-page { background: var(--bg); min-height: 100vh; }
.lg-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.lg-top { border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 80%, transparent); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; }
.lg-top-in { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.lg-brand { display: flex; align-items: center; gap: 10px; color: var(--heading); font-weight: 800; text-decoration: none; }
.lg-brand img { width: 34px; height: 34px; border-radius: 10px; object-fit: cover; }
.lg-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; padding-top: 32px; padding-bottom: 48px; align-items: start; }
.lg-nav { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 2px; }
.lg-nav-title { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); padding: 0 12px 8px; }
.lg-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: 14px; }
.lg-nav a i { font-size: 18px; color: var(--text-3); }
.lg-nav a:hover { background: var(--surface-2); color: var(--heading); }
.lg-nav a.active { background: var(--accent-soft); color: var(--heading); font-weight: 650; }
.lg-nav a.active i { color: var(--accent-ink); }
.lg-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 32px 38px; min-width: 0; }
.lg-head { display: flex; align-items: center; gap: 16px; padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.lg-icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-size: 26px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; flex: none; }
.lg-head h1 { font-size: 26px; margin: 0; color: var(--heading); }
.lg-head p { margin: 2px 0 0; color: var(--text-3); font-size: 13px; }
.lg-foot { border-top: 1px solid var(--border); padding: 20px 0; color: var(--text-3); font-size: 13px; }
@media (max-width: 860px) { .lg-body { grid-template-columns: minmax(0, 1fr); } .lg-nav { position: static; flex-direction: row; overflow-x: auto; } .lg-nav-title { display: none; } .lg-nav a { flex: none; } .lg-doc { padding: 22px 18px; } }
@media print { .lg-top, .lg-nav, .lg-foot, .cf-cookie { display: none !important; } .lg-body { display: block; } .lg-doc { border: 0; padding: 0; } }
.cf-cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 2100; display: flex; justify-content: center; pointer-events: none; opacity: 0; transform: translateY(20px); transition: opacity .3s, transform .3s; }
.cf-cookie.show { opacity: 1; transform: none; }
.cf-cookie-in { pointer-events: auto; display: flex; align-items: center; gap: 14px; max-width: 760px; width: 100%; padding: 14px 16px; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid var(--border-2); box-shadow: 0 20px 60px -20px rgba(0,0,0,.6); backdrop-filter: blur(12px); }
.cf-cookie-in > i { font-size: 28px; color: var(--amber); flex: none; }
.cf-cookie-in p { margin: 0; font-size: 13px; color: var(--text-2); flex: 1; }
.cf-cookie-in a { color: var(--accent-ink); }
.cf-cookie-btns { display: flex; gap: 8px; flex: none; }
.cf-cookie-btns button { border: 1px solid var(--border-2); background: transparent; color: var(--text); padding: 8px 14px; border-radius: 10px; font-size: 13px; font-weight: 600; }
.cf-cookie-btns button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
@media (max-width: 640px) { .cf-cookie-in { flex-wrap: wrap; } .cf-cookie-btns { width: 100%; } .cf-cookie-btns button { flex: 1; } }
.team-admin-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.team-admin { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: var(--surface-2); }
.team-admin.off { opacity: .5; }
.team-av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 20px; }
.team-av img { width: 100%; height: 100%; object-fit: cover; }
.dbm-help { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 16px; }
.dbm-help > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; padding: 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.dbm-help span { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; color: var(--accent-ink); background: var(--accent-soft); font-size: 15px; }
.dbm-help b { color: var(--heading); font-size: 14px; }
.dbm-help small { color: var(--text-3); font-size: 12.5px; line-height: 1.45; }
.dbm-desc { display: flex; align-items: center; gap: 10px; padding: 0 20px 14px; }
.dbm-desc b { color: var(--heading); }
.dbm-desc-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); font-size: 17px; }
.dbm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; padding: 4px 20px 20px; }
.dbm-card { --c: var(--accent); position: relative; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 10%, var(--surface)), var(--surface) 60%); cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; min-width: 0; }
.dbm-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--c) 60%, transparent); }
.dbm-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 8px; }
.dbm-card-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--c); box-shadow: 0 8px 20px -8px var(--c); }
.dbm-card-act { display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.dbm-card:hover .dbm-card-act, .dbm-card:focus-within .dbm-card-act { opacity: 1; }
.dbm-card-t { color: var(--heading); font-size: 15.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbm-card-s { color: var(--text-3); font-size: 12.5px; line-height: 1.45; min-height: 18px; }
.dbm-card-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.dbm-card-f { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 12px; color: var(--text-3); }
.dbm-card-f span { display: inline-flex; align-items: center; gap: 4px; }
.dbm-card-n { font-size: 11px; color: var(--text-3); }
.dbm-tag { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.dbm-tag.warn { background: rgba(245,165,36,.15); color: var(--amber); }
.dbm-name small { font-size: 11px; }
.dbm-sum { max-height: 62vh; overflow: auto; padding: 2px; font-size: 13px; }
.dbm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dbm-stat { --c: var(--accent); display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--c) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 25%, var(--border)); }
.dbm-stat i { grid-row: span 2; font-size: 22px; color: var(--c); }
.dbm-stat b { font-size: 20px; color: var(--heading); line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbm-stat span { font-size: 12px; color: var(--text-3); }
.dbm-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; }
.dbm-kv > div { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; overflow: hidden; word-break: break-word; }
.dbm-kv > div > span:first-child { font-size: 11.5px; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.dbm-kv.sm { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.dbm-kv.sm > div { padding: 7px 9px; }
.dbm-id { font-size: 12px; color: var(--text-2); }
.dbm-sw { display: inline-block; width: 12px; height: 12px; border-radius: 4px; background: var(--sw, var(--c)); margin-right: 6px; vertical-align: -1px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.dbm-sw.big { width: 16px; height: 16px; border-radius: 50%; }
.dbm-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.dbm-team { --c: var(--accent); padding: 14px; border-radius: 14px; border: 1px solid var(--border); border-top: 3px solid var(--c); background: var(--surface); display: grid; gap: 10px; }
.dbm-team-h { display: flex; align-items: center; gap: 8px; }
.dbm-team-h b { color: var(--heading); font-size: 15px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.dbm-chips span { font-size: 11px; padding: 2px 7px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); }
.dbm-sum-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); margin: 18px 0 8px; }
.dbm-sum-table table { margin: 0; font-size: 12.5px; }
.dbm-sum-table th { white-space: nowrap; font-size: 11.5px; }
.dbm-tl { display: grid; gap: 6px; }
.dbm-tl-i { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border-radius: 10px; background: var(--surface-2); border-left: 3px solid var(--rose); }
.dbm-tl-i.ok { border-left-color: var(--mint); }
.dbm-tl-i > i { font-size: 18px; color: var(--rose); margin-top: 1px; }
.dbm-tl-i.ok > i { color: var(--mint); }
.dbm-tl-i b { color: var(--heading); }
.dbm-tl-i small { display: block; color: var(--text-3); font-size: 12px; margin-top: 2px; }
.dbm-tree { display: grid; gap: 6px; }
.dbm-tree > div > b { display: flex; align-items: center; gap: 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--text-2); }
.dbm-tree > div > div { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0 2px 18px; }
.dbm-tree span { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; padding: 2px 8px; border-radius: 6px; background: var(--surface-2); color: var(--text-2); }
.dbm-name small { flex-basis: 100%; }
@media (min-width: 1300px) { .dbm:has(.dbm-editor:not([hidden])) .dbm-table tr > :nth-child(3) { display: none !important; } }
.st-top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin-bottom: 16px; }
.st-overall, .st-mon { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); min-width: 0; }
.st-overall { --c: var(--mint); background: linear-gradient(135deg, color-mix(in srgb, var(--c) 18%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--c) 40%, var(--border)); }
.st-overall > span, .st-mon > span { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; flex: none; }
.st-overall > span { background: var(--c); color: #fff; box-shadow: 0 8px 20px -8px var(--c); }
.st-mon > span { background: var(--surface-3); color: var(--text-2); }
.st-mon.ok > span { background: var(--mint-soft); color: var(--mint); }
.st-mon.bad > span { background: var(--rose-soft); color: var(--rose); }
.st-mon.warn > span { background: var(--amber-soft); color: var(--amber); }
.st-overall b, .st-mon b { display: block; color: var(--heading); font-size: 14.5px; }
.st-overall small, .st-mon small { display: block; color: var(--text-3); font-size: 12px; line-height: 1.4; }
.st-tabs a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text-2); text-decoration: none; }
.st-tabs a.active { background: var(--accent-soft); color: var(--heading); box-shadow: inset 0 0 0 1px var(--accent-line); }
.st-tabs a b { font-size: 11px; background: var(--rose); color: #fff; border-radius: 999px; padding: 0 7px; }
.st-comps { display: flex; flex-wrap: wrap; gap: 6px; }
.st-comp-cb { position: relative; cursor: pointer; margin: 0; }
.st-comp-cb input { position: absolute; opacity: 0; pointer-events: none; }
.st-comp-cb span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--bg-2); font-size: 12.5px; font-weight: 600; color: var(--text-2); transition: all .15s; }
.st-comp-cb span::before { content: ""; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--border-2); background: var(--surface); flex: none; }
.st-comp-cb input:checked + span { border-color: var(--accent-line); background: var(--accent-soft); color: var(--heading); }
.st-comp-cb input:checked + span::before { background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.4' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center/11px no-repeat; border-color: var(--accent); }
.st-comp-cb input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.st-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 10px; text-align: center; }
.st-empty i { font-size: 34px; color: var(--mint); }
.st-empty b { color: var(--heading); }
.st-empty span { color: var(--text-3); font-size: 13px; }
.st-inc { --c: var(--amber); padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); border-left: 4px solid var(--c); background: var(--bg-2); }
.st-inc + .st-inc { margin-top: 12px; }
.st-inc-h { display: flex; align-items: flex-start; gap: 10px; }
.st-inc-h > div { flex: 1; min-width: 0; }
.st-inc-h b { display: block; color: var(--heading); font-size: 15px; }
.st-inc-h small { color: var(--text-3); font-size: 12px; }
.st-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.st-chips span { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.st-ups { margin: 10px 0; display: grid; gap: 8px; }
.st-up { position: relative; padding: 8px 34px 8px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); }
.st-up b { font-size: 12.5px; color: var(--heading); }
.st-up p { margin: 2px 0; font-size: 13px; color: var(--text-2); }
.st-up small { font-size: 11.5px; color: var(--text-3); }
.st-up-del { position: absolute; right: 4px; top: 4px; }
.st-addup, .st-edit { padding-top: 10px; border-top: 1px dashed var(--border); }
.st-edit { margin-top: 10px; }
.st-row { --c: var(--amber); display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--border); border-left: 3px solid var(--c); }
.st-row:last-child { border-bottom: 0; }
.st-row b { color: var(--heading); font-size: 13.5px; }
.st-row small { font-size: 12px; }
.st-comp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 12px; }
.st-cform { padding: 16px; margin: 0; }
.st-cnew { border-style: dashed; }
.st-cform-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-width: 0; }
.st-cform-h > div { min-width: 0; }
.st-cform-h b { display: block; color: var(--heading); }
.st-cform-h small { display: block; color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dot { --c: var(--mint); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 19px; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); }
.st-howto { padding: 12px 14px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--border); font-size: 13px; }
.st-howto b { color: var(--heading); display: flex; align-items: center; gap: 6px; }
.st-howto ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-2); }
.st-howto li + li { margin-top: 4px; }
@media (max-width: 1100px) { .st-top { grid-template-columns: minmax(0, 1fr); } }
.inv-chip { display: inline-flex; align-items: center; gap: 4px; }
.inv-chip > a:first-child { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; color: var(--mint); background: var(--mint-soft); border: 1px solid color-mix(in srgb, var(--mint) 30%, transparent); text-decoration: none; }
.inv-chip > a:first-child:hover { background: color-mix(in srgb, var(--mint) 22%, transparent); }
.inv-chip > a:first-child i { font-size: 15px; }
.inv-form { display: grid; gap: 12px; text-align: left; }
.inv-meta { font-size: 13px; color: var(--text-3); text-align: center; }
.inv-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 26px 16px; border-radius: 14px; border: 2px dashed var(--border-2); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; text-align: center; }
.inv-drop i { font-size: 34px; color: var(--accent); }
.inv-drop b { color: var(--heading); font-size: 14px; word-break: break-all; }
.inv-drop small { color: var(--text-3); font-size: 12px; }
.inv-drop.over, .inv-drop.has { border-color: var(--accent); background: var(--accent-soft); }
.inv-l { display: grid; gap: 5px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.inv-l small { color: var(--text-3); font-weight: 600; }
.inv-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); font-weight: 600; }
.inv-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.cmdk-trigger { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 8px 0 12px; margin-left: auto; min-width: 230px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); font: 600 13.5px var(--font); cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.cmdk-trigger:hover { border-color: var(--border-2); color: var(--text-2); background: var(--surface-2); }
.cmdk-trigger i { font-size: 18px; }
.cmdk-trigger span { flex: 1; text-align: left; }
.cmdk-trigger kbd, .cmdk kbd { font: 600 11px var(--mono); padding: 2px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-2); border: 1px solid var(--border-2); box-shadow: none; }
.topbar-actions { margin-left: 10px; }
.cmdk { position: fixed; inset: 0; z-index: 1080; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.cmdk-back { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 55%, rgba(0,0,0,.55)); backdrop-filter: blur(6px); opacity: 0; transition: opacity .14s; }
.cmdk-box { position: relative; width: 100%; max-width: 640px; max-height: 72vh; display: flex; flex-direction: column; border-radius: 18px; background: var(--surface); border: 1px solid var(--border-2); box-shadow: 0 40px 100px -30px rgba(0,0,0,.75), 0 0 0 1px color-mix(in srgb, var(--accent) 10%, transparent); overflow: hidden; transform: translateY(-8px) scale(.985); opacity: 0; transition: transform .16s ease, opacity .14s; }
.cmdk.on .cmdk-back { opacity: 1; }
.cmdk.on .cmdk-box { transform: none; opacity: 1; }
.cmdk-in { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.cmdk-in > i { font-size: 22px; color: var(--accent); }
.cmdk-in input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--heading); font: 600 16.5px var(--font); min-width: 0; }
.cmdk-in input::placeholder { color: var(--text-3); font-weight: 500; }
.cmdk-in kbd { cursor: pointer; }
.cmdk-spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-2); border-top-color: var(--accent); animation: spin .7s linear infinite; }
.cmdk-list { overflow-y: auto; padding: 6px 8px 10px; overscroll-behavior: contain; }
.cmdk-g { padding: 12px 10px 5px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; cursor: pointer; color: var(--text); }
.cmdk-item.on { background: var(--accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent); }
.cmdk-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; background: var(--surface-2); color: var(--text-2); font-size: 18px; overflow: hidden; }
.cmdk-ic img { width: 100%; height: 100%; object-fit: cover; }
.cmdk-item.on .cmdk-ic { background: var(--accent); color: var(--on-accent, #fff); }
.cmdk-t { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.cmdk-t b { color: var(--heading); font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-t b mark { background: transparent; color: var(--accent-ink); padding: 0; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent); text-underline-offset: 3px; }
.cmdk-t small { color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmdk-enter { opacity: 0; color: var(--accent-ink); font-size: 18px; }
.cmdk-item.on .cmdk-enter { opacity: 1; }
.cmdk-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 36px 16px; color: var(--text-3); text-align: center; }
.cmdk-empty i { font-size: 30px; color: var(--accent); }
.cmdk-empty b { color: var(--heading); }
.cmdk-foot { display: flex; align-items: center; gap: 14px; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-3); flex-wrap: wrap; }
.cmdk-foot span { display: inline-flex; align-items: center; gap: 4px; }
body.cmdk-open { overflow: hidden; }
@keyframes cmdkFlash { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 25%, 70% { box-shadow: 0 0 0 3px var(--accent), 0 0 30px -4px var(--accent); } }
.cmdk-flash { animation: cmdkFlash 1.8s ease; border-radius: 14px; }
@media (max-width: 991.98px) { .cmdk-trigger { min-width: 0; width: 38px; padding: 0; justify-content: center; } .cmdk-trigger span, .cmdk-trigger kbd { display: none; } .cmdk { padding-top: 70px; } }
@media (max-width: 600px) { .cmdk-foot span:not(.ms-auto) { display: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
.cfg-note { display: flex; align-items: flex-start; gap: 8px; padding: 11px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-2); font-size: 13px; color: var(--text-2); line-height: 1.5; word-break: break-word; }
.cfg-note > i { color: var(--accent-ink); font-size: 17px; margin-top: 1px; flex: none; }
.cfg-note code { word-break: break-all; }
.pay-list { display: grid; gap: 10px; padding: 20px 22px 6px; }
.pay-card { border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); overflow: hidden; transition: border-color .15s; }
.pay-card.on { border-color: color-mix(in srgb, var(--mint) 35%, var(--border)); }
.pay-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 16px; }
.pay-card > summary::-webkit-details-marker { display: none; }
.pay-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 19px; background: var(--surface-3); color: var(--text-2); flex: none; }
.pay-card.on .pay-ic { background: var(--mint-soft); color: var(--mint); }
.pay-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pay-t b { color: var(--heading); font-size: 14.5px; }
.pay-t small { color: var(--text-3); font-size: 12.5px; }
.pay-state { margin-left: auto; font-size: 12px; font-weight: 800; padding: 3px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-3); }
.pay-card.on .pay-state { background: var(--mint-soft); color: var(--mint); }
.pay-card > summary .chev { color: var(--text-3); font-size: 20px; transition: transform .2s; }
.pay-card:not(:has(.pay-state)) > summary .chev { margin-left: auto; }
.pay-card[open] > summary { border-bottom: 1px solid var(--border); }
.pay-card[open] > summary .chev { transform: rotate(180deg); }
.pay-card > .cfg-grid { background: var(--surface); }
.cfg-shell .pay-card > .cfg-grid { padding: 16px; }
@media (max-width: 991.98px) { .pay-list { padding: 14px 14px 4px; } }
.cfg-group.cfg-off .cfg-grid > .cfg-field:not(:first-child) { opacity: .45; }
.cfg-off-note { display: none; }
.cfg-group.cfg-off .cfg-off-note { display: flex; }
.cfg-nav-item .cfg-dot { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; flex: none; background: var(--text-3); opacity: .5; }
.cfg-nav-item .cfg-dot.on { background: var(--mint); opacity: 1; box-shadow: 0 0 0 3px var(--mint-soft); }