/*!
 * PiensaHost child theme (parent: nexus) — client area stylesheet.
 *
 * Source of truth for the visual language: the piensahost.com design system
 * (piensa-sitio-a/src/styles/tokens.css + DESIGN_GUIDELINES.md).
 * Tokens are mirrored here with a --ph- prefix, because Nexus already uses
 * names like --text-sm / --text-muted with other values.
 *
 * This file REPLACES nexus/css/custom.css (child themes override files by
 * name), so section 1 keeps every Nexus variable, remapped to PiensaHost.
 *
 * Rules: tokens only, no loose hex below section 2. Breakpoints 1000px
 * (navigation) and 720px (one column), as on piensahost.com.
 */
@import url('../fonts/fonts.css?v=1');

/* =========================================================================
   1. PiensaHost tokens (mirror of tokens.css, light theme)
   ========================================================================= */
:root {
    --ph-ink-950: #16171C;
    --ph-ink-900: #1D1E24;
    --ph-ink-800: #26282F;
    --ph-ink-700: #34363F;
    --ph-ink-600: #4A4D58;
    --ph-ink-500: #6E7280;
    --ph-ink-400: #8B8F9A;
    --ph-ink-300: #AEB1B9;

    --ph-paper: #FBFAF8;
    --ph-paper-raised: #FFFFFF;
    --ph-sand-50: #F6F4F0;
    --ph-sand-100: #EFEDE7;
    --ph-sand-200: #E5E2DA;
    --ph-sand-300: #D7D3C9;
    --ph-sand-400: #C2BDB1;

    --ph-flame-50: #FFF2EC;
    --ph-flame-100: #FFE0D2;
    --ph-flame-500: #FF713A;
    --ph-flame-600: #E85C28;
    --ph-flame-700: #C44A1E;

    --ph-success-500: #2F8F6B;
    --ph-success-50: #EAF4EF;
    --ph-warning-500: #C68A14;
    --ph-warning-50: #FBF3E0;
    --ph-danger-500: #C2453A;
    --ph-danger-50: #FBEBE9;
    --ph-info-500: #4D789B;
    --ph-info-50: #EDF3F7;

    /* Aliases (use these in rules) */
    --ph-surface-page: var(--ph-paper);
    --ph-surface-card: var(--ph-paper-raised);
    --ph-surface-sunken: var(--ph-sand-50);
    --ph-surface-inverse: var(--ph-ink-900);
    --ph-surface-inverse-2: var(--ph-ink-800);

    --ph-text-strong: var(--ph-ink-900);
    --ph-text-body: var(--ph-ink-700);
    --ph-text-muted: var(--ph-ink-500);
    --ph-text-subtle: var(--ph-ink-400);
    --ph-text-on-ink: #F3F2EF;
    --ph-text-on-ink-muted: #A9ACB4;
    /* Links: flame-700 on white is ~4.9:1 (AA). flame-600 fails for body text. */
    --ph-text-link: var(--ph-flame-700);

    --ph-border-subtle: var(--ph-sand-200);
    --ph-border-default: var(--ph-sand-300);
    --ph-border-strong: var(--ph-ink-300);
    --ph-border-on-ink: rgba(255, 255, 255, 0.12);

    --ph-accent: var(--ph-flame-500);
    --ph-accent-hover: var(--ph-flame-600);
    --ph-accent-press: var(--ph-flame-700);
    --ph-accent-tint: var(--ph-flame-50);
    --ph-text-on-accent: var(--ph-ink-900); /* white on flame-500 fails AA */
    --ph-focus-ring: var(--ph-flame-500);

    --ph-font-sans: 'Schibsted Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --ph-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    --ph-fw-regular: 400;
    --ph-fw-medium: 500;
    --ph-fw-semibold: 600;
    --ph-fw-bold: 700;

    --ph-text-eyebrow: 0.75rem;
    --ph-text-xs: 0.8125rem;
    --ph-text-sm: 0.875rem;
    --ph-text-base: 1rem;
    --ph-text-md: 1.125rem;
    --ph-text-lg: 1.375rem;
    --ph-text-xl: 1.75rem;
    --ph-leading-heading: 1.22;
    --ph-leading-body: 1.6;
    --ph-tracking-heading: -0.01em;
    --ph-tracking-eyebrow: 0.16em;

    --ph-space-1: 0.25rem;
    --ph-space-2: 0.5rem;
    --ph-space-3: 0.75rem;
    --ph-space-4: 1rem;
    --ph-space-5: 1.5rem;
    --ph-space-6: 2rem;
    --ph-space-7: 3rem;
    --ph-gutter: clamp(1.25rem, 4vw, 2.5rem);

    --ph-radius-xs: 6px;
    --ph-radius-sm: 8px;
    --ph-radius-md: 12px;
    --ph-radius-lg: 16px;
    --ph-radius-full: 999px;

    --ph-shadow-xs: 0 1px 2px rgba(29, 30, 36, 0.05);
    --ph-shadow-sm: 0 1px 3px rgba(29, 30, 36, 0.06), 0 1px 2px rgba(29, 30, 36, 0.04);
    --ph-shadow-md: 0 4px 16px rgba(29, 30, 36, 0.07), 0 1px 3px rgba(29, 30, 36, 0.05);
    --ph-shadow-lg: 0 16px 40px rgba(29, 30, 36, 0.10), 0 2px 8px rgba(29, 30, 36, 0.05);
    --ph-shadow-focus: 0 0 0 3px rgba(255, 113, 58, 0.32);

    --ph-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ph-dur-fast: 120ms;
    --ph-dur-base: 200ms;

    --ph-rail-w: 240px;
    --ph-topbar-h: 64px;
}

/* =========================================================================
   2. Nexus variables, remapped to PiensaHost (kept from nexus/custom.css)
   ========================================================================= */
:root {
    --white: #fff;

    --neutral-50: var(--ph-paper);
    --neutral-100: var(--ph-sand-50);
    --neutral-200: var(--ph-sand-200);
    --neutral-300: var(--ph-sand-300);
    --neutral-400: var(--ph-ink-400);
    --neutral-500: var(--ph-ink-500);
    --neutral-600: var(--ph-ink-600);
    --neutral-700: var(--ph-ink-700);
    --neutral-800: var(--ph-ink-800);
    --neutral-900: var(--ph-ink-900);
    --neutral-950: var(--ph-ink-950);

    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    --primary: var(--ph-ink-900);
    --primary-lifted: var(--ph-ink-800);
    --primary-accented: var(--ph-ink-700);

    --secondary: var(--ph-ink-500);
    --secondary-lifted: var(--ph-ink-600);
    --secondary-accented: var(--ph-ink-700);

    --success: var(--ph-success-500);
    --success-lifted: var(--ph-success-500);
    --success-accented: var(--ph-success-500);

    --info: var(--ph-info-500);
    --info-lifted: var(--ph-info-500);
    --info-accented: var(--ph-info-500);

    --notice: var(--ph-info-500);
    --notice-lifted: var(--ph-info-500);
    --notice-accented: var(--ph-info-500);

    --warning: var(--ph-warning-500);
    --warning-lifted: var(--ph-warning-500);
    --warning-accented: var(--ph-warning-500);

    --error: var(--ph-danger-500);
    --error-lifted: var(--ph-danger-500);
    --error-accented: var(--ph-danger-500);

    --grayscale: var(--ph-ink-900);
    --grayscale-lifted: var(--ph-ink-800);
    --grayscale-accented: var(--ph-ink-700);

    --neutral: var(--ph-ink-500);
    --neutral-lifted: var(--ph-ink-600);
    --neutral-accented: var(--ph-ink-700);

    --text-inverted: var(--ph-text-on-ink);
    --text-muted: var(--ph-text-subtle);
    --text-lifted: var(--ph-text-muted);
    --text-accented: var(--ph-ink-600);
    --text: var(--ph-text-strong);

    --border-muted: var(--ph-border-subtle);
    --border: var(--ph-border-default);
    --border-lifted: var(--ph-border-strong);
    --border-accented: var(--ph-ink-600);

    --bg: var(--ph-paper-raised);
    --bg-muted: var(--ph-paper);
    --bg-lifted: var(--ph-sand-50);
    --bg-accented: var(--ph-sand-100);
    --bg-inverted: var(--ph-ink-900);

    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: var(--ph-radius-sm);
    --rounding-md: var(--ph-radius-md);
    --rounding-lg: var(--ph-radius-lg);

    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* =========================================================================
   3. Base
   ========================================================================= */
body.ph-app {
    background: var(--ph-surface-page);
    color: var(--ph-text-body);
    font-family: var(--ph-font-sans);
    font-size: var(--ph-text-base);
    line-height: var(--ph-leading-body);
    -webkit-font-smoothing: antialiased;
}
.ph-app h1, .ph-app h2, .ph-app h3, .ph-app h4, .ph-app h5, .ph-app h6,
.ph-app .h1, .ph-app .h2, .ph-app .h3, .ph-app .h4, .ph-app .h5 {
    font-family: var(--ph-font-sans);
    color: var(--ph-text-strong);
    letter-spacing: var(--ph-tracking-heading);
    line-height: var(--ph-leading-heading);
    text-wrap: balance;
}
.ph-app a:not(.btn) { color: var(--ph-text-link); }
.ph-app a:not(.btn):hover { color: var(--ph-accent-press); }
.ph-app ::selection { background: var(--ph-flame-100); }
.ph-app a:focus-visible,
.ph-app button:focus-visible,
.ph-app .btn:focus-visible,
.ph-app input:focus-visible,
.ph-app select:focus-visible,
.ph-app textarea:focus-visible {
    outline: 2px solid var(--ph-focus-ring);
    outline-offset: 2px;
}
.ph-icon { display: block; flex: none; }

.ph-skip-link {
    position: absolute;
    left: var(--ph-space-4);
    top: -100px;
    z-index: 2000;
    padding: var(--ph-space-2) var(--ph-space-4);
    background: var(--ph-surface-card);
    border-radius: var(--ph-radius-sm);
    box-shadow: var(--ph-shadow-md);
}
.ph-skip-link:focus { top: var(--ph-space-4); }

/* =========================================================================
   4. Layout: rail + shell
   ========================================================================= */
.ph-rail {
    background: var(--ph-surface-inverse);
    color: var(--ph-text-on-ink-muted);
    z-index: 1030;
}
.ph-rail-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--ph-topbar-h);
    padding: 0 var(--ph-space-5);
    border-bottom: 1px solid var(--ph-border-on-ink);
}
.ph-rail-logo img { display: block; height: 24px; width: auto; }
.ph-rail-list {
    list-style: none;
    margin: 0;
    padding: var(--ph-space-4) var(--ph-space-3);
}
.ph-rail-item { position: relative; margin-bottom: 2px; }
.ph-rail-link {
    display: flex;
    align-items: center;
    gap: var(--ph-space-3);
    padding: 10px var(--ph-space-3);
    border-radius: var(--ph-radius-md);
    color: var(--ph-text-on-ink-muted) !important;
    font-size: var(--ph-text-sm);
    font-weight: var(--ph-fw-medium);
    text-decoration: none !important;
    transition: background var(--ph-dur-base) var(--ph-ease), color var(--ph-dur-base) var(--ph-ease);
}
.ph-rail-link::after { display: none !important; } /* Bootstrap dropdown caret */
.ph-rail-link:hover,
.ph-rail-item.show > .ph-rail-link {
    background: rgba(255, 255, 255, 0.06);
    color: var(--ph-text-on-ink) !important;
}
.ph-rail-item.active > .ph-rail-link,
.ph-rail-item.is-current > .ph-rail-link {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ph-text-on-ink) !important;
    box-shadow: inset 2px 0 0 var(--ph-accent);
}
.ph-rail-icon { display: inline-flex; color: inherit; opacity: 0.9; }
.ph-rail-label { flex: 1 1 auto; min-width: 0; }
.ph-rail-chevron { display: inline-flex; opacity: 0.5; }
.ph-rail-chevron .ph-icon { width: 16px; height: 16px; }
.ph-rail-badge {
    padding: 0 var(--ph-space-2);
    border-radius: var(--ph-radius-full);
    background: var(--ph-accent);
    color: var(--ph-text-on-accent);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
}

/* Flyout with the children of a rail item (Bootstrap dropdown, static) */
.ph-rail .ph-rail-menu {
    min-width: 220px;
    padding: var(--ph-space-2);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-md);
    background: var(--ph-surface-card);
    box-shadow: var(--ph-shadow-lg);
    list-style: none;
}
.ph-rail-menu-title {
    padding: var(--ph-space-2) var(--ph-space-3) var(--ph-space-1);
    color: var(--ph-text-muted);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    letter-spacing: var(--ph-tracking-eyebrow);
    text-transform: uppercase;
}
.ph-rail-menu .dropdown-item {
    padding: var(--ph-space-2) var(--ph-space-3);
    border-radius: var(--ph-radius-sm);
    color: var(--ph-text-strong) !important;
    font-size: var(--ph-text-sm);
    white-space: normal;
}
.ph-rail-menu .dropdown-item:hover,
.ph-rail-menu .dropdown-item:focus {
    background: var(--ph-surface-sunken);
}
.ph-rail-menu .dropdown-divider { margin: var(--ph-space-2) 0; border-color: var(--ph-border-subtle); }

/* Top bar */
.ph-topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--ph-topbar-h);
    background: rgba(251, 250, 248, 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ph-border-subtle);
}
.ph-topbar-inner {
    display: flex;
    align-items: center;
    gap: var(--ph-space-3);
    height: 100%;
    padding: 0 var(--ph-gutter);
}
.ph-topbar-logo { display: none; }
.ph-topbar-logo img { display: block; height: 22px; width: auto; }
.ph-topbar-actions {
    display: flex;
    align-items: center;
    gap: var(--ph-space-1);
    margin-left: auto;
}
.ph-topbar-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    height: 40px;
    padding: 0 var(--ph-space-3);
    border: 0;
    border-radius: var(--ph-radius-md);
    background: transparent;
    color: var(--ph-text-body) !important;
    font-size: var(--ph-text-sm);
    font-weight: var(--ph-fw-medium);
    text-decoration: none !important;
    transition: background var(--ph-dur-base) var(--ph-ease);
}
.ph-topbar-btn:hover { background: var(--ph-sand-100); color: var(--ph-text-strong) !important; }
.ph-menu-toggle { display: none; margin-left: calc(var(--ph-space-2) * -1); }
.ph-dot-badge {
    position: absolute;
    top: 4px;
    left: 24px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--ph-radius-full);
    background: var(--ph-accent);
    color: var(--ph-text-on-accent);
    font-size: 11px;
    font-weight: var(--ph-fw-semibold);
    line-height: 18px;
    text-align: center;
}
.ph-dot-badge.is-empty { display: none; }

/* Account menu (secondary navbar, rendered by nexus includes/navbar.tpl) */
.ph-account-nav { flex-direction: row; margin: 0; }
.ph-account-nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    height: 40px;
    padding: 0 var(--ph-space-3);
    border-radius: var(--ph-radius-md);
    color: var(--ph-text-strong) !important;
    font-size: var(--ph-text-sm);
    font-weight: var(--ph-fw-semibold);
    text-decoration: none !important;
}
.ph-account-nav > li > a:hover { background: var(--ph-sand-100); }
.ph-account-nav .dropdown-menu {
    position: absolute;
    margin-top: var(--ph-space-2);
    padding: var(--ph-space-2);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-md);
    box-shadow: var(--ph-shadow-lg);
    list-style: none;
}
.ph-account-nav .dropdown-menu > li { padding: 0; }
.ph-account-nav .dropdown-menu .dropdown-item {
    padding: var(--ph-space-2) var(--ph-space-3) !important;
    border-radius: var(--ph-radius-sm);
    color: var(--ph-text-strong);
    font-size: var(--ph-text-sm);
}
.ph-account-nav .dropdown-menu .dropdown-item:hover { background: var(--ph-surface-sunken); }
.ph-account-nav li.dropdown-item { background: transparent; }

/* Breadcrumb */
.ph-breadcrumb { background: transparent; border: 0; }
.ph-breadcrumb .breadcrumb {
    margin: 0;
    padding: var(--ph-space-5) 0 0;
    background: transparent;
    font-size: var(--ph-text-xs);
}
.ph-breadcrumb .breadcrumb a { color: var(--ph-text-muted); }
.ph-breadcrumb .breadcrumb-item.active { color: var(--ph-text-strong); }

/* Content */
.ph-app #main-body {
    flex: 1 0 auto;
    padding: var(--ph-space-5) 0 var(--ph-space-7);
    background: transparent;
}
.ph-app #main-body > .container,
.ph-app .ph-breadcrumb > .container,
.ph-app .ph-page-head,
.ph-app .ph-actionbar,
.ph-app .verification-banner > .container,
.ph-app .ph-footer > .container {
    max-width: 1200px;
    padding-left: var(--ph-gutter);
    padding-right: var(--ph-gutter);
}

