/* Manrope variable font, SIL Open Font License; bundled in /fonts/manrope/. */
@font-face {
    font-family: 'Manrope';
    src: url('/fonts/manrope/manrope-variable.ttf') format('truetype');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

:root {
    color-scheme:light;
    --canvas:#f6f4ed;
    --sidebar:#fffefb;
    --surface:#fffefb;
    --surface-soft:#eeeee5;
    --ink:#202925;
    --muted:#667168;
    --border:#dce0d5;
    --accent:#c34328;
    --on-accent:#fffefb;
    --accent-soft:#f8e9e2;
    --sage:#e5ebdc;
    --sage-ink:#43563d;
    --green:#287447;
    --green-soft:#e9f2e6;
    --warning:#82510e;
    --warning-soft:#f8efda;
    --red:#b33525;
    --red-soft:#f9e8e2;
    --radius:12px;
    --font:"Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
    --mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
[data-theme=dark] {
    color-scheme:dark;
    --canvas:#171e1b;
    --sidebar:#1b231f;
    --surface:#202925;
    --surface-soft:#2b3630;
    --ink:#f6f4ed;
    --muted:#b2bdb4;
    --border:#3b493f;
    --accent:#ff947b;
    --on-accent:#202925;
    --accent-soft:#3c2b25;
    --sage:#2c3a2e;
    --sage-ink:#cfdbc0;
    --green:#a7d7ad;
    --green-soft:#263b2c;
    --warning:#efca8e;
    --warning-soft:#3d3323;
    --red:#ffae9a;
    --red-soft:#412c27;
}
* {
    box-sizing:border-box;
}
html {
    min-width:320px;
}
body {
    margin:0;
    background:var(--canvas);
    color:var(--ink);
    font-family:var(--font);
    font-size:1rem;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
}
button,input,select,textarea {
    font:inherit;
}
button,a,input,select {
    touch-action:manipulation;
}
button {
    cursor:pointer;
}
a {
    color:inherit;
    text-decoration:none;
}
a:hover {
    text-decoration:none;
}
button:disabled {
    cursor:wait;
    opacity:.65;
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible {
    outline:3px solid var(--accent);
    outline-offset:3px;
}
input,select,textarea {
    color:var(--ink);
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:8px;
    padding:11px 13px;
    min-width:0;
}
input::placeholder {
    color:var(--muted);
    opacity:.85;
}
input:focus,select:focus {
    border-color:var(--accent);
}
.icon {
    flex-shrink:0;
    vertical-align:middle;
}
button {
    color:inherit;
}
img {
    max-width:100%;
    display:block;
}
h1,h2,h3,p {
    margin:0;
}
h1 {
    font-size:2rem;
    font-weight:600;
    letter-spacing:-1.2px;
    line-height:1.18;
}
h2 {
    font-size:1.125rem;
    font-weight:600;
    letter-spacing:-.4px;
}
h3 {
    font-size:1rem;
    font-weight:600;
    letter-spacing:-.2px;
}
.muted {
    color:var(--muted);
}
.mono {
    font-family:var(--mono);
    font-size:0.875rem;
}
.eyebrow {
    font-size:0.75rem;
    letter-spacing:.14em;
    font-weight:600;
    text-transform:uppercase;
    color:var(--muted);
}
.skip-link {
    position:fixed;
    left:15px;
    top:-90px;
    z-index:100;
    background:var(--surface);
    padding:12px;
    border:1px solid var(--accent);
}
.skip-link:focus {
    top:15px;
}
.app-shell {
    display:flex;
    min-height:100dvh;
}
.sidebar {
    width:244px;
    position:fixed;
    inset:0 auto 0 0;
    border-right:1px solid var(--border);
    background:var(--sidebar);
    display:flex;
    flex-direction:column;
    padding:30px 18px 0;
    z-index:30;
    overflow-y:auto;
}
.brand {
    padding:0 10px;
    display:block;
    margin-bottom:35px;
}
.brand img {
    width:175px;
    height:auto;
}
.logo-dark {
    display:none;
}
[data-theme=dark] .logo-dark {
    display:block;
}
[data-theme=dark] .logo-light {
    display:none;
}
.workspace {
    display:flex;
    align-items:center;
    gap:10px;
    margin:0 4px 30px;
    padding:0 5px;
}
.workspace strong,.account strong {
    font-size:0.875rem;
    font-weight:600;
    display:block;
    overflow-wrap:anywhere;
}
.workspace small,.account small {
    font-size:0.75rem;
    color:var(--muted);
    display:block;
    margin-top:3px;
}
.workspace-mark {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border:1px solid var(--border);
    background:var(--surface-soft);
    border-radius:8px;
    flex-shrink:0;
    color:var(--sage-ink);
}
.nav-label {
    font-size:0.6875rem;
    letter-spacing:.14em;
    color:var(--muted);
    padding:0 14px;
    margin-bottom:12px;
}
.nav-list {
    display:grid;
    gap:5px;
}
.nav-item {
    display:flex;
    align-items:center;
    gap:11px;
    padding:11px 13px;
    font-size:0.875rem;
    color:var(--muted);
    border-radius:7px;
    min-height:42px;
    font-weight:500;
}
.nav-item:hover {
    background:var(--surface-soft);
    color:var(--ink);
}
.nav-item.active {
    background:var(--accent-soft);
    color:var(--accent);
}
.nav-item .icon {
    width:18px;
    height:18px;
}
.nav-end {
    margin-left:auto;
}
.nav-button {
    border:0;
    width:100%;
    background:none;
    text-align:left;
}
.sidebar-bottom {
    margin-top:auto;
    padding-top:50px;
}
.sidebar-note {
    background:var(--sage);
    padding:16px 15px;
    border-radius:9px;
    margin:0 4px 22px;
}
.small-symbol {
    display:block;
    margin-bottom:12px;
}
.sidebar-note strong {
    font-size:0.875rem;
    line-height:1.6;
    display:block;
    color:var(--sage-ink);
    font-weight:500;
}
.sidebar-note a {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.8125rem;
    color:var(--sage-ink);
    margin-top:17px;
    font-weight:600;
}
.account {
    border-top:1px solid var(--border);
    margin-top:20px;
    padding:20px 6px;
    display:flex;
    align-items:center;
    gap:10px;
}
.account>div {
    flex:1;
    min-width:0;
}
.avatar {
    display:grid;
    place-items:center;
    width:34px;
    height:34px;
    border-radius:50%;
    color:var(--sage-ink);
    background:var(--sage);
    flex-shrink:0;
}
.avatar-small {
    width:29px;
    height:29px;
}
.main-shell {
    margin-left:244px;
    flex:1;
    min-width:0;
}
.topbar {
    height:77px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 38px;
    border-bottom:1px solid var(--border);
    gap:20px;
    background:var(--sidebar);
}
.breadcrumbs {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:0.8125rem;
    color:var(--muted);
}
.breadcrumbs strong {
    color:var(--ink);
    font-weight:500;
}
.topbar-actions {
    display:flex;
    align-items:center;
    gap:18px;
}
.environment {
    font-size:0.75rem;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:7px;
}
.status-dot {
    width:6px;
    height:6px;
    background:var(--green);
    border-radius:50%;
    display:inline-block;
    flex-shrink:0;
}
.topbar-divider {
    height:18px;
    width:1px;
    background:var(--border);
}
.icon-button {
    display:grid;
    place-items:center;
    background:transparent;
    border:0;
    padding:7px;
    border-radius:6px;
    color:var(--muted);
}
.icon-button:hover {
    color:var(--accent);
    background:var(--surface-soft);
}
.theme-moon {
    display:none;
}
[data-theme=dark] .theme-sun {
    display:none;
}
[data-theme=dark] .theme-moon {
    display:block;
}
.mobile-menu {
    display:none;
}
main {
    max-width:1440px;
    margin:0 auto;
    padding:37px 38px 0;
    outline:none;
}
.page-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:29px;
}
.page-heading p {
    color:var(--muted);
    font-size:0.875rem;
    margin-top:10px;
}
.heading-actions {
    display:flex;
    align-items:center;
    gap:9px;
}
.button {
    min-height:40px;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    gap:8px;
    border:1px solid var(--border);
    border-radius:7px;
    padding:10px 15px;
    background:var(--surface);
    font-size:0.8125rem;
    font-weight:600;
    white-space:nowrap;
}
.button:hover {
    border-color:var(--muted);
    background:var(--surface-soft);
}
.button.primary {
    background:var(--accent);
    border-color:var(--accent);
    color:var(--on-accent);
}
.button.primary:hover {
    filter:brightness(.93);
}
.button .icon {
    width:16px;
    height:16px;
}
.text-link {
    display:inline-flex;
    align-items:center;
    gap:7px;
    font-size:0.8125rem;
    font-weight:500;
    color:var(--accent);
}
.text-link:hover {
    text-decoration:underline;
    text-underline-offset:3px;
}
.greeting-date {
    font-size:0.75rem;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:13px;
}
.stats {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:15px;
    margin-bottom:25px;
}
.stat {
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:var(--radius);
    padding:20px 21px;
    display:block;
}
.stat:hover {
    border-color:var(--muted);
}
.stat-top {
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:var(--muted);
    font-size:0.8125rem;
    gap:10px;
}
.stat-icon {
    width:28px;
    height:28px;
    border-radius:7px;
    background:var(--surface-soft);
    display:grid;
    place-items:center;
    color:var(--sage-ink);
}
.stat-icon .icon {
    width:15px;
    height:15px;
}
.stat-value {
    font-size:2rem;
    font-weight:550;
    letter-spacing:-1.3px;
    margin:13px 0 6px;
    font-variant-numeric:tabular-nums;
    line-height:1.2;
}
.stat-value small {
    font-size:0.875rem;
    letter-spacing:0;
    color:var(--muted);
    font-weight:400;
}
.stat-note {
    font-size:0.75rem;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:6px;
}
.stat-note.positive {
    color:var(--green);
}
.welcome-panel {
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:24px;
    margin-bottom:28px;
}
.discover {
    position:relative;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--sage);
    padding:30px;
    min-height:220px;
    display:flex;
    align-items:center;
}
.discover-copy {
    position:relative;
    z-index:1;
    max-width:72%;
}
.discover .eyebrow {
    color:var(--sage-ink);
    font-size:0.6875rem;
}
.discover h2 {
    font-size:1.625rem;
    letter-spacing:-1px;
    line-height:1.2;
    margin:12px 0;
    color:var(--sage-ink);
}
.discover p {
    font-size:0.8125rem;
    line-height:1.7;
    color:var(--sage-ink);
    max-width:270px;
}
.discover .text-link {
    color:var(--sage-ink);
    margin-top:20px;
    font-weight:600;
}
.address-art {
    position:absolute;
    right:-10px;
    top:15px;
    width:210px;
    height:210px;
    color:var(--sage-ink);
    opacity:.17;
}
.renewal-panel {
    border:1px solid var(--border);
    border-radius:var(--radius);
    background:var(--surface);
    padding:23px;
}
.panel-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    margin-bottom:20px;
}
.panel-title {
    display:flex;
    align-items:center;
    gap:9px;
}
.panel-title>.icon {
    color:var(--muted);
    width:17px;
    height:17px;
}
.panel-title h2 {
    font-size:0.875rem;
}
.count {
    font-size:0.75rem;
    border:1px solid var(--border);
    color:var(--muted);
    padding:1px 6px;
    border-radius:5px;
}
.renewal-item {
    display:flex;
    align-items:center;
    gap:12px;
    padding:13px 0;
    border-top:1px solid var(--border);
}
.renewal-item strong {
    font-size:0.8125rem;
    font-weight:500;
    overflow-wrap:anywhere;
}
.renewal-item small {
    display:block;
    font-size:0.75rem;
    color:var(--muted);
    margin-top:3px;
}
.renewal-item .icon {
    color:var(--warning);
}
.renewal-item a {
    margin-left:auto;
    color:var(--muted);
}
.inline-note {
    font-size:0.75rem;
    color:var(--muted);
    line-height:1.7;
    margin-top:14px;
}
.section-heading {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
    gap:12px;
}
.section-heading h2 {
    font-size:1rem;
}
.section-heading-left {
    display:flex;
    align-items:center;
    gap:9px;
}
.panel {
    border:1px solid var(--border);
    background:var(--surface);
    border-radius:var(--radius);
    overflow:hidden;
    margin-bottom:27px;
}
.table-scroll {
    overflow-x:auto;
}
table {
    width:100%;
    border-collapse:collapse;
    text-align:left;
    white-space:nowrap;
}
th {
    background:var(--surface);
    color:var(--muted);
    font-size:0.6875rem;
    letter-spacing:.035em;
    font-weight:500;
    padding:13px 21px;
    border-bottom:1px solid var(--border);
}
td {
    padding:16px 21px;
    font-size:0.8125rem;
    border-bottom:1px solid var(--border);
}
tbody tr:last-child td {
    border-bottom:0;
}
tbody tr:hover {
    background:var(--surface-soft);
}
.domain-cell {
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:550;
}
.domain-glyph {
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    flex-shrink:0;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-soft);
    color:var(--muted);
}
.domain-glyph .icon {
    width:16px;
    height:16px;
}
.domain-cell a:hover {
    color:var(--accent);
}
.status {
    display:inline-flex;
    align-items:center;
    gap:5px;
    font-size:0.6875rem;
    font-weight:500;
    padding:4px 8px;
    border-radius:5px;
    background:var(--surface-soft);
    color:var(--muted);
}
.status.good {
    background:var(--green-soft);
    color:var(--green);
}
.status.warn {
    background:var(--warning-soft);
    color:var(--warning);
}
.status.bad {
    background:var(--red-soft);
    color:var(--red);
}
.status .icon {
    width:11px;
    height:11px;
}
.table-muted {
    color:var(--muted);
}
.date-soon {
    color:var(--warning);
}
.row-action {
    display:flex;
    justify-content:flex-end;
}
.row-action a {
    padding:5px;
    color:var(--muted);
}
.row-action a:hover {
    color:var(--accent);
}
.empty {
    padding:46px 24px;
    display:flex;
    align-items:center;
    flex-direction:column;
    text-align:center;
}
.empty>.icon {
    width:30px;
    height:30px;
    margin-bottom:16px;
    color:var(--muted);
}
.empty h3 {
    font-weight:500;
    font-size:1rem;
}
.empty p {
    font-size:0.875rem;
    color:var(--muted);
    max-width:350px;
    margin:8px auto 19px;
    line-height:1.7;
}
.empty.compact {
    padding:24px 14px;
}
.empty.compact p {
    margin-bottom:0;
}
.overview-bottom {
    display:grid;
    grid-template-columns:1.45fr 1fr;
    gap:24px;
}
.activity-list {
    padding:0 22px;
}
.activity-item {
    display:flex;
    align-items:center;
    gap:13px;
    padding:17px 0;
    border-bottom:1px solid var(--border);
}
.activity-item:last-child {
    border:0;
}
.activity-item strong {
    display:block;
    font-size:0.8125rem;
    font-weight:500;
}
.activity-item small {
    display:block;
    font-size:0.75rem;
    color:var(--muted);
    margin-top:4px;
}
.activity-item>span:last-child {
    margin-left:auto;
    font-size:0.8125rem;
    white-space:nowrap;
    font-variant-numeric:tabular-nums;
}
.activity-symbol {
    border:1px solid var(--border);
    background:var(--surface-soft);
    color:var(--muted);
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:50%;
    flex-shrink:0;
}
.activity-symbol .icon {
    width:14px;
    height:14px;
}
.tip {
    padding:24px;
}
.tip .panel-title {
    margin-bottom:15px;
}
.tip p {
    font-size:0.8125rem;
    color:var(--muted);
    line-height:1.9;
    margin-bottom:20px;
}
.tip .text-link {
    font-size:0.75rem;
}
.app-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    border-top:1px solid var(--border);
    padding:21px 0;
    margin-top:20px;
    font-size:0.75rem;
    color:var(--muted);
}
.app-footer>div {
    display:flex;
    gap:22px;
}
.app-footer a {
    display:flex;
    align-items:center;
    gap:5px;
}
.app-footer a:hover {
    color:var(--ink);
}
.filters {
    display:flex;
    gap:12px;
    align-items:flex-end;
    padding:19px 21px;
    border-bottom:1px solid var(--border);
}
.field {
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}
.field label {
    font-size:0.8125rem;
    font-weight:500;
}
.field input,.field select {
    font-size:0.875rem;
    width:100%;
}
.field small {
    font-size:0.75rem;
    color:var(--muted);
}
.filter-search {
    flex:1;
}
.filter-select {
    width:155px;
}
.input-icon {
    position:relative;
}
.input-icon>.icon {
    position:absolute;
    left:12px;
    top:13px;
    color:var(--muted);
    width:16px;
    height:16px;
}
.input-icon input {
    padding-left:38px;
    width:100%;
}
.pagination {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    padding:17px 21px;
    border-top:1px solid var(--border);
    font-size:0.75rem;
    color:var(--muted);
}
.pagination>div {
    display:flex;
    gap:8px;
}
.pagination .button {
    min-height:30px;
    padding:6px 10px;
    font-size:0.75rem;
}
.notice {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:14px 18px;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--surface-soft);
    font-size:0.875rem;
    line-height:1.7;
    margin-bottom:22px;
}
.notice>.icon {
    margin-top:2px;
    width:17px;
    height:17px;
}
.notice.success {
    color:var(--green);
    background:var(--green-soft);
}
.notice.error {
    color:var(--red);
    background:var(--red-soft);
}
.notice ul {
    padding-left:18px;
    margin:4px 0;
}
.content-grid {
    display:grid;
    grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);
    gap:24px;
    align-items:start;
}
.card-pad {
    padding:24px;
}
.card-pad .panel-heading {
    padding-bottom:17px;
    border-bottom:1px solid var(--border);
}
.details-list {
    display:grid;
    gap:0;
    margin:0;
}
.details-list>div {
    display:flex;
    justify-content:space-between;
    gap:16px;
    padding:14px 0;
    border-bottom:1px solid var(--border);
    font-size:0.8125rem;
}
.details-list>div:last-child {
    border:0;
}
.details-list dt {
    color:var(--muted);
}
.details-list dd {
    margin:0;
    text-align:right;
    overflow-wrap:anywhere;
}
.back-link {
    margin-bottom:22px;
}
.nameserver {
    font-family:var(--mono);
    font-size:0.8125rem;
    padding:12px 0;
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:12px;
}
.nameserver:last-child {
    border:0;
}
.nameserver .icon {
    width:16px;
    color:var(--muted);
}
.search-hero {
    padding:38px 35px;
    background:var(--sage);
    border:1px solid var(--border);
    border-radius:12px;
    margin-bottom:25px;
}
.search-hero h2 {
    font-size:1.6875rem;
    letter-spacing:-.8px;
    color:var(--sage-ink);
}
.search-hero p {
    color:var(--sage-ink);
    font-size:0.875rem;
    max-width:500px;
    margin:10px 0 25px;
    line-height:1.8;
}
.domain-search {
    display:flex;
    gap:10px;
    max-width:660px;
}
.domain-search .input-icon {
    flex:1;
}
.domain-search input {
    font-size:0.9375rem;
    min-height:49px;
    padding-top:13px;
    padding-bottom:13px;
    background:var(--surface);
}
.domain-search .input-icon>.icon {
    top:16px;
}
.domain-search .button {
    padding:12px 22px;
    font-size:0.875rem;
}
.search-help {
    font-size:0.75rem;
    margin-top:11px;
    color:var(--sage-ink);
}
.result-card {
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--surface);
    padding:25px;
    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:24px;
}
.result-icon {
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    background:var(--green-soft);
    color:var(--green);
    border-radius:50%;
    flex-shrink:0;
}
.result-card h3 {
    font-size:1.125rem;
    overflow-wrap:anywhere;
}
.result-card p {
    font-size:0.8125rem;
    color:var(--muted);
    margin-top:7px;
    line-height:1.8;
}
.result-card .result-price {
    margin-left:auto;
    font-size:1.25rem;
    white-space:nowrap;
}
.price-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:16px;
}
.price-card {
    padding:25px 22px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
}
.price-card h3 {
    font-size:1.625rem;
    letter-spacing:-.8px;
    margin-bottom:25px;
}
.price-card .price {
    font-size:1.3125rem;
    font-variant-numeric:tabular-nums;
}
.price-card small {
    font-size:0.75rem;
    color:var(--muted);
    display:block;
    margin-top:6px;
}
.form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:21px 18px;
}
.field.full {
    grid-column:1/-1;
}
.form-footer {
    margin-top:25px;
    border-top:1px solid var(--border);
    padding-top:20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
}
.form-footer p {
    font-size:0.75rem;
    color:var(--muted);
    max-width:320px;
}
.email-readonly {
    background:var(--surface-soft);
    padding:12px 14px;
    border-radius:7px;
    font-size:0.875rem;
    overflow-wrap:anywhere;
}
.faq {
    border:1px solid var(--border);
    border-radius:9px;
    background:var(--surface);
    margin-bottom:12px;
    overflow:hidden;
}
.faq summary {
    display:flex;
    justify-content:space-between;
    gap:15px;
    align-items:center;
    list-style:none;
    cursor:pointer;
    padding:20px 22px;
    font-size:0.875rem;
    font-weight:500;
}
.faq summary::-webkit-details-marker {
    display:none;
}
.faq summary .icon {
    width:16px;
    height:16px;
    color:var(--muted);
}
.faq[open] summary .icon {
    transform:rotate(180deg);
}
.faq>p {
    font-size:0.875rem;
    line-height:1.9;
    color:var(--muted);
    padding:0 22px 23px;
}
.contact-box {
    padding:25px;
}
.contact-box h3 {
    margin:15px 0 10px;
}
.contact-box p {
    font-size:0.875rem;
    line-height:1.8;
    color:var(--muted);
    margin-bottom:22px;
}
.check-field {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:0.8125rem;
    color:var(--muted);
}
.check-field input {
    accent-color:var(--accent);
    margin:0;
}
.public-wrap {
    max-width:1180px;
    margin:auto;
    padding:0 40px;
}
.public-nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:30px 0;
    border-bottom:1px solid var(--border);
}
.public-nav .brand {
    margin:0;
    padding:0;
}
.public-nav>div {
    display:flex;
    align-items:center;
    gap:12px;
}
.public-hero {
    display:grid;
    grid-template-columns:1.2fr 1fr;
    align-items:center;
    gap:90px;
    padding:90px 0;
}
.public-hero h1 {
    font-size:clamp(40px,5.3vw,68px);
    letter-spacing:-.055em;
    line-height:1.04;
    margin:20px 0;
}
.brand-headline .headline-line {
    display: block;
    white-space: nowrap;
}
.brand-headline .headline-accent {
    color: var(--accent);
}
.public-hero p {
    font-size:1rem;
    color:var(--muted);
    line-height:1.9;
    max-width:410px;
    margin-bottom:30px;
}
.public-art {
    background:var(--sage);
    border:1px solid var(--border);
    border-radius:14px;
    padding:50px 30px;
    display:grid;
    place-items:center;
    aspect-ratio:1;
}
.public-art img {
    width:230px;
}
.public-features {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    border-top:1px solid var(--border);
    padding:35px 0;
}
.public-feature>.icon {
    color:var(--accent);
    margin-right:9px;
}
.public-feature h2 {
    display:inline;
    font-size:0.9375rem;
}
.public-feature p {
    font-size:0.875rem;
    color:var(--muted);
    line-height:1.9;
    margin-top:15px;
}
.sidebar-backdrop[hidden] {
    display:none;
}
@media(min-width:1600px) {
    main {
        padding-top:45px;
    }
    .stats {
        gap:22px;
    }
    .stat {
        padding:25px;
    }
    .welcome-panel,.overview-bottom {
        gap:28px;
    }
    .discover {
        min-height:245px;
    }
}
@media(max-width:1180px) {
    .sidebar {
        width:220px;
        padding-left:13px;
        padding-right:13px;
    }
    .main-shell {
        margin-left:220px;
    }
    .topbar {
        padding:0 25px;
    }
    main {
        padding:30px 25px 0;
    }
    .stats {
        gap:10px;
    }
    .stat {
        padding:16px;
    }
    .stat-value {
        font-size:1.6875rem;
    }
    .welcome-panel,.overview-bottom {
        gap:16px;
        grid-template-columns:1.2fr 1fr;
    }
    .discover {
        padding:24px;
    }
    .address-art {
        right:-60px;
    }
    .discover-copy {
        max-width:90%;
    }
    .page-heading h1 {
        font-size:1.8125rem;
    }
    .price-grid {
        grid-template-columns:repeat(2,1fr);
    }
    .content-grid {
        grid-template-columns:minmax(0,1.4fr) minmax(220px,1fr);
    }
}
@media(max-width:960px) {
    .sidebar {
        left:-260px;
        width:244px;
        visibility:hidden;
    }
    .main-shell {
        margin-left:0;
    }
    .mobile-menu {
        display:grid;
    }
    .menu-open .sidebar {
        left:0;
        visibility:visible;
    }
    .menu-open {
        overflow:hidden;
    }
    .sidebar-backdrop {
        position:fixed;
        inset:0;
        z-index:25;
        background:#171e1b80;
        display:block;
    }
    .topbar {
        height:65px;
    }
    .public-hero {
        gap:30px;
    }
    .public-art {
        padding:25px;
    }
    .public-art img {
        width:180px;
    }
    .public-hero {
        padding:60px 0;
    }
    .workspace {
        margin-bottom:22px;
    }
    .sidebar-bottom {
        padding-top:20px;
    }
}
@media(max-width:650px) {
    main {
        padding:25px 18px 0;
    }
    .topbar {
        padding:0 14px;
        gap:10px;
    }
    .topbar-actions {
        gap:10px;
    }
    .environment,.topbar-divider {
        display:none;
    }
    .breadcrumbs {
        font-size:0.75rem;
        gap:9px;
    }
    .page-heading {
        align-items:flex-start;
        flex-direction:column;
        margin-bottom:22px;
        gap:17px;
    }
    .page-heading h1 {
        font-size:1.75rem;
    }
    .page-heading p {
        font-size:0.8125rem;
    }
    .stats {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px;
        margin-bottom:18px;
    }
    .stat {
        padding:16px;
    }
    .stat-top {
        font-size:0.75rem;
    }
    .stat-value {
        font-size:1.6875rem;
        margin-top:12px;
    }
    .stat-note {
        font-size:0.6875rem;
    }
    .welcome-panel,.overview-bottom,.content-grid {
        grid-template-columns:1fr;
        gap:18px;
    }
    .welcome-panel {
        margin-bottom:24px;
    }
    .discover {
        min-height:230px;
    }
    .discover-copy {
        max-width:78%;
    }
    .address-art {
        right:-20px;
        top:25px;
    }
    .renewal-panel {
        padding:20px;
    }
    .panel {
        margin-bottom:22px;
    }
    th,td {
        padding:14px 16px;
    }
    .section-heading h2 {
        font-size:0.9375rem;
    }
    .filters {
        flex-wrap:wrap;
        padding:17px 16px;
        gap:12px;
    }
    .filter-search {
        flex-basis:100%;
    }
    .filter-select {
        flex:1;
        min-width:100px;
    }
    .filters .button {
        width:auto;
    }
    .form-grid {
        grid-template-columns:1fr;
    }
    .field.full {
        grid-column:auto;
    }
    .card-pad {
        padding:20px;
    }
    .form-footer {
        align-items:flex-start;
        flex-direction:column;
    }
    .form-footer .button {
        width:100%;
    }
    .search-hero {
        padding:25px 20px;
    }
    .search-hero h2 {
        font-size:1.5rem;
    }
    .domain-search {
        flex-direction:column;
    }
    .domain-search .button {
        min-height:45px;
    }
    .result-card {
        padding:20px;
        flex-wrap:wrap;
    }
    .result-card>div:nth-child(2) {
        flex:1;
        min-width:130px;
    }
    .result-card .result-price {
        margin-left:58px;
    }
    .price-grid {
        gap:10px;
    }
    .price-card {
        padding:20px 16px;
    }
    .price-card h3 {
        font-size:1.4375rem;
    }
    .app-footer {
        align-items:flex-start;
        gap:15px;
        flex-direction:column;
        padding-bottom:25px;
    }
    .app-footer>div {
        gap:18px;
    }
    .public-wrap {
        padding:0 22px;
    }
    .public-nav {
        padding:23px 0;
    }
    .public-nav .brand img {
        width:135px;
    }
    .public-nav .button {
        padding:9px 11px;
        font-size:0.75rem;
    }
    .public-hero {
        grid-template-columns:1fr;
        gap:30px;
        padding:45px 0;
    }
    .public-hero h1 {
        font-size:clamp(34px,8.5vw,48px);
        letter-spacing:-2px;
    }
    .public-hero p {
        font-size:0.9375rem;
    }
    .public-art {
        aspect-ratio:1.5;
        max-height:300px;
    }
    .public-art img {
        width:150px;
    }
    .public-features {
        grid-template-columns:1fr;
        gap:28px;
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        scroll-behavior:auto!important;
    }
}
.visually-hidden {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0;
}
.billing-stats {
    grid-template-columns:repeat(3,minmax(0,1fr));
}
h1 {
    overflow-wrap:anywhere;
}
.status:not(.good) .status-dot {
    background:currentColor;
}
@media(max-width:650px) {
    .billing-stats {
        grid-template-columns:1fr;
    }
    .billing-stats .stat {
        padding:20px;
    }
    .billing-stats .stat-value {
        margin-top:10px;
    }
}

