/* CoreInto client area and public pages: a two-level header (strip and
   masthead), a storefront with a hero, cards for products and plans, and an
   account area with a sidebar. Status colours are the same as the admin area. */
body.client { --head: #1f3b63; --head-ink: #ffffff; --band: #eef2f7; --band-ink: #2b3a4e; --label: #f4f6f9;
  --st-green: #1f9d55; --st-teal: #0d8f86; --st-amber: #d97706; --st-orange: #e05d1a; --st-red: #c62828;
  --st-blue: #2f7fc1; --st-purple: #7c3aed; --st-slate: #475569; --st-grey: #6b7280; }
:root[data-theme="dark"] body.client { --head: #152a47; --band: #1a2637; --band-ink: #cbd5e1; --label: #16202e; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.client { --head: #152a47; --band: #1a2637; --band-ink: #cbd5e1; --label: #16202e; } }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------- header */
.strip { background: var(--bar); color: var(--bar-ink); font-size: .88em; }
.strip-in { display: flex; justify-content: space-between; align-items: center; gap: 14px; min-height: 36px; }
.strip-left, .strip-right { display: flex; align-items: center; gap: 14px; }
.strip a { color: var(--bar-ink); display: inline-flex; align-items: center; gap: 5px; }
.strip a:hover { color: #fff; }
.strip .ico { width: 15px; height: 15px; }
.strip .icon-btn { color: var(--bar-ink); width: 30px; height: 30px; }
.strip .menu { height: 36px; display: flex; }
.strip .menu-btn { padding: 0 4px; color: var(--bar-ink); height: 36px; }
.strip .alerts .menu-btn { position: relative; }
.strip .count { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .78em; font-weight: 700; align-items: center; justify-content: center; }
.strip .alerts .count { position: absolute; top: 1px; right: -4px; background: var(--st-red); color: #fff; }
.alerts-drop { min-width: 280px; }
.alerts-drop a { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.alerts-drop b { min-width: 24px; text-align: center; border-radius: 10px; padding: 0 7px; background: var(--surface-2); color: var(--muted); font-weight: 600; }
.alerts-drop b.on { background: var(--st-red); color: #fff; }
.alerts-drop .pad-sm { padding: 8px 16px; }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 700; }
.avatar.big { width: 56px; height: 56px; font-size: 1.3rem; margin-bottom: 8px; }
.masthead { background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(0, 0, 0, .03); position: sticky; top: 0; z-index: 30; }
.masthead-in { display: flex; align-items: stretch; min-height: 68px; gap: 16px; }
.masthead .brand { display: flex; align-items: center; color: var(--ink); font-size: 1.4rem; font-weight: 700; }
.masthead .brand:hover { text-decoration: none; }
.logo-img { max-height: 44px; width: auto; }
.masthead .menus { margin-left: auto; display: flex; align-items: stretch; }
.masthead .menus > ul { display: flex; align-items: stretch; }
.masthead .menu-btn, .masthead .menu-link { color: var(--ink); font-weight: 500; font-size: .95rem; padding: 0 13px; gap: 7px; }
.masthead .menu-btn .ico:first-child, .masthead .menu-link .ico { width: 17px; height: 17px; color: var(--muted); }
.masthead .menu:hover > .menu-btn, .masthead .menu:hover > .menu-link, .masthead .menu.current > .menu-btn, .masthead .menu.current > .menu-link { color: var(--accent); text-decoration: none; }
.masthead .menu.current > .menu-btn, .masthead .menu.current > .menu-link { box-shadow: inset 0 -3px 0 var(--accent); }
.masthead-cta { display: flex; align-items: center; }
.nav-toggle { display: none; margin-left: auto; align-self: center; }
.staffbar { background: var(--warn-soft); color: var(--warn); text-align: center; padding: 6px; font-size: .9em; }
.verifybar { background: var(--accent-soft); color: var(--ink); text-align: center; padding: 8px 16px; font-size: .92em; }
.verifybar form { margin: 0; }
.page { padding-top: 22px; padding-bottom: 40px; min-height: 60vh; }

/* ---------------------------------------------------------------- account layout */
.page.acct { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.acct-side { display: grid; gap: 12px; position: sticky; top: 84px; }
.acct-side-toggle { display: none; }
.acct-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.acct-card strong { font-size: 1.05rem; }
.acct-card small { color: var(--muted); }
.acct-credit { display: flex; justify-content: space-between; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius); background: var(--accent-soft); font-size: .9em; }
.sb-block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.sb-head { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; background: var(--band); color: var(--band-ink); font-size: .9rem; font-weight: 600; border-bottom: 1px solid var(--line); }
.sb-head .ico { width: 16px; height: 16px; color: var(--muted); }
.sb-links { list-style: none; margin: 0; padding: 6px 0; }
.sb-links a { display: flex; align-items: center; gap: 9px; padding: 6px 14px; color: var(--ink); }
.sb-links a .ico { width: 16px; height: 16px; color: var(--muted); }
.sb-links a:hover { background: var(--accent-soft); text-decoration: none; }
.sb-links a.on { color: var(--accent); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); background: var(--surface-2); }
.sb-count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--st-red); color: #fff; font-size: .75em; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.sb-count.warn { background: var(--st-amber); }
.sb-body { padding: 10px 14px; }
.acct-main { min-width: 0; }

/* ---------------------------------------------------------------- cards, tables, badges */
.card > h2:first-child, .card > .card-head { margin: -18px -20px 14px; padding: 9px 20px; background: var(--band); color: var(--band-ink); font-size: 1rem; border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.card-head h2 { margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; font-size: 1rem; }
.card.flush { padding: 0; }
.card.flush > h2:first-child, .card.flush > .card-head { margin: 0; }
.grid2 > *, .grid3 > * { min-width: 0; }
.grid2 .table td a, .grid2 .table td small { overflow-wrap: anywhere; }
.grid2 .table .badge { font-size: .7em; }
.card.flush .table th:first-child, .card.flush .table td:first-child { padding-left: 20px; }
.card.flush .table th:last-child, .card.flush .table td:last-child { padding-right: 20px; }
.pad { padding: 14px 20px; margin: 0; }
.card.plain-head > h2:first-child { background: none; border: 0; margin: 0 0 10px; padding: 0; font-size: 1.1rem; }
.table thead th { background: var(--band); color: var(--band-ink); font-size: .8em; }
.table tbody tr:hover { background: var(--accent-soft); }
.table .row-actions { white-space: nowrap; text-align: right; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 3px; font-size: .78em; font-weight: 600; background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; }
.badge.good { background: var(--good-soft); color: var(--good); border-color: transparent; }
.badge.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.badge.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.badge[class*="st-"] { color: #fff; border-color: transparent; }
.st-green { background: var(--st-green); } .st-teal { background: var(--st-teal); } .st-amber { background: var(--st-amber); }
.st-orange { background: var(--st-orange); } .st-red { background: var(--st-red); } .st-blue { background: var(--st-blue); }
.st-purple { background: var(--st-purple); } .st-slate { background: var(--st-slate); } .st-grey { background: var(--st-grey); }
.facts { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.facts dt { background: var(--label); color: var(--muted); padding: 7px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.facts dd { margin: 0; padding: 7px 12px; border-bottom: 1px solid var(--line); word-break: break-word; min-width: 0; }
.facts dt:nth-last-of-type(1), .facts dd:last-of-type { border-bottom: 0; }
.facts.plain { border: 0; }
.facts.plain dt, .facts.plain dd { background: none; border: 0; padding: 3px 10px 3px 0; }
.kv { width: 100%; border-collapse: collapse; }
.kv th { text-align: left; width: 36%; background: var(--label); color: var(--muted); font-weight: 500; padding: 7px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.kv td { padding: 7px 12px; border-bottom: 1px solid var(--line); }
.kv tr:last-child th, .kv tr:last-child td { border-bottom: 0; }
.yesno { font-weight: 600; } .yesno.yes { color: var(--st-green); } .yesno.no { color: var(--st-red); }
.btn-success { background: var(--st-green); border-color: var(--st-green); color: #fff; }
.btn-sm { min-height: 30px; padding: 0 10px; font-size: .9em; }
.btn .ico { width: 16px; height: 16px; }
form.inline { display: inline; }
.right { text-align: right !important; }
.center { text-align: center; }
.lead { font-size: 1.05rem; color: var(--muted); margin-top: -6px; }
.crumbs { font-size: .9em; color: var(--muted); margin: 0 0 6px; }
.row-split.top { align-items: center; margin-top: 0; }
.row-split.top .page-title { margin: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.page-head .page-title { margin: 0; }
.page-title .badge { vertical-align: middle; font-size: .5em; }
input.switch { appearance: none; -webkit-appearance: none; width: 42px; height: 24px; margin: 0; border-radius: 12px; background: var(--st-grey); border: 0; position: relative; cursor: pointer; flex: none; transition: background .15s; }
input.switch::before { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; }
input.switch:checked { background: var(--st-green); }
input.switch:checked::before { left: 21px; }
.check input.switch { margin-top: 0; }
.notice-list { display: grid; gap: 8px; margin-bottom: 16px; }
.notice { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--radius); border: 1px solid; }
.notice .ico { width: 20px; height: 20px; flex: none; }
.notice span { flex: 1; }
.notice.bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); color: var(--bad); }
.notice.warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--warn); }
.notice.info { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); color: var(--ink); }

/* ---------------------------------------------------------------- stat tiles, shortcuts */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat { display: flex; align-items: stretch; border-radius: var(--radius); overflow: hidden; color: #fff; box-shadow: var(--shadow); min-height: 72px; }
.stat:hover { text-decoration: none; filter: brightness(1.05); }
.stat .stat-ico { display: flex; align-items: center; justify-content: center; width: 64px; flex: none; background: rgba(0, 0, 0, .18); }
.stat .stat-ico .ico { width: 30px; height: 30px; }
.stat .stat-body { display: flex; flex-direction: column; justify-content: center; padding: 8px 14px; min-width: 0; }
.stat .num { font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.stat .stat-body small { opacity: .92; }
.stat-green { background: var(--st-green); } .stat-amber { background: var(--st-amber); } .stat-red { background: var(--st-red); }
.stat-blue { background: var(--st-blue); } .stat-grey { background: var(--st-slate); } .stat-teal { background: var(--st-teal); } .stat-purple { background: var(--st-purple); }
.shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.shortcut { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); text-align: center; font-size: .9em; }
.shortcut:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.shortcut .ico { width: 26px; height: 26px; color: var(--accent); }
.welcome { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.welcome h1 { margin: 0; }
.welcome p { margin: 0; color: var(--muted); }
.mini-list { list-style: none; margin: 0; padding: 0; }
.mini-list li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dotted var(--line); }
.mini-list li:last-child { border-bottom: 0; }
.mini-list .when { color: var(--muted); white-space: nowrap; font-size: .9em; }
.mini-list a { font-weight: 500; }

/* ---------------------------------------------------------------- storefront */
.hero { background: linear-gradient(135deg, var(--bar) 0%, var(--bar-2) 70%, #1b4d6b 100%); color: var(--bar-ink); border-radius: 10px; padding: 44px 36px 40px; margin-bottom: 0; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: rgba(255, 255, 255, .05); }
.hero h1 { font-size: 2rem; margin-bottom: 4px; }
.hero p { color: var(--bar-muted); max-width: 640px; }
.domain-search { display: flex; gap: 0; margin-top: 18px; max-width: 760px; position: relative; z-index: 1; }
.domain-search input { border-radius: var(--radius) 0 0 var(--radius); min-height: 50px; font-size: 1.05rem; border: 0; }
.domain-search .btn { border-radius: 0; min-height: 50px; padding: 0 22px; }
.domain-search .btn:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.domain-search .btn-light { margin-left: 10px; border-radius: var(--radius) !important; }
.domain-search.compact input, .domain-search.compact .btn { min-height: var(--ctl-h); font-size: 1em; }
.domain-search.compact input { border: 1px solid var(--line); }
.quick { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--bar-2); color: var(--bar-ink); border-radius: 0 0 10px 10px; margin: -6px 0 28px; overflow: hidden; }
.quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 8px; color: var(--bar-ink); font-weight: 600; text-transform: uppercase; font-size: .8rem; border-left: 1px solid rgba(255, 255, 255, .08); }
.quick a:first-child { border-left: 0; }
.quick a:hover { background: rgba(255, 255, 255, .06); text-decoration: none; }
.quick .ico { width: 24px; height: 24px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 26px 0 12px; }
.section-head h2 { margin: 0; font-size: 1.35rem; }
.section-head a { font-size: .95em; }
.group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.group-card { display: flex; flex-direction: column; gap: 8px; color: var(--ink); margin: 0; }
.group-card:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 6px 20px rgba(16, 30, 54, .1); }
.group-card .ico { width: 36px; height: 36px; color: var(--accent); }
.group-card h3 { margin: 0; font-size: 1.15rem; }
.group-card .from { margin-top: auto; }
.group-card .from strong { font-size: 1.4rem; }
.group-card .from small { color: var(--muted); }
.group-card .features { font-size: .92em; color: var(--muted); }
.group-card .more { color: var(--accent); font-weight: 500; }
.tld-table td.price { white-space: nowrap; }
.tld-table .tld { font-weight: 700; font-size: 1.05em; }
.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.trust-item { display: flex; gap: 12px; align-items: flex-start; }
.trust-item .ico { width: 32px; height: 32px; color: var(--accent); flex: none; }
.trust-item strong { display: block; margin-bottom: 2px; }
.trust-item span { color: var(--muted); font-size: .95em; }
.gateway-list { display: flex; flex-wrap: wrap; gap: 6px; }
.gateway-list span { padding: 3px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .9em; }
.news-item { padding: 10px 0; border-bottom: 1px dotted var(--line); }
.news-item:last-child { border-bottom: 0; }
.news-item small { color: var(--muted); display: block; }
.news-item p { margin: 4px 0 0; color: var(--muted); }
.prodgroup { color: var(--ink); display: block; }
.prodgroup:hover { border-color: var(--accent); text-decoration: none; }
.prodgroup .more { color: var(--accent); font-weight: 500; }
.choices { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.choice { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.choice:hover { border-color: var(--accent); }
.choice small { display: block; color: var(--muted); }
.choice input { flex: none; width: auto; min-height: 0; }
.choice > span { flex: 1; }
.store-domains { margin-top: 24px; }
.plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.plan { margin: 0; position: relative; overflow: hidden; }
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: var(--ink); color: #fff; }
.plan-head h2 { margin: 0; font-size: 1.15rem; color: #fff; background: none !important; border: 0 !important; padding: 0 !important; }
.plan-stock { font-size: .82em; opacity: .8; white-space: nowrap; }
.plan .most { font-size: .72em; }
.plan-body { display: grid; grid-template-columns: minmax(0, 1fr) 172px; }
.plan-specs { padding: 14px 18px; min-width: 0; }
.plan-specs .tagline { margin: 0 0 8px; }
.spec { list-style: none; margin: 0; padding: 0; }
.spec li { padding: 6px 0; border-bottom: 1px dashed var(--line); line-height: 1.35; }
.spec li:last-child { border-bottom: 0; }
.spec li strong { font-weight: 600; }
.spec li span { color: var(--muted); margin-left: 4px; }
.plan-buy { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; text-align: center; padding: 18px 14px; background: var(--surface-2); border-left: 1px solid var(--line); }
.plan-buy .amount { font-size: 1.35rem; line-height: 1.15; white-space: nowrap; }
.plan-buy .btn { white-space: nowrap; }
.plan-buy .per { color: var(--muted); }
.plan-buy .hint { color: var(--accent); font-weight: 500; }
.plan-buy .btn { margin-top: 10px; }
.plan-buy .btn-block { width: 100%; }
.store-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.store-side { display: grid; gap: 12px; position: sticky; top: 84px; }
.store-main { min-width: 0; }
.store-main > .card:first-of-type { margin-top: 0; }
@media (max-width: 900px) { .store-layout { grid-template-columns: 1fr; } .store-side { position: static; } .plans { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .plan-body { grid-template-columns: 1fr; } .plan-buy { border-left: 0; border-top: 1px solid var(--line); } }
.features { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.features li { display: flex; gap: 6px; align-items: flex-start; }
.features .ico { width: 16px; height: 16px; color: var(--good); flex: none; margin-top: 3px; }
.group-features { margin-top: 22px; }
.group-features .features { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.configure, .cart { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.cfg-main > .card, .cart > div > .card { margin-top: 0; }
.sticky { position: sticky; top: 84px; }
.inline-ctl { display: flex; gap: 8px; }
.inline-ctl input { flex: 1; min-width: 0; width: 100%; }
.inline-ctl select { width: auto; }
.inline-ctl > * { width: auto; }
.field .label { display: block; font-weight: 600; margin-bottom: 4px; }
.terms .choice strong { font-size: 1.05rem; }
.cart-item .remove .linklike, .cart .row-split .linklike { color: var(--muted); text-decoration: underline; }
.cart-item .remove .linklike:hover, .cart .row-split .linklike:hover { color: var(--bad); }
.cart-side .card { margin-top: 0; }
.cart-side .card + .card { margin-top: 16px; }
.cart-item { border-bottom: 1px solid var(--line); padding: 12px 20px; }
.cart-item:last-of-type { border-bottom: 0; }
.cart-line { display: flex; justify-content: space-between; gap: 16px; }
.cart-line.sub { margin-top: 8px; padding-left: 14px; border-left: 2px solid var(--line); }
.cart-line small { display: block; color: var(--muted); }
.cart-line .amt { text-align: right; white-space: nowrap; }
.cart-item .remove { margin: 6px 0 0; }
.totals { margin: 0 0 12px; }
.totals > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.totals dt { color: var(--muted); }
.totals dd { margin: 0; font-weight: 600; }
.totals .grand { border-bottom: 0; font-size: 1.15rem; }
.totals .grand dt { color: var(--ink); font-weight: 600; }
.center-box { text-align: center; padding: 36px 20px; }
.big-tick { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--good-soft); color: var(--good); align-items: center; justify-content: center; }
.big-tick .ico { width: 34px; height: 34px; }
.domain-result h2 { font-size: 1.4rem; }
[hidden] { display: none !important; }
.stack + .form-grid { margin-top: 14px; }
.recommend { margin-top: 28px; }
.recommend-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.recommend-item { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.recommend-item:hover { border-color: var(--accent); }
.recommend-item .price { font-weight: 600; margin-top: 6px; }
.spotlight { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 14px 0; }
.spot { display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: inherit; }
a.spot:hover { border-color: var(--accent); }
.table .tick { width: 32px; }
.pay-instructions { margin-top: 14px; padding: 12px; border-radius: 8px; background: var(--surface-2); } .pay-instructions h3 { margin: 0 0 6px; font-size: 1em; }
.article, .msg-text { overflow-wrap: anywhere; line-height: 1.6; }
.article pre, .msg-text pre { white-space: pre-wrap; background: var(--surface-2); padding: 10px; border-radius: var(--radius); }
.article code, .msg-text code { background: var(--surface-2); padding: 1px 4px; border-radius: 4px; }
.article blockquote, .msg-text blockquote { border-left: 3px solid var(--line); margin: 0; padding-left: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- tickets */
.msg { display: grid; grid-template-columns: 170px minmax(0, 1fr); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; background: var(--surface); }
.msg .who { padding: 12px; background: var(--surface-2); border-right: 1px solid var(--line); }
.msg .who strong { display: block; }
.msg .who small { display: block; color: var(--muted); word-break: break-all; }
.msg .what { padding: 12px 16px; }
.msg .meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; color: var(--muted); font-size: .86em; margin-bottom: 6px; }
.msg.staff { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.msg.staff .who { background: var(--accent-soft); }
.editor-bar { display: flex; gap: 2px; flex-wrap: wrap; padding: 4px; border: 1px solid var(--line); border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--surface-2); }
.editor-bar button { border: 0; background: none; padding: 3px 8px; border-radius: 3px; font: inherit; font-weight: 600; cursor: pointer; color: var(--ink); }
.editor-bar button:hover { background: var(--surface); }
.editor-bar + textarea { border-radius: 0 0 var(--radius) var(--radius); }
@media (max-width: 760px) { .msg { grid-template-columns: 1fr; } .msg .who { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ---------------------------------------------------------------- modals */
dialog.modal { border: 0; border-radius: var(--radius); padding: 0; width: min(640px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); }
dialog.modal.modal-sm { width: min(440px, calc(100vw - 32px)); }
dialog.modal::backdrop { background: rgba(10, 20, 40, .55); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: var(--head); color: var(--head-ink); }
.modal-head h2 { margin: 0; font-size: 1.05rem; color: inherit; }
.modal-head .icon-btn { color: var(--head-ink); }
.modal-body { padding: 14px 16px; max-height: 70vh; overflow: auto; }
.modal-body p:last-child { margin-bottom: 0; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2); }

/* ---------------------------------------------------------------- footer */
.foot { border-top: 1px solid var(--line); background: var(--surface); text-align: left; padding: 0; }
.foot-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 24px; padding: 28px 16px 18px; }
.foot-col h3 { font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.foot-col .plain li { padding: 2px 0; }
.foot-col a { color: var(--ink); }
.foot-about strong { font-size: 1.05rem; display: block; margin-bottom: 6px; }
.foot-social { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 6px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; padding-top: 14px; padding-bottom: 18px; border-top: 1px solid var(--line); font-size: .9em; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.foot-links a { color: var(--muted); }
.foot-lang { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; width: 100%; color: var(--muted); }
.foot-lang svg { width: 16px; height: 16px; }
.foot-lang a { color: var(--muted); }
.foot-lang span[aria-current] { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- misc kept from before */
.mail-frame { width: 100%; height: 680px; border: 1px solid var(--line); border-radius: var(--radius); background: #f3f5f9; }
.pager { display: flex; flex-wrap: wrap; gap: 4px; }
.pager a, .pager span { min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.pager .on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
.pager .gap { border: 0; background: none; }
.check-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 20px; margin: 8px 0; }
.perm-inline details summary { cursor: pointer; color: var(--accent); }
.perm-inline details[open] { padding: 8px 0; }
.warn-text { color: var(--warn); }
.card h2 + .form-grid { margin-top: 8px; }
.install .auth-brand { margin: 8px 0 18px; }
.reqs { list-style: none; padding: 0; margin: 0; columns: 2; }
.reqs li { padding: 3px 0; break-inside: avoid; }
.reqs .ico { width: 16px; height: 16px; }
.install .steps li { margin-bottom: 10px; }
.wide-alert { max-width: 980px; margin-left: auto; margin-right: auto; }
textarea.code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 13px; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .page.acct { grid-template-columns: 1fr; }
  .acct-side { position: static; }
  .acct-side-toggle { display: inline-flex; }
  .acct-side .acct-card, .acct-side .sb-block { display: none; }
  .acct-side.open .acct-card, .acct-side.open .sb-block { display: block; }
  .acct-side.open .acct-card { display: flex; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .masthead-in { flex-wrap: wrap; }
  .masthead .menus { display: none; width: 100%; margin: 0; }
  .masthead .menus.open { display: block; }
  .masthead .menus > ul { flex-direction: column; padding-bottom: 10px; }
  .masthead .menu-btn, .masthead .menu-link { padding: 10px 0; }
  .masthead .drop { position: static; box-shadow: none; border: 0; padding-left: 10px; }
  .masthead .menu:hover > .drop { display: none; }
  .masthead .menu.open > .drop { display: block; }
  .masthead-cta { display: none; }
  .strip-left { display: none; }
  .quick { grid-template-columns: repeat(2, 1fr); }
  .domain-search { flex-wrap: wrap; }
  .domain-search input { border-radius: var(--radius); width: 100%; margin-bottom: 8px; }
  .domain-search .btn { flex: 1; border-radius: var(--radius) !important; }
  .domain-search .btn + .btn { margin-left: 8px; }
  .hero { padding: 28px 18px; }
  .configure, .cart { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .cart-line { flex-direction: column; gap: 4px; }
  .cart-line .amt { text-align: left; }
  .invoice-view .cart-side { order: -1; }
}
@media (max-width: 700px) { .reqs { columns: 1; } .foot-cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- right-to-left */
[dir="rtl"] .masthead .menus, [dir="rtl"] .nav-toggle { margin-left: 0; margin-right: auto; }
[dir="rtl"] .foot { text-align: right; }
[dir="rtl"] .card.flush .table th:first-child, [dir="rtl"] .card.flush .table td:first-child { padding-left: 12px; padding-right: 20px; }
[dir="rtl"] .sb-links a.on { box-shadow: inset -3px 0 0 var(--accent); }
[dir="rtl"] .sb-count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .msg .who { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .kv th { text-align: right; }
/* ---------------------------------------------------------------- client-account: account, users, security, emails, affiliates, sign-in */
/* switches in a grid (email kinds, permissions) */
.switch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 20px; margin: 6px 0 10px; }
.switch-grid.one { grid-template-columns: 1fr; }
.switch-grid .check { align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.switch-grid .check span { line-height: 1.3; }
.modal-body .switch-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.modal-body .label { font-weight: 600; margin: 10px 0 4px; }
.form-grid.tight { gap: 0 16px; }
.form-grid.tight label { margin-bottom: 0; }
/* people and chips in tables */
.who-cell { display: flex; align-items: center; gap: 10px; }
.who-cell .avatar { width: 32px; height: 32px; font-size: 12px; flex: none; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .86em; white-space: nowrap; }
.table .row-actions form.inline { margin: 0; }
.table .row-actions .btn + form, .table .row-actions form + .btn { margin-left: 4px; }
.linklike { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; cursor: pointer; }
.linklike:hover { text-decoration: underline; }
.empty { text-align: center; color: var(--muted); padding: 30px 20px !important; }
.empty .ico { width: 36px; height: 36px; color: var(--muted); opacity: .6; margin-bottom: 6px; }
.empty p { margin: 0 0 10px; }
/* sidebar facts (Your Account) */
.side-facts { grid-template-columns: auto 1fr; gap: 2px 10px; font-size: .92em; }
.side-facts dt { padding: 2px 0; }
.side-facts dd { padding: 2px 0; text-align: right; }
.side-facts .badge { vertical-align: middle; }
/* security */
.sec-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 18px; align-items: start; }
.sec-grid .card { margin-bottom: 0; }
.sec-grid .card .stack { margin-top: 8px; }
.steps-list { margin: 0 0 12px; padding-left: 20px; }
.steps-list li { margin-bottom: 4px; }
.qr-row { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.qr-row .qr svg { width: 160px; height: 160px; }
.qr-key { display: grid; gap: 6px; min-width: 0; flex: 1; }
.qr-key .label { font-weight: 600; }
.qr-key code { font-size: .95em; letter-spacing: .04em; padding: 6px 8px; }
.qr-key .btn { justify-self: start; }
.recovery { list-style: none; counter-reset: rc; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0 0 12px; padding: 0; }
.recovery li { counter-increment: rc; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface-2); }
.recovery li::before { content: counter(rc); color: var(--muted); font-size: .8em; min-width: 14px; }
.recovery code { background: none; padding: 0; font-size: 1em; letter-spacing: .05em; }
.notice.good-note { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); color: var(--good); margin-bottom: 12px; }
input.code-input { font-size: 1.3rem; letter-spacing: .3em; text-align: center; font-family: ui-monospace, Menlo, Consolas, monospace; }
.page-head .actions .badge { font-size: .8em; }
/* email history */
.mail-view .mail-head { border: 0; border-radius: 0; border-bottom: 1px solid var(--line); }
.mail-view .mail-head dt { padding-left: 20px; }
.mail-view .mail-frame { border: 0; border-radius: 0 0 var(--radius) var(--radius); display: block; }
/* switch account */
.switch-page { max-width: 900px; margin: 0 auto; padding: 10px 0 30px; }
.switch-head { text-align: center; margin-bottom: 20px; }
.switch-head h1 { margin-bottom: 4px; }
.acct-choices { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); justify-content: center; gap: 16px; }
.acct-choices form { margin: 0; height: 100%; }
.acct-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; height: 100%; text-align: left; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, transform .15s; }
.acct-choice:hover { border-color: var(--accent); transform: translateY(-2px); }
.acct-choice.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.acct-choice strong { font-size: 1.05rem; margin-top: 6px; }
.acct-choice-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.acct-choice .go { color: var(--accent); display: inline-flex; align-items: center; gap: 4px; font-weight: 500; }
.acct-choice .go .ico { width: 14px; height: 14px; }
/* affiliates */
.link-box { display: flex; gap: 8px; margin-bottom: 8px; }
.link-box input { flex: 1; min-width: 0; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95em; }
.link-box .btn { flex: none; }
.copied { background: var(--st-green) !important; border-color: var(--st-green) !important; color: #fff !important; }
.stat .num.money { font-size: 1.3rem; }
.aff-codes { display: grid; gap: 14px; }
.aff-code { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; align-items: start; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); }
.aff-code .code-preview { grid-column: 1 / -1; padding: 10px; background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); overflow: auto; }
.aff-code textarea { font-size: .85em; }
.aff-join { max-width: 720px; text-align: center; padding: 34px 28px; }
.aff-join .lead { margin: 0 auto 18px; max-width: 540px; }
.aff-join-ico { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); align-items: center; justify-content: center; margin-bottom: 10px; }
.aff-join-ico .ico { width: 32px; height: 32px; }
.how-steps { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; text-align: left; }
.how-steps li { display: flex; gap: 10px; align-items: flex-start; }
.how-steps small { display: block; color: var(--muted); }
.step-no { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); align-items: center; justify-content: center; font-size: .85em; font-weight: 700; flex: none; }
/* sign-in frame (client side; the admin side uses base.css alone) */
body.auth.client { background: radial-gradient(circle at 15% 10%, rgba(13, 143, 134, .14), transparent 45%), radial-gradient(circle at 85% 90%, rgba(31, 59, 99, .16), transparent 45%), var(--bg); justify-content: flex-start; padding-top: 7vh; }
body.auth.client .auth-brand { justify-content: center; font-size: 1.6rem; margin-bottom: 18px; }
body.auth.client .auth-brand a { color: var(--ink); }
body.auth.client .auth-brand a:hover { text-decoration: none; }
body.auth.client .auth-brand .logo-img { max-height: 52px; }
body.auth.client .auth-box { max-width: 440px; padding: 30px 32px; border-top: 4px solid var(--accent); }
body.auth.client .auth-box.auth-wide { max-width: 860px; }
body.auth.client .auth-title { font-size: 1.45rem; margin-bottom: 4px; }
body.auth.client .auth-lead { margin-bottom: 16px; }
body.auth.client .auth-head { margin-bottom: 14px; }
body.auth.client .auth-head p { margin: 0; }
body.auth.client .auth-icon { display: inline-flex; width: 48px; height: 48px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); align-items: center; justify-content: center; margin-bottom: 10px; }
body.auth.client .auth-icon .ico { width: 26px; height: 26px; }
body.auth.client .auth-alt { margin: 16px 0 0; text-align: center; color: var(--muted); }
body.auth.client .auth-done { text-align: center; padding: 10px 0 4px; }
body.auth.client .auth-done .big-tick { margin-bottom: 10px; }
body.auth.client .stack .btn-block { margin-top: 4px; }
body.auth.client .label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
body.auth.client .label-row a { font-weight: 400; }
body.auth.client .reg-step { display: flex; align-items: center; gap: 10px; margin: 18px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
body.auth.client .reg-step:first-of-type { margin-top: 0; }
body.auth.client .reg-foot { margin-top: 14px; }
body.auth.client .reg-foot .actions { padding: 0; }
.auth-foot { margin-top: 18px; width: 100%; max-width: 860px; color: var(--muted); font-size: .9em; }
.auth-foot-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 16px; }
.auth-foot-line a { color: var(--muted); }
.auth-foot-line .icon-btn { color: var(--muted); }
.auth-lang { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 12px; margin-top: 8px; }
.auth-lang svg { width: 15px; height: 15px; }
.auth-lang a { color: var(--muted); }
.auth-lang span[aria-current] { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { body.auth.client .auth-box { padding: 22px 18px; } .recovery { grid-template-columns: 1fr; } .sec-grid { grid-template-columns: 1fr; } }
[dir="rtl"] .side-facts dd { text-align: left; }
[dir="rtl"] .mail-view .mail-head dt { padding-left: 12px; padding-right: 20px; }
[dir="rtl"] .acct-choice { text-align: right; }
/* ---------------------------------------------------------------- client-billing: store, cart, checkout, invoices, quotes, funds, cards */
/* the three steps of an order */
.steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; counter-reset: none; }
.steps li { flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 16px; color: var(--muted); font-weight: 500; position: relative; }
.steps li + li { border-left: 1px solid var(--line); }
.steps .n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--muted); font-size: .85em; font-weight: 700; flex: none; }
.steps .n .ico { width: 15px; height: 15px; }
.steps li.on { color: var(--ink); background: var(--accent-soft); }
.steps li.on .n { background: var(--accent); color: var(--accent-ink); }
.steps li.done { color: var(--ink); }
.steps li.done .n { background: var(--st-green); color: #fff; }

/* store: a card per group with its plans, and the plan cards */
.store-section { padding-bottom: 20px; }
.store-section > .card-head h2 small { font-weight: 400; font-size: .9em; margin-left: 6px; }
.store-section .plans { margin-top: 4px; }
.store-section .group-incl { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); color: var(--muted); font-size: .92em; }
.store-domains .domain-search .btn + .btn { margin-left: 8px; }

/* choice cards: terms, domain modes, add-ons, gateways, radio options */
.choice-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.choice { align-items: flex-start; transition: border-color .15s, box-shadow .15s; }
.choice input { margin-top: 3px; accent-color: var(--accent); }
.choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-soft); }
.choice:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.choice .choice-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.choice .choice-top .badge { font-size: .7em; }
.choice .choice-amt { font-weight: 600; white-space: nowrap; }
.choice .choice-price { display: block; font-size: 1.35rem; font-weight: 700; margin-top: 2px; }
.choice small { margin-top: 2px; }
.pay-cards { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.pay-cards .choice { align-items: center; }

/* configure: options and the sticky summary */
.configure .card > h2:first-child .ico, .checkout .card > h2:first-child .ico, .checkout .card-head h2 .ico, .cart-lines .card-head h2 .ico { width: 17px; height: 17px; vertical-align: -3px; color: var(--muted); margin-right: 4px; }
.opt-list { display: grid; gap: 10px; }
.opt { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); min-width: 0; }
.opt-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.opt-ico .ico { width: 20px; height: 20px; }
.opt-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.opt-body label { margin: 0; font-weight: 400; }
.opt-body small { display: block; }
.opt-body.wide .choices { margin-top: 8px; }
.opt-ctl { flex: none; max-width: 55%; min-width: 0; }
.opt-ctl select { max-width: 100%; width: auto; }
.opt-ctl .qty { width: 96px; text-align: center; }
.opt-radio { align-items: flex-start; }
@media (max-width: 640px) { .opt { flex-wrap: wrap; } .opt-ctl { max-width: none; width: calc(100% - 52px); margin-left: 52px; } .opt-ctl select { width: 100%; } }
.order-summary .summary-lines { border-bottom: 1px solid var(--line); }
.order-summary .cart-item { padding: 10px 20px; }
.order-summary .cart-line .line-ico { display: none; }
.order-summary .cart-line .amt strong { font-size: 1em; }
.order-summary .qty-field { margin-bottom: 10px; }
.order-summary .qty-field input { width: 110px; }
.order-summary .totals .grand dd { color: var(--accent); }
.order-summary .btn-block { margin-top: 10px; }
.btn-lg { min-height: 46px; font-size: 1.05rem; }
.secure .ico { width: 14px; height: 14px; vertical-align: -2px; }

/* cart items as cards */
.cart-lines .card-head form { margin: 0; }
.cart-lines .cart-item { padding: 14px 20px; }
.cart-line { align-items: flex-start; }
.cart-line .line-ico { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 8px; background: var(--accent-soft); color: var(--accent); flex: none; }
.cart-line .line-ico .ico { width: 20px; height: 20px; }
.cart-line .what { flex: 1; min-width: 0; }
.cart-line .what .dom { font-weight: 500; }
.cart-line .amt strong { font-size: 1.1em; }
.cart-line.sub { margin-left: 50px; padding-left: 12px; }
.cart-item .remove { margin: 8px 0 0 50px; }
.cart-item .remove .linklike .ico { width: 14px; height: 14px; vertical-align: -2px; }
.empty-cart h2 { margin: 12px 0 4px; }
.big-tick.grey { background: var(--surface-2); color: var(--muted); }
.big-tick.blue { background: var(--accent-soft); color: var(--accent); }
.promo-on { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.promo-on form { margin-left: auto; }
.recommend .recommend-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }

/* checkout: the account card */
.acct-who { display: flex; align-items: center; gap: 14px; }
.acct-who .avatar.big { margin: 0; }
.checkout .sticky .check { margin: 10px 0; }

/* order complete */
.done .big-tick { width: 84px; height: 84px; margin-bottom: 10px; }
.done .big-tick .ico { width: 46px; height: 46px; }
.done h1 { margin: 6px 0 4px; }
.done .order-no { font-size: 1.3em; letter-spacing: .04em; }
.done .due-now { margin: 14px 0 6px; font-size: 1.1rem; }
.done .due-now strong { font-size: 1.5rem; margin-left: 6px; }
.next-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; }
.next-list li { display: flex; gap: 12px; align-items: flex-start; }
.next-list .n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; flex: none; }
.next-list strong { display: block; }
.next-steps .row-split { margin-top: 0; }

/* invoices and quotes */
.tab-card { border-top-left-radius: 0; }
.tab-card > .card-head { border-radius: 0; }
.stats-row span.stat { cursor: default; }
.stats-row span.stat:hover { filter: none; }
.pay-card { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.pay-card > h2:first-child { background: var(--accent-soft); }
.pay-card.overdue { border-color: color-mix(in srgb, var(--st-red) 45%, var(--line)); }
.pay-card.overdue > h2:first-child { background: var(--bad-soft); color: var(--bad); }
.pay-card > h2:first-child .ico { width: 17px; height: 17px; vertical-align: -3px; margin-right: 4px; }
.pay-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.pay-amount { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); }
.pay-amount .due { font-size: 2rem; line-height: 1.1; font-weight: 700; }
.pay-card.overdue .pay-amount .due { color: var(--bad); }
.pay-ways { display: grid; gap: 12px; }
.pay-form { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.pay-form .field { margin: 0; min-width: 220px; }
.pay-form .check { width: 100%; margin: 0; }
.pay-form .btn .ico { width: 18px; height: 18px; }
.saved-pay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.credit-form { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed var(--line); }
.credit-form .inline-ctl input { width: 120px; }
.credit-form .ico { width: 14px; height: 14px; vertical-align: -2px; }
.pay-instructions h3 .ico { width: 15px; height: 15px; vertical-align: -2px; margin-right: 4px; }
.card.flush > h2.pad:first-child { margin: 0; }
.totals-wrap { display: flex; justify-content: flex-end; border-top: 1px solid var(--line); }
.totals-wrap .totals { width: min(100%, 340px); margin: 0; }
.proposal { border-bottom: 1px solid var(--line); white-space: pre-line; }
.accept-card form { display: flex; gap: 8px; flex-wrap: wrap; }
.funds .amount-box { font-size: 1.4rem; font-weight: 600; min-height: 50px; }
.funds fieldset.field { border: 0; padding: 0; margin: 0; }
.funds fieldset.field legend { padding: 0; }

/* kept cards */
.method-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-bottom: 18px; }
.method-card { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.method-card.default { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.method-card.expired { opacity: .85; }
.method-top { display: flex; align-items: center; gap: 12px; }
.method-top > div { flex: 1; min-width: 0; }
.method-top .brand { display: block; font-size: 1.1rem; }
.method-top .last4 { display: block; color: var(--muted); font-family: ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; }
.method-ico { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 10px; background: linear-gradient(135deg, var(--bar) 0%, var(--bar-2) 100%); color: var(--bar-ink); flex: none; }
.method-ico .ico { width: 24px; height: 24px; }
.method-facts { font-size: .95em; }
.method-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--line); }
.method-actions .btn .ico { width: 14px; height: 14px; }
.gateway-wait h1 { margin: 10px 0 4px; }

@media (max-width: 860px) {
  .steps { flex-direction: column; }
  .steps li + li { border-left: 0; border-top: 1px solid var(--line); }
  .pay-grid { grid-template-columns: 1fr; }
  .cart-line.sub, .cart-item .remove { margin-left: 0; }
  .order-summary .cart-line.sub { margin-left: 14px; }
}
[dir="rtl"] .steps li + li { border-left: 0; border-right: 1px solid var(--line); }
[dir="rtl"] .store-section > .card-head h2 small { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .cart-line.sub { margin-left: 0; margin-right: 50px; padding-left: 0; padding-right: 12px; border-left: 0; border-right: 2px solid var(--line); }
[dir="rtl"] .cart-item .remove { margin-left: 0; margin-right: 50px; }
/* ---------------------------------------------------------------- client-services: services and domains pages, domain search */
.stats-row.stats-small { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.stats-row.stats-small .stat { min-height: 64px; }
.stats-row.stats-small .stat .num { font-size: 1.2rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats-row.stats-small .stat .stat-body { padding: 8px 12px; }
.stats-row.stats-small .stat .stat-ico { width: 56px; }
.stats-row.stats-small .stat .stat-ico .ico { width: 26px; height: 26px; }
.hbar { display: inline-block; width: 120px; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.hbar i { display: block; height: 100%; background: var(--accent); border-radius: 4px; width: 0; transition: width .3s; }
.hbar.light { display: block; width: 100%; max-width: 180px; height: 6px; margin-top: 6px; background: rgba(255, 255, 255, .25); }
.hbar.light i { background: #fff; }
.mt { margin-top: 12px; }
.empty-state { text-align: center; padding: 36px 20px; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.empty-state .ico { width: 40px; height: 40px; color: var(--accent); opacity: .7; }
.empty-state p { margin: 0; }
.kv td .ico { width: 14px; height: 14px; vertical-align: -2px; color: var(--muted); }
.tabs + .tabpane, .tabs + .tab-grid > .card:first-child { border-top-left-radius: 0; }
.tabs + .card, .tabs + .tab-grid { margin-top: 0; }
.tabs + .card > h2:first-child { border-top-left-radius: 0; }
.cancel-box h2 { font-size: 1.05rem; margin: 0 0 4px; }
.cancel-box p { margin: 0; }
.cancel-box .actions { padding: 0; }
.cancel-grid .card { margin-top: 0; }
.upgrade-plans .plan h2 { font-size: 1.15rem; }
.upgrade-plans .choices { margin-top: 6px; }
.upgrade-plans .choice strong { font-size: 1.05rem; }
.switch-state { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.switch-state i { display: inline-block; width: 34px; height: 20px; border-radius: 10px; background: var(--st-grey); position: relative; flex: none; }
.switch-state i::before { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.switch-state.on { color: var(--st-green); }
.switch-state.on i { background: var(--st-green); }
.switch-state.on i::before { left: 17px; }
.switch-form { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0; }
.switch-form .check { margin: 0; }
.lock-state { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); margin-bottom: 14px; }
.lock-state .switch-state i { width: 48px; height: 28px; border-radius: 14px; }
.lock-state .switch-state i::before { width: 22px; height: 22px; }
.lock-state .switch-state.on i::before { left: 23px; }
.lock-state strong { font-size: 1.1rem; }
.lock-state p { margin: 2px 0 0; }
.lock-state > .ico { width: 36px; height: 36px; }

/* domain search */
.domain-hero { margin-bottom: 20px; }
.domain-hero .domain-search { max-width: 820px; }
.domain-hero .domain-search input { color: var(--ink); background: #fff; }
.domain-hero .hero-links { margin: 14px 0 0; }
.domain-hero .hero-links a { color: var(--bar-ink); display: inline-flex; align-items: center; gap: 4px; }
.domain-hero .hero-links .ico { width: 16px; height: 16px; }
.domain-hero .hero-off { font-weight: 600; color: #fff; }
.avail { border-width: 1px; }
.avail-line { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.avail-line h2 { margin: 0 0 4px; font-size: 1.5rem; word-break: break-all; }
.avail-line p { margin: 0; color: var(--muted); }
.avail-line > div:not(.avail-price):not(.avail-act) { flex: 1; min-width: 220px; }
.avail-ico { display: inline-flex; width: 60px; height: 60px; border-radius: 50%; align-items: center; justify-content: center; flex: none; }
.avail-ico .ico { width: 32px; height: 32px; }
.avail-line.yes .avail-ico { background: var(--good-soft); color: var(--good); }
.avail-line.no .avail-ico { background: var(--bad-soft); color: var(--bad); }
.avail-line.maybe .avail-ico { background: var(--accent-soft); color: var(--accent); }
.avail-line.no h2 { color: var(--bad); }
.avail-price { text-align: right; }
.avail-price strong { display: block; font-size: 1.7rem; color: var(--good); line-height: 1.1; }
.avail-price small { color: var(--muted); }
.avail-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.avail-fields { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; }
.avail-fields .field { margin: 0; min-width: 220px; flex: 1; }
.avail-fields .field.avail-go { flex: none; min-width: 0; }
.avail-fields select, .avail-fields input { width: 100%; }
.price-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-bottom: 20px; }
.price-card { display: grid; gap: 2px; padding: 14px 14px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: inherit; text-decoration: none; box-shadow: var(--shadow); justify-items: start; }
a.price-card:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 6px 20px rgba(16, 30, 54, .1); }
.price-card .tld { font-size: 1.25rem; font-weight: 700; color: var(--accent); }
.price-card strong { font-size: 1.15rem; margin-top: 6px; }
.price-card .badge { margin-top: 2px; }
.price-card > .small { color: var(--muted); word-break: break-all; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
a.chip { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font-size: .92em; }
a.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.suggest .card-head { margin-bottom: 10px; }
@media (max-width: 700px) { .avail-price { text-align: left; } .tab-grid .form-grid { grid-template-columns: 1fr; } }
/* ---------------------------------------------------------------- client support pages (tickets, knowledgebase, announcements, downloads, network status, contact) */
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.two-main > .card:first-child, .two-side > .card:first-child { margin-top: 0; }
.two-side .card { margin-bottom: 16px; }
.empty-state { text-align: center; padding: 36px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.empty-state > .ico { width: 48px; height: 48px; color: var(--accent); opacity: .8; margin-bottom: 4px; }
.empty-state h2 { margin: 0; font-size: 1.2rem; background: none !important; border: 0 !important; padding: 0 !important; }
.empty-state p { margin: 0 0 10px; max-width: 460px; }
.tabs + .tabbed, .tabs + .card { border-top-left-radius: 0; margin-top: 0; }
.tabbed > .card:first-child { border-top-left-radius: 0; }
.actions.wrap { flex-wrap: wrap; }
.actions.center { justify-content: center; }
.facts.cols { grid-template-columns: auto 1fr auto 1fr; }
.facts.cols dt:nth-last-of-type(2), .facts.cols dd:nth-last-of-type(2) { border-bottom: 0; }
.facts.plain.tiny { font-size: .9em; }
.facts.plain.tiny dt { padding: 2px 8px 2px 0; }
.facts.plain.tiny dd { padding: 2px 0; }
.kb-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.kb-links a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius); color: var(--ink); }
.kb-links a:hover { background: var(--accent-soft); text-decoration: none; color: var(--accent); }
.kb-links .ico { width: 16px; height: 16px; color: var(--accent); flex: none; }
.tips { margin: 0; padding-left: 18px; color: var(--muted); display: grid; gap: 6px; }
.help-card .btn-block { justify-content: center; }
.page-head .head-search { margin: 0; max-width: 420px; flex: 1; }
.page-head > .lead { width: 100%; margin: -6px 0 0; }

/* tickets list */
.tickets-table .subject strong { font-weight: 600; }
.tickets-table tr.unread td:first-child { box-shadow: inset 3px 0 0 var(--st-amber); }
.tickets-table td .badge { vertical-align: middle; }

/* one ticket */
.reply-card .stack { gap: 0; }
.reply-card textarea { min-height: 140px; }
.reply-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.reply-foot .btn { margin-left: auto; }
label.attach { display: inline-flex !important; align-items: center; gap: 6px; font-weight: 500; color: var(--accent); cursor: pointer; }
label.attach .ico { width: 15px; height: 15px; }
label.attach input[type=file] { font-weight: 400; color: var(--muted); max-width: 260px; min-height: 0; padding: 0; border: 0; background: none; }
.thread { margin-top: 18px; }
.msg .who .avatar { width: 36px; height: 36px; font-size: .95rem; margin-bottom: 6px; }
.msg.staff .who .avatar { background: var(--head); }
.msg .who small.role { margin-top: 2px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; font-size: .72em; }
.msg.client .who small.role { color: var(--st-blue); }
.msg.staff .who small.role { color: var(--accent); }
.msg .meta .ico { width: 14px; height: 14px; vertical-align: -2px; }
.msg .meta .rate { display: inline-flex; align-items: center; gap: 2px; margin: 0; }
.msg .meta .rate span { margin-right: 6px; }
.msg .meta .star { border: 0; background: none; padding: 1px; cursor: pointer; color: var(--line); line-height: 0; }
.msg .meta .star .ico { width: 17px; height: 17px; }
.msg .meta .star.on, .msg .meta .star:hover { color: var(--st-amber); }
.msg .meta .star.on .ico { fill: currentColor; }
.msg-files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.msg-files .ico { width: 14px; height: 14px; }

/* open a ticket */
.dept-choices { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.dept-choices .choice { align-items: flex-start; }
.dept-choices .choice input { margin-top: 4px; }
.dept-choices .choice:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); background: var(--accent-soft); }
.ticket-form fieldset { border: 0; padding: 0; margin: 0 0 14px; min-width: 0; }
.ticket-form legend { font-weight: 600; padding: 0; margin-bottom: 4px; }
.ticket-form .facts { margin-bottom: 14px; }

/* feedback */
.feedback-wrap { max-width: 720px; margin: 0 auto; }
.score-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.score { position: relative; cursor: pointer; }
.score input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.score span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); font-weight: 600; }
.score input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.score input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.score-ends { display: flex; justify-content: space-between; margin-top: 4px; }

/* knowledgebase */
.kb-hero { padding: 36px 36px 32px; margin-bottom: 22px; }
.kb-hero h1 { font-size: 1.8rem; }
.article-list { list-style: none; margin: 0; padding: 0; }
.article-list li { border-bottom: 1px solid var(--line); }
.article-list li:last-child { border-bottom: 0; }
.article-list a { display: flex; align-items: center; gap: 14px; padding: 12px 20px; color: var(--ink); }
.article-list a:hover { background: var(--accent-soft); text-decoration: none; }
.article-list a > span { flex: 1; min-width: 0; display: grid; gap: 2px; }
.article-list a > .ico { width: 20px; height: 20px; color: var(--accent); flex: none; }
.article-list a > .ico:last-child { color: var(--muted); width: 16px; height: 16px; }
.cat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 18px; }
.cat-card { display: flex; align-items: flex-start; gap: 14px; margin: 0; color: var(--ink); }
.cat-card:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 6px 20px rgba(16, 30, 54, .1); }
.cat-card > .ico { width: 32px; height: 32px; color: var(--accent); flex: none; }
.cat-card .cat-body { flex: 1; display: grid; gap: 2px; min-width: 0; }
.cat-card .cat-body strong { font-size: 1.05rem; }
.cat-card .badge { flex: none; }
.popular-list { margin: 0; padding: 6px 20px 10px 44px; counter-reset: pop; }
.popular-list li { padding: 7px 0; border-bottom: 1px dotted var(--line); font-weight: 500; }
.popular-list li:last-child { border-bottom: 0; }
.popular-list li::marker { color: var(--accent); font-weight: 700; }
.kb-bottom { gap: 18px; margin-top: 4px; }
.article-card .page-title { margin-bottom: 4px; font-size: 1.6rem; }
.article-meta { margin: 0 0 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.article-meta .ico { width: 15px; height: 15px; }
.tags { margin: 16px 0 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tags .ico { width: 15px; height: 15px; color: var(--muted); }
.tags a.badge { text-transform: none; }
.tags a.badge:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.vote-card { background: var(--band); }
.vote-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.vote-row .ico { width: 20px; height: 20px; color: var(--good); }
.vote-card p { margin: 8px 0 0; }

/* announcements */
.news-list { display: grid; gap: 14px; }
.news-card { display: flex; gap: 18px; margin: 0; }
.date-tile { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 72px; padding: 8px 0; border-radius: var(--radius); background: var(--band); color: var(--band-ink); align-self: flex-start; }
.date-tile .day { font-size: 1.7rem; font-weight: 700; line-height: 1; }
.date-tile .mon { text-transform: uppercase; font-size: .8em; font-weight: 600; letter-spacing: .04em; }
.date-tile .yr { font-size: .78em; color: var(--muted); }
.news-body { flex: 1; min-width: 0; }
.news-body h2 { margin: 0 0 2px; font-size: 1.2rem; background: none !important; border: 0 !important; padding: 0 !important; }
.news-body h2 a { color: var(--ink); }
.news-body p { margin: 0 0 8px; }
.news-body .small .ico { width: 14px; height: 14px; vertical-align: -2px; }
.news-body .more { font-weight: 500; }
.news-pager { margin-top: 16px; justify-content: space-between; }

/* downloads */
.dl-cat { margin-bottom: 18px; overflow: hidden; }
.dl-desc { padding-bottom: 10px; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); border-top: 1px solid var(--line); margin: 0 -1px -1px 0; }
.dl-item { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 14px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.dl-item > .btn, .dl-item > .badge { margin-left: auto; }
.dl-body { flex: 1 1 180px; }
.dl-ico { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius); background: var(--accent-soft); color: var(--accent); flex: none; }
.dl-ico .ico { width: 22px; height: 22px; }
.dl-body { min-width: 0; display: grid; gap: 2px; }
.dl-item .badge { white-space: normal; text-transform: none; display: inline-flex; align-items: center; gap: 4px; }
.dl-item .badge .ico, .dl-item .btn .ico { width: 14px; height: 14px; }

/* network status */
.notice.ok { background: var(--good-soft); border-color: color-mix(in srgb, var(--good) 30%, transparent); color: var(--good); }
.issue-card .card-head h2 { font-size: 1.05rem; }
.issue-badges { display: inline-flex; gap: 6px; }
.issue-facts { margin-bottom: 14px; }
.server-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); border-top: 1px solid var(--line); margin: 0 -1px -1px 0; }
.server-card { overflow: hidden; }
.server-item { display: flex; align-items: center; gap: 10px; padding: 10px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.server-item .ico { width: 18px; height: 18px; color: var(--muted); flex: none; }
.server-item span { flex: 1; font-weight: 500; }

/* contact */
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.contact-list li { display: flex; gap: 12px; align-items: flex-start; }
.contact-list li > .ico { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: 3px; }
.contact-list li > span { display: grid; gap: 1px; min-width: 0; }
.contact-list .addr { line-height: 1.45; }

/* small screens */
@media (max-width: 860px) {
  .two-col { grid-template-columns: 1fr; }
  .facts.cols { grid-template-columns: auto 1fr; }
  .facts.cols dt:nth-last-of-type(2), .facts.cols dd:nth-last-of-type(2) { border-bottom: 1px solid var(--line); }
  .kb-hero { padding: 24px 18px; }
  .news-card { flex-direction: column; gap: 10px; }
  .date-tile { flex-direction: row; gap: 6px; width: auto; padding: 4px 10px; }
  .date-tile .day { font-size: 1.1rem; }
  .reply-foot .btn { margin-left: 0; width: 100%; justify-content: center; }
}
[dir="rtl"] .tickets-table tr.unread td:first-child { box-shadow: inset -3px 0 0 var(--st-amber); }
[dir="rtl"] .reply-foot .btn, [dir="rtl"] .dl-item > .btn, [dir="rtl"] .dl-item > .badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .popular-list { padding: 6px 44px 10px 20px; }

/* ---------------------------------------------------------------- strip drop-downs (user menu, alerts) */
/* the strip's own link colour and inline layout must not reach into its drop-downs, which sit on a light surface */
.strip .drop { list-style: none; margin: 0; padding: 6px 0; font-size: 1.05rem; text-align: left; }
.strip .drop li { margin: 0; padding: 0; display: block; }
.strip .drop a, .strip .drop .linklike { display: block; width: 100%; text-align: left; padding: 8px 16px; color: var(--ink); font-weight: 500; gap: 0; line-height: 1.35; border-radius: 0; }
.strip .drop a:hover, .strip .drop a:focus-visible, .strip .drop .linklike:hover, .strip .drop .linklike:focus-visible { background: var(--accent-soft); color: var(--accent); text-decoration: none; outline: none; }
.strip .drop form { margin: 0; }
.strip .drop .who { padding: 8px 16px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); color: var(--ink); font-weight: 600; white-space: nowrap; }
.strip .drop .who small { display: block; color: var(--muted); font-weight: 400; font-size: .85em; margin-top: 2px; }
.strip .drop .pad-sm { color: var(--muted); }
.strip .user-menu .menu-btn > span:nth-child(2) { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip .user-menu .drop { min-width: 230px; }
.strip .alerts-drop a { display: flex; gap: 12px; }
.alerts-drop a span { flex: 1; }
@media (max-width: 760px) {
  .strip .menu { position: static; }
  .strip .drop { position: absolute; left: 16px; right: 16px; top: 36px; min-width: 0; }
  .strip .user-menu .menu-btn > span:nth-child(2) { max-width: 90px; }
}
@media (max-width: 480px) { .strip-left { display: none; } .strip-in { justify-content: flex-end; } }

/* ---------------------------------------------------------------- configure: server password */
.server-pw { grid-column: 1 / -1; }
.server-pw .inline-ctl { align-items: center; }
.server-pw .inline-ctl .btn.icon-btn { width: 38px; height: 38px; padding: 0; flex: none; }
.server-pw .inline-ctl .btn.icon-btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.server-pw .pw-meter { margin-top: 8px; }
@media (max-width: 560px) {
  .server-pw .inline-ctl { flex-wrap: wrap; }
  .server-pw .inline-ctl input { flex: 1 1 100%; }
}
.order-summary .continue-shopping { margin-top: 8px; }
.btn-block + .btn-block { margin-top: 8px; }

/* ---------------------------------------------------------------- add-ons page */
.pad-x { padding: 0 20px; }
.have-addons { margin: 10px 0 0; }
.addon-service .card-head h2 .muted { font-weight: 400; margin-left: 6px; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.addon-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2); position: relative; }
.addon-card .addon-ico { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); align-items: center; justify-content: center; }
.addon-card .addon-ico .ico { width: 20px; height: 20px; }
.addon-card .addon-body { display: grid; gap: 4px; flex: 1; }
.addon-card .addon-body strong { font-size: 1.02rem; }
.addon-card .addon-price { margin-top: 4px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.addon-card .addon-price > strong { font-size: 1.15rem; color: var(--accent); }
.addon-card form { margin: 0; }
.addon-card .btn { align-self: flex-start; }
.addons-intro .big-tick { margin-bottom: 10px; }
.addons-intro p { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------------- renew domains */
.renew-table .check-col { width: 34px; padding-right: 0; }
.renew-table .check-col input { margin: 0; width: 16px; height: 16px; vertical-align: middle; }
.renew-table select { min-width: 110px; padding: 5px 28px 5px 8px; }
.list-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--radius) var(--radius); }
.list-bar [data-renew-count] { color: var(--ink); }
@media (max-width: 760px) { .renew-table .row-actions .btn span { display: none; } }