/* Footer */
.ph-footer {
    margin-top: auto;
    padding: var(--ph-space-5) 0;
    border-top: 1px solid var(--ph-border-subtle);
    background: transparent;
    color: var(--ph-text-muted);
    font-size: var(--ph-text-xs);
}
.ph-footer-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-3);
}
.ph-footer-copy { margin: 0; }
.ph-footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ph-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ph-footer-links a { color: var(--ph-text-muted); }
.ph-footer-links a:hover { color: var(--ph-text-strong); }
.ph-footer-locale {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    padding: var(--ph-space-1) var(--ph-space-3);
    border: 1px solid var(--ph-border-default);
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-card);
    color: var(--ph-text-body);
    font-size: var(--ph-text-xs);
}

/* Desktop (>= 1000px): fixed rail */
@media (min-width: 1000px) {
    .ph-rail {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: var(--ph-rail-w);
    }
    .ph-rail-nav.collapse { display: block !important; height: auto !important; }
    .ph-shell {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        margin-left: var(--ph-rail-w);
    }
    .ph-rail .ph-rail-menu {
        top: 0;
        left: calc(100% + var(--ph-space-3)) !important;
        margin: 0;
    }
}

/* Tablet/mobile (< 1000px): top bar + off-canvas rail */
@media (max-width: 999.98px) {
    .ph-shell { display: flex; flex-direction: column; min-height: 100vh; }
    .ph-menu-toggle, .ph-topbar-logo { display: inline-flex; }
    .ph-rail { position: static; }
    .ph-rail-brand { display: none; }
    /* The menu opens under the top bar, so the same button closes it. */
    .ph-topbar { z-index: 1050; }
    .ph-rail-nav {
        position: fixed;
        top: var(--ph-topbar-h);
        bottom: 0;
        left: 0;
        z-index: 1040;
        width: min(300px, 86vw);
        overflow-y: auto;
        background: var(--ph-surface-inverse);
        box-shadow: var(--ph-shadow-lg);
    }
    .ph-rail-nav.collapsing { height: auto !important; transition: none; }
    .ph-rail .ph-rail-menu {
        position: static !important;
        float: none;
        margin: var(--ph-space-1) 0 var(--ph-space-2) var(--ph-space-6);
        border: 0;
        background: transparent;
        box-shadow: none;
    }
    .ph-rail-menu-title { display: none; }
    .ph-rail-menu .dropdown-item { color: var(--ph-text-on-ink-muted) !important; }
    .ph-rail-menu .dropdown-item:hover { background: rgba(255, 255, 255, 0.06); color: var(--ph-text-on-ink) !important; }
}
@media (max-width: 719.98px) {
    .ph-topbar-label { display: none; }
    .ph-footer-inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   5. Components (Nexus/Bootstrap overrides, scoped to .ph-app)
   ========================================================================= */

/* Buttons — piensahost.com Button: primary = flame with ink text; secondary = outline */
.ph-app .btn {
    border-radius: var(--ph-radius-md);
    font-family: var(--ph-font-sans);
    font-weight: var(--ph-fw-semibold);
    transition: background var(--ph-dur-base) var(--ph-ease), border-color var(--ph-dur-base) var(--ph-ease), color var(--ph-dur-base) var(--ph-ease), box-shadow var(--ph-dur-base) var(--ph-ease);
}
.ph-app .btn-primary,
.ph-app .btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ph-accent);
    border-color: var(--ph-accent);
    color: var(--ph-text-on-accent);
}
.ph-app .btn-primary:hover,
.ph-app .btn-primary:focus {
    background: var(--ph-accent-hover);
    border-color: var(--ph-accent-hover);
    color: var(--ph-text-on-accent);
}
.ph-app .btn-primary:focus { box-shadow: var(--ph-shadow-focus); }
.ph-app .btn-default,
.ph-app .btn-secondary,
.ph-app .btn-light,
.ph-app .btn-outline-primary,
.ph-app .btn-outline-secondary {
    background: var(--ph-surface-card);
    border: 1px solid var(--ph-border-default);
    color: var(--ph-text-strong);
}
.ph-app .btn-default:hover,
.ph-app .btn-secondary:hover,
.ph-app .btn-light:hover,
.ph-app .btn-outline-primary:hover,
.ph-app .btn-outline-secondary:hover {
    background: var(--ph-surface-sunken);
    border-color: var(--ph-border-strong);
    color: var(--ph-text-strong);
}
.ph-app .btn-link { color: var(--ph-text-link); }

/* Cards */
.ph-app .primary-content .card,
.ph-app .client-home-cards .card {
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card);
    box-shadow: var(--ph-shadow-xs);
}
.ph-app .card-header {
    background: transparent;
    border-bottom: 1px solid var(--ph-border-subtle);
}
.ph-app .card-footer {
    background: var(--ph-surface-sunken);
    border-top: 1px solid var(--ph-border-subtle);
}
.ph-app .card-title { font-weight: var(--ph-fw-semibold); }

/* Sidebar: flat contextual lists (no boxes), like a page index */
.ph-app .sidebar .card-sidebar {
    background: transparent;
    border: 0;
    box-shadow: none;
    margin-bottom: var(--ph-space-5) !important;
}
.ph-app .sidebar .card-sidebar > .card-header {
    padding: 0 0 var(--ph-space-2);
    border: 0;
    cursor: default;
}
.ph-app .sidebar .card-sidebar .card-title {
    color: var(--ph-text-muted);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    letter-spacing: var(--ph-tracking-eyebrow);
    text-transform: uppercase;
}
.ph-app .sidebar .card-sidebar .card-title > i:not(.card-minimise) { display: none; }
.ph-app .sidebar .card-minimise { display: none; }
.ph-app .sidebar .card-sidebar .collapsable-card-body { display: block !important; }
.ph-app .sidebar .card-sidebar .card-body { padding: 0 0 var(--ph-space-2); color: var(--ph-text-body); font-size: var(--ph-text-sm); }
.ph-app .sidebar .card-sidebar .card-footer { padding: var(--ph-space-2) 0 0; background: transparent; border: 0; }
.ph-app .sidebar .list-group { gap: 2px; }
.ph-app .sidebar .list-group-item {
    padding: var(--ph-space-2) var(--ph-space-3);
    border: 0;
    border-radius: var(--ph-radius-sm);
    background: transparent;
    color: var(--ph-text-body);
    font-size: var(--ph-text-sm);
}
.ph-app .sidebar a.list-group-item:hover { background: var(--ph-sand-100); color: var(--ph-text-strong); }
.ph-app .sidebar .list-group-item.active,
.ph-app .sidebar .list-group-item.active:hover {
    background: var(--ph-sand-100);
    color: var(--ph-text-strong);
    font-weight: var(--ph-fw-semibold);
    box-shadow: inset 2px 0 0 var(--ph-accent);
}
.ph-app .sidebar .list-group-item.disabled { color: var(--ph-text-subtle); }
.ph-app .sidebar .sidebar-menu-item-icon { color: var(--ph-text-subtle); }
.ph-app .sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--ph-text-strong); }

/* Dashboard tiles: white cards, mono numbers, one quiet accent */
.ph-app .tiles .row { margin: 0 calc(var(--ph-space-2) * -1); }
.ph-app .tiles .row > div { padding: var(--ph-space-2); }
.ph-app .tiles .tile {
    display: block;
    height: 100%;
    padding: var(--ph-space-5);
    border: 1px solid var(--ph-border-subtle) !important;
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card);
    color: var(--ph-text-strong);
    text-decoration: none;
    transition: box-shadow var(--ph-dur-base) var(--ph-ease), transform var(--ph-dur-base) var(--ph-ease);
}
.ph-app .tiles .tile:hover { box-shadow: var(--ph-shadow-md); transform: translateY(-1px); }
.ph-app .tiles .tile i { color: var(--ph-text-subtle); }
.ph-app .tiles .tile .stat {
    font-family: var(--ph-font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--ph-text-strong);
}
.ph-app .tiles .tile .title { color: var(--ph-text-muted); font-size: var(--ph-text-sm); }
.ph-app .tiles .tile .highlight { display: none; }

/* Forms */
.ph-app .form-control,
.ph-app .custom-select {
    border: 1px solid var(--ph-border-default);
    border-radius: var(--ph-radius-md);
    background-color: var(--ph-surface-card);
    color: var(--ph-text-strong);
}
.ph-app .form-control:focus,
.ph-app .custom-select:focus {
    border-color: var(--ph-accent);
    box-shadow: var(--ph-shadow-focus);
}
.ph-app .form-control::placeholder { color: var(--ph-text-subtle); }
.ph-app label { color: var(--ph-text-body); font-weight: var(--ph-fw-medium); }
.ph-app .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--ph-ink-900);
    border-color: var(--ph-ink-900);
}
.ph-app input[type=checkbox], .ph-app input[type=radio] { accent-color: var(--ph-ink-900); }

/* Tables */
.ph-app .table thead th,
.ph-app .table-list thead th {
    border-top: 0;
    border-bottom: 1px solid var(--ph-border-subtle);
    color: var(--ph-text-muted);
    font-size: var(--ph-text-xs);
    font-weight: var(--ph-fw-semibold);
    background: transparent;
}
.ph-app .table td { border-top: 1px solid var(--ph-border-subtle); vertical-align: middle; }
.ph-app .table-list > tbody > tr:hover > td { background: var(--ph-surface-sunken); }

/* Dropdowns, popovers, modals */
.ph-app .dropdown-menu {
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-md);
    box-shadow: var(--ph-shadow-lg);
}
.popover { border-color: var(--ph-border-subtle); border-radius: var(--ph-radius-md); box-shadow: var(--ph-shadow-lg); font-family: var(--ph-font-sans); }
.ph-app .modal-content { border: 0; border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow-lg); }

/* Alerts and labels */
.ph-app .alert { border-radius: var(--ph-radius-md); }
.ph-app .badge { border-radius: var(--ph-radius-full); font-weight: var(--ph-fw-semibold); }

/* =========================================================================
   6. Page header, banners and page-specific cleanup (0.1.2)
   ========================================================================= */
.ph-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ph-space-4);
    padding-top: var(--ph-space-2);
    padding-bottom: var(--ph-space-2);
}
.ph-app .ph-page-title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: var(--ph-fw-bold);
    letter-spacing: -0.02em;
}

/* Email/user verification banner: calm, aligned with the content column */
.ph-app .verification-banner {
    margin: var(--ph-space-4) 0 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--ph-text-body);
    font-weight: var(--ph-fw-regular);
}
.ph-app .verification-banner > .container > .row {
    margin: 0;
    padding: var(--ph-space-3) var(--ph-space-2);
    border: 1px solid var(--ph-sand-300);
    border-radius: var(--ph-radius-md);
    background: var(--ph-warning-50);
    align-items: center;
}
.ph-app .verification-banner .btn:not(.close) {
    background: var(--ph-surface-card);
    border: 1px solid var(--ph-border-default);
    color: var(--ph-text-strong);
}

/* Semantic buttons */
.ph-app .btn-success {
    background: var(--ph-accent);
    border-color: var(--ph-accent);
    color: var(--ph-text-on-accent);
}
.ph-app .btn-success:hover, .ph-app .btn-success:focus {
    background: var(--ph-accent-hover);
    border-color: var(--ph-accent-hover);
    color: var(--ph-text-on-accent);
}
.ph-app .btn-danger {
    background: var(--ph-surface-card);
    border: 1px solid var(--ph-danger-500);
    color: var(--ph-danger-500);
}
.ph-app .btn-danger:hover, .ph-app .btn-danger:focus {
    background: var(--ph-danger-50);
    border-color: var(--ph-danger-500);
    color: var(--ph-danger-500);
}
/* Sidebar actions are secondary: one flame per view, in the content */
.ph-app .sidebar .btn {
    background: var(--ph-surface-card);
    border: 1px solid var(--ph-border-default);
    color: var(--ph-text-strong);
    font-weight: var(--ph-fw-medium);
}
.ph-app .sidebar .btn:hover { background: var(--ph-surface-sunken); }

/* Dashboard tiles: small icon in the corner, the number leads */
.ph-app .tiles .tile { position: relative; }
.ph-app .tiles .tile i {
    position: absolute;
    top: var(--ph-space-5);
    right: var(--ph-space-5);
    font-size: 20px;
    color: var(--ph-ink-300);
}
.ph-app .tiles .tile .stat { font-size: 2.25rem; line-height: 1.1; margin: 0 0 var(--ph-space-1); }
.ph-app .tiles .tile .title {
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    letter-spacing: var(--ph-tracking-eyebrow);
    text-transform: uppercase;
}

/* Product details: label above value, left aligned */
.ph-app .product-details .col-md-6.text-center { text-align: left !important; }
.ph-app .product-details .col-md-6.text-center h4 {
    margin: var(--ph-space-4) 0 2px;
    color: var(--ph-text-muted);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    letter-spacing: var(--ph-tracking-eyebrow);
    text-transform: uppercase;
}
.ph-app .product-details .col-md-6.text-center h4:first-child { margin-top: 0; }
.ph-app .product-details .col-md-6.text-center { color: var(--ph-text-strong); font-size: var(--ph-text-base); }
.ph-app .product-status {
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-sunken);
    overflow: hidden;
}
.ph-app .product-status .product-icon { padding: var(--ph-space-5); }
.ph-app .product-status .product-icon .fa-stack { font-size: 1.25rem; }
.ph-app .product-status .product-icon .fa-circle { color: var(--ph-ink-900); }
.ph-app .product-status .product-icon h3 { margin-top: var(--ph-space-3); font-size: var(--ph-text-lg); font-weight: var(--ph-fw-semibold); }
.ph-app .product-status .product-icon h4 { color: var(--ph-text-muted); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-regular); }
.ph-app .product-status-text {
    padding: var(--ph-space-2);
    font-size: var(--ph-text-xs);
    font-weight: var(--ph-fw-semibold);
    letter-spacing: var(--ph-tracking-eyebrow);
    text-transform: uppercase;
}
.ph-app .product-status-active .product-status-text { background: var(--ph-success-50); color: var(--ph-success-500); }
.ph-app .product-status-suspended .product-status-text { background: var(--ph-warning-50); color: var(--ph-warning-500); }
.ph-app .product-status-pending .product-status-text { background: var(--ph-info-50); color: var(--ph-info-500); }
.ph-app .product-status-terminated .product-status-text,
.ph-app .product-status-cancelled .product-status-text,
.ph-app .product-status-fraud .product-status-text { background: var(--ph-sand-100); color: var(--ph-text-muted); }
.ph-app .product-actions-wrapper > div { margin-top: var(--ph-space-2); }

/* Tabs */
.ph-app .nav-tabs { border-bottom: 1px solid var(--ph-border-subtle); }
.ph-app .nav-tabs .nav-link { border: 0; color: var(--ph-text-muted); font-weight: var(--ph-fw-medium); }
.ph-app .nav-tabs .nav-link:hover { color: var(--ph-text-strong); }
.ph-app .nav-tabs .nav-link.active {
    background: transparent;
    color: var(--ph-text-strong);
    box-shadow: inset 0 -2px 0 var(--ph-accent);
}

/* =========================================================================
   7. Primary action, enforced (0.1.3)
   Nexus paints .btn-success/.btn-primary with long selectors such as
   "body .primary-content .client-home-cards .card .btn-success" (background
   only). !important here keeps one consistent primary action: flame + ink text.
   ========================================================================= */
.ph-app .btn-primary,
.ph-app .btn-success {
    background: var(--ph-accent) !important;
    border-color: var(--ph-accent) !important;
    color: var(--ph-text-on-accent) !important;
}
.ph-app .btn-primary:hover, .ph-app .btn-primary:focus,
.ph-app .btn-success:hover, .ph-app .btn-success:focus {
    background: var(--ph-accent-hover) !important;
    border-color: var(--ph-accent-hover) !important;
    color: var(--ph-text-on-accent) !important;
}
.ph-app .btn-primary:disabled, .ph-app .btn-primary.disabled,
.ph-app .btn-success:disabled, .ph-app .btn-success.disabled {
    background: var(--ph-sand-200) !important;
    border-color: var(--ph-sand-200) !important;
    color: var(--ph-text-muted) !important;
}
/* Sidebar keeps secondary buttons, even for Nexus .btn-success */
.ph-app .sidebar .btn-success,
.ph-app .sidebar .btn-primary {
    background: var(--ph-surface-card) !important;
    border: 1px solid var(--ph-border-default) !important;
    color: var(--ph-text-strong) !important;
}
.ph-app .sidebar .btn-success:hover,
.ph-app .sidebar .btn-primary:hover { background: var(--ph-surface-sunken) !important; }

