/* Kovan client panel components (pn-*): service detail, support, security, billing screens.
   Builds on kovan.css tokens and the --s-* surface tokens from site.css. */

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pn-mono { font-family: var(--k-font-mono); letter-spacing: .02em; }
.pn-muted { color: var(--k-text-muted); }
.pn-eyebrow { display: block; font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-muted); }
.pn-mobile-only { display: none; }
@media (max-width: 720px), (pointer: coarse) { .pn-mobile-only { display: inline-flex; } }

/* ------------------------------------------------------------- Cards */
.pn-stack { display: grid; gap: 16px; align-content: start; min-width: 0; }
.pn-card { position: relative; display: grid; gap: 16px; align-content: start; padding: 22px 24px; border: 1px solid var(--s-card-border); border-radius: var(--s-radius-xl); background: var(--s-card-bg); box-shadow: var(--s-shadow-card); min-width: 0; }
.pn-card-head { display: flex; align-items: flex-start; gap: 14px; }
.pn-card-head > div { display: grid; gap: 3px; min-width: 0; flex: 1; }
.pn-card-head h2, .pn-card-head h3 { margin: 0; font-size: 1.02rem; font-weight: 730; letter-spacing: -0.015em; }
.pn-card-head p { margin: 0; color: var(--k-text-muted); font-size: .87rem; line-height: 1.5; }
.pn-card-head .text-link { margin-inline-start: auto; font-size: .84rem; white-space: nowrap; align-self: center; }
.pn-card-sep { padding-bottom: 14px; border-bottom: 1px solid var(--k-border); }
.pn-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--k-primary-soft); color: var(--k-primary-text); }
.pn-ico-warn { background: var(--k-warning-bg); color: var(--k-warning-text); }
.pn-ico-danger { background: var(--k-danger-bg); color: var(--k-danger-text); }
.pn-ico-ok { background: var(--k-success-bg); color: var(--k-success-text); }
.pn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-actions-end { justify-content: flex-end; }
.pn-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.pn-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pn-danger { overflow: hidden; border-color: color-mix(in srgb, var(--k-danger) 35%, var(--s-card-border)); }
.pn-danger::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--k-danger); opacity: .75; }
@media (max-width: 980px) { .pn-grid-2, .pn-grid-3 { grid-template-columns: minmax(0, 1fr); } }

/* Key/value rows */
.pn-kv { display: grid; gap: 0; margin: 0; }
.pn-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px dashed var(--k-border); min-width: 0; }
.pn-kv > div:last-child { border-bottom: 0; }
.pn-kv dt { color: var(--k-text-muted); font-size: .86rem; flex: none; }
.pn-kv dd { margin: 0; display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 620; font-size: .92rem; text-align: end; overflow-wrap: anywhere; }
.pn-kv-sm > div { padding: 7px 0; }
.pn-kv-sm dt, .pn-kv-sm dd { font-size: .8rem; }

/* Copyable / secret value */
.pn-secret { display: flex; align-items: center; gap: 4px; min-width: 0; padding: 4px 4px 4px 12px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: color-mix(in srgb, var(--k-surface-2) 70%, var(--k-surface)); }
.pn-secret code, .pn-secret .pn-val { flex: 1; min-width: 0; font-family: var(--k-font-mono); font-size: .9rem; font-weight: 600; letter-spacing: .04em; overflow-wrap: anywhere; background: none; padding: 0; }
.pn-secret .icon-btn { width: 32px; height: 32px; flex: none; }
.pn-val-masked { letter-spacing: .2em; }
[data-copy-target].is-copied, [data-copy-value].is-copied { color: var(--k-success-text); }
.pn-copy-tip { position: fixed; z-index: 90; padding: .3rem .6rem; border-radius: 6px; background: var(--k-text); color: var(--k-surface); font-size: .76rem; font-weight: 650; pointer-events: none; animation: fade-up 160ms ease-out; }

/* ---------------------------------------------------- Status hero */
.pn-status-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 24px 26px; border: 1px solid var(--s-card-border); border-radius: var(--s-radius-xl); background: var(--s-card-bg); box-shadow: var(--s-shadow-card); }
.pn-status-hero::after { content: ""; position: absolute; inset: auto -60px -90px auto; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, var(--pn-tone-glow, transparent), transparent 70%); pointer-events: none; }
.pn-status-hero.is-ok { --pn-tone: var(--k-success-text); --pn-tone-bg: var(--k-success-bg); --pn-tone-glow: color-mix(in srgb, var(--k-success-bg) 90%, transparent); }
.pn-status-hero.is-off { --pn-tone: var(--k-warning-text); --pn-tone-bg: var(--k-warning-bg); --pn-tone-glow: color-mix(in srgb, var(--k-warning-bg) 90%, transparent); }
.pn-status-shield { position: relative; display: grid; place-items: center; flex: none; width: 60px; height: 60px; border-radius: 18px; background: var(--pn-tone-bg); color: var(--pn-tone); box-shadow: 0 0 0 7px color-mix(in srgb, var(--pn-tone-bg) 45%, transparent); }
.pn-status-shield .ico { width: 30px; height: 30px; }
.pn-status-body { position: relative; z-index: 1; display: grid; gap: 3px; min-width: 0; flex: 1; }
.pn-status-body h2 { margin: 0; font-size: 1.3rem; font-weight: 760; letter-spacing: -0.02em; }
.pn-status-body p { margin: 0; color: var(--k-text-muted); font-size: .92rem; }
.pn-status-stat { position: relative; z-index: 1; display: grid; justify-items: end; gap: 0; padding-inline-start: 22px; border-inline-start: 1px solid var(--k-border); }
.pn-status-stat strong { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.pn-status-stat span { font-size: .78rem; color: var(--k-text-muted); }
@media (max-width: 560px) {
    .pn-status-hero { flex-wrap: wrap; padding: 20px; }
    .pn-status-stat { justify-items: start; padding: 12px 0 0; border: 0; border-top: 1px solid var(--k-border); width: 100%; }
}

/* ---------------------------------------------------- 2FA setup */
.pn-setup { padding: 8px 24px; }
.pn-steps { list-style: none; margin: 0; padding: 0; display: grid; }
.pn-step { position: relative; display: flex; gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--k-border); }
.pn-step:last-child { border-bottom: 0; }
.pn-step-num { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--k-primary); background-image: var(--k-gradient); color: var(--k-primary-contrast); font-weight: 780; font-size: .92rem; box-shadow: 0 0 0 5px var(--k-primary-soft); }
.pn-step-body { display: grid; gap: 10px; min-width: 0; flex: 1; }
.pn-step-body h3 { margin: 4px 0 0; font-size: 1.02rem; font-weight: 720; }
.pn-step-body > p { margin: 0; color: var(--k-text-muted); font-size: .9rem; line-height: 1.55; }
.pn-app-chips { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pn-app-chips li { padding: .3rem .7rem; border: 1px solid var(--k-border); border-radius: 999px; background: var(--k-surface); font-size: .8rem; font-weight: 620; }
.pn-qr-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 22px; margin-top: 4px; }
.pn-qr { flex: none; padding: 12px; border-radius: 16px; background: #fff; border: 1px solid var(--k-border); box-shadow: 0 10px 30px -18px rgb(15 23 42 / .45); line-height: 0; }
.pn-qr svg { display: block; width: 184px; height: 184px; }
.pn-qr .qr-code path, .pn-qr svg path { fill: #0f172a; }
.pn-qr-side { display: grid; gap: 10px; align-content: start; min-width: min(100%, 240px); flex: 1; }
.pn-otp-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.pn-otp { width: 11.5rem; min-height: 48px; font-family: var(--k-font-mono); font-size: 1.35rem; font-weight: 700; letter-spacing: .3em; text-align: center; }
.pn-otp-form .k-btn { min-height: 48px; }

.pn-codes { border-color: color-mix(in srgb, var(--k-warning-text) 35%, var(--s-card-border)); background: linear-gradient(160deg, color-mix(in srgb, var(--k-warning-bg) 55%, var(--k-surface)) 0%, var(--s-card-bg) 55%); }
.pn-code-grid { list-style: none; counter-reset: code; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.pn-code-grid li { counter-increment: code; display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px dashed var(--k-border-strong); border-radius: var(--k-radius); background: var(--k-surface); }
.pn-code-grid li::before { content: counter(code, decimal-leading-zero); font-size: .7rem; font-weight: 700; color: var(--k-text-muted); }
.pn-code-grid code { font-size: .92rem; font-weight: 650; letter-spacing: .06em; background: none; padding: 0; }

.pn-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 10px; }
.pn-tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--k-radius-lg); background: var(--k-surface-2); color: var(--k-text-muted); font-size: .84rem; line-height: 1.5; }
.pn-tip .ico { flex: none; margin-top: 2px; color: var(--k-primary-text); }

