@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #eef0f5;--glass: rgba(255,255,255,.55);--glass-nav: rgba(255,255,255,.72);--glass-card:rgba(255,255,255,.5);--glass-input:rgba(255,255,255,.6);--glass-border: rgba(255,255,255,.7);--glass-border2:rgba(200,205,220,.5);--blue: #2563eb;--blue-h: #1d4ed8;--blue-soft: rgba(37,99,235,.1);--blue-mid: rgba(37,99,235,.25);--green: #16a34a;--red: #dc2626;--orange: #d97706;--text: #0d0d0c;--text2: #5c5c6a;--muted: #9b9baa;--white: #ffffff;--blur: blur(16px);--blur-sm: blur(8px);--shadow-glass: 0 8px 32px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);--shadow-card: 0 4px 24px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8);--sidebar-bg: rgba(255,255,255,.72);--orb1: radial-gradient(ellipse, rgba(99,102,241,.35) 0%, transparent 70%);--orb2: radial-gradient(ellipse, rgba(236,72,153,.25) 0%, transparent 70%);--orb3: radial-gradient(ellipse, rgba(34,211,238,.3) 0%, transparent 70%)}[data-theme=dark]{--bg: #0e0e12;--glass: rgba(255,255,255,.04);--glass-nav: rgba(255,255,255,.06);--glass-card:rgba(255,255,255,.04);--glass-input:rgba(255,255,255,.06);--glass-border: rgba(255,255,255,.1);--glass-border2:rgba(255,255,255,.07);--blue: #3b82f6;--blue-h: #60a5fa;--blue-soft: rgba(59,130,246,.12);--blue-mid: rgba(59,130,246,.2);--green: #22c55e;--red: #f87171;--orange: #fbbf24;--text: #f0f0ee;--text2: #7a7a88;--muted: #4a4a58;--white: rgba(255,255,255,.04);--sidebar-bg: rgba(20,20,28,1);--shadow-glass: 0 8px 32px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.3);--shadow-card: 0 4px 24px rgba(0,0,0,.3), inset 0 1px 0 rgba(255,255,255,.06);--orb1: radial-gradient(ellipse, rgba(99,102,241,.2) 0%, transparent 70%);--orb2: radial-gradient(ellipse, rgba(236,72,153,.15) 0%, transparent 70%);--orb3: radial-gradient(ellipse, rgba(34,211,238,.15) 0%, transparent 70%)}html,body{background:var(--bg);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;height:100%;transition:background .3s,color .3s}#root{height:100%}::-webkit-scrollbar{width:4px;height:4px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--glass-border2);border-radius:4px}@keyframes spin{to{transform:rotate(360deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes glow{0%,to{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 0 5px #3b82f600}}@keyframes drift1{0%,to{transform:translate(0) scale(1)}50%{transform:translate(40px,-30px) scale(1.08)}}@keyframes drift2{0%,to{transform:translate(0) scale(1)}50%{transform:translate(-30px,40px) scale(1.06)}}@keyframes drift3{0%,to{transform:translate(0) scale(1)}50%{transform:translate(20px,20px) scale(1.1)}}.fade{animation:fadeUp .2s ease}.spin{animation:spin .7s linear infinite;display:inline-block}.bg-orbs{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(60px)}.orb-1{width:600px;height:600px;top:-150px;left:-100px;background:var(--orb1);animation:drift1 12s ease-in-out infinite}.orb-2{width:500px;height:500px;bottom:-100px;right:-80px;background:var(--orb2);animation:drift2 15s ease-in-out infinite}.orb-3{width:400px;height:400px;top:40%;left:40%;background:var(--orb3);animation:drift3 18s ease-in-out infinite}.app{display:flex;height:100vh;overflow:hidden;position:relative;z-index:1}.sidebar{width:220px;flex-shrink:0;background:var(--glass-nav);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-right:1px solid var(--glass-border);display:flex;flex-direction:column;overflow:hidden;position:relative;z-index:10;transition:background .3s}.sidebar-logo{display:flex;align-items:center;gap:10px;padding:20px 16px 18px;border-bottom:1px solid var(--glass-border)}.sidebar-logo-mark{width:30px;height:30px;background:var(--text);border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .3s;box-shadow:0 2px 8px #0003}.sidebar-logo-text{font-size:15px;font-weight:700;letter-spacing:-.03em;color:var(--text)}.sidebar-nav{flex:1;padding:10px 8px;overflow-y:auto}.sidebar-nav-group{display:flex;flex-direction:column;gap:2px}.sidebar-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;border:none;background:none;cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;font-family:inherit;transition:all .15s;width:100%;text-align:left;white-space:nowrap}.sidebar-item:hover{background:var(--glass);color:var(--text);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm)}.sidebar-item--active{background:var(--glass);color:var(--text);font-weight:600;border:1px solid var(--glass-border);box-shadow:var(--shadow-glass);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm)}.sidebar-item-icon{display:flex;align-items:center;width:18px;flex-shrink:0;opacity:.6}.sidebar-item--active .sidebar-item-icon,.sidebar-item:hover .sidebar-item-icon{opacity:1}.sidebar-footer{padding:8px;border-top:1px solid var(--glass-border);display:flex;flex-direction:column;gap:2px}.sidebar-status{padding:8px 10px 6px;display:flex;flex-direction:column;gap:7px}.status-indicator{display:flex;align-items:center;gap:7px}.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}.status-dot--on{background:var(--green);animation:glow 2.5s infinite}.status-dot--off{background:var(--glass-border2)}.status-label{font-size:11.5px;color:var(--text2);font-weight:500}.theme-toggle{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;border:none;background:none;cursor:pointer;color:var(--text2);font-size:13px;font-weight:500;font-family:inherit;transition:all .15s;width:100%;text-align:left}.theme-toggle:hover{background:var(--glass);color:var(--text)}.theme-toggle-icon{display:flex;align-items:center;width:18px;flex-shrink:0;opacity:.6}.theme-toggle:hover .theme-toggle-icon{opacity:1}.main{flex:1;overflow-y:auto;background:transparent}.main-inner{max-width:860px;margin:0 auto;padding:40px 40px 60px}.page-title{font-size:22px;font-weight:700;letter-spacing:-.03em;color:var(--text);margin-bottom:3px;line-height:1.3}.page-sub{font-size:13px;color:var(--text2);margin-bottom:28px}.card{background:var(--glass-card);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-border);border-radius:14px;padding:20px;margin-bottom:12px;box-shadow:var(--shadow-card);transition:background .3s,border-color .3s}.card:hover{border-color:var(--glass-border);box-shadow:var(--shadow-glass)}.card-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:16px;display:flex;align-items:center;gap:7px;letter-spacing:-.01em}.label{display:block;font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.07em;margin-bottom:6px}.input{background:var(--glass-input);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border:1px solid var(--glass-border2);border-radius:8px;color:var(--text);padding:8px 12px;font-size:13px;width:100%;outline:none;transition:border-color .15s,box-shadow .15s,background .15s;font-family:inherit;line-height:1.5}.input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-soft);background:var(--glass-card)}.input::placeholder{color:var(--muted)}textarea.input{resize:vertical;min-height:80px}select.input{cursor:pointer}.form-row{display:grid;gap:12px;margin-bottom:12px}.form-row.cols-2{grid-template-columns:1fr 1fr}.form-row.cols-3{grid-template-columns:1fr 1fr 1fr}.btn{border:none;border-radius:8px;padding:8px 16px;font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;display:inline-flex;align-items:center;gap:6px;font-family:inherit;white-space:nowrap;letter-spacing:-.01em}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--text);color:var(--bg);box-shadow:0 2px 8px #0003}.btn-primary:hover:not(:disabled){opacity:.88;transform:translateY(-1px);box-shadow:0 6px 16px #00000040}.btn-blue{background:var(--blue);color:#fff;box-shadow:0 2px 10px #3b82f659}.btn-blue:hover:not(:disabled){background:var(--blue-h);transform:translateY(-1px);box-shadow:0 6px 18px #3b82f666}.btn-secondary{background:var(--glass);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);border:1px solid var(--glass-border);color:var(--text2)}.btn-secondary:hover:not(:disabled){border-color:var(--blue);color:var(--blue);background:var(--blue-soft)}.btn-ghost{background:transparent;color:var(--text2)}.btn-ghost:hover:not(:disabled){background:var(--glass);color:var(--text)}.toggle{display:flex;align-items:center;gap:10px;cursor:pointer}.toggle-track{width:36px;height:20px;border-radius:10px;background:var(--glass-border2);position:relative;transition:background .2s;flex-shrink:0;border:1px solid var(--glass-border)}.toggle-track.on{background:var(--text)}.toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 4px #00000040}.toggle-track.on .toggle-thumb{left:18px}.chips{display:flex;gap:6px;flex-wrap:wrap}.chip{padding:5px 12px;border-radius:8px;border:1px solid var(--glass-border2);background:var(--glass);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm);color:var(--text2);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:5px}.chip:hover{border-color:var(--text2);color:var(--text)}.chip.active{border-color:var(--blue);color:var(--blue);background:var(--blue-soft);font-weight:600}.drop-zone{border:1.5px dashed var(--glass-border2);border-radius:12px;padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--glass);backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm)}.drop-zone:hover,.drop-zone.drag{border-color:var(--blue);background:var(--blue-soft);box-shadow:0 0 0 4px var(--blue-soft)}.drop-zone p{color:var(--text2);font-size:13px;margin-top:8px;font-weight:500}.drop-zone small{color:var(--muted);font-size:11px;margin-top:4px;display:block}.progress-wrap{height:3px;background:var(--glass-border);border-radius:2px;overflow:hidden;margin-top:10px}.progress-bar{height:100%;background:var(--blue);border-radius:2px;transition:width .3s ease}.dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0}.dot-green{background:var(--green)}.dot-blue{background:var(--blue);animation:glow 2s infinite}.dot-red{background:var(--red)}.dot-orange{background:var(--orange)}.dot-muted{background:var(--muted)}.alert{padding:10px 14px;border-radius:8px;font-size:12.5px;margin-bottom:12px;font-weight:500;display:flex;align-items:center;gap:8px;backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm)}.alert-error{background:#fef2f2cc;border:1px solid rgba(254,202,202,.6);color:#dc2626}.alert-success{background:#f0fdf4cc;border:1px solid rgba(187,247,208,.6);color:#16a34a}.alert-info{background:var(--blue-soft);border:1px solid var(--blue-mid);color:var(--blue)}[data-theme=dark] .alert-error{background:#2d1515b3;border-color:#7f1d1d80;color:#f87171}[data-theme=dark] .alert-success{background:#14291eb3;border-color:#14532d80;color:#4ade80}.stat-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:600;backdrop-filter:var(--blur-sm);-webkit-backdrop-filter:var(--blur-sm)}.stat-pill.dark{background:#0d0d0ccc;color:#fff;border:1px solid var(--glass-border)}.stat-pill.blue{background:var(--blue);color:#fff}.stat-pill.light{background:var(--glass);color:var(--text);border:1px solid var(--glass-border)}.history-item{display:flex;align-items:flex-start;gap:12px;padding:12px 0;border-bottom:1px solid var(--glass-border)}.history-item:last-child{border-bottom:none}.history-badge{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;flex-shrink:0}.badge-live{background:#fef2f2cc;color:var(--red)}.badge-upload{background:var(--blue-soft);color:var(--blue)}[data-theme=dark] .badge-live{background:#2d1515b3}[data-theme=dark] .badge-upload{background:#1e3a5fb3}.status-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--glass-border)}.status-row:last-child{border-bottom:none}.conn-badge{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--text2)}.login-wrap{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:var(--bg);z-index:100}.login-card{background:var(--glass-card);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-border);border-radius:20px;box-shadow:var(--shadow-glass);padding:40px 36px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:28px;position:relative;z-index:1}.login-logo{display:flex;flex-direction:column;align-items:center;gap:8px}.login-logo-text{font-size:22px;font-weight:700;letter-spacing:-.5px;color:var(--text)}.login-subtitle{font-size:13px;color:var(--muted);margin:0}.login-form{display:flex;flex-direction:column;gap:14px}.input-pw-wrap{position:relative}.input-pw-eye{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--muted);padding:4px;line-height:0;transition:color .15s}.input-pw-eye:hover{color:var(--text)}.sidebar-item--logout{color:var(--muted)}.sidebar-item--logout:hover{color:var(--red)!important;background:#dc262614!important}@media (max-width: 768px){.app{flex-direction:column}.sidebar{width:100%;height:auto;border-right:none;border-bottom:1px solid var(--glass-border);flex-direction:row;align-items:center;padding:0 8px}.sidebar-logo{border-bottom:none;padding:10px 8px}.sidebar-logo-text{display:none}.sidebar-nav{padding:6px 0;flex:1}.sidebar-nav-group{flex-direction:row;gap:2px}.sidebar-item-label{display:none}.sidebar-item{padding:8px}.sidebar-footer{border-top:none;border-left:1px solid var(--glass-border);flex-direction:row;padding:6px 8px;gap:2px}.sidebar-status,.theme-toggle-label{display:none}.main-inner{padding:20px 16px 40px}.form-row.cols-2,.form-row.cols-3{grid-template-columns:1fr}.orb-1{width:300px;height:300px}.orb-2{width:250px;height:250px}.orb-3{width:200px;height:200px}}