/* Auth uses one shared form measure on login and registration. */
.auth-page {
    position: relative;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.auth-controls {
    position: absolute;
    z-index: 2;
    top: 26px;
    right: 30px;
}
.auth-controls .icon-button {
    width: 44px;
    height: 44px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
}
.auth-story {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 44px clamp(32px, 4vw, 64px);
    background: var(--sage);
}
.auth-story .brand { padding: 0; margin: 0; }
.auth-story-copy { margin: auto 0; }
.auth-story h1 {
    max-width: none;
    font-size: clamp(34px, 4.1vw, 64px);
    font-weight: 650;
    line-height: 1.12;
    letter-spacing: -.055em;
    color: var(--sage-ink);
    overflow-wrap: normal;
}
.auth-story p {
    font-size:0.9375rem;
    line-height: 1.85;
    color: var(--sage-ink);
    margin-top: 25px;
    max-width: 380px;
}
.auth-story-art {
    width: 96px;
    height: 96px;
    color: var(--sage-ink);
    margin-bottom: 32px;
}
.auth-story small { color: var(--sage-ink); font-size:0.75rem; }
.auth-main {
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    padding: 100px 40px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.auth-form {
    width: 100%;
    max-width: 416px;
    min-width: 0;
}
.auth-form h2 {
    font-size:1.875rem;
    line-height: 1.25;
    letter-spacing: -.045em;
    font-weight: 650;
    margin-bottom: 10px;
}
.auth-form > p { font-size:0.875rem; line-height: 1.75; color: var(--muted); margin-bottom: 30px; }
.auth-form form { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.auth-form .field { width: 100%; gap: 8px; }
.auth-form .field label { font-size:0.8125rem; font-weight: 600; }
.auth-form .field input {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    font-size:1rem;
    line-height: 1.5;
    padding: 12px 15px;
}
.auth-form .field small { font-size:0.75rem; line-height: 1.65; }
.auth-form .button { width: 100%; min-height: 50px; font-size:0.875rem; margin-top: 3px; }
.auth-switch { text-align: center; font-size:0.875rem; color: var(--muted); margin: 26px 0; }
.auth-switch a { color: var(--accent); font-weight: 600; }
.auth-form .inline-note { font-size:0.75rem; line-height: 1.8; margin-bottom: 0; }
.auth-form .inline-note a { font-size: inherit; }
@media (max-width: 900px) {
    .auth-page { grid-template-columns: minmax(0, 1fr); }
    .auth-story { min-height: auto; padding: 30px 32px 36px; gap: 32px; }
    .auth-story .brand { padding-right: 64px; }
    .auth-story h1 { font-size: clamp(36px, 6vw, 52px); }
    .auth-story-art, .auth-story small { display: none; }
    .auth-story p { margin-top: 18px; }
    .auth-main { padding: 42px 28px 48px; }
    .auth-controls { top: 24px; right: 24px; }
}
@media (max-width: 480px) {
    .auth-controls { top: 20px; right: 20px; }
    .auth-story { padding: 26px 24px 32px; gap: 30px; }
    .auth-story .brand img { width: 150px; }
    .auth-story h1 { font-size: clamp(32px, 8.5vw, 40px); }
    .auth-story p { font-size:0.875rem; }
    .auth-main { padding: 34px 24px 44px; }
    .auth-form h2 { font-size:1.6875rem; }
}

/* Preserve readable controls when the available row width gets tight. */
@media (max-width: 760px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .billing-stats { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 650px) {
    .breadcrumbs > span, .breadcrumbs > .icon { display: none; }
}
@media (max-width: 480px) {
    .public-nav { gap: 10px; }
    .public-nav .brand { min-width: 90px; flex-shrink: 1; }
    .public-nav .brand img { width: 120px; }
    .public-nav > div { gap: 8px; }
    .public-nav .button:not(.primary) { display: none; }
    .public-nav .button.primary { padding: 9px; gap: 6px; font-size:0.6875rem; }
}

/* Workspace navigation and account controls */
.topbar { position:sticky; top:0; z-index:20; }
.topbar-search { display:flex; align-items:center; gap:4px; margin-left:auto; }
.topbar-search input { width:clamp(130px,20vw,300px); min-width:0; padding:10px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--ink); }
.topbar-actions { flex-shrink:0; }
.user-dropdown { position:relative; }
.user-dropdown summary { display:flex; align-items:center; gap:8px; cursor:pointer; list-style:none; }
.user-dropdown summary::-webkit-details-marker { display:none; }
.user-menu { position:absolute; top:calc(100% + 16px); right:0; width:240px; max-width:85vw; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:18px; box-shadow:0 12px 28px #0002; display:grid; gap:16px; }
.avatar img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
[data-avatar-preview] { object-fit:cover; border-radius:50%; margin:12px 0; }
#toast-region { position:fixed; right:20px; bottom:20px; z-index:100; display:grid; gap:10px; width:min(400px,calc(100vw - 40px)); max-height:80vh; overflow:auto; }
.toast { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; border:1px solid var(--border); border-left:4px solid var(--accent); background:var(--surface); color:var(--ink); border-radius:12px; box-shadow:0 8px 30px #0002; overflow-wrap:anywhere; }
.toast.success { border-left-color:var(--green); }
.toast.error { border-left-color:var(--red); }
.toast.warning { border-left-color:var(--warning); }
@media(min-width:961px) {
    .sidebar { width:288px; }
    .main-shell { margin-left:288px; }
}
@media(max-width:960px) { .user-name { display:none; } }
@media(max-width:650px) { .topbar { flex-wrap:wrap; height:auto; min-height:77px; padding:12px 16px; gap:10px; } .topbar-search { order:3; width:100%; } .topbar-search input { width:100%; } .topbar-actions { margin-left:auto; } }

/* Quiet focus, intentional motion, and unobtrusive scrolling. */
:root {
    --duration-fast:150ms;
    --duration-base:250ms;
    --duration-slow:350ms;
    --ease-smooth-out:cubic-bezier(0.22,1,0.36,1);
    --toast-open:350ms;
    --toast-close:250ms;
    --toast-distance:16px;
    --toast-blur:2px;
    --toast-scale:0.97;
    --toast-ease:cubic-bezier(0.22,1,0.36,1);
}
html,.sidebar,#toast-region { scrollbar-width:none; }
html::-webkit-scrollbar,.sidebar::-webkit-scrollbar,#toast-region::-webkit-scrollbar { display:none; }
.table-scroll { scrollbar-width:thin; scrollbar-color:var(--border) transparent; }
input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent); outline-offset:2px; }
input:focus,select:focus,textarea:focus { border-color:color-mix(in srgb,var(--accent) 55%,var(--border)); }
.button,.icon-button,.nav-item,a,input,select,textarea { transition:background-color var(--duration-fast) ease-out,color var(--duration-fast) ease-out,border-color var(--duration-fast) ease-out,box-shadow var(--duration-fast) ease-out; }
.sidebar { transition:width var(--duration-base) var(--ease-smooth-out),left var(--duration-base) var(--ease-smooth-out),visibility var(--duration-base); }
.main-shell { transition:margin-left var(--duration-base) var(--ease-smooth-out); }
.monthly-price { margin:8px 0; color:var(--sage-ink); font-size:0.8125rem; font-weight:650; }
.tld-filter { max-width:420px; margin-bottom:20px; }
.domain-suggestions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0 32px; }
.suggestion-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px; min-width:0; }
.suggestion-row strong { overflow-wrap:anywhere; }
.suggestion-row small { display:block; color:var(--muted); font-size:0.6875rem; margin-top:6px; }
.price-card[hidden] { display:none; }
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}
@media(max-width:960px) { .domain-suggestions { grid-template-columns:1fr; } }
@media(prefers-reduced-motion:reduce) {
    .t-toast { transition:none!important; }
}
.audit-entry { padding:18px 0; border-bottom:1px solid var(--border); }
.audit-entry summary { cursor:pointer; font-size:0.8125rem; overflow-wrap:anywhere; }
.audit-entry td { white-space:normal; overflow-wrap:anywhere; }

