:root{--color-primary:#5dbb9c;--color-primary-hover:#4aaa8b;--color-primary-light:#a2d7cf;--color-primary-dark:#3d9a7d;--color-primary-rgb:93,187,156;--color-bg:#fafaf7;--color-bg-rgb:250,250,247;--color-bg-secondary:#f2f4ee;--color-bg-tertiary:#e4e8d8;--color-surface:#fff;--color-surface-hover:#f5f7f2;--color-border:#d0d8ce;--color-border-light:#e2e8dc;--color-overlay:rgba(0,0,0,.4);--color-text:#1a2e23;--color-text-secondary:#5a6b60;--color-text-muted:#8a9a8e;--color-on-primary:#fff;--color-success:#1a9d48;--color-success-rgb:26,157,72;--color-warning:#c98a10;--color-warning-hover:#b07a0e;--color-warning-rgb:201,138,16;--color-error:#dc3545;--color-error-rgb:220,53,69;--color-info:#2970d0;--color-info-rgb:41,112,208;--color-java:#e76f51;--color-java-rgb:231,111,81;--color-bedrock:#2a9d8f;--color-bedrock-rgb:42,157,143;--font-family:"Hiragino Sans","Noto Sans JP",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;--font-size-xs:.75rem;--font-size-sm:.875rem;--font-size-base:1rem;--font-size-lg:1.125rem;--font-size-xl:1.25rem;--font-size-2xl:1.5rem;--font-size-3xl:1.875rem;--font-size-4xl:2.25rem;--spacing-xs:.25rem;--spacing-sm:.5rem;--spacing-md:1rem;--spacing-lg:1.5rem;--spacing-xl:2rem;--spacing-2xl:3rem;--radius-sm:.25rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(0,0,0,.06);--shadow-md:0 4px 6px rgba(0,0,0,.08);--shadow-lg:0 10px 15px rgba(0,0,0,.1);--shadow-glow:0 0 20px rgba(var(--color-primary-rgb),.2);--shadow-card:0 1px 4px rgba(0,0,0,.08);--shadow-card-hover:0 4px 12px rgba(0,0,0,.12);--transition-fast:.15s ease;--transition-base:.2s ease;--transition-slow:.3s ease;--container-max:1024px;--container-padding:var(--spacing-md);--header-height:64px;--bottom-nav-height:60px}html.dark{--color-primary:#6e74a0;--color-primary-hover:#7d83b0;--color-primary-light:#9298be;--color-primary-dark:#5c6190;--color-primary-rgb:110,116,160;--color-bg:#1c1f3b;--color-bg-rgb:28,31,59;--color-bg-secondary:#222545;--color-bg-tertiary:#282c4d;--color-surface:#282c4d;--color-surface-hover:#313558;--color-border:#3c3f68;--color-border-light:#4d4d80;--color-overlay:rgba(0,0,0,.6);--color-text:#e8e9ed;--color-text-secondary:#a8aab8;--color-text-muted:#606271;--color-on-primary:#fff;--color-java:#b8545e;--color-java-rgb:184,84,94;--color-bedrock:#487898;--color-bedrock-rgb:72,120,152;--color-success:#34d673;--color-success-rgb:52,214,115;--color-warning:#f5b731;--color-warning-hover:#d9a520;--color-warning-rgb:245,183,49;--color-error:#f06070;--color-error-rgb:240,96,112;--color-info:#5a9cf5;--color-info-rgb:90,156,245;--shadow-sm:0 1px 2px rgba(0,0,0,.3);--shadow-md:0 4px 6px rgba(0,0,0,.4);--shadow-lg:0 10px 15px rgba(0,0,0,.5);--shadow-glow:0 0 20px rgba(var(--color-primary-rgb),.3);--shadow-card:0 1px 4px rgba(0,0,0,.25);--shadow-card-hover:0 4px 12px rgba(0,0,0,.35)}*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;overscroll-behavior:none;scroll-behavior:smooth}body{background-color:var(--color-bg);color:var(--color-text);font-family:var(--font-family);font-size:var(--font-size-base);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--color-primary);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-primary-hover)}img{display:block;height:auto;max-width:100%}button{cursor:pointer;font-family:inherit}.container{margin-inline:auto;max-width:var(--container-max);padding-inline:var(--container-padding);width:100%}.sr-only{height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;clip:rect(0,0,0,0);border:0;white-space:nowrap}.icon-frame-wrapper{border-radius:var(--radius-md);flex-shrink:0;isolation:isolate;overflow:visible;position:relative}.icon-frame-wrapper .icon-inner{background-color:var(--color-bg-tertiary);border-radius:var(--radius-md);height:100%;overflow:hidden;width:100%}.icon-frame-wrapper .icon-inner .server-icon{display:block;height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.icon-frame-wrapper .frame-overlay{border-radius:var(--radius-md);inset:0;pointer-events:none;position:absolute}.icon-frame-wrapper .status-badge{border:2px solid var(--color-surface);border-radius:50%;height:12px;position:absolute;right:-4px;top:-4px;width:12px;z-index:1}.icon-frame-wrapper .status-badge.online{background-color:var(--color-success)}.icon-frame-wrapper .status-badge.offline{background-color:#d1d5db}.frame-default .icon-inner{border:1px solid var(--color-border-light)}.frame-gold .frame-overlay{box-shadow:inset 0 0 0 2px #d9a520,inset 0 0 0 3px #f5d27f}.frame-gold .frame-overlay:after{animation:gold-shimmer 4s ease-in-out infinite;background:linear-gradient(135deg,transparent 35%,hsla(42,86%,73%,.08) 50%,transparent 65%);border-radius:var(--radius-md);content:"";inset:0;position:absolute}@keyframes gold-shimmer{0%,to{opacity:.3}50%{opacity:.7}}.frame-silver .frame-overlay{box-shadow:inset 0 0 0 2px #a8a8a8,inset 0 0 0 3px #d0d0d0}.frame-silver .frame-overlay:after{animation:silver-shine 5s ease-in-out infinite;background:linear-gradient(135deg,transparent 35%,hsla(0,0%,86%,.12) 50%,transparent 65%);border-radius:var(--radius-md);content:"";inset:0;position:absolute}@keyframes silver-shine{0%,to{opacity:.2}50%{opacity:.6}}.frame-rainbow .frame-overlay{box-shadow:inset 0 0 0 2px #8080804d}.frame-rainbow .frame-overlay:before{animation:rainbow-rotate 4s linear infinite;background:conic-gradient(from 0deg,#ff6b6b,#ffa94d,#ffd43b,#69db7c,#4dabf7,#9775fa,#f06595,#ff6b6b);border-radius:var(--radius-md);content:"";inset:0;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;padding:3px;position:absolute}@keyframes rainbow-rotate{0%{filter:hue-rotate(0deg)}to{filter:hue-rotate(1turn)}}html.dark .frame-gold .frame-overlay{box-shadow:inset 0 0 0 2px #f5d27f,inset 0 0 0 3px #d9a520}html.dark .frame-silver .frame-overlay{box-shadow:inset 0 0 0 2px #c8c8c8,inset 0 0 0 3px #e0e0e0}@media(prefers-reduced-motion:reduce){.frame-gold .frame-overlay:after,.frame-rainbow .frame-overlay:before,.frame-silver .frame-overlay:after{animation:none}}@media(max-width:640px){.icon-frame-wrapper .status-badge{height:10px;width:10px}}