/*
 * STRONE client theme — loaded after Twenty-One's theme.min.css.
 * Palette: deep ink navy + electric blue, with a mint accent.
 */
:root {
    --st-primary: #2f5bff;
    --st-primary-600: #2349e6;
    --st-primary-700: #1b38b8;
    --st-primary-50: #eef2ff;
    --st-accent: #14c8a8;
    --st-accent-600: #0b8f78;
    --st-ink: #0a1222;
    --st-ink-2: #0f1a31;
    --st-ink-3: #1a2747;
    --st-text: #172033;
    --st-muted: #5d6b86;
    --st-line: #e3e8f2;
    --st-bg: #f4f6fb;
    --st-white: #ffffff;
    --st-warn: #f5a524;
    --st-danger: #e5484d;
    --st-radius: 14px;
    --st-radius-sm: 10px;
    --st-shadow: 0 1px 2px rgba(16, 27, 51, .06), 0 8px 24px rgba(16, 27, 51, .06);
    --st-shadow-lg: 0 2px 6px rgba(16, 27, 51, .08), 0 24px 48px rgba(16, 27, 51, .12);
    --st-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "PingFang SC", "Hiragino Sans GB",
        "Microsoft JhengHei", "Microsoft YaHei", "Noto Sans CJK TC", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---------- Base ---------- */
body.st-body {
    font-family: var(--st-font);
    color: var(--st-text);
    background: var(--st-bg);
    -webkit-font-smoothing: antialiased;
}
body.st-body.st-full { background: var(--st-white); }
.st-body h1, .st-body h2, .st-body h3, .st-body h4, .st-body h5, .st-body h6 {
    font-family: var(--st-font);
    color: var(--st-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}
/* Element-level link colour so component classes (.st-tab, .st-region, buttons) can override it. */
a { color: var(--st-primary); }
a:hover { color: var(--st-primary-700); }
.st-body .text-muted { color: var(--st-muted) !important; }
.st-body ::selection { background: rgba(47, 91, 255, .18); }

/* ---------- Buttons ---------- */
.st-body .btn { border-radius: var(--st-radius-sm); font-weight: 600; }
.st-body .btn-primary,
.st-body .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--st-primary);
    border-color: var(--st-primary);
    color: #fff;
}
.st-body .btn-primary:hover, .st-body .btn-primary:focus {
    background: var(--st-primary-600);
    border-color: var(--st-primary-600);
    color: #fff;
}
/* Twenty-One's "header.header .navbar a" (#444) outranks the rules above */
.st-body header.header .navbar a.btn-primary,
.st-body header.header .navbar a.btn-primary:hover,
.st-body header.header .navbar a.btn-primary:focus { color: #fff; }
.st-body .btn-outline-primary { color: var(--st-primary); border-color: var(--st-primary); }
.st-body .btn-outline-primary:hover { background: var(--st-primary); border-color: var(--st-primary); color: #fff; }
.st-body .btn-success,
.st-body .btn-success:not(:disabled):not(.disabled):active {
    background: var(--st-accent-600);
    border-color: var(--st-accent-600);
    color: #fff;
}
.st-body .btn-success:hover, .st-body .btn-success:focus { background: #097a66; border-color: #097a66; color: #fff; }
.st-body .btn-default { background: #fff; border: 1px solid var(--st-line); color: var(--st-text); }
.st-body .btn-default:hover { border-color: #c9d2e3; background: #f8f9fc; }
.st-body .btn:focus, .st-body .form-control:focus {
    box-shadow: 0 0 0 3px rgba(47, 91, 255, .2);
}
.st-body .form-control { border-radius: var(--st-radius-sm); border-color: var(--st-line); }
.st-body .form-control:focus { border-color: var(--st-primary); }
.st-body .badge-info, .st-body .badge-primary { background: var(--st-primary); }

/* ---------- Header ---------- */
header.header.st-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(--st-line);
}
.st-header .st-topbar { background: var(--st-ink); color: #c7d0e3; font-size: 13px; }
.st-header .st-topbar .btn, .st-header .st-topbar .input-group-text { color: #c7d0e3; background: transparent; border: 0; font-size: 13px; }
.st-header .st-topbar .btn-active-client span { color: #fff; }
.st-navbar { padding: 0; min-height: 72px; }
.st-navbar > .container { min-height: 72px; flex-wrap: wrap; }
.st-brand { padding: 0; margin-right: 28px; display: flex; align-items: center; }
.st-navbar .st-brand .logo-img { max-height: 34px; height: 34px; max-width: 180px; width: auto; object-fit: contain; }
.st-brand-text { font-size: 22px; font-weight: 800; color: var(--st-ink); letter-spacing: .02em; }
.st-nav-tools { gap: 8px; margin-left: auto; }
.st-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
    border-radius: var(--st-radius-sm);
    color: var(--st-text);
    background: transparent;
    border: 1px solid transparent;
    position: relative;
}
.st-icon-btn:hover { background: var(--st-bg); color: var(--st-ink); }
.st-icon-btn-label { font-size: 13px; font-weight: 600; }
.st-cart-count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--st-primary);
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}
.st-cart-count.is-empty { display: none; }
.st-btn-ghost { color: var(--st-text); background: transparent; border: 1px solid var(--st-line); height: 40px; align-items: center; }
.st-btn-ghost:hover { border-color: #c9d2e3; color: var(--st-ink); background: #fff; }
.st-btn-cta { height: 40px; align-items: center; padding: 0 18px; }
.st-btn-text { height: 40px; align-items: center; padding: 0 14px; color: var(--st-text); background: transparent; border: 0; }
.st-btn-text:hover { background: var(--st-bg); color: var(--st-ink); }
.st-nav-sep { width: 1px; height: 20px; background: var(--st-line); margin: 0 6px; }
.st-logo-light { display: none; }

.st-nav > li > a {
    display: block;
    padding: 24px 14px !important;
    color: var(--st-text);
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: color .15s ease;
}
.st-nav > li > a:hover, .st-nav > li.show > a, .st-nav > li.active > a { color: var(--st-primary); }
.st-nav .dropdown-toggle::after { margin-left: 6px; vertical-align: 2px; border-top-width: 5px; opacity: .6; }
.st-nav .dropdown-menu {
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: var(--st-shadow-lg);
    padding: 8px;
    margin-top: -6px;
    min-width: 230px;
}
.st-nav .dropdown-menu li.dropdown-item { padding: 0; background: transparent; }
.st-nav .dropdown-menu a.dropdown-item {
    display: block;
    padding: 9px 12px !important;
    border-radius: 8px;
    color: var(--st-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}
.st-nav .dropdown-menu a.dropdown-item:hover { background: var(--st-primary-50); color: var(--st-primary-700); }
/* Every top item is no-collapse (see includes/hooks/strone_theme.php), so the fold-out "More" menu is never needed. */
.st-nav .collapsable-dropdown { display: none !important; }
.st-nav-mobile-auth { display: grid; gap: 8px; padding: 12px 0 18px; }
@media (max-width: 1199.98px) {
    /* Twenty-One zeroes the header container's gutter below xl */
    .st-body .st-navbar > .container { padding-left: 16px; padding-right: 16px; }
    .st-navbar .navbar-collapse { border-top: 1px solid var(--st-line); margin: 0 -16px; padding: 6px 16px; max-height: 75vh; overflow-y: auto; }
    .st-nav > li > a { padding: 12px 4px !important; }
    .st-nav .dropdown-menu { box-shadow: none; border: 0; margin: 0 0 8px; padding: 0 0 0 10px; }
}

/* Utility bar above the header (guests only) */
.st-utilbar { background: #070d1a; color: #8f9cb8; font-size: 13px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.st-utilbar .container { min-height: 38px; gap: 16px; }
.st-utilbar-msg { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-utilbar-msg i { color: var(--st-accent); margin-right: 6px; }
.st-utilbar-links { display: flex; gap: 22px; white-space: nowrap; }
.st-utilbar-links a { color: #aab6cf; }
.st-utilbar-links a:hover { color: #fff; text-decoration: none; }
.st-utilbar-links i { margin-right: 5px; opacity: .7; font-size: 12px; }

/* Dropdown menus (includes/navbar.tpl) */
.st-body .st-nav > li > a:focus { outline: none; box-shadow: none; }
.st-body .st-nav > li > a:focus-visible { outline: 2px solid var(--st-primary); outline-offset: -6px; border-radius: 8px; }
.st-nav .st-menu {
    min-width: 300px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 18px;
    background: radial-gradient(420px 180px at 100% 0, rgba(47, 91, 255, .22), transparent 70%),
        radial-gradient(360px 160px at 0 100%, rgba(20, 200, 168, .12), transparent 70%),
        rgba(13, 22, 42, .97);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .2), 0 24px 60px rgba(3, 8, 20, .55);
    overflow: hidden;
}
/* Brand gradient hairline along the top edge */
.st-nav .st-menu::after {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--st-primary), var(--st-accent), transparent);
    opacity: .9;
}
.st-nav .st-menu .dropdown-divider { margin: 10px 12px; border-top-color: rgba(255, 255, 255, .08); }
.st-nav .st-menu li.dropdown-item { background: transparent; }
.st-nav .st-menu a.st-menu-item { position: relative; display: flex; align-items: center; gap: 12px; padding: 15px 36px 15px 14px !important; border-radius: 14px; white-space: normal; background: transparent; }
.st-nav .st-menu a.st-menu-item::after {
    content: "\f054";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 11px;
    position: absolute;
    right: 14px;
    top: 50%;
    color: var(--st-accent);
    opacity: 0;
    transform: translate(-4px, -50%);
    transition: opacity .15s ease, transform .15s ease;
}
.st-menu-tile {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    background: linear-gradient(135deg, rgba(47, 91, 255, .45), rgba(20, 200, 168, .25));
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .05em;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.st-menu-tile i { font-size: 15px; color: #8fe9d6; }
.st-menu-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.st-menu-label { font-size: 15px; font-weight: 600; color: #fff; }
.st-menu-desc { font-size: 13px; color: #b4c0d8; margin-top: 5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-nav .st-menu a.st-menu-item:hover, .st-nav .st-menu a.st-menu-item:focus { background: rgba(255, 255, 255, .055); }
.st-nav .st-menu a.st-menu-item:hover::after { opacity: 1; transform: translate(0, -50%); }
.st-nav .st-menu a.st-menu-item:hover .st-menu-tile {
    background: linear-gradient(135deg, var(--st-primary), var(--st-accent));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 18px rgba(47, 91, 255, .35);
}
.st-nav .st-menu a.st-menu-item:hover .st-menu-tile i { color: #fff; }
.st-nav .st-menu a.st-menu-item:hover .st-menu-label { color: #fff; }
@media (min-width: 1200px) {
    /* Horizontal mega menu: two columns, centred under the whole nav bar. */
    .st-nav .st-menu { display: grid !important; grid-template-columns: repeat(2, minmax(260px, max-content)); gap: 8px 12px; width: max-content; max-width: min(860px, calc(100vw - 40px)); padding: 20px; }
    .st-nav .st-menu > li.dropdown-item { min-width: 0; }
    .st-nav .st-menu .dropdown-divider { grid-column: 1 / -1; }
    /* Open on hover with a short fade; the ::before strip bridges the gap so the menu stays open while moving to it. */
    .st-navbar .st-nav { position: relative; }
    .st-nav > li.dropdown { position: static; }
    .st-nav > li.dropdown > .dropdown-menu {
        display: block;
        top: 100%;
        left: 50%;
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 8px);
        transition: opacity .16s ease, transform .16s ease, visibility 0s linear .16s;
    }
    .st-nav > li.dropdown > .dropdown-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
    .st-nav > li.dropdown:hover > .dropdown-menu,
    .st-nav > li.dropdown.show > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -6px);
        transition: opacity .16s ease, transform .16s ease, visibility 0s;
    }
    .st-nav > li.dropdown:hover > a { color: var(--st-primary); }
    .st-body .st-header-over .st-nav > li.dropdown:hover > a { color: #fff; }
    .st-nav > li.dropdown > a.dropdown-toggle::after { transition: transform .16s ease; }
    .st-nav > li.dropdown:hover > a.dropdown-toggle::after { transform: rotate(180deg); }
}
@media (max-width: 1199.98px) {
    .st-nav .st-menu { min-width: 0; box-shadow: none; border: 0; padding: 8px; margin: 0 0 10px; border-radius: 14px; }
    .st-nav .st-menu::after { display: none; }
}

/* Full-width pages: header floats over the dark hero, turns solid on scroll (script in header.tpl). */
@media (min-width: 1200px) { .st-navbar .navbar-collapse { flex-grow: 1; } }
header.header.st-header-over {
    margin-bottom: calc(-1 * var(--st-header-h, 73px));
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom-color: transparent;
    transition: background-color .2s ease, border-color .2s ease;
}
header.header.st-header-over.is-scrolled, header.header.st-header-over.is-open {
    background: rgba(10, 18, 34, .95);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom-color: rgba(255, 255, 255, .08);
}
.st-header-over .st-logo-dark { display: none; }
.st-header-over .st-logo-light { display: block; }
.st-body .st-header-over .st-nav > li > a,
.st-body .st-header-over .st-icon-btn,
.st-body .st-header-over .st-btn-text { color: #d5ddee; }
.st-body .st-header-over .st-nav > li > a:hover,
.st-body .st-header-over .st-nav > li.show > a,
.st-body .st-header-over .st-nav > li.active > a { color: #fff; }
.st-body .st-header-over .st-icon-btn:hover,
.st-body .st-header-over .st-btn-text:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.st-header-over .st-nav-sep { background: rgba(255, 255, 255, .16); }
.st-header-over .st-lang .iti-flag { box-shadow: none; }
.st-header-over .st-nav-mobile-auth .st-btn-ghost,
.st-header-over .st-nav-mobile-lang a { color: #d5ddee; border-color: rgba(255, 255, 255, .16); }
.st-header-over .st-nav-mobile-lang a.active { color: #fff; border-color: var(--st-primary); background: rgba(47, 91, 255, .18); }
.st-header-over .navbar-collapse { border-top-color: rgba(255, 255, 255, .08) !important; }
.st-full .st-hero { padding-top: calc(80px + var(--st-header-h, 73px)); }
.st-full .st-page-hero { padding-top: calc(56px + var(--st-header-h, 73px)); }

/* Language switcher (includes/st-language.tpl) */
.st-lang .st-lang-toggle::after { margin-left: 2px; border-top-width: 5px; opacity: .55; }
.st-lang .iti-flag { box-shadow: 0 0 0 1px rgba(16, 27, 51, .08); border-radius: 2px; flex: none; }
.st-lang-menu {
    min-width: 200px;
    padding: 8px;
    border: 1px solid var(--st-line);
    border-radius: 16px;
    box-shadow: var(--st-shadow-lg);
}
.st-lang-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    font-weight: 600;
    color: var(--st-text);
}
.st-lang-menu .dropdown-item:hover { background: var(--st-bg); color: var(--st-ink); }
.st-lang-menu .dropdown-item.active, .st-lang-menu .dropdown-item:active { background: var(--st-primary-50); color: var(--st-primary); }
.st-lang-footer .st-lang-toggle { color: #c7d0e3; border: 1px solid rgba(255, 255, 255, .14); }
.st-lang-footer .st-lang-toggle:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.st-nav-mobile-lang { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0 16px; }
.st-nav-mobile-lang a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--st-line);
    border-radius: 10px;
    color: var(--st-text);
    font-weight: 600;
    font-size: 14px;
}
.st-nav-mobile-lang a.active { border-color: var(--st-primary); color: var(--st-primary); background: var(--st-primary-50); }

/* ---------- Breadcrumb / page chrome ---------- */
.st-breadcrumb { background: transparent; border: 0; padding-top: 18px; }
.st-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: 13px; }
.st-breadcrumb .breadcrumb a { color: var(--st-muted); }
#main-body { padding-top: 24px; padding-bottom: 56px; }
#main-body.st-main-full { padding: 0; }
.st-body .card, .st-body .card-sidebar {
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    box-shadow: var(--st-shadow);
}
.st-body .card-sidebar .card-header { background: transparent; border-bottom: 1px solid var(--st-line); }
.st-body .list-group-item.active, .st-body .card-sidebar .list-group-item.active {
    background: var(--st-primary-50);
    border-color: transparent;
    color: var(--st-primary-700);
    font-weight: 600;
}
.st-body .table thead th { border-bottom-width: 1px; color: var(--st-muted); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; }
.st-body .pagination .page-item.active .page-link { background: var(--st-primary); border-color: var(--st-primary); }
.st-body .nav-tabs .nav-link.active { color: var(--st-primary); border-bottom-color: var(--st-primary); }
.st-body .alert { border-radius: var(--st-radius-sm); }

/* Order form (standard_cart) */
#order-standard_cart .header-lined h1, #order-standard_cart .cart-sidebar .panel-title { color: var(--st-ink); }
#order-standard_cart .products .product { border-radius: var(--st-radius); border-color: var(--st-line); box-shadow: var(--st-shadow); overflow: hidden; }
#order-standard_cart .products .product header { background: var(--st-ink-2); border-bottom: 0; }
#order-standard_cart .products .product header span { color: #fff; }
#order-standard_cart .products .product div.product-pricing span.price { color: var(--st-ink); }
#order-standard_cart .summary-container { border-radius: var(--st-radius); border-color: var(--st-line); }
#order-standard_cart .order-summary { background: var(--st-ink-2); border-radius: var(--st-radius); border-color: var(--st-ink-2); }
#order-standard_cart .order-summary h2 { color: #fff; }
#order-standard_cart .order-summary .total-due-today .amt { color: #fff; }
#order-standard_cart .view-cart-items-header { background: var(--st-ink-2); border-radius: var(--st-radius) var(--st-radius) 0 0; }
#order-standard_cart .btn-checkout, #order-standard_cart .btn-continue-shopping { border-radius: var(--st-radius-sm); }

/* ---------- Shared marketing sections ---------- */
.st-section { padding: 88px 0; }
.st-section-sm { padding: 56px 0; }
.st-section-alt { background: var(--st-bg); }
.st-section-dark { background: var(--st-ink); color: #c7d0e3; }
.st-section-dark h2, .st-section-dark h3, .st-section-dark h4 { color: #fff; }
.st-section-dark .st-card h3 { color: var(--st-ink); }
.st-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--st-primary-700);
    background: var(--st-primary-50);
    margin-bottom: 18px;
}
.st-eyebrow-dark { color: #9fe9da; background: rgba(20, 200, 168, .12); }
.st-section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }
.st-section-head h2 { font-size: 34px; line-height: 1.2; margin-bottom: 14px; }
.st-section-head p { font-size: 17px; color: var(--st-muted); margin: 0; }
.st-section-dark .st-section-head p { color: #9aa7c2; }
.st-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--st-primary);
    background: var(--st-primary-50);
    margin-bottom: 18px;
}
.st-icon-accent { color: var(--st-accent-600); background: rgba(20, 200, 168, .12); }
.st-card {
    height: 100%;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    padding: 28px;
    box-shadow: var(--st-shadow);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
a.st-card { display: block; color: inherit; text-decoration: none; }
a.st-card:hover, .st-card-hover:hover { transform: translateY(-3px); box-shadow: var(--st-shadow-lg); border-color: #cfd8ea; color: inherit; }
.st-card h3 { font-size: 19px; margin-bottom: 8px; }
.st-card p { color: var(--st-muted); margin-bottom: 0; font-size: 15px; line-height: 1.65; }
.st-card .st-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 16px; font-weight: 600; color: var(--st-primary); font-size: 14px; }

/* ---------- Hero ---------- */
.st-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1100px 500px at 85% -10%, rgba(47, 91, 255, .35), transparent 60%),
        radial-gradient(800px 400px at -10% 110%, rgba(20, 200, 168, .18), transparent 60%),
        var(--st-ink);
    color: #c7d0e3;
    padding: 96px 0 88px;
}
.st-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 60% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at 60% 30%, #000 30%, transparent 75%);
    pointer-events: none;
}
.st-hero .container { position: relative; }
.st-hero h1 { color: #fff; font-size: 52px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin-bottom: 20px; }
.st-hero h1 .st-grad {
    background: linear-gradient(90deg, #7aa2ff, #5ef0d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.st-hero-lead { font-size: 18px; line-height: 1.7; color: #aab6cf; max-width: 560px; margin-bottom: 32px; }
.st-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.st-hero-actions .btn { height: 48px; padding: 0 22px; display: inline-flex; align-items: center; gap: 8px; font-size: 16px; }
.st-btn-light { background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .18); }
.st-btn-light:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.st-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 36px; }
.st-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    color: #c7d0e3;
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .03);
}
.st-chip i { color: var(--st-accent); }
.st-hero-panel {
    background: rgba(15, 26, 49, .78);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
    padding: 22px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.st-hero-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; color: #fff; font-weight: 700; }
.st-hero-panel-head small { color: #8b98b5; font-weight: 500; }
.st-region {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    color: #dbe3f3;
    text-decoration: none;
    transition: background .15s ease;
}
.st-region + .st-region { margin-top: 4px; }
.st-region:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.st-region-code {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(47, 91, 255, .18);
    color: #a9bfff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
}
.st-region-name { font-weight: 600; }
.st-region-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #8b98b5; }
.st-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--st-accent); box-shadow: 0 0 0 0 rgba(20, 200, 168, .6); animation: st-pulse 2.4s infinite; }
@keyframes st-pulse {
    0% { box-shadow: 0 0 0 0 rgba(20, 200, 168, .55); }
    70% { box-shadow: 0 0 0 8px rgba(20, 200, 168, 0); }
    100% { box-shadow: 0 0 0 0 rgba(20, 200, 168, 0); }
}
@media (prefers-reduced-motion: reduce) { .st-pulse { animation: none; } }

/* Compact page hero (inner pages) */
.st-page-hero { padding: 72px 0 64px; }
.st-page-hero h1 { font-size: 42px; }
.st-page-hero .st-hero-lead { margin-bottom: 0; }

/* ---------- Plans ---------- */
.st-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 40px; }
.st-tab {
    padding: 9px 16px;
    border-radius: 999px;
    border: 1px solid var(--st-line);
    background: #fff;
    color: var(--st-text);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.st-tab:hover { border-color: #c9d2e3; color: var(--st-ink); text-decoration: none; }
.st-tab.active { background: var(--st-ink); border-color: var(--st-ink); color: #fff; }
.st-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--st-line);
    border-radius: var(--st-radius);
    padding: 26px;
    box-shadow: var(--st-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
}
.st-plan:hover { transform: translateY(-3px); box-shadow: var(--st-shadow-lg); }
.st-plan-name { font-size: 18px; font-weight: 700; color: var(--st-ink); margin-bottom: 16px; }
.st-plan-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 18px; padding-bottom: 18px; border-bottom: 1px dashed var(--st-line); }
.st-plan-price .amount { font-size: 34px; font-weight: 800; color: var(--st-ink); letter-spacing: -.02em; }
.st-plan-price .cycle { color: var(--st-muted); font-size: 14px; }
.st-plan-price .from { color: var(--st-muted); font-size: 13px; margin-right: 4px; }
.st-plan-features { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.st-plan-features li { position: relative; padding: 6px 0 6px 24px; font-size: 14px; color: var(--st-text); line-height: 1.5; }
.st-plan-features li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 12px;
    width: 12px;
    height: 7px;
    border-left: 2px solid var(--st-accent-600);
    border-bottom: 2px solid var(--st-accent-600);
    transform: rotate(-45deg);
}
.st-plan-features li:empty { display: none; }
.st-plan .btn { height: 44px; display: flex; align-items: center; justify-content: center; }
/* Plan grid: one row of up to five cards, centred when a region has fewer plans. */
.st-plan-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.st-plan-grid > .st-plan { flex: 1 1 200px; max-width: 280px; }
.st-plan-grid > .st-plan-empty { flex: 0 1 640px; }
@media (max-width: 575.98px) { .st-plan-grid > .st-plan { max-width: none; } }
.st-plan-specs { list-style: none; padding: 0; margin: 0 0 22px; flex: 1; }
.st-plan-specs li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: 13.5px; line-height: 1.45; border-bottom: 1px solid #f0f3f9; }
.st-plan-specs li:last-child { border-bottom: 0; }
.st-plan-specs i { width: 16px; flex: none; text-align: center; color: var(--st-primary); font-size: 13px; opacity: .85; }
.st-plan-specs .v { flex: 1; min-width: 0; color: var(--st-ink); font-weight: 600; word-break: break-word; }
.st-plan-specs .k { flex: none; color: var(--st-muted); font-size: 12px; }
.st-plan-grid .st-plan { padding: 22px; }

/* Product page hero panel */
.st-product-panel { padding: 24px; }
.st-product-panel-head { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.st-product-panel-head .st-region-code { width: 48px; height: 48px; font-size: 14px; }
.st-product-panel-title { color: #fff; font-weight: 700; font-size: 17px; }
.st-product-panel-sub { color: #8f9cb8; font-size: 13px; margin-top: 2px; }
.st-product-panel-price { display: flex; align-items: baseline; gap: 6px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.st-product-panel-price .from { color: #8f9cb8; font-size: 13px; }
.st-product-panel-price .amount { color: #fff; font-size: 36px; font-weight: 800; letter-spacing: -.02em; }
.st-product-panel-price .cycle { color: #8f9cb8; font-size: 14px; }
.st-product-panel-list { list-style: none; padding: 0; margin: 16px 0 0; }
.st-product-panel-list li { display: flex; align-items: center; gap: 12px; padding: 7px 0; color: #c7d0e3; font-size: 14px; }
.st-product-panel-list i { width: 18px; text-align: center; color: var(--st-accent); }
@media (max-width: 991.98px) { .st-product-panel { margin-top: 36px; } }

.st-plan-soldout { position: absolute; top: 18px; right: 18px; font-size: 12px; font-weight: 700; color: var(--st-danger); background: #fdecec; border-radius: 999px; padding: 3px 10px; }
.st-plan.is-soldout { opacity: .72; }
.st-group-title { display: flex; align-items: center; gap: 12px; margin: 48px 0 20px; font-size: 22px; }
.st-group-title:first-child { margin-top: 0; }

/* ---------- Stats / CTA ---------- */
.st-stat { text-align: center; }
.st-stat strong { display: block; font-size: 40px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.st-stat span { color: #9aa7c2; font-size: 14px; }
.st-cta {
    border-radius: 22px;
    padding: 56px;
    background: radial-gradient(600px 300px at 90% 0%, rgba(20, 200, 168, .25), transparent 60%),
        linear-gradient(135deg, var(--st-primary-700), var(--st-primary));
    color: #dfe7ff;
    box-shadow: var(--st-shadow-lg);
}
.st-cta h2 { color: #fff; font-size: 32px; margin-bottom: 10px; }
.st-cta p { margin: 0; font-size: 17px; }
.st-cta .btn-light { height: 48px; padding: 0 24px; display: inline-flex; align-items: center; color: var(--st-primary-700); font-weight: 700; }

/* ---------- Content pages ---------- */
.st-prose { font-size: 16px; line-height: 1.8; color: var(--st-text); }
.st-prose h2, .st-prose h3 { margin: 32px 0 12px; font-size: 22px; }
.st-prose p { margin-bottom: 14px; }
.st-prose strong { color: var(--st-ink); }
.st-legal-nav { position: sticky; top: 100px; }
.st-legal-nav a {
    display: block;
    padding: 10px 14px;
    border-radius: 10px;
    color: var(--st-text);
    font-weight: 600;
    text-decoration: none;
}
.st-legal-nav a:hover { background: var(--st-bg); }
.st-legal-nav a.active { background: var(--st-primary-50); color: var(--st-primary-700); }
.st-faq .card { border-radius: var(--st-radius-sm); margin-bottom: 12px; box-shadow: none; }
.st-faq .card-header { background: #fff; border: 0; padding: 0; }
.st-faq .card-header button {
    width: 100%;
    text-align: left;
    padding: 18px 22px;
    font-weight: 700;
    color: var(--st-ink);
    background: transparent;
    border: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.st-faq .card-header button::after { content: "+"; font-size: 22px; color: var(--st-muted); transition: transform .2s; }
.st-faq .card-header button[aria-expanded="true"]::after { transform: rotate(45deg); }
.st-faq .card-body { padding: 0 22px 20px; color: var(--st-muted); line-height: 1.7; }
.st-steps { counter-reset: st-step; }
.st-step { position: relative; padding-top: 8px; }
.st-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--st-ink);
    color: #fff;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.st-address { font-size: 15px; color: var(--st-muted); line-height: 1.7; }
.st-address strong { color: var(--st-ink); display: block; margin-bottom: 4px; font-size: 17px; }

/* ---------- Footer ---------- */
#footer.st-footer { background: var(--st-ink); color: #9aa7c2; padding: 72px 0 28px; margin-top: 0; border-top: 0; }
.st-footer-brand img { height: 34px; width: auto; }
.st-footer-brand { font-size: 24px; font-weight: 800; color: #fff !important; letter-spacing: .02em; text-decoration: none !important; }
.st-footer-about { margin: 14px 0 20px; font-size: 14px; line-height: 1.75; max-width: 360px; }
.st-footer-title { color: #fff; font-size: 14px; font-weight: 700; margin-bottom: 16px; letter-spacing: .02em; }
.st-footer-links li { margin-bottom: 10px; }
.st-footer-links a { color: #9aa7c2; font-size: 14px; text-decoration: none; }
.st-footer-links a:hover { color: #fff; }
.st-footer-social .list-inline-item a { color: #9aa7c2; }
.st-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); margin-top: 40px; padding-top: 24px; font-size: 13px; }
.st-footer .copyright { color: #7d8aa8; }
.st-footer-locale { color: #c7d0e3; border: 1px solid rgba(255, 255, 255, .14); background: transparent; font-size: 13px; }
.st-footer-locale:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.st-dot { opacity: .5; margin: 0 2px; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .st-hero { padding: 64px 0; }
    .st-full .st-hero, .st-full .st-page-hero { padding-top: calc(48px + var(--st-header-h, 73px)); }
    .st-hero h1 { font-size: 38px; }
    .st-hero-panel { margin-top: 40px; }
    .st-section { padding: 64px 0; }
    .st-section-head h2 { font-size: 28px; }
    .st-cta { padding: 36px 28px; text-align: center; }
    .st-cta .btn-light { margin-top: 20px; }
    .st-page-hero h1 { font-size: 32px; }
}
@media (max-width: 575.98px) {
    .st-hero h1 { font-size: 31px; }
    .st-hero-lead { font-size: 16px; }
    .st-card, .st-plan { padding: 22px; }
}

/* =====================================================================
   Client area (logged-in pages): dashboard hero, service hero, sidebar,
   panels, tables, tabs, and the DCIMS server panel recoloured to STRONE.
   ===================================================================== */
header.header .topbar.st-topbar { background: var(--st-ink); border-bottom: 1px solid rgba(255, 255, 255, .06); padding: 4px 0; }
header.header .topbar.st-topbar .btn,
header.header .topbar.st-topbar .input-group-text { color: #aab6cf; background: transparent; border: 0; font-size: 13px; box-shadow: none; }
header.header .topbar.st-topbar .btn:hover { color: #fff; }
header.header .topbar.st-topbar .btn-active-client span { color: #fff; border-bottom: 1px dashed rgba(255, 255, 255, .35); }
.st-loggedin #main-body { background: var(--st-bg); padding-top: 8px; }
.st-loggedin .master-breadcrumb { background: transparent; }

/* Shared dark surface used by both heroes */
.st-ca-hero, .st-svc-hero {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    color: #c7d0e3;
    background: radial-gradient(700px 260px at 100% 0, rgba(47, 91, 255, .38), transparent 62%),
        radial-gradient(520px 220px at 0 100%, rgba(20, 200, 168, .16), transparent 60%),
        linear-gradient(120deg, #0a1222 0%, #0f1a31 55%, #14234a 100%);
    box-shadow: 0 18px 40px rgba(10, 18, 34, .18);
    margin-bottom: 24px;
}
.st-ca-hero::before, .st-svc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
    background-size: 36px 36px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 20%, #000 25%, transparent 75%);
    mask-image: radial-gradient(ellipse at 70% 20%, #000 25%, transparent 75%);
    pointer-events: none;
}
.st-ca-hero > *, .st-svc-hero > * { position: relative; }
.st-body .st-btn-danger-ghost { color: #ffb4b6; background: rgba(229, 72, 77, .1); border: 1px solid rgba(229, 72, 77, .45); }
.st-body .st-btn-danger-ghost:hover { color: #fff; background: var(--st-danger); border-color: var(--st-danger); }

/* Dashboard hero */
.st-ca-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; padding: 30px 32px; }
.st-ca-hero-main { display: flex; gap: 20px; align-items: flex-start; min-width: 0; }
.st-ca-avatar {
    flex: none;
    width: 68px;
    height: 68px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #fff;
    letter-spacing: .02em;
    background: linear-gradient(135deg, var(--st-primary), var(--st-accent));
    box-shadow: 0 10px 24px rgba(47, 91, 255, .35), inset 0 0 0 1px rgba(255, 255, 255, .2);
}
.st-ca-who { min-width: 0; }
.st-ca-hello { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-accent); }
.st-ca-who h1 { color: #fff; font-size: 28px; font-weight: 800; margin: 4px 0 10px; letter-spacing: -.01em; }
.st-ca-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: #aab6cf; }
.st-ca-meta span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.st-ca-meta i { color: #7f8eac; margin-right: 4px; }
.st-ca-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.st-ca-actions .btn { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 14px; }
.st-ca-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.st-ca-stat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .055);
    border: 1px solid rgba(255, 255, 255, .09);
    color: #c7d0e3;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.st-ca-stat:hover { text-decoration: none; color: #fff; background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); transform: translateY(-2px); }
.st-ca-stat-ic { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(47, 91, 255, .22); color: #9db4ff; font-size: 16px; }
.st-ca-stat-v { color: #fff; font-size: 24px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; }
.st-ca-stat-money { font-size: 19px; }
.st-ca-stat-k { font-size: 12.5px; color: #8f9cb8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-ca-stat.is-warn .st-ca-stat-ic { background: rgba(245, 165, 36, .18); color: #ffc46b; }
.st-ca-stat.is-warn .st-ca-stat-k { color: #ffc46b; }

/* Dashboard panels */
.st-ca-addon { margin-bottom: 18px; }
.st-ca-panels .card.st-ca-panel { border: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-shadow); overflow: hidden; margin-bottom: 22px; }
.st-ca-panel .card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border-bottom: 1px solid var(--st-line); padding: 16px 20px; }
.st-ca-panel .card-title { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 16px; font-weight: 700; color: var(--st-ink); }
.st-ca-panel-ic { width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: var(--st-primary-50); color: var(--st-primary); font-size: 14px; }
.st-ca-panel-red .st-ca-panel-ic, .st-ca-panel-pomegranate .st-ca-panel-ic { background: #fdecec; color: var(--st-danger); }
.st-ca-panel-gold .st-ca-panel-ic, .st-ca-panel-orange .st-ca-panel-ic { background: #fff5e6; color: #d98a00; }
.st-ca-panel-green .st-ca-panel-ic, .st-ca-panel-emerald .st-ca-panel-ic { background: #e6faf5; color: var(--st-accent-600); }
.st-ca-panel .card-title .badge { background: var(--st-primary); color: #fff; border-radius: 999px; padding: 4px 9px; font-size: 12px; }
.st-ca-panel-btn { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--st-primary); background: var(--st-primary-50); }
.st-ca-panel-btn:hover { text-decoration: none; background: var(--st-primary); color: #fff; }
.st-ca-panel .list-group { border-radius: 0; }
.st-ca-panel .list-group-item { border-left: 0; border-right: 0; border-color: #eef1f7; padding: 14px 20px; color: var(--st-text); font-size: 14px; }
.st-ca-panel .list-group-item:first-child { border-top: 0; }
.st-ca-panel a.list-group-item:hover { background: #f8faff; }
.st-ca-panel .list-group-item .btn { border-radius: 9px; font-size: 13px; font-weight: 600; }
.st-ca-panel .list-group-item small, .st-ca-panel .list-group-item .text-last-updated { color: var(--st-muted); }
.st-ca-panel .card-body { padding: 18px 20px; }
.st-ca-panel .card-footer { background: #fafbfe; border-top: 1px solid #eef1f7; padding: 10px 20px; font-size: 13px; }
.st-ca-panel .card-footer:empty { display: none; }

/* Status labels used across the client area */
.st-body .label.status, .st-body span.label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.2; }
.st-body .label.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st-body .status-active, .st-body .status-paid, .st-body .status-open, .st-body .status-completed { background: #e6faf5 !important; color: #0b8f78 !important; }
.st-body .status-pending, .st-body .status-unpaid, .st-body .status-customer-reply, .st-body .status-answered { background: #fff5e6 !important; color: #b86e00 !important; }
.st-body .status-suspended, .st-body .status-overdue, .st-body .status-fraud, .st-body .status-cancelled, .st-body .status-terminated, .st-body .status-closed, .st-body .status-expired { background: #f1f3f8 !important; color: #5d6b86 !important; }
.st-body .status-suspended, .st-body .status-overdue, .st-body .status-fraud { background: #fdecec !important; color: #c4353a !important; }

/* Sidebar cards (all logged-in pages) */
.st-body .sidebar .card { border: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-shadow); overflow: hidden; margin-bottom: 18px; }
.st-body .sidebar .card-header { background: #fff; border-bottom: 1px solid var(--st-line); padding: 14px 18px; }
.st-body .sidebar .card-title { font-size: 14px; font-weight: 700; color: var(--st-ink); }
.st-body .sidebar .card-title i { color: var(--st-primary); margin-right: 4px; }
.st-body .sidebar .card-minimise { color: var(--st-muted); }
.st-body .sidebar .list-group-item { border: 0; border-bottom: 1px solid #f0f3f9; padding: 11px 18px; font-size: 14px; color: var(--st-text); }
.st-body .sidebar .list-group-item:last-child { border-bottom: 0; }
.st-body .sidebar .list-group-item i { color: var(--st-muted); width: 18px; }
.st-body .sidebar a.list-group-item:hover { background: #f8faff; color: var(--st-primary); }
.st-body .sidebar .list-group-item.active { background: var(--st-primary-50); color: var(--st-primary-700); font-weight: 600; box-shadow: inset 3px 0 0 var(--st-primary); }
.st-body .sidebar .list-group-item.active i { color: var(--st-primary); }
.st-body .sidebar .card-body { font-size: 14px; color: var(--st-text); }
.st-body .sidebar .card-footer { background: #fafbfe; border-top: 1px solid #eef1f7; }

/* Main content cards, tables and tabs */
.st-loggedin .primary-content > .card, .st-loggedin .primary-content .card.card-default { border: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-shadow); }
.st-loggedin .primary-content .card-title, .st-loggedin .primary-content h2.card-title { font-weight: 700; color: var(--st-ink); }
.st-loggedin .table-container, .st-loggedin .dataTables_wrapper { background: #fff; border: 1px solid var(--st-line); border-radius: 16px; box-shadow: var(--st-shadow); padding: 6px 0 0; overflow: hidden; }
.st-loggedin .table-list { margin: 0 !important; border: 0 !important; }
.st-loggedin .table-list > thead > tr > th { background: #f7f9fd; color: var(--st-muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--st-line) !important; border-top: 0 !important; padding: 12px 16px; }
.st-loggedin .table-list > tbody > tr > td { padding: 14px 16px; border-top: 1px solid #f0f3f9 !important; vertical-align: middle; font-size: 14px; color: var(--st-text); background: #fff; }
.st-loggedin .table-list > tbody > tr:hover > td { background: #f8faff; }
.st-loggedin .table-list > tbody > tr > td strong { color: var(--st-ink); }
.st-loggedin .dataTables_wrapper .dataTables_filter input, .st-loggedin .dataTables_wrapper .dataTables_length select { border: 1px solid var(--st-line); border-radius: 10px; height: 36px; }
.st-loggedin .dataTables_wrapper .dataTables_info, .st-loggedin .dataTables_wrapper .dataTables_paginate { padding: 12px 16px; font-size: 13px; color: var(--st-muted); }
.st-loggedin .pagination .page-item.active .page-link { background: var(--st-primary); border-color: var(--st-primary); }
.st-loggedin .pagination .page-link { border-radius: 8px; margin: 0 2px; border-color: var(--st-line); color: var(--st-text); }
.st-loggedin .nav-tabs.responsive-tabs-sm { border-bottom: 0; gap: 6px; background: #eef2f9; border-radius: 12px 12px 0 0; padding: 6px 6px 0; }
.st-loggedin .nav-tabs.responsive-tabs-sm .nav-link { border: 0; border-radius: 10px 10px 0 0; color: var(--st-muted); font-weight: 600; font-size: 14px; padding: 11px 18px; }
.st-loggedin .nav-tabs.responsive-tabs-sm .nav-link:hover { color: var(--st-ink); }
.st-loggedin .nav-tabs.responsive-tabs-sm .nav-link.active { background: #fff; color: var(--st-primary); box-shadow: 0 -1px 0 var(--st-line); }
.st-loggedin .product-details-tab-container { border: 1px solid var(--st-line); border-top: 0; border-radius: 0 0 16px 16px; box-shadow: var(--st-shadow); padding: 24px !important; margin-bottom: 24px; }
.st-loggedin .product-details-tab-container .row { padding: 7px 0; border-bottom: 1px dashed #eef1f7; margin: 0; }
.st-loggedin .product-details-tab-container .row:last-child { border-bottom: 0; }
.st-loggedin .product-details-tab-container strong { color: var(--st-muted); font-weight: 600; }
.st-loggedin .alert { border-radius: 12px; border-width: 1px; }

/* Service (product details) hero */
.st-svc-hero { padding: 28px 30px 0; }
.st-svc-hero-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px; }
.st-svc-id { display: flex; gap: 18px; align-items: flex-start; min-width: 0; }
.st-svc-ic { flex: none; width: 58px; height: 58px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 22px; color: #fff; background: linear-gradient(135deg, var(--st-primary), var(--st-accent)); box-shadow: 0 10px 24px rgba(47, 91, 255, .35); }
.st-svc-group { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-accent); }
.st-svc-hero h1 { color: #fff; font-size: 28px; font-weight: 800; margin: 2px 0 12px; letter-spacing: -.01em; word-break: break-word; }
.st-svc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.st-svc-status, .st-svc-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.st-svc-status { background: rgba(20, 200, 168, .16); color: #6ff0d6; border: 1px solid rgba(20, 200, 168, .35); }
.st-svc-status .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px rgba(20, 200, 168, .18); }
.st-svc-pending .st-svc-status { background: rgba(245, 165, 36, .16); color: #ffc46b; border-color: rgba(245, 165, 36, .4); }
.st-svc-suspended .st-svc-status, .st-svc-fraud .st-svc-status { background: rgba(229, 72, 77, .16); color: #ffa3a6; border-color: rgba(229, 72, 77, .4); }
.st-svc-terminated .st-svc-status, .st-svc-cancelled .st-svc-status, .st-svc-completed .st-svc-status { background: rgba(255, 255, 255, .08); color: #c7d0e3; border-color: rgba(255, 255, 255, .18); }
.st-svc-chip { background: rgba(255, 255, 255, .07); color: #dbe3f5; border: 1px solid rgba(255, 255, 255, .12); font-family: SFMono-Regular, Menlo, Consolas, monospace; font-weight: 500; }
.st-svc-chip i { color: #8f9cb8; font-size: 11px; }
.st-svc-copy { cursor: pointer; }
.st-svc-copy:hover { background: rgba(255, 255, 255, .13); }
.st-svc-copy.is-copied { border-color: var(--st-accent); color: #6ff0d6; }
.st-svc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.st-svc-actions .btn { height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; font-size: 14px; }
.st-svc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 26px -30px 0; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .14); }
.st-svc-fact { padding: 16px 22px; border-right: 1px solid rgba(255, 255, 255, .06); min-width: 0; }
.st-svc-fact:last-child { border-right: 0; }
.st-svc-fact .k { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #7f8eac; margin-bottom: 4px; }
.st-svc-fact .v { display: block; color: #fff; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-svc-fact.is-due .v { color: #ffd38a; }
.st-svc-suspend { margin: 0 -30px; padding: 12px 30px; background: rgba(229, 72, 77, .16); color: #ffb4b6; font-size: 14px; }

/* DCIMS server panel (modules/servers/ipmi/templates/dcims) in STRONE colours */
#dcims-panel { --dcx-ink: var(--st-ink); --dcx-sub: var(--st-muted); --dcx-line: var(--st-line); --dcx-soft: #f6f8fd; --dcx-blue: var(--st-primary); }
html.dcx-page body.st-body { background-color: var(--st-bg) !important; }

@media (max-width: 991.98px) {
    .st-ca-hero { grid-template-columns: 1fr; padding: 24px 20px; }
    .st-svc-hero { padding: 22px 20px 0; }
    .st-svc-facts { margin: 22px -20px 0; }
    .st-svc-suspend { margin: 0 -20px; padding: 12px 20px; }
}
@media (max-width: 575.98px) {
    .st-ca-hero-main { flex-direction: column; gap: 14px; }
    .st-ca-who h1, .st-svc-hero h1 { font-size: 23px; }
    .st-ca-stats { grid-template-columns: 1fr 1fr; }
    .st-ca-stat { padding: 12px; column-gap: 10px; }
    .st-ca-stat-ic { width: 34px; height: 34px; }
    .st-ca-stat-v { font-size: 20px; }
    .st-svc-id { flex-direction: column; gap: 12px; }
    .st-svc-actions { width: 100%; }
    .st-svc-actions .btn { flex: 1 1 auto; justify-content: center; }
    .st-svc-facts { grid-template-columns: 1fr 1fr; }
    .st-svc-fact { border-bottom: 1px solid rgba(255, 255, 255, .06); }
}

/* ---------- Dedicated summary page (pages/dedicated.tpl): region switcher ---------- */
.st-dedi-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-bottom: 26px; }
.st-dedi-region {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 10px;
    padding: 14px 16px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--st-line);
    box-shadow: var(--st-shadow);
    color: var(--st-text);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.st-dedi-region:hover { text-decoration: none; color: var(--st-text); border-color: #c9d4f2; transform: translateY(-2px); }
.st-dedi-code { grid-row: 1; width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; letter-spacing: .05em; color: var(--st-primary); background: var(--st-primary-50); border: 1px solid #dbe4ff; }
.st-dedi-meta { display: flex; flex-direction: column; min-width: 0; justify-content: center; }
.st-dedi-name { font-weight: 700; color: var(--st-ink); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dedi-line { font-size: 12px; color: var(--st-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dedi-stat { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--st-line); }
.st-dedi-stat b { font-size: 17px; color: var(--st-ink); }
.st-dedi-stat small { color: var(--st-muted); white-space: nowrap; }
.st-dedi-stat em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--st-muted); white-space: nowrap; }
.st-dedi-region.is-active {
    border-color: transparent;
    color: #c7d0e3;
    background: radial-gradient(260px 120px at 100% 0, rgba(47, 91, 255, .45), transparent 70%), linear-gradient(135deg, #0a1222, #14234a);
    box-shadow: 0 14px 30px rgba(10, 18, 34, .22);
}
.st-dedi-region.is-active .st-dedi-code { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--st-primary), var(--st-accent)); }
.st-dedi-region.is-active .st-dedi-name, .st-dedi-region.is-active .st-dedi-stat b { color: #fff; }
.st-dedi-region.is-active .st-dedi-line, .st-dedi-region.is-active .st-dedi-stat small, .st-dedi-region.is-active .st-dedi-stat em { color: #9fb0cf; }
.st-dedi-region.is-active .st-dedi-stat { border-top-color: rgba(255, 255, 255, .12); }
.st-dedi-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.st-dedi-head h2 { font-size: 24px; font-weight: 800; margin: 0 0 2px; color: var(--st-ink); }
.st-dedi-head p { margin: 0; color: var(--st-muted); }
.st-dedi-head .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; }
@media (max-width: 575.98px) {
    .st-dedi-regions { grid-template-columns: 1fr 1fr; gap: 10px; }
    .st-dedi-region { padding: 12px; }
    .st-dedi-code { width: 36px; height: 36px; font-size: 12px; }
    .st-dedi-line { display: none; }
    .st-dedi-stat { flex-wrap: wrap; row-gap: 2px; }
    .st-dedi-stat b { font-size: 15px; }
    .st-dedi-stat em { width: 100%; margin-left: 0; }
}