:root {
  color-scheme: light;
  --ink: #11130f;
  --cream: #11130f;
  --muted: #596057;
  --faint: #7a8177;
  --green: #79d91f;
  --green-bright: #8be92f;
  --green-deep: #e9f8da;
  --sea: #f0f8e8;
  --navy: #f4f5f1;
  --panel: #ffffff;
  --panel-soft: #fafbf8;
  --line: #dfe2da;
  --line-strong: #cfd4ca;
  --danger: #c83e3e;
  --amber: #a76800;
  --blue: #2569b4;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--navy); }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); background: var(--navy); overflow-x: hidden; }
body.modal-open { overflow: hidden; }
button, input { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
a { color: inherit; }
.hidden { display: none !important; }
.shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.page-noise { position: fixed; z-index: 30; inset: 0; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); }

.logo { display: inline-flex; align-items: center; gap: 11px; color: var(--cream); text-decoration: none; font-size: 19px; font-weight: 750; letter-spacing: -.035em; }
.logo svg { width: 31px; height: 31px; fill: none; stroke: var(--green); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.logo-small { font-size: 16px; }.logo-small svg { width: 25px; }
.site-header { height: 82px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; position: relative; z-index: 5; }
.site-nav { display: flex; align-items: center; gap: 35px; }
.site-nav a { color: #9ba8a1; text-decoration: none; font-size: 12px; transition: color .2s; }
.site-nav a:hover { color: var(--cream); }
.site-header > .button { justify-self: end; }

.button { min-height: 46px; border: 1px solid transparent; border-radius: 7px; padding: 0 21px; display: inline-flex; align-items: center; justify-content: center; gap: 15px; background: transparent; text-decoration: none; cursor: pointer; font-size: 12px; font-weight: 720; letter-spacing: -.01em; transition: transform .18s, background .18s, border-color .18s, filter .18s, opacity .18s; }
.button:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.08); }
.button:disabled { cursor: not-allowed; opacity: .4; }
.button-small { min-height: 39px; padding-inline: 16px; }
.button-primary { color: #092019; background: var(--green); box-shadow: 0 12px 34px rgba(89, 221, 158, .12); }
.button-primary span { font-size: 16px; }
.button-ghost { color: #d5ded8; border-color: var(--line-strong); background: rgba(255,255,255,.015); }
.button-link { color: #bbc7c0; padding-inline: 4px; }
.button-full { width: 100%; }
.text-action { border: 0; background: transparent; color: var(--green); cursor: pointer; font-size: 11px; font-weight: 700; padding: 8px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: rgba(255,255,255,.02); cursor: pointer; color: #b9c5be; font-size: 18px; }

.hero { min-height: 700px; display: grid; grid-template-columns: 1.02fr .98fr; align-items: center; gap: 70px; padding-top: 55px; padding-bottom: 115px; position: relative; }
.hero::before { content: ""; position: absolute; width: 580px; height: 580px; right: -180px; top: -70px; border-radius: 50%; background: #0e4737; filter: blur(140px); opacity: .22; pointer-events: none; }
.announcement { display: inline-flex; align-items: center; gap: 10px; border: 1px solid rgba(121,227,176,.17); border-radius: 99px; padding: 7px 12px 7px 9px; color: #a8b8af; font-size: 10px; text-transform: uppercase; letter-spacing: .13em; background: rgba(121,227,176,.035); }
.announcement span { width: 7px; height: 7px; background: var(--green); border-radius: 50%; box-shadow: 0 0 14px var(--green); }
.hero h1 { margin: 25px 0 23px; color: var(--cream); font-size: clamp(51px, 6.15vw, 84px); line-height: .96; letter-spacing: -.067em; font-weight: 690; }
.hero h1 em { color: var(--green); font-style: normal; font-weight: 510; }
.hero-copy > p { max-width: 570px; margin: 0; color: #92a099; font-size: 16px; line-height: 1.72; }
.hero-actions { display: flex; gap: 23px; align-items: center; margin-top: 34px; }
.trust-row { display: flex; gap: 24px; margin-top: 32px; color: #6f7f77; font-size: 10px; }
.trust-row span { display: flex; gap: 7px; align-items: center; }.trust-row i { color: var(--green); font-style: normal; }

.hero-visual { position: relative; height: 495px; perspective: 1100px; }
.radar-ring { position: absolute; border: 1px solid rgba(121,227,176,.08); border-radius: 50%; pointer-events: none; }
.ring-one { width: 460px; height: 460px; left: 16px; top: 8px; }.ring-two { width: 340px; height: 340px; left: 77px; top: 68px; }
.console-preview { width: 440px; min-height: 350px; position: absolute; z-index: 2; left: 26px; top: 62px; border: 1px solid rgba(193,230,210,.19); border-radius: 13px; background: linear-gradient(145deg, rgba(17,37,31,.96), rgba(7,17,15,.98)); box-shadow: 0 48px 100px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.045); transform: rotateY(-7deg) rotateX(2deg); overflow: hidden; }
.preview-top { height: 49px; padding: 0 16px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); color: #a4b0aa; font-size: 10px; }
.preview-top i { margin-left: auto; padding: 4px 8px; border-radius: 99px; color: var(--green); background: rgba(121,227,176,.08); font-style: normal; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.preview-logo { width: 21px; height: 21px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid var(--green); }.preview-logo b { width: 5px; height: 5px; background: var(--green); }
.preview-site { display: flex; align-items: center; gap: 12px; padding: 18px 20px 4px; }
.site-avatar { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(121,227,176,.22); border-radius: 9px; background: #13392f; color: var(--green); font-size: 10px; font-weight: 800; }
.preview-site div:nth-child(2) { flex: 1; }.preview-site strong, .preview-site small { display: block; }.preview-site strong { color: #e2e9e4; font-size: 11px; }.preview-site small { color: #65756d; margin-top: 4px; font-size: 8px; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.route-map { margin: 11px 20px; height: 145px; position: relative; border-radius: 8px; background-color: rgba(3,10,8,.5); background-image: linear-gradient(rgba(121,227,176,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(121,227,176,.035) 1px, transparent 1px); background-size: 25px 25px; overflow: hidden; }
.map-line { position: absolute; z-index: 1; height: 1px; transform-origin: left; background: linear-gradient(90deg, rgba(121,227,176,.15), var(--green), rgba(121,227,176,.15)); box-shadow: 0 0 8px rgba(121,227,176,.25); }.line-a { left: 54px; top: 80px; width: 132px; transform: rotate(-12deg); }.line-b { left: 185px; top: 52px; width: 135px; transform: rotate(17deg); }.line-c { left: 57px; top: 79px; width: 262px; opacity: .18; transform: rotate(3deg); }
.node { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #728179; font-size: 7px; }.node i { width: 18px; height: 18px; border: 4px solid #0e211c; border-radius: 50%; background: #54766a; box-shadow: 0 0 0 1px #46685c; }.node-origin { left: 43px; top: 68px; }.node-edge { left: 178px; top: 38px; }.node-live { right: 41px; top: 72px; }.node-edge i, .node-live i { background: var(--green); box-shadow: 0 0 0 1px var(--green), 0 0 19px rgba(121,227,176,.55); }
.deploy-event { margin: 0 20px 19px; border: 1px solid rgba(121,227,176,.12); border-radius: 8px; background: rgba(121,227,176,.035); padding: 12px; display: flex; gap: 11px; align-items: center; }.deploy-event > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #062015; background: var(--green); font-size: 11px; font-weight: 900; }.deploy-event strong, .deploy-event small { display: block; }.deploy-event strong { font-size: 9px; color: #cbd7d0; }.deploy-event small { margin-top: 3px; color: #607169; font-size: 7px; }
.float-card { position: absolute; z-index: 4; border: 1px solid rgba(196,228,212,.17); border-radius: 9px; background: rgba(14,30,25,.95); box-shadow: 0 20px 50px rgba(0,0,0,.38); backdrop-filter: blur(12px); }
.float-domain { right: -6px; top: 33px; width: 215px; padding: 13px 15px; }.float-domain span, .float-domain strong { display: block; }.float-domain span { color: var(--green); font-size: 7px; letter-spacing: .16em; }.float-domain strong { margin-top: 6px; font: 500 9px ui-monospace, monospace; color: #c7d4cd; }
.float-tls { left: -10px; bottom: 32px; padding: 11px 15px 11px 11px; display: flex; gap: 10px; align-items: center; }.float-tls .lock { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--green); background: rgba(121,227,176,.1); }.float-tls small, .float-tls strong { display: block; }.float-tls small { color: #65766d; font-size: 7px; }.float-tls strong { margin-top: 3px; color: var(--green); font-size: 9px; }

.signal-bar { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.012); }
.signal-inner { min-height: 104px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; }
.signal-inner > div { padding-left: 28px; border-left: 1px solid var(--line); }.signal-inner > div:first-child { padding-left: 0; border: 0; }.signal-inner strong, .signal-inner span { display: block; }.signal-inner strong { color: var(--cream); font-size: 16px; font-weight: 620; letter-spacing: -.02em; }.signal-inner span { margin-top: 5px; color: #68776f; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }

.section-pad { padding-top: 128px; padding-bottom: 128px; }
.section-intro { display: grid; grid-template-columns: 1.15fr .85fr; column-gap: 80px; align-items: end; margin-bottom: 55px; }.section-intro .kicker { grid-column: 1 / -1; }.section-intro > p:last-child { margin: 0 0 8px; color: #7e8d85; font-size: 13px; line-height: 1.7; }
.kicker { margin: 0 0 17px; color: var(--green); font-size: 9px; text-transform: uppercase; letter-spacing: .2em; font-weight: 800; }
.section-intro h2, .security-copy h2, .final-cta h2 { margin: 0; color: var(--cream); font-size: clamp(36px, 5vw, 57px); line-height: 1.04; letter-spacing: -.052em; font-weight: 610; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feature-card { min-height: 395px; padding: 35px; border: 1px solid var(--line); border-radius: 13px; background: linear-gradient(145deg, rgba(18,35,30,.8), rgba(9,20,17,.8)); position: relative; overflow: hidden; }
.feature-large { grid-column: 1 / -1; min-height: 380px; display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; padding: 55px; }
.feature-icon { width: 43px; height: 43px; margin-bottom: 62px; display: grid; place-items: center; border: 1px solid rgba(121,227,176,.15); border-radius: 10px; color: var(--green); background: rgba(121,227,176,.06); font-size: 19px; }
.feature-large .feature-icon { position: absolute; left: 55px; top: 52px; margin: 0; }
.feature-index { display: block; margin-bottom: 12px; color: #586b62; font-size: 8px; letter-spacing: .17em; font-weight: 800; }
.feature-card h3 { margin: 0; color: #dfe8e2; font-size: 27px; line-height: 1.12; letter-spacing: -.038em; font-weight: 610; }.feature-card p { max-width: 430px; margin: 17px 0 0; color: #73827a; font-size: 12px; line-height: 1.7; }.feature-card code { color: #a9b8b0; font-family: ui-monospace, monospace; font-size: .93em; }
.mini-terminal { height: 190px; margin-left: 35px; padding: 0 22px; border: 1px solid var(--line); border-radius: 10px; background: #06100d; transform: rotate(1.5deg); box-shadow: 0 25px 60px rgba(0,0,0,.32); }.mini-terminal > span { height: 40px; margin-inline: -22px; padding-left: 16px; display: flex; gap: 5px; align-items: center; border-bottom: 1px solid var(--line); }.mini-terminal > span i { width: 6px; height: 6px; border-radius: 50%; background: #30413a; }.mini-terminal code { display: block; padding-top: 29px; color: #66776e; font: 10px/2.1 ui-monospace, monospace; }.mini-terminal code b { color: var(--green); }
.domain-pills { margin-top: 48px; display: flex; flex-direction: column; gap: 8px; }.domain-pills span { padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(4,12,10,.45); color: #91a39a; font: 9px ui-monospace, monospace; }.domain-pills span::before { content: "●"; margin-right: 9px; color: var(--green); font-size: 6px; }
.uptime-line { margin-top: 64px; height: 41px; display: flex; align-items: center; position: relative; }.uptime-line::before { content: ""; position: absolute; left: 0; right: 90px; height: 1px; background: linear-gradient(90deg, #1f473b, var(--green)); }.uptime-line span { width: 70%; height: 30px; background: linear-gradient(180deg, rgba(121,227,176,.12), transparent); clip-path: polygon(0 90%, 8% 80%, 15% 85%, 25% 38%, 34% 57%, 44% 42%, 52% 49%, 63% 8%, 72% 43%, 82% 20%, 91% 38%, 100% 14%, 100% 100%, 0 100%); }.uptime-line i { width: 7px; height: 7px; margin-left: -2px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); }.uptime-line b { margin-left: auto; color: var(--green); font-size: 8px; text-transform: uppercase; letter-spacing: .08em; }

.security-panel { min-height: 510px; display: grid; grid-template-columns: .9fr 1.1fr; border: 1px solid var(--line); border-radius: 15px; background: #0b1915; overflow: hidden; }
.security-art { min-height: 480px; position: relative; display: grid; place-items: center; border-right: 1px solid var(--line); background-image: radial-gradient(circle, rgba(121,227,176,.11) 1px, transparent 1px); background-size: 27px 27px; }
.security-art::before { content: ""; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(69,203,141,.09); filter: blur(55px); }.key-orbit { width: 112px; height: 112px; z-index: 2; display: grid; place-items: center; border: 1px solid rgba(121,227,176,.36); border-radius: 31px; background: #102d25; transform: rotate(45deg); box-shadow: 0 0 80px rgba(121,227,176,.16), inset 0 0 25px rgba(121,227,176,.05); }.key-orbit span { color: var(--green); font-size: 34px; transform: rotate(-45deg); }.orbit { position: absolute; border: 1px solid rgba(121,227,176,.13); border-radius: 50%; }.orbit-a { width: 245px; height: 245px; }.orbit-b { width: 370px; height: 370px; }
.security-copy { padding: 75px 70px; align-self: center; }.security-copy h2 { font-size: clamp(35px, 4vw, 51px); }.security-copy > p:not(.kicker) { margin: 23px 0 32px; color: #7d8d84; font-size: 13px; line-height: 1.75; }.security-copy ul { padding: 0; margin: 0; list-style: none; border-top: 1px solid var(--line); }.security-copy li { min-height: 51px; display: flex; align-items: center; border-bottom: 1px solid var(--line); color: #a7b4ad; font-size: 10px; }.security-copy li span { width: 36px; color: var(--green); font: 8px ui-monospace, monospace; }
.final-cta { padding: 70px 24px 140px; text-align: center; }.final-cta h2 { font-size: clamp(43px, 6vw, 72px); }.final-cta .button { margin-top: 34px; }
.marketing-footer { min-height: 95px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: #52635a; font-size: 9px; }.marketing-footer p { margin: 0; }

/* Authentication */
.modal-overlay { position: fixed; z-index: 50; inset: 0; padding: 24px; display: grid; place-items: center; background: rgba(2,9,7,.82); backdrop-filter: blur(14px); overflow-y: auto; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; } }
.auth-modal { width: min(525px, 100%); min-height: 540px; padding: 42px 48px 45px; position: relative; border: 1px solid var(--line-strong); border-radius: 15px; background: radial-gradient(circle at 50% -10%, #173a30, #0b1814 44%); box-shadow: 0 35px 100px rgba(0,0,0,.6); }
.modal-close { position: absolute; right: 17px; top: 17px; border: 0; background: transparent; }
.auth-brand { display: flex; align-items: center; gap: 10px; color: #6e8177; font-size: 8px; font-weight: 800; letter-spacing: .17em; }.auth-mark { width: 22px; height: 22px; display: grid; place-items: center; border: 1px solid var(--green); transform: rotate(45deg); }.auth-mark i { width: 5px; height: 5px; background: var(--green); }
.auth-progress { margin: 26px 0 41px; display: flex; gap: 7px; }.auth-progress span { height: 2px; flex: 1; background: #26352f; }.auth-progress span.active { background: var(--green); }
.auth-panel h2 { margin: 0; color: var(--cream); font-size: 32px; line-height: 1.08; letter-spacing: -.045em; }.auth-lede { margin: 15px 0 26px; color: #7f8e86; font-size: 11px; line-height: 1.7; }
.key-drop { width: 100%; min-height: 92px; padding: 17px; display: flex; align-items: center; gap: 14px; text-align: left; border: 1px dashed #42564d; border-radius: 10px; background: rgba(4,12,10,.38); cursor: pointer; transition: border-color .2s, background .2s; }.key-drop:hover { border-color: var(--green); background: rgba(121,227,176,.035); }.key-file-icon { width: 46px; height: 46px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: rgba(121,227,176,.08); color: var(--green); font-size: 21px; }.key-drop > span:nth-child(2) { flex: 1; }.key-drop strong, .key-drop small { display: block; }.key-drop strong { color: #d7e0db; font-size: 12px; }.key-drop small { margin-top: 5px; color: #617168; font-size: 9px; }.key-drop i { padding: 7px 10px; border: 1px solid var(--line); border-radius: 5px; color: #8c9b93; font-style: normal; font-size: 9px; }
.key-loaded { min-height: 85px; padding: 15px; display: flex; align-items: center; gap: 13px; border: 1px solid rgba(121,227,176,.2); border-radius: 9px; background: rgba(121,227,176,.04); }.key-loaded > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #082018; font-weight: 900; }.key-loaded > div { min-width: 0; }.key-loaded small, .key-loaded strong, .key-loaded code { display: block; }.key-loaded small { color: var(--green); font-size: 7px; letter-spacing: .14em; }.key-loaded strong { margin: 4px 0; color: #d4dfd8; font-size: 11px; }.key-loaded code { max-width: 330px; overflow: hidden; text-overflow: ellipsis; color: #66766e; font-size: 8px; white-space: nowrap; }
#sign-in-key { margin-top: 13px; }.privacy-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; color: #65756d; }.privacy-note > span { color: var(--green); }.privacy-note p { margin: 0; font-size: 9px; line-height: 1.55; }.privacy-note strong { color: #91a098; }
.qr-layout { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; margin: 24px 0; }.qr-frame { padding: 8px; border-radius: 9px; background: white; }.qr-frame img { display: block; width: 100%; }.qr-layout > div:last-child > small { color: var(--green); font-size: 7px; letter-spacing: .14em; }.qr-layout > div:last-child > p { margin: 7px 0 10px; color: #75847c; font-size: 9px; line-height: 1.5; }.secret-code { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 6px; background: #07110e; text-align: left; cursor: pointer; }.secret-code code { color: #b5c3bb; font-size: 8px; word-break: break-all; }.secret-code span { display: block; margin-top: 6px; color: var(--green); font-size: 7px; text-transform: uppercase; }
.code-form { display: flex; flex-direction: column; gap: 9px; }.code-form label, .field-label { color: #899991; font-size: 9px; font-weight: 700; }.code-input { height: 55px; display: flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; background: #07110e; }.code-input:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(121,227,176,.07); }.code-input input { width: 100%; height: 100%; padding: 0 16px; border: 0; outline: 0; background: transparent; color: var(--cream); font: 20px ui-monospace, monospace; letter-spacing: .3em; }.code-input span { padding: 0 14px; color: #516159; font-size: 8px; white-space: nowrap; }.code-form .button { margin-top: 8px; }#restart-login { display: block; margin: 15px auto 0; }
.skip-security { display: block; margin: 14px auto 0; padding: 7px 11px; border: 0; background: transparent; color: #9caca3; cursor: pointer; font-size: 10px; font-weight: 700; }.skip-security:hover { color: var(--green); }.skip-note { margin: 0; color: #53635b; text-align: center; font-size: 8px; }

/* Console */
.dashboard { min-height: 100vh; display: grid; grid-template-columns: 224px 1fr; background: #08110f; }
.dash-sidebar { height: 100vh; padding: 27px 17px 20px; position: sticky; top: 0; display: flex; flex-direction: column; border-right: 1px solid var(--line); background: #091411; }.dash-logo { margin: 0 10px 38px; }.dash-nav { display: flex; flex-direction: column; gap: 5px; }.dash-nav button, .dash-nav a, .sidebar-foot button { width: 100%; height: 43px; padding: 0 12px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 7px; background: transparent; color: #6f8077; text-decoration: none; cursor: pointer; text-align: left; font-size: 10px; font-weight: 650; }.dash-nav button:hover, .dash-nav a:hover, .dash-nav button.active { color: #d6e0da; background: rgba(121,227,176,.065); }.dash-nav button.active { color: var(--green); }.dash-nav button > span, .dash-nav a > span { width: 19px; color: #7b9186; text-align: center; font: 13px ui-monospace, monospace; }.dash-nav i { margin-left: auto; min-width: 20px; padding: 3px 5px; border-radius: 20px; color: #7c8d84; background: rgba(255,255,255,.04); text-align: center; font-style: normal; font-size: 8px; }.sidebar-foot { margin-top: auto; }.system-health { margin: 0 5px 14px; padding: 13px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line); }.system-health > span { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }.system-health strong, .system-health small { display: block; }.system-health strong { color: #9dada4; font-size: 8px; }.system-health small { margin-top: 3px; color: #516158; font-size: 7px; }.sidebar-foot button:hover { color: var(--danger); background: rgba(255,141,141,.04); }
.dash-main { min-width: 0; width: min(1320px, 100%); padding: 42px clamp(30px, 4vw, 66px) 70px; }
.dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 33px; }.dash-header p { margin: 0 0 7px; color: var(--green); font-size: 8px; letter-spacing: .18em; font-weight: 800; }.dash-header h1 { margin: 0; color: var(--cream); font-size: 34px; letter-spacing: -.045em; font-weight: 620; }.dash-header-actions { display: flex; gap: 13px; align-items: center; }.owner-chip { min-height: 46px; padding: 0 14px; display: flex; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 7px; }.owner-chip > i { color: var(--green); font-style: normal; }.owner-chip small, .owner-chip strong { display: block; }.owner-chip small { color: var(--green); font-size: 6px; letter-spacing: .12em; }.owner-chip strong { margin-top: 3px; color: #a4b1aa; font-size: 9px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }.stat-grid article { min-height: 119px; padding: 20px; position: relative; display: flex; align-items: flex-start; gap: 13px; border: 1px solid var(--line); border-radius: 9px; background: #0c1815; }.stat-icon { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 8px; font-size: 13px; }.stat-icon.sea { color: var(--green); background: rgba(121,227,176,.08); }.stat-icon.green { color: var(--green); background: rgba(121,227,176,.08); }.stat-icon.amber { color: var(--amber); background: rgba(242,199,118,.08); }.stat-icon.blue { color: var(--blue); background: rgba(133,184,255,.08); }.stat-grid small { display: block; margin: 1px 0 4px; color: #596a61; font-size: 7px; letter-spacing: .12em; }.stat-grid strong { color: #dce5e0; font-size: 24px; font-weight: 630; letter-spacing: -.04em; }.stat-grid article > i { position: absolute; bottom: 16px; right: 17px; color: #53635b; font-size: 7px; font-style: normal; }.stat-grid article > i.positive { color: #6f9d87; }.stat-grid i b { display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--green); }
.sites-section { margin-top: 32px; }.section-toolbar { display: flex; justify-content: space-between; align-items: end; margin-bottom: 14px; }.section-toolbar h2 { margin: 0; color: #dce5df; font-size: 17px; letter-spacing: -.025em; }.section-toolbar p { margin: 6px 0 0; color: #596a61; font-size: 9px; }.toolbar-actions { display: flex; gap: 7px; }.search-box { width: 190px; height: 38px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: 7px; background: #0b1613; }.search-box span { color: #62736a; }.search-box input { width: 100%; border: 0; outline: 0; color: #c6d1ca; background: transparent; font-size: 9px; }.search-box input::placeholder { color: #4e5e56; }
.sites-table-wrap { min-height: 255px; border: 1px solid var(--line); border-radius: 9px; background: #0b1714; overflow: hidden; }.sites-table { width: 100%; border-collapse: collapse; }.sites-table th { height: 39px; padding: 0 18px; text-align: left; border-bottom: 1px solid var(--line); color: #53635b; background: rgba(255,255,255,.012); font-size: 7px; text-transform: uppercase; letter-spacing: .13em; }.sites-table td { height: 73px; padding: 0 18px; border-bottom: 1px solid var(--line); color: #809087; font-size: 9px; }.sites-table tr:last-child td { border-bottom: 0; }.site-cell { display: flex; align-items: center; gap: 11px; }.site-initial { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; color: var(--green); background: rgba(121,227,176,.05); font-size: 9px; font-weight: 800; text-transform: uppercase; }.site-cell strong, .site-cell small { display: block; }.site-cell strong { color: #cbd6cf; font-size: 10px; }.site-cell small { margin-top: 4px; color: #526159; font-size: 7px; }.site-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 99px; color: #91a098; background: rgba(255,255,255,.035); font-size: 7px; text-transform: uppercase; letter-spacing: .08em; }.site-status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #75847c; }.site-status.active, .site-status.simulated { color: var(--green); background: rgba(121,227,176,.065); }.site-status.active::before, .site-status.simulated::before { background: var(--green); box-shadow: 0 0 7px var(--green); }.site-status.stopped::before { background: var(--amber); }.site-status.error::before { background: var(--danger); }.site-address { max-width: 220px; display: block; color: #71827a; font: 8px ui-monospace, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.row-menu { width: 31px; height: 31px; border: 0; border-radius: 6px; background: transparent; color: #617169; cursor: pointer; font-size: 17px; }.row-menu:hover { background: rgba(255,255,255,.04); color: var(--cream); }
.empty-sites { min-height: 255px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.empty-art { width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 11px; color: var(--green); background: rgba(121,227,176,.04); font-size: 18px; }.empty-sites h3 { margin: 13px 0 5px; color: #cdd8d2; font-size: 13px; }.empty-sites p { margin: 0 0 16px; color: #5d6d65; font-size: 9px; }.empty-sites .button { min-height: 39px; }
.api-banner { min-height: 123px; margin-top: 21px; padding: 24px 27px; display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center; border: 1px solid rgba(121,227,176,.13); border-radius: 9px; background: linear-gradient(100deg, rgba(121,227,176,.055), rgba(12,24,21,.8)); }.api-symbol { width: 47px; height: 47px; display: grid; place-items: center; border-radius: 9px; background: rgba(121,227,176,.09); color: var(--green); font: 11px ui-monospace, monospace; }.api-banner span { color: var(--green); font-size: 7px; letter-spacing: .15em; }.api-banner h3 { margin: 5px 0 4px; color: #cad5ce; font-size: 13px; }.api-banner p { margin: 0; color: #607169; font-size: 8px; }

/* Project modal */
.project-modal { width: min(650px, 100%); max-height: calc(100vh - 48px); padding: 33px 40px 39px; overflow-y: auto; border: 1px solid var(--line-strong); border-radius: 14px; background: #0c1815; box-shadow: 0 35px 100px rgba(0,0,0,.62); }.project-modal > header { display: flex; justify-content: space-between; align-items: flex-start; }.project-modal header .kicker { margin-bottom: 7px; }.project-modal header h2 { margin: 0; color: var(--cream); font-size: 27px; letter-spacing: -.04em; }.project-progress { display: flex; gap: 6px; margin: 24px 0 30px; }.project-progress span { height: 2px; flex: 1; background: #24332d; }.project-progress span.active { background: var(--green); }
.project-panel { animation: rise .22s ease; }@keyframes rise { from { opacity: 0; transform: translateY(6px); } }.input, .domain-field { width: 100%; height: 51px; margin: 7px 0 20px; border: 1px solid var(--line-strong); border-radius: 7px; background: #07110e; }.input { padding: 0 14px; outline: 0; }.input:focus, .domain-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(121,227,176,.06); }.address-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 21px; }.address-tabs button { min-height: 84px; padding: 14px; display: grid; grid-template-columns: 31px 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.012); cursor: pointer; }.address-tabs button > span { grid-row: 1 / 3; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; background: rgba(255,255,255,.035); color: #75857c; }.address-tabs strong { align-self: end; color: #aab8b0; font-size: 10px; }.address-tabs small { color: #526159; font-size: 8px; }.address-tabs button.active { border-color: rgba(121,227,176,.35); background: rgba(121,227,176,.04); }.address-tabs button.active > span, .address-tabs button.active strong { color: var(--green); }
.address-field { margin-bottom: 23px; }.address-field > p { margin: 8px 2px 0; color: #5c6c63; font-size: 8px; }.generated-domain { height: 53px; margin-top: 7px; padding-left: 15px; display: flex; align-items: center; border: 1px solid rgba(121,227,176,.2); border-radius: 7px; background: rgba(121,227,176,.035); }.generated-domain span { flex: 1; color: #b5c4bc; font: 10px ui-monospace, monospace; }.generated-domain button { width: 48px; height: 100%; border: 0; border-left: 1px solid var(--line); background: transparent; color: var(--green); cursor: pointer; }.domain-field { display: flex; align-items: center; padding: 0 14px; }.domain-field span { color: #526259; font-size: 10px; }.domain-field input { height: 100%; width: 100%; border: 0; outline: 0; color: #d2dcd6; background: transparent; font-size: 12px; }.check-row { min-height: 58px; padding: 10px 13px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; }.check-row input { position: absolute; opacity: 0; }.check-row > span { width: 19px; height: 19px; display: grid; place-items: center; border: 1px solid #3c4d45; border-radius: 5px; }.check-row > span i { display: none; color: #082017; font-size: 9px; font-style: normal; font-weight: 900; }.check-row input:checked + span { border-color: var(--green); background: var(--green); }.check-row input:checked + span i { display: block; }.check-row strong, .check-row small { display: block; }.check-row strong { color: #aebbb4; font-size: 9px; }.check-row small { margin-top: 3px; color: #58685f; font-size: 7px; }.spa-row { margin: 13px 0; }
.reserved-address { margin-bottom: 16px; padding: 11px 13px; display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 7px; }.reserved-address span { color: var(--green); font-size: 7px; letter-spacing: .12em; }.reserved-address strong { color: #8fa098; font: 8px ui-monospace, monospace; }.project-drop-zone { min-height: 215px; padding: 25px; display: flex; flex-direction: column; justify-content: center; align-items: center; border: 1px dashed #41534a; border-radius: 9px; text-align: center; background: #081310; transition: border-color .2s, background .2s; }.project-drop-zone.dragging { border-color: var(--green); background: rgba(121,227,176,.04); }.project-drop-zone > span { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 50%; background: rgba(121,227,176,.08); color: var(--green); font-size: 19px; }.project-drop-zone h3 { margin: 13px 0 5px; color: #c5d1ca; font-size: 12px; }.project-drop-zone p { margin: 0 0 14px; color: #5f7067; font-size: 8px; }.project-drop-zone code { color: #9baba2; }.project-drop-zone > div { display: flex; gap: 8px; align-items: center; }.project-drop-zone .button { min-height: 37px; }.project-file-summary { min-height: 74px; padding: 13px; display: flex; align-items: center; gap: 12px; border: 1px solid rgba(121,227,176,.2); border-radius: 8px; background: rgba(121,227,176,.035); }.project-file-summary > span { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; color: #082017; background: var(--green); font-weight: 900; }.project-file-summary > div { flex: 1; }.project-file-summary strong, .project-file-summary small { display: block; }.project-file-summary strong { color: #b8c6be; font-size: 10px; }.project-file-summary small { margin-top: 4px; color: #5f7067; font-size: 8px; }.upload-meter { height: 3px; margin-top: 12px; border-radius: 5px; background: #24322d; overflow: hidden; }.upload-meter span { display: block; width: 15%; height: 100%; background: var(--green); transition: width .2s; }
.deploy-success { padding: 16px 0 24px; text-align: center; }.deploy-success > span { width: 51px; height: 51px; margin: 0 auto 13px; display: grid; place-items: center; border-radius: 50%; background: var(--green); color: #071b14; font-size: 18px; font-weight: 900; box-shadow: 0 0 35px rgba(121,227,176,.16); }.deploy-success p { margin: 0 0 6px; color: var(--green); font-size: 7px; letter-spacing: .15em; }.deploy-success h2 { margin: 0; color: #dbe5df; font: 16px ui-monospace, monospace; letter-spacing: -.02em; }.deploy-success small { display: block; margin-top: 8px; color: #65756d; font-size: 8px; }.managed-dns { margin-bottom: 18px; padding: 15px; display: flex; gap: 13px; border: 1px solid rgba(121,227,176,.16); border-radius: 8px; background: rgba(121,227,176,.035); }.managed-dns > span { color: var(--green); }.managed-dns strong { color: #b5c2bb; font-size: 10px; }.managed-dns p { margin: 5px 0 0; color: #617169; font-size: 8px; line-height: 1.5; }.dns-card { margin-bottom: 18px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }.dns-card > div { padding: 13px 15px; border-bottom: 1px solid var(--line); }.dns-card h3 { margin: 0; color: #becac3; font-size: 11px; }.dns-card p { margin: 3px 0 0; color: #5a6a62; font-size: 8px; }.dns-card table { width: 100%; border-collapse: collapse; }.dns-card th, .dns-card td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; color: #798980; font-size: 7px; }.dns-card th { color: #506058; font-size: 6px; letter-spacing: .1em; }.dns-card tr:last-child td { border: 0; }.dns-card code { font-size: 7px; }.dns-card button { border: 0; background: transparent; color: var(--green); cursor: pointer; font-size: 7px; }
.site-menu { position: fixed; z-index: 45; width: 170px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 8px; background: #11211c; box-shadow: 0 16px 45px rgba(0,0,0,.5); }.site-menu button { width: 100%; height: 34px; padding: 0 10px; display: flex; align-items: center; gap: 9px; border: 0; border-radius: 5px; background: transparent; color: #9baaa2; cursor: pointer; text-align: left; font-size: 9px; }.site-menu button:hover { color: var(--cream); background: rgba(255,255,255,.04); }.site-menu button.danger { color: var(--danger); }.site-menu hr { height: 1px; margin: 5px; border: 0; background: var(--line); }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 25px; min-width: min(430px, calc(100% - 32px)); padding: 13px 17px; border: 1px solid var(--line-strong); border-radius: 8px; background: #15251f; box-shadow: 0 16px 50px rgba(0,0,0,.5); color: #bcc9c2; text-align: center; font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 15px); transition: .2s; }.toast.show { opacity: 1; transform: translate(-50%, 0); }.toast.error { border-color: rgba(255,141,141,.3); color: #ffc3c3; }

@media (max-width: 1050px) {
  .hero { gap: 20px; }.hero-visual { transform: scale(.85); transform-origin: center; margin-inline: -30px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }.security-copy { padding: 55px 45px; }
}
@media (max-width: 820px) {
  .shell { width: min(100% - 30px, 680px); }.site-header { grid-template-columns: 1fr auto; }.site-nav { display: none; }
  .hero { display: block; min-height: auto; padding-top: 75px; text-align: center; }.hero-copy > p { margin-inline: auto; }.hero-actions, .trust-row { justify-content: center; }.hero-visual { width: 500px; max-width: 100%; margin: 65px auto 0; transform: scale(.93); transform-origin: top center; }
  .signal-inner { grid-template-columns: 1fr 1fr; padding-block: 20px; gap: 20px 0; }.signal-inner > div:nth-child(3) { padding-left: 0; border-left: 0; }.section-intro { display: block; }.section-intro h2 { margin-bottom: 20px; }.feature-large { grid-template-columns: 1fr; gap: 40px; padding-top: 120px; }.mini-terminal { margin-left: 0; }.security-panel { grid-template-columns: 1fr; }.security-art { min-height: 380px; border-right: 0; border-bottom: 1px solid var(--line); }
  .dashboard { display: block; }.dash-sidebar { height: 64px; padding: 0 20px; position: sticky; z-index: 20; flex-direction: row; align-items: center; }.dash-logo { margin: 0; }.dash-nav { margin-left: auto; flex-direction: row; }.dash-nav button, .dash-nav a { width: auto; }.dash-nav button span, .dash-nav a span, .dash-nav button i { display: none; }.sidebar-foot { margin: 0 0 0 10px; }.system-health { display: none; }.sidebar-foot button { width: 36px; overflow: hidden; white-space: nowrap; }.dash-main { padding: 30px 20px 60px; }
  .sites-table th:nth-child(3), .sites-table td:nth-child(3), .sites-table th:nth-child(4), .sites-table td:nth-child(4) { display: none; }
}
@media (max-width: 580px) {
  .site-header { height: 67px; }.site-header .button { min-height: 35px; padding-inline: 12px; }.hero { padding-top: 52px; padding-bottom: 60px; }.hero h1 { font-size: 49px; }.hero-actions { flex-direction: column; gap: 7px; }.trust-row { flex-wrap: wrap; gap: 10px 17px; }.hero-visual { height: 385px; transform: scale(.68); margin-top: 35px; margin-bottom: -90px; margin-left: -55px; max-width: none; }.signal-inner { grid-template-columns: 1fr; }.signal-inner > div { padding: 0 0 14px !important; border: 0; border-bottom: 1px solid var(--line); }.signal-inner > div:last-child { border: 0; }.section-pad { padding-block: 85px; }.section-intro h2 { font-size: 39px; }.feature-grid { grid-template-columns: 1fr; }.feature-large { grid-column: auto; padding: 105px 27px 28px; }.feature-large .feature-icon { left: 27px; top: 34px; }.feature-card { padding: 27px; }.mini-terminal { display: none; }.security-copy { padding: 40px 27px; }.security-art { min-height: 310px; }.marketing-footer { padding-block: 25px; flex-direction: column; gap: 13px; }
  .modal-overlay { padding: 10px; }.auth-modal, .project-modal { padding: 34px 23px; max-height: calc(100vh - 20px); }.qr-layout { grid-template-columns: 125px 1fr; gap: 13px; }.auth-panel h2 { font-size: 28px; }
  .dash-nav button:not(.active), .dash-nav a { display: none; }.dash-header { align-items: flex-start; }.owner-chip { display: none; }.dash-header-actions .button { padding-inline: 13px; }.stat-grid { grid-template-columns: 1fr 1fr; }.stat-grid article { padding: 15px; }.stat-grid article > i { display: none; }.section-toolbar { align-items: flex-start; flex-direction: column; gap: 12px; }.toolbar-actions { width: 100%; }.search-box { flex: 1; }.sites-table th:nth-child(2), .sites-table td:nth-child(2), .sites-table th:nth-child(5), .sites-table td:nth-child(5) { display: none; }.sites-table th, .sites-table td { padding-inline: 12px; }.api-banner { grid-template-columns: auto 1fr; }.api-banner .button { grid-column: 1 / -1; }.address-tabs { grid-template-columns: 1fr; }
}

/* Vireonix family theme ---------------------------------------------------- */
body { background: #f4f5f1; color: #171914; }
.page-noise { opacity: .012; }
.shell { width: min(1376px, calc(100% - 64px)); }
.site-header { width: 100%; height: 73px; padding-inline: max(32px, calc((100% - 1376px) / 2)); border-bottom: 1px solid #dfe2da; background: #fff; }
.logo { color: #181a16; }.logo svg { stroke: #69c817; }.site-nav a { color: #454a42; font-size: 13px; }.site-nav a:hover { color: #11130f; }
.button { border-radius: 9px; font-size: 13px; }.button-primary { color: #142007; background: #79d91f; border-color: #68c711; box-shadow: none; }.button-ghost { color: #171914; border-color: #cfd4ca; background: #fff; }.button-link { color: #252a22; }

.hero { width: min(1376px, calc(100% - 64px)); min-height: 548px; margin-top: 28px; padding: 40px 32px; gap: 54px; border: 1px solid #d9ddd4; border-radius: 15px; background: radial-gradient(circle at 96% 0, rgba(121,217,31,.12), transparent 37%), #fff; box-shadow: 0 1px 2px rgba(25,31,20,.03); }
.hero::before { display: none; }.announcement { color: #265c02; border-color: #cde9b4; background: #f1fae8; font-size: 10px; text-transform: none; letter-spacing: 0; }.announcement span { background: #79d91f; box-shadow: none; }
.hero h1 { margin: 22px 0 18px; color: #10120e; font-size: clamp(48px, 5.3vw, 72px); line-height: .98; }.hero h1 em { color: #64be14; }.hero-copy > p { color: #4d554a; font-size: 16px; line-height: 1.62; }.trust-row { color: #677063; }.trust-row i { color: #5eb411; }
.radar-ring { border-color: rgba(62,90,46,.1); }.console-preview { border-color: #343c31; background: linear-gradient(145deg, #1b2019, #11150f); box-shadow: 0 30px 65px rgba(24,31,19,.2), inset 0 1px rgba(255,255,255,.04); }.float-card { border-color: #343b30; background: #181d16; box-shadow: 0 12px 30px rgba(23,30,18,.18); }

.signal-bar { margin-top: 20px; border: 1px solid #dfe2da; border-left: 0; border-right: 0; background: #fff; }.signal-inner strong { color: #171914; }.signal-inner span { color: #747b70; }.signal-inner > div { border-color: #dfe2da; }
.section-pad { padding-top: 105px; padding-bottom: 105px; }.kicker { color: #4e9908; }.section-intro h2, .security-copy h2, .final-cta h2 { color: #11130f; }.section-intro > p:last-child { color: #5c6359; }
.feature-card { border-color: #d9ddd4; background: #fff; box-shadow: 0 1px 2px rgba(25,31,20,.025); }.feature-icon { color: #5fba10; border-color: #d6e9c6; background: #f1f8eb; }.feature-index { color: #5a940f; }.feature-card h3 { color: #151713; }.feature-card p { color: #5c6459; }.feature-card code { color: #41483e; }.mini-terminal { border-color: #282e25; background: #151912; box-shadow: none; }.mini-terminal > span { border-color: #30372d; }.mini-terminal code { color: #aeb8aa; }.mini-terminal code b { color: #89e838; }.domain-pills span { color: #444b41; border-color: #dfe2da; background: #fafbf8; }.domain-pills span::before { color: #69c817; }.uptime-line::before { background: linear-gradient(90deg, #d8e6ce, #70cc1c); }.uptime-line span { background: linear-gradient(180deg, rgba(121,217,31,.18), transparent); }.uptime-line i { background: #70cf19; box-shadow: none; }.uptime-line b { color: #4f980d; }

.security-panel { border-color: #d9ddd4; background: #fff; }.security-art { border-color: #dfe2da; background-color: #f8fbf4; background-image: radial-gradient(circle, rgba(88,133,52,.12) 1px, transparent 1px); }.security-art::before { background: rgba(121,217,31,.13); }.key-orbit { color: #58ad0d; border-color: #afd98b; background: #eef9e4; box-shadow: 0 0 65px rgba(121,217,31,.16); }.orbit { border-color: rgba(81,128,43,.17); }.security-copy > p:not(.kicker) { color: #5c6459; }.security-copy ul, .security-copy li { border-color: #dfe2da; }.security-copy li { color: #474e45; }.security-copy li span { color: #55a70c; }
.final-cta .button { box-shadow: none; }.marketing-footer { color: #6c7469; border-color: #dfe2da; }

/* Light authentication and project dialogs */
.modal-overlay { background: rgba(25,29,23,.55); backdrop-filter: blur(8px); }.auth-modal, .project-modal { color: #171914; border-color: #d5d9d0; background: radial-gradient(circle at 100% 0, rgba(121,217,31,.11), transparent 34%), #fff; box-shadow: 0 25px 80px rgba(30,36,26,.2); }.modal-close, .project-modal .icon-button { color: #596057; }.auth-brand { color: #61695e; }.auth-mark { border-color: #68c417; }.auth-mark i { background: #68c417; }.auth-progress span, .project-progress span { background: #e4e7e0; }.auth-progress span.active, .project-progress span.active { background: #72cf1c; }.auth-panel h2, .project-modal header h2 { color: #11130f; }.auth-lede { color: #5d655a; }.key-drop { border-color: #cbd1c6; background: #fafbf8; }.key-drop:hover { border-color: #72ce1d; background: #f4fbeE; }.key-file-icon { color: #5bad11; background: #edf8e4; }.key-drop strong { color: #242820; }.key-drop small { color: #737b70; }.key-drop i { color: #4f574d; border-color: #d5d9d0; }.key-loaded { border-color: #cce7b5; background: #f4fbeE; }.key-loaded > span { color: #18230e; background: #79d91f; }.key-loaded small { color: #4f990d; }.key-loaded strong { color: #20231e; }.key-loaded code { color: #697166; }.privacy-note, .qr-layout > div:last-child > p { color: #687066; }.privacy-note strong { color: #30352d; }.qr-layout > div:last-child > small { color: #4d950d; }.secret-code, .code-input { color: #171914; border-color: #d2d7cd; background: #fafbf8; }.secret-code code, .code-input input { color: #171914; }.code-input:focus-within { border-color: #72cf1c; box-shadow: 0 0 0 3px rgba(121,217,31,.1); }.code-input span { color: #7b8378; }.skip-security { color: #596158; }.skip-security:hover { color: #4f990d; }.skip-note { color: #7b8278; }

.input, .domain-field { color: #171914; border-color: #d3d7cf; background: #fafbf8; }.input:focus, .domain-field:focus-within { border-color: #70cd1a; box-shadow: 0 0 0 3px rgba(121,217,31,.1); }.domain-field input { color: #171914; }.domain-field span { color: #777f74; }.field-label { color: #4d554b; }.address-tabs button { border-color: #d9ddd4; background: #fafbf8; }.address-tabs button > span { color: #657063; background: #eef0eb; }.address-tabs strong { color: #30352d; }.address-tabs small { color: #757d72; }.address-tabs button.active { border-color: #a9d881; background: #f2faeb; }.address-tabs button.active > span, .address-tabs button.active strong { color: #4f9b0b; }.generated-domain { border-color: #c4e4a7; background: #f4fbeE; }.generated-domain span { color: #30372d; }.generated-domain button { color: #4f9b0b; border-color: #d4e9c2; }.address-field > p, .check-row small { color: #737b70; }.check-row { border-color: #d9ddd4; }.check-row strong { color: #343a31; }.check-row > span { border-color: #bfc6bb; }.check-row input:checked + span { border-color: #70cd1a; background: #79d91f; }.reserved-address { border-color: #d9ddd4; }.reserved-address span { color: #4f990d; }.reserved-address strong { color: #596158; }.project-drop-zone { border-color: #c6cdc1; background: #fafbf8; }.project-drop-zone.dragging { border-color: #70cc1c; background: #f2faeb; }.project-drop-zone > span { color: #55a70d; background: #edf8e4; }.project-drop-zone h3 { color: #242820; }.project-drop-zone p { color: #6a7267; }.project-drop-zone code { color: #3f463c; }.project-file-summary { border-color: #c9e5b2; background: #f4fbeE; }.project-file-summary > span { color: #17230d; background: #79d91f; }.project-file-summary strong { color: #343a31; }.project-file-summary small { color: #6b7368; }.upload-meter { background: #e2e6de; }.upload-meter span { background: #72ce1c; }.deploy-success > span { color: #17230d; background: #79d91f; box-shadow: none; }.deploy-success p { color: #4f990d; }.deploy-success h2 { color: #20231e; }.deploy-success small { color: #70776d; }.managed-dns { border-color: #c9e5b2; background: #f4fbeE; }.managed-dns > span { color: #58aa10; }.managed-dns strong { color: #30352d; }.managed-dns p { color: #697166; }.dns-card { border-color: #d9ddd4; }.dns-card > div, .dns-card th, .dns-card td { border-color: #dfe2da; }.dns-card h3 { color: #242820; }.dns-card p, .dns-card th { color: #737b70; }.dns-card td { color: #434a40; }.dns-card button { color: #4e980b; }

/* Vireonix-style light owner console */
.dashboard { color: #171914; background: #f4f5f1; }.dash-sidebar { border-color: #dfe2da; background: #fff; }.dash-nav button, .dash-nav a, .sidebar-foot button { color: #5b6358; }.dash-nav button:hover, .dash-nav a:hover, .dash-nav button.active { color: #315f09; background: #f0f8e9; }.dash-nav button.active { color: #4d970a; }.dash-nav button > span, .dash-nav a > span { color: #667061; }.dash-nav i { color: #5e665b; background: #eff1ed; }.system-health { border-color: #dfe2da; }.system-health > span { background: #71d01b; box-shadow: none; }.system-health strong { color: #42483f; }.system-health small { color: #757d72; }.dash-main { color: #171914; }.dash-header p { color: #4e980c; }.dash-header h1 { color: #11130f; }.owner-chip { border-color: #d5d9d0; background: #fff; }.owner-chip > i, .owner-chip small { color: #4f990d; }.owner-chip strong { color: #4e554b; }
.stat-grid article { border-color: #d9ddd4; background: #fff; }.stat-icon.sea, .stat-icon.green { color: #53a20d; background: #eff8e7; }.stat-icon.amber { color: #986100; background: #fff6e7; }.stat-icon.blue { color: #2163a9; background: #eef5fd; }.stat-grid small { color: #71796e; }.stat-grid strong { color: #1b1e19; }.stat-grid article > i { color: #747c71; }.stat-grid article > i.positive { color: #4e920f; }.stat-grid i b { background: #70ce19; }.section-toolbar h2 { color: #171914; }.section-toolbar p { color: #727a70; }.search-box { border-color: #d5d9d0; background: #fff; }.search-box input { color: #20241e; }.search-box input::placeholder { color: #8a9187; }.icon-button { color: #555d52; border-color: #d5d9d0; background: #fff; }
.sites-table-wrap { border-color: #d9ddd4; background: #fff; }.sites-table th { color: #747c71; border-color: #e1e4dd; background: #fafbf8; }.sites-table td { color: #535b50; border-color: #e5e7e1; }.site-initial { color: #4f990d; border-color: #d6e5c9; background: #f1f8eb; }.site-cell strong { color: #262a23; }.site-cell small { color: #798076; }.site-status { color: #626a5f; background: #f0f2ee; }.site-status.active, .site-status.simulated { color: #428407; background: #edf8e4; }.site-status.active::before, .site-status.simulated::before { background: #70ce19; box-shadow: none; }.site-address { color: #626a5f; }.row-menu { color: #687065; }.row-menu:hover { color: #171914; background: #f0f2ed; }.empty-art { color: #55a70d; border-color: #d4e5c6; background: #f1f8eb; }.empty-sites h3 { color: #252923; }.empty-sites p { color: #737b70; }.api-banner { border-color: #cce5b6; background: linear-gradient(100deg, #f0f8e9, #fff); }.api-symbol { color: #4f990d; background: #e7f5da; }.api-banner span { color: #4f990d; }.api-banner h3 { color: #252923; }.api-banner p { color: #687066; }
.site-menu { color: #171914; border-color: #d5d9d0; background: #fff; box-shadow: 0 14px 40px rgba(30,36,26,.14); }.site-menu button { color: #4f574c; }.site-menu button:hover { color: #171914; background: #f2f4f0; }.site-menu hr { background: #dfe2da; }.toast { color: #20241e; border-color: #cfd4ca; background: #fff; box-shadow: 0 12px 38px rgba(28,34,24,.16); }

@media (max-width: 820px) {
  .shell, .hero { width: min(100% - 30px, 680px); }.site-header { padding-inline: 20px; }.hero { padding: 44px 24px; }.dash-sidebar { background: #fff; }
}

/* NodePier identity layer: maritime infrastructure, not a Vireonix clone. */
:root {
  --green: #20b99a;
  --green-bright: #35d0ae;
  --green-deep: #dff6f0;
  --sea: #e9f5f2;
  --navy: #f1f6f5;
}
body, .dashboard { background: #f1f6f5; }
.site-header { background: rgba(255,255,255,.94); backdrop-filter: blur(14px); }
.logo svg { stroke: #0f9d84; }
.button-primary { color: #fff; border-color: #087e6c; background: linear-gradient(135deg, #109f87, #087b6a); box-shadow: 0 9px 22px rgba(8,126,108,.13); }
.button-primary:hover:not(:disabled) { filter: brightness(1.05); }
.announcement { color: #fff; border: 0; border-radius: 5px; background: #0d8b76; letter-spacing: .045em; text-transform: uppercase; }
.announcement span { background: #9cf0db; }
.hero { border-color: #d2ddda; background: radial-gradient(circle at 90% 15%, rgba(32,185,154,.14), transparent 34%), linear-gradient(160deg, #fff 55%, #f3faf8); }
.hero h1 em { color: #0c927b; }
.trust-row i, .kicker, .feature-index { color: #087f6c; }
.radar-ring { border-color: rgba(7,115,97,.13); }
.map-line { background: linear-gradient(90deg, rgba(32,185,154,.15), #20b99a, rgba(32,185,154,.15)); box-shadow: 0 0 8px rgba(32,185,154,.25); }
.node-edge i, .node-live i, .status-dot { background: #22c7a5; box-shadow: 0 0 0 1px #22c7a5, 0 0 19px rgba(32,185,154,.45); }
.preview-top i, .float-domain span, .float-tls strong, .deploy-event code { color: #42d8b5; }
.deploy-event > span { background: #27cba9; }
.signal-bar { background: #f9fbfa; }

.feature-card, .security-panel { border-color: #d5dfdc; box-shadow: 0 8px 24px rgba(34,64,55,.035); }
.feature-icon { color: #0b917a; border-color: #c4e5dd; background: #e8f6f2; }
.domain-pills span::before { color: #16a98d; }
.uptime-line::before { background: linear-gradient(90deg, #d3e8e2, #17aa8e); }
.uptime-line span { background: linear-gradient(180deg, rgba(32,185,154,.2), transparent); }
.uptime-line i { background: #16ab8e; }.uptime-line b { color: #087e6b; }
.security-art { background-color: #eef8f5; background-image: radial-gradient(circle, rgba(12,126,106,.13) 1px, transparent 1px); }
.security-art::before { background: rgba(32,185,154,.15); }
.key-orbit { color: #07806c; border-color: #8fd1c1; background: #e2f5f0; box-shadow: 0 0 65px rgba(32,185,154,.17); }
.orbit { border-color: rgba(9,123,104,.18); }.security-copy li span { color: #07806c; }

.auth-modal, .project-modal { background: radial-gradient(circle at 100% 0, rgba(32,185,154,.12), transparent 34%), #fff; }
.auth-mark { border-color: #0f9d84; }.auth-mark i, .auth-progress span.active, .project-progress span.active { background: #12a98d; }
.key-file-icon, .api-symbol, .empty-art, .stat-icon.sea, .stat-icon.green { color: #087f6c; background: #e5f5f0; }
.key-drop:hover, .code-input:focus-within, .input:focus, .domain-field:focus-within { border-color: #16a88d; box-shadow: 0 0 0 3px rgba(32,185,154,.1); }
.key-loaded, .project-file-summary, .managed-dns { border-color: #bee3da; background: #edf8f5; }
.key-loaded > span, .project-file-summary > span, .deploy-success > span, .check-row input:checked + span { color: #fff; background: #109f86; }
.key-loaded small, .qr-layout > div:last-child > small, .skip-security:hover, .generated-domain button, .deploy-success p, .dns-card button { color: #087f6c; }
.address-tabs button.active, .generated-domain { border-color: #aadace; background: #edf8f5; }
.address-tabs button.active > span, .address-tabs button.active strong, .reserved-address span, .managed-dns > span { color: #087f6c; }
.project-drop-zone.dragging { border-color: #16a88d; background: #edf8f5; }
.project-drop-zone > span { color: #087f6c; background: #e4f4f0; }.upload-meter span { background: #14a98d; }

.dash-sidebar { border-right-color: #d6e0dd; background: #fbfdfc; }
.dash-nav button:hover, .dash-nav a:hover, .dash-nav button.active { color: #076f5f; background: #e8f5f1; }.dash-nav button.active, .dash-header p, .owner-chip > i, .owner-chip small { color: #087f6c; }
.system-health > span, .stat-grid i b, .site-status.active::before, .site-status.simulated::before { background: #14aa8e; }
.stat-grid article, .sites-table-wrap, .owner-chip, .search-box { border-color: #d6e0dd; }
.site-initial { color: #087f6c; border-color: #c9e2dc; background: #eaf6f3; }
.site-status.active, .site-status.simulated { color: #087462; background: #e5f5f0; }
.api-banner { border-color: #bcded6; background: linear-gradient(100deg, #e8f6f2, #fff); }
.api-banner span { color: #087f6c; }

/* Per-site traffic analytics */
.site-row { cursor: pointer; transition: background .16s; }.site-row:hover, .site-row:focus-visible { background: #f6fbf9; }.site-row:focus-visible { outline: 2px solid #16a88d; outline-offset: -2px; }
.analytics-modal { width: min(1060px, 100%); max-height: calc(100vh - 48px); padding: 34px 38px 32px; overflow-y: auto; color: #171914; border: 1px solid #d2dad6; border-radius: 15px; background: radial-gradient(circle at 100% 0, rgba(32,185,154,.1), transparent 29%), #f8fbfa; box-shadow: 0 30px 95px rgba(23,37,32,.25); }
.analytics-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 25px; }.analytics-header .kicker { margin-bottom: 7px; }.analytics-header h2 { margin: 0; font-size: 29px; font-weight: 650; letter-spacing: -.04em; }.analytics-header code { display: block; margin-top: 6px; color: #64706b; font-size: 10px; }.analytics-header-actions { display: flex; gap: 8px; }.analytics-header-actions .icon-button { flex: 0 0 auto; }
.analytics-toolbar { min-height: 57px; margin: 25px 0 16px; padding: 8px 9px 8px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #dbe3e0; border-radius: 9px; background: #fff; }.analytics-toolbar p { margin: 0; color: #66716c; font-size: 10px; }.range-tabs { display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: #edf2f0; }.range-tabs button { height: 31px; padding: 0 12px; border: 0; border-radius: 5px; color: #63706b; background: transparent; cursor: pointer; font-size: 9px; font-weight: 700; }.range-tabs button.active { color: #076f5f; background: #fff; box-shadow: 0 1px 4px rgba(28,53,46,.1); }
.analytics-loading { min-height: 390px; display: grid; place-items: center; align-content: center; gap: 13px; color: #6e7974; font-size: 10px; }.analytics-loading span { width: 27px; height: 27px; border: 2px solid #d5e4e0; border-top-color: #109f86; border-radius: 50%; animation: analyticsSpin .7s linear infinite; }.analytics-loading p { margin: 0; }@keyframes analyticsSpin { to { transform: rotate(360deg); } }
.analytics-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }.analytics-metrics article { min-height: 110px; padding: 18px; border: 1px solid #d7e0dd; border-radius: 9px; background: #fff; }.analytics-metrics small, .analytics-metrics strong, .analytics-metrics span { display: block; }.analytics-metrics small { color: #76817c; font-size: 7px; font-weight: 800; letter-spacing: .13em; }.analytics-metrics strong { margin-top: 9px; color: #171c19; font-size: 25px; letter-spacing: -.04em; }.analytics-metrics span { margin-top: 6px; color: #87908c; font-size: 8px; }
.analytics-chart-card, .analytics-panel { border: 1px solid #d7e0dd; border-radius: 10px; background: #fff; }.analytics-chart-card { margin-top: 11px; padding: 21px 23px 17px; }.analytics-card-heading { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }.analytics-card-heading h3 { margin: 0; color: #272d29; font-size: 13px; }.analytics-card-heading p { margin: 4px 0 0; color: #7b8580; font-size: 8px; }.analytics-card-heading > span { color: #7c8782; font-size: 8px; }
.analytics-chart { height: 170px; margin-top: 23px; display: flex; align-items: stretch; gap: clamp(3px, .8vw, 9px); border-bottom: 1px solid #e3e9e7; background-image: linear-gradient(to bottom, #eef3f1 1px, transparent 1px); background-size: 100% 33.333%; }.analytics-bar { min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }.analytics-bar > i { min-height: 140px; display: flex; align-items: flex-end; justify-content: center; }.analytics-bar > i > span { width: min(18px, 75%); min-height: 2px; display: block; border-radius: 4px 4px 1px 1px; background: linear-gradient(180deg, #24bea0, #0c8e78); transition: height .25s ease; }.analytics-bar small { height: 25px; padding-top: 8px; color: #858f8a; text-align: center; font-size: 7px; white-space: nowrap; }
.analytics-empty { min-height: 170px; display: grid; place-items: center; align-content: center; text-align: center; }.analytics-empty strong { color: #3c4641; font-size: 11px; }.analytics-empty p { margin: 6px 0 0; color: #7d8782; font-size: 8px; }
.analytics-detail-grid { margin-top: 11px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 11px; }.analytics-panel { min-height: 280px; padding: 20px 22px; }.analytics-paths { margin-top: 16px; }.analytics-path { margin-top: 12px; }.analytics-path:first-child { margin-top: 0; }.analytics-path > div { display: flex; justify-content: space-between; gap: 15px; }.analytics-path code { max-width: 70%; overflow: hidden; color: #38423d; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }.analytics-path div span { color: #7b8580; font-size: 7px; white-space: nowrap; }.analytics-path > i { height: 3px; margin-top: 6px; display: block; border-radius: 9px; background: #edf2f0; overflow: hidden; }.analytics-path > i span { height: 100%; display: block; border-radius: inherit; background: #17a88d; }
.quality-grid { margin-top: 17px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }.quality-grid > div { padding: 10px; border-radius: 7px; background: #f4f8f6; }.quality-grid small, .quality-grid strong { display: block; }.quality-grid small { color: #7b8580; font-size: 6px; letter-spacing: .08em; }.quality-grid strong { margin-top: 5px; color: #2d3632; font-size: 13px; }
.analytics-status-bar { height: 7px; margin-top: 18px; display: flex; border-radius: 9px; background: #e8eeeb; overflow: hidden; }.analytics-status-bar span { min-width: 2px; }.analytics-status-bar .success, .analytics-status-legend .success i { background: #16a88d; }.analytics-status-bar .redirect, .analytics-status-legend .redirect i { background: #5d88cc; }.analytics-status-bar .client-error, .analytics-status-legend .client-error i { background: #dca84e; }.analytics-status-bar .server-error, .analytics-status-legend .server-error i { background: #d85c5c; }.analytics-status-legend { margin-top: 9px; display: flex; gap: 11px; flex-wrap: wrap; }.analytics-status-legend span { display: flex; align-items: center; gap: 4px; color: #707b76; font-size: 6px; }.analytics-status-legend i { width: 5px; height: 5px; border-radius: 50%; }.analytics-status-legend b { color: #414b46; }
.analytics-sources { margin-top: 19px; padding-top: 14px; border-top: 1px solid #e3e8e6; }.analytics-sources h4 { margin: 0 0 8px; color: #4b5550; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }.analytics-sources #analytics-sources { display: flex; flex-direction: column; gap: 7px; }.analytics-sources #analytics-sources > span { display: flex; justify-content: space-between; color: #6c7772; font-size: 8px; }.analytics-sources strong { max-width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }.analytics-sources b { color: #333d38; }.analytics-list-empty { margin: 20px 0; color: #858f8a; font-size: 8px; }
.analytics-privacy { margin: 13px 3px 0; color: #78837e; font-size: 7px; line-height: 1.55; }

@media (max-width: 760px) {
  .analytics-modal { padding: 25px 18px; max-height: calc(100vh - 20px); }.analytics-header { align-items: flex-start; }.analytics-header-actions .button { display: none; }.analytics-toolbar { align-items: stretch; flex-direction: column; }.range-tabs { width: 100%; }.range-tabs button { flex: 1; padding-inline: 5px; }.analytics-metrics { grid-template-columns: 1fr 1fr; }.analytics-detail-grid { grid-template-columns: 1fr; }.analytics-chart-card { padding-inline: 14px; }.analytics-card-heading > span { display: none; }
}