:root{--color-bg: #0e0e10;--color-bg-elevated: #1f1f23;--color-surface: #18181b;--color-surface-hover: #26262c;--color-border: #2d2d36;--color-border-strong: #3a3a44;--color-text: #efeff1;--color-text-muted: #adadb8;--color-text-subtle: #71717a;--color-text-inverse: #0e0e10;--color-accent: #a970ff;--color-accent-hover: #bf94ff;--color-accent-active: #9147ff;--color-accent-soft: rgba(169, 112, 255, .12);--color-accent-contrast: #ffffff;--color-success: #00d18c;--color-success-soft: rgba(0, 209, 140, .12);--color-warning: #f59e0b;--color-warning-soft: rgba(245, 158, 11, .12);--color-danger: #f87171;--color-danger-soft: rgba(248, 113, 113, .12);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;--font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: .9375rem;--font-size-lg: 1.125rem;--font-size-xl: 1.375rem;--font-size-2xl: 1.75rem;--line-height: 1.5;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--radius-sm: 4px;--radius: 8px;--radius-lg: 12px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);--shadow: 0 4px 12px rgba(0, 0, 0, .35);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .4);--duration: .2s;--easing: cubic-bezier(.4, 0, .2, 1)}[data-theme=light]{--color-bg: #f7f7f8;--color-bg-elevated: #ffffff;--color-surface: #ffffff;--color-surface-hover: #f4f4f5;--color-border: #e4e4e7;--color-border-strong: #d4d4d8;--color-text: #18181b;--color-text-muted: #52525b;--color-text-subtle: #a1a1aa;--color-text-inverse: #ffffff;--color-accent: #6441a5;--color-accent-hover: #7a55c2;--color-accent-active: #4b2e83;--color-accent-soft: rgba(100, 65, 165, .1);--color-success: #047857;--color-success-soft: rgba(4, 120, 87, .1);--color-warning: #b45309;--color-warning-soft: rgba(180, 83, 9, .1);--color-danger: #b91c1c;--color-danger-soft: rgba(185, 28, 28, .1);--shadow-sm: 0 1px 2px rgba(0, 0, 0, .06);--shadow: 0 4px 12px rgba(0, 0, 0, .08);--shadow-lg: 0 10px 30px rgba(0, 0, 0, .12)}*,*:before,*:after{box-sizing:border-box}html{color-scheme:dark;-webkit-text-size-adjust:100%}[data-theme=light]{color-scheme:light}html,body,#root{margin:0;padding:0;min-height:100vh}body{font-family:var(--font-sans);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background-color var(--duration) var(--easing),color var(--duration) var(--easing)}h1,h2,h3,h4,h5,h6{margin:0 0 var(--space-4);font-weight:var(--font-weight-semibold);line-height:1.25;color:var(--color-text);letter-spacing:-.01em}h1{font-size:var(--font-size-2xl)}h2{font-size:var(--font-size-xl)}h3{font-size:var(--font-size-lg)}p{margin:0 0 var(--space-3)}small,.muted{color:var(--color-text-muted);font-size:var(--font-size-sm)}code{font-family:var(--font-mono);font-size:.85em;padding:.125rem .375rem;background:var(--color-bg-elevated);border-radius:var(--radius-sm)}a{color:var(--color-accent);text-decoration:none;transition:color var(--duration) var(--easing)}a:hover{color:var(--color-accent-hover)}a:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px;border-radius:var(--radius-sm)}button,input,select{font:inherit;color:inherit}::selection{background:var(--color-accent-soft);color:var(--color-text)}.app-shell{display:flex;flex-direction:column;min-height:100vh;background:var(--color-bg)}.app-shell__header{display:flex;align-items:center;gap:var(--space-6);padding:var(--space-3) var(--space-6);background:var(--color-surface);border-bottom:1px solid var(--color-border);position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.app-shell__title{margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text);background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-hover) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}.app-shell__nav{display:flex;gap:var(--space-1);flex:1;flex-wrap:wrap}.app-shell__nav-link{padding:var(--space-2) var(--space-3);border-radius:var(--radius);color:var(--color-text-muted);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--duration) var(--easing)}.app-shell__nav-link:hover{background:var(--color-surface-hover);color:var(--color-text);text-decoration:none}.app-shell__nav-link--active,.app-shell__nav-link--active:hover{background:var(--color-accent-soft);color:var(--color-accent)}.app-shell__logout,.app-shell__theme-toggle{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);background:transparent;color:var(--color-text-muted);border-radius:var(--radius);cursor:pointer;font-size:var(--font-size-sm);transition:all var(--duration) var(--easing)}.app-shell__logout:hover,.app-shell__theme-toggle:hover{background:var(--color-surface-hover);color:var(--color-text);border-color:var(--color-border-strong)}.app-shell__theme-toggle{width:2.25rem;height:2.25rem;padding:0;display:inline-flex;align-items:center;justify-content:center}.app-shell__main{flex:1;padding:var(--space-8) var(--space-6);max-width:1200px;margin:0 auto;width:100%;animation:fadeIn var(--duration) var(--easing)}.app-shell__footer{padding:var(--space-4) var(--space-6);color:var(--color-text-subtle);text-align:center;font-size:var(--font-size-xs);border-top:1px solid var(--color-border)}.app-loading{padding:var(--space-12);text-align:center;color:var(--color-text-muted)}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:var(--radius);cursor:pointer;font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);transition:all var(--duration) var(--easing);white-space:nowrap}.btn:hover:not(:disabled){background:var(--color-surface-hover);border-color:var(--color-border-strong)}.btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-accent-contrast)}.btn--primary:hover:not(:disabled){background:var(--color-accent-hover);border-color:var(--color-accent-hover)}.btn--small{padding:var(--space-1) var(--space-3);font-size:var(--font-size-xs)}.btn--danger{border-color:var(--color-danger);color:var(--color-danger)}.btn--danger:hover:not(:disabled){background:var(--color-danger-soft)}.form-inline{display:flex;align-items:flex-end;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-4) 0}.form-field{display:flex;flex-direction:column;gap:var(--space-1)}.form-field__label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.form-field__input{padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg-elevated);color:var(--color-text);transition:border-color var(--duration) var(--easing),box-shadow var(--duration) var(--easing);min-width:12rem}.form-field__input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--color-accent-soft)}.form-field__input::placeholder{color:var(--color-text-subtle)}.ranking-table,.config-table,.logs-table{width:100%;border-collapse:separate;border-spacing:0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;font-size:var(--font-size-sm);animation:fadeIn var(--duration) var(--easing)}.ranking-table thead,.config-table thead,.logs-table thead{background:var(--color-bg-elevated)}.ranking-table th,.config-table th,.logs-table th{padding:var(--space-3) var(--space-4);text-align:left;font-weight:var(--font-weight-semibold);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted);border-bottom:1px solid var(--color-border)}.ranking-table td,.config-table td,.logs-table td{padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);transition:background-color var(--duration) var(--easing)}.ranking-table tbody tr:last-child td,.config-table tbody tr:last-child td,.logs-table tbody tr:last-child td{border-bottom:none}.ranking-table tbody tr:hover td,.config-table tbody tr:hover td,.logs-table tbody tr:hover td{background:var(--color-surface-hover)}.ranking-table__rank{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text-muted);width:3rem}.ranking-table tbody tr:nth-child(1) .ranking-table__rank{color:#f5c518}.ranking-table tbody tr:nth-child(2) .ranking-table__rank{color:silver}.ranking-table tbody tr:nth-child(3) .ranking-table__rank{color:#cd7f32}.ranking-table__viewer{font-weight:var(--font-weight-medium)}.ranking-table__total{font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-accent)}.ranking-empty{padding:var(--space-8);text-align:center;background:var(--color-surface);border:1px dashed var(--color-border);border-radius:var(--radius);color:var(--color-text-muted)}.dashboard__header,.ranking-page__header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-6);flex-wrap:wrap}.dashboard__header h2,.ranking-page__header h2{margin:0}.ranking-page__meta{display:flex;align-items:center;gap:var(--space-3);color:var(--color-text-muted);font-size:var(--font-size-sm);flex-wrap:wrap}.dashboard__grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4)}.dashboard__card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2);transition:transform var(--duration) var(--easing),border-color var(--duration) var(--easing)}.dashboard__card:hover{transform:translateY(-2px);border-color:var(--color-border-strong)}.dashboard__card-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);text-transform:uppercase;letter-spacing:.05em;color:var(--color-text-muted)}.dashboard__card-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums;color:var(--color-text)}.login-page{min-height:100vh;display:grid;place-items:center;padding:var(--space-6);background:radial-gradient(circle at 30% 20%,rgba(169,112,255,.08),transparent 50%),radial-gradient(circle at 70% 80%,rgba(169,112,255,.05),transparent 50%),var(--color-bg)}.login-card{max-width:26rem;width:100%;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-10);text-align:center;box-shadow:var(--shadow-lg);animation:fadeIn .4s var(--easing)}.login-card__title{margin:0 0 var(--space-3);background:linear-gradient(135deg,var(--color-accent) 0%,var(--color-accent-hover) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.login-card__lead{margin:0 0 var(--space-8);color:var(--color-text-muted);font-size:var(--font-size-sm)}.login-card__cta{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-accent);color:var(--color-accent-contrast);border-radius:var(--radius);text-decoration:none;font-weight:var(--font-weight-semibold);font-size:var(--font-size-sm);width:100%;transition:all var(--duration) var(--easing)}.login-card__cta:hover{background:var(--color-accent-hover);text-decoration:none;color:var(--color-accent-contrast);transform:translateY(-1px);box-shadow:0 4px 14px #a970ff59}.config-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-6);margin-bottom:var(--space-6)}.config-card h3{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}.list{list-style:none;padding:0;margin:0}.list__item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3) 0;border-bottom:1px solid var(--color-border);transition:background-color var(--duration) var(--easing)}.list__item:last-child{border-bottom:none}.logs-table__row--error td,.logs-table__row--security td{background:var(--color-danger-soft)}.logs-table__row--warn td{background:var(--color-warning-soft)}.logs-table__row--info:hover td{background:var(--color-surface-hover)}.error{padding:var(--space-3) var(--space-4);background:var(--color-danger-soft);color:var(--color-danger);border:1px solid var(--color-danger);border-radius:var(--radius);font-size:var(--font-size-sm)}.user-profile-page__chart{margin:var(--space-6) 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:var(--space-5);animation:fadeIn var(--duration) var(--easing)}.recharts-default-tooltip{background:var(--color-bg-elevated)!important;border:1px solid var(--color-border)!important;border-radius:var(--radius)!important;color:var(--color-text)!important}.recharts-cartesian-axis-tick-value{fill:var(--color-text-muted)!important}.recharts-cartesian-grid line{stroke:var(--color-border)}.recharts-legend-item-text{color:var(--color-text-muted)!important}.sandbox-page .muted{margin-bottom:var(--space-4);display:block}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--color-bg)}::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:var(--color-border-strong)}