.auth-shell{--panel: #ffffff;--line: #e6e8ef;--text: #1b2a4a;--muted: #66728a;--accent: #2b6aff;--field-bg: #f7f9fc;--error-bg: #fdecec;--error-border: #f3b3b3;--auth-bg: color-mix(in srgb, var(--accent) 6%, #ffffff);--auth-ring: color-mix(in srgb, var(--accent) 22%, transparent);--auth-shadow: 0 16px 44px rgba(15, 23, 42, .1);--auth-shadow-soft: 0 6px 18px rgba(15, 23, 42, .08);color-scheme:light;min-height:100vh;display:grid;place-items:center;padding:24px;background:radial-gradient(1100px 600px at 18% 18%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 60%),radial-gradient(900px 520px at 88% 30%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 58%),linear-gradient(180deg,var(--auth-bg),#ffffff 55%)}.auth-layout{width:min(980px,100%);display:grid;grid-template-columns:1.1fr 1fr;gap:18px}@media(max-width:860px){.auth-layout{grid-template-columns:1fr}}.auth-brand{border:1px solid var(--line);border-radius:18px;padding:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,#ffffff),color-mix(in srgb,var(--accent) 6%,#ffffff));box-shadow:var(--auth-shadow-soft);position:relative;overflow:hidden}.auth-brand:after{content:"";position:absolute;inset:-80px -120px auto auto;width:260px;height:260px;border-radius:999px;background:color-mix(in srgb,var(--accent) 22%,transparent)}.auth-brand .logo{width:42px;height:42px;border-radius:12px;background:var(--accent);display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:.5px}.auth-brand h1{margin:14px 0 6px;font-size:20px;color:var(--text)}.auth-brand p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}.auth-brand ul{margin:14px 0 0;padding-left:16px;color:var(--muted);font-size:13px;line-height:1.6}.auth-card{border:1px solid var(--line);border-radius:18px;padding:22px;background:var(--panel);box-shadow:var(--auth-shadow);display:grid;gap:14px;color:var(--text)}.auth-head{display:grid;gap:4px}.auth-head h2{margin:0;font-size:20px;color:var(--text)}.auth-head .sub{font-size:13px;color:var(--muted)}.field{display:grid;gap:6px}.field label{font-size:12px;color:var(--muted)}.input{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 12px;transition:border-color .15s ease,box-shadow .15s ease}.input:focus-within{border-color:color-mix(in srgb,var(--accent) 35%,var(--line));box-shadow:0 0 0 4px var(--auth-ring)}.auth-shell .auth-card .input input{width:100%;border:0;outline:0;background:transparent;color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;caret-color:var(--text);font-size:14px}.auth-shell .auth-card .input input::placeholder{color:color-mix(in srgb,var(--muted) 70%,#ffffff)!important}.auth-shell .auth-card .input input:-webkit-autofill,.auth-shell .auth-card .input input:-webkit-autofill:hover,.auth-shell .auth-card .input input:-webkit-autofill:focus,.auth-shell .auth-card .input input:-webkit-autofill:active{-webkit-text-fill-color:var(--text)!important;box-shadow:0 0 0 1000px #fff inset;transition:background-color 9999s ease-in-out 0s}.auth-actions{display:grid;gap:10px;margin-top:4px}.btn{border:1px solid color-mix(in srgb,var(--accent) 18%,var(--line));background:var(--accent);color:#fff;font-weight:650;border-radius:12px;padding:11px 12px;cursor:pointer;transition:filter .15s ease,transform .03s ease}.btn:hover{filter:brightness(1.03)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.65;cursor:not-allowed}.error{background:var(--error-bg);border:1px solid var(--error-border);color:#6a1b1b;padding:10px 12px;border-radius:12px;font-size:13px}.muted{color:var(--muted);font-size:12px;text-align:center}.muted a{color:var(--accent);text-decoration:none}.muted a:hover{text-decoration:underline}.react-grid-layout{position:relative;transition:height .2s ease}.react-grid-item{transition:all .2s ease;transition-property:left,top,width,height}.react-grid-item img{pointer-events:none;-webkit-user-select:none;user-select:none}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{transition:none;z-index:1;will-change:width,height}.react-grid-item.react-draggable-dragging{transition:none;z-index:3;will-change:transform}.react-grid-item.dropping{visibility:hidden}.react-grid-item.react-grid-placeholder{background:red;opacity:.2;transition-duration:.1s;z-index:2;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}.react-grid-item.react-grid-placeholder.placeholder-resizing{transition:none}.react-grid-item>.react-resizable-handle{position:absolute;width:20px;height:20px}.react-grid-item>.react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:5px;height:5px;border-right:2px solid rgba(0,0,0,.4);border-bottom:2px solid rgba(0,0,0,.4)}.react-resizable-hide>.react-resizable-handle{display:none}.react-grid-item>.react-resizable-handle.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-w,.react-grid-item>.react-resizable-handle.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-n,.react-grid-item>.react-resizable-handle.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-grid-item>.react-resizable-handle.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-grid-item>.react-resizable-handle.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}.geCanvas{border:1px solid #203249;border-radius:14px;background:#0b1526;min-height:560px;overflow:hidden;position:relative}.geCanvas:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:24px 24px;opacity:.35;pointer-events:none}.geTopBar{position:sticky;top:0;z-index:2;background:#0b1526d9;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid #203249;padding:8px 10px}.geHint{font-size:12px;color:#89a1bf}.geCard{height:100%;border-radius:14px;border:1px solid #203249;background:#0e1a2b;overflow:visible;position:relative;box-shadow:0 8px 18px #00000040;display:flex;flex-direction:column}.geSelected{border:2px solid #4ea1ff}.geHandle{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid #203249;cursor:grab;-webkit-user-select:none;user-select:none;background:#ffffff05}.geGrip{opacity:.65;font-size:14px}.geTitle{display:flex;align-items:center;gap:10px;min-width:0;flex:1}.geTitleText{font-weight:700;color:#cfe3ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}.geType{font-size:11px;font-weight:600;color:#89a1bf;padding:2px 8px;border:1px solid #203249;border-radius:999px;background:#00000026}.geSizeChip{font-size:11px;color:#9fb2cc;border:1px solid #203249;border-radius:999px;padding:2px 8px;background:#00000026}.geBody{padding:10px;display:grid;gap:10px;flex:1;overflow:hidden}.geWidgetWrap{min-width:0;min-height:0;height:100%}.gePlaceholder{border:1px dashed #203249;border-radius:12px;padding:12px;font-size:12px;color:#89a1bf;display:flex;align-items:center;justify-content:center;min-height:80px}.geCanvas .react-resizable-handle{width:18px!important;height:18px!important;right:6px!important;bottom:6px!important;opacity:.95!important;background-image:none!important;z-index:50!important;pointer-events:auto!important}.geCanvas .react-resizable-handle:after{content:"";position:absolute;right:3px;bottom:3px;width:10px;height:10px;border-right:2px solid rgba(255,255,255,.55);border-bottom:2px solid rgba(255,255,255,.55);border-radius:2px}.geCanvas .react-grid-item.react-grid-placeholder{background:#5b8dfa40!important;border-radius:14px!important;border:1px solid rgba(91,141,250,.35)!important}.geCanvas{pointer-events:auto}.editor-columns>div:first-child{pointer-events:auto}// ─────────────────────────────────────────────────────────────────────────────── // src/styles/globals.css // ─────────────────────────────────────────────────────────────────────────────── :root{--bg: #f6f8fc;--panel: #ffffff;--text: #1b2a4a;--muted: #66728a;--accent: #2b6aff;--line: #e3e8f0;--code-bg: #f3f6fb;--note-bg: #f0f5ff}:root{--panel: #f7faff;--line: #d4deea;--muted: #49596d;--text: #1d2838;--accent: #2f6fe4;--accent-strong: #1f51b5;--accent-weak: #e7efff;--gauge-track: #e6ecf5;--gauge-fill: #2f6fe4;--pill-fg: #ffffff;--pill-bg: #2f6fe4;--kv-label: #55657a;--kv-value: #1d2838}:root{color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}main{padding:24px}section h1,section h2{margin:0 0 12px;color:var(--text)}.kv{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line)}.kv span{width:120px;color:var(--muted)}code{background:var(--code-bg);border:1px solid var(--line);padding:2px 6px;border-radius:6px;color:var(--text)}.note{margin-top:12px;background:var(--note-bg);border:1px solid var(--line);padding:10px;border-radius:8px;color:var(--text)}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 60%,white);outline-offset:2px}:root{--bg: #091423;--panel: #0e1a2b;--panel-alt: #0d2442;--line: #203249;--line-weak: #162336;--text: #e6eefc;--muted: #89a1bf;--muted-2: #9fb2cc;--accent: #5b8dfa;--accent-2: #7aa7ff;--danger: #ff5d5d;--warn: #ffb75d;--success: #22c55e;--radius: 12px;--radius-pill: 999px;--shadow: 0 6px 20px rgba(0,0,0,.35)}html,body,#root{height:100%;background:var(--bg);color:var(--text)}section{color:var(--text)}h1,h2,h3,h4{color:var(--text);margin:0 0 10px}h1{font-size:24px}h2{font-size:20px}h3{font-size:16px;color:var(--muted)}.panel,.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.card{padding:12px}.card-title{color:var(--muted);font-size:12px}.card{height:100%;width:100%;min-height:0;min-width:0;display:flex;flex-direction:column}.card>*{min-height:0}button{background:linear-gradient(180deg,#12335c,#0f2a4b);border:1px solid var(--line);color:var(--text);padding:8px 12px;border-radius:var(--radius);cursor:pointer;transition:transform .06s ease,background .2s ease,border-color .2s ease}button:hover{transform:translateY(-1px);border-color:var(--accent)}button:active{transform:translateY(0)}button:disabled{opacity:.55;cursor:not-allowed}button.btn-secondary{background:#11223a;border-color:var(--line)}button.btn-danger{background:#401820;border-color:#5a1f2a;color:#ffd7db}button.btn-ghost{background:transparent;border-color:var(--line)}input,select,textarea{background:#0a192c;color:var(--text);border:1px solid var(--line);border-radius:var(--radius);padding:8px 10px;outline:none;transition:border-color .2s ease,box-shadow .2s ease}input::placeholder,textarea::placeholder{color:#6d87a6}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px #5b8dfa33}label{color:var(--muted);font-size:12px}.form-grid{display:grid;grid-template-columns:160px 1fr;gap:10px 12px;align-items:center}.note{background:var(--panel);border:1px solid var(--line);color:var(--muted-2);border-radius:var(--radius);padding:10px 12px}.note[role=alert]{background:#2a1218;border-color:#642533;color:#ffd7db}.pill{display:inline-block;padding:6px 10px;border-radius:var(--radius-pill);color:#fff;font-weight:600}.pill.green{background:#0b7a28}.pill.gray{background:#4b5563}.pill.red{background:#b4253d}.gauge-bar{height:10px;background:#10243f;border-radius:8px;overflow:hidden}.gauge-fill{height:100%;background:var(--accent)}.gauge-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.kv-table{display:grid;grid-template-columns:180px 1fr;gap:6px 12px}.kv-label{color:var(--muted)}.kv-value{color:var(--text)}.editor-columns{display:grid;grid-template-columns:300px 1fr 360px;gap:16px}.palette{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.palette button{background:#0e1a2b;border:1px solid var(--line)}.palette button:hover{border-color:var(--accent)}.list-panel{border:1px solid var(--line);border-radius:var(--radius);padding:8px;height:480px;overflow:auto;background:var(--panel)}.list-item{padding:8px;border-radius:10px;margin-bottom:6px;cursor:pointer;background:var(--panel);border:1px solid var(--line)}.list-item.active{background:var(--panel-alt);border-color:var(--accent)}.settings-panel{border:1px solid var(--line);border-radius:var(--radius);padding:12px;background:var(--panel)}.preview{margin-top:12px}.preview h4{margin:0 0 8px;color:var(--muted)}.react-grid-layout{background:#0a1728;border:1px dashed var(--line-weak);border-radius:var(--radius);padding:8px}.react-grid-item{background:#0e1a2b;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}.react-grid-item.react-grid-placeholder{background:#5b8dfa40;border-radius:var(--radius)}.react-grid-item>div{height:100%;width:100%;min-height:0;min-width:0}.react-resizable-handle{position:absolute;width:12px;height:12px;bottom:4px;right:4px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);opacity:.7}.toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}.toolbar .spacer{flex:1}.device-card{border:1px solid var(--line);background:var(--panel);border-radius:var(--radius);padding:12px}.device-card .header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.device-card .meta{font-size:12px;color:var(--muted)}*::-webkit-scrollbar{width:10px;height:10px}*::-webkit-scrollbar-thumb{background:#1a2a44;border-radius:8px;border:2px solid #0b1a2f}*::-webkit-scrollbar-track{background:#0b1a2f}@media(max-width:1200px){.editor-columns,.form-grid{grid-template-columns:1fr}}.mt-8{margin-top:8px}.mt-12{margin-top:12px}.mt-16{margin-top:16px}.gap-8{gap:8px}.gap-12{gap:12px}