:root {
  --canvas: #f4f7f8;
  --panel: #ffffff;
  --ink: #172128;
  --muted: #6c7a84;
  --line: #dde5e8;
  --soft-line: #eaf0f2;
  --nav: #10191e;
  --nav-muted: #93a1a8;
  --nav-active: #213139;
  --green: #157a62;
  --green-bright: #1b9a78;
  --green-soft: #e4f4ee;
  --blue: #2778a0;
  --blue-soft: #e8f4f8;
  --orange: #bd6a24;
  --orange-soft: #fff0df;
  --red: #bd4d4d;
  --font: "Noto Sans SC", "Microsoft YaHei", sans-serif;
  --mono: "DM Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--font); font-size: 14px; letter-spacing: 0; }
body.panel-pending-auth .app-shell { visibility: hidden; }
body.panel-authenticated .app-shell { visibility: visible; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #9ed6c3; outline-offset: 2px; }
a { color: inherit; text-decoration: none; }
i[data-lucide] { width: 18px; height: 18px; stroke-width: 1.8; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: fixed; inset: 0 auto 0 0; width: 250px; display: flex; flex-direction: column; padding: 22px 14px 16px; color: #eef4f5; background: var(--nav); z-index: 4; }
.brand { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px; font-size: 16px; font-weight: 700; letter-spacing: .3px; }
.brand-mark { display: grid; place-items: center; width: 28px; height: 28px; color: #d9fcf1; background: var(--green); border-radius: 7px; }
.brand-mark i { width: 18px; }
.avatar { display: grid; place-items: center; flex: 0 0 auto; width: 28px; height: 28px; color: #cceee3; background: #285545; border-radius: 7px; font-weight: 700; font-size: 12px; }
.sidebar-user strong { font-size: 12px; font-weight: 600; }
.sidebar-user small { color: var(--nav-muted); font-size: 11px; }
.nav-list { display: grid; gap: 4px; margin-top: 18px; }
.nav-item { display: flex; align-items: center; gap: 11px; min-height: 42px; padding: 0 11px; color: #acb9be; border-radius: 6px; font-size: 13px; font-weight: 500; }
.nav-item i { width: 18px; }
.nav-item:hover { color: white; background: #19272d; }
.nav-item.active { color: #ecfffa; background: var(--nav-active); }
.nav-item.active i { color: #6bd9b8; }
.nav-item b { min-width: 20px; padding: 1px 5px; margin-left: auto; color: #a2ddd0; border-radius: 8px; background: #285545; text-align: center; font-family: var(--mono); font-size: 10px; font-weight: 500; }
.sidebar-spacer { flex: 1; min-height: 24px; }
.lucky-health { padding: 13px 11px; border-top: 1px solid #2a373d; border-bottom: 1px solid #2a373d; }
.health-top { display: flex; align-items: center; gap: 8px; color: #dce8e5; font-size: 12px; font-weight: 600; }
.status-dot, .live-dot { display: inline-block; flex: 0 0 auto; width: 7px; height: 7px; background: #49c79d; border-radius: 50%; box-shadow: 0 0 0 3px rgba(73, 199, 157, .12); }
.health-node { display: flex; align-items: center; gap: 7px; margin: 10px 0 9px; color: #9eadb2; font-family: var(--mono); font-size: 10px; }
.health-node i { width: 14px; height: 14px; }
.quiet-link { display: inline-flex; align-items: center; gap: 5px; padding: 0; color: #83cbb5; border: 0; background: transparent; font-size: 11px; }
.quiet-link i { width: 13px; height: 13px; }
.account-menu-wrap { position: relative; width: 100%; }.sidebar-user { display: flex; align-items: center; gap: 9px; width: 100%; padding: 16px 9px 4px; color: #e9f1f2; border: 0; background: transparent; text-align: left; }.sidebar-user:hover { color: white; }.account-menu { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 12; display: grid; width: 190px; padding: 5px; border: 1px solid #33454c; border-radius: 7px; background: #172329; box-shadow: 0 14px 30px rgba(0,0,0,.28); }.account-menu[hidden] { display: none; }.account-menu button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 34px; padding: 0 9px; color: #dce8e5; border: 0; border-radius: 5px; background: transparent; text-align: left; font-size: 12px; }.account-menu button:hover { background: #26383e; }.account-menu button i { width: 15px; height: 15px; }.account-menu .account-menu-danger { color: #f3aaaa; }.account-menu .account-menu-danger:hover { background: #3a292c; }
.sidebar-user > span:nth-child(2) { display: flex; flex: 1; flex-direction: column; gap: 1px; }
.sidebar-user > i { width: 17px; color: #93a1a8; }

.main-content { grid-column: 2; min-width: 0; }
.icon-button, .filter-button { position: relative; display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; color: #53636b; border: 1px solid var(--line); border-radius: 6px; background: white; }
.icon-button:hover, .filter-button:hover { color: var(--ink); border-color: #c7d3d7; background: #fbfcfc; }
.icon-button.compact { width: 32px; height: 32px; }
.icon-button.compact i { width: 16px; }
.primary-button, .secondary-button, .filter-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 0 13px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.primary-button { color: white; border: 1px solid #12654f; background: var(--green); box-shadow: 0 1px 1px rgba(13, 80, 62, .15); }
.primary-button:hover { background: #126b55; }
.secondary-button, .filter-button { color: #42525a; border: 1px solid var(--line); background: #fff; }
.secondary-button:hover, .filter-button:hover { border-color: #bbc9cd; background: #f8fbfb; }
.primary-button i, .secondary-button i, .filter-button i { width: 16px; height: 16px; }

.view-panel { display: none; width: min(1440px, 100%); padding: 38px clamp(24px, 4vw, 58px) 58px; margin: 0 auto; }
.view-panel.active { display: block; }
html[data-initial-panel="services"] .view-panel.active, html[data-initial-panel="logs"] .view-panel.active, html[data-initial-panel="settings"] .view-panel.active { display: none; }
html[data-initial-panel="services"] .view-panel[data-panel="services"], html[data-initial-panel="logs"] .view-panel[data-panel="logs"], html[data-initial-panel="settings"] .view-panel[data-panel="settings"] { display: block; }
html[data-initial-panel="services"] .nav-item.active, html[data-initial-panel="logs"] .nav-item.active, html[data-initial-panel="settings"] .nav-item.active { color: #acb9be; background: transparent; }
html[data-initial-panel="services"] .nav-item[data-view="services"], html[data-initial-panel="logs"] .nav-item[data-view="logs"], html[data-initial-panel="settings"] .nav-item[data-view="settings"] { color: #ecfffa; background: var(--nav-active); }
html[data-initial-panel="services"] .nav-item[data-view="services"] i, html[data-initial-panel="logs"] .nav-item[data-view="logs"] i, html[data-initial-panel="settings"] .nav-item[data-view="settings"] i { color: #6bd9b8; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 28px; }
.eyebrow { margin: 0 0 7px; color: var(--green); font-size: 11px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: 28px; line-height: 1.25; letter-spacing: 0; }
h2 { margin-bottom: 0; font-size: 17px; line-height: 1.35; letter-spacing: 0; }
.muted { margin-bottom: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.last-sync { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-left: 1px solid var(--line); }
.sync-symbol { display: grid; place-items: center; width: 30px; height: 30px; color: var(--green); border-radius: 50%; background: var(--green-soft); }
.sync-symbol i { width: 15px; }
.last-sync span:last-child { display: flex; flex-direction: column; gap: 1px; }
.last-sync small { color: var(--muted); font-size: 10px; }
.last-sync strong { font-family: var(--mono); font-size: 11px; font-weight: 500; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 7px; background: var(--panel); overflow: hidden; }
.stat-block { min-height: 148px; padding: 20px; border-right: 1px solid var(--line); }
.stat-block:last-child { border: 0; }
.stat-label { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: 12px; }
.stat-label i { width: 16px; color: #91a0a7; }
.stat-block > strong { display: block; margin-top: 13px; font-family: var(--mono); font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -1px; }
.stat-total { color: #a2b0b5; font-size: 15px; }
.stat-unit { font-size: 18px; }
.stat-block p { display: flex; align-items: center; gap: 6px; margin: 11px 0 0; color: var(--muted); font-size: 11px; }
.up-arrow { color: var(--green); font-family: var(--mono); font-weight: 700; }
.live-dot { width: 6px; height: 6px; box-shadow: none; }
.spark-bars { display: flex; align-items: end; gap: 3px; height: 28px; margin-top: 8px; }
.spark-bars span { display: block; flex: 1; min-width: 3px; border-radius: 1px 1px 0 0; background: #b9ddd2; }
.spark-bars span:nth-child(1) { height: 28%; }.spark-bars span:nth-child(2) { height: 44%; }.spark-bars span:nth-child(3) { height: 33%; }.spark-bars span:nth-child(4) { height: 57%; }.spark-bars span:nth-child(5) { height: 48%; }.spark-bars span:nth-child(6) { height: 73%; }.spark-bars span:nth-child(7) { height: 51%; }.spark-bars span:nth-child(8) { height: 83%; }.spark-bars span:nth-child(9) { height: 68%; }.spark-bars span:nth-child(10) { height: 92%; }.spark-bars span:nth-child(11) { height: 78%; }.spark-bars span:nth-child(12) { height: 100%; background: var(--green); }

.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(310px, .8fr); gap: 18px; margin-top: 18px; }
.panel { border: 1px solid var(--line); border-radius: 7px; background: var(--panel); }
.panel-heading, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.panel-heading { padding: 19px 20px 16px; }
.panel-heading .eyebrow { margin-bottom: 5px; }
.traffic-panel { overflow: hidden; }.topology-heading { padding-bottom: 12px; }.topology-actions { display: flex; align-items: center; gap: 9px; }.topology-service-picker { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }.topology-service-picker select { width: min(230px, 28vw); height: 32px; padding: 0 27px 0 8px; color: #405159; border: 1px solid var(--line); border-radius: 5px; background: white; font-family: var(--mono); font-size: 10px; }.topology-service-picker select:disabled { color: #9aa8ad; background: #f7f9f9; }.topology-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px; border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); background: #fbfdfd; }.topology-summary-domain { overflow: hidden; color: #3b4d54; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; }.topology-health { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto; color: var(--orange); font-size: 11px; font-weight: 700; }.topology-health.healthy { color: var(--green); }.topology-health i { width: 16px; height: 16px; }.path-map { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); min-height: 284px; padding: 34px 26px 64px; overflow: hidden; background: #13262b; }.path-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .18; filter: saturate(.48); }.path-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,25,30,.94), rgba(14,43,45,.76), rgba(11,25,30,.9)); }.topology-rail { position: absolute; top: 72%; right: 11%; left: 11%; display: grid; grid-template-columns: repeat(3, 1fr); height: 2px; background: rgba(154,209,196,.22); }.topology-segment { position: relative; background: linear-gradient(90deg, rgba(91,207,174,.15), rgba(105,231,191,.92), rgba(91,207,174,.15)); }.topology-segment::after { position: absolute; top: 50%; right: -1px; width: 7px; height: 7px; border: 2px solid #d2fff0; border-radius: 50%; background: var(--green-bright); box-shadow: 0 0 0 4px rgba(69,202,166,.15); content: ""; transform: translateY(-50%); }.topology-pending .topology-segment { background: linear-gradient(90deg, rgba(231,177,94,.12), rgba(232,169,73,.86), rgba(231,177,94,.12)); }.topology-pending .topology-segment::after { border-color: #fff0ce; background: #df993d; }.topology-unmapped .topology-segment { background: repeating-linear-gradient(90deg, rgba(161,184,187,.15) 0 6px, rgba(161,184,187,.55) 6px 11px, rgba(161,184,187,.15) 11px 17px); }.topology-unmapped .topology-segment::after { border-color: #e7eff0; background: #92a4a9; }.route-node { position: relative; z-index: 2; display: flex; align-items: center; min-width: 0; flex-direction: column; color: white; text-align: center; }.node-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border: 1px solid rgba(255,255,255,.24); border-radius: 8px; background: rgba(11,28,33,.86); box-shadow: 0 0 0 7px rgba(116,231,197,.1); }.node-icon i { width: 22px; height: 22px; }.node-icon.client { color: #c5e7f4; }.node-icon.edge { color: #8cd4ef; }.node-icon.stun { color: #87e4c6; }.node-icon.origin { color: #ffc97d; }.node-kicker { margin-bottom: 4px; color: #9fbab9; font-size: 9px; font-weight: 700; letter-spacing: .5px; }.node-title { overflow: hidden; max-width: 100%; margin: 0; color: #f5fcfb; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; }.route-node small { overflow: hidden; max-width: 100%; margin-top: 4px; color: #b5c7c7; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 9px; }.route-pulse { position: absolute; z-index: 3; top: calc(72% - 5px); width: 10px; height: 10px; border: 2px solid #c2fff0; border-radius: 50%; background: #47be99; box-shadow: 0 0 0 5px rgba(71,190,153,.16); animation: topology-travel 4.5s linear infinite; }.pulse-public { left: 21%; }.pulse-edge { left: 46%; animation-delay: 1.5s; }.pulse-origin { left: 71%; animation-delay: 3s; }.topology-pending .route-pulse { border-color: #fff0ce; background: #df993d; box-shadow: 0 0 0 5px rgba(223,153,61,.16); }.topology-unmapped .route-pulse { display: none; }@keyframes topology-travel { 0%,100% { opacity: .35; transform: translateX(-10px); } 50% { opacity: 1; transform: translateX(18px); } }.path-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 13px 20px; color: var(--muted); font-family: var(--mono); font-size: 10px; }.path-footer span { display: flex; align-items: center; gap: 6px; }.path-footer i { width: 14px; height: 14px; color: var(--green); }.path-footer strong { color: #3a4f57; font-weight: 500; }

.automation-panel { padding-bottom: 18px; }.automation-panel .panel-heading { padding-bottom: 9px; }.switch { position: relative; display: inline-flex; width: 36px; height: 20px; }.switch input { position: absolute; opacity: 0; }.switch span { position: relative; width: 36px; height: 20px; border-radius: 12px; background: #c4ced1; transition: .18s ease; }.switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: white; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: .18s ease; }.switch input:checked + span { background: var(--green); }.switch input:checked + span::after { transform: translateX(16px); }
.automation-text { padding: 0 20px; margin-bottom: 15px; color: var(--muted); font-size: 12px; line-height: 1.65; }.automation-flow { padding: 0 20px; }.flow-step { display: grid; grid-template-columns: 28px 1fr 16px; align-items: center; gap: 9px; }.flow-step > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; }.flow-step > span i { width: 14px; height: 14px; }.flow-step.complete > span { color: var(--green); background: var(--green-soft); }.flow-step.waiting > span { color: var(--blue); background: var(--blue-soft); }.flow-step div { display: flex; flex-direction: column; gap: 1px; }.flow-step strong { color: #34434a; font-size: 12px; }.flow-step small { color: var(--muted); font-size: 10px; }.flow-step > i { width: 15px; color: var(--green); }.flow-step.waiting > i { color: #8ea2aa; }.flow-line { width: 1px; height: 13px; margin: 2px 0 2px 13px; background: #cfdbdd; }.full-button { width: calc(100% - 40px); margin: 18px 20px 0; }

.services-section { margin-top: 33px; }.section-heading { margin-bottom: 15px; }.table-actions { display: flex; align-items: center; gap: 14px; }.filter-button { min-height: 32px; padding: 0 9px; font-size: 11px; }.filter-button i { width: 14px; }.text-link { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 12px; font-weight: 600; }.text-link i { width: 15px; }
.service-list { display: grid; border: 1px solid var(--line); border-radius: 7px; background: white; overflow: hidden; }.service-table-head, .service-row { display: grid; grid-template-columns: minmax(230px, 1.35fr) minmax(130px, .7fr) minmax(140px, .8fr) 88px 86px 122px; align-items: center; column-gap: 18px; padding: 0 18px; }.service-table-head { height: 38px; color: #829198; border: 1px solid var(--line); border-bottom: 0; border-radius: 7px 7px 0 0; background: #f9fbfb; font-size: 10px; font-weight: 600; }.service-table-head + .service-list { border-radius: 0 0 7px 7px; }.service-row { min-height: 82px; border-bottom: 1px solid var(--soft-line); }.service-row:last-child { border: 0; }.service-row:hover { background: #fbfdfd; }.service-primary { display: flex; align-items: center; gap: 11px; min-width: 0; }.service-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 7px; }.service-icon i { width: 17px; }.service-icon.photo { color: #276f91; background: #e6f2f7; }.service-icon.admin { color: #a45d26; background: #fff0df; }.service-icon.cloud { color: #5b4ca4; background: #eeebfa; }.service-primary > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }.service-primary strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }.service-primary small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 10px; }.service-link { display: flex; align-items: center; min-width: 0; gap: 4px; }.service-link > small, .service-link .origin-value { min-width: 0; }.inline-open { display: inline-grid; place-items: center; flex: 0 0 auto; width: 21px; height: 21px; padding: 0; color: #819198; border: 0; border-radius: 4px; background: transparent; }.inline-open:hover { color: var(--green); background: var(--green-soft); }.inline-open i { width: 13px; height: 13px; }.service-meta { min-width: 0; color: #52636a; font-size: 11px; }.service-meta small { display: block; margin-bottom: 3px; color: #99a8ad; font-size: 10px; }.origin-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }.protocol { display: inline-flex; align-items: center; padding: 3px 6px; color: #607078; border: 1px solid #dce5e7; border-radius: 4px; background: #f8fafb; font-family: var(--mono); font-size: 9px; }.certificate-cell { display: flex; flex-direction: column; gap: 5px; }.certificate-status { color: #9a6a35; font-size: 10px; }.certificate-status.issued { color: var(--green); }.service-status { display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-size: 11px; font-weight: 600; }.service-status.attention { color: var(--orange); }.service-status.attention .live-dot { background: #e7954b; }.row-actions { display: flex; justify-content: flex-end; gap: 4px; }.row-menu { display: inline-grid; place-items: center; width: 28px; height: 28px; color: #718087; border: 0; border-radius: 5px; background: transparent; }.row-menu:hover { color: var(--green); background: var(--green-soft); }.row-menu i { width: 17px; }

.compact-heading { align-items: center; }.service-page-actions { display: flex; align-items: center; gap: 9px; }.service-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 7px; background: white; }.search-field { display: flex; align-items: center; gap: 7px; width: min(340px, 100%); color: #87969d; }.search-field i { width: 17px; }.search-field input { width: 100%; border: 0; outline: 0; color: var(--ink); font-size: 12px; }.search-field input::placeholder { color: #9ba9ae; }.segmented { display: flex; padding: 3px; border-radius: 6px; background: #eef2f3; }.segmented button { min-width: 52px; height: 27px; padding: 0 8px; color: #697980; border: 0; border-radius: 4px; background: transparent; font-size: 11px; }.segmented button.active { color: #294148; background: white; box-shadow: 0 1px 2px rgba(21,35,40,.08); }.full-list .service-row { min-height: 86px; }

.domains-layout, .automation-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }.domain-table-wrap { overflow: hidden; }.domain-table-wrap .panel-heading { border-bottom: 1px solid var(--soft-line); }.table-count { color: var(--muted); font-family: var(--mono); font-size: 10px; }.domain-head, .domain-row { display: grid; grid-template-columns: minmax(190px, 1.2fr) 110px minmax(150px, 1fr) 100px 36px; align-items: center; gap: 16px; padding: 0 20px; }.domain-head { height: 38px; color: #87979d; border-bottom: 1px solid var(--soft-line); font-size: 10px; font-weight: 600; }.domain-row { min-height: 72px; border-bottom: 1px solid var(--soft-line); }.domain-row:last-child { border: 0; }.domain-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }.domain-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 500; }.domain-name small { color: var(--muted); font-size: 10px; }.ssl-badge, .origin-badge { display: inline-flex; align-items: center; gap: 5px; color: var(--green); font-size: 10px; font-weight: 600; }.ssl-badge i { width: 13px; }.origin-code { color: #51636b; font-family: var(--mono); font-size: 10px; }.policy-panel { padding: 20px; }.policy-panel > p { margin-bottom: 6px; }.policy-panel h2 { font-size: 18px; }.policy-panel > p:not(.eyebrow) { margin: 11px 0 16px; color: var(--muted); font-size: 12px; line-height: 1.7; }.policy-panel dl { margin: 0; }.policy-panel dl div { display: flex; justify-content: space-between; padding: 9px 0; border-top: 1px solid var(--soft-line); }.policy-panel dt { color: var(--muted); font-size: 11px; }.policy-panel dd { margin: 0; color: #3e5058; font-family: var(--mono); font-size: 10px; }.policy-panel .full-button { width: 100%; margin: 18px 0 0; }.help-block { display: flex; gap: 10px; margin-top: 14px; padding: 14px; color: #5b6c73; border-left: 2px solid #8abeb0; background: #eaf6f2; }.help-block i { flex: 0 0 auto; width: 17px; color: var(--green); }.help-block p { margin: 0; font-size: 11px; line-height: 1.6; }

.activity-panel { overflow: hidden; }.activity-panel .panel-heading { padding: 20px 22px; border-bottom: 1px solid var(--soft-line); }.log-page-actions, .log-refresh-controls { display: flex; align-items: center; gap: 14px; }.log-auto-refresh { display: inline-flex; align-items: center; gap: 7px; color: #46575e; font-size: 11px; font-weight: 600; }.log-auto-refresh.switch { width: auto; height: 20px; }.log-auto-refresh b { white-space: nowrap; }.refresh-interval { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 10px; }.refresh-interval select { height: 29px; padding: 0 25px 0 8px; color: #4c5e65; border: 1px solid var(--line); border-radius: 5px; background: #fff; font-family: var(--mono); font-size: 10px; }.activity-count { color: var(--muted); font-family: var(--mono); font-size: 10px; }#activity-log { max-height: min(650px, calc(100vh - 260px)); padding: 3px 22px 12px; overflow-y: auto; overscroll-behavior: contain; }.log-item { display: grid; grid-template-columns: 10px 1fr; gap: 9px; padding: 14px 0; border-bottom: 1px solid var(--soft-line); }.log-item:last-child { border: 0; }.log-mark { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: #b6c5c9; }.log-mark.success { background: var(--green); }.log-mark.warning { background: #e09143; }.log-item div { display: flex; flex-direction: column; gap: 4px; }.log-item strong { color: #43545b; font-size: 11px; font-weight: 600; }.log-item span { color: #839298; font-family: var(--mono); font-size: 9px; }

.modal-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(12, 23, 28, .45); opacity: 0; pointer-events: none; transition: opacity .18s ease; z-index: 10; }.auth-page { min-height: 100vh; background: #10191e; }.auth-page-main { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: linear-gradient(135deg, #10191e 0%, #17292d 100%); }.auth-page-panel { width: min(420px, 100%); padding: 30px; border: 1px solid #d7e0e3; border-radius: 8px; background: white; box-shadow: 0 24px 80px rgba(0,0,0,.28); }.auth-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 28px; color: #1c2b31; font-size: 13px; letter-spacing: .4px; }.auth-page-panel > .eyebrow { margin-bottom: 6px; }.auth-page-panel h1 { margin-bottom: 8px; font-size: 23px; }.auth-page-panel > .muted { margin-bottom: 22px; }.auth-page-panel form { display: grid; gap: 14px; }.auth-confirm-field { display: none !important; }.auth-confirm-field.visible { display: grid !important; }.auth-error { min-height: 17px; margin: -2px 0 0; color: var(--red); font-size: 11px; }.password-input { position: relative; display: block; width: 100%; }.password-input input { padding-right: 40px !important; }.password-toggle { position: absolute; top: 50%; right: 5px; display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #718087; border: 0; border-radius: 4px; background: transparent; transform: translateY(-50%); }.password-toggle:hover { color: var(--green); background: var(--green-soft); }.password-toggle i { width: 16px; height: 16px; }.full-auth-button { width: 100%; margin-top: 3px; }.webhook-field { display: grid; gap: 7px; margin-top: 15px; color: #405159; font-size: 12px; font-weight: 600; }.webhook-field input { width: 100%; }.webhook-field small { color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }.account-security { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--soft-line); }.account-security h3 { margin: 0 0 6px; font-size: 15px; }.account-security .muted { margin-bottom: 15px; }.account-security form { display: grid; gap: 12px; }.account-security .modal-actions { margin-top: 0; justify-content: flex-start; }.modal-backdrop.open { opacity: 1; pointer-events: auto; }.modal { width: min(500px, 100%); padding: 22px; border: 1px solid #d7e0e3; border-radius: 8px; background: white; box-shadow: 0 24px 80px rgba(10,30,35,.24); transform: translateY(7px); transition: transform .18s ease; }.modal-backdrop.open .modal { transform: translateY(0); }.modal-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 21px; }.modal-heading .eyebrow { margin-bottom: 5px; }.modal-heading h2 { font-size: 19px; }.modal form { display: grid; gap: 15px; }.modal label { display: grid; gap: 7px; color: #4b5d64; font-size: 11px; font-weight: 600; }.modal input, .modal select { width: 100%; height: 39px; padding: 0 10px; color: #273940; border: 1px solid #cdd9dc; border-radius: 5px; outline: none; background: white; font-size: 12px; }.modal input:focus, .modal select:focus { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }.form-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }.notice { display: flex; align-items: flex-start; gap: 8px; padding: 10px; color: #527066; border: 1px solid #c9e4da; border-radius: 5px; background: #eef8f4; font-size: 11px; line-height: 1.55; }.notice i { flex: 0 0 auto; width: 16px; color: var(--green); }.modal-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 5px; }.form-section { display: grid; gap: 12px; padding: 14px 0; border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }.form-section > p { margin: 0; color: #52636a; font-size: 11px; font-weight: 700; }.form-row-equal { grid-template-columns: 1fr 1fr; }.toggle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }.modal .checkbox-field { display: flex; align-items: center; gap: 7px; min-height: 33px; padding: 8px; color: #43565d; border: 1px solid var(--soft-line); border-radius: 5px; background: #fbfdfd; font-size: 10px; font-weight: 600; }.modal .checkbox-field input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }.settings-modal .form-row { grid-template-columns: 1fr 1fr; }.modal-backdrop.open .modal { max-height: calc(100vh - 36px); overflow: auto; }.connection-grid { display: grid; gap: 8px; margin-bottom: 18px; }.connection-grid article { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--soft-line); border-radius: 6px; }.integration-icon { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 6px; }.integration-icon i { width: 16px; }.integration-icon.lucky { color: var(--green); background: var(--green-soft); }.integration-icon.edge { color: var(--blue); background: var(--blue-soft); }.connection-grid article > div { display: flex; flex: 1; flex-direction: column; gap: 1px; }.connection-grid strong { font-size: 11px; }.connection-grid small { color: var(--muted); font-size: 10px; }.connected { display: inline-flex; align-items: center; gap: 3px; color: var(--green); font-size: 10px; font-weight: 600; }.connected i { width: 13px; }
.auth-page { min-width: 320px; min-height: 100vh; background: #0f1b20; }.auth-page-main { display: grid; min-height: 100vh; place-items: center; padding: 28px; background: linear-gradient(135deg, #0f1b20 0%, #1b3033 100%); }.auth-page-panel { width: min(430px, 100%); padding: 32px; border: 1px solid #d6e0e3; border-radius: 8px; background: #fff; box-shadow: 0 24px 80px rgba(0,0,0,.3); }.auth-page .auth-brand { display: flex; align-items: center; gap: 10px; margin: 0 0 29px; color: #1a2a30; font-size: 13px; font-weight: 700; letter-spacing: .4px; }.auth-page .auth-brand .brand-mark { width: 30px; height: 30px; }.auth-page .auth-brand .brand-mark i { width: 18px; height: 18px; }.auth-page-panel > .eyebrow { margin-bottom: 7px; }.auth-page-panel h1 { margin: 0 0 8px; color: #1b2b31; font-size: 24px; line-height: 1.3; }.auth-page-panel > .muted { margin: 0 0 24px; color: #65777f; font-size: 13px; line-height: 1.65; }.auth-page #auth-form { display: grid; gap: 15px; }.auth-page #auth-form > label { display: grid; gap: 7px; color: #405159; font-size: 12px; font-weight: 600; }.auth-page #auth-form > label > input, .auth-page #auth-form .password-input input { width: 100%; height: 40px; padding: 0 11px; color: #1c2b31; border: 1px solid #cbd7db; border-radius: 5px; background: #fff; font-size: 13px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }.auth-page #auth-form > label > input:focus, .auth-page #auth-form .password-input input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(21,122,98,.13); }.auth-page #auth-form .password-input { position: relative; display: block; width: 100%; }.auth-page #auth-form .password-input input { padding-right: 42px; }.auth-page #auth-form .password-toggle { position: absolute; top: 50%; right: 5px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: #66777e; border: 0; border-radius: 4px; background: transparent; transform: translateY(-50%); }.auth-page #auth-form .password-toggle:hover { color: var(--green); background: var(--green-soft); }.auth-page #auth-form .password-toggle i { width: 16px; height: 16px; }.auth-page .auth-confirm-field { display: none !important; }.auth-page .auth-confirm-field.visible { display: grid !important; }.auth-page .auth-error { min-height: 18px; margin: -2px 0 0; color: var(--red); font-size: 12px; line-height: 1.45; }.auth-page .full-auth-button { width: 100%; min-height: 42px; margin-top: 1px; font-size: 13px; }.auth-page .full-auth-button:disabled { cursor: wait; opacity: .65; }.toast { position: fixed; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; color: #ecfff8; border-radius: 6px; background: #16352d; box-shadow: 0 10px 28px rgba(15,36,29,.2); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; z-index: 12; }.toast.show { opacity: 1; transform: translateY(0); }.toast i { width: 16px; color: #7ce5c5; }

.settings-page { position: relative; display: grid; gap: 18px; width: min(1040px, 100%); }.settings-page[aria-busy="true"] > :not(.settings-loading) { visibility: hidden; }.settings-page.loaded > .settings-loading { display: none; }.settings-loading { display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 210px; color: var(--muted); font-size: 12px; }.settings-loading i { width: 18px; height: 18px; color: var(--green); animation: settings-spin 1s linear infinite; }@keyframes settings-spin { to { transform: rotate(360deg); } }.settings-overview { display: grid; grid-template-columns: minmax(220px, .68fr) minmax(0, 1.32fr); gap: 18px 26px; padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: white; }.settings-overview-copy h2, .settings-group-heading h2 { margin: 0 0 5px; color: #26363d; font-size: 16px; }.settings-overview-copy .muted { font-size: 12px; line-height: 1.6; }.settings-overview .connection-grid { display: grid; gap: 9px; }.settings-overview .connection-grid article { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--soft-line); border-radius: 6px; background: #fbfdfd; }.settings-overview .integration-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; }.settings-overview .integration-icon.lucky { color: var(--green); background: var(--green-soft); }.settings-overview .integration-icon.edge { color: var(--blue); background: var(--blue-soft); }.settings-overview .integration-icon i { width: 18px; }.settings-overview .connection-grid article > div { display: grid; min-width: 0; gap: 2px; }.settings-overview .connection-grid strong { color: #304148; font-size: 12px; }.settings-overview .connection-grid small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.settings-overview .connected { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-size: 10px; font-weight: 700; white-space: nowrap; }.settings-overview .connected i { width: 14px; }.settings-overview .connection-tests { grid-column: 1 / -1; display: flex; gap: 9px; padding-top: 3px; }.settings-form { display: grid; gap: 16px; }.settings-group { padding: 22px; border: 1px solid var(--line); border-radius: 7px; background: white; }.settings-group-heading { display: flex; align-items: flex-start; gap: 11px; padding-bottom: 17px; margin-bottom: 17px; border-bottom: 1px solid var(--soft-line); }.settings-group-heading p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }.settings-group-icon { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 6px; }.settings-group-icon i { width: 18px; height: 18px; }.settings-group-icon.lucky { color: var(--green); background: var(--green-soft); }.settings-group-icon.edge { color: var(--blue); background: var(--blue-soft); }.settings-group-icon.local { color: var(--orange); background: var(--orange-soft); }.settings-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 18px; }.settings-field { display: grid; min-width: 0; gap: 7px; color: #405159; font-size: 12px; font-weight: 600; }.settings-field > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.settings-field > small { margin-top: -2px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }.settings-field.full-width { grid-column: 1 / -1; }.settings-field input { width: 100%; height: 38px; padding: 0 11px; color: var(--ink); border: 1px solid #ccd8dc; border-radius: 5px; background: #fff; font-family: var(--mono); font-size: 11px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }.settings-field input::placeholder { color: #8c9aa0; font-family: var(--font); }.settings-field input:hover { border-color: #afc0c5; }.settings-field input:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(21,122,98,.12); }.settings-field input[readonly] { color: #607279; border-style: dashed; background: #f5f8f8; }.settings-local { background: #fcfdfd; }.settings-security-note { margin: 0; }.settings-actions { display: flex; justify-content: flex-end; padding: 2px 0 12px; }.password-modal { width: min(430px, 100%); }.password-modal > .muted { margin-bottom: 18px; }.password-modal form { display: grid; gap: 14px; }.empty-state { display: flex; min-height: 148px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; padding: 24px; color: var(--muted); text-align: center; }.empty-state i { width: 22px; height: 22px; color: var(--green); }.empty-state strong { color: #44565d; font-size: 12px; }.empty-state span { font-size: 11px; }.domain-empty { min-height: 216px; }.empty-log { padding: 26px 0; color: var(--muted); text-align: center; font-size: 11px; }.activity-load-state { padding: 14px 0 5px; color: var(--muted); text-align: center; font-size: 10px; }.paused-dot { display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #a2b0b5; }.status-dot.inactive { background: #9eaaae; box-shadow: none; }.origin-badge.attention { color: var(--orange); }.origin-badge.attention .live-dot { background: #e7954b; }.connection-tests { display: flex; flex-wrap: wrap; gap: 8px; }.connection-tests .connection-test { margin: 0; }.row-menu:disabled { cursor: wait; opacity: .45; }.row-menu.danger { color: #b34c4c; }.delete-confirm-modal, .delete-progress-modal { width: min(460px, 100%); }.delete-confirm-domain { margin: -8px 0 12px; color: #405159; font-family: var(--mono); font-size: 12px; }.delete-confirm-modal > .muted { margin: 0 0 16px; color: var(--muted); font-size: 12px; line-height: 1.6; }.delete-force-option { padding: 12px; border: 1px solid #e3c9c9; border-radius: 5px; background: #fff9f8; }.delete-force-help { margin: 8px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }.delete-force-help code { color: #9e5050; }.danger-button { background: #a84949; }.danger-button:hover { background: #913c3c; }.delete-progress-modal > .muted { margin: -8px 0 15px; font-family: var(--mono); font-size: 11px; }.delete-steps { display: grid; gap: 0; border-top: 1px solid var(--soft-line); border-bottom: 1px solid var(--soft-line); }.delete-step { display: grid; grid-template-columns: 21px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--soft-line); }.delete-step:last-child { border-bottom: 0; }.delete-step > i { width: 17px; margin-top: 1px; color: #9ba9ad; }.delete-step.running > i { color: var(--blue); }.delete-step.success > i { color: var(--green); }.delete-step.error > i { color: #c95b5b; }.delete-step div { display: grid; gap: 3px; }.delete-step strong { color: #405159; font-size: 12px; }.delete-step small { color: var(--muted); font-size: 10px; line-height: 1.45; }.delete-progress-note { margin-top: 16px; }

@media (max-width: 620px) { .auth-page-main { align-items: start; padding: 24px 16px; }.auth-page-panel { padding: 26px 22px; margin-top: max(18px, env(safe-area-inset-top)); }.auth-page .auth-brand { margin-bottom: 24px; }.auth-page-panel h1 { font-size: 22px; }.toggle-grid, .settings-form .form-row, .settings-fields { grid-template-columns: 1fr; }.form-row-equal { grid-template-columns: 1fr; }.settings-field.full-width { grid-column: auto; }.settings-overview { grid-template-columns: 1fr; padding: 17px; }.settings-overview .connection-tests { grid-column: auto; flex-direction: column; }.settings-overview .connection-tests .secondary-button { width: 100%; }.settings-group { padding: 17px; }.settings-actions .primary-button { width: 100%; } }

@media (max-width: 1100px) { .dashboard-grid { grid-template-columns: 1fr; }.path-map { min-height: 240px; }.automation-panel { display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 4px 0 18px; }.automation-panel .panel-heading, .automation-panel .automation-text { grid-column: 1 / -1; }.automation-flow { padding-right: 10px; }.automation-panel .full-button { width: calc(100% - 30px); margin-left: 10px; }.domains-layout, .automation-layout { grid-template-columns: 1fr; }.domain-side { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }.help-block { margin-top: 0; } }
@media (max-width: 1050px) { .service-table-head { display: none; }.service-row { grid-template-columns: minmax(0, 1fr) minmax(120px, .8fr) 88px 86px 116px; }.service-row > :nth-child(2) { display: none; } }

@media (max-width: 850px) { .app-shell { grid-template-columns: 72px minmax(0, 1fr); }.sidebar { width: 72px; padding: 17px 10px; align-items: center; }.brand { padding: 0; }.brand > span:last-child, .nav-item span, .nav-item b, .lucky-health, .sidebar-user > span:nth-child(2), .sidebar-user > i { display: none; }.nav-list { width: 100%; margin-top: 18px; }.nav-item { justify-content: center; padding: 0; }.sidebar-user { justify-content: center; padding: 16px 0 4px; }.main-content { grid-column: 2; }.summary-grid { grid-template-columns: 1fr 1fr; }.stat-block:nth-child(2) { border-right: 0; }.stat-block:nth-child(-n+2) { border-bottom: 1px solid var(--line); }.view-panel { padding: 32px 24px 48px; } }
@media (max-width: 620px) { .topology-heading { align-items: flex-start; flex-direction: column; }.topology-actions { width: 100%; justify-content: space-between; }.topology-service-picker { flex: 1; }.topology-service-picker select { flex: 1; width: auto; }.topology-summary { align-items: flex-start; flex-direction: column; }.path-map { grid-template-columns: 1fr 1fr; gap: 30px 12px; min-height: 420px; padding: 30px 18px; }.topology-rail { top: 24%; right: 25%; left: 25%; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr); width: 2px; height: 54%; }.topology-segment { background: linear-gradient(180deg, rgba(91,207,174,.15), rgba(105,231,191,.92), rgba(91,207,174,.15)); }.topology-segment::after { top: auto; right: 50%; bottom: -1px; transform: translate(50%, 0); }.route-pulse { display: none; }.path-footer { align-items: flex-start; flex-direction: column; gap: 8px; }.log-page-actions { width: 100%; }.log-page-actions .secondary-button { width: 100%; }.activity-panel .panel-heading { align-items: flex-start; flex-direction: column; }.log-refresh-controls { width: 100%; flex-wrap: wrap; gap: 10px; }.activity-count { margin-left: auto; }
  .app-shell { display: block; }.sidebar { position: fixed; inset: auto 0 0 0; flex-direction: row; width: 100%; height: 62px; padding: 7px 12px; border-top: 1px solid #27383e; z-index: 8; }.brand, .sidebar-spacer, .lucky-health, .sidebar-user { display: none; }.nav-list { display: flex; justify-content: space-around; gap: 2px; margin-top: 0; }.nav-item { min-height: 48px; flex: 1; flex-direction: column; gap: 3px; border-radius: 5px; font-size: 9px; }.nav-item span { display: block; }.nav-item i { width: 18px; }.main-content { padding-bottom: 62px; }.page-heading { align-items: flex-start; flex-direction: column; gap: 14px; margin-bottom: 20px; }.page-heading h1 { font-size: 24px; }.last-sync { padding: 0; border: 0; }.summary-grid { grid-template-columns: 1fr 1fr; }.stat-block { min-height: 125px; padding: 16px; }.stat-block > strong { font-size: 27px; }.dashboard-grid { margin-top: 14px; }.path-map { height: 212px; }.node-edge { left: 7%; }.node-stun { left: 42%; }.node-origin { right: 5%; }.path-footer { align-items: flex-start; flex-direction: column; gap: 7px; }.automation-panel { display: block; }.automation-panel .full-button { width: calc(100% - 40px); margin: 18px 20px 0; }.service-page-actions { width: 100%; justify-content: flex-start; }.service-page-actions .secondary-button { flex: 1; }.service-page-actions .primary-button { flex: 1; }.service-toolbar { align-items: stretch; flex-direction: column; }.search-field { width: 100%; }.segmented { align-self: flex-start; }.full-list .service-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "primary status" "actions actions"; row-gap: 14px; min-height: 0; padding: 16px; }.full-list .service-row .service-primary { grid-area: primary; align-self: center; }.full-list .service-row .service-status { grid-area: status; align-self: center; justify-self: end; white-space: nowrap; }.full-list .service-row .row-actions { grid-area: actions; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; padding-top: 12px; border-top: 1px solid var(--soft-line); }.full-list .service-row .row-menu { display: grid; place-items: center; justify-self: stretch; width: 100%; height: 38px; border: 1px solid var(--line); border-radius: 6px; background: #fbfdfd; }.full-list .service-row .row-menu:hover { color: var(--green); border-color: #b6d9cd; background: var(--green-soft); }.full-list .service-row .row-menu.danger { color: var(--red); border-color: #efd5d5; background: #fffafa; }.full-list .service-row .service-meta, .full-list .service-row .certificate-cell { display: none; }.full-list .service-primary { gap: 10px; }.full-list .service-primary small { max-width: min(50vw, 210px); }.full-list .service-icon { width: 38px; height: 38px; }.domain-head { display: none; }.domain-row { grid-template-columns: minmax(0, 1fr) 77px 25px; gap: 8px; padding: 0 13px; }.domain-row > :nth-child(2), .domain-row > :nth-child(3) { display: none; }.domain-side { display: block; }.help-block { margin-top: 14px; }.large-flow { grid-template-columns: 1fr; gap: 10px; padding: 28px 20px; }.large-flow > i { transform: rotate(90deg); }.large-step { display: grid; grid-template-columns: 44px 1fr; column-gap: 10px; text-align: left; }.large-icon { width: 40px; height: 40px; grid-row: 1 / 3; margin: 0; }.large-step small { grid-column: 2; }.rule-grid { grid-template-columns: 1fr; }.rule-grid > div { min-height: 55px; border-right: 0; border-bottom: 1px solid var(--soft-line); }.rule-grid > div:last-child { border-bottom: 0; }.form-row, .settings-modal .form-row { grid-template-columns: 1fr; }.toast { right: 16px; bottom: 78px; } }