/* Premium component styling layered over image-skins.css. */
:root[data-image-skin] {
    --skin-button-radius: 14px;
    --skin-card-radius: 22px;
    --skin-control-bg: rgba(var(--skin-panel-rgb), .74);
    --skin-control-hover: rgba(var(--skin-panel-rgb), .94);
    --skin-surface-alpha: .74;
    --skin-surface-strong-alpha: .84;
    --skin-border-strength: 28%;
}

:root[data-image-skin="snoopy-study"] { --skin-button-radius: 10px 18px 10px 18px; --skin-card-radius: 18px 28px 18px 28px; }
:root[data-image-skin="summer-sunflower"] { --skin-button-radius: 999px; --skin-card-radius: 26px; --skin-surface-alpha: .79; --skin-surface-strong-alpha: .88; }
:root[data-image-skin="pool-day"] { --skin-button-radius: 999px; --skin-card-radius: 26px; }
:root[data-image-skin="quiet-room"] { --skin-button-radius: 8px; --skin-card-radius: 12px; }
:root[data-image-skin="sunset-desk"] { --skin-button-radius: 18px 7px 18px 7px; --skin-card-radius: 26px 10px 26px 10px; }
:root[data-image-skin="blossom-reader"] { --skin-button-radius: 20px; --skin-card-radius: 30px; }
:root[data-image-skin="star-friends"] { --skin-button-radius: 12px 22px 12px 22px; --skin-card-radius: 22px 34px 22px 34px; }
:root[data-image-skin="cat-circle"] { --skin-button-radius: 18px; --skin-card-radius: 28px; }
:root[data-image-skin="street-rhythm"] { --skin-button-radius: 4px 17px 4px 17px; --skin-card-radius: 8px 24px 8px 24px; }
:root[data-image-skin="pastel-parade"] { --skin-button-radius: 22px; --skin-card-radius: 32px; }
:root[data-image-skin="vinyl-studio"] { --skin-button-radius: 6px; --skin-card-radius: 13px; }
:root[data-image-skin="silver-studio"] { --skin-button-radius: 10px; --skin-card-radius: 18px; }
:root[data-image-skin="gravity-gaze"] { --skin-button-radius: 5px 18px 5px 18px; --skin-card-radius: 12px 30px 12px 30px; }
:root[data-image-skin="asuka-heart"] { --skin-button-radius: 999px; --skin-card-radius: 30px; }
:root[data-image-skin="snoopy-notes"] { --skin-button-radius: 14px 20px 14px 20px; --skin-card-radius: 22px 30px 22px 30px; }

:root[data-image-skin="autumn-gold"] {
    --skin-accent: #c8792b;
    --skin-accent-strong: #7c3f16;
    --skin-accent-soft: rgba(218, 136, 54, .22);
    --skin-ink: #56351f;
    --skin-base: #f7ead6;
    --skin-panel-rgb: 255, 250, 241;
    --skin-panel-alt-rgb: 248, 232, 207;
    --skin-image: radial-gradient(circle at 18% 75%, rgba(244, 181, 91, .9) 0 8%, transparent 9%), radial-gradient(circle at 78% 74%, rgba(180, 83, 27, .55) 0 11%, transparent 12%), linear-gradient(165deg, #fff9ed 0%, #efc68d 48%, #a94e1f 100%);
    --skin-image-opacity: .68;
    --skin-image-position: 50% 60%;
    --skin-image-filter: saturate(1.04) contrast(1.01);
    --skin-button-radius: 4px 18px 4px 18px;
    --skin-card-radius: 9px 28px 9px 28px;
}

:root[data-image-skin="winter-glass"] {
    --skin-accent: #6f9fc2;
    --skin-accent-strong: #365e7c;
    --skin-accent-soft: rgba(130, 190, 225, .22);
    --skin-ink: #29485d;
    --skin-base: #edf6fb;
    --skin-panel-rgb: 250, 254, 255;
    --skin-panel-alt-rgb: 232, 244, 251;
    --skin-image: radial-gradient(circle at 16% 72%, rgba(255,255,255,.95) 0 8%, transparent 9%), radial-gradient(circle at 76% 78%, rgba(190,225,244,.78) 0 13%, transparent 14%), linear-gradient(155deg, #ffffff 0%, #d8edf8 50%, #8eb8d2 100%);
    --skin-image-opacity: .72;
    --skin-image-position: 50% 62%;
    --skin-image-filter: saturate(.9) contrast(.98);
    --skin-button-radius: 999px;
    --skin-card-radius: 28px;
}

html[data-image-skin] body {
    background: linear-gradient(155deg, rgba(var(--skin-panel-rgb), .94) 0%, rgba(var(--skin-panel-alt-rgb), .7) 55%, rgba(var(--skin-panel-rgb), .58) 100%) !important;
}

html[data-image-skin] body::after {
    height: min(70vh, 760px);
}

/* Consistent translucent architecture: image remains visible, task controls remain legible. */
html[data-image-skin] body:not(.dark-mode) .container,
html[data-image-skin] body:not(.dark-mode) .view.active,
html[data-image-skin] body:not(.dark-mode) .hero-surface,
html[data-image-skin] body:not(.dark-mode) .hero-panel,
html[data-image-skin] body:not(.dark-mode) .system-management-panel,
html[data-image-skin] body:not(.dark-mode) .data-management-panel,
html[data-image-skin] body:not(.dark-mode) .practice-history,
html[data-image-skin] body:not(.dark-mode) .pane,
html[data-image-skin] body:not(.dark-mode) .header,
html[data-image-skin] body:not(.dark-mode) .practice-nav,
html[data-image-skin] body:not(.dark-mode) #settings-panel,
html[data-image-skin] body:not(.dark-mode) #notes-panel {
    background: rgba(var(--skin-panel-rgb), var(--skin-surface-alpha)) !important;
    border-color: color-mix(in srgb, var(--skin-accent) var(--skin-border-strength), rgba(255,255,255,.6)) !important;
    backdrop-filter: blur(17px) saturate(1.13);
    -webkit-backdrop-filter: blur(17px) saturate(1.13);
}

html[data-image-skin] body:not(.dark-mode) #right {
    background: rgba(var(--skin-panel-alt-rgb), .68) !important;
}