/* Status pills: tinted, readable (white on yellow failed contrast) */
.ph-app .label.status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--ph-radius-full);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    text-shadow: none;
}
.ph-app .label.status-active, .ph-app .label.status-paid, .ph-app .label.status-completed,
.ph-app .label.status-open, .ph-app .label.status-accepted { background: var(--ph-success-50) !important; color: var(--ph-success-500) !important; }
.ph-app .label.status-suspended, .ph-app .label.status-unpaid, .ph-app .label.status-overdue,
.ph-app .label.status-customer-reply, .ph-app .label.status-onhold { background: var(--ph-warning-50) !important; color: var(--ph-warning-500) !important; }
.ph-app .label.status-pending, .ph-app .label.status-answered, .ph-app .label.status-inprogress,
.ph-app .label.status-in-progress, .ph-app .label.status-draft, .ph-app .label.status-delivered { background: var(--ph-info-50) !important; color: var(--ph-info-500) !important; }
.ph-app .label.status-terminated, .ph-app .label.status-cancelled, .ph-app .label.status-closed,
.ph-app .label.status-expired, .ph-app .label.status-refunded, .ph-app .label.status-fraud,
.ph-app .label.status-collections, .ph-app .label.status-dead, .ph-app .label.status-transferred-away { background: var(--ph-sand-100) !important; color: var(--ph-text-muted) !important; }

/* 8. Bootstrap-style labels used by Nexus panels (0.1.4) */
.ph-app .label.label-success, .ph-app .label.label-warning, .ph-app .label.label-danger,
.ph-app .label.label-info, .ph-app .label.label-default {
    padding: 2px 10px;
    border-radius: var(--ph-radius-full);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    text-shadow: none;
}
.ph-app .label.label-success { background: var(--ph-success-50) !important; color: var(--ph-success-500) !important; }
.ph-app .label.label-warning { background: var(--ph-warning-50) !important; color: var(--ph-warning-500) !important; }
.ph-app .label.label-danger { background: var(--ph-danger-50) !important; color: var(--ph-danger-500) !important; }
.ph-app .label.label-info { background: var(--ph-info-50) !important; color: var(--ph-info-500) !important; }
.ph-app .label.label-default { background: var(--ph-sand-100) !important; color: var(--ph-text-muted) !important; }

/* Dashboard "register a domain" mini form: field on its own line */
.ph-app .client-home-cards [menuItemName="Register a New Domain"] .input-group { padding: var(--ph-space-3) !important; gap: var(--ph-space-2); }
.ph-app .client-home-cards [menuItemName="Register a New Domain"] .input-group > .form-control {
    flex: 1 0 100%;
    border-radius: var(--ph-radius-md) !important;
}
.ph-app .client-home-cards [menuItemName="Register a New Domain"] .input-group-append { display: flex; gap: var(--ph-space-2); width: 100%; margin: 0; }
.ph-app .client-home-cards [menuItemName="Register a New Domain"] .input-group-append .btn { flex: 1 1 0; border-radius: var(--ph-radius-md) !important; }

/* 9. Cart and editor details (0.1.5) */
@media (min-width: 576px) {
    /* "Comprobar" was clipped inside a col-sm-2 */
    #order-standard_cart .domain-input-group > .row { flex-wrap: nowrap; }
    #order-standard_cart .domain-input-group > .row > .col-sm-8 { flex: 1 1 auto; max-width: none; }
    #order-standard_cart .domain-input-group > .row > .col-sm-2 { flex: 0 0 auto; max-width: none; width: auto; }
}
#order-standard_cart .domain-input-group .btn { white-space: nowrap; }
#order-standard_cart .domain-selection-options .option label { font-size: var(--ph-text-sm); }
/* Markdown editor toolbar: tools are neutral, not the page's primary action */
.ph-app .md-editor .btn-toolbar .btn,
.ph-app .md-editor .btn-toolbar .btn-primary {
    background: transparent !important;
    border: 0 !important;
    color: var(--ph-text-body) !important;
    font-weight: var(--ph-fw-medium);
}
.ph-app .md-editor .btn-toolbar .btn:hover { background: var(--ph-sand-100) !important; }

/* 10. Mobile order and top bar fit (0.1.6) */
@media (max-width: 991.98px) {
    /* Dashboard: numbers and services first, account card after */
    .ph-tpl-clientareahome #main-body .primary-content { order: -1; }
}
@media (max-width: 719.98px) {
    .ph-account-nav > li > a {
        max-width: 132px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inline-block;
        line-height: 40px;
    }
    .ph-topbar-inner { gap: var(--ph-space-1); }
    .ph-topbar-btn { padding: 0 var(--ph-space-2); }
}

/* =========================================================================
   11. CLEAN pass (0.2.0): one job per page, no table chrome
   ========================================================================= */
.ph-page-head { padding-top: var(--ph-space-6); padding-bottom: var(--ph-space-3); }

.ph-addon-output { margin-top: var(--ph-space-5); }

/* Lists: no "Mostrando x de y", no page-size selector, no table search */
.ph-app .dataTables_info,
.ph-app .dataTables_length,
.ph-app .dataTables_filter { display: none !important; }
/* Pagination only when there is more than one page */
.ph-app .dataTables_paginate:has(.previous.disabled):has(.next.disabled) { display: none !important; }
.ph-app .dataTables_wrapper .listtable,
.ph-app .table-container { margin-top: 0; }

/* Services list: drop the SSL lock column */
.ph-tpl-clientareaproducts #tableServicesList th:first-child,
.ph-tpl-clientareaproducts #tableServicesList td:first-child { display: none; }

/* Domains list: drop bulk toolbar, checkboxes and SSL column */
.ph-tpl-clientareadomains #domainForm > .btn-group { display: none !important; }
.ph-tpl-clientareadomains #tableDomainsList th:nth-child(-n+2),
.ph-tpl-clientareadomains #tableDomainsList td:nth-child(-n+2) { display: none; }

/* Product details: cancel lives once, in the Actions list */
.ph-tpl-clientareaproductdetails .product-actions-wrapper .btn-danger { display: none; }
.ph-tpl-clientareaproductdetails .product-actions-wrapper > div:has(> .btn-danger) { display: none; }

/* Lists read left-aligned, like the site */
.ph-app .table-list td, .ph-app .table-list th { text-align: left !important; }

/* =========================================================================
   12. Service page: the panel first (0.2.1)
   The module area (control panel login, VPS controls, mail, add-ons) is the
   reason a client opens a service. Nexus put it under the billing card and
   inside the "Domain" tab. Order: tabs with module area, then billing summary.
   ========================================================================= */
.ph-tpl-clientareaproductdetails #tabOverview.active { display: flex; flex-direction: column; }
.ph-tpl-clientareaproductdetails #tabOverview > .nav-tabs { order: 1; }
.ph-tpl-clientareaproductdetails #tabOverview > .responsive-tabs-sm-connector { order: 2; }
.ph-tpl-clientareaproductdetails #tabOverview > .tab-content { order: 3; margin-bottom: var(--ph-space-5); }
.ph-tpl-clientareaproductdetails #tabOverview > .card { order: 4; }
.ph-tpl-clientareaproductdetails #tabOverview > div:not([class]) { order: 5; }
.ph-tpl-clientareaproductdetails .product-details-tab-container {
    padding: var(--ph-space-5);
    border: 1px solid var(--ph-border-subtle);
    border-top: 0;
    border-radius: 0 0 var(--ph-radius-lg) var(--ph-radius-lg);
}
/* Inside the Domain tab: module area on top, domain facts below */
.ph-tpl-clientareaproductdetails #domain.active { display: flex; flex-direction: column; }
.ph-tpl-clientareaproductdetails #domain > .module-client-area {
    order: -1;
    margin-bottom: var(--ph-space-5);
    padding-bottom: var(--ph-space-5);
    border-bottom: 1px solid var(--ph-border-subtle);
}
.ph-topbar-btn.cart-btn.is-empty { display: none; }

/* =========================================================================
   14. Rail: big icon, label below, roomy (0.3.0)
   ========================================================================= */
@media (min-width: 1000px) {
    :root { --ph-rail-w: 120px; }
    .ph-rail-brand { justify-content: center; padding: 0 var(--ph-space-3); }
    .ph-rail-logo img { height: 18px; }
    .ph-rail-list { padding: var(--ph-space-5) var(--ph-space-3); }
    .ph-rail-item { margin-bottom: var(--ph-space-2); }
    .ph-rail-link {
        flex-direction: column;
        justify-content: center;
        gap: var(--ph-space-2);
        min-height: 84px;
        padding: var(--ph-space-3) var(--ph-space-1);
        border-radius: var(--ph-radius-md);
        font-size: var(--ph-text-xs);
        line-height: 1.25;
        text-align: center;
    }
    .ph-rail-icon .ph-icon { width: 28px; height: 28px; stroke-width: 1.75; }
    .ph-rail-label { flex: none; }
    .ph-rail-chevron { display: none; }
    .ph-rail-item.is-current > .ph-rail-link {
        background: rgba(255, 255, 255, 0.08);
        color: var(--ph-text-on-ink) !important;
        box-shadow: inset 3px 0 0 var(--ph-accent);
    }
    .ph-rail-item.is-current .ph-rail-icon { color: var(--ph-accent); opacity: 1; }
    .ph-rail .ph-rail-menu { top: 0; left: calc(100% + var(--ph-space-3)) !important; min-width: 240px; padding: var(--ph-space-3); }
    .ph-rail-menu .dropdown-item { padding: 10px var(--ph-space-3); font-size: var(--ph-text-sm); }
}
@media (max-width: 999.98px) {
    .ph-rail-link { padding: 12px var(--ph-space-4); font-size: var(--ph-text-base); }
    .ph-rail-list { padding: var(--ph-space-4) var(--ph-space-3); }
    .ph-rail-item.is-current > .ph-rail-link { background: rgba(255, 255, 255, 0.08); color: var(--ph-text-on-ink) !important; box-shadow: inset 3px 0 0 var(--ph-accent); }
}

/* =========================================================================
   15. Service page action bar (0.3.0)
   The sidebar panels render here as one row of pills: "Información" acts as
   the overview tab, then Change password, Cancel and any module action.
   ========================================================================= */
.ph-actionbar { padding-bottom: var(--ph-space-4); }
.ph-actionbar .sidebar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-2); }
.ph-app .ph-actionbar .card-sidebar { display: contents; }
.ph-app .ph-actionbar .card-sidebar > .card-header,
.ph-app .ph-actionbar .card-sidebar > .card.d-md-none { display: none !important; }
.ph-app .ph-actionbar .collapsable-card-body { display: contents !important; }
.ph-app .ph-actionbar .list-group { display: contents !important; }
.ph-app .ph-actionbar .list-group-item {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 8px var(--ph-space-4);
    border: 1px solid var(--ph-border-default);
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-card);
    color: var(--ph-text-strong);
    font-size: var(--ph-text-sm);
    font-weight: var(--ph-fw-medium);
    box-shadow: none;
}
.ph-app .ph-actionbar .list-group-item:hover { background: var(--ph-sand-100); }
.ph-app .ph-actionbar .list-group-item.active {
    background: var(--ph-ink-900);
    border-color: var(--ph-ink-900);
    color: var(--ph-text-on-ink);
    box-shadow: none;
}
.ph-app .ph-actionbar .list-group-item.active .sidebar-menu-item-icon { color: var(--ph-text-on-ink); }
.ph-app .ph-actionbar .sidebar-menu-item-wrapper { display: inline-flex; align-items: center; gap: var(--ph-space-2); }
.ph-app .ph-actionbar .card-body, .ph-app .ph-actionbar .card-footer { display: none; }
.ph-app .ph-actionbar [menuItemName="Cancel"] { color: var(--ph-danger-500); }

/* =========================================================================
   16. Type and table scale (0.3.0): readable, calm
   ========================================================================= */
.ph-app .table-list > tbody > tr > td { padding: var(--ph-space-4) var(--ph-space-3); font-size: 0.9375rem; }
.ph-app .table-list > thead > th, .ph-app .table-list > thead > tr > th {
    padding: var(--ph-space-3);
    font-size: var(--ph-text-eyebrow);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.ph-app .table-list > tbody > tr { cursor: pointer; }
.ph-app .primary-content > .card, .ph-app .primary-content .card { border-radius: var(--ph-radius-lg); }

/* 17. Fixes after full-scroll review (0.3.1) */
/* Nexus paints <html> dark; long pages showed it under the content */
html { background: var(--ph-surface-page); }
/* Service page: domain facts read left to right, like a list */
.ph-tpl-clientareaproductdetails #domain .row > [class*="col-sm-5"] { text-align: left !important; color: var(--ph-text-muted); }
.ph-tpl-clientareaproductdetails #domain .row > [class*="col-sm-7"] { color: var(--ph-text-strong); }
.ph-tpl-clientareaproductdetails #domain { text-align: left !important; }
/* Billing summary: one compact card */
.ph-tpl-clientareaproductdetails .product-status .product-icon { padding: var(--ph-space-4); }
.ph-tpl-clientareaproductdetails .product-status .product-icon .fa-stack { display: none; }
.ph-tpl-clientareaproductdetails .product-status .product-icon h3 { margin-top: 0; }

/* 18. Domain pages + empty states (0.3.2) */
/* No store: hide order/transfer entries wherever a module menu shows them */
.ph-app [menuItemName="Register a New Domain"],
.ph-app [menuItemName="Transfer in a Domain"],
.ph-app [menuItemName="Order New Services"],
.ph-app [menuItemName="Place a New Order"],
.ph-app [menuItemName="View Available Addons"] { display: none !important; }
/* Domain overview: small label above value; drop the "what would you like to do" list (the bar has it) */
.ph-tpl-clientareadomaindetails #tabOverview h5 {
    margin: 0 0 2px;
    color: var(--ph-text-muted);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    letter-spacing: var(--ph-tracking-eyebrow);
    text-transform: uppercase;
}
.ph-tpl-clientareadomaindetails #tabOverview .card-body > br,
.ph-tpl-clientareadomaindetails #tabOverview .card-body > br ~ h3,
.ph-tpl-clientareadomaindetails #tabOverview .card-body > br ~ ul { display: none; }
/* Empty tables: no header row, a calm message */
.ph-app table:has(td.dataTables_empty) thead { display: none; }
.ph-app td.dataTables_empty {
    padding: var(--ph-space-7) var(--ph-space-4) !important;
    color: var(--ph-text-muted);
    text-align: center !important;
    font-size: var(--ph-text-base);
}

