/* ── CSS Variables: Dark (default) ────────────────────────────────────────── */
:root,
[data-theme="dark"] {
    --bg:    #07111E;
    --bg2:   #0C1B2E;
    --bg3:   #111F35;
    --bg4:   #162840;
    --bg5:   #1C2F47;
    --bdr:   #1A3250;
    --bdr-h: #2A4A6B;
    --acc:   #F59E0B;
    --acc-d: #D97706;
    --acc-l: #FCD34D;
    --tx:    #EAF2FF;
    --tx-s:  #7E9EC0;
    --tx-m:  #4A6585;
    --ok:    #22C55E;
    --err:   #EF4444;
    --shadow: rgba(0,0,0,.5);
}

/* ── CSS Variables: Light ─────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg:    #FFFFFF;
    --bg2:   #F4F7FC;
    --bg3:   #ECF1F9;
    --bg4:   #E2EAF4;
    --bg5:   #D7E2EF;
    --bdr:   #C5D3E2;
    --bdr-h: #9BAEC4;
    --acc:   #F59E0B;
    --acc-d: #D97706;
    --acc-l: #FCD34D;
    --tx:    #07111E;
    --tx-s:  #0C1B2E;
    --tx-m:  #1A3250;
    --ok:    #16A34A;
    --err:   #DC2626;
    --shadow: rgba(0,0,0,.15);
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
    font-family: 'Lato', system-ui, sans-serif;
    background: var(--bg);
    color: var(--tx);
    min-height: 100vh;
    transition: background .2s, color .2s;
}

/* ── Scrollbar ────────────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 5px; height: 5px; }
::-webkit-scrollbar-track  { background: var(--bg); }
::-webkit-scrollbar-thumb  { background: var(--bg4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--bdr-h); }

/* ── Typography ───────────────────────────────────────────────────────────── */
.font-outfit { font-family: 'Outfit', sans-serif; }
h1,h2,h3,h4 { font-family: 'Outfit', sans-serif; color: var(--tx); }
a { color: inherit; text-decoration: none; }
input, select, textarea, button { font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--acc); outline-offset: -1px; }

/* ── Layout ───────────────────────────────────────────────────────────────── */
#pf-main {
    min-height: calc(100vh - 56px - 48px);
}
.pf-fullwidth #pf-main {
    overflow: hidden;
}
.pf-page-content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 32px 20px;
}

/* ── Navigation ───────────────────────────────────────────────────────────── */
#pf-nav {
    background: var(--bg2);
    border-bottom: 1px solid var(--bdr);
    height: 56px;
    position: sticky;
    top: 0;
    z-index: 200;
    flex-shrink: 0;
    transition: background .2s, border-color .2s;
}
.pf-nav-inner {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 20px;
    gap: 24px;
    max-width: 1300px;
    margin: 0 auto;
}
.pf-logo {
    font-family: 'Outfit', sans-serif;
    font-weight: 900;
    font-size: 19px;
    color: var(--acc);
    letter-spacing: -0.5px;
    user-select: none;
    flex-shrink: 0;
}
.pf-logo span { color: var(--tx); }
.pf-nav-links {
    display: flex;
    gap: 2px;
    flex: 1;
}
.pf-nav-link {
    background: none;
    border: none;
    color: var(--tx-s);
    cursor: pointer;
    padding: 6px 11px;
    font-size: 13px;
    font-weight: 400;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
    transition: color .15s, background .15s;
    display: inline-block;
}
.pf-nav-link:hover, .pf-nav-link.active { color: var(--acc); font-weight: 600; }
.pf-nav-actions { display: flex; align-items: center; gap: 8px; }

/* ── Theme toggle ─────────────────────────────────────────────────────────── */
#pf-theme-toggle {
    background: none;
    border: 1px solid var(--bdr);
    border-radius: 6px;
    color: var(--tx-s);
    cursor: pointer;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color .2s, color .2s;
    width: 32px; height: 32px;
}
#pf-theme-toggle:hover { border-color: var(--acc); color: var(--acc); }
[data-theme="dark"]  #pf-theme-toggle .icon-moon { display: none; }
[data-theme="dark"]  #pf-theme-toggle .icon-sun  { display: block; }
[data-theme="light"] #pf-theme-toggle .icon-sun  { display: none; }
[data-theme="light"] #pf-theme-toggle .icon-moon { display: block; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.pf-btn {
    display: inline-block;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
    border: 1px solid transparent;
    text-align: center;
}
.pf-btn-primary {
    background: var(--acc);
    color: var(--bg);
    border-color: var(--acc);
}
.pf-btn-primary:hover { background: var(--acc-d); border-color: var(--acc-d); }
.pf-btn-outline {
    background: none;
    color: var(--acc);
    border-color: var(--acc);
}
.pf-btn-outline:hover, .pf-btn-outline.active {
    background: var(--acc);
    color: var(--bg);
}
.pf-btn-ghost {
    background: none;
    color: var(--tx-s);
    border-color: var(--bdr);
}
.pf-btn-ghost:hover { background: var(--bg4); border-color: var(--bdr-h); }
.pf-btn-secondary {
    background: var(--bg4);
    color: var(--tx);
    border-color: var(--bdr);
}
.pf-btn-secondary:hover { border-color: var(--bdr-h); }
.pf-btn-sm { padding: 5px 11px; font-size: 11px; }
.pf-btn-lg { padding: 12px 26px; font-size: 14px; }
.pf-btn-block { width: 100%; display: block; }

