@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',Arial,sans-serif;color:#232529;background:#101113;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 43%,#282b31 0,transparent 56%),#101113}button,input{font:inherit}button{cursor:pointer}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}svg{display:block}button:focus-visible,a:focus-visible{outline:3px solid #adb9ed;outline-offset:4px}.header{height:83px;flex-shrink:0;margin:0 40px;border-bottom:1px solid #ffffff12;display:flex;align-items:center;justify-content:space-between;color:#f4f4f5;z-index:2}.brand{display:flex;align-items:center;gap:18px}.rcode-logo{width:132px;fill:currentColor}.brand-divider{height:21px;width:1px;background:#ffffff30}.brand-sso{font-size:11px;letter-spacing:2px;color:#999ca4}.version-nav{display:flex;align-items:center;gap:5px}.version-nav a{font-size:10px;padding:7px 11px;border:1px solid #ffffff18;border-radius:5px;color:#92959b}.version-nav a[aria-current]{background:#ffffff12;color:#fff}.version-nav>span{font:9px monospace;letter-spacing:1.4px;color:#8c9098;margin-left:18px}.shell{position:relative;flex:1;display:grid;place-items:center;overflow:hidden;padding:31px 24px 30px}.backdrop-art{position:absolute;inset:0;pointer-events:none;overflow:hidden;background-image:radial-gradient(#ffffff10 .8px,transparent .8px);background-size:22px 22px;mask-image:linear-gradient(transparent,#000 15%,#000 80%,transparent)}.backdrop-art .hero-mark{position:absolute;width:1000px;height:800px;left:calc(50% - 510px);top:calc(50% - 390px);fill:none;stroke:#ffffff0b;stroke-width:.14;transform:rotate(-9deg)}.track{position:absolute;left:calc(50% - 730px);top:calc(50% - 240px);width:1460px;height:480px;border:1px solid #ffffff09;border-radius:50%;transform:rotate(-24deg)}.track-two{height:650px;top:calc(50% - 325px)}.coordinate{position:absolute;color:#666a74;font:9px monospace;letter-spacing:1.4px;top:50%;writing-mode:vertical-rl}.coord-left{left:48px;transform:rotate(180deg)}.coord-right{right:48px}.signin-area{position:relative;width:430px;max-width:100%;display:flex;flex-direction:column;align-items:center}.portal-intro{text-align:center;color:#fff;margin-bottom:25px}.eyebrow{font-size:8px;font-weight:600;letter-spacing:1.8px}.portal-intro .eyebrow{color:#a2a6b0;display:flex;align-items:center;justify-content:center;gap:8px}.portal-intro i{width:5px;height:5px;background:#c1c9e6;border-radius:50%;box-shadow:0 0 10px #aab6ef77}.portal-intro h1{font-family:'Manrope',sans-serif;font-weight:500;font-size:42px;letter-spacing:-1.8px;margin:12px 0 8px;line-height:1.15}.portal-intro p{color:#888d97;font-size:12px;margin:0}.signin-card{width:100%;background:#fafafa;border:1px solid #fff;border-radius:15px;padding:28px;box-shadow:0 24px 70px #00000055;position:relative}.lock-tile{position:absolute;right:28px;top:28px;width:36px;height:36px;border:1px solid #e1e3e7;background:#f0f1f3;border-radius:10px;display:grid;place-items:center}.lock-tile svg{width:19px;stroke:#636974;stroke-width:1.5}.card-heading{padding-right:40px}.card-heading .eyebrow{color:#92969e;font-size:8px;letter-spacing:1.5px}h2{font-family:'Manrope',sans-serif;font-size:26px;font-weight:600;letter-spacing:-1px;margin:6px 0 8px}.card-heading p{font-size:11px;color:#858992;margin:0}.destination{display:flex;align-items:center;gap:10px;padding:12px 0;border-top:1px solid #e9eaed;border-bottom:1px solid #e9eaed;margin:20px 0}.destination-icon{background:#fff;border:1px solid #e4e6eb;border-radius:7px;padding:8px}.destination-icon svg{width:17px;stroke:#707684;stroke-width:1.3}.destination>div:nth-child(2){display:flex;flex-direction:column;gap:4px}.destination>div>span{font-size:7px;letter-spacing:1.2px;color:#9196a0}.destination strong{font-size:12px;font-weight:500}.protected{display:flex;gap:4px;align-items:center;margin-left:auto;font-size:9px;color:#6d7688;background:#edf0f5;border-radius:20px;padding:5px 7px}.protected svg{width:11px;stroke:currentColor;stroke-width:1.2}.tabs{display:flex;gap:22px;border-bottom:1px solid #e3e5e9;margin-bottom:18px}.tab{border:0;border-bottom:2px solid transparent;background:none;font-size:11px;color:#9599a2;padding:0 0 10px;margin-bottom:-1px}.tab.active{color:#252a35;border-bottom-color:#252a35;font-weight:600}label{font-size:11px;font-weight:500;display:block;margin-bottom:8px}.input-wrap{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid #dcdfe5;border-radius:7px;padding:0 12px}.input-wrap:focus-within{border-color:#8e9aba;box-shadow:0 0 0 3px #879bc01a}.input-wrap svg{width:16px;stroke:#9a9faa;stroke-width:1.4;flex-shrink:0}input{height:44px;width:100%;min-width:0;border:0;outline:0;background:transparent;color:#2a2e37;font-size:12px}input::placeholder{color:#a3a8b2}.code-symbol{color:#8a909d;font-size:19px}.field-hint{font-size:9px;color:#999da5;margin:8px 0 17px}.primary{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 15px;border:1px solid #272c37;border-radius:7px;background:#252a35;color:#fff;font-size:11px;font-weight:500;box-shadow:0 2px 4px #0000000d;transition:background .15s}.primary:hover{background:#3c4457}.primary>span{font-size:18px;line-height:1}.security-note{display:flex;justify-content:center;align-items:flex-start;gap:7px;margin:17px 0;color:#858b96;font-size:9px;line-height:1.7}.security-note svg{width:14px;stroke:#8e96a5;stroke-width:1.2;margin-top:1px}.security-note strong{font-weight:400;color:#a0a5ae}.help-line{border-top:1px solid #e7e9ed;padding-top:15px;text-align:center;color:#989da7;font-size:9px}.help-line button{border:0;padding:0 0 0 4px;background:none;color:#4c566c;font-size:9px;font-weight:600}.help-line button:hover{text-decoration:underline}.powered{display:flex;align-items:center;gap:10px;color:#81858e;margin-top:20px}.powered>span{font:7px monospace;letter-spacing:1.5px}.powered .rcode-logo{width:62px;color:#a1a5ae}footer{margin:0 40px;padding:20px 0;border-top:1px solid #ffffff12;display:flex;justify-content:space-between;color:#60656e;font-size:9px;z-index:2}footer nav{display:flex;align-items:center;gap:15px}footer button{border:0;background:none;color:#878c96;padding:0;font-size:9px}.footer-status{display:flex;align-items:center;gap:6px;color:#777d87}.status-dot{width:4px;height:4px;background:#8d95a5;border-radius:50%}#feedback{padding:11px;background:#eef0f5;border:1px solid #dce1eb;border-radius:7px;font-size:11px;line-height:1.6;color:#566074;margin-top:13px}dialog{max-width:calc(100% - 32px);width:420px;border:1px solid #e0e3e8;border-radius:15px;padding:32px;background:#fafafa;color:#252a35;box-shadow:0 24px 80px #0005}dialog::backdrop{background:#090b12b3;backdrop-filter:blur(5px)}dialog p{font-size:13px;line-height:1.8;color:#737b89;margin:16px 0 24px}.close-dialog{position:absolute;top:10px;right:14px;border:0;background:none;font-size:25px;color:#858b96}[hidden]{display:none!important}
@media(min-width:1600px){.shell{padding:38px 24px}.signin-area{width:460px}.signin-card{padding:32px}.lock-tile{top:32px;right:32px}.portal-intro h1{font-size:48px}.portal-intro{margin-bottom:28px}.backdrop-art .hero-mark{width:1400px;height:1050px;left:calc(50% - 710px);top:calc(50% - 525px)}}
@media(max-width:600px){.header{height:66px;margin:0 20px}.brand{gap:12px}.brand .rcode-logo{width:106px}.brand-sso{font-size:10px}.version-nav>span{display:none}.version-nav a{font-size:9px;padding:5px 8px}.shell{padding:24px 16px}.portal-intro h1{font-size:34px}.portal-intro .eyebrow{font-size:7px;letter-spacing:1.3px}.portal-intro{margin-bottom:22px}.signin-card{padding:24px 22px;border-radius:12px}.lock-tile{top:24px;right:22px}.coordinate{display:none}.backdrop-art .hero-mark{width:700px;left:calc(50% - 350px)}footer{margin:0 20px;padding:17px 0;font-size:8px;gap:15px}footer nav{gap:10px}footer button{font-size:8px}.footer-status{font-size:7px}.powered{margin-top:18px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Keep the centered card inside narrow grid tracks. */
.shell{grid-template-columns:minmax(0,1fr)}
.signin-area{min-width:0;justify-self:center}

/* One heading, with only the information needed to sign in. */
.card-heading h1{font-family:Manrope,Arial,sans-serif;font-size:30px;font-weight:600;letter-spacing:-1px;line-height:1.2;margin:0 0 9px}
.help-line{margin-top:20px}

/* Gateway states: signed-in card, secondary action, disabled fields, offline indicator */
#signed-in{display:flex;flex-direction:column;gap:10px}#signed-in .field-hint{margin:0 0 6px}.secondary{width:100%;padding:12px 15px;border:1px solid #dcdfe5;border-radius:7px;background:#fff;color:#4c566c;font-size:11px;font-weight:500;transition:background .15s}.secondary:hover{background:#f0f1f3}.primary:disabled,.secondary:disabled,.tab:disabled{opacity:.55;cursor:not-allowed}.primary:disabled:hover{background:#252a35}input:disabled{color:#a3a8b2}.input-wrap:has(input:disabled){background:#f4f5f7}.footer-status.offline .status-dot{background:#d9534f;box-shadow:0 0 8px #d9534f88}

/* Tunnel context: the hostname under the site name, the no-tunnel notice, unlocked hosts, error banner */
#tunnel-host{font-size:10px;color:#7c828e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all;line-height:1.4}
.no-tunnel{font-size:11px;line-height:1.7;color:#6b7280;margin:18px 0 0}
#unlocked-list{list-style:none;margin:0 0 6px;padding:0;display:flex;flex-direction:column;gap:3px}
#unlocked-list li{font-size:10px;color:#7c828e;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
#feedback.error{background:#fdf1f0;border-color:#e7c7c4;color:#8d4440}