@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    min-height:100%;
}

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }




.loading-container {
    text-align: center;
    margin: 20vh auto;
    position: relative;
}

.loading-logo {
    position: absolute;
    top: 38%; /* Previously it was 50%, reducing it to 48% will nudge it up */
    left: 50%;
    width: 7rem; /* Adjust this to fit your desired logo size */
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.loading-progress {
    position: relative;
    display: inline-block;
    width: 8rem;
    height: 8rem;
    vertical-align: middle;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #000000; 
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    display: block;
    text-align: center;
    font-weight: bold;
    margin-top: 1rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

    /* -------------------------------------------------- */
    /* Modern redesign additions                          */
    /* -------------------------------------------------- */
    :root {
        --pp-bg: #0f172a; /* slate-900 */
        --pp-bg-alt: #1e293b; /* slate-800 */
        --pp-surface: #1f2937; /* gray-800 */
        --pp-surface-alt: #273549;
        --pp-border: #334155; /* slate-700 */
        --pp-accent: #6366f1; /* indigo-500 */
        --pp-accent-rgb: 99,102,241;
        --pp-accent-alt: #8b5cf6; /* violet-500 */
        --pp-text: #f1f5f9; /* slate-100 */
        --pp-text-soft: #818c9d; /* slate-400 */
        --pp-danger: #dc2626;
        --pp-warning: #f59e0b;
        --pp-success: #10b981;
        --pp-radius-sm: 6px;
        --pp-radius: 12px;
        --pp-radius-lg: 18px;
        --pp-gradient: linear-gradient(135deg,var(--pp-accent),var(--pp-accent-alt));
        --pp-shadow: 0 4px 16px -4px rgba(0,0,0,.4),0 2px 4px -2px rgba(0,0,0,.3);
        --pp-shadow-inset: inset 0 0 0 1px rgba(56, 23, 23, 0.04),0 4px 12px -2px rgba(0,0,0,.55);
    }

    body {
    background: radial-gradient(circle at 20% 20%, #1e293b, #0f172a 60%) fixed, linear-gradient(#0f172a,#0f172a) fixed;
        color: var(--pp-text);
        -webkit-font-smoothing: antialiased;
    min-height:100vh;
    }

    /* Constrain overall layout width on very large screens for readability */
    .layout-constrain { width:100%; max-width:1440px; margin:0 auto; }
    @media (max-width:1500px){ .layout-constrain { max-width: 1320px; } }
    @media (max-width:1380px){ .layout-constrain { max-width: 1180px; } }

    .page, main, .content {
        background: transparent;
    }

    /* Scrollbars subtle */
    ::-webkit-scrollbar { width: 10px; }
    ::-webkit-scrollbar-track { background: #0f172a; }
    ::-webkit-scrollbar-thumb { background: #334155; border-radius: 20px; }
    ::-webkit-scrollbar-thumb:hover { background: #475569; }

    /* Navigation */
    .navbar, .top-row.navbar { background: rgba(15,23,42,.9)!important; backdrop-filter: blur(10px); border-bottom:1px solid var(--pp-border); }
    .navbar-brand { font-weight:600; letter-spacing:.5px; }

    /* Cards */
    .card {
        /* background: linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); */
        background: radial-gradient(     circle at 65% 35%,     rgba(255, 255, 255, 0.285),     transparent 60%   ),   linear-gradient(     160deg,     #edf0f2,     #a9aeb6   );
        border: 1px solid var(--pp-border);
        border-radius: var(--pp-radius);
        box-shadow: var(--pp-shadow);
        backdrop-filter: blur(6px);
        transition: border-color .25s, transform .25s; 
    }
    .card:hover { border-color: var(--pp-accent); }
    .card:focus-within { border-color: var(--pp-accent-alt); }
    .card-title { font-weight:600; }

    /* Metric cards */
    .metrics-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(250px,250px));  }
    .metrics-grid-small { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); }
    .metric-card { position:relative; padding:1rem 1.1rem 1.2rem; border:1px solid var(--pp-border); border-radius:var(--pp-radius); background:linear-gradient(160deg,#1e2534,#182131); box-shadow:var(--pp-shadow-inset); overflow:hidden; }
    .metric-card:before { content:""; position:absolute; inset:0; background:radial-gradient(circle at top right, rgba(255,255,255,0.08), transparent 60%); opacity:.8; pointer-events:none; }
    .metric-card.active-highlight { box-shadow:0 0 0 3px rgba(139,92,246,0.65), 0 6px 18px -4px rgba(0,0,0,0.5); border-color:rgba(139,92,246,0.7); }
    .metric-label { font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:var(--pp-text-soft); font-weight:600; }
    .metric-value { font-size:1.35rem; font-weight:600; margin-top:.35rem; line-height:1.2; background:linear-gradient(90deg,#fff,#94a3b8); -webkit-background-clip:text; background-clip:text; color:transparent; }
    .metric-sub { font-size:.7rem; color:var(--pp-text-soft); margin-top:.3rem; }

    .scenario-group-header {margin-top:1rem;}
    /* Forms */
    input[type=text], input[type=number], input[type=date], input[type=range], input[type=name] {
        background:#0f172a; border:1px solid var(--pp-border); color:var(--pp-text); padding:.55rem .7rem; border-radius:var(--pp-radius-sm); font-size:.85rem; width:100%;
    }
    input[type=range] { padding:0; height:6px; background: linear-gradient(90deg, var(--pp-accent) 0%, var(--pp-accent-alt) 100%); border:none; border-radius:4px; }
    input:focus { outline:none; box-shadow:0 0 0 2px rgba(var(--pp-accent-rgb),.35); border-color:var(--pp-accent); }
    label { font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--pp-text-soft); margin-top:.4rem; display:block; }

    /* Button */
    .btn-primary { background: var(--pp-gradient); border:none; font-weight:600; letter-spacing:.5px; padding:.75rem 1.25rem; border-radius:var(--pp-radius-sm); box-shadow:0 4px 18px -4px rgba(var(--pp-accent-rgb),.5); transition: transform .25s, box-shadow .25s; }
    .btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 26px -6px rgba(var(--pp-accent-rgb),.7); }
    .btn-primary:active { transform:translateY(0); box-shadow:0 2px 10px -2px rgba(var(--pp-accent-rgb),.55); }

    /* Layout helpers */
    .planner-grid { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start; }
    .section-title { font-size: .85rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--pp-text-soft); margin:0 0 .5rem; }

    /* Progress bars */
    .pp-progress { position:relative; height:10px; background:#0f172a; border:1px solid var(--pp-border); border-radius:999px; overflow:hidden; }
    .pp-progress > span { position:absolute; left:0; top:0; bottom:0; background:var(--pp-gradient); box-shadow:0 0 0 1px rgba(255,255,255,.05); }
    .pp-progress.dual { display:flex; }
    .pp-progress.dual span { position:relative; flex:1; }
    .pp-progress.dual span.p1 { background:linear-gradient(90deg,#38bdf8,#6366f1); }
    .pp-progress.dual span.p2 { background:linear-gradient(90deg,#f472b6,#8b5cf6); }

    /* Summary grid */
    .summary-grid { display:grid; grid-template-columns:170px 1fr; gap:.4rem .9rem; font-size:.75rem; margin-top:.4rem; }
    .summary-grid .s-label { text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--pp-text-soft); align-self:center; }
    .summary-grid .s-val { font-size:.78rem; line-height:1.2rem; }
    .summary-grid .s-val.warning { color:var(--pp-warning); font-weight:600; }
    .summary-grid .s-section { grid-column:1 / -1; margin:.6rem 0 .2rem; font-size:.6rem; font-weight:700; letter-spacing:.09em; color:var(--pp-text-soft); opacity:.85; border-top:1px solid var(--pp-border); padding-top:.5rem; }
    .hi-bar-wrap { margin:.25rem 0 .3rem; }
    .hi-bar { display:flex; height:6px; background:#0f172a; border:1px solid var(--pp-border); border-radius:999px; overflow:hidden; }
    .hi-bar .seg { display:block; height:100%; }
    .hi-bar-legend { font-size:.6rem; color:var(--pp-text-soft); margin-top:.25rem; }
    /* New responsive summary sections */
    .summary-sections { display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); margin-top:.4rem; }
    .summary-section { display:grid; grid-template-columns:100px 2fr; gap:.35rem .6rem; position:relative; padding:.75rem .85rem .9rem; border:1px solid var(--pp-border); border-radius:10px; background:#162032; box-shadow:var(--pp-shadow-inset); }
    .summary-section .sec-title { grid-column:1 / -1; font-size:.55rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--pp-text-soft); margin:-.15rem 0 .15rem; opacity:.85; }
    .summary-section .sec-label { font-size:.55rem; text-transform:uppercase; letter-spacing:.07em; font-weight:600; color:var(--pp-text-soft); align-self:center; }
    .summary-section .sec-val { font-size:.72rem; line-height:1.05rem; font-weight:500; }
    .summary-section .sec-val.warn { color:var(--pp-warning); font-weight:600; }
    .pp-progress.dual.mini { height:6px; margin:.25rem 0 .2rem; }
    .mini-legend { font-size:.55rem; color:var(--pp-text-soft); margin-top:.1rem; }
    @media (min-width:1600px){ .summary-sections { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); } }
    @media (max-width:680px){ .summary-section { grid-template-columns:70px 1fr; } }
    .slider-scale { display:flex; justify-content:space-between; font-size:.5rem; color:var(--pp-text-soft); margin:-.15rem .25rem .4rem; font-weight:600; letter-spacing:.05em; }
    .period-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.55rem 1.1rem; font-size:.7rem; }
    .period-grid .p-row { display:flex; flex-direction:column; }
    .period-grid .p-label { font-size:.55rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--pp-text-soft); margin-bottom:.15rem; }
    .period-grid .p-val { font-size:.75rem; font-weight:500; }
    .p-badges { display:flex; flex-wrap:wrap; gap:.35rem; }
    .p-badges .badge { background:#1e293b; border:1px solid var(--pp-border); padding:.25rem .45rem; border-radius:999px; font-size:.55rem; font-weight:500; line-height:1; }
    .period-grid .p-section-title { grid-column:1 / -1; font-size:.55rem; letter-spacing:.1em; text-transform:uppercase; margin:.2rem 0 .15rem; font-weight:700; color:var(--pp-text-soft); opacity:.85; }

    /* Accordions */
    details.pp-accordion { border:1px solid var(--pp-border); border-radius:var(--pp-radius); padding:.85rem 1rem; background:#162032; box-shadow:var(--pp-shadow-inset); }
    details.pp-accordion:not(:last-child){ margin-bottom:.9rem; }
    details.pp-accordion[open] { border-color:var(--pp-accent); }
    details.pp-accordion summary { cursor:pointer; list-style:none; font-weight:600; display:flex; align-items:center; gap:.6rem; }
    details.pp-accordion summary::-webkit-details-marker{ display:none; }
    details.pp-accordion summary:after { content:""; flex:0 0 12px; height:12px; border-right:2px solid var(--pp-text-soft); border-bottom:2px solid var(--pp-text-soft); transform:rotate(-45deg) translateY(-1px); transition: transform .3s; margin-left:auto; }
    details.pp-accordion[open] summary:after { transform:rotate(45deg) translateY(-1px); }
    details.pp-accordion .accordion-body { margin-top:.75rem; font-size:.85rem; line-height:1.35rem; }

    /* Timeline containers */
    .timeline, .parent-timeline { margin-top:1.1rem; position:relative; }
    .timeline { height:46px; display:block; background:#0f172a; border:1px solid var(--pp-border); border-radius:10px; overflow:hidden; position:relative; }
    .timeline-item { position:absolute; top:0; bottom:0; color:#fff; font-size:0; cursor:pointer; height:100%; }
    .timeline-item::after { content:""; position:absolute; inset:0; opacity:.15; }
    .timeline-item.high { background:transparent; /* color injected inline per parent */ }
    .timeline-item.low { display:flex; height:100%; padding:0;}
    .timeline-item.low::after { content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 4px,transparent 4px 8px); mix-blend-mode:overlay; }
    .timeline-item.split { display:flex; overflow:hidden; padding:0; }
    .timeline-item.split .part { height:100%; position:relative; }
    .timeline-item.split .part.low::after { content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.25) 0 4px,transparent 4px 8px); mix-blend-mode:overlay; }
    .parent-timeline { height:16px; display:block; position:relative; margin-top:.4rem; background:#0f172a; border:1px solid var(--pp-border); border-radius:8px; overflow:hidden; }
    .parent-timeline-item { position:absolute; top:0; bottom:0; font-size:0; }
    .timeline-tooltip { position:absolute; background:#1e293b; color:var(--pp-text); padding:.4rem .55rem; border:1px solid var(--pp-border); border-radius:6px; font-size:.6rem; box-shadow:var(--pp-shadow); pointer-events:none; transform:translate(-50%,-115%); white-space:nowrap; z-index:500; }
    .depletion-chart { margin-top:1.0rem; height:200px; position:relative; background:#0f172a; border:1px solid var(--pp-border); border-radius:12px; padding:6px 6px 4px; }
    .depletion-chart canvas { width:100%; height:100%; }
    .income-chart { margin-top:1.0rem; height:300px; position:relative; background:#0f172a; border:1px solid var(--pp-border); border-radius:12px; padding:6px 6px 4px; }
    .income-chart canvas { width:100%; height:100%; }
    @media (max-width:720px){ .timeline { height:40px; } }
    /* Sticky metrics on large screens */
    @media (min-width:1000px){ .metrics-grid-small { position:sticky; top:68px; z-index:120;  padding:.4rem 0 .6rem; backdrop-filter:blur(6px); } }
    /* Metric tooltip */
    .metric-label[data-tip] { position:relative; cursor:help; }
    .metric-label[data-tip]:hover:after { content:attr(data-tip); position:absolute; left:0; top:100%; margin-top:4px; background:#1e293b; color:var(--pp-text); font-size:.6rem; padding:.4rem .5rem; border:1px solid var(--pp-border); border-radius:6px; width:max-content; max-width:180px; box-shadow:var(--pp-shadow); z-index:30; }

    /* Inline info tip */
    .inline-tip { display:inline-grid; place-items:center; width:16px; height:16px; font-size:.55rem; font-weight:700; border-radius:50%; background:#0f172a; border:1px solid var(--pp-border); color:var(--pp-text-soft); cursor:help; }
    .inline-tip:hover { color:var(--pp-text); border-color:var(--pp-accent); }
    .inline-tip[data-tip] { position:relative; }
    .inline-tip[data-tip]:hover:after { content:attr(data-tip); position:absolute; left:50%; top:100%; transform:translate(-50%,6px); background:#1e293b; color:var(--pp-text); font-size:.6rem; padding:.4rem .45rem; border:1px solid var(--pp-border); border-radius:6px; width:max-content; max-width:240px; box-shadow:var(--pp-shadow); z-index:50; white-space:normal; text-transform:none; letter-spacing:normal; font-weight:500; }

    /* Hero section */
    .hero { position:relative; padding:4.5rem 1.5rem 3.5rem; background:radial-gradient(circle at 65% 35%, rgba(var(--pp-accent-rgb),.25), transparent 60%), linear-gradient(160deg,#0f172a,#1e293b); border:1px solid var(--pp-border); border-radius:var(--pp-radius-lg); box-shadow:var(--pp-shadow); overflow:hidden; }
    .hero:before { content:""; position:absolute; width:420px; height:420px; background:radial-gradient(circle at center, rgba(var(--pp-accent-rgb),.35), transparent 70%); top:-120px; left:-120px; filter:blur(30px); opacity:.4; pointer-events:none; z-index:0; }
    .hero > * { position:relative; z-index:1; }
    .hero h1 { font-size:clamp(1.9rem,4.2vw,3.1rem); font-weight:600; margin:0 0 .75rem; letter-spacing:-.5px; }
    .hero p.lead { font-size:1.05rem; max-width:740px; line-height:1.5; color:var(--pp-text-soft); }
    .hero .cta { margin-top:1.7rem; }
    .hero-split { display:grid; gap:2.2rem; grid-template-columns:minmax(0,1fr) minmax(320px,420px); align-items:center; }
    .hero-col { position:relative; }
    .hero-logo-wrapper { display:flex; align-items:center; justify-content:center; }
    .hero-logo-large { width:100%; max-width:380px; height:auto; border-radius:40px; box-shadow:0 10px 40px -10px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08); object-fit:cover; background:#fff; }
    .hero-text .long-intro { max-width:760px; }
    @media (max-width:980px){ .hero-split { grid-template-columns:1fr; } .hero-logo-wrapper { order:-1; margin-bottom:1rem; } .hero-logo-large { max-width:300px; } }
    @media (prefers-color-scheme:dark){ .hero-logo-large { background:#1e293b; } }

    /* Features grid */
    .features-grid { display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); margin-top:2.2rem; }
    .feature-card { position:relative; padding:1.15rem 1rem 1.2rem; border:1px solid var(--pp-border); border-radius:var(--pp-radius); background:linear-gradient(140deg,#1c2534,#151d29); box-shadow:var(--pp-shadow-inset); transition:border-color .25s, transform .25s; }
    .feature-card:hover { border-color:var(--pp-accent); transform:translateY(-3px); }
    .feature-icon { width:42px; height:42px; display:grid; place-items:center; background:rgba(var(--pp-accent-rgb),.15); border-radius:12px; color:#fff; font-size:1.1rem; margin-bottom:.6rem; }
    .feature-card h3 { margin:.2rem 0 .4rem; font-size:1rem; font-weight:600; }
    .feature-card p { font-size:.8rem; line-height:1.25rem; color:var(--pp-text-soft); }

    /* Use modes (Explore vs Planner) */
    .use-modes { margin-top:2.4rem; }
    .modes-grid { display:grid; gap:1.2rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
    .mode-panel { position:relative; background:linear-gradient(150deg,#1b2533,#141c27); border:1px solid var(--pp-border); border-radius:14px; padding:1rem 1rem 1.15rem; display:flex; flex-direction:column; gap:.75rem; box-shadow:0 4px 14px -4px rgba(0,0,0,.5); transition:border-color .25s, transform .25s; }
    .mode-panel:hover { border-color:var(--pp-accent); transform:translateY(-4px); }
    .mode-head h3 { margin:.1rem 0 .35rem; font-size:1.15rem; letter-spacing:-.5px; }
    .mode-tag { display:inline-block; font-size:.55rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; padding:.25rem .5rem; border:1px solid var(--pp-border); border-radius:20px; background:rgba(var(--pp-accent-rgb),.15); color:#fff; backdrop-filter:blur(4px); }
    .mode-blurb { font-size:.75rem; line-height:1.15rem; color:var(--pp-text-soft); max-width:380px; }
    .mode-points { list-style:none; padding:0; margin:0; font-size:.7rem; display:flex; flex-direction:column; gap:.35rem; }
    .mode-points li { position:relative; padding-left:14px; color:var(--pp-text-soft); }
    .mode-points li:before { content:""; width:6px; height:6px; border-radius:50%; background:var(--pp-accent); position:absolute; left:0; top:5px; }
    .mode-cta { margin-top:auto; }
    .mode-panel.explore { --panel-accent:#3b82f6; }
    .mode-panel.planner { --panel-accent:#10b981; }
    .mode-panel.explore .mode-tag { background:rgba(59,130,246,.15); }
    .mode-panel.planner .mode-tag { background:rgba(16,185,129,.15); }
    .mode-compare { margin-top:1.2rem; border:1px solid var(--pp-border); border-radius:10px; overflow:hidden; font-size:.6rem; display:grid; }
    .mode-compare .compare-item { display:grid; grid-template-columns:120px 1fr 1fr; padding:.45rem .7rem; background:#121b27; }
    .mode-compare .compare-item:nth-child(odd){ background:#162130; }
    .mode-compare .compare-item span:first-child { font-weight:600; color:var(--pp-text); }
    .mode-compare .compare-item span:not(:first-child){ color:var(--pp-text-soft); }
    @media (max-width:640px){ .mode-compare .compare-item { grid-template-columns:90px 1fr 1fr; } }

    /* Lists */
    ul.subList { list-style:disc; padding-left:1.2rem; }
    ul.subList li { margin:.15rem 0; }

    /* Utility */
    .horizontal-center { display:flex; justify-content:center; align-items:center; }
    .center-vertically { align-items:center; }
    .text-accent { color: var(--pp-accent); }
    .fade-soft { color: var(--pp-text-soft); }
    .divider { height:1px; background:linear-gradient(90deg, transparent, var(--pp-border), transparent); margin:2rem 0; border:none; }
    .spacer-sm { height:.75rem; }
    .spacer { height:1.5rem; }
    .wrap { flex-wrap:wrap; }

    /* Info popup modernization */
    .info-button { position:absolute; top:-.5rem; right:0rem; }
    .info-button input[type=checkbox] { display:none; }
    .info-button label { cursor:pointer; display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; background:var(--pp-gradient); border-radius:50%; color:#fff; font-weight:600; border:1px solid rgba(255,255,255,.25); box-shadow:0 4px 12px -2px rgba(var(--pp-accent-rgb),.55); }
    .info-popup { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.72); backdrop-filter:blur(10px); opacity:0; pointer-events:none; transition:opacity .35s; padding:1.5rem; z-index:200; }
    .info-button input:checked ~ .info-popup { opacity:1; pointer-events:auto; }
    .info-content { background:#ffffff; border:1px solid var(--pp-border); width:min(880px,90vw); padding:1.75rem 1.8rem 2rem; border-radius:var(--pp-radius-lg); box-shadow:var(--pp-shadow); position:relative; color:#000; }
    .info-content h2 { margin-top:0; color:#353535; }
    .info-content p, .info-content li { color:#353535; }
    .info-content .close-btn { position:absolute; right:.9rem; top:.4rem; cursor:pointer; color:var(--pp-text-soft); }
    .info-content .close-btn:hover { color:var(--pp-text); }
    .info-intro { font-size:.8rem; line-height:1.25rem; margin:.1rem 0 1rem; }
    .info-sections { display:grid; gap:1.1rem 1.25rem; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:.25rem; }
    .info-section { background:linear-gradient(145deg,#f8fafc,#eef2f7); border:1px solid #d7dde5; border-radius:12px; padding:.85rem .9rem 1rem; box-shadow:0 2px 6px -2px rgba(0,0,0,.08); position:relative; }
    .info-section h3 { margin:.1rem 0 .45rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:#475569; }
    .rule-list { list-style:disc; padding-left:1.05rem; margin:0; }
    .rule-list li { font-size:.72rem; line-height:1.05rem; margin:.25rem 0; color:#1e293b; }
    .rule-list b { color:#0f172a; }
    .info-disclaimer { margin-top:1.4rem; font-size:.6rem; letter-spacing:.06em; text-transform:uppercase; color:#64748b; border-top:1px solid #e2e8f0; padding-top:.7rem; }
    @media (max-width:680px){ .info-sections { grid-template-columns:1fr; } }
    /* High contrast summary card */
    .summary-card { background:linear-gradient(140deg,#1a2332,#16202d)!important; }
    .summary-card .card-title { color:var(--pp-text); }
    .summary-card .card-text { color:var(--pp-text); }
    /* Mobile nav */
    .mobile-nav-trigger { display:flex; align-items:center; gap:.9rem; padding:.75rem 1rem; position:fixed; top:.5rem; left:.5rem; z-index:300; background:rgba(15,23,42,.6); backdrop-filter:blur(8px); border:1px solid var(--pp-border); border-radius:var(--pp-radius-lg); }
    .mobile-nav-trigger .brand { font-weight:600; font-size:.95rem; color:var(--pp-text); text-decoration:none; }
    .hamburger { background:var(--pp-gradient); color:#fff; border:none; width:40px; height:40px; border-radius:10px; font-size:1.2rem; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 14px -4px rgba(var(--pp-accent-rgb),.6); }
    .hamburger:active { transform:scale(.95); }
    .mobile-drawer { position:fixed; top:0; left:0; bottom:0; width:0; overflow:hidden; background:rgba(15,23,42,.92); backdrop-filter:blur(10px); border-right:1px solid var(--pp-border); transition:width .3s; z-index:290; display:flex; flex-direction:column; padding-top:4.5rem; }
    .mobile-drawer.open { width:230px; }
    .mobile-drawer nav { display:flex; flex-direction:column; gap:.25rem; padding:.5rem 1rem; }
    .drawer-link { padding:.65rem .75rem; border-radius:8px; color:var(--pp-text-soft); text-decoration:none; font-size:.85rem; font-weight:500; }
    .drawer-link.active, .drawer-link:hover { background:#1e293b; color:var(--pp-text); }
    @media (min-width:900px){ .mobile-nav-trigger, .mobile-drawer { display:none; } }
    /* Desktop header */
    .desktop-header { position:fixed; top:.75rem; left:.85rem; z-index:310; background:rgba(15,23,42,.55); backdrop-filter:blur(8px); border:1px solid var(--pp-border); padding:.5rem .9rem; border-radius:var(--pp-radius-lg); }
    .desktop-header .brand { font-weight:600; font-size:.95rem; color:var(--pp-text); text-decoration:none; letter-spacing:.5px; }
    @media (max-width:899px){ .desktop-header { display:none; } }
    @media (max-width:680px){ .info-content { padding:1.15rem 1.1rem 1.2rem; } }

    /* Responsive tweaks */
    @media (max-width: 840px){ .planner-grid { grid-template-columns:1fr; } }

    /* Print friendly */
    @media print { body { background:#fff; color:#000; } .card, details.pp-accordion, .hero { background:#fff!important; box-shadow:none; } .navbar, .sidebar { display:none; } }