*,:before,:after{box-sizing:border-box}:root{--bg-primary:#f8fafc;--bg-secondary:#fff;--bg-card:#fff;--text-primary:#0f172a;--text-secondary:#475569;--accent-primary:#ea580c;--accent-hover:#c2410c;--accent-purple:#7c3aed;--accent-blue:#2563eb;--accent-green:#059669;--accent-red:#dc2626;--border-color:#e2e8f0;--card-radius:10px;--control-radius:10px;--card-shadow:0 22px 40px -28px #0f172a52, 0 14px 24px -22px #0f172a2e, 0 2px 6px #0f172a0d;--control-shadow:0 14px 24px -22px #0f172a38, 0 2px 4px #0f172a0a;--glass-bg:#ffffffd9;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:var(--text-primary);background-color:var(--bg-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5}[data-theme=dark]{--bg-primary:#0b0e14;--bg-secondary:#151b23;--bg-card:#1f2937;--text-primary:#f1f5f9;--text-secondary:#94a3b8;--accent-primary:#fb923c;--accent-hover:#f97316;--accent-purple:#a78bfa;--accent-blue:#60a5fa;--accent-green:#34d399;--accent-red:#f87171;--border-color:#334155;--card-shadow:0 26px 46px -28px #020617ad, 0 18px 28px -24px #0f172a80, 0 2px 8px #02061757;--control-shadow:0 18px 28px -24px #0206178c, 0 2px 8px #02061742;--glass-bg:#151b23d9;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}[data-theme=vanilla]{--bg-primary:#fdf6e3;--bg-secondary:#faf0d7;--bg-card:#fffbf0a6;--text-primary:#3c3226;--text-secondary:#7a6e5d;--accent-primary:#c9956a;--accent-hover:#b8804f;--accent-purple:#b8a0d2;--accent-blue:#8bb4d9;--accent-green:#9dc494;--accent-red:#d99a90;--border-color:#d2c3a873;--card-shadow:0 20px 36px -28px #b4a07852, 0 8px 18px -18px #b4a07833;--control-shadow:0 14px 24px -22px #b4a07838, 0 2px 6px #b4a07814;--glass-bg:#fff8e78c;--btn-bg:#d4b48240;--btn-bg-hover:#d4b48266;--btn-border:#d2c3a859;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}body{background-color:var(--bg-primary);min-width:320px;min-height:100vh;color:var(--text-primary);margin:0;transition:background-color .3s,color .3s;overflow-x:hidden}#root{width:100%;min-height:100vh}h1,h2,h3,h4,h5,h6{letter-spacing:-.02em;color:var(--text-primary);font-family:Inter,sans-serif;font-weight:700}.mono-text{font-family:JetBrains Mono,monospace}a{color:var(--accent-primary);-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500;transition:color .3s}a:hover{color:var(--accent-hover)}.surface-panel{background:var(--bg-card);border:1px solid var(--border-color);border-radius:var(--card-radius);box-shadow:var(--card-shadow);transition:transform .2s,box-shadow .2s,background-color .3s,border-color .3s}.surface-panel:hover{transform:translateY(-2px);box-shadow:0 12px 20px -3px #0003}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--card-radius);box-shadow:var(--card-shadow)}select{appearance:none;color:var(--text-primary);background-image:linear-gradient(135deg, transparent 50%, var(--text-secondary) 50%), linear-gradient(45deg, var(--text-secondary) 50%, transparent 50%), linear-gradient(to right, #94a3b824, #94a3b824);background-position:calc(100% - 18px) calc(50% - 3px),calc(100% - 12px) calc(50% - 3px),calc(100% - 2.35rem);background-repeat:no-repeat;background-size:6px 6px,6px 6px,1px 58%;transition:border-color .18s,box-shadow .18s,transform .18s;background-color:var(--bg-card)!important;border:1px solid var(--border-color)!important;border-radius:var(--control-radius)!important;box-shadow:var(--control-shadow)!important;padding-right:2.6rem!important}select:hover{border-color:color-mix(in srgb, var(--accent-primary) 22%, var(--border-color))!important}select:focus{outline:none;border-color:color-mix(in srgb, var(--accent-primary) 60%, var(--border-color))!important;box-shadow:0 0 0 1px color-mix(in srgb, var(--accent-primary) 28%, transparent), var(--control-shadow)!important}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:.4s ease-out forwards fadeIn}.animate-pulse{animation:2s cubic-bezier(.4,0,.6,1) infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}button{background-color:var(--accent-primary);color:#fff;cursor:pointer;border:1px solid #0000;border-radius:6px;padding:.6em 1.2em;font-family:Inter,sans-serif;font-size:.9em;font-weight:600;transition:all .2s;box-shadow:0 2px 4px #0000001a}button:hover{background-color:var(--accent-hover);transform:translateY(-1px)}button:active{transform:translateY(1px)}.text-accent{color:var(--accent-primary)}.text-blue{color:var(--accent-blue)}.text-purple{color:var(--accent-purple)}.text-green{color:var(--accent-green)}.text-red{color:var(--accent-red)}.text-subtle{color:var(--text-secondary)}[data-theme=vanilla] button{background:var(--btn-bg,var(--accent-primary));color:var(--text-primary);border:1px solid var(--btn-border,transparent);-webkit-backdrop-filter:blur(16px);box-shadow:0 2px 12px #b4a0781a,inset 0 1px #ffffff80}[data-theme=vanilla] button:hover{background:var(--btn-bg-hover,var(--accent-hover));transform:translateY(-1px);box-shadow:0 4px 16px #b4a07829,inset 0 1px #fff9}[data-theme=vanilla] .surface-panel{-webkit-backdrop-filter:blur(20px);background:#fffbf08c;border:1px solid #d2c3a859;box-shadow:0 8px 32px #b4a07814,inset 0 1px #fff9}[data-theme=vanilla] .surface-panel:hover{background:#fffbf0b3;box-shadow:0 12px 40px #b4a0781f,inset 0 1px #ffffffb3}[data-theme=vanilla] .glass-panel{-webkit-backdrop-filter:blur(24px);background:#fff8e773;border:1px solid #d2c3a84d;box-shadow:0 8px 32px #b4a0780f,inset 0 1px #ffffff80}.dashboard-container{box-sizing:border-box;flex-direction:column;gap:1.5rem;width:100%;max-width:1200px;margin:0 auto;padding:1rem;display:flex}@media (width>=768px){.dashboard-container{gap:2rem;padding:2rem}}.loading-screen{color:var(--accent-primary);text-align:center;align-self:center;margin:auto;padding:2rem;font-size:1.25rem}.dev-toggle-bar{background:var(--bg-card);border:1px solid var(--border-color);border-radius:6px;flex-wrap:wrap;align-items:center;gap:1rem;padding:.5rem 1rem;display:flex}.active-host-btn{background:var(--accent-primary);color:#fff;padding:.4rem .8rem;font-size:.8rem}.inactive-host-btn{color:var(--text-secondary);border:1px solid var(--border-color);background:0 0;padding:.4rem .8rem;font-size:.8rem}.inactive-host-btn:hover{border-color:var(--text-secondary)}.env-badge{color:var(--accent-primary);vertical-align:middle;background:#ea580c33;border-radius:4px;margin-left:.5rem;padding:.2rem .5rem;font-size:.7rem}.header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:1.25rem 1.5rem;display:flex}.logo-container{align-items:center;gap:.75rem;display:flex}.retro-key-logo{justify-content:center;align-items:center;width:48px;height:48px;display:flex}.ctrl-key-svg{width:100%;height:100%;display:block}.retro-key-text{font-family:JetBrains Mono,monospace}.logo-container h1{letter-spacing:-.03em;margin:0;font-size:1.4rem;font-weight:800}.header-controls{align-items:center;gap:1.5rem;display:flex}.theme-toggle{color:var(--text-secondary);border:1px solid var(--border-color);box-shadow:none;background:0 0;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;padding:.5rem;font-size:1.2rem;transition:all .2s;display:flex}.theme-toggle:hover{background:var(--bg-primary);color:var(--text-primary);border-color:var(--accent-primary);transform:translateY(0)}.user-profile{align-items:center;gap:.75rem;display:flex}.avatar{background:var(--accent-primary);color:#fff;border-radius:8px;justify-content:center;align-items:center;width:38px;height:38px;font-size:1.1rem;font-weight:700;display:flex}.user-name{font-weight:600;display:none}@media (width>=640px){.user-name{display:inline}}.metrics-grid{grid-template-columns:1fr;gap:1rem;display:grid}@media (width>=640px){.metrics-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.5rem}}.metric-card{flex-direction:column;gap:.5rem;padding:1.5rem;display:flex}.metric-card h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.05em;margin:0;font-size:.85rem;font-weight:600}.metric-value{color:var(--text-primary);margin:0;font-family:JetBrains Mono,monospace;font-size:3rem;font-weight:800;line-height:1.1}.metric-trend{font-size:.85rem;font-weight:500}.mt-4{margin-top:1.5rem}.active-panel{padding:1.5rem}@media (width>=768px){.active-panel{padding:2rem}}.panel-header{border-bottom:1px solid var(--border-color);flex-direction:column;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:2rem;padding-bottom:1.5rem;display:flex}@media (width>=768px){.panel-header{flex-direction:row;align-items:center;gap:0}}.panel-header h2{margin:0;font-size:1.25rem}.mode-selector{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:8px;gap:.25rem;width:100%;padding:.25rem;display:flex;overflow-x:auto}@media (width>=768px){.mode-selector{width:auto}}.mode-btn{color:var(--text-secondary);box-shadow:none;white-space:nowrap;background:0 0;border-radius:6px;flex:1;padding:.5rem 1rem;font-size:.85rem}.mode-btn:hover{color:var(--text-primary);transform:none}.mode-btn.active{background:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-color);font-weight:600;box-shadow:0 1px 3px #0000001a}.panel-body{min-height:250px}.tenant-list-table{border-collapse:collapse;width:100%}.tenant-list-table th{text-transform:uppercase;border-bottom:1px solid var(--border-color);padding-bottom:1rem;font-size:.85rem}.tenant-list-table td{border-bottom:1px solid #ffffff0d;padding:1rem 0}.text-left{text-align:left}.text-right{text-align:right}.font-bold{font-weight:700}.text-btn{color:var(--accent-blue);box-shadow:none;border:1px solid var(--border-color);background:0 0;padding:.4rem .8rem}.text-btn:hover{background:var(--bg-primary);border-color:var(--accent-blue)}.request-list{flex-direction:column;gap:1rem;display:flex}.request-item{background:var(--bg-primary);border:1px solid var(--border-color);border-left:4px solid var(--accent-blue);border-radius:8px;flex-direction:column;justify-content:space-between;align-items:flex-start;gap:1rem;padding:1.25rem;transition:background .2s;display:flex}@media (width>=640px){.request-item{flex-direction:row;align-items:center;gap:0}}.request-item:hover{background:var(--bg-card)}.request-item:first-child{border-left-color:var(--accent-red)}.req-details{flex-direction:column;display:flex}.req-app{color:var(--text-primary);font-size:1rem;font-weight:700}.req-user{font-size:.85rem}.req-risk{letter-spacing:.05em;text-transform:uppercase;border-radius:20px;padding:.25rem .75rem;font-size:.75rem;font-weight:700}.req-risk.high{color:var(--accent-red);background:#f8717126}.req-risk.low{color:var(--accent-green);background:#34d39926}.reject-btn{background:var(--bg-card);color:var(--accent-red);border:1px solid var(--accent-red);box-shadow:none;width:100%}@media (width>=640px){.reject-btn{width:auto}}.reject-btn:hover{background:#f871711a}.approve-btn{background:var(--accent-primary);color:#fff;width:100%}@media (width>=640px){.approve-btn{width:auto}}.qr-demo{border:2px dashed var(--border-color);background:var(--bg-primary);text-align:center;border-radius:8px;flex-direction:column;justify-content:center;align-items:center;height:250px;padding:1rem;display:flex}.qr-placeholder{background:var(--text-primary);color:var(--bg-primary);letter-spacing:1px;border-radius:8px;margin-bottom:1rem;padding:1.5rem;font-weight:700}.react-grid-layout{transition:height .2s;position:relative}.react-grid-item{transition:left .2s,top .2s,width .2s,height .2s}.react-grid-item.cssTransforms{transition-property:transform,width,height}.react-grid-item.resizing{z-index:1;will-change:width, height;opacity:.9}.react-grid-item.react-draggable-dragging{z-index:3;will-change:transform;opacity:.9;border-radius:10px;box-shadow:0 28px 48px -18px #0f172a52}.react-grid-item>.react-resizable-handle{width:20px;height:20px;position:absolute}.react-grid-item>.react-resizable-handle:after{content:"";border-right:2px solid var(--accent-primary);border-bottom:2px solid var(--accent-primary);opacity:.4;width:8px;height:8px;transition:opacity .15s;position:absolute;bottom:4px;right:4px}.react-grid-item:hover>.react-resizable-handle:after{opacity:.8}.react-grid-item>.react-resizable-handle.react-resizable-handle-se{cursor:se-resize;bottom:0;right:0}.react-grid-placeholder{border-radius:10px;transition:all .15s;background:var(--accent-primary)!important;opacity:.08!important;border:2px dashed var(--accent-primary)!important}