@media print {
    body * { visibility: hidden; }
    #recovery-codes, #recovery-codes * { visibility: visible; }
    #recovery-codes { position: absolute; inset: 0 auto auto 0; width: 100%; box-shadow: none; }
    #recovery-codes .pn-actions { display: none; }
}

/* ---------------------------------------------------- Status pills & alerts */
.pn-pill { display: inline-flex; align-items: center; gap: .4rem; padding: .22rem .65rem; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: var(--k-surface-2); color: var(--k-text-muted); }
.pn-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 20%, transparent); }
.pn-pill.is-ok { background: var(--k-success-bg); color: var(--k-success-text); }
.pn-pill.is-warn { background: var(--k-warning-bg); color: var(--k-warning-text); }
.pn-pill.is-danger { background: var(--k-danger-bg); color: var(--k-danger-text); }
.pn-pill.is-info { background: var(--k-primary-soft); color: var(--k-primary-text); }
.pn-pill-sm { padding: .14rem .5rem; font-size: .7rem; }
.pn-pill-sm i { width: 6px; height: 6px; }
.pn-alert { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--k-border); border-radius: var(--s-radius-lg); background: var(--k-surface); }
.pn-alert > .ico { flex: none; }
.pn-alert > div { display: grid; gap: 1px; flex: 1; min-width: 0; font-size: .9rem; }
.pn-alert > div span { color: var(--k-text-muted); font-size: .84rem; }
.pn-alert .k-btn { flex: none; }
.pn-alert.is-warn { border-color: color-mix(in srgb, var(--k-warning-text) 30%, var(--k-border)); background: color-mix(in srgb, var(--k-warning-bg) 60%, var(--k-surface)); }
.pn-alert.is-warn > .ico { color: var(--k-warning-text); }
.pn-alert.is-danger { border-color: color-mix(in srgb, var(--k-danger) 35%, var(--k-border)); background: color-mix(in srgb, var(--k-danger-bg) 60%, var(--k-surface)); }
.pn-alert.is-danger > .ico { color: var(--k-danger-text); }
@media (max-width: 560px) { .pn-alert { flex-wrap: wrap; } }

/* ---------------------------------------------------- Service hero */
.pn-svc-hero { position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 24px 26px; border: 1px solid var(--s-card-border); border-radius: var(--s-radius-xl); background: radial-gradient(520px circle at 0% 0%, color-mix(in srgb, var(--k-primary) 12%, transparent), transparent 60%), var(--s-card-bg); box-shadow: var(--s-shadow-card); }
.pn-svc-hero::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--k-gradient); }
.pn-svc-type { display: grid; place-items: center; flex: none; width: 64px; height: 64px; border-radius: 18px; background: var(--k-primary); background-image: var(--k-gradient); color: var(--k-primary-contrast); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--k-primary) 80%, transparent); }
.pn-svc-type .ico { width: 30px; height: 30px; }
.pn-svc-id { display: grid; gap: 5px; min-width: 0; flex: 1; }
.pn-svc-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-svc-num, .pn-svc-kind { font-size: .78rem; font-weight: 650; color: var(--k-text-muted); }
.pn-svc-kind::before { content: "·"; margin-inline-end: 8px; }
.pn-svc-id h2 { margin: 0; font-size: clamp(1.3rem, 2.2vw, 1.6rem); font-weight: 780; letter-spacing: -0.025em; line-height: 1.15; }
.pn-svc-domain { display: inline-flex; align-items: center; gap: .4rem; width: fit-content; max-width: 100%; color: var(--k-text-muted); font-size: .92rem; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.pn-svc-domain:hover { color: var(--k-primary-text); }
.pn-svc-domain .ico:last-child { opacity: .6; }
.pn-svc-cta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; max-width: 58%; }
@media (max-width: 1100px) {
    .pn-svc-hero { flex-wrap: wrap; }
    .pn-svc-cta { max-width: none; width: 100%; justify-content: flex-start; padding-top: 14px; border-top: 1px solid var(--k-border); }
}
@media (max-width: 480px) { .pn-svc-type { width: 52px; height: 52px; border-radius: 15px; } .pn-svc-cta .k-btn, .pn-svc-cta form { flex: 1 1 100%; } .pn-svc-cta .k-btn { width: 100%; } }