/* 19. Forms and row buttons (0.3.3) */
/* New ticket, logged in: name and email are disabled copies of the account, hide them */
.ph-tpl-supportticketsubmit-steptwo.ph-logged-in .form-group:has(> #inputName:disabled),
.ph-tpl-supportticketsubmit-steptwo.ph-logged-in .form-group:has(> #inputEmail:disabled) { display: none; }
/* Per-row "view" buttons: quiet, the row already opens */
.ph-app .btn-info {
    background: transparent !important;
    border: 1px solid var(--ph-border-default) !important;
    color: var(--ph-text-strong) !important;
    font-weight: var(--ph-fw-medium);
}
.ph-app .btn-info:hover { background: var(--ph-sand-100) !important; }
.ph-actionbar { padding-top: var(--ph-space-3); }

/* 20. Phone layout (0.3.4): lists show what matters, nothing scrolls sideways */
@media (max-width: 719.98px) {
    /* Services: product + status */
    .ph-tpl-clientareaproducts #tableServicesList th:nth-child(3), .ph-tpl-clientareaproducts #tableServicesList td:nth-child(3),
    .ph-tpl-clientareaproducts #tableServicesList th:nth-child(4), .ph-tpl-clientareaproducts #tableServicesList td:nth-child(4) { display: none; }
    /* Domains: domain + due date + status */
    .ph-tpl-clientareadomains #tableDomainsList th:nth-child(4), .ph-tpl-clientareadomains #tableDomainsList td:nth-child(4) { display: none; }
    /* Invoices: number + total + status */
    .ph-tpl-clientareainvoices #tableInvoicesList th:nth-child(2), .ph-tpl-clientareainvoices #tableInvoicesList td:nth-child(2),
    .ph-tpl-clientareainvoices #tableInvoicesList th:nth-child(3), .ph-tpl-clientareainvoices #tableInvoicesList td:nth-child(3) { display: none; }
    /* Tickets: subject + status */
    .ph-tpl-supportticketslist #tableTicketsList th:nth-child(1), .ph-tpl-supportticketslist #tableTicketsList td:nth-child(1),
    .ph-tpl-supportticketslist #tableTicketsList th:nth-child(4), .ph-tpl-supportticketslist #tableTicketsList td:nth-child(4) { display: none; }
    .ph-app .table-list > tbody > tr > td { padding: var(--ph-space-3); }
    .ph-app .table-container { overflow-x: auto; }

    /* Verification banner: message first, then the button, full width */
    .ph-app .verification-banner .row > [class*="col"] { order: 0 !important; flex: 1 1 100%; max-width: 100%; }
    .ph-app .verification-banner .row > [class*="col"]:has(.close) { display: none; }
    .ph-app .verification-banner .text { font-size: var(--ph-text-sm); }

    /* Service page: give the module the full width */
    .ph-tpl-clientareaproductdetails .product-details-tab-container { padding: var(--ph-space-3); }
    .ph-app .module-client-area { overflow-wrap: anywhere; }
    .ph-app .module-client-area .card { margin-left: 0 !important; margin-right: 0 !important; }
    .ph-actionbar .list-group-item { flex: 1 1 auto; justify-content: center; }
    .ph-app .ph-page-title { font-size: 1.625rem; }
}

/* 21. Findability fixes (0.3.5) */
.ph-rail-menu-item--primary .dropdown-item { font-weight: var(--ph-fw-semibold); }
.ph-rail-menu-item--primary { border-bottom: 1px solid var(--ph-border-subtle); margin-bottom: var(--ph-space-1); padding-bottom: var(--ph-space-1); }
@media (max-width: 999.98px) { .ph-rail-menu-item--primary { border-color: var(--ph-border-on-ink); } }

/* 22. Flyout aligned with its rail item (0.3.6) */
@media (min-width: 1000px) {
    .ph-rail .dropright > .ph-rail-menu {
        top: 0 !important;
        left: calc(100% + 20px) !important;
        margin: 0 !important;
        transform: none !important;
    }
}

/* =========================================================================
   23. Dashboard "Estado de cuenta" (0.4.0) — replaces .ph-stats/.ph-stat
   Bento: Billing is the main ink card (message changes with the state);
   Services, Domains, Support are calm shortcuts. The arrow invites the click.
   ========================================================================= */
.ph-app.ph-tpl-clientareahome .ph-dash {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
    grid-template-areas:
        "billing services domains"
        "billing support  support";
    gap: var(--ph-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ph-app.ph-tpl-clientareahome .ph-dash-item { display: flex; min-width: 0; margin: 0; container-type: inline-size; }
.ph-app.ph-tpl-clientareahome .ph-dash-item--billing  { grid-area: billing; }
.ph-app.ph-tpl-clientareahome .ph-dash-item--services { grid-area: services; }
.ph-app.ph-tpl-clientareahome .ph-dash-item--domains  { grid-area: domains; }
.ph-app.ph-tpl-clientareahome .ph-dash-item--support  { grid-area: support; }

.ph-app.ph-tpl-clientareahome .ph-dash-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ph-space-4);
    width: 100%;
    min-height: 168px;
    padding: var(--ph-space-5);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card);
    color: var(--ph-text-body);
    font-family: var(--ph-font-sans);
    text-decoration: none !important;
    box-shadow: var(--ph-shadow-xs);
    -webkit-tap-highlight-color: transparent;
    transition: transform var(--ph-dur-base) var(--ph-ease), box-shadow var(--ph-dur-base) var(--ph-ease), border-color var(--ph-dur-base) var(--ph-ease);
}
.ph-app.ph-tpl-clientareahome .ph-dash-card:hover { color: var(--ph-text-body); border-color: var(--ph-border-default); box-shadow: var(--ph-shadow-md); transform: translateY(-2px); }
.ph-app.ph-tpl-clientareahome .ph-dash-card:active { box-shadow: var(--ph-shadow-xs); transform: translateY(0.5px); transition-duration: var(--ph-dur-fast); }
.ph-app.ph-tpl-clientareahome .ph-dash-card:focus { outline: none; }
.ph-app.ph-tpl-clientareahome .ph-dash-card:focus-visible { outline: 2px solid var(--ph-focus-ring); outline-offset: 3px; box-shadow: var(--ph-shadow-focus); }

/* Arrow: the invitation, no text */
.ph-app.ph-tpl-clientareahome .ph-dash-arrow {
    position: absolute;
    top: var(--ph-space-5);
    right: var(--ph-space-5);
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-card);
    color: var(--ph-text-muted);
    transition: transform var(--ph-dur-base) var(--ph-ease), background-color var(--ph-dur-base) var(--ph-ease), border-color var(--ph-dur-base) var(--ph-ease), color var(--ph-dur-base) var(--ph-ease);
}
.ph-app.ph-tpl-clientareahome .ph-dash-arrow .ph-icon { width: 18px; height: 18px; }
.ph-app.ph-tpl-clientareahome .ph-dash-tile:hover .ph-dash-arrow,
.ph-app.ph-tpl-clientareahome .ph-dash-tile:focus-visible .ph-dash-arrow {
    border-color: var(--ph-surface-inverse);
    background: var(--ph-surface-inverse);
    color: var(--ph-text-on-ink);
    transform: translateX(2px);
}

/* Shortcuts */
.ph-app.ph-tpl-clientareahome .ph-dash-head { display: flex; align-items: center; gap: var(--ph-space-3); min-width: 0; padding-right: 44px; }
.ph-app.ph-tpl-clientareahome .ph-dash-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--ph-radius-md);
    background: var(--ph-sand-100);
    color: var(--ph-text-strong);
    transition: background-color var(--ph-dur-base) var(--ph-ease);
}
.ph-app.ph-tpl-clientareahome .ph-dash-icon .ph-icon { width: 22px; height: 22px; }
.ph-app.ph-tpl-clientareahome .ph-dash-tile:hover .ph-dash-icon { background: var(--ph-sand-200); }
.ph-app.ph-tpl-clientareahome .ph-dash-title {
    overflow: hidden;
    color: var(--ph-text-strong);
    font-size: var(--ph-text-base);
    font-weight: var(--ph-fw-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ph-app.ph-tpl-clientareahome .ph-dash-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--ph-space-1) var(--ph-space-2); margin-top: auto; }
.ph-app.ph-tpl-clientareahome .ph-dash-value {
    color: var(--ph-text-strong);
    font-family: var(--ph-font-mono);
    font-size: 2.5rem;
    font-size: clamp(2.25rem, 16cqi, 3rem);
    font-weight: var(--ph-fw-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}
.ph-app.ph-tpl-clientareahome .ph-dash-unit { color: var(--ph-text-muted); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); }
.ph-app.ph-tpl-clientareahome .ph-dash-tile.is-zero .ph-dash-value { color: var(--ph-text-subtle); }

/* Main card (ink) */
.ph-app.ph-tpl-clientareahome .ph-dash-hero {
    justify-content: space-between;
    gap: var(--ph-space-6);
    padding: var(--ph-space-6);
    border-color: var(--ph-surface-inverse);
    background: radial-gradient(120% 100% at 100% 0%, var(--ph-surface-inverse-2) 0%, transparent 62%), var(--ph-surface-inverse);
    color: var(--ph-text-on-ink);
    box-shadow: var(--ph-shadow-sm);
}
.ph-app.ph-tpl-clientareahome .ph-dash-hero:hover { border-color: var(--ph-surface-inverse); color: var(--ph-text-on-ink); box-shadow: var(--ph-shadow-lg); }
.ph-app.ph-tpl-clientareahome .ph-dash-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    color: var(--ph-text-on-ink-muted);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    letter-spacing: var(--ph-tracking-eyebrow);
    line-height: 1;
    text-transform: uppercase;
}
.ph-app.ph-tpl-clientareahome .ph-dash-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: var(--ph-radius-full); background: var(--ph-accent); }
/* With debt, the only flame is the "Pagar ahora" pill */
.ph-app.ph-tpl-clientareahome .ph-dash-hero.is-due .ph-dash-eyebrow::before { background: var(--ph-text-on-ink-muted); }
.ph-app.ph-tpl-clientareahome .ph-dash-hero .ph-dash-arrow { top: var(--ph-space-6); right: var(--ph-space-6); border-color: var(--ph-border-on-ink); background: transparent; color: var(--ph-text-on-ink); }
.ph-app.ph-tpl-clientareahome .ph-dash-hero:hover .ph-dash-arrow,
.ph-app.ph-tpl-clientareahome .ph-dash-hero:focus-visible .ph-dash-arrow { border-color: var(--ph-surface-card); background: var(--ph-surface-card); color: var(--ph-text-strong); transform: translateX(2px); }
.ph-app.ph-tpl-clientareahome .ph-dash-hero-body { display: flex; flex-direction: column; gap: var(--ph-space-2); min-width: 0; }
.ph-app.ph-tpl-clientareahome .ph-dash-hero-title { color: var(--ph-text-on-ink); font-size: var(--ph-text-xl); font-weight: var(--ph-fw-semibold); letter-spacing: var(--ph-tracking-heading); line-height: var(--ph-leading-heading); }
.ph-app.ph-tpl-clientareahome .ph-dash-hero-text { max-width: 34ch; color: var(--ph-text-on-ink-muted); font-size: var(--ph-text-md); line-height: var(--ph-leading-heading); }
.ph-app.ph-tpl-clientareahome .ph-dash-amount {
    margin-top: var(--ph-space-1);
    overflow-wrap: anywhere;
    color: var(--ph-text-on-ink);
    font-family: var(--ph-font-mono);
    font-size: 2.75rem;
    font-size: clamp(2.25rem, 11cqi, 3.5rem);
    font-weight: var(--ph-fw-semibold);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.05;
}
.ph-app.ph-tpl-clientareahome .ph-dash-check {
    display: inline-grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--ph-space-3);
    border-radius: var(--ph-radius-full);
    background: var(--ph-success-500);
    color: var(--ph-paper-raised);
}
.ph-app.ph-tpl-clientareahome .ph-dash-check .ph-icon { width: 28px; height: 28px; }
.ph-app.ph-tpl-clientareahome .ph-dash-hero-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-3); }
.ph-app.ph-tpl-clientareahome .ph-dash-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    padding: var(--ph-space-1) var(--ph-space-3);
    border: 1px solid var(--ph-border-on-ink);
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-inverse-2);
    color: var(--ph-text-on-ink);
    font-size: var(--ph-text-xs);
    font-weight: var(--ph-fw-medium);
}
.ph-app.ph-tpl-clientareahome .ph-dash-dot { width: 8px; height: 8px; border-radius: var(--ph-radius-full); background: var(--ph-danger-500); }
.ph-app.ph-tpl-clientareahome .ph-dash-pay {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    min-height: 44px;
    margin-left: auto;
    padding: 0 var(--ph-space-5);
    border-radius: var(--ph-radius-full);
    background: var(--ph-accent);
    color: var(--ph-text-on-accent);
    font-size: var(--ph-text-sm);
    font-weight: var(--ph-fw-semibold);
    transition: background-color var(--ph-dur-base) var(--ph-ease);
}
.ph-app.ph-tpl-clientareahome .ph-dash-pay .ph-icon { width: 18px; height: 18px; transition: transform var(--ph-dur-base) var(--ph-ease); }
.ph-app.ph-tpl-clientareahome .ph-dash-hero.is-due:hover .ph-dash-pay,
.ph-app.ph-tpl-clientareahome .ph-dash-hero.is-due:focus-visible .ph-dash-pay { background: var(--ph-accent-hover); }
.ph-app.ph-tpl-clientareahome .ph-dash-hero.is-due:hover .ph-dash-pay .ph-icon { transform: translateX(2px); }

/* Container queries: each card adapts to its own width */
@container (min-width: 30rem) {
    .ph-app.ph-tpl-clientareahome .ph-dash-tile { flex-direction: row; align-items: center; gap: var(--ph-space-5); }
    .ph-app.ph-tpl-clientareahome .ph-dash-tile .ph-dash-head { flex: 1; padding-right: 0; }
    .ph-app.ph-tpl-clientareahome .ph-dash-tile .ph-dash-figure { margin-top: 0; margin-right: 52px; }
    .ph-app.ph-tpl-clientareahome .ph-dash-tile .ph-dash-arrow { top: 50%; translate: 0 -50%; }
}
@container (min-width: 40rem) {
    .ph-app.ph-tpl-clientareahome .ph-dash-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--ph-space-6); }
    .ph-app.ph-tpl-clientareahome .ph-dash-hero .ph-dash-eyebrow { grid-column: 1 / -1; justify-self: start; }
    .ph-app.ph-tpl-clientareahome .ph-dash-hero-foot { justify-content: flex-end; }
}
@container (max-width: 13rem) {
    .ph-app.ph-tpl-clientareahome .ph-dash-head { flex-direction: column; align-items: flex-start; gap: var(--ph-space-2); padding-right: 0; }
}

@media (max-width: 1199.98px) {
    .ph-app.ph-tpl-clientareahome .ph-dash {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-areas: "billing billing billing" "services domains support";
    }
}
@media (max-width: 999.98px) {
    .ph-app.ph-tpl-clientareahome .ph-dash {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-areas: "billing billing" "services domains" "support support";
        gap: var(--ph-space-3);
    }
}
@media (max-width: 719.98px) {
    .ph-app.ph-tpl-clientareahome .ph-dash-card { min-height: 0; padding: var(--ph-space-4); }
    .ph-app.ph-tpl-clientareahome .ph-dash-hero { gap: var(--ph-space-5); padding: var(--ph-space-5); }
    .ph-app.ph-tpl-clientareahome .ph-dash-arrow { top: var(--ph-space-4); right: var(--ph-space-4); width: 32px; height: 32px; }
    .ph-app.ph-tpl-clientareahome .ph-dash-hero .ph-dash-arrow { top: var(--ph-space-5); right: var(--ph-space-5); }
    .ph-app.ph-tpl-clientareahome .ph-dash-pay { flex: 1 1 100%; justify-content: center; margin-left: 0; }
}

/* One subtle easter egg: the check draws itself once */
@media (prefers-reduced-motion: no-preference) {
    .ph-app.ph-tpl-clientareahome .ph-dash-check path { stroke-dasharray: 23; stroke-dashoffset: 23; animation: ph-dash-draw 320ms var(--ph-ease) 240ms forwards; }
}
@keyframes ph-dash-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ph-app.ph-tpl-clientareahome .ph-dash-card,
    .ph-app.ph-tpl-clientareahome .ph-dash-arrow,
    .ph-app.ph-tpl-clientareahome .ph-dash-icon,
    .ph-app.ph-tpl-clientareahome .ph-dash-pay,
    .ph-app.ph-tpl-clientareahome .ph-dash-pay .ph-icon { transition: none; }
    .ph-app.ph-tpl-clientareahome .ph-dash-card:hover,
    .ph-app.ph-tpl-clientareahome .ph-dash-card:active,
    .ph-app.ph-tpl-clientareahome .ph-dash-card:hover .ph-dash-arrow,
    .ph-app.ph-tpl-clientareahome .ph-dash-card:focus-visible .ph-dash-arrow,
    .ph-app.ph-tpl-clientareahome .ph-dash-hero.is-due:hover .ph-dash-pay .ph-icon { transform: none; }
}
@media (forced-colors: active) {
    .ph-app.ph-tpl-clientareahome .ph-dash-card { border: 1px solid CanvasText; }
    .ph-app.ph-tpl-clientareahome .ph-dash-pay { border: 1px solid ButtonText; }
}

/* =========================================================================
   24. Action bar extras (0.4.0): renew/upgrade as pills; account pages too
   ========================================================================= */
.ph-app .ph-actionbar .ph-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px var(--ph-space-4);
    border: 1px solid var(--ph-border-default);
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-card);
    color: var(--ph-text-strong);
    font-size: var(--ph-text-sm);
    font-weight: var(--ph-fw-medium);
    text-decoration: none;
}
.ph-app .ph-actionbar .ph-pill:hover { background: var(--ph-sand-100); color: var(--ph-text-strong); }
.ph-app .ph-actionbar .ph-pill--primary { background: var(--ph-accent); border-color: var(--ph-accent); color: var(--ph-text-on-accent); font-weight: var(--ph-fw-semibold); }
.ph-app .ph-actionbar .ph-pill--primary:hover { background: var(--ph-accent-hover); border-color: var(--ph-accent-hover); color: var(--ph-text-on-accent); }
.ph-tpl-clientareaproductdetails .product-actions-wrapper { display: none !important; }

/* =========================================================================
   25. Cart, one column of content plus the order summary (0.3.9)
   There is no store: clients arrive from piensahost.com links. The
   categories/actions sidebar and "Seguir comprando" lead into the hidden
   store, so they go. The cart keeps all its steps and forms.
   ========================================================================= */
#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-collapsed,
#order-standard_cart #continueShopping,
#order-standard_cart .secondary-cart-body > .alert-warning.info-text-sm { display: none !important; }
/* standard_cart's own CSS loads after ours, inside the cart template */
#order-standard_cart .cart-body { float: none !important; width: 100% !important; max-width: 100% !important; }
/* Align the cart with every other page title (two nested -15px rows pushed it left) */
#order-standard_cart > .row { margin-left: 0 !important; margin-right: 0 !important; }
#order-standard_cart .cart-body { padding-left: 0 !important; padding-right: 0 !important; }
#order-standard_cart .header-lined h1 { font-size: var(--ph-text-3xl, 2rem); letter-spacing: -0.02em; }
#order-standard_cart .header-lined p { color: var(--ph-text-muted); }