@media(prefers-reduced-motion:reduce) {
    .sidebar,.main-shell,.button,.icon-button,.nav-item,a,input,select,textarea { transition:none!important; }
}
.support-message { padding:18px 0; border-bottom:1px solid var(--border); }
.support-message small { display:block; color:var(--muted); margin-top:4px; }
.support-message p { white-space:pre-wrap; overflow-wrap:anywhere; margin-top:12px; }
.support-ai { border-left:3px solid var(--accent); padding-left:18px; }
textarea { width:100%; font:inherit; resize:vertical; }
.legal-links { display:flex; flex-wrap:wrap; gap:8px 16px; margin:20px 0 0; font-size:0.6875rem; color:var(--muted); }
.app-footer { flex-wrap:wrap; }
.app-footer > .legal-links { flex-basis:100%; }
.legal-content { max-width:900px; margin:0 auto; padding:30px 0; }
.legal-content h2 { margin:24px 0 12px; }
.legal-content p { margin:12px 0; line-height:1.8; }
.legal-content dd { overflow-wrap:anywhere; }
.preserve-lines { white-space:pre-line; }
.turnstile-field { margin:20px 0; width:100%; min-width:0; }
.turnstile-field small { display:block; margin-top:8px; color:var(--muted); font-size:0.6875rem; }
.domain-search { flex-wrap:wrap; }
.domain-search > .turnstile-field { order:3; flex-basis:100%; }
@media(max-width:650px) { .legal-content { padding:20px 0; } }
.clearable-input { position:relative; display:flex; align-items:center; }
.clearable-input input { width:100%; padding-right:42px; }
.input-icon > .input-clear,.clearable-input > .input-clear { position:absolute; right:6px; top:50%; transform:translateY(-50%); }
.domain-search .input-clear { padding:6px; min-width:30px; height:30px; background:transparent; color:var(--muted); }
.domain-search input { padding-right:44px; }
.input-clear[hidden] { display:none; }
.clearable-input input[type=search]::-webkit-search-cancel-button,.topbar-search input[type=search]::-webkit-search-cancel-button { display:none; }
.catalogue-filters { margin-bottom:20px; }
.catalogue-options { display:flex; align-items:center; flex-wrap:wrap; gap:16px; margin-top:20px; font-size:0.75rem; }
.catalogue-options label { display:flex; gap:8px; align-items:center; }
.domain-comparison { min-width:760px; }
/* Contact Chip Modern System */
.contact-protected.contact-chip,
.contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    vertical-align: middle;
    margin: 2px 4px 2px 0;
    padding: 3px 6px 3px 8px;
    background: var(--surface-soft, rgba(0, 0, 0, 0.04));
    border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
    border-radius: 9999px;
    line-height: 1;
    font-size: 0.8125rem;
    color: var(--text, #1e293b);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    max-width: 100%;
}
.contact-protected.contact-chip:hover,
.contact-chip:hover {
    background: var(--surface, #ffffff);
    border-color: var(--accent, #16a34a);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.contact-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--muted, #64748b);
    flex-shrink: 0;
}
.contact-chip:hover .contact-chip-icon {
    color: var(--accent, #16a34a);
}
.contact-chip-media {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    overflow: hidden;
}
.contact-image {
    display: inline-block;
    height: 18px;
    width: auto;
    max-width: 280px;
    object-fit: contain;
    vertical-align: middle;
}
.contact-image-dark {
    display: none;
}
[data-theme="dark"] .contact-image-light {
    display: none;
}
[data-theme="dark"] .contact-image-dark {
    display: inline-block;
}
.contact-chip-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    margin-left: 2px;
    background: var(--surface, #ffffff);
    border: 1px solid var(--border, rgba(0, 0, 0, 0.15));
    border-radius: 9999px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--muted, #475569);
    text-decoration: none;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.contact-chip-action:hover,
.contact-chip-action:focus-visible {
    background: var(--accent, #16a34a);
    color: #ffffff;
    border-color: var(--accent, #16a34a);
    text-decoration: none;
    outline: none;
}
[data-theme="dark"] .contact-protected.contact-chip,
[data-theme="dark"] .contact-chip {
    background: var(--surface-soft, rgba(255, 255, 255, 0.05));
    border-color: var(--border, rgba(255, 255, 255, 0.1));
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
[data-theme="dark"] .contact-protected.contact-chip:hover,
[data-theme="dark"] .contact-chip:hover {
    background: var(--surface, #1e293b);
    border-color: var(--accent, #38bdf8);
}
[data-theme="dark"] .contact-chip-action {
    background: var(--surface-soft, rgba(255, 255, 255, 0.08));
    border-color: var(--border, rgba(255, 255, 255, 0.15));
    color: var(--text, #f1f5f9);
}
[data-theme="dark"] .contact-chip-action:hover,
[data-theme="dark"] .contact-chip-action:focus-visible {
    background: var(--accent, #38bdf8);
    color: #0f172a;
    border-color: var(--accent, #38bdf8);
}
@media (max-width: 480px) {
    .contact-chip-action-text { display: none; }
    .contact-chip-action { padding: 4px; }
}
.contact-revealed { overflow-wrap:anywhere; user-select:text; }

/* Contact Hub & Legal Layouts */
.contact-hub-header { margin-bottom: 32px; }
.contact-hub-intro { font-size: 1.0625rem; line-height: 1.7; color: var(--muted); max-width: 680px; margin-top: 8px; }
.contact-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 32px; }
.contact-card { display: flex; flex-direction: column; justify-content: space-between; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; }
.contact-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05); }
.contact-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.contact-card-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--surface-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.contact-card-title { font-weight: 700; font-size: 1rem; color: var(--text); margin: 0; }
.contact-card-desc { font-size: 0.8125rem; line-height: 1.5; color: var(--muted); margin-bottom: 16px; flex-grow: 1; }
.contact-card-footer { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contact-reveal-box { scroll-margin-top: 40px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); margin-bottom: 32px; }
.contact-reveal-success { border: 1px solid var(--accent); background: var(--surface); padding: 24px; border-radius: 16px; margin-bottom: 32px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); }
.revealed-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.revealed-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 0.75rem; font-weight: 700; background: rgba(22, 163, 74, 0.12); color: var(--accent, #16a34a); }
.revealed-value-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 16px 20px; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 16px; }
.revealed-value-text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 1.25rem; font-weight: 700; color: var(--text); letter-spacing: -0.01em; user-select: all; overflow-wrap: anywhere; }
.revealed-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.copy-feedback-toast { position: fixed; bottom: 24px; right: 24px; background: #1e293b; color: #f8fafc; padding: 10px 18px; border-radius: 8px; font-size: 0.875rem; font-weight: 600; box-shadow: 0 10px 25px rgba(0,0,0,0.2); z-index: 9999; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(12px); transition: all 0.2s ease; pointer-events: none; }
.copy-feedback-toast.show { opacity: 1; transform: translateY(0); }
.details-list dd:has(.contact-chip) { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
@media (max-width: 600px) {
    .details-list dd:has(.contact-chip) { align-items: flex-start; }
}
.security-nav { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:24px; }
.security-nav [aria-current=page] { background:var(--surface-soft); border-color:var(--accent); }
.session-entry { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; padding:24px 0; border-bottom:1px solid var(--border); }
.session-entry > div { min-width:0; }
.session-agent { overflow-wrap:anywhere; font-size:0.75rem; }
@media(max-width:650px) { .session-entry { flex-direction:column; } }

[x-cloak] { display:none !important; }
.workspace-quick-search { position:relative; margin-left:auto; min-width:0; }
.quick-results { position:absolute; top:calc(100% + 10px); right:0; width:390px; max-width:calc(100vw - 32px); max-height:65vh; overflow:auto; padding:18px; border:1px solid var(--border); border-radius:12px; background:var(--surface); box-shadow:0 12px 28px #0002; display:grid; gap:10px; }
.quick-results strong { color:var(--muted); font-size:0.75rem; margin-top:6px; }
.quick-results a { display:block; padding:5px; overflow-wrap:anywhere; border-radius:6px; }
.quick-results a:hover,.quick-results a:focus-visible { background:var(--surface-soft); }
[wire\:loading\.attr][disabled] { cursor:wait; opacity:.65; }
@media(max-width:650px) { .workspace-quick-search { order:3; width:100%; } }

.hero-details-link { display:inline-block; margin:18px 0 0 18px; color:var(--muted); font-size:0.875rem; text-underline-offset:4px; }
.included-section { display:grid; grid-template-columns:1.15fr 1fr; gap:64px; align-items:center; padding:64px 0 80px; border-top:1px solid var(--border); scroll-margin-top:32px; }
.included-copy h2 { font-size:clamp(30px,4vw,48px); line-height:1.15; letter-spacing:-1.5px; margin:16px 0; }
.included-copy > p { color:var(--muted); font-size:1.0625rem; line-height:1.8; max-width:480px; }
.included-benefits { list-style:none; padding:0; margin:30px 0 0; display:grid; gap:24px; }
.included-benefits li { display:flex; align-items:flex-start; gap:16px; }
.included-benefits .icon { flex-shrink:0; color:var(--accent); margin-top:3px; }
.included-benefits strong,.included-benefits span { display:block; }
.included-benefits span { color:var(--muted); font-size:0.875rem; line-height:1.7; margin-top:5px; }
.included-plan { padding:36px; background:var(--surface); border:1px solid var(--border); border-radius:20px; }
.included-plan h3 { font-size:1.5625rem; line-height:1.4; margin:16px 0 24px; }
.included-price { font-size:3.25rem; line-height:1.1; font-weight:750; letter-spacing:-2px; margin:0 0 12px; }
.included-price span { font-size:0.875rem; letter-spacing:0; font-weight:500; color:var(--muted); }
.included-offer { display:flex; gap:12px; padding:18px; border-radius:12px; background:var(--surface-soft); margin:24px 0; }
.included-offer .icon { flex-shrink:0; color:var(--accent); margin-top:3px; }
.included-offer p { margin:0; font-size:0.8125rem; line-height:1.8; }
.included-plan > .text-link { display:block; margin-top:18px; font-size:0.8125rem; }
@media(max-width:800px) { .included-section { grid-template-columns:1fr; gap:32px; padding:40px 0; } .included-plan { padding:26px; } }
@media(max-width:420px) { .hero-details-link { display:block; margin-left:0; } }

/* Readable defaults, consistent keyboard focus, and compact authentication. */
html { font-size: 17px; }
html[data-text-size="compact"] { font-size: 16px; }
html[data-text-size="large"] { font-size: 19px; }
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 4px;
    box-shadow: 0 0 0 2px var(--surface);
}
.public-hero { grid-template-columns: minmax(0, 1fr); gap: 0; }
.public-hero > div { max-width: 780px; }
.password-control { position: relative; display: flex; align-items: center; }
.password-control input { width: 100%; padding-right: 6.3rem !important; }
.password-toggle { position: absolute; right: 6px; padding: 8px; min-height: 36px; border: 0; border-radius: 6px; background: var(--surface); font-size: .75rem; font-weight: 650; }
.password-toggle:hover { background: var(--canvas); }
.auth-main { padding: 72px 32px 24px; }
.auth-form { max-width: 480px; }
.auth-form h2 { font-size: 1.6rem; margin: 0 0 6px; }
.auth-form > p { margin: 0 0 18px; line-height: 1.45; }
.auth-form form { gap: 12px; }
.auth-form .field { gap: 4px; }
.auth-form .field input { min-height: 44px; padding: 8px 12px; }
.auth-form .field small { line-height: 1.3; }
.auth-form .button { min-height: 44px; }
.auth-switch { margin: 16px 0; }
.auth-form .legal-links { margin-top: 16px; gap: 8px 16px; flex-wrap: wrap; }
.registration-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.registration-grid .wide { grid-column: 1 / -1; }
.check-field { align-items: flex-start; }
.check-field input { flex-shrink: 0; margin-top: 3px; accent-color: var(--ink); }
.check-field a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 960px) {
    .auth-story { min-height: auto; padding: 20px 24px; gap: 0; }
    .auth-story-copy, .auth-story small { display: none; }
    .auth-page { align-content: start; }
    .auth-main { padding: 20px 24px 24px; }
    .auth-controls { top: 16px; right: 20px; }
}
@media (max-width: 380px) {
    .registration-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (forced-colors: active) {
    :focus-visible { outline: 3px solid Highlight !important; }
}

.auth-form .field { margin-bottom: 0; }
.auth-form form { row-gap: 10px; }
.auth-main { padding-top: 54px; }
@media (max-width: 960px) { .auth-page { grid-template-columns: minmax(0, 1fr); } .auth-main { padding-top: 20px; } }

.auth-form .field small { font-size: .72rem; }
.auth-form .legal-links { font-size: .72rem; }
@media (min-width: 961px) { .auth-main { padding-top: 44px; } }

.password-control input { padding-right: 52px !important; }
.password-toggle { width: 40px; height: 40px; display: grid; place-items: center; right: 2px; padding: 8px; }
.welcome-page { max-width: 940px; margin: auto; padding: 48px 24px; }
.welcome-page .brand { margin-bottom: 40px; }
.welcome-page .content-grid { margin: 28px 0; }

@media (max-width: 960px) { .has-global-theme .auth-story { min-height: auto; } }
@media (min-width: 961px) {
    .has-global-theme .auth-main { padding: 8px 32px; }
    .has-global-theme .auth-switch { margin: 12px 0; }
}

/* The sidebar shell stays still; only the central navigation scrolls. */
.sidebar { overflow: hidden; height: 100dvh; }
.sidebar > .brand { flex-shrink: 0; margin-bottom: 24px; }
.sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; padding-bottom: 16px; }
.sidebar-scroll .sidebar-note { margin-top: 20px; margin-bottom: 0; }
.sidebar-bottom { flex: 0 0 auto; margin-top: 0; padding-top: 10px; border-top: 1px solid var(--border); background: var(--sidebar); }
.sidebar-bottom .account { margin-top: 10px; padding-top: 14px; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
@media (max-height: 600px) {
    .sidebar { padding-top: 12px; }
    .sidebar > .brand { margin-bottom: 12px; }
    .sidebar-bottom { padding-top: 4px; }
    .sidebar-bottom .account { margin-top: 4px; padding-top: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); }
}
:root { --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px; --radius-control:8px; --radius-panel:12px; }
.ds-pagination { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:var(--space-3); margin-block:var(--space-6); }
[aria-disabled="true"] { opacity:.55; cursor:default; }
.field [aria-invalid="true"] { border-color:var(--danger, #b93b32); }

/* Compact workspace header and account menu. */
.topbar { height: 64px; padding-inline: 28px; gap: 16px; }
.topbar-actions { gap: 8px; }
.user-dropdown > summary { width: 44px; height: 44px; justify-content: center; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.user-dropdown > summary:hover, .user-dropdown[open] > summary { border-color: var(--accent); }
.user-dropdown .avatar-small { width: 38px; height: 38px; border-radius: 9px; overflow: hidden; }
.user-dropdown .avatar-small img { width: 100%; height: 100%; object-fit: cover; }
.user-menu { top: calc(100% + 8px); width: 300px; gap: 4px; padding: 12px; max-height: calc(100dvh - 88px); overflow-y: auto; }
.user-menu-heading { padding: 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; overflow-wrap: anywhere; }
.user-menu-heading strong, .user-menu-heading small { display: block; }
.user-menu-heading small { color: var(--muted); font-size: .75rem; margin-top: 4px; }
.user-menu > a { padding: 9px 8px; border-radius: 8px; font-size: .85rem; }
.user-menu > a:hover { background: var(--surface-soft); }
.user-menu-theme { display: flex; align-items: center; justify-content: space-between; padding: 8px; font-size: .8rem; }
.user-menu-theme .theme-picker-panel { position: static; width: 100%; box-shadow: none; margin-top: 8px; }
.user-menu-theme:has(.theme-picker[open]) { flex-wrap: wrap; }
.user-menu-theme .theme-picker[open] { width: 100%; margin-top: 8px; }
.user-menu form .button { width: 100%; margin-top: 8px; }
.workspace-quick-search { width: clamp(220px, 32vw, 440px); }
.topbar-search { width: 100%; gap: 4px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--canvas); }
.topbar-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 2px var(--surface-soft); }
.topbar-search input { flex: 1; width: 100%; border: 0; padding: 7px 4px; background: transparent; font-size: .82rem; }
.topbar-search input:focus-visible { outline: none; box-shadow: none; }
.search-submit { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--muted); }
.search-shortcut { flex-shrink: 0; padding: 3px 5px; border: 1px solid var(--border); border-radius: 5px; color: var(--muted); font: .62rem var(--font); white-space: nowrap; }
.quick-results { width: 100%; min-width: 280px; padding: 12px; }
.quick-results a { padding: 9px; }
.stat-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.stat-icon .icon { width: 26px; height: 26px; }
@media (max-width: 650px) {
    .topbar { height: auto; min-height: 60px; padding: 8px 16px; gap: 8px; }
    .workspace-quick-search { width: 100%; }
    .search-shortcut { display: none; }
    .user-menu { max-width: calc(100vw - 32px); }
}
.main-shell { display:flex; flex-direction:column; min-height:100dvh; }
.main-shell > main { flex:1 0 auto; width:100%; }
.main-shell > .app-footer { margin: auto 38px 0; flex-shrink:0; }
.breadcrumbs a:hover { text-decoration:underline; text-underline-offset:4px; }
@media(max-width:650px) { .main-shell > .app-footer { margin-inline:18px; } }