/* ---------------------------------------------------- KPI tiles */
.pn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 14px; }
.pn-tile { position: relative; overflow: hidden; display: grid; gap: 3px; align-content: start; padding: 16px 18px; border: 1px solid var(--s-card-border); border-radius: var(--s-radius-lg); background: var(--s-card-bg); box-shadow: var(--s-shadow-card); min-width: 0; }
.pn-tile-ico { display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 6px; border-radius: 9px; background: var(--k-primary-soft); color: var(--k-primary-text); }
.pn-tile-label { font-size: .74rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--k-text-muted); }
.pn-tile-value { font-size: 1.22rem; font-weight: 780; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pn-tile-mono { font-family: var(--k-font-mono); font-size: 1.02rem; letter-spacing: 0; }
.pn-tile-sub { font-size: .8rem; color: var(--k-text-muted); overflow-wrap: anywhere; }
.pn-tile-bar { display: block; height: 5px; margin-top: 8px; border-radius: 999px; background: var(--k-surface-2); overflow: hidden; }
.pn-tile-bar b { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: var(--k-gradient); animation: grow 900ms var(--s-ease) both; }
.pn-tile.is-warn { border-color: color-mix(in srgb, var(--k-warning-text) 40%, var(--s-card-border)); }
.pn-tile.is-warn .pn-tile-ico { background: var(--k-warning-bg); color: var(--k-warning-text); }
.pn-tile.is-warn .pn-tile-bar b { background: var(--k-warning-text); }
.pn-neg { color: var(--k-danger-text); font-weight: 650; }

/* ---------------------------------------------------- Detail layout */
.pn-detail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.pn-detail-main, .pn-detail-side { display: grid; gap: 18px; min-width: 0; }
.pn-detail-side { position: sticky; top: 88px; }
@media (max-width: 1180px) { .pn-detail { grid-template-columns: minmax(0, 1fr); } .pn-detail-side { position: static; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); } }

.icon-btn.pn-copy { width: 30px; height: 30px; flex: none; color: var(--k-text-muted); }
.icon-btn.pn-copy:hover { color: var(--k-primary-text); }
.pn-copy:not(.icon-btn) { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-text); font: inherit; font-size: .82rem; font-weight: 620; cursor: pointer; white-space: nowrap; transition: border-color var(--k-transition), color var(--k-transition); }
.pn-copy:not(.icon-btn):hover { border-color: var(--k-primary); color: var(--k-primary-text); }
.pn-kv code.pn-val { padding: .15rem .45rem; border-radius: 6px; background: var(--k-surface-2); font-size: .84rem; }
.pn-ns { display: grid; gap: 8px; padding-top: 4px; }
.pn-ns ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 8px; }
.pn-ns li { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: color-mix(in srgb, var(--k-surface-2) 55%, var(--k-surface)); min-width: 0; }
.pn-ns li span { font-size: .68rem; font-weight: 800; color: var(--k-primary-text); }
.pn-ns li code { flex: 1; min-width: 0; font-size: .84rem; background: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pn-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 18px; }
.pn-meter { display: grid; gap: 8px; --pn-meter: var(--k-gradient); }
.pn-meter-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .86rem; font-weight: 620; }
.pn-meter-head span { display: inline-flex; align-items: center; gap: .4rem; color: var(--k-text-muted); }
.pn-meter-head strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.pn-meter-bar { display: block; height: 9px; border-radius: 999px; background: var(--k-surface-2); overflow: hidden; }
.pn-meter-bar b { display: block; width: var(--w, 0%); height: 100%; border-radius: inherit; background: var(--pn-meter); animation: grow 900ms var(--s-ease) both; }
.pn-meter-foot { font-size: .78rem; color: var(--k-text-muted); font-variant-numeric: tabular-nums; }
.pn-meter.is-warn { --pn-meter: #f59e0b; }
.pn-meter.is-danger { --pn-meter: var(--k-danger); }

.pn-power { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pn-power form { display: contents; }
.pn-power-btn { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border: 1px solid var(--k-border); border-radius: var(--s-radius-lg); background: var(--k-surface); color: var(--k-text); font: inherit; font-size: .86rem; font-weight: 650; cursor: pointer; transition: border-color 140ms, background-color 140ms, transform 140ms; }
.pn-power-btn span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--k-primary-soft); color: var(--k-primary-text); }
.pn-power-btn.is-ok span { background: var(--k-success-bg); color: var(--k-success-text); }
.pn-power-btn.is-danger span { background: var(--k-danger-bg); color: var(--k-danger-text); }
.pn-power-btn:hover { border-color: var(--k-primary); transform: translateY(-1px); }
.pn-power-btn.is-danger:hover { border-color: var(--k-danger); }

.pn-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.pn-specs li { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--k-radius); background: var(--k-surface-2); }
.pn-specs span { font-size: .76rem; color: var(--k-text-muted); }
.pn-specs strong { font-size: .94rem; font-weight: 680; }

.pn-upgrades { display: grid; gap: 10px; }
.pn-upgrade { display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--k-border); border-radius: var(--s-radius-lg); background: var(--k-surface); transition: border-color 140ms, box-shadow 140ms; }
.pn-upgrade:hover { border-color: var(--k-primary); box-shadow: 0 0 0 3px var(--k-primary-soft); }
.pn-upgrade-main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pn-upgrade-main strong { font-weight: 720; }
.pn-upgrade-main span, .pn-upgrade-due small { font-size: .8rem; color: var(--k-text-muted); }
.pn-upgrade-due { display: grid; justify-items: end; gap: 1px; }
.pn-upgrade-due strong { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .pn-upgrade { flex-wrap: wrap; } .pn-upgrade-due { justify-items: start; } }

/* Foldable card (<details class="pn-card pn-fold">) */
.pn-fold > summary { list-style: none; cursor: pointer; align-items: center; }
.pn-fold > summary::-webkit-details-marker { display: none; }
.pn-fold-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--k-surface-2); color: var(--k-text-muted); transition: transform 180ms var(--s-ease); }
.pn-fold[open] .pn-fold-ico { transform: rotate(180deg); }
.pn-fold-body { display: grid; gap: 12px; padding-top: 14px; border-top: 1px solid var(--k-border); }
.pn-danger-soft summary h3 { color: var(--k-danger-text); }
.pn-radio { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--k-border); border-radius: var(--k-radius); cursor: pointer; }
.pn-radio:has(input:checked) { border-color: var(--k-danger); background: color-mix(in srgb, var(--k-danger-bg) 45%, var(--k-surface)); }
.pn-radio input { margin-top: 3px; accent-color: var(--k-danger); }
.pn-radio span { display: grid; gap: 1px; }
.pn-radio strong { font-size: .86rem; }
.pn-radio small { font-size: .76rem; color: var(--k-text-muted); }