/* Configure: each block is a clearly marked card */
#order-standard_cart .product-info,
#order-standard_cart .field-container,
#order-standard_cart .product-configurable-options,
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-tabs {
    background: var(--ph-surface-card);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-xs);
}
#order-standard_cart .product-info { padding: var(--ph-space-6); margin-bottom: var(--ph-space-5); }
#order-standard_cart .product-info .product-title {
    font-size: var(--ph-text-xl, 1.25rem);
    font-weight: var(--ph-fw-semibold);
    color: var(--ph-text-strong);
    margin-bottom: var(--ph-space-3);
}
#order-standard_cart .product-info p { font-size: var(--ph-text-sm); line-height: 1.6; color: var(--ph-text-body); margin: 0; }
#order-standard_cart .field-container { padding: var(--ph-space-5) var(--ph-space-6); margin-bottom: var(--ph-space-5); }
#order-standard_cart .field-container label,
#order-standard_cart .product-configurable-options label { font-weight: var(--ph-fw-semibold); color: var(--ph-text-strong); }
#order-standard_cart .field-container .form-group { margin-bottom: 0; }
#order-standard_cart .field-container select,
#order-standard_cart .product-configurable-options select {
    width: 100%;
    max-width: 420px;
    height: 48px;
    border-radius: var(--ph-radius-md);
    font-size: var(--ph-text-base, 1rem);
}
#order-standard_cart .product-configurable-options { padding: var(--ph-space-5) var(--ph-space-6); margin-bottom: var(--ph-space-5); }
#order-standard_cart .sub-heading { margin: var(--ph-space-6) 0 var(--ph-space-3); border: 0; text-align: left; }
#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading .primary-bg-color {
    background: transparent !important;
    color: var(--ph-text-strong) !important;
    padding: 0;
    font-size: var(--ph-text-lg, 1.125rem);
    font-weight: var(--ph-fw-semibold);
}
#order-standard_cart .sub-heading::before,
#order-standard_cart .sub-heading::after { display: none; }
/* Addons are already cards in standard_cart: align them with ours */
#order-standard_cart .panel-addon {
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    box-shadow: none;
    overflow: hidden;
}
#order-standard_cart .panel-addon .panel-add { background: var(--ph-sand-100); color: var(--ph-text-strong); }
#order-standard_cart .panel-addon-selected { border-color: var(--ph-accent); }
#order-standard_cart .panel-addon-selected .panel-add { background: var(--ph-accent); color: var(--ph-text-on-accent); }

/* Order summary: one quiet card, total stands out */
#order-standard_cart .order-summary {
    background: var(--ph-surface-card);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    box-shadow: var(--ph-shadow-sm);
    overflow: hidden;
}
#order-standard_cart .order-summary h2 {
    background: transparent;
    color: var(--ph-text-strong);
    font-size: var(--ph-text-lg, 1.125rem) !important;
    font-weight: var(--ph-fw-semibold);
    text-align: left !important;
    padding: var(--ph-space-5) var(--ph-space-5) 0;
    margin: 0;
}
#order-standard_cart .order-summary .summary-container { background: transparent; border: 0; padding: var(--ph-space-4) var(--ph-space-5) var(--ph-space-5); }
#order-standard_cart .order-summary .total-due-today .amt,
#order-standard_cart .order-summary .total-due-today .amt span { font-family: var(--ph-font-sans); font-weight: var(--ph-fw-semibold); color: var(--ph-text-strong); }
#order-standard_cart .order-summary .loader { display: none; }
#order-standard_cart #btnCompleteProductConfig,
#order-standard_cart .btn-checkout { width: 100%; height: 52px; border-radius: var(--ph-radius-md); font-size: var(--ph-text-base, 1rem); }

/* View cart: the item list and promo tab as cards */
#order-standard_cart .view-cart-items-header {
    background: transparent;
    color: var(--ph-text-muted);
    font-size: var(--ph-text-xs, 0.75rem);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--ph-border-subtle);
}
#order-standard_cart .view-cart-items { overflow: hidden; }
#order-standard_cart .view-cart-items .item { border-color: var(--ph-border-subtle); }
#order-standard_cart .view-cart-items .item-title { font-weight: var(--ph-fw-semibold); color: var(--ph-text-strong); }
#order-standard_cart .view-cart-tabs { padding: var(--ph-space-4); margin-top: var(--ph-space-5); }
#order-standard_cart .view-cart-tabs .nav-tabs { border: 0; }
#order-standard_cart .view-cart-tabs .tab-content { border: 0; padding: var(--ph-space-3) 0 0; }

/* Domain step: the check/use button was clipped by its column */
#order-standard_cart .domain-input-group > .row { margin-left: 0; margin-right: 0; }
#order-standard_cart .domain-input-group .btn { overflow: visible; width: auto; min-width: 112px; padding-left: var(--ph-space-5); padding-right: var(--ph-space-5); }

/* Checkout: standard_cart closes one div too many, so the footer lands
   outside .ph-shell. Give it the rail offset when that happens. */
@media (min-width: 1000px) {
    body.ph-app > .ph-footer { margin-left: var(--ph-rail-w); }
}

/* =========================================================================
   26. Service page: key facts first (0.4.0)
   Status, renewal, price and payment method sit under the action bar
   (includes/ph-service-facts.tpl). The original billing card at the end of
   the page repeated them, so it is hidden.
   ========================================================================= */
.ph-tpl-clientareaproductdetails #tabOverview > .card:has(.product-details) { display: none !important; }
.ph-facts-wrap { padding-bottom: var(--ph-space-5); }
.ph-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0;
    margin: 0;
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card);
    box-shadow: var(--ph-shadow-xs);
    overflow: hidden;
}
.ph-fact { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--ph-space-4) var(--ph-space-5); border-left: 1px solid var(--ph-border-subtle); }
.ph-fact:first-child { border-left: 0; }
.ph-fact--wide { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--ph-border-subtle); }
.ph-fact dt {
    margin: 0;
    color: var(--ph-text-muted);
    font-size: var(--ph-text-eyebrow);
    font-weight: var(--ph-fw-semibold);
    letter-spacing: var(--ph-tracking-eyebrow);
    text-transform: uppercase;
}
.ph-fact dd { margin: 0; color: var(--ph-text-strong); font-size: var(--ph-text-base); font-weight: var(--ph-fw-medium); overflow-wrap: anywhere; }
.ph-fact-num { font-family: var(--ph-font-mono); font-variant-numeric: tabular-nums; font-weight: var(--ph-fw-semibold); }
.ph-fact-sub { color: var(--ph-text-muted); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-regular, 400); }
@media (max-width: 719.98px) {
    .ph-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ph-fact { border-left: 0; border-top: 1px solid var(--ph-border-subtle); padding: var(--ph-space-3) var(--ph-space-4); }
    .ph-fact:nth-child(-n+2) { border-top: 0; }
    .ph-fact:nth-child(even) { border-left: 1px solid var(--ph-border-subtle); }
}

/* =========================================================================
   27. Dashboard affordance (0.4.0)
   The tiles point "out" with a corner arrow instead of a ringed arrow; on
   hover the arrow fills and travels, and a flame line grows along the base.
   A small chip appears only when something needs attention.
   ========================================================================= */
.ph-app.ph-tpl-clientareahome .ph-dash-card { overflow: hidden; }
.ph-app.ph-tpl-clientareahome .ph-dash-tile .ph-dash-arrow { border-color: transparent; background: transparent; color: var(--ph-text-subtle); }
.ph-app.ph-tpl-clientareahome .ph-dash-arrow .ph-icon { width: 20px; height: 20px; transition: transform var(--ph-dur-base) var(--ph-ease); }
.ph-app.ph-tpl-clientareahome .ph-dash-tile:hover .ph-dash-arrow,
.ph-app.ph-tpl-clientareahome .ph-dash-tile:focus-visible .ph-dash-arrow { transform: none; }
.ph-app.ph-tpl-clientareahome .ph-dash-card:hover .ph-dash-arrow .ph-icon,
.ph-app.ph-tpl-clientareahome .ph-dash-card:focus-visible .ph-dash-arrow .ph-icon { transform: translate(2px, -2px); }
.ph-app.ph-tpl-clientareahome .ph-dash-hero:hover .ph-dash-arrow { transform: none; }
.ph-app.ph-tpl-clientareahome .ph-dash-tile::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--ph-accent);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--ph-dur-slow, 320ms) var(--ph-ease);
}
.ph-app.ph-tpl-clientareahome .ph-dash-tile:hover::after,
.ph-app.ph-tpl-clientareahome .ph-dash-tile:focus-visible::after { transform: scaleX(1); }
.ph-app.ph-tpl-clientareahome .ph-dash-alert {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: var(--ph-radius-full);
    background: var(--ph-warning-50);
    color: var(--ph-warning-500);
    font-size: var(--ph-text-xs);
    font-weight: var(--ph-fw-semibold);
    white-space: nowrap;
}
.ph-app.ph-tpl-clientareahome .ph-dash-alert::before { content: ""; width: 6px; height: 6px; border-radius: var(--ph-radius-full); background: currentColor; }
@media (prefers-reduced-motion: reduce) {
    .ph-app.ph-tpl-clientareahome .ph-dash-tile::after { transition: none; }
    .ph-app.ph-tpl-clientareahome .ph-dash-card:hover .ph-dash-arrow .ph-icon { transform: none; }
}

/* =========================================================================
   28. Lists as cards (0.4.0): services, domains, invoices, tickets
   Same language as the dashboard: each row is a card with an icon tile,
   the main text, its facts, the status chip and an arrow. Still a real
   <table> (DataTables sorting, clickable rows and module JS keep working);
   only its display changes. Header labels stay on wide screens; on phones
   footer.tpl copies them into data-label so dates keep their meaning.
   ========================================================================= */
.ph-app .table-container:has(.ph-cardlist),
.ph-app .ph-cardlist-wrap { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.ph-app table.ph-cardlist { display: block; width: 100% !important; margin: 0 !important; border: 0; background: transparent; }
.ph-app table.ph-cardlist > thead,
.ph-app table.ph-cardlist > tbody { display: flex; flex-direction: column; }
.ph-app table.ph-cardlist > tbody { gap: var(--ph-space-3); }
.ph-app table.ph-cardlist > thead > tr,
.ph-app table.ph-cardlist > tbody > tr {
    display: grid;
    grid-template-columns: var(--ph-cl-cols);
    align-items: center;
    column-gap: var(--ph-space-4);
    padding: 0 var(--ph-space-5);
}
.ph-app table.ph-cardlist > thead > tr { padding-top: 0; padding-bottom: var(--ph-space-2); }
.ph-app table.ph-cardlist > thead > tr::before,
.ph-app table.ph-cardlist > thead > tr::after { content: ""; }
.ph-app table.ph-cardlist > thead > tr > th {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    color: var(--ph-text-muted);
    font-size: var(--ph-text-eyebrow);
    letter-spacing: var(--ph-tracking-eyebrow);
}
.ph-app table.ph-cardlist > thead > tr > th::before,
.ph-app table.ph-cardlist > thead > tr > th::after { display: none !important; }
.ph-app table.ph-cardlist > tbody > tr {
    position: relative;
    min-height: 80px;
    padding-top: var(--ph-space-4);
    padding-bottom: var(--ph-space-4);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card) !important;
    box-shadow: var(--ph-shadow-xs);
    transition: transform var(--ph-dur-base) var(--ph-ease), box-shadow var(--ph-dur-base) var(--ph-ease), border-color var(--ph-dur-base) var(--ph-ease);
}
.ph-app table.ph-cardlist > tbody > tr:hover { border-color: var(--ph-border-default); box-shadow: var(--ph-shadow-md); transform: translateY(-2px); }
.ph-app table.ph-cardlist > tbody > tr > td {
    min-width: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ph-text-body);
    font-size: var(--ph-text-sm);
}
.ph-app table.ph-cardlist > tbody > tr > td .w-hidden { display: none; }
/* Icon tile (left) and arrow (right) */
.ph-app table.ph-cardlist > tbody > tr::before {
    content: "";
    width: 44px;
    height: 44px;
    border-radius: var(--ph-radius-md);
    background-color: var(--ph-sand-100);
    background-image: var(--ph-cl-icon);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    transition: background-color var(--ph-dur-base) var(--ph-ease);
}
.ph-app table.ph-cardlist > tbody > tr:hover::before { background-color: var(--ph-sand-200); }
.ph-app table.ph-cardlist > tbody > tr::after {
    content: "";
    justify-self: end;
    width: 20px;
    height: 20px;
    background: var(--ph-text-subtle);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--ph-dur-base) var(--ph-ease), background-color var(--ph-dur-base) var(--ph-ease);
}
.ph-app table.ph-cardlist > tbody > tr:hover::after { background: var(--ph-text-strong); transform: translateX(3px); }
/* Main cell: strong title, quiet second line */
.ph-app table.ph-cardlist td.ph-cl-main { color: var(--ph-text-strong); font-size: var(--ph-text-base); font-weight: var(--ph-fw-semibold); overflow-wrap: anywhere; }
.ph-app table.ph-cardlist td.ph-cl-main strong { font-weight: var(--ph-fw-semibold); }
.ph-app table.ph-cardlist td.ph-cl-main a { color: var(--ph-text-link); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); }
.ph-app table.ph-cardlist td.ph-cl-main small { display: inline-block; margin-top: 2px; color: var(--ph-text-muted); font-size: var(--ph-text-xs); font-weight: var(--ph-fw-medium); }
.ph-app table.ph-cardlist td.ph-cl-num { font-family: var(--ph-font-mono); font-variant-numeric: tabular-nums; color: var(--ph-text-strong); }
/* Empty list */
.ph-app table.ph-cardlist > tbody > tr:has(> td.dataTables_empty) { display: block; min-height: 0; transform: none; box-shadow: none; text-align: center; }
.ph-app table.ph-cardlist > tbody > tr:has(> td.dataTables_empty)::before,
.ph-app table.ph-cardlist > tbody > tr:has(> td.dataTables_empty)::after { display: none; }

/* Per list: columns and icon. Hidden cells (display:none) leave the grid. */
.ph-app #tableServicesList.ph-cardlist {
    --ph-cl-cols: 44px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) 112px 20px;
    --ph-cl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1E24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM4 13h16a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-3a2 2 0 0 1 2-2zM6 8h.01M6 17h.01'/%3E%3C/svg%3E");
}
.ph-app #tableDomainsList.ph-cardlist {
    --ph-cl-cols: 44px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) 112px 20px;
    --ph-cl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1E24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20M2 12h20'/%3E%3C/svg%3E");
}
.ph-app #tableInvoicesList.ph-cardlist {
    --ph-cl-cols: 44px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 112px 20px;
    --ph-cl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1E24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4M10 9H8M16 13H8M16 17H8'/%3E%3C/svg%3E");
}
.ph-app #tableTicketsList.ph-cardlist {
    --ph-cl-cols: 44px minmax(0, 1fr) minmax(0, 2.2fr) 112px minmax(0, 1fr) 20px;
    --ph-cl-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1E24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E");
}

/* Phones: icon left, title on top, facts below in one line, arrow right */
@media (max-width: 719.98px) {
    .ph-app table.ph-cardlist > thead { display: none; }
    .ph-app table.ph-cardlist > tbody { gap: var(--ph-space-2); }
    .ph-app table.ph-cardlist > tbody > tr {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px var(--ph-space-3);
        min-height: 0;
        padding: var(--ph-space-4) 44px var(--ph-space-4) 72px;
    }
    .ph-app table.ph-cardlist > tbody > tr::before { position: absolute; top: var(--ph-space-4); left: var(--ph-space-4); width: 40px; height: 40px; }
    .ph-app table.ph-cardlist > tbody > tr::after { position: absolute; top: 50%; right: var(--ph-space-4); margin-top: -10px; }
    .ph-app table.ph-cardlist > tbody > tr:hover { transform: none; }
    .ph-app table.ph-cardlist td.ph-cl-main { flex: 1 1 100%; }
    .ph-app table.ph-cardlist td[data-label].ph-cl-date::before {
        content: attr(data-label) " ";
        color: var(--ph-text-muted);
        font-size: var(--ph-text-xs);
    }
    /* Show the renewal date on phones again; the card has room for it */
    .ph-tpl-clientareaproducts #tableServicesList.ph-cardlist td:nth-child(4),
    .ph-tpl-clientareainvoices #tableInvoicesList.ph-cardlist td:nth-child(3) { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    .ph-app table.ph-cardlist > tbody > tr,
    .ph-app table.ph-cardlist > tbody > tr::after { transition: none; }
    .ph-app table.ph-cardlist > tbody > tr:hover,
    .ph-app table.ph-cardlist > tbody > tr:hover::after { transform: none; }
}
@media (forced-colors: active) {
    .ph-app table.ph-cardlist > tbody > tr { border: 1px solid CanvasText; }
}
.ph-app table.ph-cardlist th,
.ph-app table.ph-cardlist td { width: auto !important; }
.ph-app #tableInvoicesList.ph-cardlist td.ph-cl-main::before { content: "#"; color: var(--ph-text-muted); }