html[data-image-skin] body:not(.dark-mode) .group,
html[data-image-skin] body:not(.dark-mode) .unified-group,
html[data-image-skin] body:not(.dark-mode) .suite-card,
html[data-image-skin] body:not(.dark-mode) .tool-card,
html[data-image-skin] body:not(.dark-mode) .stat-card,
html[data-image-skin] body:not(.dark-mode) .exam-item,
html[data-image-skin] body:not(.dark-mode) .vocab-card,
html[data-image-skin] body:not(.dark-mode) .modal-content {
    background: rgba(var(--skin-panel-rgb), var(--skin-surface-strong-alpha)) !important;
    border-color: color-mix(in srgb, var(--skin-accent) 24%, rgba(255,255,255,.65)) !important;
    border-radius: var(--skin-card-radius) !important;
    box-shadow: 0 18px 48px color-mix(in srgb, var(--skin-accent-strong) 13%, transparent) !important;
    backdrop-filter: blur(14px) saturate(1.08);
    -webkit-backdrop-filter: blur(14px) saturate(1.08);
}

/* Theme-specific shape language and button typography. */
html[data-image-skin] button,
html[data-image-skin] .btn,
html[data-image-skin] .q-item,
html[data-image-skin] .settings-option,
html[data-image-skin] select,
html[data-image-skin] input,
html[data-image-skin] textarea {
    border-radius: var(--skin-button-radius) !important;
}

html[data-image-skin] button:not(.primary):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.correct):not(.incorrect),
html[data-image-skin] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger),
html[data-image-skin] .header-btn,
html[data-image-skin] .settings-option,
html[data-image-skin] .practice-nav .controls button:not(.primary),
html[data-image-skin] .q-item:not(.correct):not(.incorrect) {
    color: var(--skin-ink) !important;
    border-color: color-mix(in srgb, var(--skin-accent) 34%, rgba(255,255,255,.55)) !important;
    background: var(--skin-control-bg) !important;
    font-weight: 680;
    letter-spacing: .01em;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.68), 0 6px 18px color-mix(in srgb, var(--skin-accent-strong) 8%, transparent);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

html[data-image-skin] button:not(.primary):not(.btn-primary):not(.btn-success):not(.btn-danger):not(.correct):not(.incorrect):hover,
html[data-image-skin] .btn:not(.btn-primary):not(.btn-success):not(.btn-danger):hover,
html[data-image-skin] .q-item:not(.correct):not(.incorrect):hover {
    color: var(--skin-accent-strong) !important;
    background: var(--skin-control-hover) !important;
    border-color: var(--skin-accent) !important;
}

html[data-image-skin] .primary,
html[data-image-skin] .btn-primary,
html[data-image-skin] .hero-btn--primary,
html[data-image-skin] #submit-btn,
html[data-image-skin] #part-submit-btn {
    color: #fff !important;
    background: linear-gradient(135deg, var(--skin-accent), var(--skin-accent-strong)) !important;
    border-color: transparent !important;
    border-radius: var(--skin-button-radius) !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.18);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--skin-accent-strong) 28%, transparent) !important;
}

html[data-image-skin] .settings-option.active,
html[data-image-skin] .q-item.active,
html[data-image-skin] .q-item.answered,
html[data-image-skin] .skin-weather-btn.is-active {
    color: var(--skin-accent-strong) !important;
    border-color: var(--skin-accent) !important;
    background: color-mix(in srgb, var(--skin-accent-soft) 72%, rgba(var(--skin-panel-rgb), .9)) !important;
    box-shadow: 0 0 0 3px var(--skin-accent-soft) !important;
}

html[data-image-skin] .skin-handle,
html[data-image-skin] .skin-drawer,
html[data-image-skin] .skin-option,
html[data-image-skin] .skin-drawer__close,
html[data-image-skin] .skin-weather-btn {
    border-radius: var(--skin-button-radius) !important;
}

html[data-image-skin] .skin-drawer { border-radius: var(--skin-card-radius) !important; }
html[data-image-skin] a { color: var(--skin-accent-strong); }
html[data-image-skin] ::selection { color: #fff; background: var(--skin-accent); }
html[data-image-skin] ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--skin-accent) 68%, #94a3b8); border-radius: 999px; }

#skin-atmosphere-canvas {
    position: fixed;
    inset: 0;
    z-index: 1900;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .82;
}

.skin-weather-row {
    flex-wrap: wrap;
}

.skin-weather-label {
    flex: 1 0 100%;
    margin-bottom: 2px;
}

.skin-weather-btn {
    flex: 1 1 64px;
}

@media (max-width: 700px) {
    html[data-image-skin] body:not(.dark-mode) .pane { background: rgba(var(--skin-panel-rgb), .82) !important; }
    .skin-weather-btn { min-width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
    #skin-atmosphere-canvas { display: none !important; }
}