:root{--bg-color: #f4f7f6;--text-main: #1e293b;--text-muted: #64748b;--card-bg: rgba(255, 255, 255, .65);--card-border: rgba(255, 255, 255, .6);--glass-blur: blur(20px);--shadow-color: rgba(100, 116, 139, .15);--dialog-bg: rgba(255, 255, 255, .85);--overlay-bg: rgba(15, 23, 42, .4);--btn-text: #fff;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}@media(prefers-color-scheme:dark){:root{--bg-color: #0f172a;--text-main: #f8fafc;--text-muted: #94a3b8;--card-bg: rgba(30, 41, 59, .6);--card-border: rgba(255, 255, 255, .08);--shadow-color: rgba(0, 0, 0, .4);--dialog-bg: rgba(30, 41, 59, .85);--overlay-bg: rgba(0, 0, 0, .6)}}*{box-sizing:border-box}body{margin:0;min-height:100dvh;color:var(--text-main);background-color:var(--bg-color);background-image:radial-gradient(circle at 15% 50%,rgba(99,102,241,.15),transparent 30%),radial-gradient(circle at 85% 30%,rgba(236,72,153,.15),transparent 30%),radial-gradient(circle at 50% 80%,rgba(16,185,129,.15),transparent 30%);background-attachment:fixed;transition:background-color .4s ease,color .4s ease}button,input{font:inherit}.page{width:min(1200px,100%);margin:0 auto;padding:clamp(24px,5vw,64px) clamp(20px,4vw,32px)}.hero{margin-bottom:clamp(32px,6vw,48px);text-align:center;animation:fadeInDown .8s ease-out}.brand h1{margin:0;font-size:clamp(36px,8vw,64px);font-weight:800;letter-spacing:0;background:linear-gradient(135deg,#6366f1,#ec4899,#f59e0b);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;line-height:1.1}.brand p{margin:16px auto 0;max-width:600px;color:var(--text-muted);font-size:clamp(16px,2.5vw,20px);line-height:1.6;font-weight:500}.settings-fab{position:fixed;top:18px;right:18px;z-index:30;display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--card-border);border-radius:50%;color:var(--text-main);background:var(--card-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 10px 30px var(--shadow-color);cursor:pointer;transition:transform .2s ease,border-color .2s ease}.settings-fab:hover{transform:translateY(-2px) rotate(18deg);border-color:#6366f1}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;animation:fadeInUp .8s ease-out}.tone-1{--theme: #6366f1;--theme-light: rgba(99, 102, 241, .1)}.tone-2{--theme: #ec4899;--theme-light: rgba(236, 72, 153, .1)}.tone-3{--theme: #10b981;--theme-light: rgba(16, 185, 129, .1)}.tone-4{--theme: #f59e0b;--theme-light: rgba(245, 158, 11, .1)}.tone-5{--theme: #8b5cf6;--theme-light: rgba(139, 92, 246, .1)}.tone-6{--theme: #06b6d4;--theme-light: rgba(6, 182, 212, .1)}.card{position:relative;display:flex;flex-direction:column;min-height:232px;border:1px solid var(--card-border);border-radius:20px;padding:24px;background:var(--card-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);box-shadow:0 10px 30px var(--shadow-color);cursor:pointer;overflow:hidden;transition:all .4s cubic-bezier(.175,.885,.32,1.275);text-decoration:none}.card:before{content:"";position:absolute;inset:0 0 auto;height:100%;background:linear-gradient(180deg,var(--theme-light) 0%,transparent 100%);opacity:0;transition:opacity .4s ease;z-index:0}.card:hover{transform:translateY(-8px) scale(1.02);border-color:var(--theme);box-shadow:0 20px 40px var(--shadow-color),0 0 20px var(--theme-light)}.card:hover:before{opacity:1}.card:active{transform:translateY(-2px) scale(.98)}.card:focus-visible{outline:2px solid var(--theme);outline-offset:4px}.card-head,.card-body{position:relative;z-index:1}.card-head{display:flex;align-items:center;gap:16px;margin-bottom:16px}.icon{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:var(--theme-light);color:var(--theme);transition:transform .4s ease}.card:hover .icon{transform:rotate(10deg) scale(1.1);background:var(--theme)}.card:hover .icon img{filter:brightness(0) invert(1)}.icon img{width:24px;height:24px;transition:all .4s ease}.card-title-group{min-width:0;display:grid;gap:8px}.card h2{margin:0;font-size:20px;font-weight:700;color:var(--text-main);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-body{flex-grow:1;display:flex;flex-direction:column;gap:14px}.card-body p{margin:0;color:var(--text-muted);font-size:15px;line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;flex-grow:1}.status-badge{width:fit-content;display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;color:var(--text-muted);background:#64748b1f;font-size:12px;font-weight:700}.status-dot{width:7px;height:7px;border-radius:50%;background:currentColor}.status-ok{color:#059669;background:#10b9811f}.status-error{color:#dc2626;background:#ef44441f}.status-unknown{color:#d97706;background:#f59e0b24}.access-path{display:block;max-width:calc(100% - 44px);padding:7px 10px;border-radius:10px;color:var(--text-muted);background:#64748b14;font-size:12px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-btn{position:absolute;right:20px;bottom:20px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:none;border-radius:50%;background:var(--theme);color:var(--btn-text);cursor:pointer;opacity:0;transform:translateY(10px);transition:all .3s ease;box-shadow:0 4px 12px var(--theme-light)}.card:hover .detail-btn{opacity:1;transform:translateY(0)}.detail-btn:hover{transform:translateY(0) scale(1.1)!important}.dialog-mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;background:var(--overlay-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .3s ease}.dialog{width:min(500px,100%);background:var(--dialog-bg);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--card-border);border-radius:24px;box-shadow:0 24px 60px #0003;overflow:hidden;animation:scaleUp .3s cubic-bezier(.175,.885,.32,1.275)}.dialog-head{display:flex;align-items:center;justify-content:space-between;padding:24px 32px 16px}.dialog-head strong{font-size:22px;font-weight:700;color:var(--text-main)}.dialog-close{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;border-radius:50%;background:#8080801a;color:var(--text-muted);font-size:20px;cursor:pointer;transition:all .2s ease}.dialog-close:hover{background:#80808033;color:var(--text-main);transform:scale(1.1)}.dialog-body{padding:0 32px 32px;color:var(--text-muted);font-size:16px;line-height:1.7}.empty,.error{text-align:center;padding:48px;background:var(--card-bg);border:1px solid var(--card-border);border-radius:20px;-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);color:var(--text-muted);font-weight:500}.login-dialog .dialog-body{display:grid;gap:14px}.field-label{font-size:13px;font-weight:700;color:var(--text-main)}.password-field{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--card-border);border-radius:14px;background:#ffffff5c;color:var(--text-muted)}.password-field input{width:100%;border:0;outline:0;background:transparent;color:var(--text-main);font-size:15px}.form-error{margin:0;color:#dc2626;font-size:13px;font-weight:700}.primary-action,.ghost-action,.service-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;font-weight:800;transition:transform .16s ease,opacity .16s ease,box-shadow .16s ease}.primary-action{min-height:44px;border-radius:14px;color:#fff;background:linear-gradient(135deg,#6366f1,#ec4899);box-shadow:0 14px 28px #6366f13d}.primary-action:disabled,.service-btn:disabled{opacity:.56;cursor:not-allowed}.settings-page{width:min(1040px,100%)}.settings-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:24px;animation:fadeInDown .6s ease-out}.settings-header p{margin:0 0 8px;color:var(--text-muted);font-weight:800}.settings-header h1{margin:0;font-size:clamp(30px,5vw,48px);letter-spacing:0}.settings-actions,.service-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.ghost-action{min-height:40px;padding:0 14px;border:1px solid var(--card-border);border-radius:999px;color:var(--text-main);background:var(--card-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}.settings-panel{animation:fadeInUp .7s ease-out}.service-list{display:grid;gap:14px}.service-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;padding:18px;border:1px solid var(--card-border);border-radius:20px;background:var(--card-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:0 10px 30px var(--shadow-color)}.service-main{min-width:0;display:grid;gap:9px}.service-title{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.service-title strong{font-size:18px}.service-meta{color:var(--text-muted);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.service-btn{min-height:38px;padding:0 13px;border-radius:12px;color:#fff}.service-btn.start{background:#059669}.service-btn.stop{background:#dc2626}.service-btn.restart{background:#6366f1}.primary-action:hover,.ghost-action:hover,.service-btn:hover{transform:translateY(-1px)}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes scaleUp{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(max-width:720px){.grid{grid-template-columns:1fr;gap:16px}.card{min-height:210px;padding:20px}.detail-btn{opacity:1;transform:translateY(0)}.brand h1{font-size:32px}.dialog-head,.dialog-body{padding-left:24px;padding-right:24px}.settings-header,.service-row{grid-template-columns:1fr}.settings-header{align-items:flex-start}.service-actions{justify-content:stretch}.service-btn{flex:1}}