:root { font-family: "Segoe UI", Inter, system-ui, sans-serif; color: #eee8ff; background: #08050e; }
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; overflow: hidden; background: #08050e; }
button, input { font: inherit; }
button { color: inherit; cursor: pointer; }
.auth-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 20% 25%, #29194e 0, transparent 42%), radial-gradient(circle at 80% 75%, #17103a 0, transparent 40%), #08050e; }
.auth-card { width: min(470px, 100%); padding: 38px; border: 1px solid #a87ee544; border-radius: 30px; background: #100a1ee8; box-shadow: 0 32px 100px #000c, inset 0 1px #ffffff0b; backdrop-filter: blur(20px); }
.auth-brand { margin-bottom: 30px; }
.auth-card h1 { margin: 8px 0 12px; font-size: clamp(2.3rem, 7vw, 3.8rem); line-height: 1; letter-spacing: -.05em; background: linear-gradient(120deg, #fff, #bea0ed); background-clip: text; color: transparent; }
.auth-card > p:not(.eyebrow):not(.auth-error) { color: #a99aba; line-height: 1.6; }
.auth-card form { display: grid; gap: 16px; margin-top: 26px; }
.auth-card label { display: grid; gap: 7px; color: #d7c9ed; font-size: .85rem; }
.auth-card input { width: 100%; padding: 13px 15px; border: 1px solid #9d72dd4a; border-radius: 14px; outline: 0; color: white; background: #090610cc; }
.auth-card input:focus { border-color: #aa7aff; box-shadow: 0 0 0 3px #8d5ce122; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 24px; padding: 5px; border: 1px solid #9d72dd33; border-radius: 999px; background: #08050e99; }
.auth-tabs button { padding: 9px 12px; border: 0; border-radius: 999px; background: transparent; color: #a99aba; }
.auth-tabs button.active { color: white; background: #7952c866; box-shadow: inset 0 1px #ffffff12; }
.auth-error { min-height: 1.5em; margin: 14px 0 0; color: #ff9cab; font-size: .85rem; }
.browser-shell { height: 100vh; display: grid; grid-template-rows: 58px 47px 62px 1fr 34px; overflow: hidden; background: radial-gradient(circle at 18% 15%, #241747 0, #110b20 38%, #090610 100%); }
.titlebar { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 18px; border-bottom: 1px solid #a678ff20; background: #100a1ecf; backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .02em; margin-right: auto; }
.brand small { color: #917eaf; font-size: .68rem; font-weight: 500; padding-left: 8px; border-left: 1px solid #8062ac55; }
.brand-mark { display: grid; place-items: center; width: 30px; height: 30px; color: #d3b6ff; background: #8b5cf633; border: 1px solid #bd98ff55; border-radius: 10px; box-shadow: 0 0 24px #7f43e866; }
.telemetry { display: flex; gap: 7px; color: #a99bbf; font-size: .72rem; font-variant-numeric: tabular-nums; }
.telemetry span { padding: 5px 8px; border: 1px solid #9b73e629; border-radius: 7px; background: #1a112a; }
.pill { border: 1px solid #a87ee544; border-radius: 999px; padding: 8px 14px; background: #5f438128; }
.pill:hover { border-color: #bd92ff; background: #754eb455; }
.pill.primary { background: linear-gradient(135deg, #7750d8, #a166df); border-color: #c69aff; box-shadow: 0 7px 22px #6837c244; }
.menu { position: absolute; z-index: 20; right: 18px; top: 50px; width: 210px; padding: 9px; border: 1px solid #a97bdf44; border-radius: 14px; background: #171025f5; box-shadow: 0 20px 60px #000b; }
.menu button { display: block; width: 100%; padding: 10px; border: 0; border-radius: 8px; text-align: left; background: transparent; }
.menu button:hover { background: #7651b733; }
.hidden { display: none !important; }
.tabs { display: flex; align-items: end; gap: 7px; padding: 7px 15px 0; background: #0d08178c; border-bottom: 1px solid #9b68e01c; }
.tab { display: flex; align-items: center; gap: 9px; width: 205px; height: 40px; padding: 0 13px; border: 1px solid #9c71dd55; border-bottom: 0; border-radius: 14px 14px 0 0; background: linear-gradient(#4b307980, #30204f99); }
.orb { width: 9px; height: 9px; border-radius: 50%; background: #b689ff; box-shadow: 0 0 12px #9b5fff; }
.close { margin-left: auto; color: #a897bd; font-size: 1.1rem; }
.new-tab { width: 34px; height: 34px; margin-bottom: 3px; border: 1px dashed #af85e655; border-radius: 50%; background: transparent; color: #b59bd7; }
.toolbar { display: flex; align-items: center; gap: 12px; padding: 10px 17px; background: #0e091aaa; border-bottom: 1px solid #9b68e01c; }
.nav-buttons { display: flex; gap: 3px; }
.nav-buttons button, .round { width: 37px; height: 37px; border: 0; border-radius: 50%; background: transparent; color: #b7a7cc; font-size: 1.15rem; }
.nav-buttons button:hover, .round:hover { background: #7651b733; color: white; }
.address { flex: 1; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 8px 0 15px; border: 1px solid #9d72dd4a; border-radius: 22px; background: #0a0712c9; box-shadow: inset 0 1px 10px #0006; }
.address:focus-within { border-color: #aa7aff; box-shadow: 0 0 0 3px #8d5ce122; }
.shield { color: #a87fea; }
.address input { flex: 1; min-width: 0; border: 0; outline: 0; color: #e7dbfa; background: transparent; }
.address button { padding: 6px 13px; border: 0; border-radius: 15px; background: #7e52c955; }
.viewport { position: relative; min-height: 0; display: grid; place-items: center; overflow: hidden; outline: none; background: radial-gradient(circle at 50% 35%, #2a1952 0, #10091f 42%, #07040d 100%); }
.stars, .stars::before { position: absolute; inset: 0; content: ""; opacity: .55; background-image: radial-gradient(#d7c5ff 1px, transparent 1px); background-size: 68px 68px; }
.stars::before { transform: translate(31px, 19px); background-size: 103px 103px; opacity: .35; }
.welcome { position: relative; z-index: 2; width: min(650px, 90%); text-align: center; }
.planet { position: relative; width: 92px; height: 92px; margin: 0 auto 24px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #e0c8ff, #9360df 35%, #342057 72%); box-shadow: 0 0 65px #8952e788; }
.planet::after { position: absolute; content: ""; width: 142px; height: 29px; left: -25px; top: 34px; border: 7px solid #c69cf5aa; border-radius: 50%; transform: rotate(-13deg); }
.eyebrow { color: #ac86e9 !important; font-size: .72rem !important; font-weight: 800; letter-spacing: .18em; }
.welcome h1 { margin: 8px 0 12px; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: .98; letter-spacing: -.055em; background: linear-gradient(110deg, #fff, #cbb1f4 55%, #9567dc); background-clip: text; color: transparent; }
.welcome p { margin: 0 auto 24px; max-width: 560px; color: #a99aba; font-size: 1rem; line-height: 1.6; }
.launch { padding: 13px 20px; border: 1px solid #c69aff; border-radius: 999px; background: linear-gradient(135deg, #7750d8, #a166df); box-shadow: 0 10px 35px #6837c266; }
.launch span { padding-left: 10px; }
#remote-browser { display: none; position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; background: #111; }
.status { position: absolute; z-index: 3; left: 16px; bottom: 14px; padding: 7px 11px; color: #b5a7c7; font-size: .75rem; border: 1px solid #a97ce533; border-radius: 8px; background: #100a1dcc; }
.library { position: absolute; z-index: 8; top: 14px; right: 14px; width: min(360px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow: auto; border: 1px solid #a97bdf55; border-radius: 8px; background: #100a1df2; box-shadow: 0 22px 70px #000b; }
.library header { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; font-size: .78rem; font-weight: 800; text-transform: capitalize; background: #171025; border-bottom: 1px solid #a97bdf33; }
.library header button { width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; color: #cdbbee; font-size: 1.1rem; }
.library header button:hover { background: #7651b733; }
.library > button { display: block; width: 100%; padding: 11px 12px; border: 0; border-bottom: 1px solid #a97bdf1c; background: transparent; color: inherit; text-align: left; }
.library > button:hover { background: #7651b733; }
.library b, .library small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.library b { font-size: .82rem; font-weight: 700; }
.library small, .library p { color: #a99aba; font-size: .72rem; }
.library p { margin: 14px 12px; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 16px; color: #8f819f; font-size: .7rem; border-top: 1px solid #9b68e022; background: #0c0715; }
footer span { display: flex; align-items: center; gap: 7px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #777; }
.status-dot.live { background: #6ee7a8; box-shadow: 0 0 9px #5ee49c; }
@media (max-width: 760px) { .telemetry, .brand small { display: none; } .browser-shell { grid-template-rows: 58px 43px 58px 1fr 32px; } .titlebar { padding: 0 10px; } .pill { padding: 7px 10px; } footer span:last-child { display: none; } }

/* Signed-in home */
.home-view { min-height: 100vh; overflow: auto; background: radial-gradient(circle at 18% 12%, #32205b 0, transparent 38%), radial-gradient(circle at 82% 80%, #211348 0, transparent 36%), #08050e; }
.home-header { height: 72px; display: flex; align-items: center; padding: 0 clamp(20px,5vw,72px); border-bottom: 1px solid #a678ff24; background: #0d0817b8; backdrop-filter: blur(18px); }
.home-actions { margin-left: auto; display: flex; gap: 10px; }
.home-content { width: min(1080px,calc(100% - 40px)); margin: 0 auto; padding: clamp(55px,8vh,105px) 0 60px; }
.home-content>h1 { max-width: 850px; margin: 10px 0 16px; font-size: clamp(2.8rem,7vw,5.8rem); line-height: .94; letter-spacing: -.065em; background: linear-gradient(110deg,#fff,#cfb9f1 62%,#9667df); background-clip: text; color: transparent; }
.home-lead { max-width: 680px; margin: 0 0 42px; color: #aa9cbb; font-size: 1.05rem; line-height: 1.65; }
.connect-card { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(260px,.85fr); overflow: hidden; border: 1px solid #aa7ce54d; border-radius: 28px; background: linear-gradient(135deg,#171025e8,#100a1ed9); box-shadow: 0 32px 90px #0009,inset 0 1px #ffffff0c; }
.browser-preview { min-height: 310px; padding: 13px; background: #0b0712; border-right: 1px solid #aa7ce52f; }
.preview-dots { height: 34px; display: flex; align-items: center; gap: 7px; padding-left: 7px; }
.preview-dots i { width: 8px; height: 8px; border-radius: 50%; background: #73549c; }.preview-dots i:nth-child(2){opacity:.7}.preview-dots i:nth-child(3){opacity:.45}
.preview-space { height: calc(100% - 34px); display: grid; place-items: center; border-radius: 14px; background: radial-gradient(circle,#442878 0,#1a102e 44%,#0b0713 100%); }
.preview-space .brand-mark { width: 64px; height: 64px; font-size: 1.8rem; border-radius: 20px; }
.connect-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 38px; }
.profile-badge,.state-chip { padding: 6px 10px; border: 1px solid #a97ce544; border-radius: 999px; color: #cdb6ee; background: #7952c828; font-size: .7rem; }
.connect-copy h2 { margin: 15px 0 6px; font-size: 2rem; }.connect-copy p { margin: 0 0 25px; color: #9f91b1; }
.connect-button { width: 100%; }.text-button { margin: 15px auto 0; border: 0; background: transparent; color: #ae9ac7; font-size: .78rem; }
.info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; margin-top: 18px; }
.info-grid article { display: flex; gap: 14px; align-items: center; padding: 18px; border: 1px solid #a97ce529; border-radius: 18px; background: #130d20a6; }.info-grid article>span{font-size:1.35rem;color:#b68bea}.info-grid b,.info-grid small{display:block}.info-grid b{font-size:.82rem}.info-grid small{margin-top:4px;color:#91839f;font-size:.7rem;line-height:1.4}
.settings-panel { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 20px; background: #050309b8; backdrop-filter: blur(12px); }
.settings-card { width: min(620px,100%); max-height: calc(100vh - 40px); overflow: auto; padding: 28px; border: 1px solid #ae83e957; border-radius: 26px; background: #120c20f5; box-shadow: 0 35px 100px #000d; }
.settings-card>header { display:flex;align-items:center;border-bottom:1px solid #a97ce529;padding-bottom:18px;margin-bottom:20px}.settings-card h2{margin:2px 0;font-size:2rem}.settings-card header .round{margin-left:auto}.settings-card h3{margin:22px 0 9px;color:#a88acb;font-size:.72rem;text-transform:uppercase;letter-spacing:.13em}
.setting-row { display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px;border:1px solid #a97ce52b;border-radius:15px;background:#09061199}.setting-row b,.setting-row small{display:block}.setting-row small{margin-top:5px;color:#91839f;font-size:.72rem;line-height:1.35}.setting-row select{max-width:165px;padding:9px;border:1px solid #a97ce544;border-radius:10px;color:#eee8ff;background:#1b122b}.settings-note{color:#887a97;font-size:.72rem;text-align:center;margin:18px 0 0}
.viewer { position: fixed; z-index: 100; inset: 0; width: 100%; height: 100%; background: #000; }.viewer:fullscreen{width:100vw;height:100vh}.viewer #remote-browser{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;background:#090909}
.viewer-controls { position:absolute;z-index:5;top:12px;right:12px;display:flex;align-items:center;gap:8px;padding:6px;border:1px solid #b08ae044;border-radius:999px;background:#100a1dd9;box-shadow:0 8px 30px #0009;opacity:.18;transition:opacity .2s}.viewer-controls:hover,.viewer-controls:focus-within{opacity:1}.viewer-controls>span{padding-left:10px;color:#b4a5c5;font-size:.68rem}.pill.danger{border-color:#ff7c9855;background:#7c29374d}
.viewer-status { position:absolute;z-index:6;inset:50% auto auto 50%;transform:translate(-50%,-50%);padding:14px 18px;border:1px solid #a97ce544;border-radius:14px;background:#100a1ef2;box-shadow:0 15px 55px #000c;color:#d9c9ef }
@media(max-width:720px){.connect-card{grid-template-columns:1fr}.browser-preview{min-height:210px;border-right:0;border-bottom:1px solid #aa7ce52f}.info-grid{grid-template-columns:1fr}.home-content{padding-top:45px}.viewer-controls>span{display:none}}