/* Side lists */
.pn-quick { gap: 4px; padding: 16px; }
.pn-quick .pn-eyebrow { padding: 0 8px 6px; }
.pn-quick form { display: contents; }
.pn-quick a, .pn-quick button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; border: 0; border-radius: var(--k-radius); background: none; color: var(--k-text); font: inherit; font-size: .88rem; font-weight: 600; text-align: start; text-decoration: none; cursor: pointer; transition: background-color 140ms; }
.pn-quick a > .ico:first-child, .pn-quick button > .ico:first-child { color: var(--k-primary-text); }
.pn-quick span { flex: 1; }
.pn-quick .pn-chev { transform: rotate(-90deg); color: var(--k-text-muted); opacity: .6; }
[dir="rtl"] .pn-quick .pn-chev { transform: rotate(90deg); }
.pn-quick a:hover, .pn-quick button:hover { background: var(--k-surface-2); }
.pn-list { list-style: none; margin: -6px 0; padding: 0; display: grid; }
.pn-list li + li { border-top: 1px solid var(--k-border); }
.pn-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 8px; margin-inline: -8px; border-radius: var(--k-radius); color: var(--k-text); text-decoration: none; transition: background-color 140ms; }
.pn-list a:hover { background: var(--k-surface-2); }
.pn-list-main { display: grid; gap: 1px; min-width: 0; }
.pn-list-main strong { font-size: .87rem; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-list-main small { font-size: .75rem; color: var(--k-text-muted); }
.pn-list-end { display: grid; justify-items: end; gap: 3px; flex: none; }
.pn-list-end b { font-size: .84rem; font-variant-numeric: tabular-nums; }
.pn-list-end .k-badge { font-size: .68rem; }
.pn-empty-line { margin: 0; color: var(--k-text-muted); font-size: .86rem; }

/* Provisioning timeline */
.pn-track { list-style: none; margin: 0; padding: 0; display: grid; }
.pn-track li { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.pn-track li:last-child { padding-bottom: 0; }
.pn-track li:not(:last-child)::before { content: ""; position: absolute; inset: 32px auto 2px 15px; width: 2px; border-radius: 2px; background: var(--k-border); }
[dir="rtl"] .pn-track li:not(:last-child)::before { inset: 32px 15px 2px auto; }
.pn-track li.is-done:not(:last-child)::before { background: var(--k-success-text); opacity: .5; }
.pn-track li > span { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--k-border); background: var(--k-surface); color: var(--k-text-muted); font-size: .84rem; font-weight: 750; }
.pn-track li.is-done > span { border-color: transparent; background: var(--k-success-bg); color: var(--k-success-text); }
.pn-track li.is-current > span { border-color: var(--k-primary); color: var(--k-primary-text); box-shadow: 0 0 0 5px var(--k-primary-soft); }
.pn-track li > div { display: grid; gap: 3px; justify-items: start; padding-top: 4px; }
.pn-track strong { font-size: .92rem; font-weight: 700; }
.pn-track li:not(.is-done):not(.is-current) strong { color: var(--k-text-muted); }
.pn-track small { font-size: .82rem; color: var(--k-text-muted); line-height: 1.5; }
.pn-track .k-btn { margin-top: 6px; }

/* ---------------------------------------------------- Toolbars, segmented filters, search */
.pn-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
form.pn-toolbar { justify-content: flex-start; }
form.pn-toolbar .pn-search { flex: 1 1 220px; max-width: 320px; }
form.pn-toolbar select.k-input, form.pn-toolbar .k-select { width: auto; min-width: 180px; }
.pn-toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-toolbar-filters .k-select { width: auto; min-width: 125px; min-height: 38px; padding-block: 6px; font-size: .84rem; }
.pn-toolbar-filters .pn-search { width: 200px; }
.pn-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 4px; border: 1px solid var(--k-border); border-radius: 12px; background: var(--k-surface-2); }
.pn-seg > button, .pn-seg > label { display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: 0 .85rem; border: 0; border-radius: 9px; background: none; color: var(--k-text-muted); font: inherit; font-size: .84rem; font-weight: 650; cursor: pointer; transition: background-color 140ms, color 140ms, box-shadow 140ms; }
.pn-seg > button span { min-width: 1.4rem; padding: 0 .35rem; border-radius: 999px; background: color-mix(in srgb, var(--k-text-muted) 14%, transparent); font-size: .72rem; text-align: center; font-variant-numeric: tabular-nums; }
.pn-seg > button:hover, .pn-seg > label:hover { color: var(--k-text); }
.pn-seg > button[aria-selected="true"], .pn-seg > label:has(input:checked) { background: var(--k-surface); color: var(--k-text); box-shadow: 0 1px 2px rgb(15 23 42 / .08), 0 0 0 1px var(--k-border); }
.pn-seg > button[aria-selected="true"] span { background: var(--k-primary); color: var(--k-primary-contrast); }
.pn-seg-radio { display: flex; flex-wrap: nowrap; }
.pn-seg-radio > label { padding: 0 .5rem; min-height: 38px; }
.pn-seg-radio > label { flex: 1; justify-content: center; }
.pn-seg-radio input { position: absolute; opacity: 0; pointer-events: none; }
.pn-seg-radio > label:has(input:focus-visible) { box-shadow: var(--k-focus); }
.pn-seg-radio span { display: inline-flex; align-items: center; gap: .4rem; }
.pn-search { display: flex; align-items: center; gap: 8px; min-width: min(100%, 280px); padding: 0 12px; border: 1px solid var(--k-border-strong); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-text-muted); transition: border-color 140ms, box-shadow 140ms; }
.pn-search:focus-within { border-color: var(--k-primary); box-shadow: var(--k-focus); }
.pn-search input { flex: 1; min-width: 0; min-height: 40px; border: 0; background: none; color: var(--k-text); font: inherit; font-size: .9rem; outline: none; }
.pn-prio-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--k-text-muted); }
.pn-prio-dot.is-low { background: #94a3b8; }
.pn-prio-dot.is-medium { background: #3b82f6; }
.pn-prio-dot.is-high { background: var(--k-danger); }
.ico-xs { width: 13px; height: 13px; }

/* ---------------------------------------------------- Row list (tickets, services…) */
.pn-rows-wrap { border: 1px solid var(--s-card-border); border-radius: var(--s-radius-xl); background: var(--s-card-bg); box-shadow: var(--s-shadow-card); overflow: hidden; }
.pn-rows { list-style: none; margin: 0; padding: 0; }
.pn-rows > li + li { border-top: 1px solid var(--k-border); }
.pn-rows > li[hidden] { display: none; }
.pn-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 20px; color: var(--k-text); text-decoration: none; transition: background-color 140ms; }
.pn-row::before { content: ""; position: absolute; inset: 12px auto 12px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--pn-row-tone, transparent); }
[dir="rtl"] .pn-row::before { inset: 12px 0 12px auto; border-radius: 3px 0 0 3px; }
.pn-row:hover { background: color-mix(in srgb, var(--k-surface-2) 60%, transparent); }
li.is-warn { --pn-row-tone: var(--k-warning-text); --pn-row-bg: var(--k-warning-bg); }
li.is-ok { --pn-row-tone: var(--k-success-text); --pn-row-bg: var(--k-success-bg); }
li.is-danger { --pn-row-tone: var(--k-danger); --pn-row-bg: var(--k-danger-bg); }
li.is-muted { --pn-row-tone: transparent; --pn-row-bg: var(--k-surface-2); }
.pn-row-ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; background: var(--pn-row-bg, var(--k-surface-2)); color: var(--pn-row-tone, var(--k-text-muted)); }
li.is-muted .pn-row-ico { color: var(--k-text-muted); }
.pn-row-main { display: grid; gap: 4px; min-width: 0; flex: 1; }
.pn-row-main > strong { font-size: .95rem; font-weight: 680; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
li.is-muted .pn-row-main > strong { color: var(--k-text-muted); font-weight: 600; }
.pn-row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; font-size: .79rem; color: var(--k-text-muted); }
.pn-row-meta > span { display: inline-flex; align-items: center; gap: .3rem; }
.pn-prio { padding: 0 .45rem; border-radius: 999px; background: var(--k-danger-bg); color: var(--k-danger-text); font-weight: 700; font-size: .7rem; }
.pn-row-end { display: grid; justify-items: end; gap: 4px; flex: none; }
.pn-row-end time, .pn-row-end small { font-size: .76rem; color: var(--k-text-muted); font-variant-numeric: tabular-nums; }
.pn-row-end b { font-size: .95rem; font-variant-numeric: tabular-nums; }
.pn-row-chev { flex: none; color: var(--k-text-muted); opacity: .5; transform: rotate(-90deg); }
[dir="rtl"] .pn-row-chev { transform: rotate(90deg); }
.pn-filter-empty { display: flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; padding: 28px; color: var(--k-text-muted); font-size: .9rem; }
.pn-filter-empty[hidden] { display: none; }
@media (max-width: 640px) {
    .pn-row { padding: 14px 14px; gap: 12px; flex-wrap: wrap; }
    .pn-row-end { grid-auto-flow: column; justify-items: start; align-items: center; gap: 10px; width: 100%; padding-inline-start: 50px; }
    .pn-row-chev { display: none; }
}

