body{font-family:Inter,Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;letter-spacing:-.5px;background-color:var(--color-bg);color:var(--color-text);transition:background-color .3s ease,color .3s ease}code{font-family:JetBrains Mono,Fira Code,Courier New,monospace}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--gradient-primary);border-radius:5px}::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--color-accent-blue-light),var(--color-accent-purple-light))}html{scroll-behavior:smooth}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 20px #3b82f680}50%{box-shadow:0 0 40px #8b5cf699}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.fade-in{animation:fadeIn .6s ease-out}.slide-up{animation:slideInUp .6s ease-out}.glow{animation:glow 2s ease-in-out infinite}.float{animation:float 3s ease-in-out infinite}:root{color-scheme:light dark;--color-light-background-primary: #ffffff;--color-light-background-secondary: #f8fafc;--color-light-background-tertiary: #f1f5f9;--color-light-background-hover: #e2e8f0;--color-light-text-primary: #1e293b;--color-light-text-secondary: #64748b;--color-light-text-tertiary: #94a3b8;--color-light-border: #e2e8f0;--color-light-border-hover: #cbd5e1;--color-dark-background-primary: #0a0e27;--color-dark-background-secondary: #141829;--color-dark-background-tertiary: #1e2139;--color-dark-background-hover: #2a308d;--color-dark-text-primary: #f8fafc;--color-dark-text-secondary: #cbd5e1;--color-dark-text-tertiary: #94a3b8;--color-dark-border: #2d3748;--color-dark-border-hover: #4a5568;--color-accent-blue: #3b82f6;--color-accent-blue-light: #60a5fa;--color-accent-blue-dark: #1e40af;--color-accent-blue-lighter: #93c5fd;--color-accent-purple: #8b5cf6;--color-accent-purple-light: #a78bfa;--color-accent-purple-dark: #6d28d9;--color-accent-purple-lighter: #c4b5fd;--color-accent-cyan: #06b6d4;--color-accent-cyan-light: #22d3ee;--color-accent-cyan-dark: #0891b2;--color-accent-cyan-lighter: #67e8f9;--color-accent-green: #10b981;--color-accent-green-light: #34d399;--color-accent-green-dark: #059669;--color-accent-green-lighter: #6ee7b7;--color-accent-warning: #f59e0b;--color-accent-warning-light: #fbbf24;--color-accent-warning-dark: #d97706;--color-accent-error: #ef4444;--color-accent-error-light: #f87171;--color-accent-error-dark: #dc2626;--color-accent-success: #10b981;--color-accent-success-light: #34d399;--color-accent-success-dark: #059669;--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-base: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-md: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--gradient-primary: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);--gradient-secondary: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);--gradient-success: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);--gradient-accent: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);--color-bg: var(--color-light-background-primary);--color-bg-secondary: var(--color-light-background-secondary);--color-bg-tertiary: var(--color-light-background-tertiary);--color-bg-hover: var(--color-light-background-hover);--color-text: var(--color-light-text-primary);--color-text-secondary: var(--color-light-text-secondary);--color-text-tertiary: var(--color-light-text-tertiary);--color-border: var(--color-light-border)}html[data-theme=dark],html.dark{color-scheme:dark;--color-bg: var(--color-dark-background-primary);--color-bg-secondary: var(--color-dark-background-secondary);--color-bg-tertiary: var(--color-dark-background-tertiary);--color-bg-hover: var(--color-dark-background-hover);--color-text: var(--color-dark-text-primary);--color-text-secondary: var(--color-dark-text-secondary);--color-text-tertiary: var(--color-dark-text-tertiary);--color-border: var(--color-dark-border)}html[data-theme=light],html.light{color-scheme:light;--color-bg: var(--color-light-background-primary);--color-bg-secondary: var(--color-light-background-secondary);--color-bg-tertiary: var(--color-light-background-tertiary);--color-bg-hover: var(--color-light-background-hover);--color-text: var(--color-light-text-primary);--color-text-secondary: var(--color-light-text-secondary);--color-text-tertiary: var(--color-light-text-tertiary);--color-border: var(--color-light-border)}@media(prefers-color-scheme:dark){:root:not([data-theme]){--color-bg: var(--color-dark-background-primary);--color-bg-secondary: var(--color-dark-background-secondary);--color-bg-tertiary: var(--color-dark-background-tertiary);--color-bg-hover: var(--color-dark-background-hover);--color-text: var(--color-dark-text-primary);--color-text-secondary: var(--color-dark-text-secondary);--color-text-tertiary: var(--color-dark-text-tertiary);--color-border: var(--color-dark-border)}}@media(prefers-color-scheme:light){:root:not([data-theme]){--color-bg: var(--color-light-background-primary);--color-bg-secondary: var(--color-light-background-secondary);--color-bg-tertiary: var(--color-light-background-tertiary);--color-bg-hover: var(--color-light-background-hover);--color-text: var(--color-light-text-primary);--color-text-secondary: var(--color-light-text-secondary);--color-text-tertiary: var(--color-light-text-tertiary);--color-border: var(--color-light-border)}}.bg-primary{background-color:var(--color-bg)}.bg-secondary{background-color:var(--color-bg-secondary)}.bg-tertiary{background-color:var(--color-bg-tertiary)}.text-primary{color:var(--color-text)}.text-secondary{color:var(--color-text-secondary)}.text-tertiary{color:var(--color-text-tertiary)}.border-color{border-color:var(--color-border)}.divider{border-top:1px solid var(--color-border)}.divider-vertical{border-left:1px solid var(--color-border)}.card{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:12px;padding:1.5rem;transition:all .3s ease;box-shadow:var(--shadow-sm)}.card:hover{border-color:var(--color-accent-blue);box-shadow:var(--shadow-md);background-color:var(--color-bg-tertiary)}.section{background-color:var(--color-bg);color:var(--color-text);padding:2rem;border-bottom:1px solid var(--color-border)}.section-alt{background-color:var(--color-bg-secondary);color:var(--color-text);padding:2rem}.btn-primary{background-color:var(--color-accent-blue);color:#fff;border:none}.btn-primary:hover{background-color:var(--color-accent-blue-dark)}.btn-secondary{background-color:var(--color-bg-tertiary);color:var(--color-text);border:1px solid var(--color-border)}.btn-secondary:hover{background-color:var(--color-bg-hover);border-color:var(--color-border-hover)}.btn-ghost{background-color:transparent;color:var(--color-accent-blue);border:1px solid var(--color-accent-blue)}.btn-ghost:hover{background-color:#3b82f61a}.btn-success{background-color:var(--color-accent-success);color:#fff;border:none}.btn-success:hover{background-color:var(--color-accent-success-dark)}.btn-warning{background-color:var(--color-accent-warning);color:#fff;border:none}.btn-warning:hover{background-color:var(--color-accent-warning-dark)}.btn-error{background-color:var(--color-accent-error);color:#fff;border:none}.btn-error:hover{background-color:var(--color-accent-error-dark)}.form-input{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);color:var(--color-text);border-radius:6px;padding:.75rem 1rem;font-size:1rem;transition:all .3s ease}.form-input::placeholder{color:var(--color-text-tertiary)}.form-input:focus{background-color:var(--color-bg-primary);border-color:var(--color-accent-blue);box-shadow:0 0 0 3px #3b82f61a;outline:none}.form-label{display:block;margin-bottom:.5rem;color:var(--color-text);font-weight:500;font-size:.875rem}.badge{display:inline-block;padding:.25rem .75rem;border-radius:12px;font-size:.75rem;font-weight:600;white-space:nowrap}.badge-primary{background-color:#3b82f61a;color:var(--color-accent-blue);border:1px solid var(--color-accent-blue)}.badge-success{background-color:#10b9811a;color:var(--color-accent-success);border:1px solid var(--color-accent-success)}.badge-warning{background-color:#f59e0b1a;color:var(--color-accent-warning);border:1px solid var(--color-accent-warning)}.badge-error{background-color:#ef44441a;color:var(--color-accent-error);border:1px solid var(--color-accent-error)}.alert{padding:1rem;border-radius:8px;border-left:4px solid;margin-bottom:1rem}.alert-info{background-color:#3b82f61a;border-left-color:var(--color-accent-blue);color:var(--color-accent-blue-dark)}.alert-success{background-color:#10b9811a;border-left-color:var(--color-accent-success);color:var(--color-accent-success-dark)}.alert-warning{background-color:#f59e0b1a;border-left-color:var(--color-accent-warning);color:var(--color-accent-warning-dark)}.alert-error{background-color:#ef44441a;border-left-color:var(--color-accent-error);color:var(--color-accent-error-dark)}.dropdown-menu{background-color:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:8px;box-shadow:var(--shadow-md);overflow:hidden}.dropdown-item{padding:.75rem 1rem;color:var(--color-text);cursor:pointer;transition:background-color .2s ease;border:none;background:none;width:100%;text-align:left;font-family:inherit}.dropdown-item:hover{background-color:var(--color-bg-tertiary)}.dropdown-item.active{background-color:var(--color-bg-hover);color:var(--color-accent-blue)}.skeleton{background:linear-gradient(90deg,var(--color-bg-tertiary) 0%,var(--color-bg-secondary) 50%,var(--color-bg-tertiary) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s infinite;border-radius:6px}@keyframes skeleton-loading{0%{background-position:200% 0}to{background-position:-200% 0}}.status-badge{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:.5rem;vertical-align:middle}.status-online{background-color:var(--color-accent-success);box-shadow:0 0 8px var(--color-accent-success)}.status-offline{background-color:var(--color-text-tertiary)}.status-busy{background-color:var(--color-accent-warning)}.status-away{background-color:var(--color-accent-cyan)}.code-block{background-color:var(--color-bg-tertiary);border:1px solid var(--color-border);border-radius:8px;padding:1rem;overflow-x:auto;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875rem;color:var(--color-text);line-height:1.5}.code-inline{background-color:var(--color-bg-tertiary);border-radius:4px;padding:.2rem .4rem;font-family:JetBrains Mono,Fira Code,monospace;font-size:.875em;color:var(--color-accent-cyan)}.interactive{cursor:pointer;position:relative;transition:all .3s ease}.interactive:hover{color:var(--color-accent-blue)}.interactive:focus{outline:2px solid var(--color-accent-blue);outline-offset:2px}.glass{background:#ffffff1a;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:12px}html.dark .glass{background:#0f172a80;border:1px solid var(--color-border)}.gradient-text{background:var(--gradient-primary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-size:200% auto}.gradient-text-secondary{background:var(--gradient-secondary);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.transition-theme{transition:background-color .3s ease,color .3s ease,border-color .3s ease}:root{font-family:Inter,Roboto,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6;font-weight:400;letter-spacing:-.5px;color-scheme:light dark;color:var(--color-text);background:var(--color-bg);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{margin:0;padding:0;box-sizing:border-box}body{margin:0;min-width:320px;display:flex;flex-direction:column;background-color:var(--color-bg);color:var(--color-text);transition:background-color .3s ease,color .3s ease}#root{width:100%;flex:1}a{var(--gradient-primary font-weight: 500; background: linear-gradient(90deg, #3b82f6, #06b6d4); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-decoration: none; cursor: pointer; transition: filter .3s ease; } a:hover { filter: brightness(1.2); } button { border-radius: 8px; border: 1px solid transparent; padding: .6em 1.2em; font-size: 1em; font-weight: 600; font-family: inherit; cursor: pointer; transition: all .3s cubic-bezier(.23, 1, .32, 1); position: relative; overflow: hidden; background-color: var(--color-accent-blue); color: white; } button:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(59, 130, 246, .3); } button:active { transform: translateY(0); } h1, h2, h3, h4, h5, h6 { line-height: 1.2; font-weight: 700; letter-spacing: -1px; } input, textarevar(--color-bg-tertiary); border: 1px solid var(--color-border); color: var(--color-text); transition: all .3s ease; padding: .5rem .75rem; border-radius: 6px; } input:focus, textarea:focus, select:focus { background: var(--color-bg-secondary); border-color: var(--color-accent-blue); box-shadow: 0 0 0 3px rgba(59, 130, 246, .1); outline: noneant; border-color: rgba(59, 130, 246, .5) !important; box-shadow: 0 0 0 3px rgba(59, 130, 246, .1); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #3b82f6, #8b5cf6); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #60a5fa, #a78bfa); } } button:focus, button:focus-visible { outline: 4px auto -webkit-focus-ring-color; } @media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } } @media (max-width: 375px) { body { font-size: 13px; } h1, h2, h3, h4, h5, h6 { font-size: clamp(1.125rem, 5vw, 1.75rem); } [role="region"], section { padding: .75rem !important; } button { min-height: 44px; min-width: 100%; padding: .625rem 1rem; } a, [role="button"] { min-height: 44px; display: inline-flex; align-items: center; padding: .625rem; } input, textarea, select { min-height: 44px; font-size: 16px !important; padding: .75rem; } p { font-size: clamp(.8125rem, 2.5vw, .9375rem); line-height: 1.6; } [role="document"] > * + * { margin-top: clamp(1rem, 4vw, 1.5rem); } } @media (min-width: 360px) and (max-width: 511px) { body { font-size: 14px; } h1 { font-size: clamp(1.625rem, 6vw, 2.25rem); line-height: 1.25; } h2 { font-size: clamp(1.375rem, 5vw, 1.875rem); } h3 { font-size: clamp(1.125rem, 4.5vw, 1.5rem); } [role="region"], section { padding: 1rem !important; } button { min-height: 44px; min-width: 44px; padding: .625rem 1.25rem; } a { min-height: 44px; display: inline-flex; align-items: center; } input, textarea, select { min-height: 44px; font-size: 16px !important; padding: .75rem; } p { font-size: clamp(.875rem, 2.5vw, 1rem); line-height: 1.7; } html { overflow-x: hidden; } body { overflow-x: hidden; } body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); } [style*="width: 600px"], [style*="width: 400px"] { width: 300px !important; height: 300px !important; } } @media (min-width: 512px) and (max-width: 1023px) { body { font-size: 15px; } h1 { font-size: clamp(2rem, 5vw, 2.75rem); line-height: 1.2; } h2 { font-size: clamp(1.625rem, 4.5vw, 2.25rem); } h3 { font-size: clamp(1.25rem, 3.5vw, 1.625rem); } [role="region"], section { padding: 1.5rem !important; } p { font-size: clamp(.95rem, 2vw, 1.125rem); line-height: 1.75; } button, a, [role="button"] { min-height: 44px; padding: .75rem 1.5rem; } input, textarea, select { min-height: 44px; font-size: 16px !important; padding: .75rem; } } @media (min-width: 1024px) { body { font-size: 16px; } h1 { font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1.15; } h2 { font-size: clamp(2rem, 4.5vw, 3rem); } h3 { font-size: clamp(1.5rem, 3vw, 2rem); } [role="region"], section { padding: 2rem !important; } p { font-size: 1.0625rem; max-width: 75ch; } button, a, [role="button"] { min-height: 48px; padding: .875rem 2rem; } input, textarea, select { min-height: 48px; font-size: 1rem !important; padding: .875rem; } } @media (min-width: 1024px) and (max-width: 1365px) { body { font-size: 15px; } h1 { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.2; } h2 { font-size: clamp(1.75rem, 3.5vw, 2.25rem); } h3 { font-size: clamp(1.25rem, 2.5vw, 1.5rem); } p { font-size: 1rem; line-height: 1.7; max-width: 70ch; } [role="region"], section { padding: 2rem !important; } [style*="Container"] { max-width: 1000px; } button, a, [role="button"] { min-height: 44px; padding: .75rem 1.5rem; } } @media (min-width: 1366px) and (max-width: 1535px) { body { font-size: 16px; } h1 { font-size: 3rem; line-height: 1.15; } h2 { font-size: 2.25rem; } h3 { font-size: 1.5rem; } p { font-size: 1.0625rem; max-width: 75ch; } [role="region"], section { padding: 2.5rem !important; } button, a, [role="button"] { min-height: 48px; padding: .875rem 2rem; } } @media (min-width: 1536px) and (max-width: 1919px) { body { font-size: 16px; } h1 { font-size: 3.5rem; line-height: 1.15; } h2 { font-size: 2.5rem; } h3 { font-size: 1.75rem; } p { font-size: 1.125rem; max-width: 80ch; } [role="region"], section { padding: 3rem !important; } button, a, [role="button"] { min-height: 48px; padding: .875rem 2rem; } [style*="width: 600px"] { width: 800px !important; height: 800px !important; } [style*="width: 400px"] { width: 500px !important; height: 500px !important; } } @media (min-width: 1920px) { body { font-size: 17px; } h1 { font-size: 4rem; line-height: 1.1; } h2 { font-size: 3rem; } h3 { font-size: 2rem; } p { font-size: 1.1875rem; max-width: 85ch; } [role="region"], section { padding: 4rem !important; } button, a, [role="button"] { min-height: 48px; padding: 1rem 2.5rem; } [style*="Container"] { max-width: 1400px; } [style*="width: 600px"] { width: 900px !important; height: 900px !important; } [style*="width: 400px"] { width: 600px !important; height: 600px !important; } } @media (max-height: 500px) and (orientation: landscape) { body { font-size: 12px; } h1, h2, h3, h4 { margin-top: .25rem; margin-bottom: .25rem; } [role="region"], section { padding-top: .5rem !important; padding-bottom: .5rem !important; padding-left: 1rem !important; padding-right: 1rem !important; } [role="region"] > * + * { margin-top: .75rem !important; } } @media (orientation: landscape) and (min-height: 500px) and (max-height: 800px) { h1 { margin-top: .5rem; margin-bottom: .5rem; } [role="region"], section { padding-top: 1rem !important; padding-bottom: 1rem !important; } } @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { [role="button"], input, textarea, select { border-width: .5px; } } @media (hover: none) and (pointer: coarse) { button, a, [role="button"] { min-height: 48px; min-width: 48px; padding: .75rem 1.5rem; } button + button { margin-left: .5rem; } input:focus, textarea:focus, select:focus { font-size: 16px !important; } } @media (max-width: 640px) { img { max-width: 100%; height: auto; } } @media print { body { background: white; } [role="region"] { page-break-inside: avoid; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } @media (prefers-color-scheme: dark) { body { background: #0a0e27; color: #e2e8f0; } } @media (prefers-color-scheme: light) { body { background: #ffffff; color: #0a0e27; } } )}