/* ── Cards ────────────────────────────────────────────────────────────────── */
.pf-card {
    background: var(--bg3);
    border: 1px solid var(--bdr);
    border-radius: 9px;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.pf-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px var(--shadow);
    border-color: var(--bdr-h);
}
.pf-card-flat { background: var(--bg3); border: 1px solid var(--bdr); border-radius: 9px; }

/* ── Section heading ──────────────────────────────────────────────────────── */
.pf-section-label {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 11px;
    color: var(--tx-s);
    text-transform: uppercase;
    letter-spacing: .8px;
    margin-bottom: 14px;
}

/* ── Strategy tags ────────────────────────────────────────────────────────── */
.pf-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
    display: inline-block;
    border: 1px solid transparent;
}
.pf-tag-SA  { background: #3B0764; color: #C4B5FD; border-color: #6D28D9; }
.pf-tag-HMO { background: #7F1D1D; color: #FCA5A5; border-color: #DC2626; }
.pf-tag-SL  { background: #064E3B; color: #6EE7B7; border-color: #059669; }
.pf-tag-R2R { background: #0C4A6E; color: #7DD3FC; border-color: #0EA5E9; }
.pf-tag-BTL { background: #78350F; color: #FCD34D; border-color: #D97706; }
.pf-tag-urgent { background: #7F1D1D; color: #FCA5A5; border-color: #DC2626; font-size: 9px; padding: 2px 7px; }

/* ── EPC rating pills ─────────────────────────────────────────────────────── */
.pf-epc { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 3px; display: inline-block; }
.pf-epc-A { background: #00A550; color: #fff; }
.pf-epc-B { background: #2E7D32; color: #fff; }
.pf-epc-C { background: #8BC34A; color: #000; }
.pf-epc-D { background: #FFC107; color: #000; }
.pf-epc-E { background: #FF9800; color: #fff; }
.pf-epc-F { background: #F44336; color: #fff; }
.pf-epc-G { background: #B71C1C; color: #fff; }

/* ── Form inputs ──────────────────────────────────────────────────────────── */
.pf-input, .pf-select {
    background: var(--bg3);
    border: 1px solid var(--bdr);
    border-radius: 6px;
    padding: 8px 11px;
    font-size: 13px;
    color: var(--tx);
    font-family: 'Lato', sans-serif;
    transition: border-color .15s;
    width: 100%;
}
.pf-input::placeholder { color: var(--tx-m); }
.pf-input:focus, .pf-select:focus { border-color: var(--acc); outline: none; }
.pf-select { cursor: pointer; }
.pf-label { font-size: 11px; color: var(--tx-s); margin-bottom: 6px; font-weight: 600; display: block; }
.pf-field { margin-bottom: 16px; }
.pf-checkbox { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 12px; color: var(--tx-s); }
.pf-checkbox input { accent-color: var(--acc); }

/* ── Utility ──────────────────────────────────────────────────────────────── */
.fade { animation: pf-fade .3s ease; }
@keyframes pf-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pulse { animation: pf-pulse 2s infinite; }
@keyframes pf-pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
.pf-dot-ok  { width: 6px; height: 6px; background: var(--ok); border-radius: 50%; display: inline-block; }
.pf-dot-err { width: 6px; height: 6px; background: var(--err); border-radius: 50%; display: inline-block; }

/* ── Progress bar ─────────────────────────────────────────────────────────── */
.pf-progress-track { background: var(--bg4); border-radius: 4px; height: 7px; overflow: hidden; }
.pf-progress-bar   { height: 100%; background: var(--acc); border-radius: 4px; transition: width .5s ease; }

/* ── Divider ──────────────────────────────────────────────────────────────── */
.pf-divider { border: none; border-top: 1px solid var(--bdr); margin: 14px 0; }

/* ── Locked overlay ───────────────────────────────────────────────────────── */
.pf-locked {
    position: relative;
    overflow: hidden;
}
.pf-locked-overlay {
    position: absolute;
    inset: 0;
    background: rgba(7,17,30,.8);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    z-index: 2;
    border-radius: inherit;
}
[data-theme="light"] .pf-locked-overlay {
    background: rgba(255,255,255,.85);
}
.pf-locked-overlay .pf-lock-icon { font-size: 22px; }
.pf-locked-overlay .pf-lock-title { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 14px; color: var(--tx); }
.pf-locked-overlay .pf-lock-desc { font-size: 12px; color: var(--tx-s); text-align: center; max-width: 260px; font-family: 'Lato', sans-serif; }

/* ── Data disclaimer banner ───────────────────────────────────────────────── */
.pf-data-notice {
    font-size: 11px;
    color: var(--tx-m);
    font-family: 'Lato', sans-serif;
}

/* ── Footer ───────────────────────────────────────────────────────────────── */
#pf-footer {
    background: var(--bg2);
    border-top: 1px solid var(--bdr);
    padding: 12px 20px;
    transition: background .2s;
}
.pf-footer-inner {
    max-width: 1300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pf-logo-sm { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 14px; color: var(--acc); }
.pf-logo-sm span { color: var(--tx); }
.pf-footer-tagline { font-size: 11px; color: var(--tx-s); font-family: 'Lato', sans-serif; }
.pf-footer-copy { font-size: 10px; color: var(--tx-m); font-family: 'Lato', sans-serif; margin-left: auto; text-align: right; }

/* ── Admin bar offset ─────────────────────────────────────────────────────── */
.admin-bar #pf-nav { top: 32px; }
@media screen and (max-width: 782px) { .admin-bar #pf-nav { top: 46px; } }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pf-nav-links { display: none; }
    .pf-logo { font-size: 16px; }
    #pf-footer .pf-footer-copy { margin-left: 0; width: 100%; text-align: left; }
}