/* ============================================================
   Komputerowka — Profil Uzytkownika
   Ten sam jezyk wizualny co Logowanie/Rejestracja i Panel Nauczyciela
   (Space Grotesk, musztardowy akcent, ciemna zielen), ale samodzielny.
   ============================================================ */

.kpu-profile, .kpu-guard {
    --kpu-board: #1e352d;
    --kpu-ink: #262a22;
    --kpu-muted: #6b7266;
    --kpu-paper: #fbf8f1;
    --kpu-line: #e6e0cf;
    --kpu-accent: #e3a93f;
    --kpu-accent-dark: #c3872a;
    --kpu-board-1: #2a4a3e;
    --kpu-board-2: #1e352d;
    max-width: 720px;
    margin: 24px auto;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--kpu-ink);
}

/* --- Motywy kolorystyczne (patrz includes/helpers.php -> kpu_get_theme_presets(),
   wartosci MUSZA sie zgadzac z tamtymi) --- */
.kpu-profile[data-theme="oceaniczny"]  { --kpu-accent:#3fa9c8; --kpu-accent-dark:#2a87a3; --kpu-board-1:#1e4a5c; --kpu-board-2:#15323f; }
.kpu-profile[data-theme="wiosenny"]    { --kpu-accent:#e8749a; --kpu-accent-dark:#c9557c; --kpu-board-1:#2f5c3f; --kpu-board-2:#1f402c; }
.kpu-profile[data-theme="sloneczny"]   { --kpu-accent:#f0b429; --kpu-accent-dark:#d1930f; --kpu-board-1:#5c3f1e; --kpu-board-2:#3f2a15; }
.kpu-profile[data-theme="fioletowy"]   { --kpu-accent:#a76ce0; --kpu-accent-dark:#8a4fc4; --kpu-board-1:#3a2a5c; --kpu-board-2:#271b3f; }
.kpu-profile[data-theme="mietowy"]     { --kpu-accent:#3fc7a0; --kpu-accent-dark:#2ba381; --kpu-board-1:#1e4a4a; --kpu-board-2:#153232; }

.kpu-guard { text-align: center; background: var(--kpu-paper, #fbf8f1); padding: 40px 20px; border-radius: 20px; }

.kpu-cover {
    height: 170px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(135deg, var(--kpu-board-1), var(--kpu-board-2));
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}
.kpu-doodle {
    position: absolute;
    font-size: 26px;
    opacity: .35;
    filter: grayscale(.15);
    animation: kpu-float 5s ease-in-out infinite;
}
.kpu-doodle-1 { top: 18px; right: 60px; animation-delay: 0s; }
.kpu-doodle-2 { top: 60px; right: 130px; font-size: 18px; animation-delay: 1.2s; }
.kpu-doodle-3 { top: 30px; right: 190px; font-size: 20px; animation-delay: 2.4s; }
@keyframes kpu-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-8px) rotate(8deg); }
}
@media (max-width: 480px) { .kpu-doodle-3 { display: none; } }

.kpu-avatar-wrap {
    position: absolute;
    left: 28px;
    bottom: -38px;
}
.kpu-avatar {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: 4px solid var(--kpu-paper);
    outline: 3px solid var(--kpu-accent);
    outline-offset: 2px;
    object-fit: cover;
    background: #fff;
    display: block;
}
.kpu-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kpu-accent);
    color: #2b2110;
    font-size: 34px;
    font-weight: 700;
    font-family: "Space Grotesk", sans-serif;
}

.kpu-header {
    background: var(--kpu-paper);
    border-radius: 0 0 22px 22px;
    padding: 50px 28px 22px;
    box-shadow: 0 4px 14px rgba(30, 53, 45, 0.08);
    margin-bottom: 20px;
}
.kpu-header h1 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 22px;
    margin: 0 0 8px;
}

.kpu-greeting { font-size: 13.5px; color: var(--kpu-ink); margin: 10px 0 2px; font-weight: 500; }

.kpu-role-badge {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    background: #eef1e9;
    color: #33402f;
}
.kpu-role-admin { background: #fde9e8; color: #8f2f26; }
.kpu-role-teacher { background: #eaf4ec; color: #235f34; }
.kpu-role-teacher-pending { background: #fff3d9; color: #8a5b00; }
.kpu-role-student { background: #e8f1fb; color: #1c4e80; }
.kpu-role-user { background: #eef1e9; color: #33402f; }

.kpu-hint { font-size: 12.5px; color: var(--kpu-muted); margin: 8px 0 0; }

.kpu-card {
    background: var(--kpu-paper);
    border-radius: 20px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 4px 14px rgba(30, 53, 45, 0.06);
    border-left: 4px solid var(--kpu-accent);
    transition: box-shadow .2s ease;
}
.kpu-card:hover { box-shadow: 0 8px 22px rgba(30, 53, 45, 0.1); }
.kpu-card h2 {
    font-family: "Space Grotesk", sans-serif;
    font-size: 17px;
    margin: 0 0 16px;
}

.kpu-field { margin-bottom: 14px; }
.kpu-field label { display: block; font-size: 12.5px; font-weight: 600; color: var(--kpu-muted); margin-bottom: 5px; }
.kpu-field input[type=text], .kpu-field input[type=email], .kpu-field input[type=password],
.kpu-field input[type=url], .kpu-field input[type=file], .kpu-field textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8d2c0;
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
    color: var(--kpu-ink);
    font-family: inherit;
}
.kpu-field input:disabled { background: #f0ede2; color: var(--kpu-muted); }
.kpu-field input:focus, .kpu-field textarea:focus { outline: none; border-color: var(--kpu-accent-dark); box-shadow: 0 0 0 3px rgba(227,169,63,.2); }
.kpu-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.kpu-btn {
    display: inline-block;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.kpu-btn-primary { background: var(--kpu-accent); border-color: var(--kpu-accent); color: #2b2110; }
.kpu-btn-primary:hover { background: var(--kpu-accent-dark); border-color: var(--kpu-accent-dark); transform: translateY(-2px) scale(1.02); box-shadow: 0 6px 14px rgba(0,0,0,.12); }
.kpu-btn-primary:active { transform: translateY(0) scale(.98); }

.kpu-msg { padding: 10px 14px; border-radius: 10px; font-size: 13px; margin-bottom: 14px; }
.kpu-msg-error { background: #fbeceb; color: #8f2f26; }
.kpu-msg-success { background: #eaf4ec; color: #235f34; }

.kpu-xp-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.kpu-xp-level { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 16px; }
.kpu-xp-bar { height: 12px; background: #eee; border-radius: 999px; overflow: hidden; }
.kpu-xp-bar-fill { height: 100%; background: linear-gradient(90deg, var(--kpu-accent), var(--kpu-accent-dark)); border-radius: 999px; transition: width .4s ease; }

.kpu-subject-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.kpu-subject-badge { background: #eef1e9; border-radius: 999px; padding: 5px 12px; font-size: 13px; color: #33402f; }

/* --- Wybor motywu kolorystycznego --- */
.kpu-theme-picker { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.kpu-theme-swatch {
    position: relative;
    width: 84px;
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    border-radius: 12px;
    transition: transform .15s ease, background .15s ease;
}
.kpu-theme-swatch::before {
    content: "";
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--kpu-swatch-color, #ccc);
    border: 3px solid transparent;
    box-sizing: border-box;
}
.kpu-theme-swatch:hover { transform: translateY(-2px); background: rgba(0,0,0,.03); }
.kpu-theme-swatch.selected::before { border-color: var(--kpu-ink); box-shadow: 0 0 0 3px #fff inset; }
.kpu-theme-swatch input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.kpu-theme-swatch-label {
    font-size: 11px;
    line-height: 1.3;
    text-align: center;
    color: var(--kpu-muted);
}
.kpu-theme-swatch.selected .kpu-theme-swatch-label { color: var(--kpu-ink); font-weight: 600; }

@media (max-width: 480px) {
    .kpu-profile { margin: 0; }
    .kpu-card, .kpu-header { padding-left: 18px; padding-right: 18px; border-radius: 0; }
    .kpu-cover { border-radius: 0; }
    .kpu-row-2 { grid-template-columns: 1fr; }
    .kpu-theme-picker { gap: 24px 18px; }
}