/* 0.4.1 polish */
.ph-app .ph-facts-wrap { max-width: 1200px; padding: 0 var(--ph-gutter) var(--ph-space-5); }
/* Amounts in lists and facts: sans with tabular figures (mono stays for the big dashboard numbers) */
.ph-app table.ph-cardlist td.ph-cl-num,
.ph-fact-num { font-family: var(--ph-font-sans); font-variant-numeric: tabular-nums; }
.ph-app table.ph-cardlist td.ph-cl-num small { font-family: var(--ph-font-sans); }
/* One arrow style on every dashboard card: no ring */
.ph-app.ph-tpl-clientareahome .ph-dash-hero .ph-dash-arrow,
.ph-app.ph-tpl-clientareahome .ph-dash-hero:hover .ph-dash-arrow,
.ph-app.ph-tpl-clientareahome .ph-dash-hero:focus-visible .ph-dash-arrow { border-color: transparent; background: transparent; color: var(--ph-text-on-ink); }
.ph-app.ph-tpl-clientareahome .ph-dash-tile .ph-dash-arrow { color: var(--ph-text-muted); }
.ph-app.ph-tpl-clientareahome .ph-dash-tile:hover .ph-dash-arrow,
.ph-app.ph-tpl-clientareahome .ph-dash-tile:focus-visible .ph-dash-arrow { border-color: transparent; background: transparent; color: var(--ph-text-strong); }
.ph-app.ph-tpl-clientareahome .ph-dash-arrow .ph-icon { width: 22px; height: 22px; }
.ph-app.ph-tpl-clientareahome .ph-dash-credit { margin-top: var(--ph-space-2); color: var(--ph-text-on-ink-muted); font-size: var(--ph-text-sm); }
.ph-app.ph-tpl-clientareahome .ph-dash-credit strong { color: var(--ph-text-on-ink); font-weight: var(--ph-fw-semibold); }

/* =========================================================================
   29. Audit fixes (0.4.2)
   ========================================================================= */
/* Chip text on tinted backgrounds reaches WCAG 2.2 AA (4.5:1) at 11-12px.
   The -500 tones stay for icons and borders; -700 is for text on -50 tints. */
:root {
    --ph-success-700: #1F6B4F;
    --ph-warning-700: #8A5A00;
    --ph-info-700: #355A78;
    --ph-danger-700: #9E3329;
}
.ph-app .label.status-active, .ph-app .label.status-paid, .ph-app .label.status-completed,
.ph-app .label.status-open, .ph-app .label.status-accepted, .ph-app .label.label-success,
.ph-app .product-status-active .product-status-text { color: var(--ph-success-700) !important; }
.ph-app .label.status-suspended, .ph-app .label.status-unpaid, .ph-app .label.status-overdue,
.ph-app .label.status-customer-reply, .ph-app .label.status-onhold, .ph-app .label.label-warning,
.ph-app.ph-tpl-clientareahome .ph-dash-alert { color: var(--ph-warning-700) !important; }
.ph-app .label.status-pending, .ph-app .label.status-answered, .ph-app .label.status-inprogress,
.ph-app .label.status-in-progress, .ph-app .label.status-draft, .ph-app .label.status-delivered,
.ph-app .label.label-info { color: var(--ph-info-700) !important; }
.ph-app .label.label-danger { color: var(--ph-danger-700) !important; }
.ph-app .label.status-terminated, .ph-app .label.status-cancelled, .ph-app .label.status-closed,
.ph-app .label.status-expired, .ph-app .label.status-refunded, .ph-app .label.status-fraud,
.ph-app .label.status-collections, .ph-app .label.status-dead, .ph-app .label.status-transferred-away,
.ph-app .label.label-default { color: var(--ph-ink-600) !important; }

/* Card rows: one target. The domain inside the card is text, not a second
   link to the website (that sat inside the card and opened a new tab). */
.ph-app table.ph-cardlist td.ph-cl-main a { pointer-events: none; color: var(--ph-text-muted); text-decoration: none; }
/* Card rows are reachable with the keyboard (footer.tpl adds tabindex) */
.ph-app table.ph-cardlist > tbody > tr:focus { outline: none; }
.ph-app table.ph-cardlist > tbody > tr:focus-visible { outline: 2px solid var(--ph-focus-ring); outline-offset: 3px; box-shadow: var(--ph-shadow-focus); }

/* Empty lists: a real empty state, not a thin grey line */
.ph-app table.ph-cardlist > tbody > tr:has(> td.dataTables_empty) { padding: var(--ph-space-8, 48px) var(--ph-space-5); border-style: dashed; background: transparent !important; }
.ph-app table.ph-cardlist td.dataTables_empty { color: var(--ph-text-muted); font-size: var(--ph-text-base); text-align: center !important; }

/* 0.4.3: empty state fills the card; logo link gets a 24px+ target (WCAG 2.5.8) */
.ph-app table.ph-cardlist td.dataTables_empty { display: block; width: 100% !important; }
.ph-app .ph-rail-logo { display: inline-flex; align-items: center; min-height: 32px; }

/* =========================================================================
   30. Status by colour, not by badge (0.5.0)
   Every list row carries a tone (data-ph-tone, set in footer.tpl from the
   WHMCS status class): ok, attention, danger, pending, done, inactive.
   The tone shows three ways, so colour is never the only cue (WCAG 1.4.1):
   a rail on the card edge, a tinted icon tile with a shaped glyph (check,
   exclamation, clock, dash), and inactive rows fade back. The status text
   stays in the DOM (screen readers, row tooltip); the badge is not drawn.
   A filter bar with counts names each group in words.
   ========================================================================= */
.ph-app table.ph-cardlist .ph-cl-status {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}
.ph-app #tableServicesList.ph-cardlist,
.ph-app #tableDomainsList.ph-cardlist { --ph-cl-cols: 44px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) 20px; }
.ph-app #tableInvoicesList.ph-cardlist { --ph-cl-cols: 44px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 20px; }
.ph-app #tableTicketsList.ph-cardlist { --ph-cl-cols: 44px minmax(0, 1fr) minmax(0, 2.4fr) minmax(0, 1fr) 20px; }
.ph-app table.ph-cardlist > tbody > tr {
    --ph-tone: transparent;
    --ph-tone-bg: var(--ph-sand-100);
    box-shadow: inset 4px 0 0 var(--ph-tone), var(--ph-shadow-xs);
}
.ph-app table.ph-cardlist > tbody > tr:hover { box-shadow: inset 4px 0 0 var(--ph-tone), var(--ph-shadow-md); }
.ph-app table.ph-cardlist > tbody > tr::before,
.ph-app table.ph-cardlist > tbody > tr:hover::before {
    background-color: var(--ph-tone-bg);
    background-image: var(--ph-tone-glyph, none), var(--ph-cl-icon);
    background-position: right 1px bottom 1px, center;
    background-size: 17px 17px, 22px 22px;
}
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="inactive"] > td { opacity: 0.55; }
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="inactive"]::before { opacity: 0.7; }
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="inactive"]:hover > td { opacity: 0.85; }
.ph-app table.ph-cardlist > tbody > tr::before { overflow: visible; }
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="ok"] { --ph-tone: var(--ph-success-500); --ph-tone-bg: var(--ph-success-50); --ph-tone-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.75' fill='%232F8F6B' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M5.6 9.2 8 11.4l4.4-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="attention"] { --ph-tone: var(--ph-warning-500); --ph-tone-bg: var(--ph-warning-50); --ph-tone-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.75' fill='%23C68A14' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M9 5.4v4.2M9 12.4v.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="danger"] { --ph-tone: var(--ph-danger-500); --ph-tone-bg: var(--ph-danger-50); --ph-tone-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.75' fill='%23C2453A' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M9 5.4v4.2M9 12.4v.1' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="pending"] { --ph-tone: var(--ph-info-500); --ph-tone-bg: var(--ph-info-50); --ph-tone-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.75' fill='%234D789B' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M9 5.6V9l2.2 1.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="done"] { --ph-tone: var(--ph-ink-300); --ph-tone-bg: var(--ph-sand-100); --ph-tone-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.75' fill='%238B8F9A' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M5.6 9.2 8 11.4l4.4-4.8' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="inactive"] { --ph-tone: transparent; --ph-tone-bg: var(--ph-sand-100); --ph-tone-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='7.75' fill='%23AEB1B9' stroke='%23fff' stroke-width='1.5'/%3E%3Cpath d='M6 9h6' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }

/* Filter bar: the words for the colours, with counts */
.ph-filter { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin: 0 0 var(--ph-space-4); }
.ph-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    min-height: 36px;
    padding: 0 var(--ph-space-4);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-card);
    color: var(--ph-text-body);
    font-family: var(--ph-font-sans);
    font-size: var(--ph-text-sm);
    font-weight: var(--ph-fw-medium);
    cursor: pointer;
    transition: background-color var(--ph-dur-base) var(--ph-ease), border-color var(--ph-dur-base) var(--ph-ease), color var(--ph-dur-base) var(--ph-ease);
}
.ph-filter-btn:hover { border-color: var(--ph-border-default); background: var(--ph-sand-50); }
.ph-filter-btn:focus { outline: none; }
.ph-filter-btn:focus-visible { outline: 2px solid var(--ph-focus-ring); outline-offset: 2px; }
.ph-filter-btn[aria-pressed="true"] { border-color: var(--ph-surface-inverse); background: var(--ph-surface-inverse); color: var(--ph-text-on-ink); }
.ph-filter-dot { width: 8px; height: 8px; border-radius: var(--ph-radius-full); background: var(--ph-ink-300); }
.ph-filter-btn--all .ph-filter-dot { display: none; }
.ph-filter-n { color: var(--ph-text-muted); font-variant-numeric: tabular-nums; }
.ph-filter-btn[aria-pressed="true"] .ph-filter-n { color: var(--ph-text-on-ink-muted); }

/* Status as words with a dot (service facts) — no badge */
.ph-state { display: inline-flex; align-items: center; gap: var(--ph-space-2); }
.ph-state::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: var(--ph-radius-full); background: var(--ph-ink-300); }
.ph-filter-btn--ok .ph-filter-dot, .ph-state--ok::before { background: var(--ph-success-500); }
.ph-filter-btn--attention .ph-filter-dot, .ph-state--attention::before { background: var(--ph-warning-500); }
.ph-filter-btn--danger .ph-filter-dot, .ph-state--danger::before { background: var(--ph-danger-500); }
.ph-filter-btn--pending .ph-filter-dot, .ph-state--pending::before { background: var(--ph-info-500); }
.ph-filter-btn--done .ph-filter-dot, .ph-state--done::before { background: var(--ph-ink-300); }
.ph-filter-btn--inactive .ph-filter-dot, .ph-state--inactive::before { background: var(--ph-ink-300); }

/* =========================================================================
   31. Service page tabs (0.5.0): secondary navigation
   Hierarchy on the page: action bar (pills, the service's sections) >
   these tabs (views of the panel) > content. So the tabs are quiet text
   with an underline, attached to the panel, no icons, never stacked, and
   gone when there is only one.
   ========================================================================= */
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs {
    display: flex !important;
    flex-wrap: nowrap;
    gap: var(--ph-space-6);
    margin: 0;
    padding: 0 var(--ph-space-1);
    overflow-x: auto;
    border: 0;
    border-bottom: 1px solid var(--ph-border-subtle);
    background: transparent;
    scrollbar-width: none;
}
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs::-webkit-scrollbar { display: none; }
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs:not(:has(> li:nth-child(2))) { display: none !important; }
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs > li {
    display: block !important;
    flex: none;
    width: auto !important;
    margin: 0 !important;
    border: 0 !important;
}
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs .nav-link {
    position: relative;
    display: block;
    padding: var(--ph-space-3) 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--ph-text-muted) !important;
    font-size: var(--ph-text-base);
    font-weight: var(--ph-fw-medium);
    white-space: nowrap;
}
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs .nav-link i { display: none; }
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs .nav-link:hover { color: var(--ph-text-strong) !important; }
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs .nav-link.active { color: var(--ph-text-strong) !important; font-weight: var(--ph-fw-semibold); }
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    border-radius: 2px;
    background: var(--ph-accent);
    transform: scaleX(0);
    transition: transform var(--ph-dur-base) var(--ph-ease);
}
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs .nav-link.active::after { transform: scaleX(1); }
.ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs .nav-link:focus-visible { outline: 2px solid var(--ph-focus-ring); outline-offset: 2px; }
.ph-tpl-clientareaproductdetails #tabOverview > .product-details-tab-container {
    margin-top: var(--ph-space-4);
    border: 1px solid var(--ph-border-subtle) !important;
    border-radius: var(--ph-radius-lg) !important;
    box-shadow: var(--ph-shadow-xs);
}
@media (prefers-reduced-motion: reduce) {
    .ph-tpl-clientareaproductdetails #tabOverview > ul.nav-tabs .nav-link::after { transition: none; }
}

/* 0.5.1: paid/completed needs nothing from the client: no rail, only the grey check */
.ph-app table.ph-cardlist > tbody > tr[data-ph-tone="done"] { --ph-tone: transparent; }

/* =========================================================================
   32. Knowledge base (0.6.0): search first, categories as tiles, articles
   as cards, reading page for articles. Same language as the dashboard and
   the lists. Templates: knowledgebase*.tpl, includes/ph-kb-*.tpl.
   ========================================================================= */
.ph-kb { display: flex; flex-direction: column; gap: var(--ph-space-7); }
.ph-kb-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--ph-space-2);
    padding: 6px 6px 6px 52px;
    border: 1px solid var(--ph-border-default);
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-card);
    box-shadow: var(--ph-shadow-sm);
    transition: border-color var(--ph-dur-base) var(--ph-ease), box-shadow var(--ph-dur-base) var(--ph-ease);
}
.ph-kb-search:focus-within { border-color: var(--ph-text-strong); box-shadow: var(--ph-shadow-focus); }
.ph-kb-search-icon { position: absolute; left: 20px; top: 50%; display: inline-flex; color: var(--ph-text-muted); transform: translateY(-50%); }
.ph-kb-search-input {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--ph-text-strong);
    font-family: var(--ph-font-sans);
    font-size: 1.0625rem;
}
.ph-kb-search-input::placeholder { color: var(--ph-text-muted); }
.ph-kb-search-btn {
    flex: none;
    height: 48px;
    padding: 0 var(--ph-space-6);
    border: 0;
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-inverse);
    color: var(--ph-text-on-ink);
    font-weight: var(--ph-fw-semibold);
    cursor: pointer;
}
.ph-kb-search-btn:hover { background: var(--ph-ink-800); }
.ph-kb-heading { margin: 0 0 var(--ph-space-4); color: var(--ph-text-strong); font-size: var(--ph-text-lg); font-weight: var(--ph-fw-semibold); }
.ph-kb-block > ul, .ph-kb-cats, .ph-kb-list { margin: 0; padding: 0; list-style: none; }

/* Category tiles */
.ph-kb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--ph-space-4); }
.ph-kb-cats > li { position: relative; display: flex; }
.ph-kb-cat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ph-space-2);
    width: 100%;
    min-height: 168px;
    padding: var(--ph-space-5);
    overflow: hidden;
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card);
    box-shadow: var(--ph-shadow-xs);
    color: var(--ph-text-body) !important;
    text-decoration: none !important;
    transition: transform var(--ph-dur-base) var(--ph-ease), box-shadow var(--ph-dur-base) var(--ph-ease), border-color var(--ph-dur-base) var(--ph-ease);
}
.ph-kb-cat:hover { border-color: var(--ph-border-default); box-shadow: var(--ph-shadow-md); transform: translateY(-2px); }
.ph-kb-cat::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ph-accent); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ph-ease); }
.ph-kb-cat:hover::after, .ph-kb-cat:focus-visible::after { transform: scaleX(1); }
.ph-kb-cat-icon { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--ph-space-2); border-radius: var(--ph-radius-md); background: var(--ph-sand-100); color: var(--ph-text-strong); }
.ph-kb-cat-icon .ph-icon { width: 22px; height: 22px; }
.ph-kb-cat-name { color: var(--ph-text-strong); font-size: var(--ph-text-base); font-weight: var(--ph-fw-semibold); }
.ph-kb-cat-text { color: var(--ph-text-muted); font-size: var(--ph-text-sm); line-height: 1.5; }
.ph-kb-cat-count { margin-top: auto; padding-top: var(--ph-space-2); color: var(--ph-text-muted); font-size: var(--ph-text-xs); font-weight: var(--ph-fw-medium); }
.ph-kb-cat-arrow { position: absolute; top: var(--ph-space-5); right: var(--ph-space-5); color: var(--ph-text-muted); transition: transform var(--ph-dur-base) var(--ph-ease), color var(--ph-dur-base) var(--ph-ease); }
.ph-kb-cat:hover .ph-kb-cat-arrow { color: var(--ph-text-strong); transform: translate(2px, -2px); }