.pn-empty { display: grid; justify-items: center; gap: 10px; padding: clamp(36px, 6vw, 64px) 24px; border: 1px dashed var(--k-border-strong); border-radius: var(--s-radius-xl); background: var(--s-card-bg); text-align: center; }
.pn-empty-art { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 6px; border-radius: 22px; background: var(--k-primary-soft); color: var(--k-primary-text); box-shadow: 0 0 0 10px color-mix(in srgb, var(--k-primary-soft) 50%, transparent); }
.pn-empty-art .ico { width: 32px; height: 32px; }
.pn-empty h2 { margin: 0; font-size: 1.2rem; font-weight: 750; }
.pn-empty p { margin: 0 0 8px; max-width: 32rem; color: var(--k-text-muted); }

.pn-help-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.pn-help-strip a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--k-border); border-radius: var(--s-radius-lg); background: var(--k-surface); color: var(--k-text); text-decoration: none; transition: border-color 140ms, transform 140ms; }
.pn-help-strip a:hover { border-color: var(--k-primary); transform: translateY(-1px); }
.pn-help-strip a > span:last-child { display: grid; gap: 1px; min-width: 0; }
.pn-help-strip strong { font-size: .88rem; }
.pn-help-strip small { font-size: .77rem; color: var(--k-text-muted); }
@media (max-width: 860px) { .pn-help-strip { grid-template-columns: minmax(0, 1fr); } }

/* ---------------------------------------------------- Ticket conversation */
.pn-tk-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.pn-tk-title { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.pn-tk-title h2 { margin: 0; font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 770; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pn-tk-title p { margin: 0; color: var(--k-text-muted); font-size: .88rem; }

.pn-chat { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.pn-chat-day { display: flex; align-items: center; gap: 12px; color: var(--k-text-muted); font-size: .74rem; font-weight: 700; letter-spacing: .04em; }
.pn-chat-day::before, .pn-chat-day::after { content: ""; flex: 1; height: 1px; background: var(--k-border); }
.pn-msg { display: flex; align-items: flex-start; gap: 12px; }
.pn-msg.is-client { flex-direction: row-reverse; }
.pn-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; font-size: .9rem; font-weight: 780; }
.pn-msg.is-staff .pn-avatar { background: var(--k-primary); background-image: var(--k-gradient); color: var(--k-primary-contrast); }
.pn-msg.is-client .pn-avatar { background: var(--k-surface-2); color: var(--k-text); border: 1px solid var(--k-border); }
.pn-bubble { display: grid; gap: 10px; max-width: min(100%, 640px); min-width: 0; padding: 14px 18px; border: 1px solid var(--s-card-border); border-radius: 6px 18px 18px 18px; background: var(--s-card-bg); box-shadow: var(--s-shadow-card); }
.pn-msg.is-client .pn-bubble { border-radius: 18px 6px 18px 18px; border-color: color-mix(in srgb, var(--k-primary) 22%, var(--k-border)); background: color-mix(in srgb, var(--k-primary) 7%, var(--k-surface)); box-shadow: none; }
.pn-msg.is-staff .pn-bubble { border-inline-start: 3px solid var(--k-primary); }
.pn-bubble header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .84rem; }
.pn-bubble header strong { font-weight: 720; }
.pn-bubble header time { margin-inline-start: auto; color: var(--k-text-muted); font-size: .76rem; font-variant-numeric: tabular-nums; }
.pn-staff-tag { padding: .05rem .5rem; border-radius: 999px; background: var(--k-primary-soft); color: var(--k-primary-text); font-size: .68rem; font-weight: 700; }
.pn-bubble-body { font-size: .93rem; line-height: 1.65; overflow-wrap: anywhere; }
.pn-files { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pn-files a { display: flex; align-items: center; gap: 10px; max-width: 260px; padding: 8px 10px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-text); text-decoration: none; transition: border-color 140ms; }
.pn-files a:hover { border-color: var(--k-primary); }
.pn-files a > .ico:last-child { color: var(--k-text-muted); flex: none; }
.pn-file-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--k-primary-soft); color: var(--k-primary-text); }
.pn-file-name { display: grid; min-width: 0; }
.pn-file-name strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-file-name small { font-size: .7rem; color: var(--k-text-muted); }
@media (max-width: 560px) { .pn-avatar { width: 30px; height: 30px; font-size: .78rem; } .pn-bubble { padding: 12px 14px; } }

