:root {
        --pc-accent: #0c768a;
        --pc-accent-2: #14a2b8;
        --pc-ink: #0f2733;
        --pc-muted: #6b8390;
        --pc-bg: #eef4f6;
        --pc-card: #ffffff;
        --pc-ring: rgba(12,118,138,.18);
    }

    .pc-wrap {
        min-height: 100%;
        background:
            radial-gradient(1200px 500px at 10% -10%, rgba(20,162,184,.16), transparent 60%),
            radial-gradient(1000px 460px at 100% 0%, rgba(12,118,138,.14), transparent 55%),
            var(--pc-bg);
        padding: clamp(1rem, 3vw, 2.75rem) 0 2.5rem;
    }

    .pc-container { max-width: 1080px; margin: 0 auto; padding: 0 clamp(.85rem, 3vw, 1.5rem); }

    /* ---- hero ---- */
    .pc-hero { text-align: center; color: var(--pc-ink); margin-bottom: clamp(1.1rem, 3vw, 2rem); }
    .pc-badge {
        display: inline-flex; align-items: center; gap: .45rem;
        background: rgba(12,118,138,.10); color: var(--pc-accent);
        font-weight: 600; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
        padding: .35rem .8rem; border-radius: 999px; margin-bottom: .85rem;
    }
    .pc-hero h1 {
        font-weight: 800; line-height: 1.1; margin: 0 0 .5rem;
        font-size: clamp(1.6rem, 4.5vw, 2.5rem);
        background: linear-gradient(90deg, var(--pc-accent), var(--pc-accent-2));
        -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    }
    .pc-hero p { color: var(--pc-muted); font-size: clamp(.9rem, 2.4vw, 1.02rem); margin: 0; }

    /* ---- layout ---- */
    .pc-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1rem, 2.5vw, 1.5rem); align-items: start; }
    @media (min-width: 900px) { .pc-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

    /* ---- cards ---- */
    .pc-card {
        background: var(--pc-card); border: 1px solid rgba(15,39,51,.06);
        border-radius: 18px; box-shadow: 0 12px 34px rgba(15,39,51,.08);
        overflow: hidden;
    }
    .pc-card-head {
        display: flex; align-items: center; gap: .7rem;
        padding: 1.05rem 1.25rem;
        background: linear-gradient(120deg, var(--pc-accent), var(--pc-accent-2));
        color: #fff;
    }
    .pc-card-head .ic {
        width: 40px; height: 40px; border-radius: 12px; flex: 0 0 auto;
        display: grid; place-items: center; font-size: 1.25rem;
        background: rgba(255,255,255,.18);
    }
    .pc-card-head h5 { margin: 0; font-weight: 700; font-size: 1.02rem; }
    .pc-card-head small { display: block; opacity: .85; font-weight: 400; font-size: .76rem; }
    .pc-card-body { padding: clamp(1.05rem, 3vw, 1.5rem); }

    .pc-label { font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--pc-muted); margin-bottom: .5rem; }

    /* ---- segmented pay type ---- */
    .pc-seg { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; background: #eef2f4; border-radius: 12px; padding: .3rem; }
    .pc-seg input { position: absolute; opacity: 0; pointer-events: none; }
    .pc-seg label {
        margin: 0; cursor: pointer; text-align: center; border-radius: 9px;
        padding: .6rem .5rem; font-weight: 600; font-size: .9rem; color: var(--pc-muted);
        transition: all .18s ease; user-select: none;
    }
    .pc-seg label small { display: block; font-weight: 400; font-size: .68rem; opacity: .8; }
    .pc-seg input:checked + label {
        background: #fff; color: var(--pc-accent);
        box-shadow: 0 4px 12px rgba(15,39,51,.10);
    }

    /* ---- amount ---- */
    .pc-amount { position: relative; }
    .pc-amount .cur {
        position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
        font-weight: 700; color: var(--pc-muted); font-size: 1rem; letter-spacing: .03em;
    }
    .pc-amount input {
        width: 100%; border: 1.5px solid #dde6ea; border-radius: 13px;
        padding: .95rem 1rem .95rem 3.4rem; font-size: 1.55rem; font-weight: 700; color: var(--pc-ink);
        background: #fbfdfe; transition: border-color .15s, box-shadow .15s; outline: none;
    }
    .pc-amount input::placeholder { color: #c4d1d7; }
    .pc-amount input:focus { border-color: var(--pc-accent); box-shadow: 0 0 0 4px var(--pc-ring); }

    /* ---- deduction switches ---- */
    .pc-ded { display: grid; gap: .5rem; }
    .pc-ded .row-item {
        display: flex; align-items: center; gap: .8rem;
        padding: .7rem .85rem; border: 1px solid #e7eef1; border-radius: 12px; background: #fbfdfe;
        transition: border-color .15s, background .15s;
    }
    .pc-ded .row-item:hover { border-color: var(--pc-ring); background: #f6fbfc; }
    .pc-ded .ded-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--pc-accent); background: rgba(12,118,138,.10); font-size: 1.05rem; flex: 0 0 auto; }
    .pc-ded .ded-txt { flex: 1; min-width: 0; }
    .pc-ded .ded-txt b { font-size: .9rem; color: var(--pc-ink); font-weight: 600; }
    .pc-ded .ded-txt span { display: block; font-size: .72rem; color: var(--pc-muted); }
    .form-switch .form-check-input { width: 2.4em; height: 1.25em; cursor: pointer; }
    .form-switch .form-check-input:checked { background-color: var(--pc-accent); border-color: var(--pc-accent); }

    /* ---- button ---- */
    .pc-btn {
        width: 100%; border: 0; border-radius: 13px; padding: .95rem 1rem;
        font-weight: 700; font-size: 1rem; color: #fff; cursor: pointer;
        background: linear-gradient(120deg, var(--pc-accent), var(--pc-accent-2));
        box-shadow: 0 10px 22px rgba(12,118,138,.30); transition: transform .12s, box-shadow .15s, filter .15s;
        display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
    }
    .pc-btn:hover { filter: brightness(1.04); box-shadow: 0 12px 26px rgba(12,118,138,.38); }
    .pc-btn:active { transform: translateY(1px); }
    .pc-btn:disabled { opacity: .75; cursor: not-allowed; box-shadow: none; }

    /* ---- results empty state ---- */
    .pc-empty {
        border: 1.5px dashed #cfdde2; border-radius: 18px; background: rgba(255,255,255,.55);
        text-align: center; color: var(--pc-muted); padding: clamp(1.6rem, 6vw, 3rem) 1.25rem;
        display: grid; place-items: center; gap: .6rem; min-height: 260px;
    }
    .pc-empty .big { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; font-size: 1.9rem; color: var(--pc-accent); background: rgba(12,118,138,.10); }
    .pc-empty h6 { margin: 0; color: var(--pc-ink); font-weight: 700; }
    .pc-empty small { max-width: 260px; }

    .pc-note { margin-top: 1rem; font-size: .76rem; color: var(--pc-muted); text-align: center; }

    /* fade-in for injected results */
    @keyframes pcFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    .pc-fade { animation: pcFade .28s ease; }

    /* ---- floating dark/light toggle ---- */
    .pc-theme-toggle {
        position: fixed; top: 1rem; right: 1rem; z-index: 1050;
        width: 42px; height: 42px; border-radius: 50%;
        display: inline-flex; align-items: center; justify-content: center;
        border: 1px solid rgba(15,39,51,.12); background: rgba(255,255,255,.85);
        color: var(--pc-accent); font-size: 1.2rem; line-height: 1; cursor: pointer;
        box-shadow: 0 6px 18px rgba(15,39,51,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
        transition: transform .12s ease, background .15s, color .15s, border-color .15s;
    }
    .pc-theme-toggle:hover { transform: translateY(-1px); }
    .pc-theme-toggle:active { transform: translateY(0); }

    /* ===================== DARK MODE ===================== */
    html[data-bs-theme=dark] {
        --pc-ink: #e6edf3;
        --pc-muted: #9fb3c8;
        --pc-bg: #0f1720;
        --pc-card: #1a2430;
        --pc-ring: rgba(20,162,184,.30);
    }
    html[data-bs-theme=dark] .pc-wrap {
        background:
            radial-gradient(1200px 500px at 10% -10%, rgba(20,162,184,.14), transparent 60%),
            radial-gradient(1000px 460px at 100% 0%, rgba(12,118,138,.12), transparent 55%),
            var(--pc-bg);
    }
    html[data-bs-theme=dark] .pc-card { border-color: rgba(255,255,255,.08); box-shadow: 0 12px 34px rgba(0,0,0,.45); }
    html[data-bs-theme=dark] .pc-seg { background: #0f1a24; }
    html[data-bs-theme=dark] .pc-seg input:checked + label { background: #26333f; color: var(--pc-accent-2); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
    html[data-bs-theme=dark] .pc-amount input { background: #0f1a24; border-color: #2c3a4a; color: var(--pc-ink); }
    html[data-bs-theme=dark] .pc-amount input::placeholder { color: #5b6b78; }
    html[data-bs-theme=dark] .pc-ded .row-item { background: #0f1a24; border-color: #2c3a4a; }
    html[data-bs-theme=dark] .pc-ded .row-item:hover { background: #16222e; border-color: var(--pc-ring); }
    html[data-bs-theme=dark] .pc-empty { background: rgba(255,255,255,.03); border-color: #2c3a4a; }

    html[data-bs-theme=dark] .pc-theme-toggle {
        background: rgba(26,36,48,.85); border-color: rgba(255,255,255,.12);
        color: var(--pc-accent-2); box-shadow: 0 6px 18px rgba(0,0,0,.5);
    }

    /* results partial (AJAX-injected) — overridden via higher specificity */
    html[data-bs-theme=dark] .pcr-card { background: var(--pc-card); border-color: rgba(255,255,255,.08); box-shadow: 0 12px 34px rgba(0,0,0,.45); }
    html[data-bs-theme=dark] .pcr-row { border-bottom-color: #2c3a4a; }
    html[data-bs-theme=dark] .pcr-row .nm b { color: var(--pc-ink); }
    html[data-bs-theme=dark] .pcr-row .nm span { color: var(--pc-muted); }
    html[data-bs-theme=dark] .pcr-sub .pcr-tile { background: #0f1a24; border-color: #2c3a4a; }
    html[data-bs-theme=dark] .pcr-tile .k { color: var(--pc-muted); }
    html[data-bs-theme=dark] .pcr-tile .v { color: var(--pc-ink); }
    html[data-bs-theme=dark] .pcr-total { background: #0b1219; }