@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap";:root{color:#e9edf5;font-synthesis:none;background:#070910;font-family:DM Sans,sans-serif}*{box-sizing:border-box}body{background:#070910;min-width:320px;margin:0}.shell{background:radial-gradient(circle at 75% 0,#121b27 0,#0000 37%),#080a10;grid-template-columns:280px 1fr;min-height:100vh;display:grid}.sidebar{background:#0a0c12;border-right:1px solid #20242d;flex-direction:column;height:100vh;padding:24px 16px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;padding:0 8px 28px;display:flex}.brandmark{color:#07100d;background:#4eeda9;border-radius:10px;place-items:center;width:38px;height:38px;display:grid;box-shadow:0 0 25px #3df3a52c}.brand strong{letter-spacing:.3px;font:800 16px Manrope}.brand strong span{color:#50eba9}.brand small{letter-spacing:2px;color:#626875;margin-top:3px;font:600 8px Manrope;display:block}.overview,.add-side{color:#d8dce4;background:#131720;border:1px solid #242a33;border-radius:9px;align-items:center;gap:10px;width:100%;padding:11px 12px;font:600 13px inherit;display:flex}.overview kbd{color:#9ba2af;background:#232934;border-radius:5px;margin-left:auto;padding:2px 7px;font:600 11px inherit}.section-title{color:#636a76;letter-spacing:1.4px;justify-content:space-between;align-items:center;margin:25px 8px 9px;font:700 9px Manrope;display:flex}.section-title button,.dots,.sidebar-foot>button{color:#737b88;background:0 0;border:0;place-items:center;display:grid}.panels{flex:1;min-height:80px;overflow:auto}.panel-row{border-radius:9px;margin:3px 0;display:flex;position:relative}.panel-row.active{background:#151b22}.panel-row.active:before{content:"";background:#4ceca9;border-radius:2px;width:2px;position:absolute;top:11px;bottom:11px;left:0;box-shadow:0 0 10px #4ceca9}.panel-main{color:#abb1bc;text-align:left;background:0 0;border:0;flex:1;align-items:center;gap:10px;min-width:0;padding:10px 7px 10px 10px;display:flex}.panel-row.active .panel-main{color:#edf1f6}.panel-icon{color:#727a88;border:1px solid #2a303a;border-radius:7px;place-items:center;width:28px;height:28px;font:700 9px Manrope;display:grid}.active .panel-icon{color:#4ceca9;background:#10251d;border-color:#2b614d}.panel-copy{flex:1;min-width:0}.panel-copy b,.panel-copy small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.panel-copy b{font-size:12px}.panel-copy small{color:#69717e;margin-top:3px;font-size:9px}.badge{color:#07100c;text-align:center;background:#4ceca9;border-radius:12px;min-width:19px;padding:2px 5px;font-size:10px;font-weight:800}.dots{width:30px}.pop{z-index:3;background:#171b23;border:1px solid #303641;border-radius:7px;padding:4px;position:absolute;top:38px;right:3px;box-shadow:0 12px 30px #0008}.pop button{color:#ff8c8c;background:0 0;border:0;align-items:center;gap:7px;padding:7px 10px;font:500 11px inherit;display:flex}.add-side{color:#7e8693;background:0 0;border-style:dashed;justify-content:center;margin-top:12px}.add-side:hover{color:#4ceca9;border-color:#2e7157}.sidebar-foot{border-top:1px solid #1e222b;align-items:center;margin-top:18px;padding:18px 6px 0;display:flex}.status{flex:1;align-items:center;gap:9px;display:flex}.status>span,.live span{background:#48e6a2;border-radius:50%;width:7px;height:7px;box-shadow:0 0 9px #48e6a2}.status b,.status small{display:block}.status b{font-size:10px}.status small{color:#626a77;margin-top:3px;font-size:9px}main{min-width:0}header{-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);background:#0a0c11aa;border-bottom:1px solid #20242d;justify-content:space-between;align-items:center;height:70px;padding:0 30px;display:flex}.crumb{color:#69717e;gap:9px;font-size:12px;display:flex}.crumb b{color:#343a44}.crumb strong{color:#cdd2dc}.header-actions{align-items:center;gap:10px;display:flex}.sound,.bell,.tools button,.tools a{color:#9199a6;background:#12161d;border:1px solid #292f39;border-radius:8px;align-items:center;gap:7px;height:34px;padding:0 11px;font:600 10px inherit;text-decoration:none;display:flex}.sound.on{color:#64e5ae;background:#102019;border-color:#25553f}.bell{padding:0 9px;position:relative}.bell i{color:#07100d;background:#55e9aa;border-radius:50%;width:16px;height:16px;font:800 9px/16px inherit;position:absolute;top:-5px;right:-4px}.avatar{color:#69e9b2;background:linear-gradient(135deg,#324036,#1c2822);border:1px solid #3a4d42;border-radius:8px;place-items:center;width:33px;height:33px;font:700 10px Manrope;display:grid}.workspace{max-width:1600px;margin:auto;padding:33px 38px 30px}.topline{justify-content:space-between;align-items:flex-end;margin-bottom:22px;display:flex}.eyebrow{color:#4ceca9;letter-spacing:1.6px;align-items:center;gap:6px;font:700 9px Manrope;display:flex}.topline h1{letter-spacing:-.6px;margin:8px 0 4px;font:700 25px Manrope}.topline p{color:#69717e;margin:0;font-size:11px}.tools{gap:8px;display:flex}.tools button:hover,.tools a:hover{color:#e9edf5;border-color:#47505e}.frame-card{background:#10131a;border:1px solid #292e37;border-radius:12px;height:calc(100vh - 192px);min-height:440px;overflow:hidden;box-shadow:0 24px 80px #0006}.frame-bar{background:#151820;border-bottom:1px solid #272c35;align-items:center;gap:15px;height:47px;padding:0 15px;display:flex}.traffic{gap:6px;display:flex}.traffic i{background:#414751;border-radius:50%;width:7px;height:7px}.traffic i:first-child{background:#ff746e}.traffic i:nth-child(2){background:#e0af52}.traffic i:nth-child(3){background:#4ecb87}.address{color:#59616e;background:#0d1016;border:1px solid #242933;border-radius:6px;flex:1;align-items:center;gap:7px;max-width:650px;height:27px;margin:auto;padding:0 10px;font-size:9px;display:flex;overflow:hidden}.address svg{color:#48c991}.address span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.live{color:#51d89e;letter-spacing:1px;align-items:center;gap:7px;font:700 8px Manrope;display:flex}.frame-card iframe{background:#fff;border:0;width:100%;height:calc(100% - 74px)}.frame-note{color:#59616e;background:#11151b;border-top:1px solid #242933;justify-content:center;align-items:center;gap:6px;height:27px;font-size:8px;display:flex}.frame-note svg{color:#3fa97d}.frame-note span{color:#333945}.empty{color:#59616e;flex-direction:column;justify-content:center;align-items:center;height:calc(100% - 74px);display:flex}.empty svg{color:#36404c}.empty h2{color:#cbd1da;margin:14px 0 6px;font:600 18px Manrope}.empty p{margin:0 0 18px;font-size:11px}.empty button{color:#07110d;background:#4ceca9;border:0;border-radius:7px;gap:7px;padding:10px 14px;font:700 11px inherit;display:flex}.overlay{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);z-index:10;background:#030508c9;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.modal{background:#11151c;border:1px solid #303640;border-radius:14px;width:min(450px,100%);padding:24px;box-shadow:0 30px 100px #000}.modal-head{align-items:flex-start;gap:12px;margin-bottom:24px;display:flex}.modal-icon{color:#4ceca9;background:#12291f;border-radius:9px;place-items:center;width:39px;height:39px;display:grid}.modal-head>div:nth-child(2){flex:1}.modal h2{margin:0 0 4px;font:700 18px Manrope}.modal p{color:#747c89;margin:0;font-size:10px}.modal-head>button,.toast button{color:#757d89;background:0 0;border:0}.modal label{color:#a9b0bb;margin:14px 0;font-size:10px;font-weight:700;display:block}.modal label em{color:#5d6571;float:right;font-style:normal;font-weight:400}.modal input{color:#e8ecf3;background:#0b0e13;border:1px solid #2d333d;border-radius:8px;outline:0;width:100%;height:42px;margin-top:7px;padding:0 12px;font:500 11px inherit;display:block}.modal input:focus{border-color:#3fbb88;box-shadow:0 0 0 3px #3fbb8813}.privacy{background:#0d1b16;border:1px solid #203e32;border-radius:8px;gap:10px;margin-top:18px;padding:12px;display:flex}.privacy svg{color:#4ceca9;flex:none}.privacy p{color:#70847b;line-height:1.5}.privacy b{color:#a6c9ba}.modal-actions{justify-content:flex-end;gap:8px;margin-top:23px;display:flex}.modal-actions button{color:#9fa6b2;background:0 0;border:1px solid #303640;border-radius:8px;height:38px;padding:0 15px;font:600 11px inherit}.modal-actions .primary{color:#07110d;background:#4ceca9;border-color:#4ceca9;align-items:center;gap:7px;display:flex}.toast{z-index:20;color:#dce2ea;background:#151a21;border:1px solid #303841;border-radius:10px;align-items:center;gap:10px;padding:12px;font-size:11px;animation:.25s up;display:flex;position:fixed;bottom:25px;right:26px;box-shadow:0 14px 40px #0009}.toast>div{color:#4ceca9;background:#153626;border-radius:7px;place-items:center;width:25px;height:25px;display:grid}@keyframes up{0%{opacity:0;transform:translateY(12px)}}@media (width<=800px){.shell{grid-template-columns:76px 1fr}.sidebar{padding:18px 10px}.brand{padding:0 8px 25px}.brand>div:last-child,.overview span,.overview kbd,.section-title span,.panel-copy,.add-side:not(svg),.status div,.sidebar-foot>button{display:none}.brandmark{flex:none}.overview,.add-side{justify-content:center;padding:11px}.section-title{justify-content:center}.panel-main{justify-content:center;padding:9px}.dots{display:none}.workspace{padding:24px 16px}.topline{align-items:flex-start}.tools button{font-size:0}.tools button svg{margin:0}.sound span,.crumb span,.crumb b{display:none}.frame-card{height:calc(100vh - 180px)}header{padding:0 16px}.topline h1{font-size:20px}.tools a{display:none}}@media (width<=520px){.shell{grid-template-columns:1fr}.sidebar{z-index:5;border-top:1px solid #272c35;border-right:0;flex-direction:row;height:62px;padding:8px;position:fixed;inset:auto 0 0}.brand,.section-title,.sidebar-foot,.add-side{display:none}.overview{width:52px;margin-right:5px}.panels{display:flex;overflow:auto}.panel-row{min-width:48px}.workspace{padding:18px 10px 76px}.frame-card{height:calc(100vh - 208px)}header{height:58px}.topline{margin-bottom:14px}.topline p{text-overflow:ellipsis;white-space:nowrap;max-width:220px;overflow:hidden}.sound{padding:0 9px;font-size:0}.avatar{display:none}.frame-bar{padding:0 9px}.traffic,.live{display:none}.modal{padding:20px}}.frame-stack{background:#fff;width:100%;height:calc(100% - 74px);position:relative;overflow:hidden}.frame-card .frame-stack iframe{visibility:hidden;pointer-events:none;background:#fff;border:0;width:100%;height:100%;display:block;position:absolute;inset:0}.frame-card .frame-stack iframe.shown{visibility:visible;pointer-events:auto;position:relative}
