:root {
    --font-sans: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "JetBrains Mono", "Cascadia Code", Consolas, monospace;
    --font-mc: "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
    --text-2xs: 0.6875rem; 
    --text-xs: 0.75rem;    
    --text-sm: 0.875rem;   
    --text-base: 1rem;     
    --text-lg: 1.125rem;   
    --text-xl: 1.25rem;    
    --text-2xl: 1.5rem;    
    --text-3xl: 1.875rem;  
    --text-4xl: 2.25rem;   
    --leading-tight: 1.2;   
    --leading-snug: 1.4;    
    --leading-normal: 1.6;  
    --tracking-tight: -0.02em;  
    --tracking-caps: 0.12em;    
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);   
    --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);  
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);    
    --dur-fast: 0.14s;   
    --dur-base: 0.22s;   
    --dur-slow: 0.36s;   
    --r-sm: 0.375rem;  
    --r-md: 0.5rem;    
    --r-lg: 0.75rem;   
    --r-xl: 1rem;      
    --bg: 236 239 242;
    --surface: 250 251 253;
    --surface-2: 228 232 237;
    --border: 203 210 219;
    --fg: 23 27 33;         
    --muted: 84 93 105;     
    --primary: 11 122 86;
    --primary-soft: 220 238 231;
    --primary-fg: 255 255 255;
    --grad-from: 240 243 246;
    --grad-to: 230 234 239;
    --grid-line: 23 27 33;
    --hi: 255 255 255;
    --glass: 250 251 253;
    --glass-alpha: 0.72;
    --glass-border: 203 210 219;
    --glass-border-alpha: 0.9;
    --success: 22 130 84;
    --warning: 168 116 32;
    --danger: 192 60 66;
    --shadow: 20 30 42;
    --mc-name: 23 27 33;
    --mc-green: 17 105 70;
    --mc-red: 185 53 59;
    --mc-aqua: 13 108 134;
    --mc-gold: 150 104 26;
    --mc-gray: 104 113 124;
    color-scheme: light;
}
.dark {
    --bg: 19 21 24;
    --surface: 27 30 34;
    --surface-2: 37 41 46;
    --border: 48 53 60;
    --fg: 233 236 240;
    --muted: 150 158 169;
    --primary: 46 188 138;   
    --primary-soft: 25 49 41;
    --primary-fg: 7 11 9;
    --grad-from: 25 27 31;
    --grad-to: 19 21 24;
    --grid-line: 222 227 232;
    --hi: 255 255 255;
    --glass: 24 27 31;
    --glass-alpha: 0.84;
    --glass-border: 255 255 255;
    --glass-border-alpha: 0.07;
    --success: 50 190 134;
    --warning: 214 164 86;
    --danger: 226 110 112;
    --shadow: 0 0 0;
    --mc-name: 255 255 255;
    --mc-green: 85 255 85;
    --mc-red: 255 85 85;
    --mc-aqua: 85 255 255;
    --mc-gold: 255 170 0;
    --mc-gray: 170 170 170;
    color-scheme: dark;
}
* {
    border-color: rgb(var(--border));
}
html {
    font-size: 112.5%;
    scroll-behavior: smooth;
}
@media (max-width: 639px) {
    html { font-size: 106.25%; }
}
body {
    background-color: rgb(var(--bg));
    color: rgb(var(--fg));
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    font-optical-sizing: auto;
    font-kerning: normal;
    font-feature-settings: "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    text-wrap: pretty;
    transition: background-color 0.6s ease, color 0.6s ease;
}
.dark body {
    line-height: 1.65;
    letter-spacing: 0.006em;
}
h1, h2, h3, h4 {
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
}
h1:not(.font-mc), h2:not(.font-mc), h3:not(.font-mc) {
    font-weight: 700;
}
h4:not(.font-mc) {
    font-weight: 600;
}
p {
    text-wrap: pretty;
}
.flow-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background-color: rgb(var(--grad-to));
    background-image:
        linear-gradient(to right, rgb(var(--grid-line) / 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(var(--grid-line) / 0.045) 1px, transparent 1px),
        linear-gradient(180deg, rgb(var(--grad-from)), rgb(var(--grad-to)));
    background-size: 44px 44px, 44px 44px, 100% 100%;
    background-position: center top;
    transition: background-color 0.6s ease;
}
.flow-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(115% 70% at 50% -12%, rgb(var(--primary) / 0.06), transparent 58%),
        radial-gradient(120% 120% at 50% 46%, transparent 62%, rgb(var(--grad-to) / 0.55));
}
.dark .flow-bg {
    background-image: linear-gradient(180deg, rgb(var(--grad-from)), rgb(var(--grad-to)));
    background-size: 100% 100%;
    background-position: center top;
}
.dark .flow-bg::before {
    background:
        radial-gradient(130% 125% at 50% 50%, transparent 62%, rgb(var(--grad-to) / 0.6));
}
::selection {
    background: rgb(var(--primary) / 0.24);
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgb(var(--border));
    border-radius: 9999px;
    border: 2px solid rgb(var(--bg));
}
::-webkit-scrollbar-thumb:hover {
    background: rgb(var(--muted) / 0.6);
}
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(10px); } }
::view-transition-old(root) { animation: vt-out 0.2s var(--ease-out-quint) both; }
::view-transition-new(root) { animation: vt-in 0.34s var(--ease-out-quint) both; }
.btn, .btn-primary, .btn-ghost {
    transition: transform var(--dur-fast) var(--ease-out-quint),
                box-shadow var(--dur-base) var(--ease-out-quart),
                background-color var(--dur-base), border-color var(--dur-base),
                color var(--dur-base), filter var(--dur-base);
}
.btn:hover:not(:disabled), .btn-ghost:hover:not(:disabled) { transform: translateY(-1px); }
.btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px rgb(var(--primary) / 0.7);
}
.btn:active:not(:disabled),
.btn-ghost:active:not(:disabled),
.btn-primary:active:not(:disabled) { transform: translateY(0) scale(0.97); }
aside nav a[href] {
    transition: color var(--dur-base), background-color var(--dur-base),
                transform var(--dur-base) var(--ease-out-quint);
}
aside nav a[href]:hover { transform: translateX(3px); }
.app-shell aside nav {
    scrollbar-width: thin;
    scrollbar-color: rgb(var(--fg) / 0.2) transparent;
}
.app-shell aside nav::-webkit-scrollbar { width: 8px; }
.app-shell aside nav::-webkit-scrollbar-track { background: transparent; }
.app-shell aside nav::-webkit-scrollbar-thumb {
    background: rgb(var(--fg) / 0.16);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
.app-shell aside nav:hover::-webkit-scrollbar-thumb {
    background: rgb(var(--fg) / 0.28);
    background-clip: padding-box;
}
.link-underline { position: relative; }
.link-underline::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -3px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-base) var(--ease-out-quint);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); }
.hover-lift { transition: transform var(--dur-base) var(--ease-out-quint), box-shadow var(--dur-base) var(--ease-out-quart); }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -24px rgb(var(--shadow) / 0.4); }
.press { transition: transform var(--dur-fast) var(--ease-out-quint); }
.press:active { transform: scale(0.97); }
table tbody tr { transition: background-color var(--dur-fast) ease; }
table tbody tr:hover { background-color: rgb(var(--fg) / 0.035); }
@keyframes stat-bump {
    0% { background-color: rgb(var(--primary) / 0); }
    28% { background-color: rgb(var(--primary) / 0.18); }
    100% { background-color: rgb(var(--primary) / 0); }
}
.stat-bump { animation: stat-bump 0.7s var(--ease-out-quart); border-radius: 0.375rem; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .btn, .btn-primary, .btn-ghost { transition: background-color var(--dur-base), border-color var(--dur-base), color var(--dur-base); }
    .btn:hover, .btn-ghost:hover, .btn-primary:hover,
    .btn:active, .btn-ghost:active, .btn-primary:active { transform: none; }
    aside nav a[href] { transition: color var(--dur-base), background-color var(--dur-base); }
    aside nav a[href]:hover { transform: none; }
    .link-underline::after { transition: none; }
    .hover-lift, .press { transition: none; }
    .hover-lift:hover, .press:active { transform: none; }
    .stat-bump { animation: none; }
}
.ease-out-quart { transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1); }
.card {
    border-radius: var(--r-lg);
    background: rgb(var(--surface));
    border: 1px solid rgb(var(--border));
    box-shadow: 0 1px 2px rgb(var(--shadow) / 0.05), 0 14px 34px -22px rgb(var(--shadow) / 0.30);
}
.acct-console {
    background: linear-gradient(to bottom, rgb(var(--surface)), rgb(var(--surface-2)));
    box-shadow: inset 0 1px 0 rgb(var(--hi) / 0.6), 0 12px 30px -20px rgb(var(--shadow) / 0.35);
}
.dark .acct-console {
    background: linear-gradient(to bottom, #20242a, #15181c);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 14px 34px -20px rgb(0 0 0 / 0.5);
}
.glass {
    background: rgb(var(--glass) / var(--glass-alpha));
    backdrop-filter: blur(10px) saturate(140%);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    border: 1px solid rgb(var(--glass-border) / var(--glass-border-alpha));
    box-shadow: 0 14px 40px -22px rgb(var(--shadow) / 0.4);
}
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    border-radius: 9999px;
    border: 1px solid rgb(var(--border));
    background: rgb(var(--surface-2) / 0.7);
    padding: 0.125rem 0.625rem;
    font-size: var(--text-xs);
    line-height: 1rem;
    font-weight: 500;
    color: rgb(var(--muted));
}
.idx {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: rgb(var(--muted));
    font-variant-numeric: tabular-nums slashed-zero;
}
.btn, .btn-primary, .btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border-radius: var(--r-md);
    padding: 0.7rem 1.15rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    font-weight: 600;
    cursor: pointer;
}
.btn:focus, .btn-primary:focus, .btn-ghost:focus { outline: none; }
.btn:focus-visible, .btn-primary:focus-visible, .btn-ghost:focus-visible {
    box-shadow: 0 0 0 2px rgb(var(--bg)), 0 0 0 4px rgb(var(--primary) / 0.55);
}
.btn:disabled, .btn-primary:disabled, .btn-ghost:disabled { cursor: not-allowed; opacity: 0.5; }
.btn-primary {
    background: rgb(var(--primary));
    color: rgb(var(--primary-fg));
    border: 1px solid rgb(var(--primary));
    box-shadow: 0 1px 0 rgb(var(--hi) / 0.25) inset, 0 10px 24px -12px rgb(var(--primary) / 0.7);
}
.dark .btn-primary { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 6px 18px -12px rgb(0 0 0 / 0.7); }
.dark .btn-primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1), 0 12px 26px -14px rgb(0 0 0 / 0.72); }
.dark .btn-primary:focus-visible { box-shadow: 0 0 0 2px rgb(var(--bg)), 0 0 0 4px rgb(var(--primary) / 0.5); }
.btn-primary:hover { filter: brightness(1.06); }
.btn-ghost {
    border: 1px solid rgb(var(--border));
    color: rgb(var(--fg));
    background: rgb(var(--surface) / 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.btn-ghost:hover { border-color: rgb(var(--primary) / 0.6); color: rgb(var(--primary)); }
.gradient-text { color: rgb(var(--primary)); }
.font-mc {
    font-family: var(--font-mc);
    font-weight: 800;
    letter-spacing: -0.01em;
}
.name-pixel {
    --shine-base: rgb(var(--fg));
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: -0.005em;
    background-image: linear-gradient(105deg,
        var(--shine-base) 0%, var(--shine-base) 42%,
        #fff 50%,
        var(--shine-base) 58%, var(--shine-base) 100%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 180% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: name-shine 3.8s ease-in-out infinite;
}
.name-pixel.is-primary { --shine-base: rgb(var(--primary)); }
.name-pixel.is-success { --shine-base: rgb(var(--success)); }
@keyframes name-shine {
    0%   { background-position: 175% 0; }
    32%  { background-position: -35% 0; }
    100% { background-position: -35% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .name-pixel {
        animation: none;
        background: none;
        color: var(--shine-base);
        -webkit-text-fill-color: var(--shine-base);
    }
}
.font-mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
    letter-spacing: -0.01em;
}
.tnum {
    font-variant-numeric: tabular-nums;
}
table {
    font-variant-numeric: tabular-nums;
}
code, kbd, samp, pre {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
}
.input {
    width: 100%;
    border-radius: var(--r-md);
    border: 1px solid rgb(var(--border));
    background: rgb(var(--bg));
    padding: 0.6rem 0.85rem;
    font-size: var(--text-sm);
    line-height: 1.25rem;
    color: rgb(var(--fg));
    outline: none;
    font-variant-numeric: tabular-nums;
    transition: border-color 0.15s, box-shadow 0.15s, background-color 0.15s;
}
.input::placeholder {
    color: rgb(var(--muted));
}
.input:focus {
    border-color: rgb(var(--primary));
    box-shadow: 0 0 0 3px rgb(var(--primary) / 0.18);
}
.reg { position: relative; }
.reg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    border-radius: inherit;
    --tk: 14px;   
    --tw: 1.5px;  
    --tc: rgb(var(--primary) / 0.85);
    background:
        linear-gradient(var(--tc), var(--tc)) left 8px top 8px / var(--tk) var(--tw) no-repeat,
        linear-gradient(var(--tc), var(--tc)) left 8px top 8px / var(--tw) var(--tk) no-repeat,
        linear-gradient(var(--tc), var(--tc)) right 8px top 8px / var(--tk) var(--tw) no-repeat,
        linear-gradient(var(--tc), var(--tc)) right 8px top 8px / var(--tw) var(--tk) no-repeat,
        linear-gradient(var(--tc), var(--tc)) left 8px bottom 8px / var(--tk) var(--tw) no-repeat,
        linear-gradient(var(--tc), var(--tc)) left 8px bottom 8px / var(--tw) var(--tk) no-repeat,
        linear-gradient(var(--tc), var(--tc)) right 8px bottom 8px / var(--tk) var(--tw) no-repeat,
        linear-gradient(var(--tc), var(--tc)) right 8px bottom 8px / var(--tw) var(--tk) no-repeat;
}
.seal {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: rgb(var(--surface));
    box-shadow:
        0 0 0 1px rgb(var(--border)),
        inset 0 0 0 3px rgb(var(--surface)),
        inset 0 0 0 4px rgb(var(--primary) / 0.35),
        0 10px 26px -14px rgb(var(--shadow) / 0.5);
}
.seal-ring {
    position: absolute;
    inset: -7px;
    border-radius: 9999px;
    border: 1.5px dashed rgb(var(--primary) / 0.5);
    animation: seal-rotate 16s linear infinite;
}
@keyframes seal-rotate { to { transform: rotate(360deg); } }
.leader { display: flex; align-items: baseline; gap: 0.6rem; }
.leader-dots {
    flex: 1 1 auto;
    align-self: stretch;
    border-bottom: 1px dotted rgb(var(--border));
    transform: translateY(-0.32em);
}
.rule { height: 1px; background: rgb(var(--border)); }
.ink-panel {
    position: relative;
    background:
        radial-gradient(130% 120% at 0% 0%, rgb(var(--primary) / 0.18), transparent 46%),
        linear-gradient(180deg, #121a1e, #0a0e11);
    color: #e7ece9;
}
.ink-panel .idx { color: rgb(255 255 255 / 0.5); }
.ink-em { color: #36d29b; }
.px-corners {
    --s: 5px;
    clip-path: polygon(
        0 calc(var(--s)*2), var(--s) calc(var(--s)*2), var(--s) var(--s), calc(var(--s)*2) var(--s), calc(var(--s)*2) 0,
        calc(100% - var(--s)*2) 0, calc(100% - var(--s)*2) var(--s), calc(100% - var(--s)) var(--s), calc(100% - var(--s)) calc(var(--s)*2), 100% calc(var(--s)*2),
        100% calc(100% - var(--s)*2), calc(100% - var(--s)) calc(100% - var(--s)*2), calc(100% - var(--s)) calc(100% - var(--s)), calc(100% - var(--s)*2) calc(100% - var(--s)), calc(100% - var(--s)*2) 100%,
        calc(var(--s)*2) 100%, calc(var(--s)*2) calc(100% - var(--s)), var(--s) calc(100% - var(--s)), var(--s) calc(100% - var(--s)*2), 0 calc(100% - var(--s)*2)
    );
}
.dither {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgb(255 255 255 / 0.05) 1px, transparent 1px);
    background-size: 4px 4px;
}
@media (prefers-reduced-motion: reduce) {
    .seal-ring { animation: none; }
}
.live-bar {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background: rgb(var(--fg) / 0.07);
}
.live-bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgb(var(--primary) / 0.1);
}
.live-seg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    border-radius: 9999px;
    background: linear-gradient(90deg, transparent, rgb(var(--primary)) 50%, transparent);
    box-shadow: 0 0 16px rgb(var(--primary) / 0.55);
    animation: live-slide 2s linear infinite;
    will-change: transform;
}
.live-seg-2 {
    width: 34%;
    opacity: 0.7;
    box-shadow: none;
    animation-delay: -1s;
}
@keyframes live-slide {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
    .live-seg { animation-duration: 4s; }
}
@keyframes overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes modal-pop {
    0% { opacity: 0; transform: translateY(16px); }
    100% { opacity: 1; transform: translateY(0); }
}
@keyframes modal-out {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(16px); }
}
.overlay-in { animation: overlay-in 0.24s ease both; }
.overlay-out { animation: overlay-out 0.24s ease both; }
.modal-pop { animation: modal-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) both; }
.modal-out { animation: modal-out 0.24s cubic-bezier(0.22, 1, 0.36, 1) both; }
.preview-wrap {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}
.preview-wrap.is-show {
    opacity: 1;
    visibility: visible;
}
.preview-dim {
    opacity: 0;
    transition: opacity 0.25s ease;
}
.preview-wrap.is-pinned .preview-dim {
    opacity: 1;
}
.preview-card {
    left: 50%;
    top: 50%;
    width: min(640px, 92vw);
    transform: translate(-50%, -50%) scale(0.95);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}
