:root {
    color-scheme: dark;
    --page-padding: clamp(10px, 3vw, 18px);
    --panel-bg: rgba(10, 16, 30, 0.92);
    --panel-border: rgba(255, 255, 255, 0.08);
    --panel-muted: rgba(191, 219, 254, 0.7);
    --panel-text: #f8fafc;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background:
        radial-gradient(circle at 18% 14%, rgba(250, 204, 21, 0.16), transparent 22%),
        radial-gradient(circle at 82% 10%, rgba(56, 189, 248, 0.14), transparent 24%),
        linear-gradient(180deg, #0a1226 0%, #13091f 100%);
    color: var(--panel-text);
    font-family: "Trebuchet MS", "Segoe UI", sans-serif;
}

body {
    overflow-x: hidden;
}

body,
body * {
    box-sizing: border-box;
}

.labPage {
    width: 100%;
    min-height: 100dvh;
    padding-top: max(var(--page-padding), env(safe-area-inset-top));
    padding-right: max(var(--page-padding), env(safe-area-inset-right));
    padding-bottom: max(var(--page-padding), env(safe-area-inset-bottom));
    padding-left: max(var(--page-padding), env(safe-area-inset-left));
}

.labPage.isTargetMode {
    cursor: crosshair;
}

.shell {
    width: 100%;
    max-width: 920px;
    margin: 0 auto;
    display: grid;
    gap: 10px;
}

.toolbar,
.diagnosticsPanel,
.presetPanel,
.entitySection {
    border-radius: 16px;
    background: var(--panel-bg);
    border: 1px solid var(--panel-border);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.26);
}

.toolbar,
.diagnosticsPanel,
.presetPanel,
.entitySection {
    padding: 10px;
}

.toolbarMain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.titleBlock {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.eyebrow {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.66rem;
    color: rgba(125, 211, 252, 0.92);
}

.title {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.05;
    font-weight: 700;
}

.toolbarActions,
.presetGrid,
.diagnosticToggleRow,
.styleControlGroup {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.toolbarActions {
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.backLink,
.targetModeButton,
.copySnippetButton,
.resetButton,
.stopButton,
.presetButton,
.diagnosticButton {
    min-height: 38px;
    padding: 0 12px;
    border-radius: 11px;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: transform 0.12s ease, filter 0.12s ease;
}

.backLink,
.targetModeButton,
.copySnippetButton,
.resetButton,
.presetButton,
.diagnosticButton {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.82);
    color: #eff6ff;
    cursor: pointer;
}

.backLink:hover,
.targetModeButton:hover,
.copySnippetButton:hover,
.resetButton:hover,
.stopButton:hover,
.presetButton:hover,
.diagnosticButton:hover {
    transform: translateY(-1px);
    filter: brightness(1.03);
}

.backLink:focus-visible,
.targetModeButton:focus-visible,
.copySnippetButton:focus-visible,
.resetButton:focus-visible,
.stopButton:focus-visible,
.presetButton:focus-visible,
.diagnosticButton:focus-visible,
.glyphInput:focus-visible,
.colorPicker:focus-visible,
.tuningSlider:focus-visible,
.entitySummary:focus-visible,
.diagnosticsSummary:focus-visible {
    outline: 2px solid rgba(147, 197, 253, 0.96);
    outline-offset: 2px;
}

.styleChip input:focus-visible + span {
    outline: 2px solid rgba(147, 197, 253, 0.96);
    outline-offset: 2px;
}

.targetModeButton {
    border-color: rgba(125, 211, 252, 0.16);
    color: #e0f2fe;
}

.copySnippetButton {
    border-color: rgba(59, 130, 246, 0.2);
    color: #dbeafe;
}

.resetButton {
    border: 1px solid rgba(244, 114, 182, 0.2);
    background: rgba(76, 29, 149, 0.4);
    color: #f5d0fe;
    cursor: pointer;
}

.targetModeButtonActive {
    border-color: rgba(45, 212, 191, 0.34);
    background: linear-gradient(135deg, rgba(45, 212, 191, 0.18), rgba(56, 189, 248, 0.16));
    color: #ecfeff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.stopButton {
    appearance: none;
    border: none;
    cursor: pointer;
    color: #111827;
    background: linear-gradient(135deg, #fde68a 0%, #fb7185 100%);
}

.compactHint,
.status {
    margin: 8px 0 0;
    color: rgba(191, 219, 254, 0.82);
    font-size: 0.8rem;
    line-height: 1.35;
}

.status {
    margin-top: 6px;
}

.targetModeHint {
    margin: 6px 0 0;
    color: rgba(153, 246, 228, 0.92);
    font-size: 0.76rem;
    line-height: 1.3;
}

.diagnosticsSummary,
.entitySummary {
    list-style: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-left: 22px;
    cursor: pointer;
    user-select: none;
    transition: color 0.12s ease;
}

.diagnosticsSummary:hover,
.entitySummary:hover {
    color: #f8fafc;
}

.diagnosticsSummary::before,
.entitySummary::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 50%;
    width: 8px;
    height: 8px;
    border-right: 2px solid rgba(191, 219, 254, 0.76);
    border-bottom: 2px solid rgba(191, 219, 254, 0.76);
    transform: translateY(-64%) rotate(45deg);
    transition: transform 0.12s ease, border-color 0.12s ease;
}

details[open] > .diagnosticsSummary::before,
details[open] > .entitySummary::before {
    transform: translateY(-36%) rotate(225deg);
    border-color: rgba(125, 211, 252, 0.92);
}

details[open].diagnosticsPanel,
details[open].entitySection {
    border-color: rgba(125, 211, 252, 0.16);
    box-shadow: 0 10px 28px rgba(2, 6, 23, 0.26), inset 0 1px 0 rgba(125, 211, 252, 0.04);
}

.diagnosticsSummary::-webkit-details-marker,
.entitySummary::-webkit-details-marker {
    display: none;
}

.summaryTitle {
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(125, 211, 252, 0.9);
}

.summaryHint {
    font-size: 0.68rem;
    line-height: 1.1;
    color: rgba(191, 219, 254, 0.68);
}

.entityBody,
.diagnosticsBody {
    display: grid;
    gap: 8px;
    padding-top: 8px;
}

.diagnosticToggleRow {
    justify-content: flex-start;
}

.diagnosticButton.isActive {
    border-color: rgba(125, 211, 252, 0.34);
    background: rgba(56, 189, 248, 0.18);
    color: #e0f2fe;
}

.diagnosticsGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.styleControlRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0;
}

.styleControlLabel {
    font-size: 0.72rem;
    line-height: 1.1;
    color: rgba(226, 232, 240, 0.88);
}

.styleChip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.styleChip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.styleChip span {
    min-width: 58px;
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 23, 42, 0.78);
    color: rgba(191, 219, 254, 0.76);
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    transition: border-color 0.12s ease, background-color 0.12s ease, color 0.12s ease;
}

