/* ==========================================================================
   CyberSaury — child theme of Twenty-One
   Layout language: clean white surfaces, hairline borders, 16px cards,
   Figtree headings / Inter body, mono eyebrows. Brand colour: #7643C9.
   ========================================================================== */

/* ---------- Fonts (self-hosted, latin subset; CJK falls back to system) ---------- */
@font-face { font-family: "Figtree"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/figtree-500.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/figtree-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/dm-mono-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/dm-mono-500.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
    --cs-primary: #7643c9;
    --cs-primary-hover: #6536b5;
    --cs-primary-active: #582d9f;
    --cs-primary-soft: #f3eefc;
    --cs-primary-ring: rgba(118, 67, 201, .25);
    --cs-gradient: linear-gradient(135deg, #a96ef7 0%, #7643c9 55%, #5b2fa8 100%);

    --cs-ink: #1a1b1e;
    --cs-text: #4e515a;
    --cs-muted: #8a8f98;
    --cs-border: #eaecf0;
    --cs-border-strong: #bcc1c8;
    --cs-surface: #ffffff;
    --cs-surface-muted: #f7f8fa;

    --cs-teal: #0f9f8f;   --cs-teal-soft: #e6f6f4;
    --cs-amber: #c27c0e;  --cs-amber-soft: #fdf3e2;

    --cs-radius-sm: 8px;
    --cs-radius: 16px;
    --cs-radius-lg: 24px;

    --cs-font-cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC";
    --cs-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", var(--cs-font-cjk), sans-serif;
    --cs-font-head: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", var(--cs-font-cjk), sans-serif;
    --cs-font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
html:lang(ja) {
    --cs-font-cjk: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Noto Sans CJK JP";
}

/* ---------- Base ---------- */
body.cs-theme {
    background: var(--cs-surface);
    color: var(--cs-text);
    font-family: var(--cs-font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.cs-theme h1, .cs-theme h2, .cs-theme h3, .cs-theme h4, .cs-theme h5,
.cs-theme .h1, .cs-theme .h2, .cs-theme .h3, .cs-theme .h4, .cs-theme .h5 {
    font-family: var(--cs-font-head);
    color: var(--cs-ink);
    font-weight: 500;
    letter-spacing: -.01em;
}
.cs-theme a { color: var(--cs-primary); }
.cs-theme a:hover { color: var(--cs-primary-hover); }

/* ---------- Buttons ---------- */
.cs-theme .btn {
    border-radius: var(--cs-radius-sm);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.cs-theme .btn-lg { padding: 12px 24px; font-size: 16px; }
.cs-theme .btn .fa-arrow-right { margin-left: 6px; font-size: .85em; transition: transform .15s ease; }
.cs-theme .btn:hover .fa-arrow-right { transform: translateX(2px); }
.cs-theme .btn-primary {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
}
.cs-theme .btn-primary:hover { background: var(--cs-primary-hover); border-color: var(--cs-primary-hover); color: #fff; }
.cs-theme .btn-primary:active, .cs-theme .btn-primary.active { background: var(--cs-primary-active) !important; border-color: var(--cs-primary-active) !important; }
.cs-theme .btn-primary:focus, .cs-theme .btn-outline-secondary:focus { box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-theme .btn-outline-secondary {
    background: var(--cs-surface);
    border: 1px solid var(--cs-border-strong);
    color: var(--cs-ink);
}
.cs-theme .btn-outline-secondary:hover { background: var(--cs-surface-muted); border-color: var(--cs-border-strong); color: var(--cs-ink); }
.cs-theme .btn-outline-primary { color: var(--cs-primary); border-color: var(--cs-primary); }
.cs-theme .btn-outline-primary:hover { background: var(--cs-primary); color: #fff; }
.cs-theme .btn-light { background: #fff; border-color: #fff; color: var(--cs-primary); }
.cs-theme .btn-light:hover { background: var(--cs-primary-soft); border-color: var(--cs-primary-soft); color: var(--cs-primary-active); }
.cs-btn-sm { padding: 9px 16px; font-size: 14px; }

/* ---------- Header ---------- */
.cs-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--cs-border);
}
.cs-header .topbar { background: var(--cs-surface-muted); border-bottom: 1px solid var(--cs-border); }
.cs-navbar { padding: 14px 0; background: transparent; }
.cs-navbar .navbar-brand { flex: none; padding: 0; margin-right: 32px; }
#header .cs-navbar .logo-img { max-height: 36px; max-width: 100%; width: auto; height: auto; }
@media (max-width: 575.98px) {
    #header .cs-navbar .navbar-brand { max-width: 62%; margin-right: 8px; }
    #header .cs-navbar .logo-img { max-height: 30px; }
}

/* Keep each menu row under 30px: twenty-one calls autoCollapse("#nav", 30) and folds
   items into "More" whenever #nav is 30px or taller. */
.cs-primary-nav > li > a,
.cs-secondary-nav > li > a {
    display: block;
    padding: 4px 12px !important;
    line-height: 20px;
    color: var(--cs-text);
    font-size: 15px;
    font-weight: 500;
    border-radius: var(--cs-radius-sm);
    text-decoration: none;
}
.cs-primary-nav > li > a:hover,
.cs-secondary-nav > li > a:hover,
.cs-primary-nav > li.active > a { color: var(--cs-ink); background: var(--cs-surface-muted); }
.cs-primary-nav .dropdown-toggle::after { margin-left: 6px; vertical-align: .15em; border-top-color: var(--cs-muted); }

.cs-theme .dropdown-menu {
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 12px 32px rgba(26, 27, 30, .08);
}
.cs-theme .dropdown-menu .dropdown-item { border-radius: 8px; color: var(--cs-text); background: transparent; }
.cs-theme .dropdown-menu li.dropdown-item { padding: 0; }
.cs-theme .dropdown-menu a.dropdown-item { padding: 8px 12px !important; }
.cs-theme .dropdown-menu a.dropdown-item:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }

/* twenty-one's script folds menu items into "More" when #nav looks too narrow;
   let the menu take the free space between logo and actions so it measures correctly. */
@media (min-width: 1200px) {
    #header .cs-primary-nav { flex: 1 1 auto; justify-content: center; }
}

.cs-nav-actions { display: flex; flex: none; align-items: center; gap: 10px; }
#header .cs-primary-nav > li > a,
#header .cs-secondary-nav > li > a,
#header .cs-nav-actions .btn { white-space: nowrap; }
/* twenty-one colours every header link; restore button colours */
#header .cs-nav-actions .btn-primary,
#header .cs-nav-actions .btn-primary:hover,
#header .cs-nav-actions .btn-primary:focus { color: #fff; }
#header .cs-nav-actions .btn-outline-secondary,
#header .cs-nav-actions .btn-outline-secondary:hover { color: var(--cs-ink); }
#header .cs-icon-btn { color: var(--cs-text); }
#header .cs-icon-btn:hover { color: var(--cs-ink); }
.cs-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--cs-text);
    border-radius: var(--cs-radius-sm);
}
.cs-icon-btn:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-badge {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--cs-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 17px;
    text-align: center;
}

@media (max-width: 1199.98px) {
    #header .cs-navbar > .container { padding-left: 16px; padding-right: 16px; }
    .cs-navbar .navbar-collapse { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--cs-border); }
    .cs-primary-nav > li > a { padding: 10px 8px !important; }
    .cs-nav-actions { padding: 12px 0 4px; flex-wrap: wrap; }
    .cs-nav-actions .btn:not(.cs-icon-btn) { flex: 1 1 auto; }
}

/* ---------- Page chrome from twenty-one ---------- */
.cs-theme .master-breadcrumb { background: transparent; border-bottom: 1px solid var(--cs-border); }
.cs-home #main-body { padding: 0; background: var(--cs-surface); }
.cs-home .primary-content { padding: 0; }

/* ---------- Sections ---------- */
.cs-section { padding: 96px 0; }
.cs-section-tight { padding: 32px 0 96px; }
.cs-section-muted { background: var(--cs-surface-muted); }
.cs-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.cs-section-head-row {
    max-width: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    text-align: left;
}
.cs-section-head-row .cs-sub { margin-bottom: 0; }

.cs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--cs-primary);
    font-family: var(--cs-font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cs-eyebrow i { font-size: 12px; }
.cs-keep { display: inline-block; }
.cs-theme .cs-display,
.cs-theme .cs-h2,
.cs-theme .cs-cta h2 { text-wrap: balance; }
.cs-theme .cs-display {
    margin: 0 0 20px;
    font-size: clamp(2.25rem, 4.6vw, 3.5rem);
    line-height: 1.12;
    letter-spacing: -.02em;
}
/* Japanese headlines run longer per segment than Chinese; keep them to two lines */
html:lang(ja) .cs-theme .cs-display { font-size: clamp(2rem, 3.4vw, 2.6rem); line-height: 1.25; }
html:lang(ja) .cs-theme .cs-h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.cs-lead { max-width: 34em; margin-bottom: 32px; font-size: 18px; line-height: 1.65; }
.cs-theme .cs-h2 { margin: 0 0 12px; font-size: clamp(1.85rem, 3.2vw, 2.6rem); line-height: 1.18; letter-spacing: -.015em; }
.cs-sub { margin: 0; font-size: 17px; color: var(--cs-text); }
.cs-theme .cs-h3 { margin: 0 0 8px; font-size: 18px; font-weight: 600; line-height: 1.35; }
.cs-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero ---------- */
.cs-hero { padding: 72px 0 56px; }

.cs-panel {
    padding: 24px;
    border: 1px solid transparent;
    border-radius: var(--cs-radius);
    background:
        linear-gradient(var(--cs-surface), var(--cs-surface)) padding-box,
        linear-gradient(135deg, #a96ef7, #7643c9 45%, #2bb5a3) border-box;
    box-shadow: 0 24px 48px -24px rgba(118, 67, 201, .28);
}
.cs-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cs-panel-title { color: var(--cs-ink); font-weight: 600; }
.cs-panel-title i { margin-right: 6px; color: var(--cs-primary); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.cs-chip {
    padding: 4px 12px;
    border: 1px solid var(--cs-border);
    border-radius: 999px;
    background: var(--cs-surface-muted);
    color: var(--cs-ink);
    font-family: var(--cs-font-mono);
    font-size: 13px;
}
.cs-chip-muted { color: var(--cs-muted); }
.cs-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cs-stat {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--cs-ink);
}
.cs-stat i { font-size: 18px; }
.cs-stat-violet { background: var(--cs-primary-soft); } .cs-stat-violet i { color: var(--cs-primary); }
.cs-stat-teal { background: var(--cs-teal-soft); }      .cs-stat-teal i { color: var(--cs-teal); }
.cs-stat-amber { background: var(--cs-amber-soft); }    .cs-stat-amber i { color: var(--cs-amber); }
.cs-panel-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--cs-border);
    color: var(--cs-text);
}
.cs-panel-foot strong { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 22px; font-weight: 600; }
.cs-panel-foot small { color: var(--cs-muted); font-family: var(--cs-font-body); font-size: 13px; font-weight: 400; }

.cs-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 40px;
    margin-top: 64px;
    padding: 20px 28px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
}
.cs-strip-label {
    color: var(--cs-muted);
    font-family: var(--cs-font-mono);
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.cs-strip-items { display: flex; flex-wrap: wrap; gap: 12px 40px; color: var(--cs-text); font-weight: 500; }
.cs-strip-items i { margin-right: 6px; color: var(--cs-ink); }

/* ---------- Cards ---------- */
.cs-card {
    display: block;
    height: 100%;
    padding: 28px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
    color: var(--cs-text);
    transition: border-color .15s ease, transform .15s ease;
}
.cs-theme a.cs-card { color: var(--cs-text); text-decoration: none; }
.cs-theme a.cs-card:hover { border-color: var(--cs-border-strong); color: var(--cs-text); text-decoration: none; transform: translateY(-2px); }

/* Plans */
.cs-plan { display: flex; flex-direction: column; }
.cs-plan-name { margin-bottom: 16px; color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 18px; font-weight: 600; }
.cs-plan-price { display: flex; align-items: baseline; gap: 8px; }
.cs-plan-amount { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 44px; font-weight: 500; letter-spacing: -.02em; line-height: 1.1; }
.cs-plan-period { color: var(--cs-muted); font-size: 15px; }
.cs-plan-note { min-height: 22px; margin: 6px 0 24px; color: var(--cs-muted); font-size: 14px; }
.cs-plan-features { margin: 24px 0 0; padding: 24px 0 0; border-top: 1px solid var(--cs-border); list-style: none; }
.cs-plan-features li { display: flex; gap: 10px; padding: 5px 0; font-size: 14.5px; line-height: 1.5; }
.cs-plan-features i { flex: none; margin-top: 4px; color: var(--cs-primary); font-size: 12px; }

/* Features */
.cs-section-muted .cs-card { background: var(--cs-surface); }
.cs-feature p { margin: 0; font-size: 14.5px; line-height: 1.65; }
.cs-feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: var(--cs-primary-soft);
    color: var(--cs-primary);
    font-size: 18px;
}

/* News */
.cs-news { display: flex; flex-direction: column; }
.cs-news p { flex: 1; margin-bottom: 20px; font-size: 14.5px; }
.cs-news-date { margin-bottom: 12px; color: var(--cs-muted); font-family: var(--cs-font-mono); font-size: 13px; }
.cs-link { color: var(--cs-primary); font-weight: 500; }
.cs-link .fa-arrow-right { margin-left: 4px; font-size: .85em; }

/* CTA band */
.cs-cta {
    position: relative;
    overflow: hidden;
    padding: 72px 32px;
    border-radius: var(--cs-radius-lg);
    background: var(--cs-gradient);
    color: #fff;
    text-align: center;
}
.cs-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(600px 240px at 15% 0%, rgba(255, 255, 255, .18), transparent 70%),
        radial-gradient(520px 260px at 90% 100%, rgba(43, 181, 163, .25), transparent 70%);
    pointer-events: none;
}
.cs-cta > * { position: relative; }
.cs-theme .cs-cta h2 { margin: 0 0 12px; color: #fff; font-size: clamp(1.85rem, 3.4vw, 2.75rem); line-height: 1.2; }
.cs-cta p { max-width: 36em; margin: 0 auto 32px; color: rgba(255, 255, 255, .86); font-size: 17px; }

/* ---------- Footer ---------- */
.cs-theme #footer.footer {
    padding: 40px 0;
    background: var(--cs-surface);
    border-top: 1px solid var(--cs-border);
    color: var(--cs-muted);
}
.cs-theme #footer .nav-link { color: var(--cs-text); }
.cs-theme #footer .nav-link:hover { color: var(--cs-ink); }
.cs-theme #footer .btn { color: var(--cs-text); border: 1px solid var(--cs-border); }
.cs-theme #footer .copyright { color: var(--cs-muted); font-size: 14px; }

/* ---------- Small screens ---------- */
@media (max-width: 991.98px) {
    .cs-section { padding: 72px 0; }
    .cs-hero { padding: 48px 0 40px; }
    .cs-strip { margin-top: 40px; }
    .cs-section-head-row { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 575.98px) {
    .cs-section { padding: 56px 0; }
    .cs-stat-grid { grid-template-columns: 1fr; }
    .cs-stat { flex-direction: row; align-items: center; }
    .cs-card { padding: 22px; }
    .cs-cta { padding: 48px 20px; }
    .cs-lead { font-size: 16px; }
    .cs-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Shared form / chrome tweaks (all pages)
   ========================================================================== */
.cs-theme .primary-bg-color { background-color: var(--cs-surface); }
.cs-theme .master-breadcrumb .breadcrumb {
    margin: 0;
    padding: 12px 0;
    background: transparent;
    font-size: 13px;
}
.cs-theme .master-breadcrumb .breadcrumb-item a { color: var(--cs-muted); }
.cs-theme .master-breadcrumb .breadcrumb-item.active { color: var(--cs-text); }

.cs-theme .form-control {
    border: 1px solid #d0d5dd;
    border-radius: var(--cs-radius-sm);
    color: var(--cs-ink);
    box-shadow: none;
}
.cs-theme .form-control:focus {
    border-color: var(--cs-primary);
    box-shadow: 0 0 0 3px var(--cs-primary-ring);
}
.cs-theme .alert { border-radius: 12px; }
.cs-theme .alert-warning { background: var(--cs-amber-soft); border-color: #f3dfb8; color: #7a4d06; }
.cs-theme .alert-info { background: var(--cs-primary-soft); border-color: #e2d6f7; color: #4d2a8a; }
.cs-theme .list-group-item.active { background: var(--cs-primary); border-color: var(--cs-primary); }
.cs-theme .btn-success { background: var(--cs-primary); border-color: var(--cs-primary); }
.cs-theme .btn-success:hover { background: var(--cs-primary-hover); border-color: var(--cs-primary-hover); }

/* ==========================================================================
   Order form (standard_cart + cybersaury_cart)
   ========================================================================== */
.cs-cart #main-body { padding: 40px 0 88px; }

/* Single product group: the categories sidebar (and its mobile dropdown version, which also
   carries a currency picker that the footer already offers) adds nothing — give the body full width.
   Keep .cart-body's 15px gutter: standard_cart's .row uses -15px margins. */
.cs-theme #order-standard_cart .cart-sidebar,
.cs-theme #order-standard_cart .sidebar-collapsed { display: none; }
.cs-theme #order-standard_cart .cart-body { float: none; width: 100%; }

.cs-theme #order-standard_cart .header-lined { margin-bottom: 28px; border: 0; }
.cs-theme #order-standard_cart .header-lined h1 {
    margin: 0;
    font-family: var(--cs-font-head);
    font-size: clamp(1.75rem, 2.8vw, 2.25rem);
    font-weight: 500;
    color: var(--cs-ink);
    letter-spacing: -.015em;
}
.cs-theme #order-standard_cart .header-lined p { margin-top: 8px; color: var(--cs-text); }

/* Section dividers ("配置" / "付款方式" …) */
.cs-theme #order-standard_cart .sub-heading {
    height: auto;
    margin: 32px 0 16px;
    border: 0;
    text-align: left;
}
.cs-theme #order-standard_cart .sub-heading span {
    position: static;
    padding: 0;
    background: transparent;
    color: var(--cs-primary);
    font-family: var(--cs-font-mono);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ---------- Store page (cybersaury_cart/products.tpl) ---------- */
.cs-store { padding: 16px 0 24px; }
.cs-store .cs-section-head { margin-bottom: 40px; }
.cs-theme #order-standard_cart .cs-plan.product {
    height: 100%;
    margin: 0;
    padding: 28px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
    box-shadow: none;
}
.cs-theme #order-standard_cart .cs-plan .btn-order-now { padding: 10px 16px; font-size: 15px; }
.cs-plan-stock {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--cs-surface-muted);
    color: var(--cs-muted);
    font-family: var(--cs-font-body);
    font-size: 12px;
    font-weight: 500;
    vertical-align: middle;
}
.cs-plan-desc { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--cs-border); font-size: 14.5px; }

/* ---------- Configure product ---------- */
.cs-theme #order-standard_cart .product-info {
    margin-bottom: 8px;
    padding: 24px 28px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
}
.cs-theme #order-standard_cart .product-title {
    margin: 0 0 12px;
    color: var(--cs-ink);
    font-family: var(--cs-font-head);
    font-size: 22px;
    font-weight: 600;
}
/* Product descriptions are HTML .feature-list blocks. WHMCS runs nl2br over them (stray <br>s)
   and some icons are FA4 names FA5 lacks, so hide both and draw our own check icon.
   Block layout, not flex: items mix text with <strong>, which flex would split apart. */
.cs-theme #order-standard_cart .feature-list { margin: 0; padding: 0; }
.cs-theme #order-standard_cart .feature-list br { display: none; }
.cs-theme #order-standard_cart .feature-item {
    position: relative;
    display: block;
    padding: 5px 0 5px 24px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--cs-text);
}
.cs-theme #order-standard_cart .feature-item > i { display: none; }
.cs-theme #order-standard_cart .feature-item::before {
    content: "\f00c";
    position: absolute;
    left: 0;
    top: 6px;
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    color: var(--cs-primary);
}
.cs-theme #order-standard_cart .feature-item.highlight {
    display: inline-block;
    margin-bottom: 10px;
    padding: 6px 16px 6px 38px;
    border-radius: 999px;
    background: var(--cs-primary-soft);
    color: var(--cs-primary-active);
    font-weight: 500;
}
.cs-theme #order-standard_cart .feature-item.highlight::before { content: "\f02b"; left: 16px; top: 7px; }
.cs-theme #order-standard_cart .field-container { margin-bottom: 16px; }
.cs-theme #order-standard_cart .field-help-text { color: var(--cs-muted); font-size: 13px; }

/* ---------- Order summary (configure / cart) ---------- */
.cs-theme #order-standard_cart .order-summary {
    overflow: hidden;
    margin-bottom: 16px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
}
.cs-theme #order-standard_cart .order-summary h2 {
    margin: 0;
    padding: 20px 24px 0;
    background: transparent;
    color: var(--cs-ink);
    font-family: var(--cs-font-head);
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}
.cs-theme #order-standard_cart .summary-container {
    padding: 16px 24px 24px;
    border: 0;
    background: transparent;
    color: var(--cs-text);
    font-size: 14px;
}
.cs-theme #order-standard_cart .summary-container .product-name { color: var(--cs-ink); font-weight: 600; }
.cs-theme #order-standard_cart .summary-container .product-group { color: var(--cs-muted); }
.cs-theme #order-standard_cart .summary-totals,
.cs-theme #order-standard_cart .bordered-totals { border-color: var(--cs-border); }
.cs-theme #order-standard_cart .total-due-today { padding-top: 16px; }
.cs-theme #order-standard_cart .total-due-today .amt {
    display: block;
    color: var(--cs-ink);
    font-family: var(--cs-font-head);
    font-size: 32px;
    font-weight: 500;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.cs-theme #order-standard_cart .btn-checkout,
