:root{--color-primary:#6d5bff;--color-primary-hover:#5b48f0;--color-primary-contrast:#fff;--color-primary-soft:#6d5bff1f;--color-primary-ring:#6d5bff47;--color-secondary:#ff8a5c;--gradient-brand:linear-gradient(135deg,#7b5cff,#6d5bff 45%,#ff8a5c);--gradient-brand-soft:linear-gradient(135deg,#7b5cff24,#ff8a5c1f);--color-success:#1fa971;--color-warning:#e0a527;--color-error:#e5484d;--color-error-soft:#e5484d1a;--bg-canvas:#f3f4f8;--bg-surface:#fff;--bg-surface-raised:#fff;--bg-muted:#eef0f5;--bg-glass:#ffffffc7;--border-color:#e2e5ee;--border-strong:#cfd4e1;--text-primary:#14151c;--text-secondary:#4a4f5f;--text-muted:#737a8c;--shadow-color:#181a3014;--shadow-color-strong:#181a3024;--dot-color:#181a3012;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:24px;--space-6:32px;--space-7:48px;--space-8:72px;--radius-sm:8px;--radius-md:12px;--radius-lg:18px;--radius-xl:24px;--radius-pill:999px;--font-sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;--text-xs:0.75rem;--text-sm:0.8125rem;--text-md:0.9375rem;--text-lg:1.125rem;--text-xl:1.5rem;--text-2xl:clamp(1.75rem,1.2rem + 2vw,2.75rem);--ease-out:cubic-bezier(0.22,1,0.36,1);--ease-in:cubic-bezier(0.4,0,1,1);--ease-spring:cubic-bezier(0.34,1.56,0.64,1);--duration-fast:140ms;--duration-base:240ms;--duration-slow:420ms;--transition-fast:var(--duration-fast) var(--ease-out);--transition-base:var(--duration-base) var(--ease-out);--shadow-sm:0 1px 2px var(--shadow-color),0 1px 1px var(--shadow-color);--shadow-md:0 2px 4px var(--shadow-color),0 8px 24px var(--shadow-color);--shadow-lg:0 4px 8px var(--shadow-color),0 20px 48px var(--shadow-color-strong);--shadow-glow:0 6px 20px #6d5bff59;--z-header:100;--z-drawer:200;--z-overlay:300;--z-modal:400;--z-widget:150}:root[data-theme=dark]{--color-primary:#7f6fff;--color-primary-hover:#917fff;--color-primary-soft:#7f6fff29;--color-primary-ring:#7f6fff66;--bg-canvas:#0d0e14;--bg-surface:#15161e;--bg-surface-raised:#1b1c26;--bg-muted:#22232f;--bg-glass:#15161eb8;--border-color:#2a2c39;--border-strong:#3a3d4e;--text-primary:#f1f2f7;--text-secondary:#b5b8c7;--text-muted:#80859a;--shadow-color:#00000059;--shadow-color-strong:#0000008c;--dot-color:#ffffff0d;--color-error-soft:#e5484d29}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--color-primary:#7f6fff;--color-primary-hover:#917fff;--color-primary-soft:#7f6fff29;--color-primary-ring:#7f6fff66;--bg-canvas:#0d0e14;--bg-surface:#15161e;--bg-surface-raised:#1b1c26;--bg-muted:#22232f;--bg-glass:#15161eb8;--border-color:#2a2c39;--border-strong:#3a3d4e;--text-primary:#f1f2f7;--text-secondary:#b5b8c7;--text-muted:#80859a;--shadow-color:#00000059;--shadow-color-strong:#0000008c;--dot-color:#ffffff0d;--color-error-soft:#e5484d29}}*,:after,:before{box-sizing:border-box}#root,body,html{height:100%}html{scroll-behavior:smooth}body{font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-canvas);color:var(--text-primary);font-family:var(--font-sans);margin:0;text-rendering:optimizeLegibility;transition:background-color var(--duration-slow) var(--ease-out),color var(--duration-slow) var(--ease-out)}.app-footer,.app-header,.app-rightpanel,.app-sidebar,.chat-box,.device-card,.drawer,.info-section,.modal,.workspace-toolbar{transition-duration:var(--duration-slow);transition-property:background-color,border-color,color,box-shadow,transform,opacity;transition-timing-function:var(--ease-out)}code{background:var(--bg-muted);border-radius:6px;font-family:var(--font-mono);font-size:.92em;padding:1px 5px}button,input,select,textarea{color:inherit;font-family:inherit;font-size:inherit}button{-webkit-tap-highlight-color:transparent;background:none;border:none;cursor:pointer}input,select{transition:border-color var(--transition-fast),box-shadow var(--transition-fast),background-color var(--transition-fast)}input:focus,select:focus{border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-ring);outline:none}select{cursor:pointer}a{color:var(--color-primary)}::selection{background:var(--color-primary-soft);color:var(--text-primary)}*{scrollbar-color:var(--border-strong) #0000;scrollbar-width:thin}::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#0000}::-webkit-scrollbar-thumb{background:var(--border-strong);background-clip:padding-box;border:3px solid #0000;border-radius:var(--radius-pill)}::-webkit-scrollbar-thumb:hover{background-color:var(--text-muted)}.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}:focus-visible{border-radius:var(--radius-sm);outline:2px solid var(--color-primary);outline-offset:2px}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:after,:before{animation-delay:0ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-delay:0ms!important;transition-duration:.001ms!important}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}@keyframes rise-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes drop-in{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}@keyframes pop-in{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}@keyframes pulse-ring{0%{box-shadow:0 0 0 0 #6d5bff73}70%{box-shadow:0 0 0 16px #6d5bff00}to{box-shadow:0 0 0 0 #6d5bff00}}@keyframes gradient-pan{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.app-shell{display:flex;flex-direction:column;height:100vh}.app-header{align-items:center;animation:drop-in var(--duration-slow) var(--ease-out) both;backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);background:var(--bg-glass);border-bottom:1px solid var(--border-color);display:flex;gap:var(--space-4);padding:var(--space-3) var(--space-5);position:sticky;top:0;z-index:var(--z-header)}.app-header:after{animation:gradient-pan 8s ease infinite;background:var(--gradient-brand);background-size:200% 100%;bottom:-1px;content:"";height:2px;left:0;opacity:.85;position:absolute;right:0}.app-header-brand{align-items:center;display:flex;flex-shrink:0;gap:var(--space-3)}.brand-mark{animation:gradient-pan 6s ease infinite;background:var(--gradient-brand);background-size:160% 160%;border-radius:10px;box-shadow:var(--shadow-glow);color:#fff;display:inline-grid;height:34px;place-items:center;transition:transform var(--duration-base) var(--ease-spring);width:34px}.app-header-brand:hover .brand-mark{transform:rotate(-8deg) scale(1.06)}.brand-logo{color:inherit}.brand-name{font-size:var(--text-lg);font-weight:800;letter-spacing:-.02em}.brand-name-accent{background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;color:#0000}.app-header-actions{align-items:center;display:flex;flex-shrink:0;gap:var(--space-1)}.theme-icon{animation:theme-swap var(--duration-slow) var(--ease-spring)}@keyframes theme-swap{0%{opacity:0;transform:rotate(-90deg) scale(.5)}to{opacity:1;transform:rotate(0) scale(1)}}.app-body{background:var(--bg-canvas);display:flex;flex:1 1;min-height:0}.app-rightpanel,.app-sidebar{background:var(--bg-surface);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;min-height:0;width:300px}.app-rightpanel{border-left:1px solid var(--border-color);border-right:none;overflow-y:auto;padding:var(--space-4)}.sidebar-content{display:flex;flex-direction:column;height:100%;min-height:0}.sidebar-controls{border-bottom:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0;gap:var(--space-3);padding:var(--space-4) var(--space-4) var(--space-3)}.sidebar-scroll{flex:1 1;min-height:0;overflow-y:auto;padding:var(--space-2) var(--space-4) var(--space-4)}.create-device-btn{border-style:dashed;margin-top:var(--space-3)}.workspace{background-color:var(--bg-canvas);background-image:radial-gradient(var(--dot-color) 1px,#0000 1px);background-size:18px 18px;display:flex;flex:1 1;flex-direction:column;min-height:0;min-width:0;overflow-y:auto;scrollbar-gutter:stable}

/* !important because these sit on .icon-btn elements, whose own display
   rule comes later in this file and would otherwise win. */.mobile-only{display:none!important}.btn{align-items:center;border-radius:var(--radius-md);display:inline-flex;font-size:var(--text-sm);font-weight:600;gap:var(--space-2);isolation:isolate;justify-content:center;line-height:1.2;min-height:40px;overflow:hidden;padding:var(--space-2) var(--space-4);position:relative;transition:background-color var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast),box-shadow var(--transition-base),transform var(--duration-fast) var(--ease-out),opacity var(--transition-fast);white-space:nowrap}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:translateY(0) scale(.97)}.btn:disabled{cursor:not-allowed;opacity:.5}.btn-primary{background:var(--color-primary);box-shadow:0 1px 2px #0000001a,inset 0 1px 0 #ffffff2e;color:var(--color-primary-contrast)}.btn-primary:after{background:linear-gradient(110deg,#0000 30%,#ffffff47 50%,#0000 70%);content:"";inset:0;position:absolute;transform:translateX(-120%);transition:transform .6s var(--ease-out);z-index:-1}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);box-shadow:var(--shadow-glow)}.btn-primary:hover:not(:disabled):after{transform:translateX(120%)}.btn-secondary{background:var(--bg-surface);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);color:var(--text-primary)}.btn-secondary:hover:not(:disabled){background:var(--bg-muted);border-color:var(--border-strong)}.btn-danger{background:#0000;border:1px solid color-mix(in srgb,var(--color-error) 45%,#0000);color:var(--color-error)}.btn-danger:hover:not(:disabled){background:var(--color-error);border-color:var(--color-error);box-shadow:0 6px 18px #e5484d4d;color:#fff}.btn-sm{border-radius:var(--radius-sm);font-size:var(--text-xs);min-height:32px;padding:var(--space-1) var(--space-3)}.btn-block{width:100%}a.btn{text-decoration:none}.link-btn{border-radius:var(--radius-sm);color:var(--color-primary);font-size:var(--text-sm);font-weight:600;min-height:32px;padding:var(--space-1) var(--space-2);position:relative;transition:background-color var(--transition-fast),color var(--transition-fast)}.link-btn:hover{background:var(--color-primary-soft)}.icon-btn{align-items:center;border-radius:var(--radius-md);color:var(--text-secondary);display:inline-flex;height:36px;justify-content:center;transition:background-color var(--transition-fast),color var(--transition-fast),transform var(--duration-fast) var(--ease-out);width:36px}.icon-btn:hover:not(:disabled){background:var(--bg-muted);color:var(--text-primary)}.icon-btn:active:not(:disabled){transform:scale(.9)}.icon-btn:disabled{cursor:not-allowed;opacity:.35}.favorite-btn-active,.icon-btn-active{color:var(--color-primary)}.tooltip-wrapper{display:inline-flex;position:relative}.tooltip-bubble{background:var(--text-primary);border-radius:var(--radius-sm);bottom:calc(100% + 8px);box-shadow:var(--shadow-md);color:var(--bg-surface);font-size:var(--text-xs);font-weight:500;left:50%;opacity:0;padding:5px 9px;pointer-events:none;position:absolute;transform:translate(-50%,4px) scale(.94);transition:opacity var(--transition-fast),transform var(--duration-base) var(--ease-spring);white-space:nowrap;z-index:var(--z-overlay)}.tooltip-wrapper:focus-within .tooltip-bubble,.tooltip-wrapper:hover .tooltip-bubble{opacity:1;transform:translate(-50%) scale(1);transition-delay:.25s}.url-bar{gap:var(--space-2);margin:0 auto;max-width:720px;position:relative}.url-bar,.url-input-group{align-items:center;display:flex;flex:1 1;min-width:0}.url-input-group{background:var(--bg-muted);border:1px solid var(--border-color);border-radius:var(--radius-pill);gap:var(--space-1);min-height:42px;padding:0 var(--space-2) 0 var(--space-3);transition:border-color var(--transition-fast),box-shadow var(--transition-base),background-color var(--transition-fast)}.url-input-group:hover{border-color:var(--border-strong)}.url-input-group:focus-within{background:var(--bg-surface);border-color:var(--color-primary);box-shadow:0 0 0 4px var(--color-primary-ring)}.url-input-group.url-input-error{animation:shake .36s var(--ease-out);border-color:var(--color-error);box-shadow:0 0 0 4px var(--color-error-soft)}@keyframes shake{0%,to{transform:translateX(0)}25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}.url-input-group input{background:#0000;border:none;box-shadow:none;flex:1 1;min-width:0;outline:none;padding:var(--space-2)}.url-input-group .icon-btn{border-radius:var(--radius-pill);height:30px;width:30px}.url-bar>.btn{border-radius:var(--radius-pill);min-height:42px;padding:var(--space-2) var(--space-5)}.field-message-slot{left:var(--space-3);margin-top:4px;position:absolute;top:100%}.field-message{align-items:center;color:var(--text-muted);display:flex;font-size:var(--text-xs);gap:4px;margin:0}.field-message-slot .field-message{animation:rise-in var(--duration-base) var(--ease-out)}.field-message-error{color:var(--color-error)}.field-message-success{color:var(--color-success)}.right-panel-content{display:flex;flex-direction:column;gap:var(--space-5)}.right-panel-content h2{color:var(--text-muted);font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;margin:0 0 var(--space-2);text-transform:uppercase}.device-search input{background-color:var(--bg-muted);background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23737a8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");background-position:12px;background-repeat:no-repeat;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3) var(--space-2) 36px;width:100%}.device-search input:focus{background-color:var(--bg-surface)}.device-filters{display:flex;flex-direction:column;gap:var(--space-3)}.filter-pills{display:flex;flex-wrap:wrap;gap:6px}.filter-pill{align-items:center;background:var(--bg-muted);border:1px solid #0000;border-radius:var(--radius-pill);color:var(--text-secondary);display:inline-flex;font-size:var(--text-xs);font-weight:600;gap:6px;padding:6px 12px;transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-base),transform var(--duration-fast) var(--ease-out)}.filter-pill:hover{border-color:var(--border-strong);color:var(--text-primary)}.filter-pill:active{transform:scale(.95)}.filter-pill-active,.filter-pill-active:hover{background:var(--color-primary);border-color:var(--color-primary);box-shadow:0 4px 12px #6d5bff4d;color:var(--color-primary-contrast)}.brand-select{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);font-size:var(--text-sm);padding:var(--space-2) var(--space-3)}.filter-selects{grid-gap:var(--space-2);display:grid;gap:var(--space-2);grid-template-columns:1fr 1fr}.filter-select-field{display:flex;flex-direction:column;gap:4px;min-width:0}.filter-select-field label{color:var(--text-muted);font-size:.6875rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}.filter-select-field select{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-sm);font-size:var(--text-xs);padding:6px var(--space-2);width:100%}.filter-select-field select:hover{border-color:var(--border-strong)}.device-list-actions{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-1);justify-content:space-between;padding:var(--space-2) 0}.selected-count{background:var(--color-primary-soft);border-radius:var(--radius-pill);color:var(--color-primary);font-weight:700;padding:3px 10px}.device-list-action-buttons .link-btn,.selected-count{font-size:var(--text-xs)}.device-group{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-md);margin-bottom:var(--space-2);overflow:hidden;transition:border-color var(--transition-fast),box-shadow var(--transition-base)}.device-group[open]{box-shadow:var(--shadow-sm)}.device-group summary{align-items:center;cursor:pointer;display:flex;font-size:var(--text-sm);font-weight:600;gap:var(--space-2);list-style:none;padding:var(--space-2) var(--space-3);transition:background-color var(--transition-fast);-webkit-user-select:none;user-select:none}.device-group summary:hover{background:var(--bg-muted)}.device-group summary::-webkit-details-marker{display:none}.device-group-chevron{color:var(--text-muted);transition:transform var(--duration-base) var(--ease-out)}.device-group[open] .device-group-chevron{transform:rotate(90deg)}.device-group-count{background:var(--bg-muted);border-radius:var(--radius-pill);color:var(--text-muted);font-size:var(--text-xs);font-weight:600;margin-left:auto;padding:1px 8px}.device-group-list{border-top:1px solid var(--border-color);padding:var(--space-1)}.device-group[open] .device-group-list{animation:rise-in var(--duration-base) var(--ease-out)}.device-row{align-items:center;border-radius:var(--radius-sm);display:flex;gap:2px;position:relative;transition:background-color var(--transition-fast)}.device-row:before{background:var(--color-primary);border-radius:var(--radius-pill);bottom:8px;content:"";left:0;position:absolute;top:8px;transform:scaleY(0);transition:transform var(--duration-base) var(--ease-spring);width:3px}.device-row-active:before{transform:scaleY(1)}.device-row-main{align-items:center;border-radius:var(--radius-sm);display:flex;flex:1 1;gap:var(--space-2);justify-content:space-between;min-height:44px;padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3);text-align:left;transition:transform var(--duration-fast) var(--ease-out),color var(--transition-fast)}.device-row:hover .device-row-main{transform:translateX(2px)}.device-row:hover{background:var(--bg-muted)}.device-row-active,.device-row-active:hover{background:var(--color-primary-soft)}.device-row-active .device-row-main{color:var(--color-primary);font-weight:600}.device-row-name{font-size:var(--text-sm)}.device-row-dims{font-feature-settings:"tnum";color:var(--text-muted);font-size:var(--text-xs);font-variant-numeric:tabular-nums;white-space:nowrap}.favorite-btn{height:32px;width:32px}.favorite-btn-active svg{animation:pop-in var(--duration-slow) var(--ease-spring);color:#f5b301}.no-results{align-items:center;animation:rise-in var(--duration-base) var(--ease-out);color:var(--text-muted);display:flex;flex-direction:column;font-size:var(--text-sm);gap:var(--space-2);padding:var(--space-6) var(--space-3);text-align:center}.no-results p{margin:0}.custom-device-form{display:flex;flex-direction:column;gap:var(--space-3)}.custom-device-form label{color:var(--text-secondary);display:block;font-size:var(--text-xs);font-weight:600;margin-bottom:6px}.custom-device-form input{background:var(--bg-muted);border:1px solid var(--border-color);border-radius:var(--radius-md);min-height:40px;padding:var(--space-2) var(--space-3);width:100%}.custom-device-form input:focus{background:var(--bg-surface)}.dimension-fields{display:flex;gap:var(--space-3)}.dimension-fields>div{flex:1 1}.form-actions{display:flex;gap:var(--space-2);justify-content:flex-end;margin-top:var(--space-2)}.workspace-toolbar{align-items:center;backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);background:var(--bg-glass);border-bottom:1px solid var(--border-color);display:flex;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-3) var(--space-5);position:sticky;top:0;z-index:10}.workspace-toolbar-group{align-items:center;display:flex;gap:var(--space-1)}.segmented{background:var(--bg-muted);border:1px solid var(--border-color);border-radius:var(--radius-pill);gap:2px;padding:3px}.segmented .filter-pill{background:#0000;border-color:#0000}.segmented .filter-pill:hover{background:var(--bg-surface);border-color:#0000}.segmented .filter-pill-active,.segmented .filter-pill-active:hover{background:var(--bg-surface);box-shadow:var(--shadow-sm);color:var(--color-primary)}.zoom-control{background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-pill);padding:2px}.zoom-control .icon-btn{border-radius:var(--radius-pill);height:30px;width:30px}.zoom-readout{font-feature-settings:"tnum";animation:tick var(--duration-base) var(--ease-spring);color:var(--text-secondary);font-size:var(--text-xs);font-variant-numeric:tabular-nums;font-weight:700;min-width:42px;text-align:center}@keyframes tick{0%{opacity:.2;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.zoom-select{background:var(--bg-muted);border:1px solid var(--border-color);border-radius:var(--radius-pill);font-size:var(--text-xs);font-weight:600;padding:4px 8px}.preview-grid{align-content:flex-start;align-items:flex-start;display:flex;flex:1 1;flex-wrap:wrap;gap:var(--space-5);padding:var(--space-5)}.preview-grid-list{flex-direction:column}.preview-grid-compact{gap:var(--space-3)}.device-card{animation:card-in var(--duration-slow) var(--ease-out) backwards;animation-delay:0ms;animation-delay:calc(var(--stagger, 0)*60ms);background:var(--bg-surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:var(--space-2);max-width:100%;padding:var(--space-3);width:360px}.device-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow-lg);transform:translateY(-2px)}.device-card--desktop,.device-card--laptop,.device-card--tablet{width:460px}.preview-grid-compact .device-card{width:220px}.preview-grid-list .device-card{width:min(700px,100%)}@keyframes card-in{0%{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.device-toolbar{align-items:center;border-bottom:1px solid var(--border-color);display:flex;gap:var(--space-2);justify-content:space-between;padding-bottom:var(--space-2)}.device-toolbar-group{align-items:center;display:flex;flex-wrap:wrap;gap:2px}.device-toolbar .icon-btn{height:32px;width:32px}.device-meta{align-items:baseline;color:var(--text-muted);display:flex;flex-wrap:wrap;font-size:var(--text-xs);gap:var(--space-1) var(--space-2);justify-content:space-between;padding:0 var(--space-1)}.device-meta-name{color:var(--text-primary);font-size:var(--text-sm);font-weight:700}.device-meta-brand{color:var(--text-muted);font-size:var(--text-xs);font-weight:500}.device-meta-dims{font-feature-settings:"tnum";font-variant-numeric:tabular-nums}.device-frame-container{display:flex;justify-content:center;width:100%}.phone-frame{background:var(--bg-canvas);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1px var(--border-color),0 1px 0 #ffffff0a;overflow:hidden;position:relative;transition:width var(--duration-slow) var(--ease-out),height var(--duration-slow) var(--ease-out)}.phone-frame:fullscreen{background:#0b0b10;border-radius:0}.phone-inner{left:0;position:absolute;top:0;transform-origin:top left;transition:transform var(--duration-slow) var(--ease-out)}.phone-inner iframe{background:#fff;border:none;display:block}.frame-status{align-items:center;animation:fade-in var(--duration-base) var(--ease-out);background:color-mix(in srgb,var(--bg-canvas) 94%,#0000);color:var(--text-secondary);display:flex;flex-direction:column;font-size:var(--text-xs);gap:var(--space-3);inset:0;justify-content:center;padding:var(--space-4);position:absolute;text-align:center;z-index:2}.frame-status p{line-height:1.5;margin:0;max-width:300px}.frame-status-loading{align-items:stretch;justify-content:flex-start;padding:var(--space-4)}.frame-status-label{align-items:center;display:inline-flex;font-weight:600;gap:var(--space-2);justify-content:center;margin-top:auto}.skeleton{display:flex;flex-direction:column;gap:10px}.skeleton-bar{animation:shimmer 1.4s linear infinite;background:linear-gradient(90deg,var(--bg-muted) 25%,var(--border-color) 50%,var(--bg-muted) 75%);background-size:200% 100%;border-radius:var(--radius-sm);display:block;height:12px}.skeleton-bar-hero{border-radius:var(--radius-md);height:72px}.skeleton-bar-short{width:60%}.frame-status-warning{background:var(--bg-canvas)}.frame-hint{animation:fade-in var(--duration-base) var(--ease-out);color:var(--text-muted);font-size:var(--text-xs);margin:0;text-align:center}.frame-hint .link-btn{font-size:var(--text-xs);min-height:0;padding:2px 6px}.frame-status-actions{display:flex;gap:var(--space-2)}.spinner{animation:spin .7s linear infinite;border:2px solid var(--border-color);border-radius:50%;border-top-color:var(--color-primary);height:16px;width:16px}.empty-state,.error-state{align-items:center;animation:rise-in var(--duration-slow) var(--ease-out);color:var(--text-secondary);display:flex;flex:1 1;flex-direction:column;gap:var(--space-2);justify-content:center;margin:auto;padding:var(--space-7);text-align:center}.empty-state p,.error-state p{font-size:var(--text-sm);line-height:1.55;margin:0;max-width:380px}.empty-state-badge{animation:float 4s ease-in-out infinite;background:var(--gradient-brand-soft);border:1px solid var(--border-color);border-radius:22px;display:grid;height:72px;margin-bottom:var(--space-2);place-items:center;width:72px}.empty-state-icon{color:var(--color-primary)}.error-state-icon{color:var(--color-error)}.empty-state h3,.error-state h3{color:var(--text-primary);font-size:var(--text-lg);letter-spacing:-.01em;margin:0}.right-panel-content .empty-state{padding:var(--space-4) var(--space-2)}.right-panel-content .empty-state-badge{animation:none;border-radius:14px;height:48px;width:48px}.right-panel-content .empty-state h3{font-size:var(--text-sm)}.muted-text,.right-panel-content .empty-state p{font-size:var(--text-xs)}.muted-text{color:var(--text-muted)}.panel-actions{display:flex;justify-content:flex-end}.history-list,.selected-device-list,.session-list{display:flex;flex-direction:column;gap:2px;list-style:none;margin:0;padding:0}.history-item,.selected-device-list li,.session-row{align-items:center;animation:rise-in var(--duration-base) var(--ease-out) backwards;border-radius:var(--radius-sm);display:flex;gap:var(--space-1);transition:background-color var(--transition-fast)}.selected-device-list li{font-size:var(--text-sm);justify-content:space-between;padding:var(--space-1) var(--space-1) var(--space-1) var(--space-3)}.history-item:hover,.selected-device-list li:hover,.session-row:hover{background:var(--bg-muted)}.history-item-main,.session-row-main{align-items:flex-start;border-radius:var(--radius-sm);display:flex;flex:1 1;flex-direction:column;gap:1px;min-width:0;padding:var(--space-2) var(--space-3);text-align:left}.history-hostname,.session-name{font-size:var(--text-sm);font-weight:600}.history-url{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-timestamp,.history-url,.session-meta{color:var(--text-muted);font-size:var(--text-xs)}.session-row-actions{display:flex;flex-shrink:0;gap:0;opacity:.55;transition:opacity var(--transition-fast)}.session-row:focus-within .session-row-actions,.session-row:hover .session-row-actions{opacity:1}.session-row-actions .icon-btn{height:30px;width:30px}.session-save-form{display:flex;gap:var(--space-2);margin-bottom:var(--space-1)}.session-save-form input{background:var(--bg-muted);border:1px solid var(--border-color);border-radius:var(--radius-md);flex:1 1;font-size:var(--text-sm);min-width:0;padding:var(--space-2) var(--space-3)}.session-rename-input{background:var(--bg-surface);border:1px solid var(--color-primary);border-radius:var(--radius-sm);flex:1 1;min-width:0;padding:var(--space-2)}.overlay{align-items:center;animation:fade-in var(--duration-base) var(--ease-out);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);background:#0a0a1473;display:flex;inset:0;justify-content:center;padding:var(--space-4);position:fixed;z-index:var(--z-modal)}.modal{animation:modal-in var(--duration-slow) var(--ease-spring);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);max-height:90vh;overflow-y:auto;width:min(480px,100%)}.overlay.is-closing{animation:fade-out .18s var(--ease-in) forwards;pointer-events:none}.overlay.is-closing .modal{animation:modal-out .18s var(--ease-in) forwards}@keyframes modal-in{0%{opacity:0;transform:translateY(16px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes modal-out{to{opacity:0;transform:translateY(8px) scale(.97)}}.modal-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:var(--space-4) var(--space-5)}.modal-header h2{font-size:var(--text-lg);letter-spacing:-.01em;margin:0}.modal-body{line-height:1.6;padding:var(--space-5)}.modal-body p{color:var(--text-secondary);margin:0}.modal-footer{background:var(--bg-muted);border-top:1px solid var(--border-color);display:flex;gap:var(--space-2);justify-content:flex-end;padding:var(--space-4) var(--space-5)}.drawer-overlay{animation:fade-in var(--duration-base) var(--ease-out);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);background:#0a0a1473;inset:0;position:fixed;z-index:var(--z-drawer)}.drawer{background:var(--bg-surface);bottom:0;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;position:fixed;top:0;width:min(85vw,340px)}.drawer-left{animation:drawer-in-left var(--duration-slow) var(--ease-out);border-right:1px solid var(--border-color);left:0}.drawer-right{animation:drawer-in-right var(--duration-slow) var(--ease-out);border-left:1px solid var(--border-color);right:0}.drawer-overlay.is-closing{animation:fade-out .22s var(--ease-in) forwards;pointer-events:none}.drawer-overlay.is-closing .drawer-left{animation:drawer-out-left .22s var(--ease-in) forwards}.drawer-overlay.is-closing .drawer-right{animation:drawer-out-right .22s var(--ease-in) forwards}@keyframes drawer-in-left{0%{transform:translateX(-100%)}to{transform:translateX(0)}}@keyframes drawer-in-right{0%{transform:translateX(100%)}to{transform:translateX(0)}}@keyframes drawer-out-left{to{transform:translateX(-100%)}}@keyframes drawer-out-right{to{transform:translateX(100%)}}.drawer-header{align-items:center;border-bottom:1px solid var(--border-color);display:flex;justify-content:space-between;padding:var(--space-4)}.drawer-header h2{font-size:var(--text-md);margin:0}.drawer-body{flex:1 1;min-height:0;overflow-y:auto;padding:var(--space-4)}.drawer-body>.sidebar-content{height:calc(100% + var(--space-4)*2);margin:calc(var(--space-4)*-1)}.reveal{opacity:0;transform:translateY(24px);transition:opacity var(--duration-slow) var(--ease-out) 0ms,transform .6s var(--ease-out) 0ms,border-color var(--transition-fast),box-shadow var(--transition-base);transition:opacity var(--duration-slow) var(--ease-out) var(--reveal-delay,0ms),transform .6s var(--ease-out) var(--reveal-delay,0ms),border-color var(--transition-fast),box-shadow var(--transition-base)}.reveal.is-visible{opacity:1;transform:translateY(0)}.info-section{background:var(--bg-surface);border-top:1px solid var(--border-color);overflow:hidden;padding:var(--space-8) var(--space-5);position:relative}.info-glow{background:radial-gradient(closest-side,#7b5cff2e,#ff8a5c14 60%,#0000);filter:blur(10px);height:420px;left:50%;pointer-events:none;position:absolute;top:-180px;transform:translateX(-50%);width:720px}.info-hero{margin:0 auto;max-width:760px;position:relative;text-align:center}.info-eyebrow{align-items:center;background:var(--color-primary-soft);border-radius:var(--radius-pill);color:var(--color-primary);display:inline-flex;font-size:var(--text-xs);font-weight:700;gap:6px;letter-spacing:.02em;padding:6px 14px}.info-hero h2{font-size:var(--text-2xl);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:var(--space-4) 0 var(--space-3)}.text-gradient{animation:gradient-pan 8s ease infinite;background:var(--gradient-brand);-webkit-background-clip:text;background-clip:text;background-size:200% 200%;color:#0000}.info-hero p{color:var(--text-secondary);font-size:var(--text-md);line-height:1.7;margin:0 auto;max-width:640px}.info-grid{grid-gap:var(--space-4);display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin:var(--space-7) auto;max-width:1000px;position:relative}.info-card{background:var(--bg-surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5);text-align:left}.info-card.is-visible:hover{border-color:var(--color-primary-ring);box-shadow:var(--shadow-lg);transform:translateY(-4px)}.info-card-icon{background:var(--gradient-brand-soft);border-radius:12px;color:var(--color-primary);display:inline-grid;height:42px;margin-bottom:var(--space-3);place-items:center;transition:transform var(--duration-base) var(--ease-spring);width:42px}.info-card:hover .info-card-icon{transform:scale(1.1) rotate(-6deg)}.info-card h3{font-size:var(--text-md);margin:0 0 var(--space-2)}.info-card p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.6;margin:0}.info-limitations{align-items:flex-start;background:var(--bg-muted);border:1px solid var(--border-color);border-radius:var(--radius-lg);color:var(--text-secondary);display:flex;gap:var(--space-4);margin:var(--space-6) auto;max-width:760px;padding:var(--space-5)}.info-limitations-icon{background:var(--bg-surface);border-radius:12px;box-shadow:var(--shadow-sm);color:var(--color-success);display:grid;flex-shrink:0;height:40px;place-items:center;width:40px}.info-limitations h3{color:var(--text-primary);font-size:var(--text-md);margin:0 0 var(--space-1)}.info-limitations p{font-size:var(--text-sm);line-height:1.65;margin:0}.info-faq{margin:var(--space-7) auto var(--space-5);max-width:760px}.info-faq>h3{font-size:var(--text-xl);letter-spacing:-.02em;margin:0 0 var(--space-4);text-align:center}.faq-list{display:flex;flex-direction:column;gap:var(--space-2)}.faq-item{background:var(--bg-surface-raised);border:1px solid var(--border-color);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-base)}.faq-item:hover{border-color:var(--border-strong)}.faq-item[open]{border-color:var(--color-primary-ring);box-shadow:var(--shadow-md)}.faq-item summary{align-items:center;border-radius:var(--radius-md);cursor:pointer;display:flex;font-weight:600;gap:var(--space-3);justify-content:space-between;list-style:none;padding:var(--space-4)}.faq-item summary::-webkit-details-marker{display:none}.faq-chevron{color:var(--text-muted);flex-shrink:0;transition:transform var(--duration-base) var(--ease-out),color var(--transition-fast)}.faq-item[open] .faq-chevron{color:var(--color-primary);transform:rotate(180deg)}.faq-item p{color:var(--text-secondary);font-size:var(--text-sm);line-height:1.65;margin:0;padding:0 var(--space-4) var(--space-4)}.faq-item[open] p{animation:rise-in var(--duration-base) var(--ease-out)}.disclaimer{color:var(--text-muted);font-size:var(--text-xs);line-height:1.6;margin:var(--space-5) auto 0;max-width:720px;text-align:center}.app-footer{background:var(--bg-surface);border-top:1px solid var(--border-color);padding:var(--space-6) var(--space-5);position:relative}.app-footer:before{background:linear-gradient(90deg,#0000,var(--color-primary),#0000);content:"";height:1px;left:10%;opacity:.6;position:absolute;right:10%;top:-1px}.app-footer-inner{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-4);justify-content:space-between;margin:0 auto;max-width:1100px}.app-footer-brand{display:flex;flex-direction:column;gap:4px}.app-footer-made-by{color:var(--text-primary);font-weight:700}.app-footer-copyright{color:var(--text-muted);font-size:var(--text-xs)}.app-footer-links{align-items:center;display:flex;flex-wrap:wrap;gap:var(--space-2)}.app-footer-link{align-items:center;color:var(--text-secondary);display:inline-flex;font-size:var(--text-sm);font-weight:600;gap:6px;min-height:40px;padding:0 var(--space-2);position:relative;text-decoration:none;transition:color var(--transition-fast)}.app-footer-link:after{background:var(--color-primary);border-radius:2px;bottom:8px;content:"";height:2px;left:var(--space-2);position:absolute;right:var(--space-2);transform:scaleX(0);transition:transform var(--duration-base) var(--ease-out)}.app-footer-link:hover{color:var(--color-primary)}.app-footer-link:hover:after{transform:scaleX(1)}.app-footer-link-button{background:none;border:none}.back-to-top{align-items:center;border:1px solid var(--border-color);border-radius:var(--radius-pill);color:var(--text-secondary);display:inline-flex;font-size:var(--text-sm);font-weight:600;gap:6px;min-height:40px;padding:var(--space-2) var(--space-4);transition:background-color var(--transition-fast),color var(--transition-fast),border-color var(--transition-fast)}.back-to-top svg{transition:transform var(--duration-base) var(--ease-spring)}.back-to-top:hover{background:var(--color-primary-soft);border-color:var(--color-primary-ring);color:var(--color-primary)}.back-to-top:hover svg{transform:translateY(-3px)}.contact-widget{align-items:flex-end;bottom:var(--space-5);display:flex;flex-direction:column;gap:var(--space-3);position:fixed;right:var(--space-5);z-index:var(--z-widget)}.chat-button{align-items:center;animation:pop-in .5s var(--ease-spring) .6s backwards,pulse-ring 2.6s ease-out 1.6s 3;background:var(--gradient-brand);background-size:160% 160%;border-radius:50%;box-shadow:var(--shadow-glow),var(--shadow-lg);color:#fff;display:flex;height:56px;justify-content:center;transition:transform var(--duration-base) var(--ease-spring),box-shadow var(--transition-base);width:56px}.chat-button:hover{transform:scale(1.08) rotate(-4deg)}.chat-button:active{transform:scale(.94)}.chat-button-icon{animation:theme-swap var(--duration-base) var(--ease-spring)}.chat-box{animation:chat-in var(--duration-slow) var(--ease-spring);background:var(--bg-surface);border:1px solid var(--border-color);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);overflow:hidden;transform-origin:bottom right;width:min(300px,82vw)}@keyframes chat-in{0%{opacity:0;transform:translateY(12px) scale(.85)}to{opacity:1;transform:translateY(0) scale(1)}}.chat-header{animation:gradient-pan 8s ease infinite;background:var(--gradient-brand);background-size:200% 200%;color:#fff;font-weight:700;letter-spacing:-.01em;padding:var(--space-4);text-align:center}.chat-body{flex-direction:column;font-size:var(--text-sm);padding:var(--space-4)}.chat-body,.chat-body p{display:flex;gap:var(--space-2)}.chat-body p{align-items:center;color:var(--text-secondary);margin:0;word-break:break-all}.chat-body .btn:first-of-type{margin-top:var(--space-2)}@media (max-width:959px){.mobile-only{display:inline-flex!important}.app-header{flex-wrap:wrap;gap:var(--space-2) var(--space-3);padding:var(--space-3)}.app-header-brand{flex:1 1}.url-bar{flex:1 1 100%;margin:0 0 var(--space-3);max-width:none;order:3}.workspace-toolbar{gap:var(--space-2);padding:var(--space-3)}}@media (max-width:480px){.contact-widget{bottom:var(--space-4);right:var(--space-4)}.info-section{padding:var(--space-7) var(--space-4)}.info-limitations{flex-direction:column}.preview-grid{padding:var(--space-4)}}
/*# sourceMappingURL=main.93815a8c.css.map*/