/* Article cards */
.ph-kb-list { display: flex; flex-direction: column; gap: var(--ph-space-3); }
.ph-kb-list > li { position: relative; }
.ph-kb-item {
    display: flex;
    align-items: center;
    gap: var(--ph-space-4);
    padding: var(--ph-space-4) var(--ph-space-5);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card);
    box-shadow: var(--ph-shadow-xs);
    color: var(--ph-text-body) !important;
    text-decoration: none !important;
    transition: transform var(--ph-dur-base) var(--ph-ease), box-shadow var(--ph-dur-base) var(--ph-ease), border-color var(--ph-dur-base) var(--ph-ease);
}
.ph-kb-item:hover { border-color: var(--ph-border-default); box-shadow: var(--ph-shadow-md); transform: translateY(-2px); }
.ph-kb-item-icon { display: inline-grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: var(--ph-radius-md); background: var(--ph-sand-100); color: var(--ph-text-strong); }
.ph-kb-item-body { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; }
.ph-kb-item-title { color: var(--ph-text-strong); font-weight: var(--ph-fw-semibold); }
.ph-kb-item-text { overflow: hidden; color: var(--ph-text-muted); font-size: var(--ph-text-sm); text-overflow: ellipsis; white-space: nowrap; }
.ph-kb-item-arrow { flex: none; color: var(--ph-text-subtle); transition: transform var(--ph-dur-base) var(--ph-ease), color var(--ph-dur-base) var(--ph-ease); }
.ph-kb-item:hover .ph-kb-item-arrow { color: var(--ph-text-strong); transform: translateX(3px); }
.ph-kb-edit { position: absolute; top: var(--ph-space-3); right: var(--ph-space-10, 56px); }
.ph-kb-empty { padding: var(--ph-space-7) var(--ph-space-5); border: 1px dashed var(--ph-border-default); border-radius: var(--ph-radius-lg); color: var(--ph-text-muted); text-align: center; }

/* Article: a reading page */
.ph-kb-article { max-width: 760px; padding: var(--ph-space-7) var(--ph-space-7) var(--ph-space-6); border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-lg); background: var(--ph-surface-card); box-shadow: var(--ph-shadow-xs); }
.ph-kb-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-4); margin-bottom: var(--ph-space-5); color: var(--ph-text-muted); font-size: var(--ph-text-sm); }
.ph-kb-meta .ph-icon { width: 16px; height: 16px; vertical-align: -3px; }
.ph-kb-print { margin-left: auto; color: var(--ph-text-muted) !important; }
.ph-kb-prose { color: var(--ph-text-body); font-size: 1.0625rem; line-height: 1.75; overflow-wrap: anywhere; }
.ph-kb-prose h1, .ph-kb-prose h2, .ph-kb-prose h3, .ph-kb-prose h4 { margin: 1.6em 0 0.5em; color: var(--ph-text-strong); font-weight: var(--ph-fw-semibold); line-height: 1.25; }
.ph-kb-prose h1 { font-size: 1.5rem; } .ph-kb-prose h2 { font-size: 1.3rem; } .ph-kb-prose h3 { font-size: 1.15rem; }
.ph-kb-prose > :first-child { margin-top: 0; }
.ph-kb-prose p, .ph-kb-prose ul, .ph-kb-prose ol { margin: 0 0 1em; }
.ph-kb-prose img { max-width: 100%; height: auto; border-radius: var(--ph-radius-md); }
.ph-kb-prose code { padding: 2px 6px; border-radius: 6px; background: var(--ph-sand-100); color: var(--ph-text-strong); font-family: var(--ph-font-mono); font-size: 0.9em; }
.ph-kb-prose pre { padding: var(--ph-space-4); overflow-x: auto; border-radius: var(--ph-radius-md); background: var(--ph-surface-inverse); color: var(--ph-text-on-ink); }
.ph-kb-prose pre code { padding: 0; background: none; color: inherit; }
.ph-kb-prose table { width: 100%; margin-bottom: 1em; border-collapse: collapse; font-size: var(--ph-text-sm); }
.ph-kb-prose th, .ph-kb-prose td { padding: var(--ph-space-2) var(--ph-space-3); border-bottom: 1px solid var(--ph-border-subtle); text-align: left; }
.ph-kb-vote { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-2); margin-top: var(--ph-space-6); padding-top: var(--ph-space-5); border-top: 1px solid var(--ph-border-subtle); }
.ph-kb-vote-q { margin-right: var(--ph-space-2); color: var(--ph-text-strong); font-weight: var(--ph-fw-semibold); }
.ph-kb-vote-btn { min-height: 36px; padding: 0 var(--ph-space-5); border: 1px solid var(--ph-border-default); border-radius: var(--ph-radius-full); background: var(--ph-surface-card); color: var(--ph-text-strong); font-weight: var(--ph-fw-medium); cursor: pointer; }
.ph-kb-vote-btn:hover { background: var(--ph-sand-100); }
.ph-kb-thanks { margin: 0; padding: var(--ph-space-3) var(--ph-space-5); border-radius: var(--ph-radius-md); background: var(--ph-success-50); color: var(--ph-success-700); font-weight: var(--ph-fw-medium); }
.ph-kb-foot { display: flex; justify-content: space-between; gap: var(--ph-space-4); }
.ph-kb-back { display: inline-flex; align-items: center; gap: var(--ph-space-2); color: var(--ph-text-strong) !important; font-weight: var(--ph-fw-medium); text-decoration: none !important; }
.ph-kb-back:hover { color: var(--ph-text-link) !important; }
.ph-kb-back .ph-icon { width: 18px; height: 18px; }
@media (max-width: 719.98px) {
    .ph-kb { gap: var(--ph-space-6); }
    .ph-kb-search { padding-left: 44px; }
    .ph-kb-search-icon { left: 16px; }
    .ph-kb-search-btn { padding: 0 var(--ph-space-4); }
    .ph-kb-cats { grid-template-columns: 1fr; }
    .ph-kb-cat { min-height: 0; }
    .ph-kb-item-text { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .ph-kb-article { padding: var(--ph-space-5); }
}
@media print {
    .ph-kb-search, .ph-kb-vote, .ph-kb-foot, .ph-kb-print, .ph-kb-block { display: none !important; }
    .ph-kb-article { border: 0; box-shadow: none; padding: 0; }
}

/* =========================================================================
   33. Ticket view (0.6.0): a conversation
   Subject is the H1, facts under it (header.tpl), messages as cards
   (support replies tinted), reply form, CC below. No badges.
   ========================================================================= */
.ph-tfacts .ph-fact { gap: 4px; }
.ph-tfacts .ph-fact br { display: none; }
.ph-tfacts .ph-fact .title { display: block; color: var(--ph-text-muted); font-size: var(--ph-text-eyebrow); font-weight: var(--ph-fw-semibold); letter-spacing: var(--ph-tracking-eyebrow); text-transform: uppercase; }
.ph-tfacts .ph-fact { color: var(--ph-text-strong); font-weight: var(--ph-fw-medium); }
.ph-tfacts .label { padding: 0 !important; background: none !important; color: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
.ph-tfacts .requestor-type-authorizeduser, .ph-tfacts [class*="requestor-type-"] { display: none; }
.ph-tfacts .ph-state { margin-right: var(--ph-space-2); }
.ph-ticket { display: flex; flex-direction: column; gap: var(--ph-space-5); }
.ph-ticket-actions { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); }
.ph-ticket .ph-pill { display: inline-flex; align-items: center; min-height: 38px; padding: 0 var(--ph-space-5); border: 1px solid var(--ph-border-default); border-radius: var(--ph-radius-full); background: var(--ph-surface-card); color: var(--ph-text-strong); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); cursor: pointer; }
.ph-ticket .ph-pill--primary { border-color: var(--ph-accent); background: var(--ph-accent); color: var(--ph-text-on-accent); font-weight: var(--ph-fw-semibold); }
.ph-ticket .ph-pill--primary:hover { background: var(--ph-accent-hover); }
.ph-ticket .ph-pill--quiet { color: var(--ph-danger-700); }
.ph-ticket .ph-pill--quiet:hover { background: var(--ph-danger-50); }
.ph-ticket .ph-pill[disabled] { opacity: 0.55; cursor: default; }
.ph-thread { display: flex; flex-direction: column; gap: var(--ph-space-4); margin: 0; padding: 0; list-style: none; }
.ph-app .ph-msg {
    margin: 0;
    padding: var(--ph-space-5) var(--ph-space-6);
    border: 1px solid var(--ph-border-subtle) !important;
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card) !important;
    box-shadow: var(--ph-shadow-xs);
}
.ph-app .ph-msg--staff { border-color: var(--ph-sand-300) !important; background: var(--ph-sand-50) !important; box-shadow: inset 4px 0 0 var(--ph-accent), var(--ph-shadow-xs); }
.ph-msg-head { display: flex; align-items: center; gap: var(--ph-space-3); margin-bottom: var(--ph-space-3); }
.ph-msg-avatar { display: inline-grid; flex: none; place-items: center; width: 36px; height: 36px; border-radius: var(--ph-radius-full); background: var(--ph-sand-200); color: var(--ph-text-strong); font-weight: var(--ph-fw-semibold); }
.ph-msg--staff .ph-msg-avatar { background: var(--ph-surface-inverse); color: var(--ph-text-on-ink); }
.ph-msg-who { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; gap: 0 var(--ph-space-2); min-width: 0; }
.ph-msg-name { color: var(--ph-text-strong); font-weight: var(--ph-fw-semibold); }
.ph-msg-role { color: var(--ph-text-muted); font-size: var(--ph-text-sm); }
.ph-msg-date { flex: none; color: var(--ph-text-muted); font-size: var(--ph-text-sm); }
.ph-app .ph-msg-body { padding: 0 !important; color: var(--ph-text-body); font-size: 1rem; line-height: 1.7; overflow-wrap: anywhere; }
.ph-msg-body p:last-child { margin-bottom: 0; }
.ph-msg-meta { margin: var(--ph-space-3) 0 0; color: var(--ph-text-muted); font-size: var(--ph-text-xs); }
.ph-files { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin: var(--ph-space-2) 0 0; padding: 0; list-style: none; }
.ph-file { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--ph-space-3); border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-full); background: var(--ph-surface-card); color: var(--ph-text-strong) !important; font-size: var(--ph-text-sm); text-decoration: none !important; }
.ph-file .ph-icon { width: 16px; height: 16px; }
.ph-file.is-removed { color: var(--ph-text-muted) !important; text-decoration: line-through !important; }
.ph-msg-rating { margin-top: var(--ph-space-3); }
.ph-reply { padding: var(--ph-space-6); border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-lg); background: var(--ph-surface-card); box-shadow: var(--ph-shadow-xs); }
.ph-reply-title { margin: 0 0 var(--ph-space-4); color: var(--ph-text-strong); font-size: var(--ph-text-lg); font-weight: var(--ph-fw-semibold); }
.ph-logged-in .ph-reply-who:has(#inputName:disabled) { display: none; }
.ph-reply-submit { display: flex; gap: var(--ph-space-2); }
.ph-ticket-extra .card { border-radius: var(--ph-radius-lg); }
@media (max-width: 719.98px) {
    .ph-app .ph-msg, .ph-reply { padding: var(--ph-space-4); }
    .ph-msg-head { flex-wrap: wrap; }
    .ph-msg-date { width: 100%; padding-left: 48px; margin-top: -8px; }
}

/* Ticket list: subject is the title (strong, first), department second */
.ph-app #tableTicketsList.ph-cardlist { --ph-cl-cols: 44px minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1fr) 20px; }
.ph-app #tableTicketsList.ph-cardlist tr > *:nth-child(1) { order: 2; }
.ph-app #tableTicketsList.ph-cardlist tr > *:nth-child(2) { order: 1; }
.ph-app #tableTicketsList.ph-cardlist tr > *:nth-child(4) { order: 3; }
.ph-app #tableTicketsList.ph-cardlist tr::after { order: 4; }
.ph-app #tableTicketsList.ph-cardlist td.ph-cl-main a { color: var(--ph-text-strong); font-size: var(--ph-text-base); font-weight: var(--ph-fw-semibold); border: 0 !important; padding: 0 !important; }
.ph-app #tableTicketsList.ph-cardlist td.ph-cl-main .ticket-number { display: block; color: var(--ph-text-muted); font-size: var(--ph-text-xs); font-weight: var(--ph-fw-medium); }
.ph-app #tableTicketsList.ph-cardlist td.ph-cl-main .ticket-subject.unread { font-weight: var(--ph-fw-bold, 700); }

/* 0.6.1: ticket extra panels (CC) as one quiet card, max 520px */
.ph-ticket-extra { max-width: 520px; }
.ph-ticket-extra:empty { display: none; }
.ph-ticket-extra .card-sidebar { border: 1px solid var(--ph-border-subtle); border-radius: var(--ph-radius-lg); box-shadow: var(--ph-shadow-xs); }

/* =========================================================================
   34. Domain pages (0.7.0): three actions in sight, the rest in a menu;
   SSL details out, a lock next to the domain name instead
   ========================================================================= */
.ph-app .ph-actionbar .ph-renew { border-color: var(--ph-accent) !important; background: var(--ph-accent) !important; color: var(--ph-text-on-accent) !important; font-weight: var(--ph-fw-semibold); }
.ph-app .ph-actionbar .ph-renew:hover { background: var(--ph-accent-hover) !important; }
.ph-app .ph-actionbar .ph-renew .sidebar-menu-item-icon { color: inherit; }
.ph-more { position: relative; }
.ph-more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ph-space-2);
    min-height: 38px;
    padding: 0 var(--ph-space-4);
    border: 1px solid var(--ph-border-default);
    border-radius: var(--ph-radius-full);
    background: var(--ph-surface-card);
    color: var(--ph-text-strong);
    font-size: var(--ph-text-sm);
    font-weight: var(--ph-fw-medium);
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.ph-more-btn::-webkit-details-marker { display: none; }
.ph-more-btn::after { content: ""; width: 8px; height: 8px; margin-top: -3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--ph-dur-base) var(--ph-ease); }
.ph-more[open] .ph-more-btn::after { margin-top: 3px; transform: rotate(-135deg); }
.ph-more-btn:hover { background: var(--ph-sand-100); }
.ph-more-btn:focus-visible { outline: 2px solid var(--ph-focus-ring); outline-offset: 2px; }
.ph-more.is-current .ph-more-btn { border-color: var(--ph-surface-inverse); background: var(--ph-surface-inverse); color: var(--ph-text-on-ink); }
.ph-more-menu {
    position: absolute;
    z-index: 30;
    top: calc(100% + 8px);
    left: 0;
    display: flex;
    flex-direction: column;
    min-width: 260px;
    padding: var(--ph-space-2);
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card);
    box-shadow: var(--ph-shadow-lg);
}
.ph-app .ph-actionbar .ph-more-menu .list-group-item {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100%;
    margin: 0 !important;
    padding: 10px var(--ph-space-3) !important;
    border: 0 !important;
    border-radius: var(--ph-radius-md) !important;
    background: transparent !important;
    color: var(--ph-text-body) !important;
    font-weight: var(--ph-fw-medium);
}
.ph-app .ph-actionbar .ph-more-menu .list-group-item:hover { background: var(--ph-sand-100) !important; color: var(--ph-text-strong) !important; }
.ph-app .ph-actionbar .ph-more-menu .list-group-item.active { background: var(--ph-sand-100) !important; color: var(--ph-text-strong) !important; font-weight: var(--ph-fw-semibold); }
@media (max-width: 719.98px) {
    .ph-more { flex: 1 1 100%; }
    .ph-more-btn { justify-content: center; width: 100%; }
    .ph-more-menu { right: 0; min-width: 0; }
}

