.beer-app {
        width: 100%;
        max-width: 72rem;
        margin: 0 auto;
        padding: 0.5rem;
    }

    .beer-card {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1.25rem;
        overflow: clip;
        box-shadow: 0 4px 20px rgba(0,0,0,0.06);
        color: #1e293b;
    }
    .theme-dark .beer-card {
        background: #0f172a;
        border-color: #1e293b;
        color: #f1f5f9;
    }

    .beer-grid { display: grid; }

    @media (min-width: 1024px) {
        .beer-grid {
            grid-template-columns: 1fr 1fr;
            align-items: stretch;
        }
    }

    .beer-steps-panel {
        display: flex;
        flex-direction: column;
    }

    .beer-sec {
        padding: 1.25rem 1.5rem;
        border-bottom: 1px solid #e2e8f0;
    }
    .theme-dark .beer-sec { border-color: #1e293b; }
    .beer-sec:last-child { border-bottom: none; }

    .step-header {
        font-size: 1rem;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin: 0 0 1rem;
        color: #1e293b;
    }

    .theme-dark .step-header { color: #f1f5f9; }
    .step-number {
        width: 1.75rem;
        height: 1.75rem;
        border-radius: 50%;
        background: #0f172a;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.75rem;
        flex-shrink: 0;
    }
    .theme-dark .step-number {
        background: #fff;
        color: #0f172a;
    }

    .selector-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
    }

    .selector-card {
        width: 100%;
        text-align: left;
        padding: 1rem;
        border-radius: 0.75rem;
        border: 2px solid #e2e8f0;
        transition: border-color 0.2s;
        position: relative;
        overflow: hidden;
        background: #f8fafc;
        cursor: pointer;
    }
    .theme-dark .selector-card {
        border-color: #1e293b;
        background: #0c1527;
    }
    .selector-card:hover { border-color: #cbd5e1; }
    .theme-dark .selector-card:hover { border-color: #334155; }

    .selector-content {
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }
    .icon-el {
        width: 2rem;
        height: 2rem;
        color: #94a3b8;
        transition: color 0.2s;
    }
    .selector-card:hover .icon-el { color: #f59e0b; }
    .selector-card[data-value="bottle"]:hover .icon-el { color: #10b981; }
    .selector-card[data-value="fridge"]:hover .icon-el { color: #06b6d4; }
    .selector-card[data-value="freezer"]:hover .icon-el { color: #3b82f6; }

    .selector-label {
        font-weight: 700;
        font-size: 1rem;
        color: #1e293b;
    }

    .theme-dark .selector-label { color: #f1f5f9; }

    .selector-sub {
        font-size: 0.7rem;
        color: #64748b;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }

    .theme-dark .selector-sub { color: #94a3b8; }

    .bg-el {
        position: absolute;
        inset: 0;
        opacity: 0;
        transition: opacity 0.2s;
        background: rgba(245,158,11,0.08);
    }
    .selector-card[data-value="bottle"] .bg-el { background: rgba(16,185,129,0.08); }
    .selector-card[data-value="fridge"] .bg-el { background: rgba(6,182,212,0.08); }
    .selector-card[data-value="freezer"] .bg-el { background: rgba(59,130,246,0.08); }

    .selector-card.selected[data-value="can"] { border-color: #f59e0b; }
    .selector-card.selected[data-value="bottle"] { border-color: #10b981; }
    .selector-card.selected[data-value="fridge"] { border-color: #06b6d4; }
    .selector-card.selected[data-value="freezer"] { border-color: #3b82f6; }
    .selector-card.selected .bg-el { opacity: 1; }

    .slider-row { margin-bottom: 1.25rem; }
    .slider-row-last { margin-bottom: 0; }
    .slider-label-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
    }
    .slider-label {
        font-size: 0.75rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .theme-dark .slider-label { color: #94a3b8; }

    .temp-display {
        font-size: 1rem;
        font-weight: 700;
        background: #f1f5f9;
        color: #1e293b;
        padding: 0.2rem 0.6rem;
        border-radius: 0.4rem;
    }

    .theme-dark .temp-display {
        background: #1e293b;
        color: #f1f5f9;
    }

    .slider-custom {
        width: 100%;
        height: 0.5rem;
        border-radius: 0.5rem;
        appearance: none;
        cursor: pointer;
        background: #e2e8f0;
    }
    .theme-dark .slider-custom { background: #334155; }
    .slider-dark { accent-color: #0f172a; }
    .theme-dark .slider-dark { accent-color: #fff; }
    .slider-blue { accent-color: #3b82f6; }
    .slider-custom::-webkit-slider-thumb {
        -webkit-appearance: none;
        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: currentcolor;
        cursor: pointer;
        margin-top: -6px;
    }
    .slider-custom::-webkit-slider-runnable-track {
        width: 100%;
        height: 8px;
        background: transparent;
        border-radius: 4px;
    }

    .beer-result-panel {
        background: linear-gradient(to bottom right, #eff6ff, #eef2ff);
        color: #1e293b;
        display: flex;
        align-items: stretch;
        min-height: 380px;
    }

    @media (min-width: 1024px) { .beer-result-panel { border-left: 1px solid #e2e8f0; } }

    .theme-dark .beer-result-panel {
        background: linear-gradient(to bottom right, #1e293b, #020617);
        color: #fff;
    }

    @media (min-width: 1024px) { .theme-dark .beer-result-panel { border-left-color: #334155; } }

    .result-inner {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 2rem;
        position: relative;
        z-index: 1;
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    .empty-icon {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        background: #e0e7ff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #6366f1;
    }

    .theme-dark .empty-icon {
        background: #1e293b;
        color: #475569;
    }
    .empty-icon-svg {
        width: 2rem;
        height: 2rem;
    }
    .empty-title {
        font-size: 1.25rem;
        font-weight: 700;
        color: #475569;
        margin: 0;
    }

    .theme-dark .empty-title { color: #64748b; }

    .empty-desc {
        color: #94a3b8;
        margin: 0;
        font-size: 0.875rem;
    }

    .theme-dark .empty-desc { color: #475569; }

    .result-content {
        flex-direction: column;
        align-items: center;
        width: 100%;
        position: relative;
        z-index: 1;
    }
    .result-time-wrap {
        position: relative;
        margin-bottom: 1.5rem;
    }
    .result-glow {
        position: absolute;
        inset: -2rem;
        background: rgba(59,130,246,0.2);
        border-radius: 50%;
        filter: blur(2rem);
    }
    .result-time-num {
        position: relative;
        font-size: 5rem;
        font-weight: 900;
        color: #1e293b;
        letter-spacing: -0.05em;
        line-height: 1;
    }

    .theme-dark .result-time-num { color: #fff; }

    .result-time-unit {
        position: absolute;
        right: -1.5rem;
        bottom: 0.75rem;
        font-size: 1.25rem;
        font-weight: 700;
        color: #94a3b8;
    }

    .result-labels { margin-bottom: 2rem; }
    .result-est-label {
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.2em;
        color: #6366f1;
        margin: 0 0 0.5rem;
    }

    .theme-dark .result-est-label { color: #60a5fa; }

    .result-finish-time {
        font-size: 1.5rem;
        font-weight: 700;
        color: #1e293b;
        margin: 0;
    }

    .theme-dark .result-finish-time { color: #fff; }

    .result-meta-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        width: 100%;
        text-align: left;
    }
    .result-meta-item {
        background: rgba(255,255,255,0.7);
        padding: 0.75rem;
        border-radius: 0.5rem;
        border: 1px solid #e2e8f0;
    }

    .theme-dark .result-meta-item {
        background: rgba(30,41,59,0.5);
        border-color: #334155;
    }

    .result-meta-label {
        font-size: 0.7rem;
        color: #94a3b8;
        text-transform: uppercase;
        font-weight: 700;
        margin-bottom: 0.25rem;
    }

    .result-meta-value {
        color: #1e293b;
        font-weight: 700;
        font-size: 0.875rem;
    }

    .theme-dark .result-meta-value { color: #fff; }

    .bubbles-layer {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: 0;
    }