.pn-composer { display: grid; gap: 0; border: 1px solid var(--k-border-strong); border-radius: var(--s-radius-xl); background: var(--k-surface); box-shadow: var(--s-shadow-card); overflow: hidden; transition: border-color 140ms, box-shadow 140ms; }
.pn-composer:focus-within { border-color: var(--k-primary); box-shadow: var(--k-focus); }
.pn-composer textarea { display: block; width: 100%; min-height: 130px; padding: 16px 18px; border: 0; background: none; color: var(--k-text); font: inherit; font-size: .94rem; line-height: 1.6; resize: vertical; outline: none; }
.pn-composer .field-error { padding: 0 18px 8px; }
.pn-composer-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border-top: 1px solid var(--k-border); background: color-mix(in srgb, var(--k-surface-2) 60%, var(--k-surface)); }
.pn-composer-hint { flex: 1; min-width: 0; font-size: .74rem; color: var(--k-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-attach { position: relative; display: inline-flex; align-items: center; gap: .4rem; min-height: 34px; padding: 0 .75rem; border: 1px solid var(--k-border); border-radius: 999px; background: var(--k-surface); color: var(--k-text); font-size: .82rem; font-weight: 650; cursor: pointer; max-width: 50%; }
.pn-attach span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-attach:hover, .pn-attach:focus-within { border-color: var(--k-primary); }
.pn-attach input, .pn-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.pn-attach.has-files, .pn-drop.has-files { border-color: var(--k-primary); color: var(--k-primary-text); }
@media (max-width: 560px) { .pn-composer-hint { display: none; } .pn-composer-bar .k-btn { margin-inline-start: auto; } }

.pn-link-card { gap: 10px; color: var(--k-text); text-decoration: none; transition: border-color 140ms; }
.pn-link-card:hover { border-color: var(--k-primary); }
.pn-link-card-row { display: flex; align-items: center; gap: 12px; }
.pn-link-card-row > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.pn-link-card-row strong { font-size: .9rem; }
.pn-link-card-row small { font-size: .78rem; color: var(--k-text-muted); overflow-wrap: anywhere; }
.pn-side-help { gap: 8px; justify-items: start; }
.pn-side-help strong { font-size: .94rem; }
.pn-side-help p { margin: 0; color: var(--k-text-muted); font-size: .84rem; line-height: 1.5; }
.pn-side-help .text-link { font-size: .85rem; font-weight: 650; }

/* ---------------------------------------------------- New ticket form */
.pn-ticket-form { gap: 24px; }
.pn-fieldset { display: grid; gap: 14px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pn-fieldset legend { display: flex; align-items: center; gap: 10px; padding: 0; margin-bottom: 14px; font-size: 1rem; font-weight: 730; }
.pn-fieldset legend .pn-step-num { width: 28px; height: 28px; font-size: .8rem; box-shadow: 0 0 0 4px var(--k-primary-soft); }
.pn-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.pn-choice { position: relative; display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid var(--k-border); border-radius: var(--s-radius-lg); background: var(--k-surface); cursor: pointer; transition: border-color 140ms, box-shadow 140ms, background-color 140ms; }
.pn-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pn-choice strong { font-size: .9rem; font-weight: 680; }
.pn-choice:hover { border-color: var(--k-border-strong); }
.pn-choice:has(input:checked) { border-color: var(--k-primary); background: color-mix(in srgb, var(--k-primary) 6%, var(--k-surface)); box-shadow: 0 0 0 3px var(--k-primary-soft); }
.pn-choice:has(input:focus-visible) { box-shadow: var(--k-focus); }
.pn-choice:has(input:checked)::after { content: ""; position: absolute; top: 10px; inset-inline-end: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--k-primary); }
.pn-drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--k-border-strong); border-radius: var(--s-radius-lg); background: color-mix(in srgb, var(--k-surface-2) 50%, var(--k-surface)); cursor: pointer; transition: border-color 140ms, background-color 140ms; }
.pn-drop:hover, .pn-drop:focus-within, .pn-drop.is-drag { border-color: var(--k-primary); background: color-mix(in srgb, var(--k-primary) 7%, var(--k-surface)); }
.pn-composer.is-drag { border-color: var(--k-primary); box-shadow: 0 0 0 3px var(--k-primary-soft); }
.pn-kb-suggest { display: grid; gap: 8px; margin-top: 8px; padding: 12px 14px; border: 1px solid var(--k-border); border-radius: var(--s-radius-lg); background: color-mix(in srgb, var(--k-primary) 4%, var(--k-surface)); }
.pn-kb-suggest[hidden] { display: none; }
.pn-kb-head { font-size: .78rem; font-weight: 700; color: var(--k-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.pn-kb-list { display: grid; gap: 6px; }
.pn-kb-item { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid var(--k-border); border-radius: var(--s-radius-md); background: var(--k-surface); color: var(--k-text); text-decoration: none; transition: border-color 120ms; }
.pn-kb-item:hover { border-color: var(--k-primary); }
.pn-kb-item strong { font-size: .86rem; color: var(--k-primary-text); }
.pn-kb-item span { font-size: .78rem; color: var(--k-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-draft-note { font-size: .76rem; color: var(--k-text-muted); }
.pn-draft-note[hidden] { display: none; }
.pn-drop > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }
.pn-drop strong { font-size: .9rem; overflow-wrap: anywhere; }
.pn-drop small { font-size: .78rem; color: var(--k-text-muted); }
.pn-form-foot { justify-content: flex-end; padding-top: 18px; border-top: 1px solid var(--k-border); }
.pn-tips-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pn-tips-card li { display: flex; gap: 8px; font-size: .84rem; color: var(--k-text-muted); line-height: 1.5; }
.pn-tips-card li .ico { flex: none; margin-top: 3px; color: var(--k-success-text); }
.pn-row-ico-brand { background: var(--k-primary-soft) !important; color: var(--k-primary-text) !important; }
.pn-upsell { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border: 1px dashed var(--k-border-strong); border-radius: var(--s-radius-xl); background: linear-gradient(135deg, color-mix(in srgb, var(--k-primary) 6%, var(--k-surface)), var(--k-surface) 70%); color: var(--k-text); text-decoration: none; transition: border-color 140ms; }
.pn-upsell:hover { border-color: var(--k-primary); }
.pn-upsell > span:nth-child(2) { display: grid; gap: 2px; flex: 1; min-width: 0; }
.pn-upsell strong { font-size: .94rem; }
.pn-upsell small { font-size: .82rem; color: var(--k-text-muted); }
@media (max-width: 560px) { .pn-upsell { flex-wrap: wrap; } }

/* ---------------------------------------------------- Wallet / credit */
.pn-wallet { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.pn-wallet-card { position: relative; overflow: hidden; isolation: isolate; display: grid; align-content: end; gap: 4px; min-height: 200px; padding: 24px; border-radius: 22px; background: var(--k-gradient); color: #fff; box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--k-primary) 80%, transparent); }
.pn-wallet-card::before { content: ""; position: absolute; inset: -40% -30% auto auto; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / .28), transparent 65%); z-index: -1; }
.pn-wallet-comb { position: absolute; inset: auto -20px -30px auto; width: 180px; height: 150px; opacity: .14; z-index: -1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='48' viewBox='0 0 56 48'%3E%3Cpath d='M14 1 27 8.5v15L14 31 1 23.5v-15zM42 1l13 7.5v15L42 31l-13-7.5v-15zM28 25l13 7.5v15' fill='none' stroke='white' stroke-width='2'/%3E%3C/svg%3E"); }
.pn-wallet-chip { position: absolute; top: 22px; inset-inline-start: 24px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: rgb(255 255 255 / .18); }
.pn-wallet-label { font-size: .8rem; font-weight: 650; opacity: .85; text-transform: uppercase; letter-spacing: .06em; }
.pn-wallet-amount { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.pn-wallet-note { font-size: .8rem; opacity: .85; line-height: 1.45; }
.pn-topup { align-content: center; }
.pn-amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.pn-amount { min-height: 44px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: var(--k-surface); color: var(--k-text); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 140ms, background-color 140ms, box-shadow 140ms; }
.pn-amount:hover { border-color: var(--k-primary); }
.pn-amount.is-active { border-color: var(--k-primary); background: var(--k-primary-soft); color: var(--k-primary-text); box-shadow: 0 0 0 3px var(--k-primary-soft); }
.pn-amount-input { position: relative; display: flex; gap: 8px; }
.pn-amount-field { position: relative; flex: 1; min-width: 0; display: flex; }
.pn-amount-input .k-input { flex: 1; min-width: 0; min-height: 46px; padding-inline-end: 54px; font-weight: 650; }
.pn-amount-cur { position: absolute; top: 50%; inset-inline-end: 14px; transform: translateY(-50%); font-size: .8rem; font-weight: 700; color: var(--k-text-muted); pointer-events: none; }
.pn-amount-input .k-btn { min-height: 46px; flex: none; }
.pn-inline-form { display: flex; gap: 8px; }
.pn-inline-form .k-input { flex: 1; min-width: 0; }
.pn-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.pn-section-head h2 { margin: 0; font-size: 1.1rem; font-weight: 740; }
.pn-tx-in { background: var(--k-success-bg) !important; color: var(--k-success-text) !important; transform: rotate(90deg); }
.pn-tx-out { background: var(--k-surface-2) !important; color: var(--k-text-muted) !important; transform: rotate(-90deg); }
.pn-pos { color: var(--k-success-text); }
.pn-neg-amt { color: var(--k-text); }
.pn-row:not(a):hover { background: none; }
@media (max-width: 860px) { .pn-wallet { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .pn-amount-input, .pn-inline-form { flex-wrap: wrap; } .pn-amount-input .k-btn, .pn-inline-form .k-btn { width: 100%; } }

/* ---------------------------------------------------- Profile */
.pn-avatar-xl { font-size: 1.6rem; font-weight: 800; }
.pn-no-dot::before { content: none; }
.pn-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pn-checks a { display: flex; align-items: center; gap: .5rem; padding: .45rem .8rem; border: 1px solid var(--k-border); border-radius: 999px; background: var(--k-surface); color: var(--k-warning-text); font-size: .8rem; font-weight: 680; text-decoration: none; white-space: nowrap; }
.pn-checks li.is-ok a { color: var(--k-success-text); border-color: color-mix(in srgb, var(--k-success-text) 25%, var(--k-border)); background: color-mix(in srgb, var(--k-success-bg) 55%, var(--k-surface)); }
.pn-checks a:hover { border-color: var(--k-primary); }
@media (max-width: 1100px) { .pn-checks { grid-auto-flow: column; justify-content: start; width: 100%; } }
@media (max-width: 520px) { .pn-checks { grid-auto-flow: row; } }
.pn-subsection { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--k-border); }
.pn-subsection h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: .95rem; font-weight: 700; }
.pn-subsection h3 .ico { color: var(--k-primary-text); }
.pn-toggles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 8px; }
.pn-toggle { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: var(--k-surface); font-size: .88rem; font-weight: 600; cursor: pointer; transition: border-color 140ms; }
.pn-toggle:hover { border-color: var(--k-border-strong); }
.pn-toggle input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.pn-switch { position: relative; flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--k-border-strong); transition: background-color 160ms; }
.pn-switch::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform 160ms var(--s-ease); }
.pn-toggle input:checked + .pn-switch { background: var(--k-primary); }
.pn-toggle input:checked + .pn-switch::after { transform: translateX(16px); }
[dir="rtl"] .pn-toggle input:checked + .pn-switch::after { transform: translateX(-16px); }
.pn-toggle input:focus-visible + .pn-switch { box-shadow: var(--k-focus); }
.pn-toggle:has(input:checked) { border-color: color-mix(in srgb, var(--k-primary) 35%, var(--k-border)); }
.pn-verify { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pn-otp-sm { width: 9rem; min-height: 42px; font-size: 1.05rem; letter-spacing: .2em; }
.pn-verify .pn-otp-form .k-btn { min-height: 42px; }
.pn-tips-card-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pn-tips-card-list li { display: flex; align-items: flex-start; gap: 8px; font-size: .86rem; color: var(--k-text-muted); }
.pn-tips-card-list .ico { flex: none; margin-top: 2px; color: var(--k-success-text); }
.pn-security-card.is-off { background: linear-gradient(160deg, color-mix(in srgb, var(--k-warning-bg) 40%, var(--k-surface)), var(--s-card-bg) 60%); }
.pn-toggles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.pn-otp::placeholder { letter-spacing: .04em; font-size: .9rem; font-weight: 500; }

/* ---------------------------------------------------- Invoices & Payments */
.pn-alert.is-ok { border-color: color-mix(in srgb, var(--k-success-text) 30%, var(--k-border)); background: color-mix(in srgb, var(--k-success-bg) 55%, var(--k-surface)); }
.pn-alert.is-ok > .ico { color: var(--k-success-text); }
.pn-row-split { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px 20px; transition: background-color 140ms; }
.pn-row-split::before { content: ""; position: absolute; inset: 12px auto 12px 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--pn-row-tone, transparent); }
[dir="rtl"] .pn-row-split::before { inset: 12px 0 12px auto; border-radius: 3px 0 0 3px; }
.pn-row-split:hover { background: color-mix(in srgb, var(--k-surface-2) 60%, transparent); }
.pn-row-link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; color: var(--k-text); text-decoration: none; }
.pn-row-cta { display: flex; align-items: center; gap: 10px; flex: none; }
@media (max-width: 640px) {
    .pn-row-split { flex-wrap: wrap; padding: 14px; }
    .pn-row-link { flex-wrap: wrap; gap: 10px; }
    .pn-row-cta { width: 100%; justify-content: flex-end; padding-inline-start: 50px; }
}
.pn-choice-stack { display: grid; gap: 8px; }
.pn-choice-stack .pn-choice { padding: 11px 14px; }
.pn-pay-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--k-radius); background: var(--k-surface-2); }
.pn-pay-total span { font-size: .82rem; color: var(--k-text-muted); font-weight: 620; }
.pn-pay-total strong { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pn-inv-note { margin: 0; font-size: .8rem; color: var(--k-text-muted); line-height: 1.5; }
.pn-bank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pn-bank-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--k-border); border-radius: var(--k-radius); background: color-mix(in srgb, var(--k-surface-2) 55%, var(--k-surface)); font-size: .86rem; }
.pn-bank-item span { min-width: 0; overflow-wrap: anywhere; font-weight: 560; }
.pn-trust { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 8px; border-top: 1px solid var(--k-border); font-size: .78rem; color: var(--k-text-muted); }
.pn-trust span { display: inline-flex; align-items: center; gap: 5px; }
.pn-trust .ico { color: var(--k-success-text); }

