:root { --accent:#76b85e; --accent-dark:#477b35; --dark:#263b37; --soft:#eff6eb; --ink:#263b45; --muted:#77858d; --line:#e7eceb; --surface:#f7f9f8; --action:#76b85e; --action-ink:#173510; font-family: 'Nunito', 'Avenir Next', system-ui, sans-serif; color:var(--ink); background:var(--surface); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; font-size:14px; line-height:1.6; }
body.brand-servts { --accent:#0f9f88; --accent-dark:#087867; --dark:#183f45; --soft:#eaf6f3; --action:#efd479; --action-ink:#263238; }
a { color:inherit; text-decoration:none; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select { -webkit-tap-highlight-color:transparent; }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
button { cursor:pointer; }
svg { width:20px; height:20px; flex-shrink:0; vertical-align:middle; }
h1,h2,h3,p { margin:0; }
h1 { font-size:34px; line-height:1.25; font-weight:650; letter-spacing:-1.2px; }
h2 { font-size:17px; font-weight:650; letter-spacing:-.3px; }
p { color:var(--muted); }
.skip-link { position:fixed; left:20px; top:-70px; z-index:100; background:white; padding:12px; }
.skip-link:focus { top:10px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.topbar { height:86px; background:white; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:0 35px; gap:24px; position:relative; z-index:5; }
.brand-logo { width:178px; display:flex; align-items:center; }
.brand-logo img { max-width:164px; max-height:43px; }
.brand-servts .brand-logo img { max-width:180px; }
.topbar-divider { height:27px; width:1px; background:var(--line); }
.portal-name { color:#86918e; font-size:13px; }
.topbar-right { display:flex; align-items:center; gap:15px; margin-left:auto; }
.mobile-logout { display:none; }
.account-name { font-size:13px; }
.avatar { height:35px; width:35px; border-radius:50%; background:var(--soft); color:var(--accent-dark); display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }
.demo-label { font-size:9px; font-weight:700; letter-spacing:1.3px; padding:5px 9px; border:1px solid #e9dcac; background:#fdf9ec; color:#96803b; border-radius:5px; margin-right:12px; }
.app-shell { display:grid; grid-template-columns:242px minmax(0,1fr); min-height:calc(100vh - 86px); }
.sidebar { padding:34px 20px 20px; border-right:1px solid var(--line); background:#fdfefd; display:flex; flex-direction:column; }
.workspace-label { font-size:9px; font-weight:750; letter-spacing:1.6px; color:#99a39e; padding:0 16px; margin-bottom:14px; }
.nav-item { display:flex; align-items:center; gap:12px; padding:12px 16px; border-radius:7px; margin:4px 0; color:#6f7e7a; font-size:13px; transition:background .15s,color .15s; }
.nav-item:hover { background:#f0f4f1; color:var(--accent-dark); }
.nav-item.selected { background:var(--soft); color:var(--accent-dark); font-weight:650; }
.nav-item svg { width:19px; height:19px; }
.nav-dot { width:6px; height:6px; border-radius:50%; background:var(--accent); margin-left:auto; }
.sidebar-brands { margin-top:39px; padding-top:23px; border-top:1px solid var(--line); }
.brand-option { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid transparent; border-radius:7px; margin:4px 0; color:#7b8982; font-size:12px; }
.brand-option.current { border-color:var(--line); background:white; color:var(--ink); }
.brand-square { height:26px; width:26px; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; border-radius:6px; }
.brand-square-breezle { color:#63994d; background:#eff6eb; }
.brand-square-servts { color:#0f9f88; background:#eaf6f3; }
.brand-option-arrow { margin-left:auto; color:#9eaaa4; }
.sidebar-bottom { margin-top:auto; padding-top:80px; }
.help-box { padding:18px 15px; border-radius:8px; background:#f3f6f3; }
.help-box>svg { color:var(--accent-dark); margin-bottom:10px; }
.help-box strong { display:block; font-size:12px; }
.help-box p { margin:6px 0 14px; font-size:11px; line-height:1.8; }
.help-box a { display:flex; justify-content:space-between; color:var(--accent-dark); font-size:11px; font-weight:650; }
.logout { margin-top:20px; }
.main-content { padding:40px 42px 0; min-width:0; max-width:1600px; width:100%; margin:0 auto; }
.page-heading { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:30px; }
.page-heading p { margin-top:9px; font-size:13px; }
.eyebrow { color:#8c9a92; font-size:9px; font-weight:700; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:11px; }
.heading-dot { color:var(--accent); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:42px; padding:9px 17px; border:1px solid transparent; border-radius:6px; font-size:12px; font-weight:650; white-space:nowrap; transition:transform .15s,background .15s; line-height:1.6; }
.button svg { width:17px; height:17px; }
.button:hover { transform:translateY(-1px); }
.button-primary { background:var(--action); color:var(--action-ink); border-color:var(--action); }
.button-outline { background:white; border-color:#dce4de; color:var(--ink); }
.button-outline:hover { border-color:var(--accent); }
.button-text { background:transparent; color:var(--muted); }
.button-small { min-height:32px; padding:5px 12px; font-size:11px; }
.full-width { width:100%; }
.account-hero { background:var(--dark); color:white; border-radius:12px; padding:31px 35px; position:relative; overflow:hidden; min-height:208px; display:flex; align-items:center; justify-content:space-between; }
.account-hero::after { content:''; position:absolute; width:350px; height:350px; right:-30px; top:-80px; border-radius:50%; background:radial-gradient(circle,rgba(140,196,110,.2),transparent 70%); pointer-events:none; }
.brand-servts .account-hero { background:linear-gradient(110deg,#21424a,#307c79); }
.account-hero .eyebrow { color:#a6bba7; font-size:8px; letter-spacing:2px; }
.account-hero h2 { font-size:25px; font-weight:550; color:#fff; letter-spacing:-.6px; }
.account-hero p { margin-top:8px; color:#adbfba; font-size:12px; max-width:425px; }
.brand-servts .account-hero p { color:#d0e7e1; }
.account-hero a { color:#b8dba4; display:inline-flex; gap:18px; align-items:center; margin-top:22px; font-weight:600; font-size:11px; }
.brand-servts .account-hero a { color:#f5d978; }
.hero-art { width:245px; height:150px; position:relative; flex-shrink:0; }
.orbit { position:absolute; border:1px solid rgba(165,194,157,.19); border-radius:50%; width:225px; height:140px; left:0; top:15px; transform:rotate(-25deg); }
.orbit-two { width:155px; height:190px; top:-16px; left:35px; transform:rotate(28deg); }
.server-illustration { position:absolute; width:135px; top:22px; left:49px; transform:rotate(-8deg); }
.server-illustration>div { height:32px; margin:6px; border:1px solid #89a37d; border-radius:5px; background:linear-gradient(115deg,#65865b,#36553d); display:flex; align-items:center; gap:5px; padding:0 11px; box-shadow:0 7px 12px #142f2a35; }
.server-illustration i { height:4px; width:4px; background:#bfd5a6; border-radius:50%; }
.server-illustration span { width:27px; height:3px; background:#8eaa7e; margin-left:auto; border-radius:2px; }
.floating-check { position:absolute; right:36px; bottom:19px; width:35px; height:35px; background:#94bf77; color:#294730; border:4px solid var(--dark); border-radius:50%; display:grid; place-items:center; }
.floating-check svg { width:18px; height:18px; }
.stat-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:19px; margin:23px 0 30px; }
.stat-card { border:1px solid var(--line); background:white; padding:20px 23px; border-radius:9px; display:grid; grid-template-columns:1fr 38px; }
.stat-label { font-size:11px; color:#7e8d85; grid-column:1; grid-row:1; }
.stat-card strong { grid-row:2; grid-column:1; font-size:30px; font-weight:600; letter-spacing:-1px; margin:8px 0 3px; }
.stat-card strong small { font-size:14px; letter-spacing:0; margin-left:9px; color:#9aab9d; font-weight:500; }
.stat-note { font-size:10px; color:#a1ada6; grid-row:3; grid-column:1; }
.stat-icon { width:34px; height:34px; background:var(--soft); color:var(--accent-dark); border-radius:8px; display:grid; place-items:center; grid-column:2; grid-row:1/3; }
.stat-icon svg { width:18px; height:18px; }
.stat-icon.amber { background:#fbf5e8; color:#bfa355; }
.stat-icon.blue { background:#eff4fb; color:#7295bf; }
.panel { background:white; border:1px solid var(--line); border-radius:9px; margin-bottom:23px; overflow:hidden; }
.panel-heading { padding:21px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.panel-heading h2 { font-size:14px; }
.panel-heading>a { font-size:10px; display:flex; align-items:center; gap:8px; color:#8b9b8e; }
.panel-heading>a svg { width:14px; height:14px; }
.service-row { padding:21px 24px; display:flex; align-items:center; gap:15px; border-top:1px solid var(--line); }
.service-symbol { width:40px; height:40px; border:1px solid #e4ebe2; color:#719561; background:#f7faf5; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; }
.brand-servts .service-symbol { background:var(--soft); color:var(--accent); }
.service-identity { min-width:170px; flex:1; }
.service-identity strong,.service-plan strong,.service-renewal strong { font-size:12px; font-weight:600; display:block; }
.service-identity span,.service-plan span,.service-renewal span { font-size:10px; color:#92a097; display:block; margin-top:3px; }
.service-plan { flex:1; }
.service-renewal { text-align:right; min-width:145px; }
.service-renewal small { color:#9aa79e; font-weight:400; }
.badge { display:inline-flex; align-items:center; gap:6px; padding:4px 8px; background:#f1f5f1; border-radius:4px; font-size:9px; color:#6c8865; line-height:1.5; white-space:nowrap; }
.badge>span { width:4px; height:4px; border-radius:50%; background:currentColor; }
.badge-active,.badge-paid { background:#eef7ed; color:#6b9b56; }
.badge-unpaid { background:#fcf5e8; color:#b69a4c; }
.badge-open { background:#fdf3e7; color:#c29756; }
.badge-answered { background:#edf4fc; color:#648ab6; }
.badge-closed { background:#f0f2f3; color:#87949b; }
.two-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px; }
.mini-row { padding:17px 24px; display:flex; align-items:center; gap:12px; border-top:1px solid var(--line); min-height:83px; }
.mini-row:hover { background:#fbfcfa; }
.small-symbol { color:#a9b5ab; flex-shrink:0; }
.small-symbol svg { width:18px; }
.mini-identity { flex:1; min-width:0; }
.mini-identity strong { display:block; font-size:11px; font-weight:550; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.mini-identity small { display:block; font-size:9px; color:#9ba89f; margin-top:3px; }
.mini-value { text-align:right; }
.mini-value>strong { font-size:11px; font-weight:550; display:block; margin-bottom:3px; }
.portal-footer { display:flex; justify-content:space-between; gap:15px; padding:17px 0 24px; font-size:9px; color:#a1ada5; }
.portal-footer a { color:#819185; }
.notice { margin-bottom:22px; border:1px solid #e6e8d8; background:#fbfbf3; color:#7b8067; border-radius:7px; padding:14px 18px; font-size:12px; }
.notice.error { background:#fff4f2; color:#a65d52; border-color:#f0dcd6; }
.notice.success { background:#eff8ed; color:#537c46; border-color:#daead4; }
.empty-state { padding:48px 25px; text-align:center; color:#96a39a; }
.table-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:11px; }
th { padding:14px 22px; font-size:9px; color:#96a398; font-weight:600; background:#fafcf9; text-transform:uppercase; letter-spacing:.7px; border-bottom:1px solid var(--line); white-space:nowrap; }
td { padding:19px 22px; border-bottom:1px solid var(--line); }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover { background:#fdfefd; }
td strong { font-weight:600; }
.table-link { font-size:10px; color:var(--accent-dark); white-space:nowrap; }
.table-secondary { display:block; color:#9aa89d; font-size:9px; margin-top:5px; }
.ticket-subject { font-size:12px; font-weight:550; }
.ticket-subject:hover { color:var(--accent-dark); }
.priority { font-size:10px; color:#98a59b; }
.priority-high { color:#b7794c; }
.filter-bar { display:flex; align-items:center; gap:12px; padding:18px 22px; }
.filter-bar input { flex:1; max-width:390px; margin:0; }
.filter-bar select { width:165px; margin:0; }
input,select,textarea { display:block; width:100%; background:#fff; color:var(--ink); border:1px solid #dfe7df; border-radius:6px; padding:11px 13px; outline:none; font-size:12px; }
input:focus,textarea:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--soft); }
input::placeholder,textarea::placeholder { color:#a6afa9; }
textarea { resize:vertical; line-height:1.8; }
label { display:block; color:#6c7d70; font-size:11px; font-weight:550; margin:18px 0 7px; }
.form-panel { padding:28px; }
.password-recovery-panel>h1 { margin-bottom:20px; }
.form-panel>p { margin:8px 0 20px; font-size:12px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.form-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:23px; }
.form-panel form>.button { margin-top:24px; }
.back-link { display:inline-block; color:#8b9a8e; font-size:11px; margin:0 0 22px; }
.conversation-layout { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:23px; align-items:start; }
.ticket-title { font-size:27px; }
.message { padding:26px; border-top:1px solid var(--line); }
.message:first-child { border-top:0; }
.message.staff-message { background:#fcfefb; }
.message-header { display:flex; align-items:center; gap:10px; }
.message-header strong { display:block; font-size:12px; font-weight:600; }
.message-header div>span { display:block; font-size:9px; color:#a0ada2; }
.message-header time { margin-left:auto; color:#9eaaa2; font-size:9px; }
.message-body { margin-top:19px; font-size:12px; line-height:1.9; white-space:pre-wrap; overflow-wrap:anywhere; }
.staff-avatar { background:var(--accent); color:white; }
.reply-panel { padding:26px; }
.reply-panel h2 { margin-bottom:17px; }
.sender-notice { display:flex; align-items:center; gap:6px; color:#899b87; font-size:10px; margin-bottom:17px; flex-wrap:wrap; }
.sender-notice svg { width:14px; height:14px; }
.ticket-details { padding:23px; }
.ticket-details h2 { font-size:14px; }
dl { margin:20px 0; }
dl>div { display:flex; justify-content:space-between; gap:15px; padding:9px 0; font-size:11px; border-bottom:1px solid var(--line); }
dt { color:#99a69c; }
dd { margin:0; text-align:right; }
.service-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:23px; }
.service-card { padding:25px; }
.service-card-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.service-card .hostname { margin-top:5px; font-size:11px; }
.subtle-note { font-size:9px; color:#a2ada5; margin-top:15px; }
.invoice-paper { padding:35px; }
.invoice-identity { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; padding-bottom:35px; font-size:10px; color:#99a599; }
.invoice-identity>img { width:140px; height:auto; }
.invoice-identity strong,.invoice-identity span { display:block; }
.invoice-identity strong { margin-top:5px; color:var(--ink); font-size:12px; }
.invoice-total { display:flex; justify-content:flex-end; gap:40px; padding:30px 20px; color:#98a398; }
.invoice-total strong { font-size:24px; color:var(--ink); }
.auth-main { max-width:1120px; margin:0 auto; padding:75px 35px; }
.auth-layout { display:grid; grid-template-columns:1.2fr 1fr; gap:85px; align-items:center; }
.auth-story { padding:30px 0; }
.auth-story h1 { font-size:48px; letter-spacing:-1.6px; line-height:1.2; max-width:480px; }
.auth-story>p { margin-top:24px; max-width:390px; line-height:1.9; }
.auth-features { display:flex; flex-wrap:wrap; gap:24px; margin-top:35px; color:var(--accent-dark); font-size:11px; }
.auth-features svg { width:17px; margin-right:6px; }
.auth-brand-tabs { display:flex; gap:14px; margin-top:50px; }
.auth-brand-tabs a { padding:9px 15px; border:1px solid var(--line); color:#8c998f; border-radius:7px; font-size:11px; background:white; }
.auth-brand-tabs a.active { border-color:var(--accent); color:var(--accent-dark); }
.auth-card { padding:35px; background:white; border:1px solid var(--line); border-radius:12px; box-shadow:0 14px 40px #243b2c05; }
.auth-card h2 { font-size:26px; letter-spacing:-.7px; }
.auth-card>p { margin-top:7px; font-size:12px; }
.auth-card form>.button { margin-top:24px; }
.demo-entry { margin-top:26px; padding-top:22px; border-top:1px solid var(--line); }
.demo-entry>span { display:block; text-align:center; color:#a4ad9b; letter-spacing:1.3px; font-size:8px; }
.demo-entry form>.button { margin-top:12px; font-size:11px; }
.brand-summary-grid { display:grid; grid-template-columns:1fr 1fr; gap:23px; }
.brand-summary { padding:25px; }
.brand-summary img { max-width:145px; height:32px; object-fit:contain; object-position:left; }
.brand-domain { display:block; color:#a0ada2; font-size:10px; margin-top:8px; }
.brand-summary dl { display:flex; gap:40px; }
.brand-summary dl>div { border:0; display:block; }
.brand-summary dd { text-align:left; font-size:24px; }
.brand-summary a { display:flex; align-items:center; gap:13px; color:var(--accent-dark); font-size:11px; }
.section-title { display:flex; justify-content:space-between; align-items:center; margin:7px 0 18px; }
.section-title span { font-size:11px; color:#98a49b; }
.settings-brand-logo img { max-width:170px; height:40px; object-fit:contain; object-position:left; margin-bottom:10px; }
.settings-detail { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:25px; font-size:10px; }
.settings-detail span { color:#9ca69c; }
.settings-detail strong { font-weight:550; }
fieldset { border:1px solid var(--line); margin:25px 0 0; border-radius:7px; padding:10px 15px; }
legend { color:#8d9c90; font-size:10px; padding:0 6px; }
.check-label { display:flex; align-items:center; gap:9px; font-size:11px; margin:11px 0; font-weight:400; }
.check-label input { width:15px; height:15px; padding:0; accent-color:var(--accent-dark); }
.token-secret { display:block; overflow-wrap:anywhere; padding:15px 0 0; font-size:12px; user-select:all; }
.endpoint-list { display:grid; gap:10px; margin:20px 0; font-size:11px; overflow-x:auto; }
.endpoint-list code { display:block; background:var(--surface); padding:12px; border-radius:5px; }
.report-filters { display:flex; align-items:flex-end; gap:16px; margin:0 0 25px; }
.report-filters label { width:190px; margin:0; }
.report-filters input,.report-filters select { margin-top:6px; }
.report-panel { padding-bottom:5px; }
.panel-heading p { font-size:11px; margin-top:5px; }
.period-tabs { display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.period-tabs a { padding:7px 11px; font-size:10px; color:#89978a; border-left:1px solid var(--line); white-space:nowrap; }
.period-tabs a:first-child { border:0; }
.period-tabs a.active { background:var(--soft); color:var(--accent-dark); }
.chart-legend { display:flex; justify-content:center; gap:25px; flex-wrap:wrap; font-size:10px; color:#7c8b7f; margin:5px 0 10px; }
.chart-legend>span::before { content:''; display:inline-block; width:11px; height:8px; margin-right:6px; border-radius:2px; }
.legend-new::before { background:#a8b7bd; }
.legend-activated::before { background:#6c92cb; }
.legend-income::before { background:#6fae5f; }
.legend-year-0::before { background:#a8bbd3; }
.legend-year-1::before { background:#e2c878; }
.legend-year-2::before { background:#6f9c73; }
.chart-scroll { overflow-x:auto; }
.report-chart { display:block; width:100%; height:auto; min-width:650px; padding:0 12px; }
.report-chart text { font-family:inherit; fill:#91a095; font-size:10px; }
.report-chart .axis-title { font-size:9px; fill:#748779; }
.grid-line { stroke:#e9eeea; stroke-width:1; }
.series { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; }
.series-new { stroke:#a8b7bd; }
.series-new { stroke-dasharray:6 4; }
.series-activated { stroke:#6c92cb; }
.series-income { stroke:#6fae5f; }
.bar-year-0 { fill:#a8bbd3; }
.bar-year-1 { fill:#e2c878; }
.bar-year-2 { fill:#6f9c73; }
.chart-data { padding:5px 23px 15px; }
.chart-data summary { font-size:10px; cursor:pointer; color:var(--accent-dark); padding:10px 0; }
.report-definition { padding:20px 24px; font-size:10px; line-height:1.9; }
.report-panel th,.report-panel td { padding-top:12px; padding-bottom:12px; }
.fee-rule { display:flex; align-items:flex-end; gap:18px; padding:20px 25px; border-top:1px solid var(--line); }
.fee-rule>strong { font-size:12px; min-width:145px; margin-bottom:12px; }
.fee-rule>label:not(.check-label) { flex:1; margin:0; }
.fee-rule input:not([type=checkbox]) { margin-top:7px; }
.fee-rule .check-label { margin-bottom:12px; white-space:nowrap; }
button:disabled { opacity:.6; cursor:wait; }
.stat-label,.stat-note,.table-secondary,.workspace-label,.report-chart text,.mini-identity small,.portal-footer { color:#687b6e; }
.report-chart text { fill:#687b6e; }
th,.service-identity span,.service-plan span,.service-renewal span { color:#687b6e; }
@media(min-width:1600px) { .main-content { padding-left:60px; padding-right:60px; } }
@media(max-width:1180px) { .main-content { padding:30px 25px 0; } .app-shell { grid-template-columns:215px minmax(0,1fr); } .sidebar { padding-left:13px; padding-right:13px; } .service-plan { display:none; } .service-identity { min-width:120px; } .two-columns { gap:16px; } .mini-row { padding:16px; } .conversation-layout { grid-template-columns:minmax(0,1fr) 225px; } .fee-rule { flex-wrap:wrap; } .fee-rule>strong { width:100%; } }
@media(max-width:900px) { .app-shell { grid-template-columns:175px minmax(0,1fr); } .topbar { padding:0 22px; } .brand-logo { width:130px; } .brand-logo img { max-width:125px; } .brand-servts .brand-logo img { max-width:130px; } .sidebar { padding:25px 9px; } .workspace-label { padding:0 10px; font-size:8px; } .nav-item { padding:11px 10px; gap:8px; font-size:11px; } .help-box { padding:14px 10px; } .page-heading { align-items:flex-start; } .page-heading h1 { font-size:28px; } .page-heading>.button { font-size:10px; } .stat-grid { gap:10px; } .stat-card { padding:17px 14px; grid-template-columns:1fr; } .stat-icon { display:none; } .stat-card strong { font-size:26px; } .stat-card strong small { display:block; margin:0; font-size:11px; } .two-columns,.service-cards { grid-template-columns:1fr; gap:0; } .hero-art { width:155px; } .server-illustration { left:10px; } .orbit { width:160px; } .orbit-two { left:5px; } .floating-check { right:0; } .account-hero { padding:25px; } .account-hero h2 { font-size:22px; } .account-hero p { max-width:270px; } .service-renewal { min-width:100px; } .conversation-layout { grid-template-columns:1fr; } .ticket-details { order:-1; } .ticket-details dl { display:flex; flex-wrap:wrap; gap:10px 25px; } .ticket-details dl>div { gap:10px; } .ticket-details form { max-width:180px; } .auth-layout { gap:40px; } .auth-story h1 { font-size:37px; } .auth-card { padding:28px; } .panel-heading { flex-wrap:wrap; } }
@media(max-width:650px) { .topbar { height:69px; padding:0 18px; gap:13px; } .topbar-divider,.portal-name,.account-name { display:none; } .demo-label { font-size:7px; margin:0; padding:4px 6px; } .avatar { width:29px; height:29px; } .topbar-right { gap:10px; } .app-shell { display:flex; flex-direction:column; min-height:calc(100vh - 69px); } .sidebar { border-right:0; border-bottom:1px solid var(--line); padding:8px 13px; } .sidebar>nav { display:flex; gap:3px; overflow-x:auto; } .sidebar>nav .nav-item { flex-shrink:0; font-size:10px; padding:9px; margin:0; } .sidebar>nav svg { width:16px; height:16px; } .sidebar>.workspace-label,.sidebar-bottom,.sidebar-brands>.workspace-label,.nav-dot { display:none; } .sidebar-brands { display:flex; border:0; margin:5px 0 0; padding:4px 0 0; gap:7px; } .brand-option { font-size:9px; padding:5px 9px; margin:0; } .brand-square { width:19px; height:19px; font-size:9px; } .brand-option-arrow { display:none; } .main-content { padding:25px 17px 0; } .page-heading { gap:10px; flex-wrap:wrap; margin-bottom:23px; } .page-heading h1 { font-size:26px; letter-spacing:-.8px; } .page-heading p { font-size:11px; } .eyebrow { font-size:8px; letter-spacing:1.4px; } .account-hero { padding:25px; min-height:185px; } .account-hero h2 { font-size:23px; max-width:260px; } .account-hero p { max-width:230px; font-size:11px; } .hero-art { display:none; } .stat-grid { gap:8px; margin:17px 0 22px; } .stat-card { padding:14px 10px; } .stat-label { font-size:9px; } .stat-note { font-size:8px; } .stat-card strong { font-size:25px; } .stat-card strong small { font-size:10px; } .service-row { flex-wrap:wrap; padding:17px; gap:11px; } .service-symbol { width:34px; height:34px; } .service-identity { min-width:130px; } .service-renewal { width:100%; padding-left:45px; text-align:left; } .service-renewal strong,.service-renewal span { display:inline; } .service-renewal span { margin-left:10px; font-size:9px; } .panel-heading { padding:18px; } .panel-heading h2 { font-size:13px; } .panel { margin-bottom:17px; } .mini-row { min-height:76px; } .portal-footer { flex-direction:column; gap:5px; font-size:8px; } .filter-bar { padding:15px; flex-wrap:wrap; gap:8px; } .filter-bar input { min-width:100%; } .filter-bar select { flex:1; } .form-panel,.reply-panel,.message { padding:20px; } .form-grid { grid-template-columns:1fr; gap:0; } .message-header time { font-size:8px; } .message-header strong { font-size:11px; } .message-body { font-size:12px; } .ticket-title { font-size:23px!important; } .invoice-paper { padding:20px; } .invoice-identity { flex-wrap:wrap; gap:22px; } .invoice-identity>img { width:120px; } .invoice-identity>div { min-width:120px; } .auth-main { padding:33px 22px; } .auth-layout { grid-template-columns:1fr; gap:25px; } .auth-story { padding:0; } .auth-story h1 { font-size:34px; max-width:340px; } .auth-story>p { margin-top:15px; font-size:12px; } .auth-features { margin-top:20px; gap:20px; } .auth-brand-tabs { margin-top:25px; } .auth-card { padding:25px; } .brand-summary-grid { grid-template-columns:1fr; gap:0; } .report-filters { flex-wrap:wrap; gap:10px; } .report-filters label { width:calc(50% - 5px); } .report-filters>.button { width:100%; } .period-tabs { width:100%; } .period-tabs a { flex:1; text-align:center; font-size:9px; padding:8px; } .chart-legend { gap:15px; padding:0 15px; font-size:9px; } .fee-rule { padding:20px; gap:12px; } .fee-rule>label:not(.check-label) { min-width:calc(50% - 6px); } .fee-rule .check-label { margin-right:auto; } }
@media(prefers-reduced-motion:reduce) { * { transition:none!important; scroll-behavior:auto!important; } }
@media(max-width:650px) { .mobile-logout { display:inline-flex; color:var(--muted); padding:4px; } .mobile-logout svg { width:18px; height:18px; } }

.badge-new,.badge-customer_reply { background:#fff3df; color:#9b641d; }

.invoice-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }.invoice-actions form { margin:0; }

.language-picker { display:flex; gap:7px; align-items:center; }.language-picker a { font-size:11px; padding:4px 7px; border:1px solid transparent; border-radius:4px; color:var(--muted); }.language-picker a.active { border-color:var(--line); color:var(--accent-dark); background:var(--soft); }.payment-card { max-width:540px; margin:35px auto; }.payment-card h2 { margin-top:18px; }
@media(max-width:650px) { .topbar .language-picker { margin-left:auto; }.topbar-right { gap:6px; }.language-picker a { font-size:10px; padding:4px; }.topbar .demo-label { display:none; } }

.invoice-identity img { display:block; width:170px; max-width:100%; height:auto; max-height:65px; object-fit:contain; object-position:left center; margin-bottom:17px; }.invoice-identity>div:first-child { max-width:45%; }.invoice-paper .invoice-identity .message-body { font-size:12px; }
@media(max-width:650px) { .invoice-identity>div:first-child { max-width:100%; width:100%; }.topbar { gap:8px; }.topbar .brand-logo { width:115px; }.topbar .brand-logo img { max-width:115px; }.language-picker a { white-space:nowrap; } }
.service-control-panel { padding:27px; }.service-control-panel>div:first-child { display:flex; gap:15px; align-items:center; }.service-control-panel h2 { margin-bottom:4px; }.server-controls { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }.server-controls .button:disabled { opacity:.55; cursor:not-allowed; }.service-detail-list { margin:20px 0; }.service-detail-list>div { display:flex; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); padding:11px 0; }.service-detail-list dt { color:var(--muted); }.service-detail-list dd { text-align:right; margin:0; font-weight:600; }.usage-placeholder-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:15px; }.usage-placeholder-grid>div { background:var(--surface); border:1px solid var(--line); border-radius:5px; padding:20px; }.usage-placeholder-grid strong { display:block; font-size:25px; margin-top:15px; }@media(max-width:650px) { .usage-placeholder-grid { grid-template-columns:1fr 1fr; }.service-control-panel { padding:20px; }.server-controls .button { padding:9px; font-size:11px; } }
.priority-low { color:#6d7b87; }
.priority-medium { color:#547756; }
.priority-urgent { color:#b63535; font-weight:700; }

.contact-fields { border:0; padding:0; margin:0; min-width:0; }

/* Account navigation shares a single surface and baseline with its content. */
.account-panel { overflow:hidden; min-width:0; }
.account-tabs { display:flex; align-items:stretch; gap:2px; padding:0 12px; border-bottom:1px solid var(--line); overflow-x:auto; background:#fff; }
.account-tab { display:flex; align-items:center; flex:0 0 auto; min-height:56px; padding:16px 8px 13px; border-bottom:3px solid transparent; color:var(--muted); font-size:12px; font-weight:650; text-decoration:none; white-space:nowrap; }
.account-tab:hover { color:var(--accent-dark); background:var(--soft); }
.account-tab.is-active { color:var(--accent-dark); border-bottom-color:var(--accent); background:var(--soft); }
.account-tab:focus-visible { outline-offset:-4px; }
.account-content { border:0; border-radius:0; }
@media(max-width:650px) { .account-tabs { padding:0 10px; gap:0; }.account-tab { min-height:50px; padding:14px 12px 11px; }.account-content { padding:22px 18px; } }

.catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr)); gap:20px; }.catalog-grid .form-panel { min-width:0; }

/* Customer conversations identify authors by both role text and color. */
.customer-conversation { overflow:hidden; }
.customer-conversation .message { border-left:4px solid transparent; }
.customer-conversation .customer-message { background:#f0f5fd; border-left-color:#587fba; }
.customer-conversation .staff-message { background:var(--soft); border-left-color:var(--accent-dark); }
.customer-conversation .customer-message .avatar { background:#dae7fa; color:#254e89; }
.customer-conversation .staff-message .avatar { background:var(--accent-dark); color:#fff; }
.customer-conversation .message-header strong { font-size:13px; color:var(--ink); }
.customer-conversation .message-header .message-role { display:inline-block; margin-top:4px; padding:3px 7px; border-radius:4px; font-size:10px; font-weight:700; line-height:1.3; }
.customer-conversation .customer-message .message-role { color:#254e89; background:#dae7fa; }
.customer-conversation .staff-message .message-role { color:var(--accent-dark); background:#fff; border:1px solid var(--accent-dark); }
.customer-conversation .message-header time { color:#647480; }

.captcha-block { margin:24px 0 28px; min-height:65px; }.captcha-block + .form-actions { margin-top:8px; }

.public-support-nav{display:flex;gap:20px;align-items:center;margin-left:auto;padding:0 20px}.public-support-nav a{font-size:13px;color:var(--brand-dark,#244a54);font-weight:600}@media(max-width:700px){.public-support-nav{order:3;width:100%;padding:12px 0 0;justify-content:center;border-top:1px solid #e4ece8}.topbar:has(.public-support-nav){flex-wrap:wrap;height:auto}}

.public-support-nav{flex-wrap:wrap;gap:10px 18px;padding:0 12px}.topbar:has(.public-support-nav){height:auto;min-height:86px;padding-top:14px;padding-bottom:14px}.public-support-nav a{white-space:nowrap}@media(max-width:1050px){.topbar:has(.public-support-nav){flex-wrap:wrap}.topbar .public-support-nav{order:3;width:100%;justify-content:center;border-top:1px solid #e4ece8;padding-top:10px}.topbar .topbar-right{margin-left:auto}}

.public-plan-card{min-width:0}.public-plan-description{white-space:pre-line}.public-plan-fields{border:0;padding:0;margin:0;min-width:0}.public-plan-stock{font-size:12px;font-weight:600;color:#16856f;background:#e9f6f1;padding:8px 10px;border-radius:4px}.public-plan-stock.sold-out{color:#976016;background:#fff4df}.public-plan-fields .button{margin-top:16px}.public-order-configuration{font-size:12px;margin:12px 0}.public-order-configuration>div{display:flex;gap:12px;padding:4px 0}.public-order-configuration dt{font-weight:600}.public-order-configuration dd{margin:0;overflow-wrap:anywhere}

.shopping-cart-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:24px;align-items:start}.cart-product{overflow:hidden}.cart-product-heading{padding:24px 28px;background:var(--dark);color:#fff;border-top:5px solid var(--accent)}.cart-product-heading>span{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#c9e6dd}.cart-product-heading h2{font-size:25px;margin:5px 0;font-weight:800}.cart-product-heading p{color:#d9ece6;font-weight:600}.cart-product-body{padding:24px 28px}.cart-product-body>.public-order-configuration{margin:0 0 18px}.cart-product .public-order-configuration>div{align-items:start;justify-content:space-between;border-bottom:1px solid var(--line);padding:9px 0;gap:18px}.cart-product .public-order-configuration dt{font-size:12px;color:var(--ink)}.cart-product .public-order-configuration dd{font-size:13px;font-weight:650;color:var(--ink)}.cart-product-body>p{font-size:12px}.cart-product-body form{margin-top:22px}.cart-remove{color:#a3433b;border-color:#e5c7c3}.cart-summary{padding:24px;border-top:5px solid var(--accent);background:#fff}.cart-summary h2{font-size:20px;font-weight:800;color:var(--dark)}.cart-summary dl{margin:20px 0}.cart-summary dl>div{display:flex;justify-content:space-between;gap:18px;padding:9px 0;font-size:14px}.cart-summary dd{margin:0;font-weight:700;white-space:nowrap}.cart-summary .cart-subtotal{margin-top:12px;padding:17px 12px;border-radius:5px;background:var(--soft);color:var(--dark);font-weight:800}.cart-subtotal dd{font-size:23px;line-height:1.2}.cart-summary>p{font-size:12px;line-height:1.55}.cart-summary .cart-checkout{display:flex;justify-content:center;width:100%;margin-top:22px;padding:15px;font-size:14px;font-weight:800}.checkout-page .form-panel{padding:22px}.checkout-page .contact-fields{padding:0;border:0;margin-top:18px}.checkout-page .form-grid{gap:0 16px}.checkout-page label{margin:9px 0 4px}.checkout-page input,.checkout-page select{min-height:36px;padding:8px 10px}.checkout-page .settings-note{font-size:11px;margin:7px 0}.checkout-page .form-panel>p{margin:7px 0;font-size:12px}.checkout-page .contact-fields h2{font-size:16px;margin:13px 0 5px}.checkout-page .contact-fields>p{font-size:12px;margin:5px 0}.checkout-signin{border:1px solid #b8d9d0;background:var(--soft);border-radius:6px;margin:18px 0;padding:14px 16px}.checkout-signin summary{cursor:pointer;font-size:14px;color:var(--dark)}.checkout-signin summary>span{margin-left:8px;color:var(--accent-dark);font-weight:800}.checkout-signin>p{font-size:12px;margin:8px 0}.checkout-signin .button{margin:14px 12px 0 0}.checkout-signin form>a{font-size:12px;text-decoration:underline}.checkout-signin .notice{margin:10px 0;padding:9px 12px}@media(max-width:760px){.shopping-cart-grid{grid-template-columns:1fr;gap:16px}.cart-product-heading,.cart-product-body{padding:20px}.cart-summary{padding:20px}.checkout-page .form-panel{padding:17px}.checkout-page .form-grid{grid-template-columns:1fr}.checkout-signin summary>span{display:block;margin:5px 0 0}}

.cart-product-stack{display:grid;gap:18px;min-width:0}.cart-product-stack>.panel{margin:0}.checkout-top-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;font-weight:700;color:var(--accent-dark)}.checkout-item-summary{border:1px solid var(--line);border-radius:5px;padding:10px 12px;margin:8px 0;background:var(--soft)}.checkout-item-summary>div{display:flex;justify-content:space-between;gap:15px;font-size:13px}.checkout-item-summary .public-order-configuration{font-size:11px;margin:5px 0}.checkout-item-summary .public-order-configuration>div{padding:2px 0}.checkout-item-summary small{font-size:11px;color:var(--muted)}

/* Compact product rows keep each server's saved specifications beside its plan. */
.shopping-cart-page .shopping-cart-grid{gap:20px;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr)}
.shopping-cart-page .cart-product-stack{gap:12px}
.shopping-cart-page .cart-product-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top-width:4px}
.cart-plan-identity{min-width:0}.cart-plan-identity>span{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:#c9e6dd}
.shopping-cart-page .cart-product-heading h2{font-size:20px;line-height:1.25;margin:3px 0;overflow-wrap:anywhere}
.shopping-cart-page .cart-product-heading p{font-size:12px;line-height:1.4;margin:3px 0 0}
.cart-plan-resources{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 14px;margin:0;max-width:62%;font-size:11px;line-height:1.4}
.cart-plan-resources>div{display:flex;flex-direction:column;gap:2px;min-width:38px;padding:0;border:0}.cart-plan-resources dt{color:#c9e6dd;font-size:10px}.cart-plan-resources dd{margin:0;text-align:left;color:#fff;font-weight:750;font-size:13px;white-space:nowrap}
.shopping-cart-page .cart-product-body{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px}
.shopping-cart-page .cart-product-body>.public-order-configuration{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px 18px;margin:0}
.shopping-cart-page .cart-product .public-order-configuration>div{display:block;border:0;padding:0;min-width:0}
.shopping-cart-page .cart-product .public-order-configuration dt{font-size:10px;color:var(--muted)}
.shopping-cart-page .cart-product .public-order-configuration dd{font-size:12px;margin:2px 0 0;overflow-wrap:anywhere}
.shopping-cart-page .cart-product-body form{margin:0;flex-shrink:0}.shopping-cart-page .cart-remove{padding:7px 10px;font-size:11px;min-height:32px}
.checkout-item-summary .cart-plan-resources{max-width:none;justify-content:flex-start;gap:5px 15px;margin:7px 0;padding:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.checkout-item-summary .cart-plan-resources>div{flex-direction:row;align-items:baseline;gap:5px}.checkout-item-summary .cart-plan-resources dt{color:var(--muted)}.checkout-item-summary .cart-plan-resources dd{color:var(--ink);font-size:11px}
@media(max-width:900px){.shopping-cart-page .shopping-cart-grid{grid-template-columns:1fr}.cart-plan-resources{max-width:65%}}
@media(max-width:480px){.shopping-cart-page .cart-product-heading{align-items:flex-start;flex-wrap:wrap;gap:10px;padding:12px 14px}.cart-plan-resources{max-width:100%;justify-content:flex-start;gap:7px 14px}.shopping-cart-page .cart-product-body{align-items:flex-start;flex-wrap:wrap;padding:10px 14px}.shopping-cart-page .cart-product-body>.public-order-configuration{flex-basis:100%}.shopping-cart-page .cart-remove{margin-top:3px}}
.public-plan-purchase{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}.public-plan-purchase>strong{font-size:21px;color:var(--dark)}.public-plan-purchase small{font-size:11px;color:var(--muted);font-weight:500}.public-plan-unavailable{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 11px;border:1px solid #efcf99;border-radius:4px;background:#fff0d5;color:#854b0c;font-size:12px;font-weight:700;line-height:1.35;white-space:nowrap}
.plan-configure-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);align-items:start;gap:22px}.plan-configure-form .public-plan-fields{margin:0;padding:0;border:0}.plan-configure-form label{margin:12px 0 5px}.plan-configure-form .public-plan-fields>.button{margin-top:18px}.checkout-saved-billing{font-size:12px;margin:10px 0 20px}.checkout-saved-billing a{color:var(--accent-dark);text-decoration:underline;margin-left:6px}
@media(max-width:760px){.plan-configure-grid{grid-template-columns:1fr;gap:14px}.public-plan-purchase{flex-wrap:wrap}}
.checkout-payment-options{border:0;margin:14px 0;padding:0}.checkout-payment-options legend{font-size:14px;font-weight:750;color:var(--dark);margin-bottom:8px}.checkout-page .checkout-payment-choice{display:flex;align-items:center;gap:12px;padding:12px 14px;margin:7px 0;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}.checkout-payment-choice:has(input:checked){border-color:var(--accent);background:var(--soft);box-shadow:inset 3px 0 var(--accent)}.checkout-page .checkout-payment-choice input{width:16px;height:16px;min-height:0;padding:0;margin:0;accent-color:var(--accent);flex-shrink:0}.checkout-payment-choice>span{flex:1;min-width:0}.checkout-payment-choice strong{display:block;font-size:13px;color:var(--dark)}.checkout-payment-choice small{display:block;font-size:11px;color:var(--muted);margin-top:3px}.checkout-payment-choice>b{font-size:16px;white-space:nowrap;color:var(--dark)}.checkout-page .checkout-terms{margin:18px 0;align-items:flex-start;font-size:13px;line-height:1.6}.checkout-page .checkout-terms input{width:16px;height:16px;min-height:0;margin:2px 0 0;accent-color:var(--accent);flex-shrink:0}.checkout-terms a{color:var(--accent-dark);text-decoration:underline;font-weight:700}
.catalog-grid .public-plan-purchase{gap:8px;flex-wrap:wrap}.catalog-grid .public-plan-purchase>strong{display:flex;align-items:baseline;gap:4px;font-size:18px;white-space:nowrap}.catalog-grid .public-plan-purchase .button{font-size:11px;padding:10px 11px}

.public-plan-countries{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0 18px;font-size:12px;color:#526e70}.plan-country-flags{display:inline-flex;align-items:center;flex-wrap:wrap;gap:8px}.plan-country-flags img{display:block;width:24px;height:16px;object-fit:cover;border-radius:2px;box-shadow:0 0 0 1px #1b424b26}

.vps-readonly-frame{display:block;width:100%;height:720px;border:1px solid #d5e2ed;border-radius:5px;background:#fff;margin:14px 0}.vps-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.vps-panel-heading h2{margin:0}

.checkout-payment-choice .gateway-fee-description{display:none;margin-top:6px;line-height:1.5;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;white-space:pre-line;overflow-wrap:anywhere;color:var(--dark)}

.checkout-payment-choice:has(input:checked) .gateway-fee-description{display:block}

.customer-ticket-actions{gap:10px;flex-wrap:wrap}.customer-ticket-actions .ticket-close-form{margin:0;display:inline-flex}.ticket-close-hint{margin:9px 0 0;text-align:right;font-size:11px}.customer-ticket-actions .button svg{flex-shrink:0}

.vps-panel-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:12px 0}.vps-panel-toolbar form,.vps-panel-toolbar .service-form-actions{margin:0}.vps-panel-toolbar form button{margin:0}

/* Session controls remain visible in both navigation positions. */
.header-logout{display:inline-flex;align-items:center;gap:7px;color:#9d2635;background:#fff1f2;border:1px solid #e7b8bf;border-radius:6px;padding:8px 10px;font-weight:700;white-space:nowrap}
.header-logout svg{width:17px;height:17px}.header-logout:hover,.sidebar .logout:hover{background:#ffe0e5;color:#7e1b29}
.sidebar .logout{color:#9d2635;background:#fff1f2;border:1px solid #e7b8bf;margin-top:14px;flex-shrink:0}
.sidebar{overflow-y:auto}.sidebar-bottom{padding-top:24px;padding-bottom:20px}.invoice-payment{margin-top:24px;padding:20px;border:1px solid #9bcfc3;border-radius:8px;background:#edf8f5}.invoice-payment h2{margin-top:0}
@media(min-width:651px){.sidebar{position:sticky;top:0;align-self:start;height:calc(100dvh - 86px);box-sizing:border-box}.sidebar-bottom{flex-shrink:0}.account-name{white-space:nowrap}}
@media(min-width:651px) and (max-height:800px){.sidebar .help-box{display:none}}
@media(max-width:1350px){.topbar:has(.public-support-nav){flex-wrap:wrap}.topbar .public-support-nav{order:3;width:100%;justify-content:center;border-top:1px solid #e4ece8;padding-top:10px}.topbar .topbar-right{margin-left:auto}}
@media(max-width:720px){.header-logout{padding:7px}.header-logout span{font-size:11px}.topbar-right{flex-wrap:wrap;gap:8px}}

/* Readable, aligned preference controls in the customer account forms. */
.account-content .account-preference-choice {
    display:flex; align-items:flex-start; gap:12px; margin:0; padding:14px 16px;
    border:1px solid var(--line); border-radius:8px; background:var(--soft);
    color:var(--ink); font-size:15px; font-weight:600; line-height:1.45; cursor:pointer;
}
.account-content .account-preference-choice input[type="checkbox"] {
    display:inline-block; flex:0 0 20px; width:20px; height:20px; margin:1px 0 0; padding:0;
    accent-color:var(--accent-dark); cursor:pointer;
}
.account-content .account-preference-choice:focus-within { outline:2px solid var(--accent-dark); outline-offset:3px; }
.account-content .mailing-list-choice { margin-top:24px; padding:18px 20px; border-left:4px solid var(--accent-dark); }
.account-content .mailing-list-choice strong { display:block; font-size:15px; font-weight:700; }
.account-content .mailing-list-choice small { display:block; margin-top:4px; color:var(--muted); font-size:13px; font-weight:400; line-height:1.5; }
.notification-preferences { border:0; padding:0; margin:24px 0 16px; min-width:0; }
.notification-preferences legend { padding:0; margin-bottom:12px; color:var(--ink); font-size:17px; font-weight:700; }
.notification-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
@media(max-width:650px) { .notification-choices { grid-template-columns:1fr; } }

/* Compact customer forms: avoid adding a grid gap on top of label spacing. */
:where(body:not(.is-admin) .form-panel) .form-grid { row-gap:0; column-gap:20px; }
:where(body:not(.is-admin) .form-panel) label:not(:where(.check-label,.checkout-payment-choice)) { margin:12px 0 6px; }
.portal-return { display:inline-flex; align-items:center; gap:8px; min-height:40px; margin-bottom:20px; color:var(--accent-dark); font-size:14px; font-weight:700; }

.ticket-history-notice form { margin-top:14px; }

.phone-hint { display:block; margin-top:6px; color:var(--muted); font-size:12px; font-weight:400; line-height:1.5; }

/* Customer selects keep native keyboard behavior with an inset, crisp chevron. */
:where(body:not(.is-admin)) select:not([multiple]):not([size]) {
    appearance:none; -webkit-appearance:none; padding-right:42px;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23526961' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-position:right 14px center; background-size:16px 16px; background-repeat:no-repeat;
}
:where(body:not(.is-admin)) select:hover:not(:disabled) { border-color:var(--accent-dark); }
:where(body:not(.is-admin)) .sidebar { border-bottom:1px solid var(--line); border-radius:0 0 8px 8px; }
@media(forced-colors:active) { :where(body:not(.is-admin)) select:not([multiple]):not([size]) { appearance:auto; background-image:none; } }

.dashboard-service-card { margin:12px 20px; padding:18px; border:1px solid var(--line); border-radius:8px; color:var(--ink); transition:background .15s,border-color .15s; }
.dashboard-service-card:hover { background:var(--soft); border-color:var(--accent-dark); }
.dashboard-service-card:focus-visible { outline:2px solid var(--accent-dark); outline-offset:3px; }
.service-card-arrow { display:flex; flex-shrink:0; color:var(--accent-dark); }
.service-card-arrow svg { width:18px; height:18px; }
@media(max-width:650px) { .dashboard-service-card { position:relative; margin:12px; padding:16px; }.dashboard-service-card .service-card-arrow { position:absolute; right:16px; bottom:16px; } }

.language-picker a { display:inline-flex; align-items:center; gap:5px; white-space:nowrap; }
.language-flags { display:inline-block; font-size:13px; line-height:1; letter-spacing:-1px; }
@media(max-width:650px) { .topbar .topbar-right { max-width:100%; }.language-picker { gap:3px; }.language-picker a { gap:3px; }.language-flags { font-size:12px; } }

/* Share content tracks across each catalogue row, including translated stock messages. */
.catalog-grid .public-plan-card { display:grid; grid-template-rows:auto 1fr auto auto auto; row-gap:14px; margin-bottom:0; }
.catalog-grid .public-plan-card>h2 { grid-row:1; margin:0; }
.catalog-grid .public-plan-description { grid-row:2; margin:0; }
.catalog-grid .public-plan-stock { grid-row:3; display:flex; align-items:center; min-height:calc(3.3em + 16px); margin:0; line-height:1.65; }
.catalog-grid .public-plan-countries { grid-row:4; align-items:flex-start; align-self:start; margin:0; }
.catalog-grid .public-plan-countries>span:first-child { line-height:16px; white-space:nowrap; }
.catalog-grid .public-plan-purchase { grid-row:5; margin:0; align-self:end; min-height:42px; }
.catalog-grid .public-plan-unavailable { min-height:42px; }
@supports(grid-template-rows:subgrid) { .catalog-grid .public-plan-card { grid-template-rows:subgrid; grid-row:span 5; } }

/* Compact customer service screens keep the live overview before secondary billing facts. */
.native-vps-panel-compact { padding:18px 20px; }
.native-vps-panel-compact .native-panel-capabilities { margin:10px 0 12px; padding:10px 12px; border-left:3px solid var(--accent-dark); border-radius:5px; background:var(--soft); color:var(--ink); font-size:13px; font-weight:600; line-height:1.55; }
.native-vps-panel-compact .native-panel-launch { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; }
.native-vps-panel-compact .native-panel-launch .check-label { flex:1 1 360px; align-items:flex-start; gap:10px; margin:0; font-size:12px; line-height:1.5; }
.native-vps-panel-compact .check-label input { flex:0 0 18px; width:18px; height:18px; margin:0; }
.native-vps-panel-compact .native-panel-launch>.button { margin:0; }
.native-vps-panel-compact .settings-note { margin:8px 0 0; font-size:11px; line-height:1.5; }
.native-vps-panel-compact .notice { margin:10px 0 0; padding:10px 12px; }
.service-live-overview { padding:20px; }
.service-live-overview .form-actions { margin-top:10px; }
.service-secondary-details { gap:16px; align-items:start; margin-bottom:23px; }
.service-secondary-details>.panel { margin-bottom:0; padding:20px; }
.service-secondary-details .service-detail-list { margin:12px 0; }
.service-secondary-details .service-detail-list>div { padding:8px 0; font-size:12px; }
.service-cards-compact { grid-template-columns:repeat(auto-fill,minmax(min(330px,100%),1fr)); grid-auto-rows:1fr; gap:16px; align-items:stretch; }
.service-card-compact { display:flex; flex-direction:column; padding:18px; margin:0; }
.service-card-compact .service-card-top { gap:12px; margin-bottom:14px; }
.service-card-compact .service-symbol { width:34px; height:34px; }
.service-card-identity { flex:1; min-width:0; }
.service-card-identity h2 { margin:0; font-size:16px; }
.service-card-identity .hostname { margin:4px 0 0; overflow-wrap:anywhere; }
.service-card-compact dl { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-content:start; margin:0 0 14px; }
.service-card-footer { margin-top:auto; }
.service-card-compact dl>div { display:block; border:0; padding:9px 10px; border-radius:6px; background:var(--soft); }
.service-card-compact dt { font-size:11px; line-height:1.4; }
.service-card-compact dd { margin:3px 0 0; text-align:left; font-size:12px; font-weight:600; overflow-wrap:anywhere; }
@media(max-width:650px) { .native-vps-panel-compact,.service-live-overview { padding:16px; }.native-vps-panel-compact .native-panel-launch>.button { width:100%; justify-content:center; }.service-secondary-details>.panel { padding:16px; } }

.invoice-payment-layout { display:flex; align-items:center; justify-content:space-between; gap:20px 32px; }
.invoice-payment-copy { flex:1; min-width:0; }
.invoice-payment-copy h2 { margin:0 0 8px; }
.invoice-payment-copy .invoice-payment-method { margin:0 0 10px; font-size:14px; }
.invoice-payment-copy .invoice-payment-explanation { margin:0; max-width:680px; font-size:12px; line-height:1.6; }
.invoice-payment-action { flex-shrink:0; margin:0; }
.invoice-payment-action>.button { min-width:150px; min-height:46px; margin:0; padding:12px 22px; font-size:14px; }
@media(max-width:650px) { .invoice-payment-layout { align-items:stretch; flex-direction:column; gap:18px; }.invoice-payment-action>.button { width:100%; justify-content:center; } }

/* Local VM artwork adds color without changing service state or link behavior. */
.service-symbol.service-symbol-art { position:relative; isolation:isolate; width:76px; height:52px; border:0; border-radius:10px; overflow:hidden; background:var(--soft); }
.service-symbol-art>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.service-symbol-glyph { position:absolute; left:6px; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #ffffffcc; border-radius:8px; background:#fffffff0; color:var(--ink); box-shadow:0 1px 4px #244a5414; }
.service-symbol-glyph>svg { width:19px; height:19px; }
@media(max-width:650px) { .service-symbol.service-symbol-art { width:60px; height:44px; }.dashboard-service-card .service-renewal { padding-left:71px; }.service-symbol-glyph { left:4px; width:25px; height:25px; } }

/* Clear subscription state; live VM power remains a separate overview indicator. */
.service-status-badge { background:#f1f3f5; color:#53616b; border-color:#d9e0e5; flex-shrink:0; min-height:32px; padding:6px 12px; gap:8px; border:1px solid #d9e0e5; border-radius:7px; font-size:13px; font-weight:700; line-height:1.4; }
.service-status-badge>span { width:7px; height:7px; }
.service-status-badge.badge-active { color:#327146; background:#eaf6ec; border-color:#c9e5cf; }
.service-status-badge.badge-suspended,.service-status-badge.badge-pending { color:#805018; background:#fff4dc; border-color:#ecd49e; }
.service-status-badge.badge-disabled,.service-status-badge.badge-terminated,.service-status-badge.badge-cancelled { color:#a1353e; background:#fff0f1; border-color:#f1c5ca; }
.service-unavailable p { margin:12px 0 20px; }
.service-unavailable-note { margin:0 0 16px; color:var(--muted); }
@media(max-width:650px) { .service-card-compact .service-card-top { flex-wrap:wrap; }.service-status-badge { font-size:12px; min-height:30px; }.service-unavailable .form-actions { justify-content:flex-start; flex-wrap:wrap; } }

.invoice-method-selector { margin:0 0 22px; padding:0 0 20px; border-bottom:1px solid var(--line); }
.invoice-method-selector>label { display:block; margin-bottom:8px; font-size:13px; font-weight:700; }
.invoice-method-controls { display:flex; align-items:center; gap:12px; }
.invoice-method-controls select { flex:1; min-width:0; }
.invoice-method-controls .button { flex-shrink:0; }
.invoice-method-selector .settings-note { margin:10px 0 0; }
@media(max-width:650px) { .invoice-method-controls { align-items:stretch; flex-direction:column; }.invoice-method-controls .button { align-self:flex-end; } }

.invoice-method-selector[aria-busy="true"] select { pointer-events:none; opacity:.65; }
.invoice-method-selector[aria-busy="true"] [data-method-status] { color:var(--accent); font-weight:600; }

/* Customer invoice directory: clear hierarchy without oversized rows. */
.customer-invoice-table { min-width:760px; }
.customer-invoice-table th { padding:15px 20px; font-size:11px; font-weight:700; letter-spacing:.6px; color:#53685f; }
.customer-invoice-table td { padding:17px 20px; font-size:14px; line-height:1.5; vertical-align:middle; }
.customer-invoice-table tbody tr { transition:background .15s ease; }
.customer-invoice-table tbody tr:hover { background:var(--soft); }
.customer-invoice-table td:first-child { border-left:3px solid transparent; }
.customer-invoice-table .invoice-row-unpaid td:first-child { border-left-color:#e4c998; }
.customer-invoice-table .invoice-row-paid td:first-child { border-left-color:#2b9274; }
.invoice-number-link { color:#314d59; font-size:14px; font-weight:600; white-space:nowrap; }
.invoice-number-link:hover { text-decoration:underline; text-underline-offset:3px; }
.customer-invoice-table .invoice-description { max-width:440px; overflow-wrap:anywhere; }
.customer-invoice-table .invoice-due-date { white-space:nowrap; color:#405563; }
.customer-invoice-table .invoice-amount { white-space:nowrap; font-variant-numeric:tabular-nums; }
.customer-invoice-table .invoice-amount>strong { font-size:15px; font-weight:600; color:#263e49; }
.customer-invoice-table .invoice-amount small { display:block; margin-top:4px; font-size:12px; font-weight:600; color:#8b5311; }
.customer-invoice-table .badge { min-height:30px; padding:5px 10px; font-size:12px; font-weight:600; border:1px solid #dce3e2; color:#52616a; background:#f2f5f5; text-transform:capitalize; }
.customer-invoice-table .badge>span { width:6px; height:6px; }
.customer-invoice-table .badge-unpaid { color:#80571d; background:#fcf7ec; border-color:#e6d8ba; }
.customer-invoice-table .badge-paid { color:#17674e; background:#e9f7f0; border-color:#badfce; }
.customer-invoice-table .badge-refunded { color:#365f88; background:#edf4fc; border-color:#c7dbef; }
.customer-invoice-table .invoice-view-button { min-height:40px; padding:9px 14px; gap:9px; font-size:13px; font-weight:600; white-space:nowrap; color:#315f5a; background:#fff; border:1px solid #cededa; }
.customer-invoice-table .invoice-view-button:hover { color:var(--accent); background:var(--soft); border-color:var(--accent); }
.customer-invoice-table a:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
@media(max-width:650px) { .customer-invoice-table th,.customer-invoice-table td { padding:13px 14px; } }

/* Plan configuration: real saved choices, with native inputs and progressive enhancement. */
.configuration-choice-heading,.configuration-regions legend{font-size:13px;font-weight:700;color:var(--ink);margin:18px 0 10px}
.configuration-os-families{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.configuration-os-families[hidden]{display:none}
.public-plan-fields .configuration-os-family{display:flex;align-items:center;justify-content:flex-start;gap:9px;min-height:70px;padding:12px;margin:0;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:700;text-align:left;cursor:pointer;overflow-wrap:anywhere}
.configuration-os-family img{flex:0 0 30px}.public-plan-fields .configuration-os-family:hover{border-color:var(--accent)}.public-plan-fields .configuration-os-family[aria-pressed=true]{border-color:var(--accent-dark);background:var(--soft);box-shadow:inset 0 0 0 1px var(--accent-dark)}
.configuration-os-family:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.configuration-choice-help{font-size:12px;margin:10px 0;color:var(--muted)}
.configuration-regions{border:0;padding:0;margin:18px 0 0;min-width:0}.configuration-regions legend{padding:0;margin:0 0 10px}.configuration-region-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.plan-configure-form .configuration-region{display:flex;align-items:center;gap:10px;margin:0;padding:13px;border:1px solid var(--line);border-radius:8px;cursor:pointer;color:var(--ink);min-width:0}
.configuration-region input[type=radio]{width:18px;height:18px;min-width:18px;margin:0;accent-color:var(--accent-dark)}
.configuration-region-visual{display:flex;align-items:center;gap:11px;min-width:0}.configuration-region-visual img{flex:0 0 36px;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px #20374315}.configuration-region-visual strong{display:block;font-size:13px;line-height:1.4;overflow-wrap:anywhere}.configuration-region-visual small{display:block;font-size:12px;color:var(--muted);margin-top:3px}.configuration-region-globe{font-size:30px;color:var(--accent-dark)}
.configuration-region:has(input:checked){background:var(--soft);border-color:var(--accent-dark);box-shadow:inset 0 0 0 1px var(--accent-dark)}.configuration-region:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
@media(min-width:1100px){.plan-configure-grid{grid-template-columns:minmax(250px,.75fr) minmax(0,1.4fr)}}
@media(max-width:480px){.configuration-os-families{grid-template-columns:repeat(2,minmax(0,1fr))}.configuration-region-grid{grid-template-columns:1fr}}

/* Compact customer invoice; the only payment action starts a checkout. */
.invoice-link-unavailable{max-width:640px;margin:40px auto;padding:32px}.invoice-link-unavailable h1{font-size:28px;line-height:1.2;letter-spacing:-.6px}.invoice-link-unavailable p{margin:16px 0 24px;font-size:15px;line-height:1.6;color:var(--muted)}
.invoice-link-symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin-bottom:20px;border-radius:12px;background:var(--soft);color:var(--accent)}.invoice-link-symbol svg{width:25px;height:25px}
@media(max-width:650px){.invoice-link-unavailable{margin:16px auto;padding:24px}.invoice-link-unavailable h1{font-size:25px}.invoice-link-unavailable>.button{width:100%;justify-content:center}}
.invoice-page-heading{margin-bottom:22px}.invoice-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.invoice-status .badge{font-size:13px;font-weight:750;min-height:34px;display:inline-flex;align-items:center;padding:6px 13px;gap:6px}
.invoice-status .badge-unpaid{color:#79520e;background:#fff3d6;border:1px solid #ead49e}.invoice-status .badge-paid{color:#276d43;background:#e9f6ed;border:1px solid #b6d9c1}
.customer-invoice-paper{padding:24px}.customer-invoice-paper .invoice-identity{padding-bottom:20px;gap:24px;font-size:12px;line-height:1.5}
.customer-invoice-paper .invoice-identity>div:first-child{flex:1}.customer-invoice-paper .invoice-identity>div:nth-child(2){flex:1}.customer-invoice-paper .invoice-identity>div:last-child{flex:0 0 auto}
.customer-invoice-paper .invoice-identity img{max-width:165px;max-height:42px;width:auto;height:auto;margin-bottom:8px}.customer-invoice-paper .invoice-identity strong{font-size:13px;margin-top:3px}.customer-invoice-paper .invoice-identity .message-body{margin:8px 0 0;font-size:12px;line-height:1.5}
.customer-invoice-paper table th{padding:10px 16px}.customer-invoice-paper table td{padding:13px 16px;font-size:13px}.customer-invoice-paper .invoice-total{align-items:center;gap:24px;padding:16px;color:var(--muted)}.customer-invoice-paper .invoice-total strong{font-size:23px}
.customer-invoice-paper .invoice-payment{margin-top:10px;padding:18px}.customer-invoice-paper .invoice-method-selector{margin-bottom:15px;padding-bottom:15px}.customer-invoice-paper .invoice-method-selector .settings-note{margin-top:7px}.customer-invoice-paper .invoice-payment-copy h2{margin-bottom:5px}.customer-invoice-paper .invoice-payment-method{margin-bottom:6px}
@media(max-width:650px){.customer-invoice-paper{padding:16px}.customer-invoice-paper .invoice-identity{flex-wrap:wrap;gap:16px}.customer-invoice-paper .invoice-identity>div{min-width:140px}.customer-invoice-paper .invoice-payment{padding:14px}.customer-invoice-paper .invoice-payment-layout{gap:14px}}


/* Customer catalog categories inherit the existing admin plan groups. */
.plan-categories{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px}
.plan-category-link{display:inline-flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:9px;background:white;color:var(--ink);font-size:14px;font-weight:700;overflow-wrap:anywhere}
.plan-category-link:hover{border-color:var(--accent-dark);color:var(--accent-dark)}.plan-category-link.selected{border-color:var(--accent-dark);background:var(--soft);color:var(--accent-dark);box-shadow:inset 0 0 0 1px var(--accent-dark)}
.plan-category-count{display:inline-flex;align-items:center;justify-content:center;min-width:27px;min-height:27px;padding:2px 7px;border-radius:20px;background:var(--surface);font-size:12px;flex-shrink:0;font-variant-numeric:tabular-nums}
.plan-category-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px}.plan-category-heading .eyebrow{margin-bottom:4px}.plan-category-heading h2{font-size:22px;overflow-wrap:anywhere}.plan-category-heading>span{font-size:12px;color:var(--muted);white-space:nowrap}
@media(max-width:480px){.plan-categories{gap:8px}.plan-category-link{padding:10px 12px;flex:1 1 100%;justify-content:space-between}.plan-category-heading h2{font-size:20px}}

.checkout-promo{border:1px solid #b9dacf;border-radius:8px;padding:14px 16px;margin:18px 0;background:#f1faf6}.checkout-promo-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.checkout-promo-controls input{flex:1;min-width:150px;max-width:320px}.checkout-promo-controls .button{white-space:nowrap}.promo-saving{color:#09755b;margin-bottom:0}

.checkout-promo-forms{display:flex;align-items:flex-end;gap:8px;flex-wrap:wrap}.checkout-promo-forms form{margin:0}.checkout-promo-forms>form:first-child{flex:1;max-width:440px}

/* Keep configuration errors beside the field without losing the customer’s selections. */
.invoice-method-selector [data-method-status]:empty{display:none}
.plan-configure-form input[aria-invalid="true"]{border-color:#c33d3d;background:#fff8f8;box-shadow:0 0 0 1px #c33d3d}.configuration-field-error{color:#ad3030;font-size:13px;line-height:1.5;margin:6px 0 12px}

.registration-guidance{margin:0 0 18px;font-size:14px}.registration-requirement{display:inline-block;margin-left:5px;font-weight:600;font-size:11px;color:var(--muted)}.registration-requirement.is-required{color:var(--accent-dark)}
.registration-fields input[aria-invalid="true"],.registration-fields select[aria-invalid="true"]{border-color:#c33d3d;background-color:#fff8f8;box-shadow:0 0 0 1px #c33d3d}.registration-field-error{display:block;font-size:13px;line-height:1.5;color:#ad3030;margin:6px 0 0}.registration-field-error[hidden]{display:none}

/* Readable recent customer records without enlarging staff or other compact badges. */
.dashboard-recent-records .panel-heading h2 { font-size:16px; }
.dashboard-recent-records .panel-heading>a { font-size:13px; font-weight:600; color:var(--accent); }
.dashboard-recent-records .mini-row { gap:14px; min-height:104px; }
.dashboard-recent-records .mini-row:hover { background:var(--soft); }
.dashboard-recent-records .mini-row:focus-visible { outline:3px solid var(--accent); outline-offset:-3px; background:var(--soft); }
.dashboard-recent-records .small-symbol { color:var(--accent); background:var(--soft); border-radius:8px; padding:9px; }
.dashboard-recent-records .small-symbol svg { display:block; width:22px; height:22px; }
.dashboard-recent-records .mini-identity strong { font-size:15px; font-weight:650; white-space:normal; overflow-wrap:anywhere; }
.dashboard-recent-records .mini-identity small { font-size:12px; color:#596e76; margin-top:5px; overflow-wrap:anywhere; }
.dashboard-recent-records .mini-value>strong { font-size:18px; font-weight:650; font-variant-numeric:tabular-nums; }
.dashboard-recent-records .mini-value>small { display:block; font-size:12px; color:#665333; margin-bottom:4px; }
.record-status { display:inline-flex; align-items:center; gap:7px; min-height:34px; padding:6px 10px; border:1px solid #ced7dc; border-radius:6px; font-size:13px; font-weight:650; line-height:1.4; background:#f0f3f5; color:#4a5964; }
.record-status>span { flex:0 0 6px; width:6px; height:6px; border-radius:50%; background:currentColor; }
.record-status-unpaid,.record-status-new { color:#805018; background:#fff4dc; border-color:#e7ce9a; }
.record-status-paid { color:#17674e; background:#e9f7f0; border-color:#badfce; }
.record-status-open,.record-status-customer_reply { color:#225d91; background:#eaf3ff; border-color:#bcd4ef; }
.record-status-answered { color:#654392; background:#f4edff; border-color:#d5c4eb; }
.invoice-line-details { line-height:1.55; overflow-wrap:anywhere; }
.invoice-line-label { color:#536773; }
/* A single native link stretches across the row, retaining keyboard and new-tab behavior. */
.customer-ticket-row { position:relative; }
.customer-ticket-row .ticket-subject::after { content:""; position:absolute; inset:0; z-index:1; cursor:pointer; }
.customer-ticket-row:hover { background:var(--soft); }
.customer-ticket-row:focus-within { outline:2px solid var(--accent); outline-offset:-2px; background:var(--soft); }
.customer-ticket-row .ticket-subject:focus-visible { outline:none; text-decoration:underline; }
.customer-ticket-table th { white-space:nowrap; }
.customer-invoice-search { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; padding:18px 20px; border-bottom:1px solid var(--line); }
.customer-invoice-search .invoice-search-field { flex:1 1 240px; max-width:520px; }
.customer-invoice-search label { display:block; margin:0 0 6px; font-size:13px; }
.customer-invoice-search input { margin:0; }
.customer-invoice-search .button { flex-shrink:0; }
@media(max-width:1150px) { .dashboard-recent-records { grid-template-columns:1fr; } }
@media(max-width:650px) {
 .dashboard-recent-records .mini-row { display:grid; grid-template-columns:40px minmax(0,1fr); gap:10px 12px; }
 .dashboard-recent-records .mini-value,.dashboard-recent-records .mini-row>.record-status { grid-column:2; justify-self:start; text-align:left; }
 .dashboard-recent-records .mini-value { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
 .dashboard-recent-records .mini-value>strong { margin:0; }
 .customer-invoice-search { padding:15px; }
}

/* Request-only OS/IP identity, loaded independently of the customer record lists. */
.service-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 16px;margin:0 0 14px;min-width:0}
.service-summary .service-summary-label{display:block;color:var(--muted);font-size:11px;line-height:1.4;margin:0 0 5px;font-weight:400}
.service-summary .service-summary-os{display:flex;align-items:center;gap:8px;color:var(--ink);font-size:12px;font-weight:600;line-height:1.5;margin:0}
.service-summary-os img{flex:0 0 24px;object-fit:contain}
.service-summary .service-summary-os>span{margin:0;font:inherit;color:inherit}
.service-summary code{display:block;font-size:11px;line-height:1.6;overflow-wrap:anywhere;color:var(--ink)}
.service-summary .service-summary-status{grid-column:1/-1;margin:0;font-size:11px;color:var(--muted)}
.service-live-identity{min-width:0}
.service-live-identity .service-summary{margin:0;grid-template-columns:1fr;gap:7px}
@media(max-width:420px){.service-summary{grid-template-columns:1fr}}
@media(min-width:1181px){.dashboard-service-card .service-identity{flex:0 1 160px;min-width:140px;overflow-wrap:anywhere}}
@media(max-width:1180px){.dashboard-service-card{flex-wrap:wrap}.dashboard-service-card .service-live-identity{display:block;order:5;flex:1 0 100%;padding-left:91px}}
@media(max-width:650px){.dashboard-service-card .service-live-identity{padding-left:71px}}
.service-live-identity .service-summary-system{display:flex;align-items:center;flex-wrap:wrap;gap:5px 10px}
.service-live-identity .service-summary-label{margin:0}
.service-live-identity [data-summary-ips]{display:flex;flex-wrap:wrap;gap:2px 12px}
.dashboard-service-card>.service-status-badge{margin-left:auto}
.service-summary [hidden]{display:none!important}

@media(max-width:650px){.dashboard-service-card.service-inactive{padding-bottom:44px}}

.catalog-support-links{margin:24px 0 0}
.dashboard-service-card{position:relative}
.service-card-link::after{content:'';position:absolute;inset:0;border-radius:8px;z-index:1}
.service-card-link:focus-visible{outline:0}
.service-card-link:focus-visible::after{outline:2px solid var(--accent-dark);outline-offset:3px}
.service-summary .service-ip{display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:0;vertical-align:middle}
.service-ip code{min-width:0;position:relative;z-index:2;cursor:text}
.service-summary .service-ip-copy{position:relative;z-index:2;display:inline-flex;align-items:center;justify-content:center;flex:0 0 28px;width:28px;height:28px;padding:5px;border:1px solid var(--line);border-radius:5px;background:#fff;color:var(--accent-dark);cursor:pointer}
.service-ip-copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.service-ip-copy:hover,.service-ip-copy.is-copied{border-color:var(--accent-dark);background:var(--soft)}
.service-summary [data-summary-ips]{display:flex;flex-direction:column;align-items:flex-start;gap:3px}
.service-live-identity [data-summary-ips]{flex-direction:column;gap:3px}
.clipboard-selection{position:fixed;left:-9999px;top:0}

.customer-login-fields>.button{margin-top:24px}
.customer-login-fields>.captcha-block{margin:20px 0}
.customer-login-fields>.captcha-block+.button{margin-top:0}