/* Profile controls and little milestone badges use the app's own vanilla panels. */
.fkm-profile-settings {
    --profile-ink: #f6f7ff;
    color: var(--profile-ink);
    margin-bottom: 1.75rem;
    padding: 1.15rem;
    border: 1px solid #b4b5ef4a;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #7778bc1a, #3d92921a);
    font-size: .93rem;
    line-height: 1.6;
}
.fkm-profile-settings h3 { font-size: 1.15rem; margin: 0 0 .7rem; color: #d5d4ff; }
.fkm-profile-settings h4 { font-size: 1rem; margin: 0 0 .5rem; }
.fkm-profile-settings p { margin: .5rem 0 .9rem; }
.fkm-profile-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.fkm-profile-settings label { display: block; font-weight: 600; }
.fkm-profile-settings label > span { font-weight: 400; }
.fkm-profile-settings input:not([type=checkbox]), .fkm-profile-settings select, .fkm-profile-settings textarea {
    color-scheme: dark;
    display: block;
    width: 100%; min-width: 0;
    margin-top: .35rem;
    padding: .7rem .75rem;
    color: #f7f8ff;
    background: #171d30;
    border: 1px solid #9ba6c375;
    border-radius: .65rem;
    font: inherit;
}
.fkm-profile-settings :is(input, textarea)::placeholder { color: #b3bdd3; opacity: 1; }
.fkm-profile-settings :is(input, select, textarea):disabled { color: #c7cfdf; -webkit-text-fill-color: #c7cfdf; background: #242c40; opacity: 1; }
.fkm-profile-settings select option { color: #f7f8ff; background: #171d30; }
.fkm-profile-settings :is(input, select, textarea, button, summary, a):focus-visible,
.fkm-badges-panel button:focus-visible { outline: 3px solid #91dcf1; outline-offset: 3px; }
.fkm-profile-settings .fkm-profile-choice { display: flex; align-items: flex-start; gap: .65rem; margin: 1rem 0 .5rem; }
.fkm-profile-choice input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: .2rem; accent-color: #a7a0fc; }
.fkm-profile-help { font-size: .82rem; color: #bec9df; }
.fkm-profile-help a { color: #a5e2f4; }
.fkm-profile-actions { display: flex; gap: .65rem; flex-wrap: wrap; margin-top: .9rem; }
.fkm-profile-settings button {
    min-height: 44px;
    padding: .65rem .9rem;
    background: #b5afff;
    color: #191d38;
    border: 1px solid #b5afff;
    border-radius: .7rem;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.fkm-profile-settings button.fkm-profile-secondary { background: #202b42; color: #e4eeff; border-color: #9aaac469; }
.fkm-profile-settings button.fkm-profile-danger { color: #ffd9db; background: #542a3b; border-color: #e393a27d; }
.fkm-profile-settings button:disabled { opacity: .55; cursor: wait; }
.fkm-profile-status { min-height: 1.5rem; color: #a9e6c8; }
.fkm-profile-status[data-error=true] { color: #ffd6ad; }
.fkm-profile-backup { padding: 1rem; margin: 1rem 0; border: 1px solid #e7c98c86; border-radius: .85rem; background: #393028; }
.fkm-profile-backup input { font-family: ui-monospace, monospace !important; font-size: .88rem !important; }
.fkm-profile-details { padding: 1rem 0; border-top: 1px solid #aab8d332; }
.fkm-profile-details summary { cursor: pointer; font-weight: 700; color: #d4d8f8; }
.fkm-profile-details > button { margin-top: .6rem; }
.fkm-badges-panel {
    width: min(100%, 56rem);
    color: #f4f5ff;
    background: #172039;
    background-image: radial-gradient(ellipse at top right, #927ddb25, transparent 55%), radial-gradient(ellipse at bottom left, #54b8ac18, transparent 60%);
}
.fkm-badges-header { padding: max(1.2rem, env(safe-area-inset-top)) 1.4rem 1.2rem; border-bottom: 1px solid #c6caf51f; }
.fkm-badges-header h2 { margin: .3rem 0 0; font-size: clamp(1.2rem, 4vw, 1.65rem); font-weight: 700; }
.fkm-profile-eyebrow { margin: 0; color: #bdc3f0; font-size: .76rem; letter-spacing: .06em; }
.fkm-profile-close { width: 44px; height: 44px; flex: 0 0 auto; border: 1px solid #c9cff64d; border-radius: 50%; background: #dbe2ff12; color: #fff; font: 1.6rem/1 sans-serif; cursor: pointer; }
.fkm-badges-body { padding: 1.3rem 1.4rem max(1.5rem, env(safe-area-inset-bottom)); }
.fkm-badges-intro { display: flex; gap: 1rem; align-items: center; padding: 1.1rem; background: #d7dfff0b; border-radius: 1.1rem; }
.fkm-intro-star { color: #f7db96; font-size: 3.1rem; line-height: 1; }
.fkm-badges-intro h3 { margin: 0 0 .4rem; font-size: 1.2rem; }
.fkm-badges-intro p { margin: 0; color: #c4cfe6; font-size: .9rem; line-height: 1.6; }
.fkm-badges-summary { margin: 1.3rem 0 1rem; color: #dfdbff; font-size: .9rem; }
.fkm-milestone-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin: 1rem 0; }
.fkm-milestone-metrics div { display: flex; flex-direction: column-reverse; padding: .8rem .5rem; border: 1px solid #c1caf124; border-radius: .8rem; text-align: center; background: #d7dfff08; }
.fkm-milestone-metrics dt { color: #c0cbe1; font-size: .69rem; font-weight: 400; }
.fkm-milestone-metrics dd { color: #ede7ff; font-size: 1.3rem; font-weight: 700; margin: 0 0 .2rem; }
.fkm-badge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.fkm-badge-card { padding: 1rem .8rem; text-align: center; border: 1px solid #c1caf12b; border-radius: 1rem; background: #a8b7dd09; display: flex; align-items: center; flex-direction: column; }
.fkm-badge-card.is-earned { border-color: color-mix(in srgb, var(--badge-color) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--badge-color) 13%, transparent), #a8b7dd08); }
.fkm-badge-art { width: 104px; max-width: 80%; margin-bottom: .6rem; filter: saturate(.35); opacity: .72; }
.is-earned .fkm-badge-art { filter: drop-shadow(0 4px 13px color-mix(in srgb, var(--badge-color) 25%, transparent)); opacity: 1; }
.fkm-badge-art svg { width: 100%; height: auto; display: block; }
.fkm-badge-ribbon { fill: color-mix(in srgb, var(--badge-color) 55%, #202748); }
.fkm-badge-face { fill: color-mix(in srgb, var(--badge-color) 22%, #242b47); stroke: var(--badge-color); stroke-width: 2; }
.fkm-badge-edge { fill: none; stroke: var(--badge-color); stroke-width: .8; opacity: .5; }
.fkm-badge-symbol { fill: none; stroke: var(--badge-color); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.fkm-badge-card :is(h3, h4) { margin: 0 0 .45rem; color: #f2f2ff; font-size: .97rem; font-weight: 700; }
.fkm-badge-card p { margin: 0 0 1rem; color: #c0cbe1; font-size: .8rem; line-height: 1.5; flex: 1; }
.fkm-badge-card progress { appearance: none; width: 100%; height: .38rem; border: 0; border-radius: 1rem; overflow: hidden; background: #11182a; accent-color: var(--badge-color); }
.fkm-badge-card progress::-webkit-progress-bar { background: #11182a; }
.fkm-badge-card progress::-webkit-progress-value { background: var(--badge-color); border-radius: 1rem; }
.fkm-badge-card progress::-moz-progress-bar { background: var(--badge-color); border-radius: 1rem; }
.fkm-badge-progress-label { display: block; margin-top: .55rem; font-size: .73rem; color: #c0cbe1; }
.is-earned .fkm-badge-progress-label { color: var(--badge-color); }
.fkm-badges-footnote { margin: 1.5rem 0 .25rem; font-size: .78rem; line-height: 1.6; color: #adbbd6; }
/* Metals distinguish levels while the original shield and family colors stay familiar. */
[data-badge-tier=bronze] { --badge-metal: #d9a578; --badge-metal-light: #ffe3c7; }
[data-badge-tier=silver] { --badge-metal: #c9d5e8; --badge-metal-light: #f5f8ff; }
[data-badge-tier=gold] { --badge-metal: #efca70; --badge-metal-light: #fff0bc; }
[data-badge-tier=platinum] { --badge-metal: #a8e0d4; --badge-metal-light: #e2fff8; }
[data-badge-tier=diamond] { --badge-metal: #a6d6ff; --badge-metal-light: #f1e2ff; }
.fkm-badge-filters { display: flex; flex-wrap: wrap; gap: .45rem; margin: .9rem 0 1.25rem; }
.fkm-badge-filters button {
    color: #d5e1f5; background: #202d48; border: 1px solid #b1c3e33d;
    border-radius: 2rem; padding: .6rem .8rem; min-height: 44px;
    font: inherit; font-size: .8rem; cursor: pointer;
}
.fkm-badge-filters button.is-active { color: #18213b; background: #c7c0ff; border-color: #d7d2ff; font-weight: 700; }
.fkm-badge-filters button:hover { border-color: #dfdbff; }
.fkm-badge-tier-heading { grid-column: 1 / -1; display: flex; gap: .7rem; flex-wrap: wrap; justify-content: space-between; align-items: baseline; padding: .8rem .2rem .35rem; border-bottom: 1px solid color-mix(in srgb, var(--badge-metal) 35%, transparent); }
.fkm-badge-tier-heading h3 { margin: 0; font-size: 1.04rem; font-weight: 700; color: var(--badge-metal-light); }
.fkm-badge-tier-heading span { color: #bdcbe2; font-size: .76rem; }
.fkm-badge-labels { display: flex; width: 100%; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .3rem; margin: 0 0 .5rem; }
.fkm-badge-tier-label { color: var(--badge-metal-light); font-size: .64rem; font-weight: 700; letter-spacing: .03em; }
.fkm-badge-level-chip { padding: .17rem .35rem; color: #d4dff2; background: #101a2eaa; border: 1px solid #cbdcf329; border-radius: .35rem; font-size: .59rem; line-height: 1.5; }
.fkm-badge-family { color: #bac9e1; font-size: .67rem; margin: 0 0 .4rem; }
.fkm-badge-card[data-badge-tier] { position: relative; border-color: color-mix(in srgb, var(--badge-metal) 25%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--badge-metal) 7%, transparent), #a8b7dd05); }
.fkm-badge-card[data-badge-tier].is-earned { border-color: color-mix(in srgb, var(--badge-metal) 60%, transparent); background: linear-gradient(150deg, color-mix(in srgb, var(--badge-metal) 16%, transparent), #a8b7dd08); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--badge-metal-light) 15%, transparent); }
.fkm-badge-card[data-badge-tier] .fkm-badge-face { fill: color-mix(in srgb, var(--badge-metal) 18%, #242b47); stroke: var(--badge-metal); }
.fkm-badge-card[data-badge-tier] .fkm-badge-edge { stroke: var(--badge-metal-light); opacity: .65; }
.fkm-badge-card[data-badge-tier] .fkm-badge-ribbon { fill: color-mix(in srgb, var(--badge-metal) 45%, #202748); }
.fkm-badge-card[data-badge-tier=diamond].is-earned { box-shadow: inset 0 1px 0 #e2eeff35, 0 0 1.2rem #b4c8ff0d; }
.fkm-badge-card[data-badge-tier=diamond] .fkm-badge-edge { stroke-width: 1.5; stroke-dasharray: 3 2; }
.fkm-badge-card[data-badge-tier=platinum] .fkm-badge-edge { stroke-width: 1.25; }
.fkm-badge-streak-status { color: #c6d3e8; font-size: .77rem; line-height: 1.7; margin: -.2rem 0 1rem; }
.fkm-badge-rules { padding: 1rem; margin: 1.5rem 0 .5rem; background: #d7dfff08; border: 1px solid #bdcbe32e; border-radius: .85rem; color: #bdcbe1; font-size: .78rem; line-height: 1.7; }
.fkm-badge-rules summary { color: #e1dcff; font-weight: 700; cursor: pointer; min-height: 32px; }
.fkm-badge-rules p { margin: .6rem 0 0; }
@media (max-width: 620px) {
    .fkm-profile-fields { grid-template-columns: 1fr; }
    .fkm-milestone-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fkm-badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
    .fkm-badges-body { padding: 1rem; }
    .fkm-badges-header { padding-left: 1rem; padding-right: 1rem; }
    .fkm-badge-card { padding: .85rem .7rem; }
}
@media (max-width: 340px) { .fkm-badge-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fkm-badges-panel { transition: none; } }