html[data-brand-site] {
    --primary: #7351d8; --primary-dark: #5636b6; --bg: #f5f1fd;
    --panel-soft: #f9f6ff; --line: #e7def5; --text: #2d2541; --muted: #746b84;
    --brand-glow: #e8d5ff; --brand-warm: #ffe4db; --brand-cool: #d6f1f7;
    --shadow: 0 16px 44px rgba(95, 61, 157, .1);
}
html[data-site-theme="sunset"] { --primary: #c44c80; --primary-dark: #a13264; --brand-glow: #ffdae8; --brand-warm: #ffe4be; --brand-cool: #e2dcff; }
html[data-site-theme="ocean"] { --primary: #287aab; --primary-dark: #205f8b; --brand-glow: #d5e8ff; --brand-warm: #e4ddff; --brand-cool: #c9f5e7; }
html[data-brand-site] body, html[data-brand-site] .auth-screen {
    background: radial-gradient(ellipse at 5% 5%, var(--brand-glow), transparent 55%),
        radial-gradient(ellipse at 95% 15%, var(--brand-warm), transparent 50%),
        radial-gradient(ellipse at 65% 90%, var(--brand-cool), transparent 55%), var(--bg);
    background-attachment: scroll;
}
html[data-brand-site] .auth-panel, html[data-brand-site] .role-card, html[data-brand-site] .profile-panel,
html[data-brand-site] .admin-card, html[data-brand-site] .tool-card {
    background: rgba(255,255,255,.87); border-color: rgba(255,255,255,.9); box-shadow: var(--shadow);
}
html[data-brand-site] .brand-mark { border-radius: 15px; box-shadow: 0 4px 16px #7351d824; }
html[data-brand-site] .brand h1, html[data-brand-site] .brand strong { color: var(--primary-dark); }
html[data-brand-site] .topbar { background: rgba(255,255,255,.86); border-bottom-color: var(--line); }
html[data-brand-site] :is(.sidebar, .site-header, .config-toolbar, .log-panel, .log-tag-filter, #logContent) {
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
html[data-brand-site] #rolesView .role-card.union-power-advanced::before { animation: none; opacity: .4; }
html[data-brand-site] .payment-purchase, html[data-brand-site] #promotionFloat,
html[data-brand-site] [data-open-qq-group], html[data-brand-site] .profile-community { display: none !important; }
html[data-brand-site] [hidden] { display: none !important; }
.site-admin-intro { margin-bottom: 20px; padding: 24px; border: 1px solid #e8def8; border-radius: 20px; background: linear-gradient(120deg,#f0eaff,#fff3e9 65%,#e9f8f5); color: #433452; }
.site-admin-intro h3 { margin: 0 0 8px; font-size: 23px; }
.site-admin-intro p { margin: 0; line-height: 1.8; }
.site-admin-list { display: grid; gap: 18px; }
.site-admin-card { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); min-width: 0; }
.site-admin-card header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.site-admin-card h3, .site-admin-card h4 { margin: 0 0 6px; }
.site-admin-card p { overflow-wrap: anywhere; }
.site-admin-status { font-size: 12px; border-radius: 30px; padding: 5px 12px; background: #f1edfa; color: #64547d; }
.site-admin-status.live { background: #e6f7ef; color: #20744c; }
.site-admin-form { display: grid; gap: 14px; }
.site-admin-form label { display: grid; gap: 7px; font-size: 13px; color: var(--muted); min-width: 0; }
.site-admin-form input, .site-admin-form select, .site-admin-form textarea { width: 100%; min-width: 0; }
.site-admin-form .site-inline { display: flex; align-items: center; gap: 10px; }
.site-admin-form .site-inline input[type="checkbox"] { width: auto; }
.site-admin-form .site-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.site-admin-form details { border-top: 1px solid var(--line); padding-top: 14px; }
.site-admin-form details[open] summary { margin-bottom: 14px; }
.site-brand-preview { display: flex; align-items: center; gap: 14px; padding: 24px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(115deg,#ece4ff,#ffe5dc,#dff5f4); color: #4a346f; }
.site-brand-preview[data-theme="sunset"] { background: linear-gradient(115deg,#ffdfeb,#fff1cf,#ece4ff); }
.site-brand-preview[data-theme="ocean"] { background: linear-gradient(115deg,#dbeaff,#e5e0ff,#d9f6ed); }
.site-brand-preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 14px; flex-shrink: 0; }
.site-brand-preview strong { display: block; font-size: 20px; overflow-wrap: anywhere; }
.site-brand-preview small { display: block; margin-top: 4px; }
.site-admin-card .site-secret { width: 100%; overflow-wrap: anywhere; }
.site-admin-card .site-subform { display: grid; gap: 12px; margin-top: 12px; }
@media(min-width: 1000px) { .site-admin-form .site-brand-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } }
@media(max-width: 600px) { .site-admin-card, .site-admin-intro { padding: 16px; } .site-brand-preview { padding: 18px; } }

html[data-brand-site] body {
    font-family: "Trebuchet MS", "PingFang SC", "Microsoft YaHei UI", sans-serif;
    letter-spacing: .015em;
    background-image: radial-gradient(circle at 1px 1px, #8a72b50c 1px, transparent 0),
        radial-gradient(ellipse at 5% 0%, var(--brand-glow), transparent 60%),
        radial-gradient(ellipse at 95% 20%, var(--brand-warm), transparent 55%),
        radial-gradient(ellipse at 60% 100%, var(--brand-cool), transparent 60%);
    background-color: var(--bg);
    background-size: 8px 8px, auto, auto, auto;
}
html[data-brand-site] :is(h1, h2, .brand strong) { letter-spacing: .045em; font-weight: 700; }
html[data-brand-site] .eyebrow { font-family: Georgia, serif; font-style: italic; letter-spacing: .12em; color: var(--primary-dark); }
html[data-brand-site] :is(.topbar, .app-header) { border-bottom: 1px solid #ffffffcf; box-shadow: 0 5px 22px #6450800b; }
html[data-brand-site] .nav-link { border-radius: 100px; padding: 9px 18px; }
html[data-brand-site] .nav-link.active { color: var(--primary-dark); background: #ffffffd9; box-shadow: 0 3px 12px #6a438c12, inset 0 0 0 1px #ffffff; }
html[data-brand-site] .nav-link.active::after { display: none; }
html[data-brand-site] :is(button, .ghost):not(.icon-button, .switch-control, .config-category-tab, .config-section-toggle, .nav-link, .choice-chip) { border-radius: 12px; }
html[data-brand-site] :is(.auth-panel, .profile-panel, .admin-card, .site-admin-card, .tool-card, .log-panel) {
    border-radius: 24px; border: 1px solid #ffffffd9;
    box-shadow: 0 10px 30px #6751810b, inset 0 1px #fff;
    background: linear-gradient(145deg, #fffffff5, #fffdf8e8);
}
html[data-brand-site] :is(dialog, .tutorial-window) { border-radius: 24px; border-color: var(--line); }
html[data-brand-site] :is(input:not([type="checkbox"], [type="radio"], [type="range"]), select, textarea) {
    border-radius: 10px; background-color: #fffefb; border-color: var(--line);
}
html[data-brand-site] #rolesView .role-card {
    border-radius: 20px; padding: 14px 16px; border-color: #ffffffeb;
    background: linear-gradient(140deg, #fffffff5, #fffdf8e8);
    box-shadow: 0 8px 24px #6a52840b, inset 0 2px #fff;
}
html[data-brand-site] #rolesView .role-avatar { border-radius: 16px; box-shadow: 0 3px 9px #5d428020; }
html[data-brand-site] #rolesView .role-card-name { font-weight: 700; color: var(--primary-dark); }
html[data-brand-site] :is(#rolesView, #configView, #toolsView) { --surface-line: #e6dded; --soft-blue: #f7f1ff; }
html[data-brand-site] #toolsView { --primary: #7351d8; --primary-dark: #5636b6; }
html[data-brand-site] #configView :is(.config-header, .config-toolbar) { border-radius: 18px; border-color: #ffffffd9; background: #fffdf9ed; box-shadow: 0 6px 20px #69508008; }
html[data-brand-site] #configView .config-header { padding: 14px 18px; }
html[data-brand-site] #configView .config-header h3 { color: var(--primary-dark); }
html[data-brand-site] #configView .config-category-tab { border-radius: 100px; color: var(--muted); }
html[data-brand-site] #configView .config-category-tab.active { background: var(--primary); color: #fff; box-shadow: 0 4px 9px #7351d825; }
html[data-brand-site] #configView .config-section { border-radius: 18px; border: 1px solid #eee5ef; background: #fffdfb; box-shadow: 0 4px 15px #69508006; }
html[data-brand-site] #configView .config-section-toggle { padding: 13px 16px; border-radius: 17px; color: var(--primary-dark); }
html[data-brand-site] #configView .expanded .config-section-toggle { border-radius: 17px 17px 0 0; background: linear-gradient(100deg, #f4edff, #fff5e9); }
html[data-brand-site] #configView .config-grid { padding: 12px 16px 16px; gap: 10px; }
html[data-brand-site] #configView .config-field { padding: 10px 12px; border-radius: 12px; background: #fbf8f4; border-color: #efe7df; }
html[data-brand-site] #configView .config-field :is(input, select) { border-radius: 9px; background-color: #fff; }
html[data-brand-site] #configView :is(.choice-chip, .battle-preset-card) { border-radius: 10px; border-color: var(--line); }
html[data-brand-site] #configView .switch-control { border-radius: 8px; background: #e2dce9; border-color: #d8cede; }
html[data-brand-site] #configView .switch-control .switch-thumb { border-radius: 5px; }
html[data-brand-site] #configView .switch-control.on { background: var(--primary); border-color: var(--primary); }
html[data-brand-site] #configView .config-save-bar { border-radius: 16px; border-color: var(--line); background: #fffdf9f7; }

.site-accounting summary { cursor: pointer; font-weight: 650; padding-block: 8px; }
.site-accounting { margin-bottom: 22px; }
.site-accounting-toolbar { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 6px 0 14px; }
.site-accounting-toolbar label { display: grid; gap: 6px; font-size: 12px; color: var(--muted); }
.site-accounting-toolbar input { max-width: 170px; }
.site-accounting-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.site-accounting-totals > div { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-soft); }
.site-accounting-totals span, .site-accounting-totals small { color: var(--muted); font-size: 12px; }
.site-accounting-totals strong { font-size: clamp(20px, 3vw, 27px); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.site-accounting-table { overflow-x: auto; max-width: 100%; margin: 14px 0; border: 1px solid var(--line); border-radius: 12px; }
.site-accounting-table table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 480px; font-variant-numeric: tabular-nums; }
.site-accounting-table caption { text-align: left; padding: 14px; font-weight: 650; }
.site-accounting-table :is(th, td) { padding: 11px 14px; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; }
.site-accounting-table thead { background: var(--panel-soft); }
.site-accounting-entries { display: grid; gap: 8px; }
.site-accounting-entries article { display: grid; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.site-accounting-entries article > div { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.site-accounting-entries article > div span { margin-left: auto; color: var(--primary-dark); font-size: 12px; }
.site-accounting-entries small { color: var(--muted); overflow-wrap: anywhere; }
.site-accounting-id { font-family: ui-monospace, monospace; font-size: 11px; }
.site-accounting-pagination { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
[data-accounting-content][aria-busy="true"] { opacity: .6; pointer-events: none; }

html[data-brand-site] .brand-wheel-stage {
    display: grid; justify-items: center; gap: 22px; padding: 30px 20px; border: 1px solid #fff;
    border-radius: 30px; background: linear-gradient(135deg, #fffefaef, #f4ecffcf 55%, #effbf6d9);
    box-shadow: 0 16px 50px #80639712, inset 0 1px #fff; text-align: center;
}
.brand-wheel-heading > span { font: italic 13px Georgia, serif; letter-spacing: .15em; color: var(--primary-dark); }
.brand-wheel-heading h2 { margin: 10px 0; font-size: clamp(22px, 4vw, 30px); }
.brand-wheel-heading p { color: var(--muted); margin: 0; font-size: 13px; }
.brand-wheel-shell { --wheel-size: min(330px, calc(100vw - 74px)); position: relative; width: var(--wheel-size); height: var(--wheel-size); margin: 14px 0; border-radius: 50%; border: 10px solid #fffaf0; box-shadow: 0 0 0 1px #e8dbd3, 0 14px 30px #6e4b8820; }
.brand-wheel-rotor { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--wheel-angle, 0deg)); }
.brand-wheel-prize { position: absolute; left: 50%; top: 50%; display: grid; gap: 5px; color: #44334d; white-space: nowrap; transform: translate(-50%, -50%) rotate(var(--sector-angle)) translateY(calc(var(--wheel-size) * -.33)) rotate(calc(-1 * var(--sector-angle))); }
.brand-wheel-prize b { font-size: clamp(12px, 3.6vw, 16px); }
.brand-wheel-prize small { font-size: 10px; opacity: .7; }
.brand-wheel-pointer { position: absolute; left: 50%; top: -20px; z-index: 3; width: 24px; height: 37px; transform: translateX(-50%); background: var(--primary-dark); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 3px #5636b630); }
.brand-wheel-hub { display: grid; place-content: center; position: absolute; top: 50%; left: 50%; width: 74px; height: 74px; transform: translate(-50%, -50%); border-radius: 50%; border: 5px solid #fff9e9; background: #fffdf6; color: var(--primary-dark); font: italic bold 15px/1.25 Georgia, serif; box-shadow: 0 4px 10px #6e4b8820; }
html[data-brand-site] .brand-wheel-start { min-height: 48px; min-width: 190px; padding: 12px 26px; border-radius: 100px !important; background: linear-gradient(115deg, var(--primary), var(--primary-dark)); box-shadow: 0 6px 18px #7351d825; }
.brand-wheel-result { width: min(100%, 560px); color: var(--muted); }
.brand-wheel-result :is(.fortune-claimed, .fortune-claim-box, .fortune-claim-note) { text-align: left; background: #ffffffc9; border-radius: 16px; }
html[data-brand-site] .fortune-history { border-radius: 22px; background: #fffdf9e8; border-color: #eee5ef; }
html[data-brand-site] .fortune-history-row { grid-template-columns: 100px 85px minmax(90px, 1fr) minmax(100px, 1fr); }
html[data-brand-site] .fortune-history-tier { color: var(--primary-dark); }
@media(max-width: 600px) {
    html[data-brand-site] .nav-link { padding: 7px 12px; }
    html[data-brand-site] #rolesView .role-card { border-radius: 17px; padding: 12px; }
    html[data-brand-site] #configView .config-section-toggle { padding: 11px 12px; }
    html[data-brand-site] #configView .config-grid { padding: 10px; }
    html[data-brand-site] #configView .config-field { padding: 8px; }
    html[data-brand-site] .brand-wheel-stage { padding: 24px 10px; gap: 16px; border-radius: 22px; }
    html[data-brand-site] .fortune-history-row { grid-template-columns: minmax(0, 1fr) auto; }
    .site-accounting-totals { grid-template-columns: minmax(0, 1fr); }
    .site-accounting-totals > div { padding: 12px; gap: 6px; }
}