.cs-theme #order-standard_cart #btnCompleteProductConfig,
.cs-theme #order-standard_cart #btnCompleteOrder {
    width: 100%;
    padding: 12px 20px;
    border-color: var(--cs-primary);
    background: var(--cs-primary);
    color: #fff;
    font-size: 16px;
}
.cs-theme #order-standard_cart .btn-checkout:hover,
.cs-theme #order-standard_cart #btnCompleteProductConfig:hover,
.cs-theme #order-standard_cart #btnCompleteOrder:hover { background: var(--cs-primary-hover); border-color: var(--cs-primary-hover); }
.cs-theme #order-standard_cart .btn-continue-shopping { color: var(--cs-text); font-size: 14px; }

/* ---------- View cart ---------- */
.cs-theme #order-standard_cart .view-cart-items-header {
    padding: 12px 20px;
    border: 1px solid var(--cs-border);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background: var(--cs-surface-muted);
    color: var(--cs-muted);
    font-family: var(--cs-font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cs-theme #order-standard_cart .view-cart-items {
    border: 1px solid var(--cs-border);
    border-radius: 0 0 12px 12px;
}
.cs-theme #order-standard_cart .view-cart-items .item { padding: 18px 20px; border-color: var(--cs-border); }
.cs-theme #order-standard_cart .view-cart-items .item-title { color: var(--cs-ink); font-weight: 600; }
.cs-theme #order-standard_cart .view-cart-items .item-group { color: var(--cs-muted); }
.cs-theme #order-standard_cart .view-cart-items .item-price,
.cs-theme #order-standard_cart .view-cart-items .cost { color: var(--cs-ink); font-weight: 500; }
.cs-theme #order-standard_cart .view-cart-empty { padding: 40px 20px; color: var(--cs-muted); }
.cs-theme #order-standard_cart .view-cart-tabs { margin-top: 24px; }
.cs-theme #order-standard_cart .view-cart-tabs .nav-tabs { border-bottom-color: var(--cs-border); }
.cs-theme #order-standard_cart .view-cart-tabs .nav-link { color: var(--cs-text); font-size: 14px; }
.cs-theme #order-standard_cart .view-cart-tabs .nav-link.active {
    border-color: var(--cs-border) var(--cs-border) var(--cs-surface);
    background: var(--cs-surface);
    color: var(--cs-ink);
}
.cs-theme #order-standard_cart .view-cart-tabs .tab-content {
    padding: 20px;
    border: 1px solid var(--cs-border);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    background: var(--cs-surface);
}

/* ---------- Checkout ---------- */
.cs-theme #order-standard_cart .already-registered {
    padding: 16px 20px;
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    background: var(--cs-surface-muted);
}
.cs-theme #order-standard_cart .account-select-container .account-select {
    border: 1px solid var(--cs-border);
    border-radius: 12px;
}
.cs-theme #order-standard_cart .account-select-container .account-select.active {
    border-color: var(--cs-primary);
    background: var(--cs-primary-soft);
}
.cs-theme #order-standard_cart .marketing-email-optin {
    padding: 20px;
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    background: var(--cs-surface-muted);
}
.cs-theme #order-standard_cart .checkout-security-msg { border-radius: 12px; }
.cs-theme #order-standard_cart #paymentGatewaysContainer label { color: var(--cs-ink); font-weight: 500; }

/* ---------- Billing cycle cards (built by cybersaury_theme.php from #inputBillingcycle) ---------- */
.cs-theme #order-standard_cart .cs-cycle-source { display: none; }
.cs-cycles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.cs-cycle {
    position: relative;
    display: flex;
    width: 100%;
    font: inherit;
    text-align: left;
    color: inherit;
    -webkit-appearance: none;
    appearance: none;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid var(--cs-border);
    border-radius: 12px;
    background: var(--cs-surface);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.cs-cycle:hover { border-color: var(--cs-border-strong); }
.cs-cycle:focus { outline: none; }
.cs-cycle:focus-visible { box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-cycle-dot {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    border: 1.5px solid var(--cs-border-strong);
    border-radius: 50%;
    background: var(--cs-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-cycle-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-cycle-name { color: var(--cs-ink); font-weight: 600; font-size: 15px; }
.cs-cycle-price { color: var(--cs-text); font-size: 14px; }
.cs-cycle-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 6px; font-size: 12px; }
.cs-cycle-save { padding: 2px 8px; border-radius: 999px; background: #fdecef; color: #c4314b; font-weight: 600; }
.cs-cycle-meta s { color: var(--cs-muted); }
.cs-cycle.is-active {
    border-color: var(--cs-primary);
    background: var(--cs-primary-soft);
    box-shadow: 0 0 0 1px var(--cs-primary) inset;
}
.cs-cycle.is-active .cs-cycle-dot { border: 5px solid var(--cs-primary); }
@media (max-width: 991.98px) { .cs-cycles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479.98px) { .cs-cycles { grid-template-columns: 1fr; } }

/* ==========================================================================
   One-page checkout (orderforms/cybersaury_cart/checkout.tpl)
   ========================================================================== */
.cs-checkout .cs-co-section { margin-bottom: 36px; }
.cs-theme .cs-checkout .cs-co-title {
    margin: 0 0 14px;
    color: var(--cs-ink);
    font-family: var(--cs-font-head);
    font-size: 22px;
    font-weight: 500;
}
.cs-co-card {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
}

/* Cart items */
.cs-co-items-head,
.cs-co-item { display: grid; grid-template-columns: minmax(0, 1fr) 180px 84px; gap: 16px; align-items: center; padding: 16px 20px; }
.cs-co-items-head {
    padding-top: 12px;
    padding-bottom: 12px;
    color: var(--cs-muted);
    font-family: var(--cs-font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.cs-co-items-head span:nth-child(2) { grid-column: 2 / 4; }
.cs-co-item { border-top: 1px solid var(--cs-border); }
.cs-co-subitem { padding-left: 40px; }
.cs-co-item-title { color: var(--cs-ink); font-weight: 600; }
.cs-co-item-group { color: var(--cs-muted); font-size: 13px; }
.cs-co-item-opts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; color: var(--cs-text); font-size: 13px; }
.cs-co-item-price { display: flex; flex-direction: column; color: var(--cs-muted); font-size: 13px; }
.cs-co-item-price strong { color: var(--cs-ink); font-size: 15px; font-weight: 600; }
.cs-co-item-actions { display: flex; justify-content: flex-end; gap: 4px; }
.cs-co-item-actions .cs-icon-btn { width: 34px; height: 34px; border: 0; background: transparent; color: var(--cs-muted); }
.cs-co-item-actions .cs-icon-btn:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-co-empty { padding: 32px 20px; border-top: 1px solid var(--cs-border); color: var(--cs-muted); text-align: center; }
.cs-co-items-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--cs-border);
}
.cs-co-items-foot .btn i { margin-right: 6px; font-size: 12px; }

/* Promo band */
.cs-co-promo {
    padding: 14px;
    border-radius: var(--cs-radius);
    background: var(--cs-gradient);
}
.cs-co-promo-form { display: flex; gap: 10px; }
.cs-co-promo-input { position: relative; flex: 1; }
.cs-co-promo-input i { position: absolute; z-index: 3; left: 14px; top: 50%; transform: translateY(-50%); color: var(--cs-primary); pointer-events: none; }
.cs-theme .cs-co-promo-input .form-control { height: 44px; padding-left: 40px; border-color: transparent; }
.cs-co-promo-form .btn { height: 44px; padding: 0 20px; }
.cs-co-promo-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 6px 6px 6px 8px; color: #fff; }
.cs-co-promo-applied span { flex: 1; }

/* Account choice (drives standard_cart's hidden toggle buttons) */
.cs-acct-choice { margin-bottom: 12px; overflow: hidden; }
.cs-acct-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-top: 1px solid var(--cs-border);
    background: var(--cs-surface);
    color: var(--cs-ink);
    font: inherit;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.cs-acct-option:first-child { border-top: 0; }
.cs-acct-option:hover { background: var(--cs-surface-muted); }
.cs-acct-option:focus { outline: none; }
.cs-acct-option:focus-visible { box-shadow: inset 0 0 0 3px var(--cs-primary-ring); }
.cs-acct-option.is-active { background: var(--cs-primary-soft); }
.cs-acct-option.is-active .cs-cycle-dot { border: 5px solid var(--cs-primary); }

.cs-co-form { padding: 8px 24px 20px; }
.cs-theme .cs-co-form > .sub-heading:first-child,
.cs-theme .cs-co-form > div > .sub-heading:first-of-type { margin-top: 16px; }

/* Payment: total moves to the aside; gateways become a list card */
.cs-theme .cs-checkout #totalDueToday.alert { display: none; }
.cs-theme .cs-checkout #paymentGatewaysContainer > p { margin-bottom: 10px; }
.cs-theme .cs-checkout #paymentGatewaysContainer > .text-center {
    overflow: hidden;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
    text-align: left;
}
.cs-theme .cs-checkout #paymentGatewaysContainer label.radio-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 16px 20px;
    border-top: 1px solid var(--cs-border);
    color: var(--cs-ink);
    font-weight: 500;
    cursor: pointer;
}
.cs-theme .cs-checkout #paymentGatewaysContainer label.radio-inline:first-child { border-top: 0; }
.cs-theme .cs-checkout #paymentGatewaysContainer label.radio-inline:hover { background: var(--cs-surface-muted); }
.cs-theme .cs-checkout #paymentGatewaysContainer label.radio-inline:has(.checked),
.cs-theme .cs-checkout #paymentGatewaysContainer label.radio-inline:has(input:checked) { background: var(--cs-primary-soft); }
/* iCheck radio → same dot as the cycle cards */
.cs-theme .cs-checkout [class^="iradio"],
.cs-theme .cs-checkout [class*=" iradio"] {
    flex: none;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: 1.5px solid var(--cs-border-strong);
    border-radius: 50%;
    background: var(--cs-surface) !important;
}
.cs-theme .cs-checkout [class^="iradio"].checked,
.cs-theme .cs-checkout [class*=" iradio"].checked { border: 5px solid var(--cs-primary); }

/* Aside: sticky summary + terms + submit */
.cs-co-aside { position: sticky; top: 96px; }
.cs-theme .cs-checkout .cs-co-aside .order-summary { margin-bottom: 0; }
.cs-co-submit { margin-top: 20px; }
.cs-co-submit p { margin-bottom: 14px; font-size: 13.5px; }
.cs-co-submit .checkbox-inline { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; }
.cs-theme .cs-checkout .cs-co-submit #btnCompleteOrder { width: 100%; }
.cs-theme .cs-checkout .checkout-security-msg { margin-top: 8px; font-size: 13px; }

@media (max-width: 991.98px) {
    .cs-co-aside { position: static; margin-top: 8px; }
}
@media (max-width: 575.98px) {
    .cs-co-items-head { display: none; }
    .cs-co-item { grid-template-columns: minmax(0, 1fr) auto; padding: 14px 16px; }
    .cs-co-item-price { grid-column: 1; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 0 8px; align-items: baseline; }
    .cs-co-item-actions { grid-column: 2; grid-row: 1 / 3; }
    .cs-co-promo-form { flex-direction: column; }
    .cs-co-form { padding: 4px 16px 16px; }
}

/* Inline checkout validation (cs-validate in checkout.tpl) — mirrors Lagom's behaviour */
.cs-theme .cs-checkout .form-group.cs-invalid .form-control { border-color: #d14343; box-shadow: 0 0 0 3px rgba(209, 67, 67, .12); }
.cs-theme .cs-checkout .form-group.cs-invalid .field-icon { color: #d14343; }
.cs-field-error { margin-top: 6px; color: #b42318; font-size: 13px; }
/* standard_cart colours labels via #order-standard_cart label — match its specificity */
.cs-theme #order-standard_cart label.cs-invalid { color: #b42318; }
.cs-theme .cs-checkout label.cs-invalid [class*="icheckbox"],
.cs-theme .cs-checkout label.cs-invalid input[type="checkbox"] { outline: 2px solid #d14343; outline-offset: 1px; border-radius: 4px; }
.cs-tos-error {
    margin: -6px 0 14px;
    padding: 10px 14px;
    border: 1px solid #f4c7c7;
    border-radius: 10px;
    background: #fdf1f1;
    color: #b42318;
    font-size: 13.5px;
}

/* ==========================================================================
   Order form typography: one hierarchy, Lagom-like rhythm
   section title (22px head font) › card sub-title (16px/600) › label (14px) › input (44px)
   ========================================================================== */
/* Top-level sections on cart pages (e.g. "付款周期" on configure) read as section titles */
.cs-theme #order-standard_cart .sub-heading { margin: 36px 0 14px; }
.cs-theme #order-standard_cart .sub-heading span {
    color: var(--cs-ink);
    font-family: var(--cs-font-head);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}
/* Inside a checkout card they are sub-titles */
.cs-theme #order-standard_cart.cs-checkout .cs-co-form .sub-heading { margin: 22px 0 14px; }
.cs-theme #order-standard_cart.cs-checkout .cs-co-form .sub-heading span {
    font-family: var(--cs-font-body);
    font-size: 16px;
    font-weight: 600;
}

.cs-theme #order-standard_cart .cs-label {
    display: block;
    margin-bottom: 6px;
    color: var(--cs-text);
    font-size: 14px;
    font-weight: 500;
}
.cs-req { margin-left: 3px; color: #d14343; }
.cs-theme #order-standard_cart .form-group:not(.prepend-icon) > .form-control {
    height: 44px;
    padding: 10px 14px;
    font-size: 14.5px;
}

/* Drop helper copy Lagom doesn't show; tidy password tools */
.cs-theme .cs-checkout #paymentGatewaysContainer > p.small { display: none; }
.cs-theme #order-standard_cart .generate-password {
    padding: 6px 12px;
    border: 1px solid var(--cs-border-strong);
    border-radius: var(--cs-radius-sm);
    background: var(--cs-surface);
    color: var(--cs-ink);
    font-size: 13px;
}
.cs-theme #order-standard_cart .generate-password:hover { background: var(--cs-surface-muted); }
.cs-theme #order-standard_cart .password-strength-meter .progress { height: 6px; margin-bottom: 6px; border-radius: 999px; background: var(--cs-surface-muted); }
.cs-theme #order-standard_cart .password-strength-meter .progress-bar { background-color: var(--cs-primary); background-image: none; }
.cs-theme #order-standard_cart .password-strength-meter p { color: var(--cs-muted); font-size: 12.5px; text-align: left !important; }

/* ==========================================================================
   Client area (twenty-one structure, CyberSaury skin)
   ========================================================================== */
/* Logged-in top bar */
#header .topbar { background: var(--cs-surface-muted); color: var(--cs-text); border-bottom: 1px solid var(--cs-border); }
#header .topbar .btn,
#header .topbar .input-group-text { color: var(--cs-text); background: transparent; border: 0; font-size: 13px; }
#header .topbar .btn:hover { color: var(--cs-ink); }
#header .topbar .btn-active-client span { color: var(--cs-ink); font-weight: 600; }

body.cs-theme:not(.cs-home):not(.cs-cart) #main-body { padding: 32px 0 80px; }

/* Cards */
.cs-theme .card {
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    box-shadow: none;
    overflow: hidden;
}
.cs-theme .card[class*="card-accent-"] { border-top: 1px solid var(--cs-border); }
.cs-theme .card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--cs-border);
    background: var(--cs-surface);
}
.cs-theme .card-header .card-title,
.cs-theme .card-header h3 {
    margin: 0;
    color: var(--cs-ink);
    font-family: var(--cs-font-body);
    font-size: 15px;
    font-weight: 600;
}
.cs-theme .card-header .card-title i,
.cs-theme .card-header h3 i { margin-right: 6px; color: var(--cs-primary); }
.cs-theme .card-footer { padding: 12px 20px; border-top: 1px solid var(--cs-border); background: var(--cs-surface); }
.cs-theme .card-header .btn[class*="bg-color-"],
.cs-theme .card-header .btn.btn-default {
    padding: 4px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--cs-primary-soft);
    color: var(--cs-primary-active);
    font-size: 12.5px;
    font-weight: 500;
}
.cs-theme .card-header .btn[class*="bg-color-"]:hover { background: #e7dcf9; }
.cs-theme .card .list-group-item { border-color: var(--cs-border); }

/* Dashboard stat tiles */
.cs-theme .tiles .tile {
    position: relative;
    display: block;
    margin-bottom: 16px;
    padding: 20px 20px 18px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
    color: var(--cs-text);
    transition: border-color .15s ease, transform .15s ease;
}
.cs-theme .tiles .tile:hover { border-color: var(--cs-border-strong); text-decoration: none; transform: translateY(-2px); }
.cs-theme .tiles .tile i {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--cs-primary-soft);
    color: var(--cs-primary);
    font-size: 17px;
    opacity: 1;
}
.cs-theme .tiles .tile .stat { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 32px; font-weight: 500; line-height: 1.1; }
.cs-theme .tiles .tile .title { margin-top: 6px; color: var(--cs-muted); font-size: 13px; text-transform: none; }
.cs-theme .tiles .tile .highlight { display: none; }

/* Sidebar */
.cs-theme .sidebar .card-sidebar .card-header { padding: 14px 16px; }
.cs-theme .sidebar .card-sidebar .card-title { font-size: 14px; }
.cs-theme .sidebar .list-group-item {
    padding: 10px 16px;
    border: 0;
    color: var(--cs-text);
    font-size: 14px;
}
.cs-theme .sidebar .list-group-item i { color: var(--cs-muted); }
.cs-theme .sidebar .list-group-item:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-theme .sidebar .list-group-item.active {
    border: 0;
    background: var(--cs-primary-soft);
    color: var(--cs-primary-active);
    font-weight: 600;
}
.cs-theme .sidebar .list-group-item.active i { color: var(--cs-primary); }
.cs-theme .sidebar .list-group-item .badge { border-radius: 999px; background: var(--cs-surface-muted); color: var(--cs-text); font-weight: 500; }

/* Tables (DataTables lists: services, invoices, tickets…) */
.cs-theme .table-container {
    padding: 16px 16px 8px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
}
.cs-theme .table-list { margin-bottom: 8px !important; border-collapse: collapse !important; }
.cs-theme .table-list > thead > tr > th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--cs-border);
    background: var(--cs-surface-muted);
    color: var(--cs-muted);
    font-size: 13px;
    font-weight: 500;
}
.cs-theme .table-list > thead > tr > th:first-child { border-radius: 10px 0 0 10px; }
.cs-theme .table-list > thead > tr > th:last-child { border-radius: 0 10px 10px 0; }
.cs-theme .table-list > tbody > tr > td {
    padding: 14px 12px;
    border-top: 0;
    border-bottom: 1px solid var(--cs-border);
    background: transparent;
    color: var(--cs-ink);
    vertical-align: middle;
}
.cs-theme .table-list > tbody > tr:last-child > td { border-bottom: 0; }
.cs-theme .table-list > tbody > tr:hover > td { background: var(--cs-surface-muted); cursor: pointer; }
.cs-theme .dataTables_wrapper .dataTables_info,
.cs-theme .dataTables_wrapper .dataTables_length { color: var(--cs-muted); font-size: 13px; }
.cs-theme .dataTables_wrapper .dataTables_filter input { height: 36px; border-radius: var(--cs-radius-sm); }
.cs-theme .pagination .page-link {
    margin: 0 2px;
    border: 0;
    border-radius: var(--cs-radius-sm);
    color: var(--cs-text);
    font-size: 13px;
}
.cs-theme .pagination .page-item.active .page-link { background: var(--cs-primary); color: #fff; }
.cs-theme .pagination .page-item.disabled .page-link { color: var(--cs-border-strong); background: transparent; }

/* Status pills (invoice / service / ticket / domain states) */
.cs-theme .label.status,
.cs-theme span.status {
    display: inline-block;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--cs-surface-muted);
    color: var(--cs-text);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}
.cs-theme .status-paid, .cs-theme .status-active, .cs-theme .status-completed, .cs-theme .status-answered, .cs-theme .status-accepted {
    background: #e8f6ee !important; color: #1a7f45 !important;
}
.cs-theme .status-unpaid, .cs-theme .status-overdue, .cs-theme .status-suspended, .cs-theme .status-fraud, .cs-theme .status-collections, .cs-theme .status-expired, .cs-theme .status-dead {
    background: #fdecef !important; color: #c4314b !important;
}
.cs-theme .status-pending, .cs-theme .status-pending-transfer, .cs-theme .status-customer-reply, .cs-theme .status-open, .cs-theme .status-draft, .cs-theme .status-delivered, .cs-theme .status-payment-pending, .cs-theme .status-grace, .cs-theme .status-redemption {
    background: var(--cs-amber-soft) !important; color: #8a5a0b !important;
}
.cs-theme .status-cancelled, .cs-theme .status-terminated, .cs-theme .status-closed, .cs-theme .status-refunded, .cs-theme .status-inactive, .cs-theme .status-transferred-away, .cs-theme .status-on-hold, .cs-theme .status-in-progress {
    background: var(--cs-surface-muted) !important; color: var(--cs-text) !important;
}

/* Generic buttons used across the client area */
.cs-theme .btn-default {
    border: 1px solid var(--cs-border-strong);
    background: var(--cs-surface);
    color: var(--cs-ink);
}
.cs-theme .btn-default:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-theme .btn-info { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; }
.cs-theme .btn-info:hover { border-color: var(--cs-primary-hover); background: var(--cs-primary-hover); }