.preview-wrap.is-show .preview-card {
    transform: translate(-50%, -50%) scale(1);
}
@media (min-width: 1024px) {
    .acct-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
        align-content: start;
    }
    .acct-grid > *:only-child {
        grid-column: 1 / -1;
    }
}
@keyframes tab-content-in {
    from { opacity: 0; transform: translateY(4px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.tab-content-in { animation: tab-content-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .tab-content-in { animation: none; }
}
@keyframes ship-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-9px); }
}
@keyframes ship-fill {
    from { width: 0%; }
    to { width: 100%; }
}
@keyframes ship-ring {
    0% { transform: scale(0.85); opacity: 0.55; }
    100% { transform: scale(1.7); opacity: 0; }
}
.ship-bob { animation: ship-bob 1s ease-in-out infinite; }
.ship-fill { animation: ship-fill 2.1s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
.ship-ring { animation: ship-ring 1.4s ease-out infinite; }
@keyframes fade-up {
    0% { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
}
.animate-fade-up { animation: fade-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce) {
    .animate-fade-up { animation: none; }
}
.logo-cat { filter: invert(1); }
.dark .logo-cat { filter: invert(0); }
.theme-icon-sun, .theme-icon-moon {
    transition: opacity var(--dur-base) ease, transform var(--dur-slow) var(--ease-out-quint);
}
.theme-icon-sun { opacity: 1; transform: scale(1) rotate(0); }
.theme-icon-moon { opacity: 0; transform: scale(0) rotate(-90deg); }
.dark .theme-icon-sun { opacity: 0; transform: scale(0) rotate(90deg); }
.dark .theme-icon-moon { opacity: 1; transform: scale(1) rotate(0); }
@media (prefers-reduced-motion: reduce) {
    .theme-icon-sun, .theme-icon-moon { transition: opacity var(--dur-base) ease; }
}
.admin-aside { transition: width 0.2s ease; }
.admin-aside .toggle-ico { transition: transform 0.2s ease; }
@media (min-width: 768px) {
    .sidebar-collapsed .admin-aside { width: 4.25rem; }
    .sidebar-collapsed .admin-aside .nav-label,
    .sidebar-collapsed .admin-aside .nav-section,
    .sidebar-collapsed .admin-aside .brand-text { display: none; }
    .sidebar-collapsed .admin-aside .nav-link,
    .sidebar-collapsed .admin-aside .brand-row,
    .sidebar-collapsed .admin-aside .sidebar-toggle {
        justify-content: center;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        gap: 0;
    }
    .sidebar-collapsed .admin-aside .sidebar-toggle .toggle-ico { transform: rotate(180deg); }
}
.nav-chevron { transition: transform 0.2s ease; }
[data-nav-collapsed="1"] .nav-chevron { transform: rotate(-90deg); }
@media (min-width: 768px) {
    .nav-item-hidden { display: none !important; }
}
.tier-row {
    position: relative;
}
.tier-shine {
    overflow: hidden;
}
.tier-shine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    background: linear-gradient(100deg, transparent 0%, rgb(var(--hi) / 0.18) 45%, rgb(var(--primary) / 0.12) 55%, transparent 100%);
    transform: translateX(-160%) skewX(-12deg);
    animation: tier-shine 3.8s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes tier-shine {
    0%        { transform: translateX(-160%) skewX(-12deg); }
    55%, 100% { transform: translateX(320%) skewX(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
    .tier-shine::after { animation: none; opacity: 0; }
}
#app-toast .toast-pop {
    transform-origin: top center;
    animation: toast-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}
#app-toast .toast-pop.toast-out { animation: toast-out 0.16s cubic-bezier(0.7, 0, 0.84, 0) both; }
#app-toast .toast-ic {
    display: inline-flex;
    animation: toast-ic-in 0.24s cubic-bezier(0.16, 1, 0.3, 1) 0.04s both;
}
@keyframes toast-in {
    0%   { opacity: 0; transform: translateY(-12px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toast-out {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
@keyframes toast-ic-in {
    0%   { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    #app-toast .toast-pop { animation: toast-fade 0.12s ease both; }
    #app-toast .toast-pop.toast-out { animation: toast-fade-out 0.12s ease both; }
    #app-toast .toast-ic { animation: none; }
}
@keyframes toast-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes toast-fade-out { from { opacity: 1; } to { opacity: 0; } }
.cf-box:focus-visible {
    outline: none;
    border-color: rgb(var(--primary));
    box-shadow: 0 0 0 2px rgb(var(--primary) / 0.35);
}
.cf-box.cf-copied {
    border-color: rgb(var(--success)) !important;
    box-shadow: 0 0 0 1px rgb(var(--success) / 0.5);
}
.acc-chev { transition: transform 0.2s ease; }
.acct-item[data-acc-open="0"] .acc-chev { transform: rotate(-90deg); }
.acct-item[data-acc-open="0"] [data-acc-body] { display: none; }
.vlog-chev { transition: transform 0.2s ease; }
[data-vlog][data-open="0"] [data-vlog-body] { display: none; }
[data-vlog][data-open="1"] .vlog-chev { transform: rotate(180deg); }
@keyframes apply-pop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }
@keyframes apply-draw { to { stroke-dashoffset: 0; } }
@keyframes apply-shake {
    0%, 100% { transform: translateX(0); }
    18% { transform: translateX(-7px); }
    36% { transform: translateX(6px); }
    54% { transform: translateX(-4px); }
    72% { transform: translateX(3px); }
    88% { transform: translateX(-1px); }
}
.apply-check { animation: apply-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.apply-check .apply-check-ring { stroke-dasharray: 63; stroke-dashoffset: 63; animation: apply-draw 0.5s ease-out 0.06s forwards; }
.apply-check .apply-check-tick { stroke-dasharray: 16; stroke-dashoffset: 16; animation: apply-draw 0.34s cubic-bezier(0.65, 0, 0.35, 1) 0.46s forwards; }
.apply-shake { animation: apply-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
@media (prefers-reduced-motion: reduce) {
    .apply-check, .apply-check .apply-check-ring, .apply-check .apply-check-tick, .apply-shake { animation: none; }
    .apply-check .apply-check-ring, .apply-check .apply-check-tick { stroke-dashoffset: 0; }
}
.otp-cell {
    flex: 1 1 0;
    min-width: 0;
    max-width: 3.25rem;
    height: 3.25rem;
    border-radius: 0.875rem;
    border: 1px solid rgb(var(--border));
    background: rgb(var(--bg));
    color: rgb(var(--fg));
    text-align: center;
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    caret-color: rgb(var(--primary));
    outline: none;
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}
.otp-cell:hover { border-color: rgb(var(--fg) / 0.28); }
.otp-cell:focus {
    border-color: rgb(var(--primary));
    box-shadow: 0 0 0 3px rgb(var(--primary) / 0.22);
}
.otp-cell[data-filled="1"] {
    border-color: rgb(var(--primary) / 0.5);
    background: rgb(var(--primary) / 0.06);
}
.otp-cell:disabled { cursor: default; opacity: 0.75; }
.otp-cell.otp-ok {
    border-color: rgb(var(--success)) !important;
    background: rgb(var(--success) / 0.12);
    color: rgb(var(--success));
    box-shadow: none;
}
.otp-cell.otp-err {
    border-color: rgb(var(--danger)) !important;
    background: rgb(var(--danger) / 0.08);
    box-shadow: none;
}
@keyframes code-reveal {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.code-reveal { animation: code-reveal 0.36s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes otp-in {
    from { opacity: 0; transform: translateY(10px) scale(0.86); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.code-reveal .otp-cell {
    animation: otp-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: calc(130ms + var(--i, 0) * 45ms);
}
@media (prefers-reduced-motion: reduce) {
    .otp-cell { transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease; }
    .otp-shake { animation: none; }
    .code-reveal { animation: code-reveal 0.01s linear both; }
    .code-reveal .otp-cell { animation: none; }
}
.payout-field { position: relative; }
.payout-field > input { transition: border-color 0.18s ease, background-color 0.18s ease, padding 0.18s ease; }
.payout-field > .payout-check {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%) scale(0.6);
    opacity: 0;
    color: rgb(var(--success));
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.22s cubic-bezier(0.25, 1, 0.5, 1);
}
.payout-field.is-bound > input {
    border-color: rgb(var(--success)) !important;
    background: rgb(var(--success) / 0.08);
    padding-right: 2.75rem;
}
.payout-field.is-bound > .payout-check {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}
@keyframes bind-pop {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}
.bind-pop { animation: bind-pop 0.32s cubic-bezier(0.25, 1, 0.5, 1) both; }
@keyframes bind-flash {
    0%   { box-shadow: 0 0 0 0 rgb(var(--success) / 0); }
    28%  { box-shadow: 0 0 0 3px rgb(var(--success) / 0.32); }
    100% { box-shadow: 0 0 0 0 rgb(var(--success) / 0); }
}
.bind-flash { animation: bind-flash 0.7s ease-out both; }
@media (prefers-reduced-motion: reduce) {
    .payout-field > input { transition: border-color 0.18s ease, background-color 0.18s ease; }
    .payout-field > .payout-check { transition: opacity 0.15s ease; transform: translateY(-50%) scale(1); }
    .bind-pop { animation: bind-pop 0.01s linear both; }
    .bind-flash { animation: none; }
}
.grp-card { transition: border-color 0.2s ease, background-color 0.2s ease; }
.grp-card[data-open="1"] {
    border-color: rgb(var(--primary) / 0.5);
    background: rgb(var(--primary) / 0.04);
}
.grp-head { -webkit-tap-highlight-color: transparent; }
.grp-ic { transition: background-color 0.2s ease, color 0.2s ease; }
.grp-card[data-open="1"] .grp-ic {
    background: rgb(var(--primary) / 0.14);
    color: rgb(var(--primary));
}
.grp-chev {
    color: rgb(var(--muted));
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.2s ease;
}
.grp-card[data-open="1"] .grp-chev {
    transform: rotate(180deg);
    color: rgb(var(--primary));
}
.grp-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.32s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.24s ease;
}
.grp-card[data-open="1"] .grp-panel {
    grid-template-rows: 1fr;
    opacity: 1;
}
.grp-panel > .grp-panel-clip {
    overflow: hidden;
    min-height: 0;
}
@media (prefers-reduced-motion: reduce) {
    .grp-chev { transition: color 0.2s ease; }
    .grp-panel { transition: opacity 0.16s ease; }
}
.reg-anim .input {
    transition: border-color 0.15s ease, box-shadow 0.18s ease, background-color 0.18s ease, padding 0.18s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.reg-anim .input:focus { transform: translateY(-1px); }
.reg-anim .btn-primary { transition: filter 0.18s ease, transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease; }
.reg-anim .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px rgb(var(--primary) / 0.7);
}
.reg-anim .btn-primary:active { transform: translateY(0) scale(0.98); }
.reg-anim .grp-head { transition: background-color 0.18s ease; }
.reg-anim .grp-head:hover { background-color: rgb(var(--fg) / 0.03); }
@media (prefers-reduced-motion: reduce) {
    .reg-anim .input:focus,
    .reg-anim .btn-primary:hover,
    .reg-anim .btn-primary:active,
    .reg-anim .reg-tap:active:not(:disabled) { transform: none; }
}
.lang-switch > summary {
    list-style: none;
    user-select: none;
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary::marker { content: ""; }
.lang-switch[open] > summary .h-3\.5 { transform: rotate(180deg); }
.lang-switch > .lang-menu {
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.lang-switch[open] > .lang-menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.lang-switch[open] > summary::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    display: block;
}
.app-shell .overflow-x-auto > table { min-width: 44rem; }
.app-shell .grid > * { min-width: 0; }
@media (max-width: 767px) {
    .app-shell .table-stack { min-width: 0 !important; }
    .app-shell .table-stack thead { display: none; }
    .app-shell .table-stack tbody tr { display: block; padding: 4px 14px; }
    .app-shell .table-stack tbody tr + tr { border-top: 1px solid rgb(var(--border)); }
    .app-shell .table-stack tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 7px 0 !important;
        text-align: right;
        white-space: normal !important;
        border: 0 !important;
    }
    .app-shell .table-stack tbody td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: var(--text-xs);
        font-weight: 500;
        color: rgb(var(--muted));
        text-align: left;
        white-space: nowrap;
    }
    .app-shell .table-stack tbody td > * { min-width: 0; text-align: right; }
    .app-shell .table-stack tbody td[colspan] { justify-content: center; text-align: center; padding: 22px 0 !important; }
    .app-shell .table-stack tbody td[colspan]::before { content: none; }
}
.pv-toggle { display: none !important; }
@media (min-width: 1024px) { .pv-toggle { display: inline-flex !important; } }