@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500;600&family=Roboto:wght@400;500;700&family=Roboto+Slab:wght@400;600&display=swap');

/* ── Reset ─────────────────────────────────────────── */
.kpr-wrapper {
    font-size: 16px !important;
    line-height: 1.5;
}
.kpr-wrapper .kpr-body,
.kpr-wrapper .kpr-block,
.kpr-wrapper .kpr-result,
.kpr-wrapper .kpr-chart-card,
.kpr-wrapper .kpr-btn-row,
.kpr-wrapper .kpr-charts {
    font-size: 16px;
}
.kpr-wrapper *, .kpr-wrapper *::before, .kpr-wrapper *::after {
    box-sizing: border-box; margin: 0; padding: 0;
}

/* ════════════════════════════════════════════════════
   MOTYW: KLASYCZNY
   ════════════════════════════════════════════════════ */
.kpr-wrapper[data-theme="klasyczny"] {
    font-family: 'DM Sans', sans-serif;
    background: #f5f6fa;
    padding: 2em 1em;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 32px rgba(26,43,74,.10);
    max-width: 680px;
    margin: 0 auto;
    overflow: hidden;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-header {
    background: #1a2b4a;
    padding: 1.6em 2em;
    position: relative;
    overflow: hidden;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-header::after {
    content: '';
    position: absolute;
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: rgba(255,255,255,.04);
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-header h2 {
    font-family: 'DM Serif Display', serif;
    color: #fff; font-size: 1.35em; font-weight: 400; line-height: 1.3;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-header p { color: rgba(255,255,255,.6); font-size: .82em; margin-top: .3em; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-body { padding: 1.8em 2em; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-block {
    margin-bottom: 1.4em; padding: 1.2em 1.4em;
    border: 1.5px solid #dde1ee; border-radius: 10px; transition: border-color .2s;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-block:focus-within { border-color: #3a6fd8; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-block-label {
    font-size: .78em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: #2250a8; margin-bottom: .9em; display: flex; align-items: center; gap: .5em;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-block-label::after { content: ''; flex: 1; height: 1px; background: #dde1ee; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-weight { font-size: .68em; color: #94a3b8; font-weight: 500; text-transform: none; margin-left: .2em; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-select-row label,
.kpr-wrapper[data-theme="klasyczny"] .kpr-field label { display: block; font-size: .78em; color: #6b7a99; margin-bottom: .3em; font-weight: 500; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-select,
.kpr-wrapper[data-theme="klasyczny"] .kpr-field input {
    width: 100%; padding: .55em .8em;
    border: 1.5px solid #dde1ee; border-radius: 7px;
    font-family: 'DM Sans', sans-serif; font-size: .88em; color: #1a2b4a;
    background: #f5f6fa; transition: border-color .2s; -moz-appearance: textfield;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-field input { font-size: 1em; font-weight: 600; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7a99' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-select:focus,
.kpr-wrapper[data-theme="klasyczny"] .kpr-field input:focus { outline: none; border-color: #3a6fd8; background: #fff; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-badge {
    display: inline-block; font-size: .7em; background: #1a2b4a; color: #e8b84b;
    border-radius: 4px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; font-weight: 700;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-error {
    margin-top: 1em; padding: .7em 1em; background: #fdf0f0;
    border: 1.5px solid #f5c6c6; border-radius: 8px; color: #8b1a1a; font-size: .85em; font-weight: 500;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-btn-row { display: flex; gap: .6em; margin-top: 1.2em; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-btn {
    flex: 1; padding: .85em; background: #2250a8; color: #fff; border: none; border-radius: 10px;
    font-family: 'DM Sans', sans-serif; font-size: 1em; font-weight: 600; cursor: pointer;
    transition: background .2s, transform .1s;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-btn:hover { background: #3a6fd8; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-btn:active { transform: scale(.98); }
.kpr-wrapper[data-theme="klasyczny"] .kpr-btn-reset {
    flex: 0 0 auto; background: transparent; color: #6b7a99; border: 1.5px solid #dde1ee;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-btn-reset:hover { background: #f5f6fa; color: #1a2b4a; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-result {
    margin-top: 1.4em; background: #eef8f2; border: 1.5px solid #a8d9be;
    border-radius: 10px; padding: 1.2em 1.4em; animation: kprFade .3s ease;
}
.kpr-wrapper[data-theme="klasyczny"] .kpr-result-label { font-size: .78em; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #1a7a4a; margin-bottom: .3em; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-result-score { font-family: 'DM Serif Display', serif; font-size: 2.8em; color: #1a2b4a; line-height: 1; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-result-max { font-size: .82em; color: #6b7a99; margin-top: .3em; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-threshold { margin-top: .7em; padding: .5em .8em; border-radius: 7px; font-size: .85em; font-weight: 600; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-threshold.pass { background: #d4edda; color: #155724; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-threshold.fail { background: #f8d7da; color: #721c24; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-breakdown { margin-top: .9em; font-size: .82em; color: #6b7a99; border-top: 1px solid #c5e3d0; padding-top: .7em; line-height: 1.8; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-breakdown .kv { color: #1a7a4a; font-weight: 600; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-level { font-size: .75em; color: #94a3b8; font-style: normal; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-charts { margin-top: 1.2em; display: flex; flex-direction: column; gap: 1em; animation: kprFade .4s ease; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-chart-card { background: #fff; border: 1.5px solid #dde1ee; border-radius: 10px; padding: 1.2em 1.4em; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-chart-title { font-size: .75em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #6b7a99; margin-bottom: 1em; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-gauge-pct { font-family: 'DM Serif Display', serif; font-size: 2em; fill: #1a2b4a; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-gauge-sub { font-size: .75em; fill: #6b7a99; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-bar-name { color: #1a2b4a; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-bar-val  { color: #2250a8; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-bar-track { background: #f5f6fa; }
.kpr-wrapper[data-theme="klasyczny"] .kpr-note { font-size: .75em; color: #6b7a99; margin-top: 1em; line-height: 1.5; border-top: 1px solid #dde1ee; padding-top: .8em; }

/* ════════════════════════════════════════════════════
   MOTYW: MINIMAL
   ════════════════════════════════════════════════════ */
.kpr-wrapper[data-theme="minimal"] {
    font-family: 'DM Sans', sans-serif;
    background: #fff;
    padding: 2.5em 1em;
}
.kpr-wrapper[data-theme="minimal"] .kpr-card { max-width: 620px; margin: 0 auto; }
.kpr-wrapper[data-theme="minimal"] .kpr-header { padding: 0 0 2em; border-bottom: 2px solid #0f172a; margin-bottom: 2em; }
.kpr-wrapper[data-theme="minimal"] .kpr-header h2 { font-family: 'DM Serif Display', serif; color: #0f172a; font-size: 1.7em; font-weight: 400; line-height: 1.25; }
.kpr-wrapper[data-theme="minimal"] .kpr-header p { color: #94a3b8; font-size: .85em; margin-top: .4em; }
.kpr-wrapper[data-theme="minimal"] .kpr-body { padding: 0; }
.kpr-wrapper[data-theme="minimal"] .kpr-block { margin-bottom: 1.8em; }
.kpr-wrapper[data-theme="minimal"] .kpr-block-label { font-size: .7em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-bottom: 1em; display: flex; align-items: center; gap: .6em; }
.kpr-wrapper[data-theme="minimal"] .kpr-block-label::after { content: ''; flex: 1; height: 1px; background: #f1f5f9; }
.kpr-wrapper[data-theme="minimal"] .kpr-weight { font-size: .68em; color: #cbd5e1; font-weight: 500; text-transform: none; margin-left: .2em; }
.kpr-wrapper[data-theme="minimal"] .kpr-select-row label,
.kpr-wrapper[data-theme="minimal"] .kpr-field label { display: block; font-size: .75em; color: #94a3b8; margin-bottom: .3em; font-weight: 500; letter-spacing: .02em; }
.kpr-wrapper[data-theme="minimal"] .kpr-select,
.kpr-wrapper[data-theme="minimal"] .kpr-field input {
    width: 100%; padding: .6em 0;
    border: none; border-bottom: 1.5px solid #e2e8f0; border-radius: 0;
    font-family: 'DM Sans', sans-serif; font-size: .92em; color: #0f172a;
    background: transparent; transition: border-color .15s; -moz-appearance: textfield;
}
.kpr-wrapper[data-theme="minimal"] .kpr-field input { font-size: 1.1em; font-weight: 600; }
.kpr-wrapper[data-theme="minimal"] .kpr-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 4px center; cursor: pointer;
}
.kpr-wrapper[data-theme="minimal"] .kpr-select:focus,
.kpr-wrapper[data-theme="minimal"] .kpr-field input:focus { outline: none; border-bottom-color: #0f172a; }
.kpr-wrapper[data-theme="minimal"] .kpr-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.kpr-wrapper[data-theme="minimal"] .kpr-field input::placeholder { color: #cbd5e1; font-weight: 400; }
.kpr-wrapper[data-theme="minimal"] .kpr-badge { display: inline-block; font-size: .65em; background: #f8fafc; color: #64748b; border: 1px solid #e2e8f0; border-radius: 3px; padding: 1px 5px; margin-left: 4px; vertical-align: middle; font-weight: 600; }
.kpr-wrapper[data-theme="minimal"] .kpr-error { margin-top: 1em; padding: .7em 0; border-top: 2px solid #fca5a5; color: #dc2626; font-size: .85em; font-weight: 500; }
.kpr-wrapper[data-theme="minimal"] .kpr-btn-row { display: flex; gap: .8em; margin-top: 2em; padding-top: 1.5em; border-top: 1.5px solid #f1f5f9; }
.kpr-wrapper[data-theme="minimal"] .kpr-btn { flex: 1; padding: .85em 1.5em; background: #0f172a; color: #fff; border: none; border-radius: 6px; font-family: 'DM Sans', sans-serif; font-size: .92em; font-weight: 600; letter-spacing: .02em; cursor: pointer; transition: background .15s, transform .1s; }
.kpr-wrapper[data-theme="minimal"] .kpr-btn:hover { background: #1e293b; }
.kpr-wrapper[data-theme="minimal"] .kpr-btn:active { transform: scale(.99); }
.kpr-wrapper[data-theme="minimal"] .kpr-btn-reset { flex: 0 0 auto; background: transparent; color: #94a3b8; border: 1.5px solid #e2e8f0; }
.kpr-wrapper[data-theme="minimal"] .kpr-btn-reset:hover { background: #f8fafc; color: #475569; }
.kpr-wrapper[data-theme="minimal"] .kpr-result { margin-top: 2em; padding-top: 1.5em; border-top: 2px solid #0f172a; animation: kprFade .25s ease; }
.kpr-wrapper[data-theme="minimal"] .kpr-result-label { font-size: .7em; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #94a3b8; margin-bottom: .5em; }
.kpr-wrapper[data-theme="minimal"] .kpr-result-score { font-family: 'DM Serif Display', serif; font-size: 3.5em; color: #0f172a; line-height: 1; }
.kpr-wrapper[data-theme="minimal"] .kpr-result-max { font-size: .82em; color: #94a3b8; margin-top: .3em; }
.kpr-wrapper[data-theme="minimal"] .kpr-threshold { margin-top: .8em; padding: .5em 0; font-size: .85em; font-weight: 600; border-top: 1px solid #f1f5f9; }
.kpr-wrapper[data-theme="minimal"] .kpr-threshold.pass { color: #16a34a; }
.kpr-wrapper[data-theme="minimal"] .kpr-threshold.fail { color: #dc2626; }
.kpr-wrapper[data-theme="minimal"] .kpr-breakdown { margin-top: .8em; font-size: .82em; color: #94a3b8; border-top: 1px solid #f1f5f9; padding-top: .7em; line-height: 2; }
.kpr-wrapper[data-theme="minimal"] .kpr-breakdown .kv { color: #0f172a; font-weight: 600; }
.kpr-wrapper[data-theme="minimal"] .kpr-level { font-size: .73em; color: #cbd5e1; font-style: normal; }
.kpr-wrapper[data-theme="minimal"] .kpr-charts { margin-top: 2em; display: flex; flex-direction: column; gap: 1.5em; animation: kprFade .3s ease; }
.kpr-wrapper[data-theme="minimal"] .kpr-chart-card { border-top: 1px solid #f1f5f9; padding-top: 1.2em; }
.kpr-wrapper[data-theme="minimal"] .kpr-chart-title { font-size: .7em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #94a3b8; margin-bottom: 1.2em; }
.kpr-wrapper[data-theme="minimal"] .kpr-gauge-pct { font-family: 'DM Serif Display', serif; font-size: 2em; fill: #0f172a; }
.kpr-wrapper[data-theme="minimal"] .kpr-gauge-sub { font-size: .75em; fill: #94a3b8; }
.kpr-wrapper[data-theme="minimal"] .kpr-bar-name { color: #475569; }
.kpr-wrapper[data-theme="minimal"] .kpr-bar-val  { color: #0f172a; }
.kpr-wrapper[data-theme="minimal"] .kpr-bar-track { background: #f1f5f9; height: 4px; }
.kpr-wrapper[data-theme="minimal"] .kpr-note { font-size: .75em; color: #cbd5e1; margin-top: 1.5em; line-height: 1.6; border-top: 1px solid #f1f5f9; padding-top: .8em; }

/* ════════════════════════════════════════════════════
   MOTYW: MATERIAL
   ════════════════════════════════════════════════════ */
.kpr-wrapper[data-theme="material"] {
    font-family: 'Roboto', sans-serif;
    background: #f5f5f5;
    padding: 2em 1em;
    -webkit-font-smoothing: antialiased;
}
.kpr-wrapper[data-theme="material"] .kpr-card { background: #fff; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.14); max-width: 640px; margin: 0 auto; overflow: hidden; }
.kpr-wrapper[data-theme="material"] .kpr-header { background: #1565c0; padding: 1.5em 1.5em 1.25em; }
.kpr-wrapper[data-theme="material"] .kpr-header h2 { font-family: 'Roboto Slab', serif; color: #fff; font-size: 1.35em; font-weight: 400; line-height: 1.3; letter-spacing: .01em; }
.kpr-wrapper[data-theme="material"] .kpr-header p { color: rgba(255,255,255,.75); font-size: .82em; margin-top: .35em; }
.kpr-wrapper[data-theme="material"] .kpr-body { padding: 1.5em; }
.kpr-wrapper[data-theme="material"] .kpr-block { margin-bottom: 1.25em; border: 1px solid #e0e0e0; border-radius: 4px; padding: 1em 1.25em 1.25em; transition: border-color .2s; }
.kpr-wrapper[data-theme="material"] .kpr-block:focus-within { border-color: #1565c0; }
.kpr-wrapper[data-theme="material"] .kpr-block-label { font-size: .69em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #1565c0; margin-bottom: .9em; display: flex; align-items: center; gap: .5em; }
.kpr-wrapper[data-theme="material"] .kpr-block-label::after { content: ''; flex: 1; height: 1px; background: #e0e0e0; }
.kpr-wrapper[data-theme="material"] .kpr-weight { font-size: .65em; color: #9e9e9e; font-weight: 500; text-transform: none; margin-left: .2em; }
.kpr-wrapper[data-theme="material"] .kpr-select-row label,
.kpr-wrapper[data-theme="material"] .kpr-field label { display: block; font-size: .72em; color: #757575; margin-bottom: .35em; font-weight: 500; letter-spacing: .03em; }
.kpr-wrapper[data-theme="material"] .kpr-select,
.kpr-wrapper[data-theme="material"] .kpr-field input {
    width: 100%; padding: .6em .75em;
    border: 1px solid #bdbdbd; border-radius: 4px;
    font-family: 'Roboto', sans-serif; font-size: .9em; color: #212121;
    background: #fff; transition: border-color .2s; -moz-appearance: textfield;
}
.kpr-wrapper[data-theme="material"] .kpr-field input { font-size: 1em; font-weight: 500; }
.kpr-wrapper[data-theme="material"] .kpr-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 10px center; cursor: pointer;
}
.kpr-wrapper[data-theme="material"] .kpr-select:focus,
.kpr-wrapper[data-theme="material"] .kpr-field input:focus { outline: none; border-color: #1565c0; border-width: 2px; }
.kpr-wrapper[data-theme="material"] .kpr-field input::-webkit-inner-spin-button { -webkit-appearance: none; }
.kpr-wrapper[data-theme="material"] .kpr-field input::placeholder { color: #bdbdbd; font-weight: 400; }
.kpr-wrapper[data-theme="material"] .kpr-badge { display: inline-block; font-size: .65em; background: #e3f2fd; color: #1565c0; border-radius: 12px; padding: 1px 7px; margin-left: 4px; vertical-align: middle; font-weight: 700; }
.kpr-wrapper[data-theme="material"] .kpr-error { margin-top: .75em; padding: .75em 1em; background: #ffebee; border-left: 4px solid #c62828; border-radius: 0 4px 4px 0; color: #c62828; font-size: .84em; font-weight: 500; }
.kpr-wrapper[data-theme="material"] .kpr-btn-row { display: flex; gap: .75em; margin-top: 1.5em; }
.kpr-wrapper[data-theme="material"] .kpr-btn { flex: 1; padding: .72em 1.5em; background: #1565c0; color: #fff; border: none; border-radius: 4px; font-family: 'Roboto', sans-serif; font-size: .875em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; box-shadow: 0 2px 4px rgba(21,101,192,.4); transition: background .2s, box-shadow .2s, transform .1s; }
.kpr-wrapper[data-theme="material"] .kpr-btn:hover { background: #1976d2; box-shadow: 0 4px 8px rgba(21,101,192,.4); }
.kpr-wrapper[data-theme="material"] .kpr-btn:active { transform: scale(.99); }
.kpr-wrapper[data-theme="material"] .kpr-btn-reset { flex: 0 0 auto; background: transparent; color: #757575; border: 1px solid #bdbdbd; box-shadow: none; }
.kpr-wrapper[data-theme="material"] .kpr-btn-reset:hover { background: #f5f5f5; box-shadow: none; }
.kpr-wrapper[data-theme="material"] .kpr-result { margin-top: 1.5em; background: #fff; border: 1px solid #e0e0e0; border-top: 4px solid #1565c0; border-radius: 0 0 4px 4px; padding: 1.25em 1.5em; animation: kprFade .25s ease; }
.kpr-wrapper[data-theme="material"] .kpr-result-label { font-size: .69em; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: #757575; margin-bottom: .4em; }
.kpr-wrapper[data-theme="material"] .kpr-result-score { font-family: 'Roboto Slab', serif; font-size: 3.2em; color: #1565c0; line-height: 1; font-weight: 600; }
.kpr-wrapper[data-theme="material"] .kpr-result-max { font-size: .8em; color: #9e9e9e; margin-top: .3em; }
.kpr-wrapper[data-theme="material"] .kpr-threshold { margin-top: .75em; padding: .5em .9em; border-radius: 4px; font-size: .84em; font-weight: 700; }
.kpr-wrapper[data-theme="material"] .kpr-threshold.pass { background: #e8f5e9; color: #2e7d32; }
.kpr-wrapper[data-theme="material"] .kpr-threshold.fail { background: #ffebee; color: #c62828; }
.kpr-wrapper[data-theme="material"] .kpr-breakdown { margin-top: .9em; font-size: .8em; color: #757575; border-top: 1px solid #f5f5f5; padding-top: .7em; line-height: 2; }
.kpr-wrapper[data-theme="material"] .kpr-breakdown .kv { color: #1565c0; font-weight: 700; }
.kpr-wrapper[data-theme="material"] .kpr-level { font-size: .72em; color: #bdbdbd; font-style: normal; }
.kpr-wrapper[data-theme="material"] .kpr-charts { margin-top: 1.25em; display: flex; flex-direction: column; gap: 1em; animation: kprFade .3s ease; }
.kpr-wrapper[data-theme="material"] .kpr-chart-card { background: #fff; border: 1px solid #e0e0e0; border-radius: 4px; padding: 1.25em 1.5em; }
.kpr-wrapper[data-theme="material"] .kpr-chart-title { font-size: .69em; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9e9e9e; margin-bottom: 1em; }
.kpr-wrapper[data-theme="material"] .kpr-gauge-pct { font-family: 'Roboto Slab', serif; font-size: 2em; fill: #1565c0; font-weight: 600; }
.kpr-wrapper[data-theme="material"] .kpr-gauge-sub { font-size: .75em; fill: #9e9e9e; }
.kpr-wrapper[data-theme="material"] .kpr-bar-name { color: #424242; }
.kpr-wrapper[data-theme="material"] .kpr-bar-val  { color: #1565c0; }
.kpr-wrapper[data-theme="material"] .kpr-bar-track { background: #e3f2fd; height: 6px; }
.kpr-wrapper[data-theme="material"] .kpr-note { font-size: .74em; color: #9e9e9e; margin-top: 1.25em; line-height: 1.6; border-top: 1px solid #f5f5f5; padding-top: .75em; }

/* ── Brand ─────────────────────────────────────────── */
.kpr-brand a { color: inherit; text-decoration: none; }
.kpr-brand a:hover { text-decoration: underline; }
.kpr-brand {
    text-align: right;
    font-size: .65em;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #c0c8d8;
    padding: .5em 1.5em .7em;
    opacity: .7;
}

/* ── Wspólne ────────────────────────────────────────── */
.kpr-row { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; }
.kpr-row.single { grid-template-columns: 1fr; }
.kpr-select-row { margin-bottom: .9em; }
.kpr-gauge-wrap { display: flex; justify-content: center; }
.kpr-gauge-pct { text-anchor: middle; dominant-baseline: auto; }
.kpr-gauge-sub { text-anchor: middle; }
.kpr-bar-row { margin-bottom: .75em; }
.kpr-bar-meta { display: flex; justify-content: space-between; font-size: .8em; margin-bottom: .3em; }
.kpr-bar-name { font-weight: 500; }
.kpr-bar-val  { font-weight: 700; }
.kpr-bar-track { height: 10px; border-radius: 99px; overflow: hidden; }
.kpr-bar-fill  { height: 100%; border-radius: 99px; width: 0; transition: width .7s cubic-bezier(.4,0,.2,1); }

@keyframes kprFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (max-width: 500px) {
    .kpr-wrapper[data-theme="klasyczny"] .kpr-body,
    .kpr-wrapper[data-theme="material"]  .kpr-body  { padding: 1em; }
    .kpr-wrapper[data-theme="klasyczny"] .kpr-header,
    .kpr-wrapper[data-theme="material"]  .kpr-header { padding: 1.2em 1em; }
    .kpr-wrapper { padding: 1em .5em !important; }
    .kpr-row { grid-template-columns: 1fr; }
}