/* Page headings and content links in the client area */
.cs-theme .primary-content h1,
.cs-theme .primary-content .h1 { font-size: clamp(1.6rem, 2.4vw, 2rem); }
.cs-theme .primary-content h1 a,
.cs-theme .announcement-single h1 a { color: var(--cs-ink); }
.cs-theme .primary-content h1 a:hover { color: var(--cs-primary); text-decoration: none; }
.cs-theme .primary-content label { color: var(--cs-text); font-weight: 500; }
.cs-theme .primary-content .form-control { height: auto; min-height: 40px; }

/* Solid buttons rendered as <a>: the global link colour would otherwise win (purple on purple) */
.cs-theme a.btn-primary, .cs-theme a.btn-primary:hover,
.cs-theme a.btn-success, .cs-theme a.btn-success:hover,
.cs-theme a.btn-info, .cs-theme a.btn-info:hover,
.cs-theme .btn-success, .cs-theme .btn-success:hover { color: #fff; }
.cs-theme a.btn-default, .cs-theme a.btn-outline-secondary { color: var(--cs-ink); }

/* Stat tiles: twenty-one puts them in a no-gutters row and strips the last tile's border */
.cs-theme .tiles .row.no-gutters { margin-left: -8px; margin-right: -8px; }
.cs-theme .tiles .row.no-gutters > [class*="col-"] { padding-left: 8px; padding-right: 8px; }
.cs-theme .tiles .row > [class*="col-"] > .tile { border: 1px solid var(--cs-border) !important; }

/* ==========================================================================
   V2RaySocks product page (module markup uses Bootstrap 3 .panel classes,
   which twenty-one's Bootstrap 4 doesn't style) — skinned as cards, module untouched
   ========================================================================== */
#v2raysocks .panel {
    margin-bottom: 20px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
    overflow: hidden;
}
#v2raysocks .panel-heading {
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--cs-border);
    background: var(--cs-surface);
}
#v2raysocks .panel-heading h1, #v2raysocks .panel-heading h2, #v2raysocks .panel-heading h3,
#v2raysocks .panel-heading h4, #v2raysocks .panel-heading h5, #v2raysocks .panel-title {
    margin: 0;
    color: var(--cs-ink);
    font-family: var(--cs-font-body);
    font-size: 16px;
    font-weight: 600;
}
#v2raysocks .panel-heading i { margin-right: 6px; color: var(--cs-primary); }
#v2raysocks .panel-heading p,
#v2raysocks .panel-heading small { margin: 4px 0 0; color: var(--cs-muted); font-size: 13px; }
#v2raysocks .panel-body { padding: 18px 20px; }
#v2raysocks .progress { height: 10px; margin: 8px 0; border-radius: 999px; background: var(--cs-surface-muted); }
#v2raysocks .progress-bar { border-radius: 999px; background-color: var(--cs-primary); background-image: none; font-size: 0; }
#v2raysocks table { margin-bottom: 0; }
#v2raysocks table > thead > tr > th {
    padding: 10px 12px;
    border: 0;
    border-bottom: 1px solid var(--cs-border);
    background: var(--cs-surface-muted);
    color: var(--cs-muted);
    font-size: 13px;
    font-weight: 500;
}
#v2raysocks table > tbody > tr > td { padding: 12px; border-top: 0; border-bottom: 1px solid var(--cs-border); color: var(--cs-ink); vertical-align: middle; }
#v2raysocks table > tbody > tr:last-child > td { border-bottom: 0; }
#v2raysocks .btn-primary, #v2raysocks a.btn-primary { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; }
#v2raysocks .alert { margin-bottom: 20px; }

/* ==========================================================================
   Client dashboard (clientareahome.tpl) — services first
   ========================================================================== */
.cs-dashboard .sidebar-secondary { display: none; }   /* footer.tpl's mobile copy of the sidebar */
.cs-dash { max-width: 1040px; margin: 0 auto; }
.cs-dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 8px 0 24px; }
.cs-theme .cs-dash-title { margin: 0 0 6px; font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.cs-dash-sub { margin: 0; color: var(--cs-muted); }
.cs-dash-alert {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
    margin-bottom: 24px; padding: 14px 18px;
    border: 1px solid #f3dfb8; border-radius: 12px; background: var(--cs-amber-soft); color: #7a4d06;
}
.cs-dash-alert i { font-size: 18px; }
.cs-dash-alert span { flex: 1; min-width: 200px; }
.cs-dash-section { margin-bottom: 32px; }
.cs-theme .cs-dash-h2 { margin: 0 0 14px; font-size: 20px; }
.cs-svc-list { display: grid; gap: 16px; }
.cs-svc {
    padding: 22px 24px;
    border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-surface);
}
.cs-svc.is-pending, .cs-svc.is-suspended { background: var(--cs-surface-muted); }
.cs-svc-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.cs-svc-title { display: flex; align-items: center; gap: 10px; }
.cs-svc-name { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 20px; font-weight: 600; }
.cs-svc-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--cs-muted); font-size: 13.5px; }
.cs-svc-usage { margin: 18px 0 4px; }
.cs-svc-usage-row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--cs-text); font-size: 13.5px; }
.cs-meter { height: 8px; border-radius: 999px; background: var(--cs-surface-muted); overflow: hidden; }
.cs-meter > span { display: block; height: 100%; border-radius: 999px; background: var(--cs-primary); transition: width .4s ease; }
.cs-svc-note { margin: 14px 0 0; color: var(--cs-text); }
.cs-svc-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.cs-svc-actions .btn.is-done, .cs-step-actions .btn.is-done { background: #1a7f45; border-color: #1a7f45; }
.cs-svc-head { position: relative; }
.cs-theme a.cs-svc-settings { margin-left: auto; color: var(--cs-muted); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.cs-theme a.cs-svc-settings:hover { color: var(--cs-primary); text-decoration: none; }
.cs-svc-head .cs-svc-meta { flex-basis: 100%; }
.cs-svc-toggle .fa-chevron-down { margin-left: 4px; font-size: .8em; transition: transform .2s ease; }
.cs-svc.is-open .cs-svc-toggle .fa-chevron-down { transform: rotate(180deg); }
.cs-svc.is-open { border-color: var(--cs-primary); box-shadow: 0 0 0 1px var(--cs-primary) inset; }
.cs-svc-connect { margin-top: 18px; animation: csFadeIn .25s ease; }
.cs-svc-connect[hidden] { display: none; }
@keyframes csFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cs-empty { padding: 40px 24px; border: 1px dashed var(--cs-border-strong); border-radius: var(--cs-radius); text-align: center; }
.cs-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 14px; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 20px; }
.cs-empty p { color: var(--cs-muted); }
.cs-dash-panel { padding: 0; height: 100%; }
.cs-dash-panel-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--cs-border); }
.cs-theme .cs-dash-h3 { margin: 0; font-family: var(--cs-font-body); font-size: 15px; font-weight: 600; }
.cs-dash-h3 i { margin-right: 6px; color: var(--cs-primary); }
.cs-dash-list { margin: 0; padding: 6px 0; list-style: none; }
.cs-dash-list a { display: flex; justify-content: space-between; gap: 12px; padding: 10px 20px; color: var(--cs-ink); }
.cs-dash-list a:hover { background: var(--cs-surface-muted); text-decoration: none; }
.cs-dash-list-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-dash-list-meta { flex: none; color: var(--cs-muted); font-size: 13px; }
.cs-dash-empty { margin: 0; padding: 18px 20px; color: var(--cs-muted); }

/* ==========================================================================
   V2RaySocks service page: "开始使用" panel (cs-client.js) above the module output
   ========================================================================== */