/* ---------------------------------------------------- Domains */
.pn-row-check { flex: none; display: grid; place-items: center; }
.pn-row-check input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--k-primary); cursor: pointer; }
.pn-bulk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; border: 1px solid var(--s-card-border); border-radius: var(--s-radius-lg); background: var(--s-card-bg); }
.pn-bulk-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pn-bulk-controls .k-select { width: auto; min-width: 210px; }
.pn-domain-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pn-domain-bar .pn-search { flex: 1; min-width: min(100%, 240px); }
.pn-renew-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pn-renew-inline .k-select { width: auto; min-width: 105px; }
.pn-dns-table td { padding: 8px 6px; }
.pn-dns-table .k-select { min-width: 82px; }
.pn-dns-table .k-input { min-width: 76px; }
.pn-dns-table td:nth-child(3) .k-input { min-width: 150px; }

/* ---------------------------------------------------- Contacts & Testimonials */
.pn-contact-avatar { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--k-primary); background-image: var(--k-gradient); color: var(--k-primary-contrast); font-size: 1rem; font-weight: 780; }
.pn-pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.pn-stars { display: inline-flex; align-items: center; gap: 2px; color: #f59e0b; }
.pn-stars .ico.is-dim { color: var(--k-border-strong); }
a.pn-tile { text-decoration: none; color: inherit; transition: border-color 140ms, transform 140ms var(--s-ease); }
a.pn-tile:hover { border-color: var(--k-border-strong); transform: translateY(-1px); }

/* ---------------------------------------------------- Security & Notifications */
.ap-muted { margin: 2px 0 0; font-size: .84rem; color: var(--k-text-muted); }
.ap-form-stack { display: grid; gap: 14px; max-width: 460px; margin-bottom: 16px; }
.ap-pref-list { display: grid; gap: 10px; }
.ap-pref-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--k-border); border-radius: var(--s-radius-lg); background: var(--k-surface); cursor: pointer; transition: border-color 140ms; }
.ap-pref-row:hover { border-color: var(--k-border-strong); }
.ap-pref-row input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: var(--k-primary); }
.ap-pref-row span { display: grid; gap: 2px; min-width: 0; }
.ap-pref-row strong { font-size: .92rem; }
.ap-pref-row small { font-size: .8rem; color: var(--k-text-muted); }

/* Star rating picker (account/testimonial.twig) */
.rating-input { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 6px; border: 0; margin: 0 0 18px; padding: 0; position: relative; }
.rating-input legend { width: 100%; margin-bottom: .45rem; }
.rating-input input { position: absolute; opacity: 0; pointer-events: none; }
.rating-input label { display: inline-grid; place-items: center; padding: 2px; border-radius: 6px; color: var(--k-border-strong); cursor: pointer; transition: color 120ms, transform 120ms; }
.rating-input label .ico { width: 28px; height: 28px; }
.rating-input label:hover { transform: scale(1.08); }
.rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked ~ label { color: var(--s-star); }
.rating-input label:hover .ico, .rating-input label:hover ~ label .ico, .rating-input input:checked ~ label .ico { fill: currentColor; }
.rating-input input:focus-visible + label { outline: 2px solid var(--k-primary); outline-offset: 2px; box-shadow: var(--k-focus); }