:root{--bg-deep: oklch(12% .02 260deg);--bg-sidebar: oklch(14% .018 260deg / .85);--bg-card: oklch(18% .012 260deg / .35);--bg-card-hover: oklch(22% .016 260deg / .45);--bg-card-elevated: oklch(22% .018 260 / .55);--bg-input: oklch(100% 0 0deg / .06);--topbar-bg: oklch(12% .02 260deg / .7);--tabbar-bg: oklch(12% .02 260deg / .9);--fg: oklch(95% .005 260deg);--fg-secondary: oklch(90% .005 260deg);--fg-muted: oklch(72% .015 260deg);--fg-dim: oklch(55% .015 260deg);--accent-blue: oklch(62% .22 265deg);--accent-purple: oklch(58% .24 300deg);--accent-teal: oklch(60% .18 175deg);--accent-orange: oklch(65% .2 30deg);--accent-gold: oklch(70% .16 75deg);--accent-pink: oklch(60% .2 340deg);--status-success: oklch(62% .18 145deg);--status-danger: oklch(58% .22 25deg);--class-warrior: oklch(55% .12 55deg);--class-mage: oklch(55% .2 260deg);--class-rogue: oklch(55% .18 55deg);--class-paladin: oklch(60% .18 55deg);--class-hunter: oklch(52% .2 145deg);--class-druid: oklch(55% .18 140deg);--class-priest: oklch(78% .1 330deg);--class-shaman: oklch(65% .18 30deg);--q-poor: oklch(60% .02 260deg);--q-common: oklch(75% .02 260deg);--q-uncommon: oklch(62% .18 145deg);--q-rare: oklch(62% .22 250deg);--q-epic: oklch(65% .22 300deg);--q-legendary: oklch(75% .18 75deg);--q-artifact: oklch(80% .16 90deg);--faction-alliance: oklch(55% .2 250deg);--faction-horde: oklch(55% .22 25deg);--grad-primary: linear-gradient(135deg, oklch(62% .22 265deg), oklch(58% .24 300deg), oklch(60% .2 340deg));--grad-warm: linear-gradient(135deg, oklch(65% .2 30deg), oklch(60% .22 20deg), oklch(58% .24 340deg));--grad-fresh: linear-gradient(135deg, oklch(60% .18 175deg), oklch(58% .2 220deg), oklch(62% .22 265deg));--grad-gold: linear-gradient(135deg, oklch(70% .16 75deg), oklch(65% .2 45deg), oklch(60% .18 30deg));--grad-accent: linear-gradient(135deg, oklch(62% .22 265deg), oklch(60% .2 340deg), oklch(65% .2 30deg));--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-xl: 28px;--radius-full: 9999px;--glass-blur: blur(24px);--glass-border: 1px solid oklch(100% 0 0deg / .04);--shadow-card: inset 0 1px 0 oklch(100% 0 0deg / .03);--divider: 1px solid oklch(100% 0 0deg / .04)}[data-theme=light]{--bg-deep: oklch(97% .004 260);--bg-sidebar: oklch(98% .003 260 / .9);--bg-card: oklch(100% 0 0 / .7);--bg-card-hover: oklch(100% 0 0 / .8);--bg-card-elevated: oklch(100% 0 0 / .85);--bg-input: oklch(0% 0 0 / .04);--topbar-bg: oklch(98% .003 260 / .8);--tabbar-bg: oklch(98% .003 260 / .92);--fg: oklch(15% .015 260);--fg-secondary: oklch(25% .012 260);--fg-muted: oklch(40% .012 260);--fg-dim: oklch(55% .01 260);--glass-border: 1px solid oklch(0% 0 0 / .06);--shadow-card: 0 1px 3px oklch(0% 0 0 / .06);--divider: 1px solid oklch(0% 0 0 / .06)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-moz-tab-size:4;tab-size:4;font-size:16px;scroll-behavior:smooth}body{min-height:100vh;line-height:1.6;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans SC,PingFang SC,Microsoft YaHei,sans-serif}hr{height:0;color:inherit;border-top-width:1px}abbr[title]{text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:1em}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}table{text-indent:0;border-color:inherit}button,input,optgroup,select,textarea{margin:0;padding:0;font-family:inherit;font-size:100%;line-height:inherit;color:inherit}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button;-moz-appearance:button;appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}textarea{overflow:auto;resize:vertical}img,svg,video,canvas,audio,iframe,embed,object{display:block;max-width:100%}img,video{height:auto}a{color:inherit;text-decoration:none}ul,ol{list-style:none}:focus{outline:none}:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}*{-webkit-tap-highlight-color:transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#43475359;border-radius:var(--radius-full)}::-webkit-scrollbar-thumb:hover{background:#5c637580}::selection{background:#0f92f759;color:var(--fg)}html,body{height:100%;background:var(--bg-deep);color:var(--fg);overflow:hidden;transition:background .4s ease,color .4s ease}#app{height:100%}.glass-card{background:var(--bg-card);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:var(--glass-border);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);transition:background .3s ease,box-shadow .3s ease,transform .25s ease}.glass-card:hover{background:var(--bg-card-hover);transform:translateY(-2px)}.btn-grad{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border:none;border-radius:var(--radius-md);background:var(--grad-primary);color:#f7f8fc;font-size:14px;font-weight:600;cursor:pointer;transition:opacity .2s ease,transform .2s ease,box-shadow .2s ease;position:relative;overflow:hidden}.btn-grad:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 35%,oklch(100% 0 0deg / .18) 45%,oklch(100% 0 0deg / .18) 55%,transparent 65%);transform:translate(-120%);transition:transform .5s ease}.btn-grad:hover{opacity:.92;transform:translateY(-1px);box-shadow:0 4px 16px #4b65d959}.btn-grad:hover:after{transform:translate(120%)}.btn-grad:active{transform:translateY(0);opacity:.85}.btn-warm{background:var(--grad-warm)}.btn-fresh{background:var(--grad-fresh)}.btn-gold{background:var(--grad-gold)}.btn-sm{padding:6px 14px;font-size:12px;border-radius:var(--radius-sm)}.btn-full{width:100%}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;border:1px solid var(--fg-dim);border-radius:var(--radius-md);background:transparent;color:var(--fg-secondary);font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s ease,color .2s ease,background .2s ease}.btn-ghost:hover{border-color:var(--accent-blue);color:var(--accent-blue);background:#487bff14;background:oklch(62% .22 265deg / .08)}.btn-ghost:active{background:#487bff24;background:oklch(62% .22 265deg / .14)}.search-input,.msg-input{width:100%;padding:10px 16px;border:1px solid var(--divider);border-radius:var(--radius-md);background:var(--bg-input);color:var(--fg);font-size:14px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}.search-input::placeholder,.msg-input::placeholder{color:var(--fg-dim)}.search-input:focus,.msg-input:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px #487bff26;box-shadow:0 0 0 3px oklch(62% .22 265deg / .15)}.msg-input{border-radius:var(--radius-full);padding:10px 20px}.badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-full);background:var(--accent-blue);color:#f7f8fc;font-size:11px;font-weight:700;line-height:1}.tag{display:inline-flex;align-items:center;padding:3px 10px;border-radius:var(--radius-sm);background:var(--bg-input);color:var(--fg-secondary);font-size:12px;font-weight:500;line-height:1.4}.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 12px;border-radius:var(--radius-full);background:var(--bg-input);color:var(--fg-secondary);font-size:12px;font-weight:500;line-height:1.4;border:var(--glass-border)}.faction-alliance{color:var(--faction-alliance);background:#4393e11f;border-color:#4393e140}.faction-horde{color:var(--faction-horde);background:#d747451f;border-color:#d7474540}.quality-0{color:var(--q-poor)}.quality-1{color:var(--q-common)}.quality-2{color:var(--q-uncommon)}.quality-3{color:var(--q-rare)}.quality-4{color:var(--q-epic)}.quality-5{color:var(--q-legendary)}.quality-6{color:var(--q-artifact)}.class-1{color:var(--class-warrior)}.class-2{color:var(--class-paladin)}.class-3{color:var(--class-hunter)}.class-4{color:var(--class-rogue)}.class-5{color:var(--class-priest)}.class-7{color:var(--class-shaman)}.class-8{color:#6c98e2}.class-9{color:#6967e1}.class-11{color:#5daf4a}.class-6{color:#00999f;color:oklch(62% .16 200deg)}.class-10{color:#a0902a}.class-12{color:#c24ba1}.ambient-bg{position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;overflow:hidden;pointer-events:none}.ambient-blob{position:absolute;border-radius:50%;filter:blur(100px);opacity:.18;animation:bF 20s ease-in-out infinite alternate}[data-theme=light] .ambient-blob{opacity:.06}.ambient-blob:nth-child(1){width:420px;height:420px;background:var(--accent-blue);top:-10%;left:-8%}.ambient-blob:nth-child(2){width:350px;height:350px;background:var(--accent-purple);bottom:-5%;right:-5%;animation-delay:-7s;animation-duration:25s}.ambient-blob:nth-child(3){width:280px;height:280px;background:var(--accent-teal);top:40%;left:50%;animation-delay:-14s;animation-duration:22s}.noise-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:.035}[data-theme=light] .noise-overlay{opacity:.015}.noise-overlay{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-repeat:repeat;background-size:256px 256px}.fade-in{animation:fadeIn .45s ease-out both}.fd1{animation-delay:.08s}.fd2{animation-delay:.16s}.fd3{animation-delay:.24s}.fd4{animation-delay:.32s}@keyframes fadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes gS{0%{background-position:-200% center}to{background-position:200% center}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bF{0%{transform:translate(0) scale(1)}33%{transform:translate(30px,-20px) scale(1.05)}66%{transform:translate(-20px,15px) scale(.95)}to{transform:translate(10px,-10px) scale(1.02)}}html.theme-transition,html.theme-transition *,html.theme-transition *:before,html.theme-transition *:after{transition:background-color .4s ease,color .4s ease,border-color .4s ease,box-shadow .4s ease!important}