#v2raysocks .progress-bar { background-color: var(--cs-primary) !important; }
#v2raysocks.cs-connect-on #never_used_hint,
#v2raysocks.cs-connect-on #user_info,
#v2raysocks.cs-connect-on #connection_info { display: none !important; }
.cs-connect {
    margin-bottom: 20px;
    padding: 24px;
    border: 1px solid transparent;
    border-radius: var(--cs-radius);
    background:
        linear-gradient(var(--cs-surface), var(--cs-surface)) padding-box,
        linear-gradient(135deg, #a96ef7, #7643c9 45%, #2bb5a3) border-box;
}
.cs-connect-loading { color: var(--cs-muted); }
.cs-connect-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; margin-bottom: 20px; }
.cs-theme .cs-connect-title { margin: 0 0 4px; font-size: 22px; }
.cs-connect-sub { margin: 0; color: var(--cs-muted); }
.cs-connect-usage { flex: 1; min-width: 240px; max-width: 360px; }
.cs-connect-alert { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.cs-steps { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.cs-step { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--cs-border); }
.cs-step-num {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--cs-primary-soft); color: var(--cs-primary-active);
    font-family: var(--cs-font-head); font-weight: 600;
}
.cs-step-body { flex: 1; min-width: 0; }
.cs-theme .cs-step-body h3 { margin: 4px 0 4px; font-family: var(--cs-font-body); font-size: 16px; font-weight: 600; }
.cs-step-body > p { margin: 0 0 12px; color: var(--cs-muted); font-size: 14px; }
.cs-os-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cs-os-tab {
    padding: 6px 14px; border: 1px solid var(--cs-border); border-radius: 999px;
    background: var(--cs-surface); color: var(--cs-text); font-size: 13px; cursor: pointer;
}
.cs-os-tab:hover { border-color: var(--cs-border-strong); }
.cs-os-tab.is-active { border-color: var(--cs-primary); background: var(--cs-primary-soft); color: var(--cs-primary-active); font-weight: 600; }
.cs-apps { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cs-app {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 14px 10px 12px; border: 1px solid var(--cs-border); border-radius: 12px;
    background: var(--cs-surface); text-align: center; cursor: pointer;
}
.cs-app:hover { border-color: var(--cs-border-strong); }
.cs-app:focus { outline: none; box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-app.is-active { border-color: var(--cs-primary); box-shadow: 0 0 0 1px var(--cs-primary) inset; background: var(--cs-primary-soft); }
.cs-app img, .cs-app-ph { width: 40px; height: 40px; border-radius: 10px; object-fit: contain; }
.cs-app-ph { display: inline-flex; align-items: center; justify-content: center; background: var(--cs-surface-muted); color: var(--cs-muted); }
.cs-app-name { color: var(--cs-ink); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.cs-theme .cs-app-dl { font-size: 12.5px; font-weight: 500; }
.cs-step-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 575.98px) {
    .cs-connect { padding: 18px; }
    .cs-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-svc { padding: 18px; }
    .cs-svc-actions .btn, .cs-step-actions .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Invoice page (viewinvoice.tpl — standalone, no site header)
   ========================================================================== */
body.cs-invoice-page { background: var(--cs-surface-muted); min-height: 100vh; }
.cs-inv-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 760px; margin: 0 auto; padding: 24px 16px 0; }
.cs-inv-logo img { height: 34px; width: auto; }
.cs-theme a.cs-inv-back { color: var(--cs-text); font-size: 14px; font-weight: 500; }
.cs-theme a.cs-inv-back:hover { color: var(--cs-primary); text-decoration: none; }
.cs-inv-back .fa-arrow-left { margin-right: 4px; font-size: .85em; }
.cs-inv { max-width: 760px; margin: 0 auto; padding: 20px 16px 56px; }

.cs-next {
    display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px;
    margin-bottom: 20px; padding: 24px; border-radius: var(--cs-radius);
    background: var(--cs-surface); border: 1px solid var(--cs-primary);
    box-shadow: 0 0 0 1px var(--cs-primary) inset, 0 12px 32px -18px rgba(118, 67, 201, .45);
    animation: csFadeIn .3s ease;
}
.cs-next-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: 50%; background: #e7f6ec; color: #1a7f45; font-size: 20px;
}
.cs-next.is-pending .cs-next-icon { background: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-next-body { flex: 1 1 260px; min-width: 0; }
.cs-theme .cs-next-body h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.cs-next-body p { margin: 0; color: var(--cs-text); }
.cs-next .btn { flex: none; }

.cs-inv-card { background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); padding: 28px; }
.cs-inv-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cs-inv-eyebrow { color: var(--cs-muted); font-family: var(--cs-font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.cs-theme .cs-inv-title { margin: 2px 0 0; font-size: 28px; font-weight: 600; }
.cs-inv-status {
    display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px;
    background: var(--cs-surface-muted); color: var(--cs-text); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.cs-inv-status.is-paid { background: #e7f6ec; color: #1a7f45; }
.cs-inv-status.is-unpaid, .cs-inv-status.is-collections { background: #fdecec; color: #c0392b; }
.cs-inv-status.is-payment-pending, .cs-inv-status.is-draft { background: var(--cs-amber-soft); color: var(--cs-amber); }

.cs-inv-pay {
    display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px;
    margin-top: 24px; padding: 20px; border-radius: 12px; background: var(--cs-primary-soft);
}
.cs-inv-due { display: flex; flex-direction: column; }
.cs-inv-label { display: block; margin-bottom: 4px; color: var(--cs-muted); font-size: 13px; font-weight: 500; }
.cs-inv-amount { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 32px; font-weight: 600; line-height: 1.15; }
.cs-inv-muted { color: var(--cs-muted); font-size: 13px; }
.cs-inv-pay-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.cs-inv-gateway { margin: 0; min-width: 180px; }
.cs-inv-gateway .custom-select { border-radius: var(--cs-radius-sm); }
.cs-inv-paybtn form { margin: 0; }
.cs-inv-paybtn .btn, .cs-inv-paybtn input[type=submit], .cs-inv-paybtn button {
    min-height: 38px; padding: 8px 22px; border: 1px solid var(--cs-primary); border-radius: var(--cs-radius-sm);
    background: var(--cs-primary); color: #fff; font-weight: 600;
}
.cs-inv-paybtn .btn:hover, .cs-inv-paybtn input[type=submit]:hover, .cs-inv-paybtn button:hover { background: var(--cs-primary-hover); border-color: var(--cs-primary-hover); color: #fff; }

.cs-inv-credit { margin-top: 16px; padding: 16px; border: 1px dashed var(--cs-border-strong); border-radius: 12px; }
.cs-inv-credit p { margin: 0 0 10px; }

.cs-inv-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 24px 0 0; padding-top: 24px; border-top: 1px solid var(--cs-border); }
.cs-inv-meta dt { margin-bottom: 4px; color: var(--cs-muted); font-size: 13px; font-weight: 500; }
.cs-inv-meta dd { margin: 0; color: var(--cs-ink); font-size: 14px; word-break: break-word; }
.cs-inv-notes { margin-top: 20px; padding: 14px 16px; border-radius: 12px; background: var(--cs-surface-muted); font-size: 14px; }

.cs-inv-section { margin-top: 28px; }
.cs-theme .cs-inv-h2 { margin: 0 0 8px; font-family: var(--cs-font-body); font-size: 15px; font-weight: 600; }
.cs-inv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cs-inv-table td { padding: 12px 0; border-top: 1px solid var(--cs-border); color: var(--cs-ink); vertical-align: top; }
.cs-inv-table tfoot td { padding: 6px 0; border-top: 0; color: var(--cs-text); }
.cs-inv-table tfoot tr:first-child td { padding-top: 14px; border-top: 1px solid var(--cs-border); }
.cs-inv-table .cs-inv-total td { padding-top: 10px; color: var(--cs-ink); font-size: 16px; font-weight: 600; }
.cs-num { padding-left: 16px !important; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cs-inv-txid { color: var(--cs-muted); font-family: var(--cs-font-mono); font-size: 12px; word-break: break-all; }
.cs-inv-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }

@media (max-width: 575.98px) {
    .cs-inv-card { padding: 20px 18px; }
    .cs-next { padding: 20px 18px; }
    .cs-next .btn { width: 100%; }
    .cs-inv-meta { grid-template-columns: 1fr; }
    .cs-inv-pay-actions, .cs-inv-gateway, .cs-inv-paybtn, .cs-inv-paybtn .btn, .cs-inv-paybtn input[type=submit], .cs-inv-paybtn button { width: 100%; }
}
@media print {
    body.cs-invoice-page { background: #fff; }
    .cs-inv-card { border: 0; padding: 0; }
}

/* Card nudges: renewal due soon / traffic nearly used */
.cs-svc-warn {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px;
    margin-top: 14px; padding: 10px 14px; border-radius: 10px;
    background: var(--cs-amber-soft); color: #7a4d06; font-size: 14px;
}
.cs-svc-warn[hidden] { display: none; }
.cs-svc-warn > i { color: var(--cs-amber); }
.cs-svc-warn > span { flex: 1 1 200px; }
.cs-svc-warn.is-out { background: #fdecec; color: #8f2a1f; }
.cs-svc-warn.is-out > i { color: #c0392b; }
.cs-meter.is-high > span { background: var(--cs-amber); }
.cs-meter.is-out > span { background: #c0392b; }

/* Subscription QR code (step 2) */
.cs-theme .btn.btn-outline-secondary.is-active { border-color: var(--cs-primary); color: var(--cs-primary); background: var(--cs-primary-soft); }
.cs-qr { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 14px; padding: 16px; border: 1px solid var(--cs-border); border-radius: 12px; animation: csFadeIn .25s ease; }
.cs-qr[hidden] { display: none; }
.cs-qr-code { flex: none; width: 200px; height: 200px; padding: 6px; border-radius: 10px; background: #fff; box-shadow: 0 0 0 1px var(--cs-border); }
.cs-qr-code svg { display: block; width: 100%; height: 100%; }
.cs-qr-text { flex: 1 1 200px; font-size: 14px; }
.cs-qr-text p { margin: 0 0 6px; color: var(--cs-text); }
.cs-qr-text .cs-qr-warn { margin: 0; color: var(--cs-muted); font-size: 13px; }

/* Order complete (orderforms/cybersaury_cart/complete.tpl) */
.cs-complete { max-width: 760px; margin: 32px auto 48px; }
.cs-theme .cs-complete-title { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.cs-complete .cs-next-body p { margin: 0; }
@media (max-width: 575.98px) { .cs-complete .cs-next .btn { width: 100%; } }

/* Services / invoices lists */
.cs-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cs-list-head .cs-dash-h2 { margin: 0; }
.cs-theme a.cs-svc-name { color: var(--cs-ink); }
.cs-theme a.cs-svc-name:hover { color: var(--cs-primary); text-decoration: none; }
.cs-svc-settings .fa-chevron-right { margin-left: 2px; font-size: .75em; }

.cs-provisioning { color: var(--cs-primary); font-weight: 500; }
.cs-provisioning .fa-spin { margin-right: 6px; }
.cs-svc[hidden], .cs-inv-list li[hidden] { display: none; }

/* Login / password reset */
.cs-auth-page #main-body { background: var(--cs-surface-muted); }
.cs-auth { max-width: 440px; margin: 40px auto 56px; }
.cs-auth-card { padding: 36px 36px 32px; background: var(--cs-surface); border: 1px solid var(--cs-border); border-radius: var(--cs-radius); box-shadow: 0 18px 40px -28px rgba(26, 27, 30, .35); }
.cs-theme .cs-auth-title { margin: 0 0 6px; font-size: 26px; font-weight: 600; }
.cs-auth-sub { margin: 0 0 24px; color: var(--cs-muted); }
.cs-auth label { color: var(--cs-ink); font-size: 14px; font-weight: 500; }
.cs-auth .form-control { height: 44px; border-radius: var(--cs-radius-sm); }
.cs-auth-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.cs-theme a.cs-auth-link { color: var(--cs-muted); font-size: 13px; }
.cs-theme a.cs-auth-link:hover { color: var(--cs-primary); }
.cs-pw { position: relative; }
.cs-pw .form-control { padding-right: 44px; }
.cs-pw-toggle { position: absolute; top: 0; right: 0; width: 44px; height: 44px; border: 0; background: transparent; color: var(--cs-muted); }
.cs-pw-toggle:hover { color: var(--cs-ink); }
.cs-auth-check { display: flex; align-items: center; gap: 8px; margin: 4px 0 20px; font-weight: 400 !important; color: var(--cs-text) !important; cursor: pointer; }
.cs-auth-check input { width: 16px; height: 16px; accent-color: var(--cs-primary); }
.cs-auth-foot { margin: 20px 0 0; color: var(--cs-muted); font-size: 14px; text-align: center; }
.cs-auth-foot .fa-arrow-right, .cs-auth-foot .fa-arrow-left { font-size: .8em; }
.cs-auth-done { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 22px; }
.cs-auth-card-alert { max-width: 440px; margin: 24px auto 0; }
@media (max-width: 575.98px) {
    .cs-auth { margin: 20px auto 40px; }
    .cs-auth-card { padding: 28px 20px 24px; }
}

/* Profile: the email-only sign-up stores an invisible last name; don't show that field. */
.cs-profile .cs-lastname:has(> #inputLastName[value="\200B"]) { display: none; }

/* App cards: direct download button, "other builds" link, recommended badge, per-OS install hint */
.cs-app { position: relative; }
.cs-app-badge { position: absolute; top: 8px; right: 8px; padding: 1px 7px; border-radius: 999px; background: var(--cs-primary); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; }
.cs-theme .cs-app .cs-app-dl { margin-top: 2px; padding: 3px 12px; font-size: 12.5px; border-radius: 999px; }
.cs-theme .cs-app .cs-app-dl i { margin-right: 3px; font-size: .9em; }
.cs-theme a.cs-app-more { color: var(--cs-muted); font-size: 12px; }
.cs-theme a.cs-app-more:hover { color: var(--cs-primary); }
.cs-os-hint { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--cs-surface-muted); color: var(--cs-text); font-size: 13px; line-height: 1.55; }
.cs-os-hint[hidden] { display: none; }

/* ==========================================================================
   Page titles for stock pages + stock DataTables lists (tickets, emails, domains…)
   restyled to match the invoice / service lists.
   ========================================================================== */
.cs-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.cs-theme .cs-page-title { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -.01em; }

.cs-theme .table-container {
    padding: 0; border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
    background: var(--cs-surface); overflow: hidden; box-shadow: none;
}
.cs-theme .dataTables_wrapper { display: flex; flex-wrap: wrap; }
.cs-theme .dataTables_wrapper .listtable { display: flex; flex-wrap: wrap; align-items: center; flex: 0 0 100%; padding: 0; }
.cs-theme .dataTables_wrapper .dataTables_info { order: 1; float: none; padding: 16px 18px 12px; color: var(--cs-muted); font-size: 13px; }
.cs-theme .dataTables_wrapper .dataTables_filter { order: 2; float: none; margin-left: auto; padding: 10px 18px; }
.cs-theme .dataTables_wrapper .dataTables_filter label { margin: 0; }
.cs-theme .dataTables_wrapper .dataTables_filter input {
    width: 220px; height: 36px; margin: 0; padding: 6px 12px 6px 34px; border: 1px solid var(--cs-border);
    border-radius: var(--cs-radius-sm); background: var(--cs-surface-muted) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%238a8f98' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 12px center;
    font-size: 14px;
}
.cs-theme .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--cs-primary); background-color: var(--cs-surface); box-shadow: 0 0 0 3px var(--cs-primary-ring); outline: none; }
.cs-theme .dataTables_wrapper .listtable > table { order: 3; flex: 0 0 100%; width: 100% !important; max-width: 100%; margin: 0 !important; }
.cs-theme table.table-list { margin-bottom: 0; border: 0 !important; border-collapse: collapse; background: transparent; }
.cs-theme table.table-list thead th {
    padding: 12px 18px; border: 0 !important; border-top: 1px solid var(--cs-border) !important; border-bottom: 1px solid var(--cs-border) !important;
    background: var(--cs-surface-muted); color: var(--cs-muted); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; text-align: left; white-space: nowrap;
}
.cs-theme table.table-list thead th.sorting::after, .cs-theme table.table-list thead th.sorting_asc::after, .cs-theme table.table-list thead th.sorting_desc::after,
.cs-theme table.table-list thead th.sorting::before, .cs-theme table.table-list thead th.sorting_asc::before, .cs-theme table.table-list thead th.sorting_desc::before { opacity: .25; }
.cs-theme table.table-list thead th.sorting_asc::after, .cs-theme table.table-list thead th.sorting_desc::after,
.cs-theme table.table-list thead th.sorting_asc::before, .cs-theme table.table-list thead th.sorting_desc::before { opacity: .7; }
.cs-theme table.table-list tbody td {
    padding: 14px 18px; border: 0 !important; border-top: 1px solid var(--cs-border) !important; background: transparent;
    color: var(--cs-ink); font-size: 14px; vertical-align: middle; text-align: left;
}
.cs-theme table.table-list tbody tr:first-child td { border-top: 0 !important; }
.cs-theme table.table-list tbody td:last-child:has(.btn) { text-align: right; }
.cs-theme table.table-list tbody tr { cursor: pointer; transition: background-color .15s ease; }
.cs-theme table.table-list tbody tr:hover td { background: var(--cs-surface-muted); }
.cs-theme table.table-list tbody td.dataTables_empty { padding: 40px 18px; color: var(--cs-muted); text-align: center; cursor: default; background: transparent !important; }
.cs-theme table.table-list tbody td .text-muted, .cs-theme table.table-list tbody td small { color: var(--cs-muted) !important; }
.cs-theme table.table-list tbody td .btn { padding: 4px 12px; border: 1px solid var(--cs-border-strong); border-radius: 999px; background: var(--cs-surface); color: var(--cs-ink); font-size: 12.5px; font-weight: 500; }
.cs-theme table.table-list tbody td .btn:hover { border-color: var(--cs-primary); color: var(--cs-primary); }
.cs-theme .dataTables_wrapper .dataTables_length,
.cs-theme .dataTables_wrapper .dataTables_paginate {
    display: flex; align-items: center; float: none; margin: 0; padding: 12px 18px; border-top: 1px solid var(--cs-border);
}
.cs-theme .dataTables_wrapper .dataTables_length { order: 2; flex: 1 1 auto; }
.cs-theme .dataTables_wrapper .dataTables_paginate { order: 3; flex: 1 1 auto; justify-content: flex-end; }
.cs-theme .dataTables_wrapper .dataTables_length label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--cs-muted); font-size: 13px; }
.cs-theme .dataTables_wrapper .dataTables_length select { width: auto; height: 30px; padding: 2px 26px 2px 10px; border-radius: var(--cs-radius-sm); font-size: 13px; }
.cs-theme .dataTables_wrapper .pagination { gap: 4px; margin: 0; }
.cs-theme .dataTables_wrapper .pagination .page-link {
    min-width: 32px; height: 32px; padding: 0 10px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm) !important;
    color: var(--cs-text); font-size: 13px; line-height: 30px; text-align: center; background: var(--cs-surface);
}
.cs-theme .dataTables_wrapper .pagination .page-item.active .page-link { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; }
.cs-theme .dataTables_wrapper .pagination .page-item.disabled .page-link { color: var(--cs-border-strong); background: var(--cs-surface); }
.cs-theme #tableLoading { padding: 24px; color: var(--cs-muted); }
/* Plain stock tables outside DataTables (e.g. add funds limits) */
.cs-theme .primary-content > .table-responsive > table.table, .cs-theme .primary-content table.table-striped {
    overflow: hidden; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); border-collapse: separate; border-spacing: 0;
}
.cs-theme .primary-content table.table-striped tbody tr:nth-of-type(odd) { background: transparent; }
.cs-theme .primary-content table.table-striped td { padding: 12px 18px; border-top: 1px solid var(--cs-border); color: var(--cs-ink); font-size: 14px; }
.cs-theme .primary-content table.table-striped tr:first-child td { border-top: 0; }
@media (max-width: 575.98px) {
    .cs-theme .dataTables_wrapper .dataTables_filter { order: 0; margin-left: 0; flex-basis: 100%; padding: 14px 14px 0; }
    .cs-theme .dataTables_wrapper .dataTables_filter label { display: block; }
    .cs-theme .dataTables_wrapper .dataTables_info { padding: 10px 14px; }
    .cs-theme .dataTables_wrapper .dataTables_filter input { width: 100%; }
    .cs-theme .dataTables_wrapper .dataTables_paginate { justify-content: center; }
    .cs-theme .dataTables_wrapper .dataTables_length { display: none; }
    .cs-theme table.table-list thead th, .cs-theme table.table-list tbody td { padding-left: 14px; padding-right: 14px; }
}
.cs-theme table.table-list tbody td.text-center, .cs-theme table.table-list thead th.text-center { text-align: left !important; }
.cs-theme table.table-list tbody td.text-center:last-child:has(.btn) { text-align: right !important; }
/* Server status: the stock page repeats "no issues" and shows a dead pager */
.cs-page-serverstatus .primary-content > .alert-success ~ p { display: none; }
.cs-theme nav[aria-label="Network issues navigation"]:not(:has(.page-item:not(.disabled))) { display: none; }
#v2raysocks table th { white-space: nowrap; }

/* Header notifications: bell + dropdown panel (replaces the stock topbar) */
.cs-notify { position: relative; }
.cs-notify > .cs-icon-btn { position: relative; }
.cs-notify > .cs-icon-btn .cs-badge { position: absolute; top: 2px; right: 0; }
.cs-theme .cs-notify-menu {
    width: 340px; max-width: calc(100vw - 32px); margin-top: 8px; padding: 0; overflow: hidden;
    border: 1px solid var(--cs-border); border-radius: 14px; background: var(--cs-surface);
    box-shadow: 0 18px 40px -16px rgba(26, 27, 30, .28);
}
.cs-theme .cs-notify-menu.show { animation: csFadeIn .18s ease; }
.cs-notify-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 10px; color: var(--cs-ink); font-size: 15px; font-weight: 600; }
.cs-notify-count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 12px; font-weight: 600; }
.cs-theme a.cs-notify-item {
    display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--cs-border);
    color: var(--cs-text); font-size: 14px; line-height: 1.5; text-decoration: none; white-space: normal;
    transition: background-color .15s ease;
}
.cs-theme a.cs-notify-item:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-notify-icon {
    flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    border-radius: 50%; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 12px;
}
.cs-notify-item.is-warning .cs-notify-icon { background: var(--cs-amber-soft); color: var(--cs-amber); }
.cs-notify-item.is-danger .cs-notify-icon { background: #fdecec; color: #c0392b; }
.cs-notify-item.is-success .cs-notify-icon { background: #e7f6ec; color: #1a7f45; }
.cs-notify-text { flex: 1; min-width: 0; padding-top: 4px; }
.cs-notify-go { flex: none; margin-top: 10px; color: var(--cs-border-strong); font-size: 11px; }
.cs-notify-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 26px 16px 30px; border-top: 1px solid var(--cs-border); color: var(--cs-muted); font-size: 14px; }
.cs-notify-empty i { font-size: 22px; color: var(--cs-border-strong); }
@media (max-width: 1199.98px) {
    .cs-nav-mobile .cs-notify-menu { position: fixed !important; top: 64px !important; left: 16px !important; right: 16px !important; width: auto; max-width: none; transform: none !important; }
}

/* ==========================================================================
   Help centre (knowledgebase*.tpl)
   ========================================================================== */
.cs-kb { max-width: 920px; margin: 8px auto 48px; }
.cs-kb-read { max-width: 760px; }
.cs-kb-hero { padding: 28px 0 8px; text-align: center; }
.cs-kb-hero.is-compact { padding: 8px 0 4px; text-align: left; }
.cs-theme .cs-kb-title { margin: 0 0 8px; font-size: 34px; font-weight: 600; letter-spacing: -.02em; }
.cs-kb-hero.is-compact .cs-kb-title { font-size: 28px; }
.cs-kb-sub { margin: 0 0 22px; color: var(--cs-muted); font-size: 16px; }
.cs-kb-search {
    position: relative; display: flex; align-items: center; max-width: 620px; margin: 0 auto;
    padding: 6px; border: 1px solid var(--cs-border); border-radius: 14px; background: var(--cs-surface);
    box-shadow: 0 12px 30px -20px rgba(26, 27, 30, .35); transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-kb-search:focus-within { border-color: var(--cs-primary); box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-kb-search > i { position: absolute; left: 20px; color: var(--cs-muted); }
.cs-kb-search input { flex: 1; min-width: 0; height: 44px; padding: 0 12px 0 42px; border: 0; background: transparent; color: var(--cs-ink); font-size: 16px; outline: none; }
.cs-kb-search .btn { flex: none; height: 44px; padding: 0 22px; border-radius: 10px; }
.cs-kb-search.is-small { max-width: none; margin: 14px 0 0; box-shadow: none; }
.cs-kb-search.is-small input, .cs-kb-search.is-small .btn { height: 38px; }

.cs-kb-section { margin-top: 32px; }
.cs-theme .cs-kb-h2 { margin: 0 0 12px; color: var(--cs-muted); font-family: var(--cs-font-body); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cs-kb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cs-theme a.cs-kb-cat {
    display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius);
    background: var(--cs-surface); color: var(--cs-text); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.cs-theme a.cs-kb-cat:hover { border-color: var(--cs-primary); box-shadow: 0 10px 24px -18px rgba(118, 67, 201, .55); transform: translateY(-1px); }
.cs-kb-cat-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-kb-cat-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cs-kb-cat-name { color: var(--cs-ink); font-size: 16px; font-weight: 600; }
.cs-kb-cat-meta { color: var(--cs-muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-kb-cat-go { color: var(--cs-border-strong); font-size: 13px; transition: transform .15s ease, color .15s ease; }
.cs-theme a.cs-kb-cat:hover .cs-kb-cat-go { color: var(--cs-primary); transform: translateX(2px); }

.cs-kb-list { overflow: hidden; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); }
.cs-theme a.cs-kb-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; color: var(--cs-text); text-decoration: none; transition: background-color .15s ease; }
.cs-theme a.cs-kb-row + a.cs-kb-row { border-top: 1px solid var(--cs-border); }
.cs-theme a.cs-kb-row:hover { background: var(--cs-surface-muted); }
.cs-kb-row-icon { flex: none; color: var(--cs-muted); }
.cs-kb-row-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cs-kb-row-title { color: var(--cs-ink); font-size: 15px; font-weight: 500; }
.cs-theme a.cs-kb-row:hover .cs-kb-row-title { color: var(--cs-primary); }
.cs-kb-row-sub { overflow: hidden; color: var(--cs-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.cs-kb-row-go { flex: none; color: var(--cs-border-strong); font-size: 12px; }
.cs-kb-empty { padding: 28px 18px; color: var(--cs-muted); text-align: center; }

.cs-kb-cta {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
    margin-top: 32px; padding: 20px 22px; border-radius: var(--cs-radius); background: var(--cs-surface-muted);
}
.cs-kb-cta strong { display: block; color: var(--cs-ink); font-size: 16px; }
.cs-kb-cta span { color: var(--cs-text); font-size: 14px; }
.cs-theme a.cs-kb-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 14px; color: var(--cs-muted); font-size: 14px; font-weight: 500; }
.cs-theme a.cs-kb-back:hover { color: var(--cs-primary); text-decoration: none; }
.cs-kb-back .fa-arrow-left { font-size: .85em; }

/* Article */
.cs-kb-article { padding: 34px 40px 28px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.cs-kb-article-head { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px solid var(--cs-border); }
.cs-theme .cs-kb-article-title { margin: 0 0 10px; font-size: 30px; font-weight: 600; line-height: 1.3; letter-spacing: -.015em; }
.cs-kb-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--cs-muted); font-size: 13px; }
.cs-kb-tag { padding: 2px 10px; border-radius: 999px; background: var(--cs-primary-soft); color: var(--cs-primary); font-weight: 500; }

.cs-prose { color: var(--cs-text); font-size: 16px; line-height: 1.8; word-wrap: break-word; }
.cs-prose > :first-child { margin-top: 0; }
.cs-prose p { margin: 0 0 14px; }
.cs-prose p:empty, .cs-prose p:has(> br:only-child) { display: none; }
.cs-theme .cs-prose h1, .cs-theme .cs-prose h2, .cs-theme .cs-prose h3, .cs-theme .cs-prose h4 {
    margin: 32px 0 12px; color: var(--cs-ink); font-family: var(--cs-font-head); font-weight: 600; line-height: 1.35; letter-spacing: -.01em;
}
.cs-theme .cs-prose h1, .cs-theme .cs-prose h2 { font-size: 22px; padding-bottom: 8px; border-bottom: 1px solid var(--cs-border); }
.cs-theme .cs-prose h3 { font-size: 19px; }
.cs-theme .cs-prose h4 { font-size: 16px; }
.cs-prose h1 strong, .cs-prose h2 strong, .cs-prose h3 strong, .cs-prose h4 strong { font-weight: inherit; }
.cs-prose ul, .cs-prose ol { margin: 0 0 14px; padding-left: 1.4em; }
.cs-prose li { margin: 4px 0; }
.cs-prose li::marker { color: var(--cs-primary); }
.cs-prose strong { color: var(--cs-ink); font-weight: 600; }
.cs-theme .cs-prose a { color: var(--cs-primary); font-weight: 500; text-decoration: underline; text-decoration-color: rgba(118, 67, 201, .35); text-underline-offset: 3px; }
.cs-theme .cs-prose a:hover { text-decoration-color: var(--cs-primary); }
.cs-prose img {
    display: block; max-width: 100%; height: auto !important; margin: 8px 0 18px;
    border: 1px solid var(--cs-border); border-radius: 14px; box-shadow: 0 14px 34px -24px rgba(26, 27, 30, .45);
}
.cs-prose p:has(> img) { margin: 0; }
.cs-prose code { padding: 2px 6px; border-radius: 6px; background: var(--cs-surface-muted); color: var(--cs-ink); font-family: var(--cs-font-mono); font-size: .9em; }
.cs-prose pre { padding: 14px 16px; border-radius: 12px; background: #1a1b1e; color: #e8e8ea; font-size: 14px; overflow-x: auto; }
.cs-prose pre code { padding: 0; background: transparent; color: inherit; }
.cs-prose blockquote { margin: 0 0 16px; padding: 12px 16px; border-left: 3px solid var(--cs-primary); border-radius: 0 10px 10px 0; background: var(--cs-primary-soft); color: var(--cs-ink); }
.cs-prose table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 14px; }
.cs-prose th, .cs-prose td { padding: 10px 12px; border: 1px solid var(--cs-border); text-align: left; }
.cs-prose th { background: var(--cs-surface-muted); color: var(--cs-ink); font-weight: 600; }
.cs-prose hr { margin: 28px 0; border: 0; border-top: 1px solid var(--cs-border); }

.cs-kb-vote { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--cs-border); }
.cs-kb-vote form { display: flex; gap: 8px; margin: 0; }
.cs-kb-vote-q { color: var(--cs-ink); font-weight: 500; }
.cs-theme .cs-kb-vote-btn { padding: 6px 16px; border: 1px solid var(--cs-border-strong); border-radius: 999px; background: var(--cs-surface); color: var(--cs-text); font-size: 14px; }
.cs-theme .cs-kb-vote-btn:hover { border-color: var(--cs-primary); background: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-kb-vote-done { color: #1a7f45; font-weight: 500; }

@media (max-width: 767.98px) {
    .cs-kb { margin-top: 0; }
    .cs-kb-hero { padding-top: 12px; }
    .cs-theme .cs-kb-title { font-size: 27px; }
    .cs-kb-article { padding: 22px 18px 20px; border-radius: var(--cs-radius); }
    .cs-theme .cs-kb-article-title { font-size: 24px; }
    .cs-prose { font-size: 15.5px; }
    .cs-kb-search .btn { padding: 0 16px; }
    .cs-kb-cta .btn { width: 100%; }
}
@media print {
    .cs-kb-back, .cs-kb-vote, .cs-kb-cta, .cs-kb-section { display: none !important; }
    .cs-kb-article { border: 0; padding: 0; }
}

/* Announcements (announcements.tpl / viewannouncement.tpl) — reuse the help-centre layout */
.cs-news-list { display: grid; gap: 14px; margin-top: 8px; }
.cs-news-item { padding: 24px 26px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.cs-news-item:hover { border-color: var(--cs-border-strong); box-shadow: 0 12px 28px -22px rgba(26, 27, 30, .4); }
.cs-news-date { display: block; margin-bottom: 6px; color: var(--cs-primary); font-family: var(--cs-font-mono); font-size: 13px; }
.cs-theme .cs-news-title { margin: 0 0 8px; font-size: 21px; font-weight: 600; line-height: 1.35; }
.cs-theme .cs-news-title a { color: var(--cs-ink); }
.cs-theme .cs-news-title a:hover { color: var(--cs-primary); text-decoration: none; }
.cs-news-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 12px; color: var(--cs-text); font-size: 15px; line-height: 1.7; }
.cs-theme a.cs-news-more { display: inline-flex; align-items: center; gap: 6px; color: var(--cs-primary); font-size: 14px; font-weight: 500; }
.cs-theme a.cs-news-more:hover { text-decoration: none; }
.cs-news-more .fa-arrow-right { font-size: .8em; transition: transform .15s ease; }
.cs-theme a.cs-news-more:hover .fa-arrow-right { transform: translateX(2px); }
.cs-news-pager { display: flex; justify-content: center; margin-top: 22px; }
.cs-news-pager .pagination { gap: 4px; }
.cs-news-pager .page-link { min-width: 34px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-sm) !important; color: var(--cs-text); text-align: center; }
.cs-news-pager .page-item.active .page-link { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; }
@media (max-width: 767.98px) { .cs-news-item { padding: 18px; } .cs-theme .cs-news-title { font-size: 19px; } }
/* Help centre + announcements have no sidebar; twenty-one's footer still repeats it on small screens. */
.cs-page-knowledgebase .sidebar, .cs-page-knowledgebasecat .sidebar, .cs-page-knowledgebasearticle .sidebar,
.cs-page-announcements .sidebar, .cs-page-viewannouncement .sidebar { display: none !important; }

/* ==========================================================================
   Support tickets (list / submit / view) — help-centre layout
   ========================================================================== */
.cs-page-supportticketslist .sidebar, .cs-page-supportticketsubmit-stepone .sidebar, .cs-page-supportticketsubmit-steptwo .sidebar,
.cs-page-supportticketsubmit-confirm .sidebar, .cs-page-viewticket .sidebar { display: none !important; }
.cs-tk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; padding: 8px 0 20px; }
.cs-tk-head .cs-kb-title { font-size: 30px; }
.cs-tk-filters { display: flex; gap: 8px; margin-bottom: 14px; }
.cs-theme .cs-tk-chip { padding: 6px 14px; border: 1px solid var(--cs-border); border-radius: 999px; background: var(--cs-surface); color: var(--cs-text); font-size: 14px; cursor: pointer; transition: all .15s ease; }
.cs-theme .cs-tk-chip:hover { border-color: var(--cs-border-strong); }
.cs-theme .cs-tk-chip.is-active { border-color: var(--cs-primary); background: var(--cs-primary-soft); color: var(--cs-primary); font-weight: 500; }
.cs-theme a.cs-tk-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; color: var(--cs-text); text-decoration: none; transition: background-color .15s ease; }
.cs-theme a.cs-tk-row + a.cs-tk-row { border-top: 1px solid var(--cs-border); }
.cs-theme a.cs-tk-row:hover { background: var(--cs-surface-muted); }
.cs-theme a.cs-tk-row[hidden] { display: none; }
.cs-tk-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--cs-surface-muted); color: var(--cs-muted); }
.cs-tk-row.is-unread .cs-tk-icon { background: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-tk-row.is-unread .cs-kb-row-title { font-weight: 600; }
.cs-tk-dot { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 50%; background: var(--cs-primary); vertical-align: middle; }
.cs-tk-meta { color: var(--cs-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cs-tk-status {
    flex: none; display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
    background: color-mix(in srgb, var(--cs-tk-color, #7643c9) 12%, white); color: var(--cs-tk-color, var(--cs-primary)); font-size: 12.5px; font-weight: 600;
}
.cs-tk-status.is-open { --cs-tk-color: #1a7f45; }
.cs-tk-status.is-answered { --cs-tk-color: #7643c9; }
.cs-tk-status.is-customer-reply { --cs-tk-color: #c27c0e; }
.cs-tk-status.is-closed, .cs-tk-status.is-closed[style] { --cs-tk-color: #8a8f98; }
.cs-tk-empty { padding: 48px 24px; border: 1px dashed var(--cs-border-strong); border-radius: var(--cs-radius); text-align: center; }
.cs-tk-empty p { max-width: 420px; margin: 6px auto 18px; color: var(--cs-text); }
.cs-tk-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cs-kb-cat-meta.cs-wrap { white-space: normal; }

.cs-tk-form .cs-kb-article-title { margin-bottom: 18px; }
.cs-tk-as { margin: -8px 0 18px; color: var(--cs-muted); font-size: 14px; }
.cs-tk-form label, .cs-tk-reply label { color: var(--cs-ink); font-size: 14px; font-weight: 500; }
.cs-tk-hint { display: block; margin-top: 4px; color: var(--cs-muted); }
.cs-tk-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.cs-theme .cs-tk-form .editor-toolbar, .cs-theme .cs-tk-reply .editor-toolbar { border-color: var(--cs-border); border-radius: 10px 10px 0 0; opacity: 1; }
.cs-theme .cs-tk-form .CodeMirror, .cs-theme .cs-tk-reply .CodeMirror { border-color: var(--cs-border); border-radius: 0 0 10px 10px; }
.cs-theme .cs-tk-form .custom-file-label, .cs-theme .cs-tk-reply .custom-file-label { border-color: var(--cs-border); border-radius: var(--cs-radius-sm); }

.cs-tk-title-card { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px 20px; padding: 24px 28px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.cs-tk-title-main { flex: 1 1 320px; min-width: 0; }
.cs-tk-title-main .cs-kb-article-title { margin: 4px 0 0; font-size: 24px; }
.cs-tk-title-side { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cs-tk-closed { margin-top: 12px; padding: 10px 14px; border-radius: 10px; background: var(--cs-surface-muted); color: var(--cs-text); font-size: 14px; }
.cs-tk-thread { display: flex; flex-direction: column; gap: 16px; margin: 20px 0; }
.cs-tk-msg { display: flex; gap: 12px; }
.cs-tk-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cs-surface-muted); color: var(--cs-text); font-weight: 600; text-transform: uppercase; }
.cs-tk-msg.is-staff .cs-tk-avatar { background: var(--cs-primary); color: #fff; font-size: 14px; }
.cs-tk-bubble { flex: 1; min-width: 0; padding: 16px 20px; border: 1px solid var(--cs-border); border-radius: 4px var(--cs-radius) var(--cs-radius) var(--cs-radius); background: var(--cs-surface); }
.cs-tk-msg.is-staff .cs-tk-bubble { border-color: rgba(118, 67, 201, .3); background: #fbf9fe; }
.cs-tk-msg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 8px; }
.cs-tk-name { color: var(--cs-ink); font-weight: 600; }
.cs-tk-badge { padding: 1px 8px; border-radius: 999px; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 12px; font-weight: 600; }
.cs-tk-time { margin-left: auto; color: var(--cs-muted); font-size: 13px; }
.cs-tk-body { font-size: 15px; }
.cs-tk-body > :last-child { margin-bottom: 0; }
.cs-tk-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cs-theme a.cs-tk-file, .cs-tk-file { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--cs-border); border-radius: 999px; color: var(--cs-text); font-size: 13px; }
.cs-theme a.cs-tk-file:hover { border-color: var(--cs-primary); color: var(--cs-primary); text-decoration: none; }
.cs-tk-file.is-removed { color: var(--cs-muted); text-decoration: line-through; }
.cs-tk-rate { margin-top: 10px; }
.cs-tk-reply { margin-top: 4px; }
.cs-theme .cs-tk-reply-title { margin: 0 0 14px; font-family: var(--cs-font-body); font-size: 17px; font-weight: 600; }
@media (max-width: 767.98px) {
    .cs-tk-head .btn { width: 100%; }
    .cs-tk-title-card { padding: 18px; }
    .cs-tk-avatar { display: none; }
    .cs-tk-bubble { border-radius: var(--cs-radius); padding: 14px 16px; }
    .cs-tk-actions .btn { flex: 1; }
}
/* Collapsed service card: 开始使用 is the only action, so make it the primary button */
.cs-theme .cs-svc:not(.is-open) .cs-svc-toggle { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; }
.cs-theme .cs-svc:not(.is-open) .cs-svc-toggle:hover { border-color: var(--cs-primary-hover); background: var(--cs-primary-hover); color: #fff; }

/* ==========================================================================
   Account section (profile / login / password / security / emails)
   ========================================================================== */
.cs-page-clientareadetails .primary-content, .cs-page-user-profile .primary-content, .cs-page-user-password .primary-content,
.cs-page-user-security .primary-content, .cs-page-clientareaemails .primary-content { max-width: 820px; margin: 0 auto; }
.cs-page-clientareadetails .sidebar, .cs-page-user-profile .sidebar, .cs-page-user-password .sidebar,
.cs-page-user-security .sidebar, .cs-page-clientareaemails .sidebar { display: none !important; }
.cs-acct-head { margin: 8px 0 20px; }
.cs-acct-head .cs-page-title { margin-bottom: 14px; }
.cs-acct-nav { display: flex; gap: 4px; overflow-x: auto; border-bottom: 1px solid var(--cs-border); scrollbar-width: none; }
.cs-acct-nav::-webkit-scrollbar { display: none; }
.cs-theme .cs-acct-nav a { flex: none; margin-bottom: -1px; padding: 10px 14px; border-bottom: 2px solid transparent; color: var(--cs-muted); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.cs-theme .cs-acct-nav a:hover { color: var(--cs-ink); text-decoration: none; }
.cs-theme .cs-acct-nav a.is-active { border-bottom-color: var(--cs-primary); color: var(--cs-primary); }

.cs-acct-card, .cs-page-user-profile .primary-content .card, .cs-page-user-password .primary-content .card, .cs-page-user-security .primary-content .card {
    margin-bottom: 16px; padding: 22px 24px 8px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); box-shadow: none;
}
.cs-page-user-profile .primary-content .card .card-body, .cs-page-user-password .primary-content .card .card-body, .cs-page-user-security .primary-content .card .card-body { padding: 0 0 14px; }
.cs-page-user-profile .primary-content .card-footer, .cs-page-user-password .primary-content .card-footer, .cs-page-user-security .primary-content .card-footer { padding: 14px 0; border-top: 1px solid var(--cs-border); background: transparent; text-align: right; }
.cs-theme .cs-acct-h, .cs-page-user-profile .card-title, .cs-page-user-password .card-title, .cs-page-user-security .card-title {
    margin: 0 0 16px; color: var(--cs-ink); font-family: var(--cs-font-body); font-size: 16px; font-weight: 600;
}
.cs-acct-form label, .cs-page-user-profile .primary-content label, .cs-page-user-password .primary-content label { color: var(--cs-ink); font-size: 14px; font-weight: 500; }
.cs-acct-opt { margin-left: 4px; color: var(--cs-muted); font-size: 12.5px; font-weight: 400; }
.cs-acct-hint { display: block; margin-top: 6px; color: var(--cs-muted); }
.cs-acct-form .form-control:disabled { background: var(--cs-surface-muted); color: var(--cs-text); }
.cs-acct-fold { padding-bottom: 8px; }
.cs-acct-fold summary { display: flex; align-items: center; gap: 4px; margin: 0 0 14px; list-style: none; cursor: pointer; }
.cs-acct-fold summary::-webkit-details-marker { display: none; }
.cs-acct-fold summary .fa-chevron-down { margin-left: auto; color: var(--cs-muted); font-size: 12px; transition: transform .2s ease; }
.cs-acct-fold[open] summary .fa-chevron-down { transform: rotate(180deg); }
.cs-acct-fold:not([open]) summary { margin-bottom: 6px; }
.cs-acct-fold .intl-tel-input, .cs-acct-fold .iti { width: 100%; }

.cs-switch-list { margin-bottom: 14px; }
.cs-switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 12px 0; border-top: 1px solid var(--cs-border); color: var(--cs-text) !important; font-weight: 400 !important; cursor: pointer; }
.cs-switch-list .cs-switch-row:first-child { border-top: 0; padding-top: 0; }
.cs-switch-row small { color: var(--cs-muted); }
.cs-switch {
    flex: none; position: relative; width: 40px; height: 24px; margin: 0; border-radius: 999px; background: var(--cs-border-strong);
    appearance: none; -webkit-appearance: none; cursor: pointer; transition: background-color .2s ease;
}
.cs-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .2s ease; }
.cs-switch:checked { background: var(--cs-primary); }
.cs-switch:checked::after { transform: translateX(16px); }
.cs-switch:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cs-primary-ring); }

/* ==========================================================================
   Markdown editor (tickets) + file inputs
   ========================================================================== */
.cs-theme .md-editor { overflow: hidden; border: 1px solid var(--cs-border-strong); border-radius: 12px; background: var(--cs-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.cs-theme .md-editor.active, .cs-theme .md-editor:focus-within { border-color: var(--cs-primary); box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-theme .md-editor > .md-header { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 6px 8px; border-bottom: 1px solid var(--cs-border); background: var(--cs-surface-muted); }
.cs-theme .md-editor > .md-header .btn-group { margin: 0 4px 0 0; padding-right: 4px; border-right: 1px solid var(--cs-border); }
.cs-theme .md-editor > .md-header .btn-group:nth-last-of-type(1) { border-right: 0; }
.cs-theme .md-editor > .md-header .btn {
    width: 30px; height: 30px; padding: 0; border: 0 !important; border-radius: 6px !important; background: transparent; box-shadow: none; color: var(--cs-muted); font-size: 13px;
}
.cs-theme .md-editor > .md-header .btn:hover { background: var(--cs-surface); color: var(--cs-ink); }
.cs-theme .md-editor > .md-header .btn.btn-primary { width: auto; padding: 0 10px; background: transparent; color: var(--cs-primary); font-weight: 500; }
.cs-theme .md-editor > .md-header .btn.btn-primary:hover, .cs-theme .md-editor > .md-header .btn.btn-primary.active { background: var(--cs-primary-soft); }
.cs-theme .md-editor > .md-header .md-controls { margin-left: auto; }
.cs-theme .md-editor > .md-header .md-control { color: var(--cs-muted); padding: 4px 6px; }
.cs-theme .md-editor > textarea, .cs-theme .md-editor > .md-preview {
    min-height: 200px; padding: 14px 16px; border: 0 !important; border-radius: 0; background: var(--cs-surface) !important; box-shadow: none !important;
    color: var(--cs-ink); font-size: 15px; line-height: 1.7;
}
.cs-theme .md-editor > textarea::placeholder { color: #a6abb3; }
.cs-theme .md-editor > .md-footer { padding: 4px 12px 6px; border: 0; background: transparent; text-align: right; }
.cs-theme .md-editor .markdown-editor-status .small-font { font-size: 0; color: transparent; }
.cs-theme .md-editor .markdown-editor-status .markdown-save { color: var(--cs-muted); font-size: 12px; }
.cs-theme .custom-file-label { height: 40px; padding: 8px 14px; border-color: var(--cs-border-strong); border-radius: var(--cs-radius-sm); color: var(--cs-muted); line-height: 22px; }
.cs-theme .custom-file-label::after { height: 38px; padding: 8px 14px; border-left-color: var(--cs-border); background: var(--cs-surface-muted); color: var(--cs-ink); line-height: 22px; }
html:lang(zh-CN) .cs-theme .custom-file-label::after { content: "浏览"; }
html:lang(ja) .cs-theme .custom-file-label::after { content: "参照"; }
.cs-theme .attachment-group .input-group-append .btn { height: 40px; margin-left: 8px; border: 1px solid var(--cs-border-strong); border-radius: var(--cs-radius-sm) !important; background: var(--cs-surface); color: var(--cs-ink); font-size: 14px; }
.cs-theme .attachment-group .input-group-append .btn:hover { border-color: var(--cs-primary); color: var(--cs-primary); }
.cs-theme .attachment-group .custom-file { border-radius: var(--cs-radius-sm); }
.cs-page-user-profile .primary-content .card .card-body, .cs-page-user-password .primary-content .card .card-body,
.cs-page-user-security .primary-content .card .card-body { overflow: visible; }
.cs-page-user-profile .col-md-6:has(> .form-group > #inputLastName[value="\200B"]) { display: none; }
.cs-theme .custom-file-label { border: 1px solid var(--cs-border-strong); background: var(--cs-surface); }

/* ==========================================================================
   Billing (invoices / add funds)
   ========================================================================== */
.cs-page-clientareainvoices .primary-content, .cs-page-clientareaaddfunds .primary-content { max-width: 820px; margin: 0 auto; }
.cs-page-clientareainvoices .sidebar, .cs-page-clientareaaddfunds .sidebar { display: none !important; }
.cs-bill-titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; margin-bottom: 14px; }
.cs-bill-titlebar .cs-page-title { margin: 0; }
.cs-bill-balance { display: flex; flex-direction: column; align-items: flex-end; }
.cs-bill-balance span { color: var(--cs-muted); font-size: 12.5px; }
.cs-bill-balance strong { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-page-clientareainvoices .cs-dash-alert { margin-bottom: 14px; }
.cs-bill-amount { flex: none; min-width: 88px; color: var(--cs-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.cs-tk-status.is-paid { --cs-tk-color: #1a7f45; }
.cs-tk-status.is-cancelled, .cs-tk-status.is-refunded { --cs-tk-color: #8a8f98; }
.cs-tk-status.is-collections, .cs-tk-status.is-overdue { --cs-tk-color: #c0392b; }
.cs-tk-status.is-payment-pending, .cs-tk-status.is-draft { --cs-tk-color: #c27c0e; }
.cs-funds { padding-top: 24px; padding-bottom: 22px; }
.cs-funds-sub { margin: 0 0 18px; color: var(--cs-muted); font-size: 14px; }
.cs-funds label { color: var(--cs-ink); font-size: 14px; font-weight: 500; }
.cs-funds-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.cs-funds-quick .cs-tk-chip { min-width: 72px; font-variant-numeric: tabular-nums; }
.cs-funds-input { display: flex; align-items: center; height: 48px; padding: 0 14px; border: 1px solid var(--cs-border-strong); border-radius: 10px; background: var(--cs-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.cs-funds-input:focus-within { border-color: var(--cs-primary); box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-funds-input span { color: var(--cs-muted); font-size: 17px; }
.cs-theme .cs-funds-input .form-control { height: 46px; padding: 0 8px; border: 0; box-shadow: none; background: transparent; color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 20px; font-weight: 600; }
.cs-funds-note { margin: 12px 0 0; color: var(--cs-muted); font-size: 13px; }
@media (max-width: 575.98px) {
    .cs-bill-balance { align-items: flex-start; }
    .cs-page-clientareainvoices .cs-tk-row .btn { display: none; }
}

/* Client home, aligned with the help-centre / account pages */
.cs-page-clientareahome .primary-content { max-width: 920px; margin: 0 auto; }
.cs-page-clientareahome .cs-dash-head { align-items: flex-end; margin: 8px 0 24px; }
.cs-theme.cs-page-clientareahome .cs-dash-title { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.cs-page-clientareahome .cs-dash-section { margin-bottom: 28px; }
.cs-dash-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.cs-dash-links .cs-kb-cat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 16px; }
.cs-dash-links .cs-kb-cat-meta { white-space: normal; }
.cs-dash-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.cs-dash-two .cs-dash-section { margin-bottom: 0; }
.cs-dash-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.cs-dash-sec-head .cs-kb-h2 { margin: 0; }
.cs-theme .cs-dash-sec-head .cs-link { font-size: 13px; }
.cs-dash-empty-row { padding: 18px; text-align: left; font-size: 14px; }
.cs-dash-empty-row a { margin-left: 6px; font-weight: 500; }
@media (max-width: 991.98px) { .cs-dash-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-dash-two { grid-template-columns: 1fr; } }
@media (max-width: 575.98px) { .cs-theme.cs-page-clientareahome .cs-dash-title { font-size: 26px; } }

/* ==========================================================================
   Order flow: progress bar, empty cart, configure page polish
   ========================================================================== */
.cs-steps-bar { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 8px auto 24px; padding: 0; list-style: none; counter-reset: none; }
.cs-steps-bar li { display: flex; align-items: center; gap: 8px; color: var(--cs-muted); font-size: 14px; font-weight: 500; white-space: nowrap; }
.cs-steps-bar li + li::before { content: ""; width: 40px; height: 1px; margin-right: 0; background: var(--cs-border-strong); }
.cs-steps-bar a { display: inline-flex; align-items: center; gap: 8px; color: inherit; }
.cs-theme .cs-steps-bar a:hover { color: var(--cs-primary); text-decoration: none; }
.cs-steps-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--cs-border-strong); border-radius: 50%; background: var(--cs-surface); font-size: 12px; font-weight: 600; }
.cs-steps-bar li.is-current { color: var(--cs-ink); }
.cs-steps-bar li.is-current .cs-steps-num { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; }
.cs-steps-bar li.is-done { color: var(--cs-text); }
.cs-steps-bar li.is-done .cs-steps-num { border-color: var(--cs-primary-soft); background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 10px; }
@media (max-width: 575.98px) { .cs-steps-bar { gap: 6px; } .cs-steps-bar li { font-size: 13px; } .cs-steps-bar li + li::before { width: 14px; } }
.cs-cart-empty { max-width: 640px; margin: 24px auto 48px; }
.cs-cart-empty .cs-tk-empty { border-style: solid; background: var(--cs-surface); }
.cs-theme .cs-cart-empty .cs-h3 { margin: 8px 0 4px; font-size: 22px; }
.cs-theme #order-standard_cart .header-lined h1 { font-size: 30px; font-weight: 600; letter-spacing: -.02em; }
.cs-theme #order-standard_cart .cs-kb-back { margin-bottom: 8px; }

/* 我的产品与服务 */
.cs-page-clientareaproducts .primary-content { max-width: 920px; margin: 0 auto; }
.cs-page-clientareaproducts .sidebar { display: none !important; }
.cs-svcs-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-svc[hidden] { display: none; }
@media (max-width: 767.98px) { .cs-svcs-actions { width: 100%; } .cs-svcs-actions .btn { flex: 1; } }

/* Checkout refresh: collapsible promo, compact account, quieter security note */
.cs-theme .cs-co-promo-fold { border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); }
.cs-co-promo-fold > summary { display: flex; align-items: center; gap: 8px; padding: 14px 18px; color: var(--cs-ink); font-size: 15px; font-weight: 500; list-style: none; cursor: pointer; }
.cs-co-promo-fold > summary::-webkit-details-marker { display: none; }
.cs-co-promo-fold > summary .fa-ticket-alt { color: var(--cs-primary); }
.cs-co-promo-chev { margin-left: auto; color: var(--cs-muted); font-size: 12px; transition: transform .2s ease; }
.cs-co-promo-fold[open] .cs-co-promo-chev { transform: rotate(180deg); }
.cs-theme .cs-co-promo-fold .cs-co-promo { margin: 0; padding: 0 18px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.cs-theme .cs-co-promo-fold .cs-co-promo-form { display: flex; gap: 8px; }
.cs-theme .cs-co-promo-fold .cs-co-promo-form .form-control { height: 42px; border-radius: var(--cs-radius-sm); }
.cs-theme .cs-co-promo-fold .cs-co-promo-form .btn { flex: none; height: 42px; }
.cs-theme .cs-co-promo-fold .cs-co-promo-applied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border-radius: 10px; background: #e7f6ec; color: #1a5c35; }
.cs-co-promo-fold .cs-co-promo-applied .fa-check-circle { color: #1a7f45; }
.cs-co-promo-fold .cs-co-promo-applied .btn { margin-left: auto; }

.cs-theme .cs-co-acct { margin-bottom: 4px; border: 1px solid var(--cs-border); border-radius: 12px; background: var(--cs-surface-muted); }
.cs-co-acct > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; }
.cs-co-acct > summary::-webkit-details-marker { display: none; }
.cs-co-acct-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 13px; }
.cs-co-acct-main { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.35; }
.cs-co-acct-label { color: var(--cs-muted); font-size: 12.5px; }
.cs-co-acct-main strong { color: var(--cs-ink); font-size: 15px; }
.cs-co-acct-change { color: var(--cs-primary); font-size: 14px; font-weight: 500; }
.cs-co-acct[open] .cs-co-acct-change { color: var(--cs-muted); }
.cs-co-acct > #containerExistingAccountSelect { margin: 0; padding: 0 14px 14px; }

.cs-theme #order-standard_cart .checkout-security-msg {
    display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 0; border: 0; background: transparent;
    color: var(--cs-muted); font-size: 12.5px; line-height: 1.5;
}
.cs-theme #order-standard_cart .checkout-security-msg .fa-lock { flex: none; font-size: 12px; color: var(--cs-muted); }
.cs-theme #order-standard_cart .checkout-security-msg strong { font-weight: 500; color: var(--cs-text); }
.cs-theme .cs-co-card.cs-co-form:has(> .cs-co-acct) { padding: 0; border: 0; background: transparent; box-shadow: none; }

/* Menu: current section */
.cs-theme #nav > li.active > a, .cs-theme .cs-secondary-nav > li.active > a { color: var(--cs-primary) !important; }
@media (min-width: 1200px) {
    .cs-theme #nav > li > a { position: relative; }
    .cs-theme #nav > li.active > a::after { content: ""; position: absolute; left: 0; right: 1.5rem; bottom: -6px; height: 2px; border-radius: 2px; background: var(--cs-primary); }
}

/* Referral programme (affiliates.tpl / affiliatessignup.tpl) */
/* (full container width like the billing pages since referrals v2) */
.cs-page-affiliates .sidebar, .cs-page-affiliatessignup .sidebar { display: none !important; }
.cs-aff-link { padding-bottom: 20px; }
.cs-aff-copy { display: flex; gap: 8px; }
.cs-theme .cs-aff-copy .form-control { height: 44px; background: var(--cs-surface-muted); font-family: var(--cs-font-mono); font-size: 14px; }
.cs-aff-copy .btn { flex: none; height: 44px; padding: 0 18px; }
.cs-aff-copy .btn.is-done { background: #1a7f45; border-color: #1a7f45; }
.cs-aff-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.cs-aff-steps li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--cs-surface-muted); color: var(--cs-text); font-size: 13.5px; }
.cs-aff-steps li span { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 12px; font-weight: 600; }
.cs-aff-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.cs-aff-stat { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); }
.cs-aff-stat span { color: var(--cs-muted); font-size: 13px; }
.cs-aff-stat strong { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-aff-money { padding-bottom: 20px; }
.cs-aff-money-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; }
.cs-aff-money .cs-aff-stat { border: 0; padding: 4px 0; background: transparent; }
.cs-aff-stat.is-main strong { color: var(--cs-primary); font-size: 28px; }
.cs-aff-withdraw { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 16px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--cs-border); }
.cs-tk-status.is-pending { --cs-tk-color: #c27c0e; }
.cs-tk-status.is-active, .cs-tk-status.is-confirmed { --cs-tk-color: #1a7f45; }
.cs-aff-benefits { margin-top: 8px; }
.cs-aff-benefits .cs-kb-cat { cursor: default; }
.cs-aff-benefits .cs-kb-cat:hover { transform: none; box-shadow: none; border-color: var(--cs-border); }
.cs-aff-activate { margin: 24px 0 8px; text-align: center; }
@media (max-width: 767.98px) {
    .cs-aff-steps { grid-template-columns: 1fr; }
    .cs-aff-stats { gap: 8px; }
    .cs-aff-stats .cs-aff-stat { padding: 12px; }
    .cs-aff-stat strong { font-size: 20px; }
    .cs-aff-money-grid { grid-template-columns: 1fr 1fr; }
    .cs-aff-money-grid .is-main { grid-column: 1 / -1; }
    .cs-aff-copy { flex-direction: column; }
    .cs-aff-withdraw .btn { width: 100%; }
}

/* ==========================================================================
   Store v2: billing-period tabs + plan cards (Surfshark-style)
   ========================================================================== */
.cs-store-head { margin-bottom: 20px; }
.cs-period { display: flex; max-width: 640px; margin: 0 auto 32px; padding: 4px; border-radius: 14px; background: var(--cs-surface-muted); border: 1px solid var(--cs-border); }
.cs-theme .cs-period-tab {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 10px 8px; border: 0; border-radius: 10px;
    background: transparent; color: var(--cs-text); font-size: 15px; font-weight: 500; cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.cs-period-tab small { color: var(--cs-primary); font-size: 11.5px; font-weight: 600; }
.cs-theme .cs-period-tab:hover { color: var(--cs-ink); }
.cs-theme .cs-period-tab.is-active { background: var(--cs-surface); color: var(--cs-ink); box-shadow: 0 1px 2px rgba(0,0,0,.06), 0 0 0 1px var(--cs-primary) inset; }
.cs-plans-v2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; margin: 0; padding-top: 18px; }
.cs-plan2 { position: relative; display: flex; flex-direction: column; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.cs-plan2.is-popular { border: 2px solid var(--cs-primary); box-shadow: 0 24px 50px -30px rgba(118, 67, 201, .55); }
.cs-plan2-flag { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 4px 14px; border-radius: 999px; background: var(--cs-primary); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; }
.cs-plan2-body { padding: 26px 24px 22px; border-bottom: 1px solid var(--cs-border); }
.cs-plan2-save { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: #fdecef; color: #c0392b; font-size: 12.5px; font-weight: 600; }
.cs-plan2-save[hidden] { display: none; }
.cs-theme .cs-plan2-name { margin: 0 0 8px; color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 20px; font-weight: 600; }
.cs-plan2-price { display: flex; align-items: baseline; gap: 4px; color: var(--cs-ink); }
.cs-plan2-price span { font-family: var(--cs-font-head); font-size: 40px; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cs-plan2-price small { color: var(--cs-muted); font-size: 14px; }
.cs-plan2-note { min-height: 44px; margin: 8px 0 16px; color: var(--cs-text); font-size: 13.5px; line-height: 1.6; }
.cs-plan2-note s { margin: 0 4px; color: var(--cs-muted); }
.cs-plan2-note s[hidden], .cs-plan2-note b[hidden] { display: none; }
.cs-plan2-note b { color: var(--cs-ink); font-weight: 600; }
.cs-theme .cs-plan2 .btn-outline-primary { border: 2px solid var(--cs-ink); color: var(--cs-ink); background: transparent; font-weight: 600; }
.cs-theme .cs-plan2 .btn-outline-primary:hover { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; }
.cs-plan2 .btn-lg { font-weight: 600; }
.cs-plan2-feats { padding: 18px 24px 22px; }
.cs-plan2-feats-title { margin-bottom: 8px; color: var(--cs-ink); font-weight: 600; }
.cs-plan2-feats .cs-plan-features { margin: 0; }
@media (max-width: 991.98px) { .cs-plans-v2 { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 28px; } }
@media (max-width: 575.98px) { .cs-theme .cs-period-tab { font-size: 13.5px; padding: 8px 4px; } }

/* ==========================================================================
   Checkout v2: left = account + payment + place order, right = summary + promo
   ========================================================================== */
.cs-sum { padding: 22px 22px 18px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.cs-theme .cs-sum-title { margin: 0 0 14px; font-family: var(--cs-font-head); font-size: 20px; font-weight: 600; }
.cs-sum-item { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--cs-border); }
.cs-sum-item-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.cs-sum-item-name { color: var(--cs-ink); font-size: 16px; font-weight: 600; }
.cs-sum-item-name .fa-shield-alt { margin-right: 4px; color: var(--cs-primary); }
.cs-theme a.cs-sum-change { color: var(--cs-primary); font-size: 13px; white-space: nowrap; }
.cs-sum-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; color: var(--cs-text); font-size: 14px; }
.cs-sum-line strong { color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.cs-sum-line s { color: var(--cs-muted); font-size: 13px; }
.cs-sum-save { padding: 2px 10px; border-radius: 999px; background: #1a7f45; color: #fff; font-size: 12.5px; font-weight: 600; }
.cs-sum-opts { display: flex; flex-direction: column; color: var(--cs-muted); font-size: 12.5px; }
.cs-sum-muted { color: var(--cs-muted); font-size: 13px; }
.cs-sum-good span:last-child { color: #1a7f45; }
.cs-theme .cs-sum-remove { padding: 0; border: 0; background: none; color: var(--cs-muted); font-size: 12.5px; text-decoration: underline; cursor: pointer; }
.cs-sum-totals { padding-bottom: 6px; }
.cs-sum-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--cs-border); color: var(--cs-ink); }
.cs-sum-total span { font-size: 17px; font-weight: 600; }
.cs-sum-total strong { font-family: var(--cs-font-head); font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-sum-recurring { display: flex; flex-direction: column; align-items: flex-end; color: var(--cs-muted); font-size: 12.5px; }
.cs-sum-promo { margin-top: 14px; }
.cs-sum-promo .cs-co-promo-fold { border-radius: 12px; background: var(--cs-surface-muted); }
.cs-sum-promo .cs-co-promo-fold > summary { padding: 12px 14px; font-size: 14px; }
.cs-theme .cs-sum-promo .cs-co-promo-fold .cs-co-promo { padding: 0 14px 14px; }
.cs-co-place { padding: 20px 22px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); }
.cs-co-place-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; color: var(--cs-text); }
.cs-co-place-total strong { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 22px; font-weight: 700; }
.cs-theme .cs-co-place .cs-co-submit { padding: 0; margin: 0; border: 0; }
.cs-theme .cs-co-place .cs-co-submit p { margin-bottom: 12px; }
.cs-theme .cs-co-place #btnCompleteOrder { width: 100%; height: 52px; border-color: var(--cs-ink); background: var(--cs-ink); font-size: 16px; font-weight: 600; }
.cs-theme .cs-co-place #btnCompleteOrder:hover { border-color: var(--cs-primary); background: var(--cs-primary); }
@media (min-width: 992px) { .cs-checkout .cs-co-aside { position: sticky; top: 20px; } }
.cs-theme #order-standard_cart .order-summary.cs-sum { padding: 22px 22px 18px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.cs-theme #order-standard_cart .order-summary.cs-sum .cs-sum-title { margin: 0 0 14px; padding: 0; border: 0; background: none; color: var(--cs-ink); font-size: 20px; text-align: left; }

/* ==========================================================================
   Checkout v2: numbered sections + compact guest account (email first)
   ========================================================================== */
.cs-co-main { counter-reset: cs-co-step; }
.cs-theme .cs-co-main > .cs-co-section:not(.cs-co-place) .cs-co-title { display: flex; align-items: center; gap: 10px; }
.cs-theme .cs-co-main > .cs-co-section:not(.cs-co-place) .cs-co-title::before {
    counter-increment: cs-co-step; content: counter(cs-co-step);
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--cs-primary); color: #fff; font-size: 14px; font-weight: 600;
}
.cs-co-title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; }
.cs-theme .cs-co-title-row .cs-co-title { margin: 0; }
.cs-theme .cs-acct-switch .cs-acct-option { display: inline; width: auto; padding: 0; border: 0; background: none; color: var(--cs-muted); font-size: 14px; cursor: pointer; }
.cs-theme .cs-acct-switch .cs-acct-option b { color: var(--cs-primary); font-weight: 600; }
.cs-theme .cs-acct-switch .cs-acct-option:hover b { text-decoration: underline; }
.cs-theme .cs-acct-switch .cs-acct-option.is-active { display: none; }
body:not(.cs-logged-in) .cs-guest-hide, .cs-theme .cs-co-form .cs-guest-hide { display: none; }
.cs-theme .cs-co-form #containerNewUserSignup .col-sm-6:has(> .form-group > #inputEmail) { flex: 0 0 100%; max-width: 100%; }
.cs-theme .cs-co-form .cs-hint { display: block; margin-top: 6px; color: var(--cs-muted); font-size: 12.5px; }
.cs-theme .cs-co-form:has(.cs-guest-hide) { padding-top: 22px; }
.cs-theme .cs-co-form #containerNewUserSecurity { margin-top: 4px; }
.cs-theme .cs-co-form #containerPassword .password-strength-meter { margin-top: 2px; }
.cs-theme .cs-co-form #containerPassword .password-strength-meter p { text-align: left !important; }
.cs-login-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 4px; }
.cs-login-forgot { font-size: 14px; }
.cs-theme .cs-login-actions #btnExistingLogin { min-width: 120px; }
/* Payment methods: name + one-line hint on the left, gateway logo on the right. */
.cs-pay-name { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.35; }
.cs-pay-name small { margin-top: 2px; color: var(--cs-muted); font-size: 12.5px; font-weight: 400; }
.cs-pay-logo { flex: none; width: 32px; height: 32px; margin-left: auto; }
.cs-pay-fa { display: inline-flex; align-items: center; justify-content: center; color: #003087; font-size: 26px; }
.cs-theme .cs-checkout #paymentGatewaysContainer label.radio-inline { text-align: left; }
.cs-pay-fa.is-alipay { color: #1677FF; font-size: 30px; }

/* ==========================================================================
   Invoice v2: left = 1 payment method / 2 pay / details, right = items + totals
   ========================================================================== */
.cs-invoice-page .cs-inv-top, .cs-invoice-page .cs-inv { max-width: 1080px; }
.cs-inv-titlebar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 16px; margin: 8px 0 24px; }
.cs-theme .cs-inv-titlebar .cs-inv-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 2px 0 0; font-size: 32px; }
.cs-inv-titlebar .cs-inv-status { font-family: var(--cs-font-body); }
.cs-inv-tools { display: flex; gap: 8px; }
.cs-inv-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; align-items: start; }
.cs-inv-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cs-inv-aside { position: sticky; top: 24px; }
.cs-inv-grid .cs-inv-card { padding: 24px; border-radius: var(--cs-radius-lg); }
.cs-inv-grid .cs-inv-meta { margin-top: 0; padding-top: 0; border-top: 0; }
.cs-inv-grid .cs-inv-meta + .cs-inv-h2, .cs-inv-grid .cs-inv-notes + .cs-inv-h2 { margin-top: 26px; }
.cs-theme .cs-inv-step-title { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 22px; font-weight: 600; }
.cs-inv-step-title span {
    display: inline-flex; flex: none; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--cs-primary); color: #fff; font-family: var(--cs-font-body); font-size: 14px; font-weight: 600;
}
.cs-inv-methods { margin: 0; overflow: hidden; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.cs-inv-method { display: flex; align-items: center; gap: 12px; margin: 0; padding: 16px 20px; border-top: 1px solid var(--cs-border); color: var(--cs-ink); font-weight: 500; cursor: pointer; }
.cs-inv-method:first-child { border-top: 0; }
.cs-inv-method:hover { background: var(--cs-surface-muted); }
.cs-inv-method.is-active { background: var(--cs-primary-soft); }
.cs-inv-method input { position: absolute; opacity: 0; pointer-events: none; }
.cs-inv-method-dot { flex: none; width: 18px; height: 18px; border: 2px solid var(--cs-border-strong); border-radius: 50%; background: var(--cs-surface); }
.cs-inv-method.is-active .cs-inv-method-dot { border: 5px solid var(--cs-primary); }
.cs-inv-method input:focus-visible + .cs-inv-method-dot { box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-inv-method-name { flex: 1; min-width: 0; }
.cs-inv-method .cs-pay-fa, .cs-inv-method .cs-pay-logo { margin-left: auto; }
.cs-inv-paycard { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 28px; padding: 24px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.cs-inv-paycard .cs-inv-amount { font-size: 36px; }
.cs-inv-paycard .cs-inv-paybtn { flex: none; }
.cs-inv-paycard .cs-inv-paybtn:empty { display: none; }
.cs-inv-sum-title { margin: 0 0 6px; font-size: 20px; font-weight: 600; }
.cs-invoice-page .cs-inv-credit { margin-top: 0; background: var(--cs-surface); }
@media (max-width: 991.98px) {
    .cs-inv-grid { grid-template-columns: 1fr; }
    .cs-inv-aside { position: static; order: -1; }
    .cs-inv-grid.is-paid .cs-inv-aside { order: 0; }
}
@media (max-width: 575.98px) {
    .cs-theme .cs-inv-titlebar .cs-inv-title { font-size: 26px; }
    .cs-inv-paycard { flex-direction: column; align-items: stretch; padding: 20px 18px; }
    .cs-inv-paycard .cs-inv-paybtn { align-self: center; }
}
@media print {
    .cs-inv-grid { display: block; }
    .cs-inv-aside { margin-top: 20px; }
}
.cs-inv-paycard { align-items: flex-start; }

/* Invoice pay card: amount header, then the gateway area. The paytaro_v3 (Alipay QR) box ships its own
   #paytaro-v3-<id> styles, hence the #csPayBtn prefix: QR on the left, title / CNY amount / status on the right. */
.cs-theme .cs-inv-paycard { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.cs-inv-paycard .cs-inv-due { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; padding: 20px 24px; border-bottom: 1px solid var(--cs-border); }
.cs-inv-paycard .cs-inv-due .cs-inv-amount { display: block; font-size: 30px; }
.cs-inv-due-date { color: var(--cs-muted); font-size: 13px; }
.cs-theme .cs-inv-paycard .cs-inv-paybtn { align-self: stretch; padding: 24px; }
#csPayBtn .paytaro-v3-box {
    display: grid; grid-template-columns: 340px minmax(0, 1fr); grid-template-rows: auto auto auto auto auto 1fr;
    grid-template-areas: "qr title" "qr amount" "qr tip" "qr state" "qr open" "qr meta";
    column-gap: 28px; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: left;
}
#csPayBtn .paytaro-v3-box .paytaro-v3-qrcode, #csPayBtn .paytaro-v3-box .paytaro-v3-loading {
    grid-area: qr; align-self: start; display: flex; align-items: center; justify-content: center;
    width: 340px; height: 340px; margin: 0; padding: 9px; border: 1px solid var(--cs-border); border-radius: 14px; background: #fff;
}
#csPayBtn .paytaro-v3-box .paytaro-v3-loading { color: var(--cs-muted); font-size: 13px; text-align: center; }
#csPayBtn .paytaro-v3-box .paytaro-v3-qrcode canvas { display: block; max-width: 100%; image-rendering: pixelated; } /* size set by the module: integer px per QR module, quiet zone included */
#csPayBtn .paytaro-v3-box [hidden] { display: none !important; }
#csPayBtn .paytaro-v3-box .paytaro-v3-title { grid-area: title; display: flex; align-items: center; gap: 8px; margin-top: 2px; color: var(--cs-ink); font-size: 17px; font-weight: 600; }
#csPayBtn .paytaro-v3-box .paytaro-v3-title::before { content: "\f642"; color: #1677FF; font-family: "Font Awesome 5 Brands"; font-size: 22px; font-weight: 400; line-height: 1; }
#csPayBtn .paytaro-v3-box .paytaro-v3-amount { grid-area: amount; margin: 10px 0 0; color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
#csPayBtn .paytaro-v3-box .paytaro-v3-amount::after { content: " CNY"; color: var(--cs-muted); font-family: var(--cs-font-body); font-size: 13px; font-weight: 500; }
#csPayBtn .paytaro-v3-box .paytaro-v3-tip { grid-area: tip; margin: 10px 0 0; color: var(--cs-text); font-size: 14px; line-height: 1.6; }
#csPayBtn .paytaro-v3-box .paytaro-v3-state {
    grid-area: state; display: inline-flex; align-items: center; gap: 8px; justify-self: start; margin: 14px 0 0; padding: 5px 12px;
    border-radius: 999px; background: var(--cs-surface-muted); color: var(--cs-text); font-size: 13px;
}
#csPayBtn .paytaro-v3-box .paytaro-v3-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--cs-amber, #d97706); animation: csPulse 1.4s ease-in-out infinite; }
#csPayBtn .paytaro-v3-box .paytaro-v3-state.paytaro-v3-success { background: #e7f6ec; color: #1a7f45; }
#csPayBtn .paytaro-v3-box .paytaro-v3-state.paytaro-v3-success::before { background: #1a7f45; animation: none; }
#csPayBtn .paytaro-v3-box .paytaro-v3-state.paytaro-v3-error { background: #fdecec; color: #c0392b; }
#csPayBtn .paytaro-v3-box .paytaro-v3-state.paytaro-v3-error::before { background: #c0392b; animation: none; }
#csPayBtn .paytaro-v3-box .paytaro-v3-open, #csPayBtn .paytaro-v3-box .paytaro-v3-retry { grid-area: open; justify-self: start; margin: 14px 0 0; }
/* Alipay QRs are dense (~800-char links, QR v19-22): keep them >= 260px and unscaled-looking; the open button is used on phones / PC cashier links. */
#csPayBtn .paytaro-v3-box .paytaro-v3-meta { grid-area: meta; align-self: end; margin: 16px 0 0; padding: 0; border: 0; color: var(--cs-muted); font-family: var(--cs-font-mono); font-size: 11.5px; }
@keyframes csPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
@media (max-width: 575.98px) {
    .cs-inv-paycard .cs-inv-due { padding: 18px; }
    .cs-theme .cs-inv-paycard .cs-inv-paybtn { padding: 20px 18px; }
    #csPayBtn .paytaro-v3-box { grid-template-columns: 1fr; grid-template-rows: none; grid-template-areas: "title" "amount" "qr" "tip" "state" "open" "meta"; justify-items: center; text-align: center; }
    #csPayBtn .paytaro-v3-box .paytaro-v3-qrcode, #csPayBtn .paytaro-v3-box .paytaro-v3-loading { justify-self: center; margin-top: 16px; width: min(340px, 100%); height: auto; aspect-ratio: 1; }
    #csPayBtn .paytaro-v3-box .paytaro-v3-state, #csPayBtn .paytaro-v3-box .paytaro-v3-retry { justify-self: center; }
    #csPayBtn .paytaro-v3-box .paytaro-v3-open { display: block; justify-self: stretch; width: 100%; }
}

/* ==========================================================================
   Service details page: header (title, status, 续费 + 管理), 开始使用, then tabs
   ========================================================================== */
.cs-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; color: var(--cs-muted); font-size: 14px; font-weight: 500; }
.cs-theme a.cs-back:hover { color: var(--cs-primary); text-decoration: none; }
.cs-back .fa-arrow-left { font-size: .85em; }
.cs-sd-head { margin: 4px 0 24px; }
.cs-sd-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.cs-sd-main { min-width: 0; }
.cs-theme .cs-sd-head .cs-page-title { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.cs-sd-status { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--cs-surface-muted); color: var(--cs-text); font-family: var(--cs-font-body); font-size: 13px; font-weight: 600; }
.cs-sd-status.is-active { background: #e7f6ec; color: #1a7f45; }
.cs-sd-status.is-pending { background: var(--cs-amber-soft); color: var(--cs-amber); }
.cs-sd-status.is-suspended, .cs-sd-status.is-terminated, .cs-sd-status.is-cancelled, .cs-sd-status.is-fraud { background: #fdecec; color: #c0392b; }
.cs-sd-sub { margin: 6px 0 0; color: var(--cs-muted); font-size: 14px; }
.cs-sd-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.cs-sd-actions > .btn, .cs-sd-more > .btn { display: inline-flex; align-items: center; gap: 6px; }
.cs-sd-more .cs-caret { font-size: 11px; opacity: .7; }
.cs-sd-more .dropdown-menu { min-width: 200px; padding: 6px; border: 1px solid var(--cs-border); border-radius: 12px; box-shadow: 0 16px 40px -18px rgba(15, 23, 42, .35); }
.cs-theme .cs-sd-more .dropdown-item { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 8px; color: var(--cs-ink); font-size: 14px; }
.cs-theme .cs-sd-more .dropdown-item:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-page-clientareaproductdetails .cs-connect { margin-bottom: 32px; }
.cs-sd-tabs { margin-top: 4px; }
.cs-sd-tabbar { margin-bottom: 16px; }
.cs-sd-pane[hidden] { display: none; }
.cs-sd-pane .panel { margin-bottom: 16px; }
#v2raysocks .cs-sd-pane .panel-heading { padding: 14px 20px; background: var(--cs-surface-muted); }
#v2raysocks .cs-sd-pane .panel-heading h1, #v2raysocks .cs-sd-pane .panel-heading h2, #v2raysocks .cs-sd-pane .panel-heading h3,
#v2raysocks .cs-sd-pane .panel-heading h4, #v2raysocks .cs-sd-pane .panel-heading h5, #v2raysocks .cs-sd-pane .panel-title { font-size: 14px; }
#v2raysocks .cs-sd-pane .panel-body { padding: 0; }
#v2raysocks .cs-sd-pane .panel-body > p:first-child, #v2raysocks .cs-sd-pane .panel-body > .text-muted:first-child { margin: 0; padding: 12px 20px; color: var(--cs-muted); font-size: 13px; }
#v2raysocks .cs-sd-pane table > thead > tr > th:first-child, #v2raysocks .cs-sd-pane table > tbody > tr > td:first-child { padding-left: 20px; }
#v2raysocks .cs-sd-pane table > thead > tr > th:last-child, #v2raysocks .cs-sd-pane table > tbody > tr > td:last-child { padding-right: 20px; }
@media (max-width: 575.98px) {
    .cs-sd-actions { width: 100%; }
    .cs-sd-actions > .btn, .cs-sd-more, .cs-sd-more > .btn { flex: 1 1 auto; justify-content: center; }
}
/* The tab names the panel; keep only its one-line description. */
#v2raysocks .cs-sd-pane .panel-heading { display: none; }
#v2raysocks .cs-sd-chart { position: relative; height: 280px; margin: 4px 20px 18px; }

/* ==========================================================================
   Service renewals (orderforms/cybersaury_cart/service-renewals.tpl)
   ========================================================================== */
.cs-theme #order-standard_cart.cs-renew { margin: 0; padding: 8px 0 32px; }
.cs-renew-head { margin-bottom: 24px; }
.cs-renew-head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.cs-theme .cs-renew .cs-page-title { margin: 0; }
.cs-renew-sub { margin: 6px 0 0; color: var(--cs-muted); font-size: 14px; }
.cs-theme .cs-renew-toggle { padding: 6px 14px; border: 1px solid var(--cs-border); border-radius: 999px; background: var(--cs-surface); color: var(--cs-text); font-size: 13px; cursor: pointer; }
.cs-theme .cs-renew-toggle:hover { border-color: var(--cs-border-strong); }
.cs-renew-search { max-width: 320px; margin-top: 16px; }
.cs-renew-note { color: var(--cs-muted); font-size: 14px; }
.cs-renew-list { display: flex; flex-direction: column; gap: 14px; }
.cs-theme .cs-renew .cs-renew-card {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px;
    margin: 0; padding: 22px 24px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface);
}
.cs-renew-card.is-addon { margin-left: 28px; padding: 16px 20px; background: var(--cs-surface-muted); }
.cs-renew-main { flex: 1 1 280px; min-width: 0; }
.cs-renew-title { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cs-theme .cs-renew-name { margin: 0; color: var(--cs-ink); font-size: 20px; font-weight: 600; }
.cs-renew-badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 12.5px; font-weight: 600; }
.cs-renew-badge.is-soon { background: var(--cs-amber-soft); color: var(--cs-amber); }
.cs-renew-badge.is-off { background: var(--cs-surface-muted); color: var(--cs-muted); }
.cs-renew-domain { margin-top: 4px; color: var(--cs-text); font-size: 14px; }
.cs-renew-meta { margin-top: 8px; color: var(--cs-muted); font-size: 13.5px; }
.cs-renew-meta i { margin-right: 4px; }
.cs-renew-reason { margin-top: 10px; color: var(--cs-text); font-size: 13.5px; }
.cs-renew-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; }
.cs-renew-period { display: flex; flex-direction: column; color: var(--cs-text); font-size: 13.5px; text-align: right; }
.cs-renew-label { color: var(--cs-muted); font-size: 12px; }
.cs-renew-price { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cs-theme .cs-renew-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 132px; justify-content: center; padding: 10px 18px; font-weight: 600; }
.cs-renew-spin { display: none; }
.cs-renew-btn.is-busy .cs-renew-spin { display: inline-block; }
.cs-renew-btn.is-busy .cs-renew-go { display: none; }
.cs-renew-empty { padding: 48px 24px; border: 1px dashed var(--cs-border-strong); border-radius: var(--cs-radius-lg); text-align: center; color: var(--cs-text); }
.cs-renew-empty i { margin-bottom: 12px; color: var(--cs-primary); font-size: 32px; }
/* standard_cart's quick filter toggles these labels via .service-renewals-quick-filter */
.cs-renew-toggle .to-show { display: none; }
@media (max-width: 575.98px) {
    .cs-theme .cs-renew .cs-renew-card { padding: 18px; }
    .cs-renew-card.is-addon { margin-left: 12px; }
    .cs-renew-side { width: 100%; justify-content: space-between; }
    .cs-renew-period { text-align: left; }
    .cs-theme .cs-renew-btn { width: 100%; }
}
.cs-theme #order-standard_cart.cs-renew .service-renewals { margin: 0; border-top: 0; background: transparent; }
.cs-theme #order-standard_cart.cs-renew .service-renewals .service-renewal { border-bottom: 1px solid var(--cs-border); }
.cs-theme #order-standard_cart.cs-renew .addon-renewals > div { border: 0; }
.cs-theme #order-standard_cart.cs-renew .service-renewals .service-renewal:nth-child(even) { background: var(--cs-surface); }
.cs-theme #order-standard_cart.cs-renew .cs-renew-card.is-addon:nth-child(even) { background: var(--cs-surface-muted); }
.cs-theme #order-standard_cart.cs-renew .service-renewals-quick-filter { width: auto !important; margin: 0; float: none !important; }
.cs-theme #order-standard_cart.cs-renew .form-control.service-renewals-filter { width: 100% !important; max-width: 320px; float: none !important; }
.cs-theme #order-standard_cart.cs-renew .addon-renewals { display: flex; flex-direction: column; gap: 10px; margin: -4px 0 0; padding: 0; border: 0; }
.cs-dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 575.98px) { .cs-dash-actions { width: 100%; } .cs-dash-actions .btn { flex: 1 1 auto; } }
/* Phones: node table rows as cards. Columns (module order): 1 name, 2 type, 3 region, 4 speed, 5 tags, 6 QR, 7 online.
   Line 1: name … status + QR; line 2: region · type · speed; line 3: tags. */
@media (max-width: 575.98px) {
    #v2raysocks #node_list .table-responsive, #v2raysocks #node_list .panel-body { overflow: visible; }
    #v2raysocks #node_list table, #v2raysocks #node_list tbody { display: block; width: 100%; }
    #v2raysocks #node_list thead { display: none; }
    #v2raysocks #node_list tbody > tr { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 14px 16px; border-bottom: 1px solid var(--cs-border); }
    #v2raysocks #node_list tbody > tr:last-child { border-bottom: 0; }
    #v2raysocks #node_list.panel tbody > tr > td { display: block !important; padding: 0 !important; border: 0 !important; font-size: 13px; line-height: 1.4; }
    #v2raysocks #node_list tbody > tr > td:nth-child(1) { order: 1; flex: 1 1 calc(100% - 100px); min-width: 0; color: var(--cs-ink); font-size: 15px; font-weight: 600; word-break: break-word; }
    #v2raysocks #node_list tbody > tr > td:nth-child(7) { order: 2; font-size: 16px; }
    #v2raysocks #node_list tbody > tr > td:nth-child(6) { order: 3; display: inline-flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--cs-border) !important; border-radius: 8px; color: var(--cs-ink); font-size: 15px; cursor: pointer; }
    #v2raysocks #node_list tbody > tr > td:nth-child(3) { order: 4; display: flex !important; flex-wrap: wrap; align-items: center; gap: 4px; color: var(--cs-text); }
    #v2raysocks #node_list tbody > tr > td:nth-child(2), #v2raysocks #node_list tbody > tr > td:nth-child(4) { order: 5; padding: 2px 8px !important; border-radius: 999px; background: var(--cs-surface-muted); color: var(--cs-text); font-size: 12px; }
    #v2raysocks #node_list tbody > tr > td:nth-child(4) { order: 6; }
    #v2raysocks #node_list tbody > tr > td:nth-child(5) { order: 7; flex-basis: 100%; display: flex !important; flex-wrap: wrap; gap: 6px; }
    #v2raysocks #node_list tbody > tr > td:nth-child(5):empty { display: none !important; }
    #v2raysocks #node_list tbody > tr > td:nth-child(5) img { height: 16px !important; }
}

/* ==========================================================================
   Invoice list v2: full width, cards that say what each invoice is for
   ========================================================================== */
.cs-page-clientareainvoices .primary-content, .cs-page-clientareaaddfunds .primary-content { max-width: none; }
.cs-inv-list { display: flex; flex-direction: column; gap: 10px; }
.cs-inv-row {
    position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 22px;
    border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.cs-inv-row[hidden] { display: none; }
.cs-inv-row:hover { border-color: var(--cs-border-strong); box-shadow: 0 10px 28px -20px rgba(15, 23, 42, .35); }
.cs-inv-row.is-unpaid { border-color: rgba(192, 57, 43, .35); }
.cs-inv-row-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cs-inv-row-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cs-surface-muted); color: var(--cs-muted); font-size: 16px; }
.cs-inv-row.is-unpaid .cs-inv-row-icon { background: #fdecec; color: #c0392b; }
.cs-inv-row.is-paid .cs-inv-row-icon { background: #e7f6ec; color: #1a7f45; }
.cs-inv-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-inv-row-title { overflow: hidden; color: var(--cs-ink); font-size: 15.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cs-inv-row-title small { color: var(--cs-muted); font-size: 13px; font-weight: 400; }
.cs-inv-row-meta { color: var(--cs-muted); font-size: 13px; }
.cs-inv-row-meta b { color: #c0392b; font-weight: 500; }
.cs-inv-row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.cs-inv-row-amount { color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-inv-badge { padding: 2px 9px; border-radius: 999px; background: var(--cs-surface-muted); color: var(--cs-muted); font-size: 12px; font-weight: 600; }
.cs-inv-badge.is-paid { background: #e7f6ec; color: #1a7f45; }
.cs-inv-badge.is-unpaid, .cs-inv-badge.is-collections { background: #fdecec; color: #c0392b; }
.cs-inv-badge.is-payment-pending, .cs-inv-badge.is-draft { background: var(--cs-amber-soft); color: var(--cs-amber); }
.cs-theme .cs-inv-row-pay { position: relative; z-index: 2; flex: none; font-weight: 600; }
.cs-inv-row-go { flex: none; width: 20px; color: var(--cs-muted); font-size: 12px; text-align: center; }
.cs-page-clientareainvoices .cs-kb-empty { padding: 24px; text-align: center; color: var(--cs-muted); }
@media (max-width: 575.98px) {
    .cs-inv-row { flex-wrap: wrap; gap: 12px; padding: 16px; }
    .cs-inv-row-icon { width: 36px; height: 36px; }
    .cs-inv-row-main { flex: 1 1 calc(100% - 140px); }
    .cs-inv-row-title { white-space: normal; }
    .cs-inv-row-go { display: none; }
    .cs-inv-row-side { flex-direction: row-reverse; align-items: center; justify-content: space-between; width: calc(100% - 48px); margin-left: 48px; }
    .cs-page-clientareainvoices .cs-inv-row .cs-inv-row-pay { display: block; width: 100%; }
}

/* ==========================================================================
   Add funds v2: 1 amount / 2 payment method on the left, summary on the right
   ========================================================================== */
.cs-fund-grid { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 28px; align-items: start; }
.cs-fund-main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.cs-fund-aside { position: sticky; top: 24px; }
.cs-fund-card { padding: 22px 24px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); }
.cs-fund-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 18px; }
.cs-theme .cs-fund-amount {
    padding: 14px 8px; border: 1px solid var(--cs-border); border-radius: 12px; background: var(--cs-surface);
    color: var(--cs-ink); font-family: var(--cs-font-head); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.cs-theme .cs-fund-amount:hover { border-color: var(--cs-border-strong); }
.cs-theme .cs-fund-amount.is-active { border-color: var(--cs-primary); background: var(--cs-primary-soft); color: var(--cs-primary); box-shadow: 0 0 0 1px var(--cs-primary) inset; }
.cs-fund-label { display: block; margin-bottom: 6px; color: var(--cs-muted); font-size: 13px; font-weight: 500; }
.cs-fund-card .cs-acct-hint { display: block; margin-top: 8px; }
.cs-fund-line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--cs-text); font-size: 14px; font-variant-numeric: tabular-nums; }
.cs-fund-line.is-total { margin: 6px 0 16px; padding-top: 14px; border-top: 1px solid var(--cs-border); color: var(--cs-ink); font-weight: 600; }
.cs-fund-line.is-total strong { font-family: var(--cs-font-head); font-size: 22px; }
.cs-fund-sum .btn { display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; }
.cs-fund-sum .cs-funds-note { margin: 10px 0 0; }
@media (max-width: 991.98px) {
    .cs-fund-grid { grid-template-columns: 1fr; }
    .cs-fund-aside { position: static; }
}
@media (max-width: 575.98px) {
    .cs-fund-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cs-fund-card { padding: 18px; }
}

/* ==========================================================================
   Language / currency chooser (footer.tpl #modalChooseLanguage)
   ========================================================================== */
.cs-locale .modal-dialog { max-width: 400px; }
.cs-locale .modal-content { padding: 22px 22px 20px; border: 0; border-radius: var(--cs-radius-lg); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35); }
.cs-locale-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cs-theme .cs-locale-title { margin: 0; color: var(--cs-ink); font-size: 19px; font-weight: 600; }
.cs-theme .cs-locale-close { width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--cs-muted); cursor: pointer; }
.cs-theme .cs-locale-close:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-locale-label { margin: 6px 0 8px; color: var(--cs-muted); font-size: 13px; font-weight: 500; }
.cs-locale-list { overflow: hidden; margin-bottom: 14px; border: 1px solid var(--cs-border); border-radius: 12px; }
.cs-theme .cs-locale-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; border: 0; border-top: 1px solid var(--cs-border); background: var(--cs-surface); color: var(--cs-ink); font-size: 15px; text-align: left; cursor: pointer; }
.cs-theme .cs-locale-opt:first-child { border-top: 0; }
.cs-theme .cs-locale-opt:hover { background: var(--cs-surface-muted); }
.cs-theme .cs-locale-opt.is-active { background: var(--cs-primary-soft); font-weight: 600; }
.cs-locale-opt .iti-flag { flex: none; }
.cs-locale-name { flex: 1; }
.cs-locale-check { color: var(--cs-primary); visibility: hidden; }
.cs-locale-opt.is-active .cs-locale-check { visibility: visible; }
.cs-locale-seg { display: flex; gap: 4px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--cs-border); border-radius: 12px; background: var(--cs-surface-muted); }
.cs-theme .cs-locale-cur { flex: 1; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: var(--cs-text); font-size: 14px; font-weight: 500; cursor: pointer; }
.cs-theme .cs-locale-cur.is-active { background: var(--cs-surface); color: var(--cs-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 0 0 1px var(--cs-primary) inset; }
.cs-locale-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.cs-locale-foot .btn { min-width: 88px; font-weight: 600; }

/* Password generator modal (includes/generate-password.tpl), same look as the language chooser */
.cs-pwgen .modal-dialog { max-width: 420px; }
.cs-pwgen .modal-content { padding: 22px 22px 20px; border: 0; border-radius: var(--cs-radius-lg); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35); }
.cs-pwgen-out { display: flex; align-items: center; gap: 4px; margin-bottom: 16px; padding: 4px 4px 4px 14px; border: 1px solid var(--cs-border-strong); border-radius: 12px; background: var(--cs-surface-muted); }
.cs-pwgen-out:focus-within { border-color: var(--cs-primary); box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-theme .cs-pwgen-out .form-control { flex: 1; min-width: 0; height: 40px; padding: 0; border: 0; box-shadow: none; background: transparent; color: var(--cs-ink); font-family: var(--cs-font-mono); font-size: 16px; letter-spacing: .02em; }
.cs-theme .cs-pwgen-icon { flex: none; width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--cs-text); cursor: pointer; }
.cs-theme .cs-pwgen-icon:hover { background: var(--cs-surface); color: var(--cs-primary); }
.cs-pwgen .alert { margin-bottom: 12px; }

/* Alerts site-wide: soft tinted card with a leading icon (replaces WHMCS's boxed Bootstrap look). */
.cs-theme .alert { position: relative; padding: 14px 16px 14px 46px; border: 1px solid transparent; border-radius: 12px; font-size: 14px; line-height: 1.6; text-align: left; }
.cs-theme .alert::before { position: absolute; left: 16px; top: 14px; font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free"; font-weight: 900; font-size: 15px; line-height: 22px; }
.cs-theme .alert-danger { background: #fdecec; border-color: #f6d0cc; color: #8f2219; }
.cs-theme .alert-danger::before { content: "\f06a"; color: #c0392b; }
.cs-theme .alert-warning::before { content: "\f071"; color: var(--cs-amber); }
.cs-theme .alert-info::before { content: "\f05a"; color: var(--cs-primary); }
.cs-theme .alert-success { background: #e7f6ec; border-color: #c8ebd4; color: #14532d; }
.cs-theme .alert-success::before { content: "\f058"; color: #1a7f45; }
.cs-theme .alert.text-center { text-align: left !important; }
.cs-theme .alert ul { margin: 4px 0 0; padding-left: 18px; }
.cs-theme .alert ul li { margin: 2px 0; }
.cs-theme .alert p:last-child { margin-bottom: 0; }
.cs-theme .alert .close { position: absolute; right: 12px; top: 10px; opacity: .5; }
.cs-theme #totalDueToday.alert::before, .cs-theme .alert.w-hidden::before { content: none; }
.cs-co-error-title { font-weight: 600; }
.cs-theme .cs-co-error-login { margin-top: 10px; padding: 6px 14px; border: 1px solid #e6b3ad; border-radius: 999px; background: #fff; color: #8f2219; font-weight: 600; }
.cs-theme .cs-co-error-login:hover { background: #8f2219; border-color: #8f2219; color: #fff; }
.cs-co-error-login[hidden] { display: none; }

/* Gateway hand-off (forwardpage.tpl) */
.cs-forward { display: flex; justify-content: center; padding: 48px 0 64px; }
.cs-forward-card { width: 100%; max-width: 460px; padding: 36px 32px 28px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); text-align: center; box-shadow: 0 20px 40px -28px rgba(15, 23, 42, .25); }
.cs-forward-spin { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 16px; border-radius: 50%; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 22px; }
.cs-theme .cs-forward-title { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.cs-forward-msg { margin: 0 0 20px; color: var(--cs-muted); font-size: 14px; }
.cs-forward-pay:empty { display: none; }
.cs-forward-pay form { margin: 0; }
.cs-theme .cs-forward-pay .btn, .cs-theme .cs-forward-pay input[type=submit], .cs-theme .cs-forward-pay button { min-height: 42px; padding: 10px 24px; border: 0; border-radius: 10px; background: var(--cs-primary); color: #fff; font-weight: 600; }
.cs-forward-alt { display: inline-block; margin-top: 18px; color: var(--cs-muted); font-size: 13px; }

/* Change password (user-password.tpl) */
.cs-pw { max-width: 640px; }
.cs-pw-sub { margin: -4px 0 20px; color: var(--cs-muted); font-size: 13.5px; }
.cs-pw-form .form-group { margin-bottom: 18px; }
.cs-pw-form label { display: block; margin-bottom: 6px; color: var(--cs-ink); font-size: 14px; font-weight: 500; }
.cs-pw-field { display: flex; align-items: center; gap: 4px; padding-right: 4px; border: 1px solid var(--cs-border-strong); border-radius: 10px; background: var(--cs-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.cs-pw-field:focus-within { border-color: var(--cs-primary); box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-theme .cs-pw-field .form-control { flex: 1; min-width: 0; height: 44px; border: 0; box-shadow: none; background: transparent; }
.cs-theme .cs-pw-field .form-control.is-invalid, .cs-theme .cs-pw-field .form-control.is-valid, .cs-theme .cs-pw-field .form-control.is-warning { background-image: none; }
.cs-pw-field:has(.is-invalid) { border-color: #e2a59d; }
.cs-pw-field:has(.is-valid) { border-color: #9fd3b2; }
.cs-theme .cs-pw-eye { flex: none; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--cs-muted); cursor: pointer; }
.cs-theme .cs-pw-eye:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-theme .cs-pw-gen { flex: none; height: 36px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.cs-theme .cs-pw-gen:hover { background: var(--cs-primary); color: #fff; }
.cs-pw-meter > br { display: none; }
.cs-theme .cs-pw-meter .progress { height: 6px; margin: 10px 0 10px !important; border-radius: 999px; background: var(--cs-surface-muted); }
.cs-theme .cs-pw-meter .progress-bar { border-radius: 999px; transition: width .2s ease; }
.cs-theme .cs-pw-meter .alert { margin: 0; padding: 10px 14px 10px 40px; font-size: 12.5px; }
.cs-theme .cs-pw-meter .alert::before { left: 14px; top: 10px; font-size: 13px; line-height: 20px; }
.cs-theme .cs-pw-meter .alert .fa-info-circle { display: none; }
#inputNewPassword2Msg .form-text { margin: 6px 0 0; color: #c0392b !important; font-size: 13px; }
.cs-pw-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--cs-border); }
.cs-pw-actions .btn { min-width: 96px; font-weight: 600; }
@media (max-width: 575.98px) { .cs-theme .cs-pw-gen span, .cs-pw-gen { font-size: 12px; padding: 0 10px; } .cs-pw-actions .btn { flex: 1; } }

/* Security settings (user-security.tpl) */
.cs-sec { max-width: 760px; }
.cs-sec-row { display: flex; align-items: flex-start; gap: 16px; }
.cs-sec-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cs-amber-soft); color: var(--cs-amber); font-size: 18px; }
.cs-sec-icon.is-on { background: #e7f6ec; color: #1a7f45; }
.cs-sec-icon.w-hidden, .cs-sec-badge.w-hidden, .cs-sec-action .w-hidden { display: none !important; }
.cs-sec-main { flex: 1; min-width: 0; }
.cs-theme .cs-sec-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 2px 0 6px; color: var(--cs-ink); font-size: 17px; font-weight: 600; }
.cs-sec-badge { padding: 2px 10px; border-radius: 999px; background: var(--cs-amber-soft); color: var(--cs-amber); font-size: 12px; font-weight: 600; }
.cs-sec-badge.is-on { background: #e7f6ec; color: #1a7f45; }
.cs-sec-desc { margin: 0; color: var(--cs-text); font-size: 14px; line-height: 1.7; }
.cs-sec-req { margin: 10px 0 0; color: var(--cs-amber); font-size: 13px; font-weight: 500; }
.cs-sec-action { flex: none; align-self: center; }
.cs-sec-action .btn { min-width: 88px; font-weight: 600; }
@media (max-width: 575.98px) {
    .cs-sec-row { flex-wrap: wrap; }
    .cs-sec-main { flex-basis: calc(100% - 60px); }
    .cs-sec-action { width: 100%; padding-left: 60px; }
    .cs-sec-action .btn { width: 100%; }
}

/* WHMCS ajax modals (2FA setup and others, #modalAjax): match the site's dialogs */
.cs-theme #modalAjax .modal-content { border: 0; border-radius: var(--cs-radius-lg); box-shadow: 0 30px 60px -20px rgba(15, 23, 42, .35); overflow: hidden; }
.cs-theme #modalAjax .modal-header { padding: 18px 22px; border-bottom: 1px solid var(--cs-border); background: var(--cs-surface); color: var(--cs-ink); }
.cs-theme #modalAjax .modal-title { color: var(--cs-ink); font-size: 18px; font-weight: 600; }
.cs-theme #modalAjax .modal-header .close { color: var(--cs-muted); text-shadow: none; opacity: 1; }
.cs-theme #modalAjax .modal-body { padding: 20px 22px; color: var(--cs-text); font-size: 14px; }
.cs-theme #modalAjax .modal-footer { padding: 14px 22px; border-top: 1px solid var(--cs-border); background: var(--cs-surface-muted); }
.cs-theme #modalAjax .modal-footer .btn { min-width: 88px; font-weight: 600; }
.cs-theme #modalAjax .modal-footer .btn-default { border: 1px solid var(--cs-border-strong); background: var(--cs-surface); color: var(--cs-ink); }

/* Service details: non-active overview (clientareaproductdetails.tpl) */
.cs-sd-state-row { display: flex; align-items: flex-start; gap: 16px; }
.cs-sd-state-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cs-surface-muted); color: var(--cs-muted); font-size: 18px; }
.cs-sd-state.is-pending .cs-sd-state-icon { background: var(--cs-primary-soft); color: var(--cs-primary); }
.cs-sd-state.is-suspended .cs-sd-state-icon { background: var(--cs-amber-soft); color: var(--cs-amber); }
.cs-sd-state-main { flex: 1; min-width: 0; }
.cs-theme .cs-sd-state-title { margin: 2px 0 6px; color: var(--cs-ink); font-size: 17px; font-weight: 600; }
.cs-sd-state-desc { margin: 0; color: var(--cs-text); font-size: 14px; line-height: 1.7; }
.cs-sd-state-action { flex: none; align-self: center; }
.cs-sd-state-action .btn { font-weight: 600; }
.cs-sd-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 18px 24px; margin: 22px 0 0; padding-top: 20px; border-top: 1px solid var(--cs-border); }
.cs-sd-facts dt { margin-bottom: 4px; color: var(--cs-muted); font-size: 12.5px; font-weight: 500; }
.cs-sd-facts dd { margin: 0; color: var(--cs-ink); font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-sd-state-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.cs-theme .cs-sd-cancel { color: var(--cs-muted); }
.cs-theme .cs-sd-cancel:hover { color: #c0392b; }
@media (max-width: 575.98px) {
    .cs-sd-state-row { flex-wrap: wrap; }
    .cs-sd-state-main { flex-basis: calc(100% - 60px); }
    .cs-sd-state-action { width: 100%; }
    .cs-sd-state-action .btn { width: 100%; }
    .cs-sd-facts { grid-template-columns: 1fr 1fr; }
}

/* Terms of service (terms-of-service.tpl) */
.cs-legal { max-width: 760px; margin: 8px auto 40px; }
.cs-legal-head { margin-bottom: 20px; }
.cs-legal-body { padding: 32px 36px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius-lg); background: var(--cs-surface); color: var(--cs-text); font-size: 15px; line-height: 1.8; }
.cs-legal-body section + section { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--cs-border); }
.cs-theme .cs-legal-body h2 { margin: 0 0 10px; color: var(--cs-ink); font-size: 17px; font-weight: 600; }
.cs-legal-body p { margin: 0 0 8px; }
.cs-legal-body ul { margin: 8px 0 0; padding-left: 1.2em; }
.cs-legal-body ul li { margin: 4px 0; }
.cs-legal-body ul li::marker { color: var(--cs-primary); }
.cs-legal-num { margin: 0; padding: 0; list-style: none; }
.cs-legal-num > li { display: flex; gap: 12px; margin: 0 0 10px; }
.cs-legal-num > li > span { flex: none; min-width: 28px; color: var(--cs-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.cs-legal-num > li > div { flex: 1; min-width: 0; }
.cs-legal-body a { color: var(--cs-primary); font-weight: 500; }
@media (max-width: 575.98px) { .cs-legal-body { padding: 22px 18px; } }

/* Announcements v2: list rows with a date tile (announcements.tpl), eyebrow on the article page */
.cs-ann { max-width: 860px; margin: 0 auto; }
.cs-ann-head { margin-bottom: 18px; }
.cs-ann-sub { margin: 4px 0 0; color: var(--cs-muted); font-size: 14.5px; }
.cs-ann-list { display: grid; gap: 10px; }
.cs-ann-row { position: relative; display: flex; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); transition: border-color .15s ease, box-shadow .15s ease; }
.cs-ann-row:hover { border-color: var(--cs-border-strong); box-shadow: 0 10px 28px -20px rgba(15, 23, 42, .35); }
.cs-ann-row-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cs-ann-date { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 14px; background: var(--cs-primary-soft); color: var(--cs-primary); line-height: 1; }
.cs-ann-day { font-family: var(--cs-font-head); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cs-ann-ym { margin-top: 5px; font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; opacity: .8; }
.cs-ann-main { flex: 1; min-width: 0; }
.cs-theme .cs-ann-title { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; color: var(--cs-ink); font-size: 16.5px; font-weight: 600; line-height: 1.4; }
.cs-ann-row:hover .cs-ann-title { color: var(--cs-primary); }
.cs-ann-new { flex: none; padding: 1px 8px; border-radius: 999px; background: var(--cs-primary); color: #fff; font-size: 11px; font-weight: 600; }
.cs-ann-summary { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0; color: var(--cs-muted); font-size: 14px; line-height: 1.65; }
.cs-ann-go { flex: none; width: 20px; color: var(--cs-muted); font-size: 12px; text-align: center; transition: transform .15s ease; }
.cs-ann-row:hover .cs-ann-go { color: var(--cs-primary); transform: translateX(2px); }
.cs-theme .cs-ann-edit { position: relative; z-index: 2; color: var(--cs-muted); font-size: 13px; }
.cs-ann-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; border: 1px dashed var(--cs-border-strong); border-radius: var(--cs-radius); color: var(--cs-muted); font-size: 14px; }
.cs-ann-empty i { font-size: 22px; }
.cs-ann-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 12.5px; font-weight: 600; }
.cs-ann-eyebrow i { font-size: 11px; }
@media (max-width: 575.98px) {
    .cs-ann-row { align-items: flex-start; gap: 14px; padding: 16px; }
    .cs-ann-date { width: 50px; height: 50px; border-radius: 12px; }
    .cs-ann-day { font-size: 19px; }
    .cs-ann-go { display: none; }
}
/* Announcements: title-only rows */
.cs-ann-row { padding: 14px 18px; }
.cs-ann-date { width: 52px; height: 52px; border-radius: 12px; }
.cs-ann-day { font-size: 20px; }
.cs-theme .cs-ann-title { margin: 0; }
@media (max-width: 575.98px) { .cs-ann-row { align-items: center; padding: 12px 14px; } .cs-ann-date { width: 46px; height: 46px; } }

/* Standalone sign-in pages (login, password reset), Stripe-dashboard style: logo, card, small footer, diagonal bands */
body.cs-auth-page { display: flex; flex-direction: column; min-height: 100vh; background: #f6f5fb; }
.cs-auth-page #main-body { position: relative; z-index: 1; flex: 1; display: flex; align-items: center; padding: 8px 0 32px; background: transparent; }
.cs-auth-page #main-body > .container { width: 100%; }
.cs-auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cs-auth-bg::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -12vh; height: 52vh; background: linear-gradient(115deg, #5b21b6 0%, #7c3aed 38%, #a855f7 68%, #e879f9 100%); transform: skewY(-9deg); transform-origin: 0 100%; }
.cs-auth-bg span { position: absolute; left: -10%; right: -10%; height: 34px; transform: skewY(-9deg); transform-origin: 0 100%; }
.cs-auth-bg span:nth-child(1) { bottom: calc(40vh + 20px); left: auto; right: -10%; width: 42%; background: #c4b5fd; }
.cs-auth-bg span:nth-child(2) { bottom: calc(40vh - 14px); left: auto; right: -10%; width: 26%; background: #f0abfc; opacity: .85; }
.cs-auth-bg span:nth-child(3) { bottom: calc(40vh + 54px); left: -10%; right: auto; width: 22%; background: #ddd6fe; }
.cs-auth-top { position: relative; z-index: 1; display: flex; justify-content: center; padding: 48px 20px 28px; }
.cs-auth-logo img { display: block; height: 40px; width: auto; }
.cs-theme a.cs-auth-logo { color: var(--cs-ink); font-size: 22px; font-weight: 700; }
.cs-auth-page .cs-auth { max-width: 460px; margin: 0 auto; }
.cs-auth-page .cs-auth-card { padding: 44px 48px 0; border: 0; border-radius: 12px; box-shadow: 0 15px 35px 0 rgba(60, 66, 87, .1), 0 5px 15px 0 rgba(0, 0, 0, .07); }
.cs-auth-page .cs-auth-card > :last-child:not(.cs-auth-alt) { margin-bottom: 40px; }
.cs-auth-page .cs-theme .cs-auth-title, .cs-auth-page .cs-auth-title { margin: 0 0 24px; font-size: 22px; font-weight: 600; }
.cs-auth-page .cs-auth-sub { margin-top: -14px; }
.cs-auth-page .cs-auth .btn-primary.btn-lg { height: 46px; font-size: 15px; font-weight: 600; }
.cs-auth-alt { margin: 32px -48px 0; padding: 18px 48px; border-top: 1px solid var(--cs-border); border-radius: 0 0 12px 12px; background: var(--cs-surface-muted); color: var(--cs-muted); font-size: 14px; text-align: center; }
.cs-theme .cs-auth-alt a { font-weight: 600; }
.cs-auth-footer { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 22px; padding: 20px 20px 36px; color: rgba(255, 255, 255, .85); font-size: 13px; }
.cs-theme .cs-auth-footer a, .cs-auth-footer button { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .85); font-size: 13px; cursor: pointer; }
.cs-theme .cs-auth-footer a:hover, .cs-auth-footer button:hover { color: #fff; text-decoration: none; }
.cs-auth-footer .fa-globe { margin-right: 4px; font-size: 12px; }
@media (max-width: 575.98px) {
    .cs-auth-top { padding: 28px 16px 20px; }
    .cs-auth-logo img { height: 34px; }
    .cs-auth-page .cs-auth-card { padding: 30px 22px 0; }
    .cs-auth-page .cs-auth-card > :last-child:not(.cs-auth-alt) { margin-bottom: 28px; }
    .cs-auth-alt { margin: 26px -22px 0; padding: 16px 22px; }
    .cs-auth-bg::before { height: 34vh; }
    .cs-auth-bg span:nth-child(1) { bottom: calc(24vh + 20px); }
    .cs-auth-bg span:nth-child(2) { bottom: calc(24vh - 14px); }
    .cs-auth-bg span:nth-child(3) { bottom: calc(24vh + 54px); }
}
.cs-auth-page #main-body { align-items: flex-start; padding-top: 4vh; }
/* Password reset steps on the standalone auth page */
.cs-auth-page .cs-auth-card > .cs-auth-alt:last-child { margin-top: 28px; }
.cs-auth-page .cs-auth-card > form + .cs-auth-alt { margin-top: 32px; }
.cs-theme button.cs-auth-link { padding: 0; border: 0; background: none; color: var(--cs-muted); font-size: 13px; cursor: pointer; }
.cs-theme button.cs-auth-link:hover { color: var(--cs-primary); }
.cs-auth-gen .fa-magic { margin-right: 3px; font-size: 11px; }
.cs-auth-page .cs-auth-done { margin-bottom: 18px; }
.cs-auth-page .cs-auth-card .alert { margin-bottom: 18px; }

/* 404 (error/page-not-found.tpl) */
.cs-404 { max-width: 520px; margin: 56px auto 72px; text-align: center; }
.cs-404-code { color: var(--cs-primary); font-family: var(--cs-font-head); font-size: 88px; font-weight: 700; line-height: 1; letter-spacing: -2px; opacity: .9; }
.cs-theme .cs-404-title { margin: 18px 0 8px; color: var(--cs-ink); font-size: 24px; font-weight: 600; }
.cs-404-desc { margin: 0 0 26px; color: var(--cs-muted); font-size: 15px; }
.cs-404-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.cs-404-actions .btn { min-width: 120px; font-weight: 600; }

/* Cancel request (clientareacancelrequest.tpl) */
.cs-cancel { max-width: 680px; }
.cs-cancel-lead { margin: 4px 0 18px; color: var(--cs-muted); font-size: 14.5px; }
.cs-cancel-lead strong { color: var(--cs-ink); font-weight: 600; }
.cs-cancel-label { color: var(--cs-ink); font-size: 14px; font-weight: 600; }
.cs-cancel-types { display: grid; gap: 10px; }
.cs-cancel-types .cs-inv-method { align-items: flex-start; }
.cs-cancel-types .cs-inv-method-dot { margin-top: 3px; }
.cs-cancel-type { display: flex; flex-direction: column; gap: 3px; }
.cs-cancel-type b { color: var(--cs-ink); font-size: 14.5px; font-weight: 600; }
.cs-cancel-type small { color: var(--cs-muted); font-size: 13px; }
.cs-cancel-done { padding: 40px 28px; text-align: center; }
.cs-cancel-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin-bottom: 14px; border-radius: 50%; background: #e7f6ec; color: #1a7f45; font-size: 20px; }
.cs-cancel-icon.is-warn { background: var(--cs-amber-soft); color: var(--cs-amber); }
.cs-theme .cs-cancel-title { margin: 0 0 8px; color: var(--cs-ink); font-size: 20px; font-weight: 600; }
.cs-cancel-sub { margin: 0 auto 22px; max-width: 440px; color: var(--cs-muted); font-size: 14.5px; }

/* 2FA sign-in step: the module's own markup inside the auth card */
.cs-2fa .form-control { height: 48px; font-size: 20px; letter-spacing: .3em; text-align: center; font-variant-numeric: tabular-nums; }
.cs-2fa .btn { display: block; width: 100%; height: 46px; margin-top: 14px; font-weight: 600; }
.cs-2fa br { display: none; }
/* Pages rendered without the main-body container (error pages): drop the row gutters that overflowed by 15px */
#main-body > div:not([class*="container"]) > .row:not(.no-gutters) { margin-left: 0; margin-right: 0; }

/* Email archive (clientareaemails.tpl) and single email (viewemail.tpl) */
.cs-mail-list { display: grid; gap: 8px; }
.cs-theme a.cs-mail-row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--cs-border); border-radius: var(--cs-radius); background: var(--cs-surface); color: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.cs-theme a.cs-mail-row:hover { border-color: var(--cs-border-strong); box-shadow: 0 10px 28px -20px rgba(15, 23, 42, .35); text-decoration: none; }
.cs-mail-row[hidden] { display: none !important; }
.cs-mail-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 11px; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 15px; }
.cs-mail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cs-mail-subject { overflow: hidden; color: var(--cs-ink); font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cs-mail-date { color: var(--cs-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.cs-mail-go { flex: none; color: var(--cs-muted); font-size: 12px; }
.cs-mail-more { margin-top: 14px; text-align: center; }
body.cs-mailview { margin: 0; background: var(--cs-surface-muted); }
.cs-mailview-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--cs-border); background: var(--cs-surface); }
.cs-mailview-meta { flex: 1; min-width: 0; }
.cs-theme .cs-mailview-title { margin: 0; overflow: hidden; color: var(--cs-ink); font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cs-mailview-att { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; color: var(--cs-muted); font-size: 13px; }
.cs-mailview-frame { display: block; width: 100%; max-width: 720px; min-height: 70vh; margin: 24px auto; border: 0; border-radius: var(--cs-radius); background: #fff; }
@media (max-width: 575.98px) { .cs-mailview-head { padding: 12px 16px; } .cs-mailview-frame { margin: 0; border-radius: 0; } }

/* Alerts used as full-page errors (e.g. ticket not found): keep their headings small */
.cs-theme .alert h1, .cs-theme .alert h2, .cs-theme .alert h3, .cs-theme .alert h4 { margin: 0 0 4px; font-size: 16px; font-weight: 600; line-height: 1.5; }
.cs-mail-list { grid-template-columns: minmax(0, 1fr); }
/* Cart errors (orderform error.tpl) */
.cs-cart-error-icon { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: var(--cs-amber-soft); color: var(--cs-amber); font-size: 26px; }
/* Sold-out plan card */
.cs-plan-stock.is-out { background: var(--cs-amber-soft); color: var(--cs-amber); }
.cs-theme .cs-plan2-soldout.disabled { opacity: 1; border-color: var(--cs-border); background: var(--cs-surface-muted); color: var(--cs-muted); cursor: not-allowed; font-size: 15px; }

/* Referrals v2 (affiliatessignup.tpl / affiliates.tpl): same head and cards as the billing pages */
.cs-aff { max-width: none; }
.cs-aff-sub { margin: 4px 0 0; color: var(--cs-muted); font-size: 14.5px; }
.cs-aff-hero { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; padding: 32px; }
.cs-aff-rate { display: flex; align-items: baseline; gap: 8px; color: var(--cs-primary); }
.cs-aff-rate strong { font-family: var(--cs-font-head); font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -1px; }
.cs-aff-rate span { font-size: 16px; font-weight: 600; }
.cs-aff-hero-text { margin: 14px 0 22px; color: var(--cs-text); font-size: 15px; line-height: 1.75; }
.cs-aff-hero .btn-lg { font-weight: 600; }
.cs-aff-howto { display: grid; gap: 18px; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--cs-border); list-style: none; }
.cs-aff-howto li { display: flex; align-items: flex-start; gap: 14px; }
.cs-aff-howto-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: var(--cs-primary-soft); color: var(--cs-primary); font-size: 15px; }
.cs-aff-howto b { display: block; margin-bottom: 2px; color: var(--cs-ink); font-size: 15px; font-weight: 600; }
.cs-aff-howto small { color: var(--cs-muted); font-size: 13.5px; line-height: 1.6; }
.cs-theme .cs-aff-h2 { margin: 28px 0 12px; color: var(--cs-ink); font-size: 17px; font-weight: 600; }
.cs-aff .cs-aff-stats { margin-top: 16px; }
@media (max-width: 767.98px) {
    .cs-aff-hero { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
    .cs-aff-howto { padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--cs-border); }
    .cs-aff-rate strong { font-size: 46px; }
    .cs-aff-hero .btn-lg { width: 100%; }
}
/* Guest header: language switch in place of the cart */
.cs-theme .cs-lang-btn { align-items: center; gap: 6px; height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--cs-text); font-size: 14px; font-weight: 500; }
.cs-theme .cs-lang-btn:hover { background: var(--cs-surface-muted); color: var(--cs-ink); }
.cs-lang-btn .fa-globe { font-size: 15px; }