.styleChip input:checked + span {
    border-color: rgba(125, 211, 252, 0.34);
    background: rgba(56, 189, 248, 0.18);
    color: #e0f2fe;
}

.tuningBlock {
    display: grid;
    gap: 6px;
    margin-top: 0;
}

.tuningBlockMuted,
.colorFieldMuted,
.glyphFieldMuted {
    opacity: 0.72;
}

.colorField,
.glyphField,
.tuningControl {
    display: grid;
    gap: 6px;
    min-width: 0;
    padding: 8px 9px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(15, 23, 42, 0.78);
}

.tuningControlDisabled {
    opacity: 0.56;
}

.tuningGrid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.tuningMeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tuningLabel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.74rem;
    line-height: 1.1;
}

.tuningLabelMain {
    min-width: 0;
}

.tuningLabelKey {
    flex-shrink: 0;
    color: rgba(148, 163, 184, 0.84);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.tuningInfoIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.42);
    background: rgba(15, 23, 42, 0.9);
    color: rgba(191, 219, 254, 0.94);
    font-family: inherit;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.tuningInfoIcon:focus-visible {
    outline: 2px solid rgba(147, 197, 253, 0.96);
    outline-offset: 2px;
}

.tuningValue {
    flex-shrink: 0;
    color: rgba(125, 211, 252, 0.9);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.tuningSlider {
    width: 100%;
    height: 16px;
    margin: 0;
    padding: 0;
    appearance: none;
    background: transparent;
    accent-color: #7dd3fc;
}

.tuningSlider:disabled {
    cursor: not-allowed;
    opacity: 0.72;
}

.tuningSlider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.42), rgba(45, 212, 191, 0.32));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tuningSlider::-webkit-slider-thumb {
    appearance: none;
    width: 16px;
    height: 16px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.88);
    background: radial-gradient(circle at 35% 35%, #f8fafc 0%, #7dd3fc 58%, #38bdf8 100%);
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.34);
    cursor: pointer;
}

.tuningSlider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(56, 189, 248, 0.42), rgba(45, 212, 191, 0.32));
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.tuningSlider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.88);
    background: radial-gradient(circle at 35% 35%, #f8fafc 0%, #7dd3fc 58%, #38bdf8 100%);
    box-shadow: 0 2px 8px rgba(2, 6, 23, 0.34);
    cursor: pointer;
}

.toggleControl {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 8px 9px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(15, 23, 42, 0.78);
    color: rgba(226, 232, 240, 0.9);
    font-size: 0.77rem;
    line-height: 1.15;
    cursor: pointer;
    user-select: none;
}

.toggleControl input {
    width: 15px;
    height: 15px;
    margin: 0;
    flex-shrink: 0;
    accent-color: #7dd3fc;
}

.toggleControl span {
    min-width: 0;
}

.glyphInput {
    width: 100%;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(2, 6, 23, 0.62);
    color: #f8fafc;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
}

.glyphInput:disabled {
    cursor: not-allowed;
}

.colorPicker {
    width: 100%;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.colorPicker:disabled {
    cursor: not-allowed;
}

.presetGrid {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-wrap: nowrap;
}

.presetPanel {
    display: grid;
    gap: 8px;
}

.presetSourceRow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.presetButton {
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.82);
    text-align: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.accentGold {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.92)),
        linear-gradient(135deg, rgba(250, 204, 21, 0.3), rgba(15, 23, 42, 0));
    border-color: rgba(250, 204, 21, 0.2);
}

.accentViolet {
    background:
        linear-gradient(180deg, rgba(15, 23, 42, 0.92), rgba(15, 23, 42, 0.92)),
        linear-gradient(135deg, rgba(192, 132, 252, 0.28), rgba(15, 23, 42, 0));
    border-color: rgba(192, 132, 252, 0.2);
}

@media (max-width: 900px) {
    .tuningGrid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .shell {
        gap: 8px;
    }

    .toolbar,
    .diagnosticsPanel,
    .presetPanel,
    .entitySection {
        border-radius: 14px;
        padding: 8px;
    }

    .toolbarMain {
        align-items: flex-start;
        flex-direction: column;
    }

    .toolbarActions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .backLink,
    .targetModeButton,
    .copySnippetButton,
    .stopButton {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 10px;
        font-size: 0.84rem;
    }

    .styleControlRow {
        align-items: flex-start;
        flex-direction: column;
    }

    .diagnosticsGrid,
    .tuningGrid {
        grid-template-columns: minmax(0, 1fr);
    }

    .presetGrid {
        gap: 6px;
    }
}