: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; }
.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-fit,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{font-size:12px;color:var(--muted)}
.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}