/* SSL: no status/dates/issuer blocks (domain page and service page); a lock by the name */
.ph-tpl-clientareadomaindetails #tabOverview [class*="col"]:has(> img[data-type="domain"]),
.ph-tpl-clientareadomaindetails #tabOverview [class*="col"]:has(> #ssl-startdate),
.ph-tpl-clientareadomaindetails #tabOverview [class*="col"]:has(> #ssl-expirydate),
.ph-tpl-clientareadomaindetails #tabOverview [class*="col"]:has(> #ssl-issuer),
.ph-tpl-clientareaproductdetails .row:has(> [class*="col"] > img[data-type="service"]),
.ph-tpl-clientareaproductdetails .row:has(> #ssl-startdate),
.ph-tpl-clientareaproductdetails .row:has(> #ssl-expirydate),
.ph-tpl-clientareaproductdetails .row:has(> #ssl-issuer) { display: none !important; }
.ph-ssl { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: var(--ph-space-2); border-radius: var(--ph-radius-full); vertical-align: 4px; }
.ph-ssl .ph-icon { width: 18px; height: 18px; }
.ph-ssl--on { background: var(--ph-success-50); color: var(--ph-success-700); }
.ph-ssl--off { background: var(--ph-sand-100); color: var(--ph-text-muted); }

/* =========================================================================
   35. Services and domains as objects (0.8.0)
   Data (2026-10): 94% of clients have 1-2 live services, max 6; domains
   1-9. So no table, sort or filter. Cards like the dashboard, grouped by
   what the client must do; history folded. State lives in the card itself:
   tinted icon tile, words with a dot, a tinted note when action is needed,
   a top rail for attention/pending. Templates: clientareaproducts.tpl,
   clientareadomains.tpl, includes/ph-svc-card.tpl, includes/ph-dom-card.tpl
   ========================================================================= */
.ph-objs { display: flex; flex-direction: column; gap: var(--ph-space-7); }
.ph-objs-group { display: flex; flex-direction: column; gap: var(--ph-space-4); }
.ph-objs-title { display: flex; align-items: center; gap: var(--ph-space-2); margin: 0; color: var(--ph-text-strong); font-size: var(--ph-text-lg); font-weight: var(--ph-fw-semibold); }
.ph-objs-title span, .ph-history summary span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: var(--ph-radius-full); background: var(--ph-sand-100); color: var(--ph-text-muted); font-size: var(--ph-text-xs); font-weight: var(--ph-fw-semibold); }
.ph-objs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: var(--ph-space-4); }
.ph-objs-empty { margin: 0; padding: var(--ph-space-7) var(--ph-space-5); border: 1px dashed var(--ph-border-default); border-radius: var(--ph-radius-lg); color: var(--ph-text-muted); text-align: center; }

.ph-obj {
    --ph-tone: var(--ph-success-500);
    --ph-tone-bg: var(--ph-success-50);
    --ph-tone-ink: var(--ph-success-700);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--ph-space-5);
    padding: var(--ph-space-6);
    overflow: hidden;
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background: var(--ph-surface-card);
    box-shadow: var(--ph-shadow-xs);
    color: var(--ph-text-body) !important;
    text-decoration: none !important;
    transition: transform var(--ph-dur-base) var(--ph-ease), box-shadow var(--ph-dur-base) var(--ph-ease), border-color var(--ph-dur-base) var(--ph-ease);
}
.ph-obj--attention { --ph-tone: var(--ph-warning-500); --ph-tone-bg: var(--ph-warning-50); --ph-tone-ink: var(--ph-warning-700); box-shadow: inset 0 4px 0 var(--ph-tone), var(--ph-shadow-xs); }
.ph-obj--pending { --ph-tone: var(--ph-info-500); --ph-tone-bg: var(--ph-info-50); --ph-tone-ink: var(--ph-info-700); box-shadow: inset 0 4px 0 var(--ph-tone), var(--ph-shadow-xs); }
.ph-obj:hover { border-color: var(--ph-border-default); box-shadow: var(--ph-shadow-md); transform: translateY(-2px); }
.ph-obj--attention:hover, .ph-obj--pending:hover { box-shadow: inset 0 4px 0 var(--ph-tone), var(--ph-shadow-md); }
.ph-obj:focus { outline: none; }
.ph-obj:focus-visible { outline: 2px solid var(--ph-focus-ring); outline-offset: 3px; }
.ph-obj::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--ph-accent); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ph-ease); }
.ph-obj:hover::after, .ph-obj:focus-visible::after { transform: scaleX(1); }

.ph-obj-head { display: flex; align-items: flex-start; gap: var(--ph-space-4); }
.ph-obj-icon { display: inline-grid; flex: none; place-items: center; width: 56px; height: 56px; border-radius: var(--ph-radius-md); background: var(--ph-tone-bg); color: var(--ph-tone-ink); }
.ph-obj-icon .ph-icon { width: 26px; height: 26px; }
.ph-obj-id { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; padding-right: var(--ph-space-6); }
.ph-obj-kind { color: var(--ph-text-muted); font-size: var(--ph-text-eyebrow); font-weight: var(--ph-fw-semibold); letter-spacing: var(--ph-tracking-eyebrow); text-transform: uppercase; }
.ph-obj-name { color: var(--ph-text-strong); font-size: 1.1875rem; font-weight: var(--ph-fw-semibold); letter-spacing: -0.01em; line-height: 1.25; overflow-wrap: anywhere; }
.ph-obj-sub { color: var(--ph-text-muted); font-size: var(--ph-text-sm); overflow-wrap: anywhere; }
.ph-obj-arrow { position: absolute; top: var(--ph-space-6); right: var(--ph-space-6); color: var(--ph-text-muted); transition: transform var(--ph-dur-base) var(--ph-ease), color var(--ph-dur-base) var(--ph-ease); }
.ph-obj:hover .ph-obj-arrow { color: var(--ph-text-strong); transform: translate(2px, -2px); }
.ph-obj-note { padding: var(--ph-space-3) var(--ph-space-4); border-radius: var(--ph-radius-md); background: var(--ph-tone-bg); color: var(--ph-tone-ink); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); line-height: 1.45; }
.ph-obj-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: auto; padding-top: var(--ph-space-4); border-top: 1px solid var(--ph-border-subtle); }
.ph-obj-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 var(--ph-space-3); border-left: 1px solid var(--ph-border-subtle); }
.ph-obj-fact:first-child { padding-left: 0; border-left: 0; }
.ph-obj-label { color: var(--ph-text-muted); font-size: var(--ph-text-eyebrow); font-weight: var(--ph-fw-semibold); letter-spacing: var(--ph-tracking-eyebrow); text-transform: uppercase; white-space: nowrap; }
.ph-obj-val, .ph-obj .ph-state { color: var(--ph-text-strong); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); font-variant-numeric: tabular-nums; }
.ph-obj-muted { color: var(--ph-text-muted); font-weight: var(--ph-fw-regular, 400); }
.ph-rel-text { display: block; color: var(--ph-text-muted); font-size: var(--ph-text-xs); font-weight: var(--ph-fw-regular, 400); }
.ph-rel-text.is-soon { color: var(--ph-warning-700); font-weight: var(--ph-fw-semibold); }
.ph-rel-text.is-past { color: var(--ph-danger-700); }
.ph-obj--ok .ph-rel-text.is-past { color: var(--ph-text-muted); }

/* History: folded, quiet */
.ph-history { border-top: 1px solid var(--ph-border-subtle); padding-top: var(--ph-space-4); }
.ph-history summary { display: inline-flex; align-items: center; gap: var(--ph-space-2); color: var(--ph-text-muted); font-weight: var(--ph-fw-semibold); list-style: none; cursor: pointer; }
.ph-history summary::-webkit-details-marker { display: none; }
.ph-history summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform var(--ph-dur-base) var(--ph-ease); }
.ph-history[open] summary::before { transform: rotate(45deg); }
.ph-history summary:hover { color: var(--ph-text-strong); }
.ph-history-list { margin: var(--ph-space-3) 0 0; padding: 0; list-style: none; }
.ph-history-list a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ph-space-4); padding: var(--ph-space-3) var(--ph-space-2); border-bottom: 1px solid var(--ph-border-subtle); color: var(--ph-text-muted) !important; text-decoration: none !important; }
.ph-history-list a:hover { background: var(--ph-sand-50); color: var(--ph-text-strong) !important; }
.ph-history-name { overflow-wrap: anywhere; }
.ph-history-name span { margin-left: var(--ph-space-2); font-size: var(--ph-text-sm); opacity: 0.8; }
.ph-history-state { flex: none; font-size: var(--ph-text-sm); }

@media (max-width: 719.98px) {
    .ph-objs { gap: var(--ph-space-6); }
    .ph-obj { padding: var(--ph-space-5); gap: var(--ph-space-4); }
    .ph-obj-arrow { top: var(--ph-space-5); right: var(--ph-space-5); }
    .ph-obj-icon { width: 48px; height: 48px; }
    .ph-obj-facts { grid-template-columns: 1fr 1fr; row-gap: var(--ph-space-3); }
    .ph-obj-fact:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ph-obj, .ph-obj::after, .ph-obj-arrow { transition: none; }
    .ph-obj:hover { transform: none; }
}

/* 0.8.1: cards fill the row; a wide card puts its facts beside the name */
.ph-objs-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); }
.ph-obj { container-type: inline-size; }
.ph-obj-in { display: flex; flex-direction: column; gap: var(--ph-space-5); height: 100%; }
.ph-obj-label { white-space: normal; }
@container (min-width: 720px) {
    .ph-obj-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; column-gap: var(--ph-space-7); }
    .ph-obj-in > .ph-obj-head { grid-column: 1; grid-row: 1; }
    .ph-obj-in > .ph-obj-facts { grid-column: 2; grid-row: 1; margin: 0; padding: 0 var(--ph-space-8, 48px) 0 0; border-top: 0; }
    .ph-obj-in > .ph-obj-note { grid-column: 1 / -1; grid-row: 2; }
    .ph-obj-in > .ph-obj-head .ph-obj-id { padding-right: 0; }
}

/* =========================================================================
   36. Featured announcements (0.9.0) and home panels
   Hook includes/hooks/piensahost_featured.php gives {$phFeatured}: any
   published announcement titled "[Tag] Title". The newest one is a
   permanent rail item; all of them are cards on the home page.
   ========================================================================= */
.ph-feature-list { display: flex; flex-direction: column; gap: var(--ph-space-4); margin-top: var(--ph-space-4); }
.ph-feature {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--ph-space-5);
    padding: var(--ph-space-6);
    overflow: hidden;
    border: 1px solid var(--ph-border-subtle);
    border-radius: var(--ph-radius-lg);
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(255, 113, 58, 0.10) 0%, rgba(255, 113, 58, 0) 55%),
        var(--ph-surface-card);
    box-shadow: var(--ph-shadow-xs);
}
.ph-feature-icon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: var(--ph-radius-md); background: var(--ph-surface-inverse); color: var(--ph-accent); }
.ph-feature-icon .ph-icon { width: 26px; height: 26px; }
.ph-feature-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ph-feature-tag { display: inline-flex; align-items: center; gap: var(--ph-space-2); color: var(--ph-accent-ink, #C44A1E); font-size: var(--ph-text-eyebrow); font-weight: var(--ph-fw-semibold); letter-spacing: var(--ph-tracking-eyebrow); text-transform: uppercase; }
.ph-feature-tag::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--ph-accent); }
.ph-feature-title { margin: 0; color: var(--ph-text-strong); font-size: 1.25rem; font-weight: var(--ph-fw-semibold); letter-spacing: -0.01em; line-height: 1.25; }
.ph-feature-text { margin: 0; color: var(--ph-text-body); font-size: var(--ph-text-sm); line-height: 1.55; }
.ph-feature-actions { display: flex; flex-direction: column; gap: var(--ph-space-2); }
.ph-feature-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--ph-space-2);
    min-height: 42px; padding: 0 var(--ph-space-5);
    border: 1px solid var(--ph-border-default); border-radius: var(--ph-radius-full);
    background: var(--ph-surface-card); color: var(--ph-text-strong) !important;
    font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); white-space: nowrap; text-decoration: none !important;
}
.ph-feature-btn:hover { background: var(--ph-sand-100); }
.ph-feature-btn .ph-icon { width: 16px; height: 16px; }
.ph-feature-btn--primary { border-color: var(--ph-accent); background: var(--ph-accent); color: var(--ph-text-on-accent) !important; font-weight: var(--ph-fw-semibold); }
.ph-feature-btn--primary:hover { border-color: var(--ph-accent-hover); background: var(--ph-accent-hover); }
@media (max-width: 719.98px) {
    .ph-feature { grid-template-columns: auto minmax(0, 1fr); padding: var(--ph-space-5); }
    .ph-feature-actions { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
    .ph-feature-btn { flex: 1 1 auto; }
}

/* Rail item for the featured announcement: same shape, flame icon */
.ph-rail-item--feature { margin-top: var(--ph-space-4); padding-top: var(--ph-space-4); border-top: 1px solid var(--ph-border-on-ink); }
.ph-rail-item--feature .ph-rail-icon { color: var(--ph-accent); }

/* WHMCS home panels kept (quick logins, domains expiring soon, module panels) */
.ph-home-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: var(--ph-space-4); margin-top: var(--ph-space-6); }
.ph-app .ph-home-panels .card { margin: 0; overflow: hidden; border: 1px solid var(--ph-border-subtle) !important; border-radius: var(--ph-radius-lg) !important; box-shadow: var(--ph-shadow-xs); }
.ph-app .ph-home-panels .card-header { padding: var(--ph-space-4) var(--ph-space-5); border: 0; border-bottom: 1px solid var(--ph-border-subtle); background: transparent !important; }
.ph-app .ph-home-panels .card-title { color: var(--ph-text-strong); font-size: var(--ph-text-base); font-weight: var(--ph-fw-semibold); }
.ph-app .ph-home-panels .card-title .badge { background: var(--ph-sand-100); color: var(--ph-text-muted); font-weight: var(--ph-fw-semibold); }
.ph-app .ph-home-panels .list-group-item { padding: var(--ph-space-3) var(--ph-space-5); border-color: var(--ph-border-subtle); }
.ph-app .ph-home-panels .card-footer { border-top: 1px solid var(--ph-border-subtle); background: transparent; }
.ph-app .ph-home-panels .card-footer:empty { display: none; }
/* No badges: panel labels read as quiet status text */
.ph-app .ph-home-panels .label { display: inline; padding: 0; border: 0; border-radius: 0; background: none !important; color: var(--ph-text-muted); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-medium); }
.ph-app .ph-home-panels .label-placeholder { display: none; }
.ph-app .ph-home-panels .label-success { color: var(--ph-success-700, #1F6B4F); }
.ph-app .ph-home-panels .label-warning { color: var(--ph-warning-700, #8A5A00); }
.ph-app .ph-home-panels .label-danger { color: var(--ph-danger-700, #9E3329); }
.ph-app .ph-home-panels .label-info { color: var(--ph-info-700, #355A78); }

/* =========================================================================
   37. Announcements (0.9.0): reading page like the knowledge base
   Tag as eyebrow, link-only paragraphs as buttons, numbered steps.
   ========================================================================= */
.ph-ann .ph-kb-meta { gap: var(--ph-space-4); }
.ph-ann .ph-kb-meta .ph-feature-tag { margin-right: var(--ph-space-2); }
.ph-ann-cta { display: flex; flex-wrap: wrap; gap: var(--ph-space-2); margin: var(--ph-space-5) 0 var(--ph-space-6) !important; }
.ph-ann-body .ph-feature-btn { min-height: 46px; padding: 0 var(--ph-space-6); font-size: var(--ph-text-base); }
.ph-ann-body > .ph-ann-cta:last-child { margin-bottom: 0 !important; padding-top: var(--ph-space-5); border-top: 1px solid var(--ph-border-subtle); }
.ph-ann-body ol { padding: 0; list-style: none; counter-reset: ph-step; }
.ph-ann-body ol > li { position: relative; margin-bottom: var(--ph-space-3); padding-left: 44px; counter-increment: ph-step; }
.ph-ann-body ol > li::before { content: counter(ph-step); position: absolute; top: 1px; left: 0; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ph-surface-inverse); color: var(--ph-text-on-ink); font-family: var(--ph-font-mono); font-size: var(--ph-text-sm); font-weight: var(--ph-fw-semibold); line-height: 1; }
.ph-ann-body ul { padding-left: 1.2em; }
.ph-ann-body ul > li { margin-bottom: var(--ph-space-2); }
.ph-ann-body ul > li::marker { color: var(--ph-accent); }
.ph-ann-body h3 { padding-top: var(--ph-space-5); border-top: 1px solid var(--ph-border-subtle); }
.ph-ann-body em { color: var(--ph-text-muted); }
.ph-ann-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ph-space-3); color: var(--ph-text-muted); font-size: var(--ph-text-sm); }
.ph-rail-item--feature.is-current .ph-rail-link { color: var(--ph-text-on-ink); }
@media (max-width: 719.98px) {
    .ph-ann-cta .ph-feature-btn { flex: 1 1 100%; }
    .ph-feature-icon { align-self: start; }
}

/* Motion preference */
@media (prefers-reduced-motion: reduce) {
    .ph-app *, .ph-app *::before, .ph-app *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }
}