.led-gen {
    --led-ink: #182233;
    --led-muted: #667085;
    --led-line: #d9e2ef;
    --led-soft: #f5f8fb;
    --led-card: #ffffff;
    --led-primary: #0f6f86;
    --led-primary-dark: #0a5364;
    --led-accent: #b7791f;
    --led-danger: #c2410c;
    --led-good: #12805c;
    --led-shadow: 0 18px 42px rgba(28, 44, 68, .11);
    color: var(--led-ink);
    width: 100%;
}

.led-gen * {
    box-sizing: border-box;
}

.led-gen button,
.led-gen input,
.led-gen select,
.led-gen textarea {
    font: inherit;
}

.led-shell {
    display: grid;
    gap: 16px;
}

.led-guide {
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    gap: 14px;
}

.led-note,
.led-summary,
.led-board,
.led-preview-card {
    background: var(--led-card);
    border: 1px solid var(--led-line);
    border-radius: 8px;
    box-shadow: var(--led-shadow);
}

.led-note {
    padding: 18px;
    background:
        linear-gradient(135deg, rgba(15, 111, 134, .10), rgba(183, 121, 31, .08)),
        #fff;
}

.led-note strong {
    display: block;
    font-size: 18px;
    line-height: 1.35;
    margin-bottom: 7px;
}

.led-note p {
    margin: 0;
    color: var(--led-muted);
    font-size: 13px;
    line-height: 1.7;
}

.led-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.led-chip {
    border: 1px solid rgba(15, 111, 134, .25);
    background: rgba(255, 255, 255, .75);
    color: var(--led-primary-dark);
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 800;
}

.led-summary {
    padding: 16px;
    display: grid;
    gap: 11px;
}

.led-summary-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.led-summary-head b {
    font-size: 15px;
}

.led-summary-head span {
    color: var(--led-muted);
    font-size: 12px;
    font-weight: 700;
}

.led-summary-list {
    display: grid;
    gap: 7px;
    max-height: 156px;
    overflow: auto;
}

.led-summary-empty,
.led-help {
    color: var(--led-muted);
    font-size: 13px;
    line-height: 1.6;
}

.led-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #e6edf5;
    background: #fbfcff;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 13px;
}

.led-item b {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.led-item span {
    color: var(--led-muted);
    flex: 0 0 auto;
}

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

.led-tab {
    border: 1px solid var(--led-line);
    background: #fff;
    color: #17384a;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: center;
    text-align: left;
    min-height: 62px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background .18s ease;
}

.led-tab:hover {
    border-color: rgba(15, 111, 134, .45);
    transform: translateY(-1px);
}

.led-tab.active {
    border-color: var(--led-primary);
    background: linear-gradient(180deg, #fff, #eef8fa);
    box-shadow: 0 10px 24px rgba(15, 111, 134, .14);
}

.led-tab-index {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5f2f5;
    color: var(--led-primary-dark);
    font-weight: 900;
}

.led-tab.active .led-tab-index {
    background: var(--led-primary);
    color: #fff;
}

.led-tab-label {
    display: grid;
    gap: 3px;
}

.led-tab-label b {
    font-size: 15px;
    color: #102a3c;
}

.led-tab-label span {
    font-size: 12px;
    color: var(--led-muted);
}

.led-workspace {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr);
    gap: 16px;
    align-items: start;
}

.led-board {
    padding: 17px;
}

.led-panel {
    display: none;
}

.led-panel.active {
    display: grid;
    gap: 15px;
}

.led-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf2f7;
}

.led-panel-head h3 {
    margin: 0 0 5px;
    font-size: 18px;
    line-height: 1.3;
}

.led-panel-head p {
    margin: 0;
    color: var(--led-muted);
    font-size: 13px;
    line-height: 1.6;
}

.led-section {
    border: 1px solid #e2eaf3;
    background: #fff;
    border-radius: 8px;
    padding: 15px;
}

.led-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.led-section-title b {
    font-size: 15px;
}

.led-section-title span {
    color: var(--led-muted);
    font-size: 12px;
}

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

.led-grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.led-grid.four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.led-field {
    display: grid;
    gap: 6px;
}

.led-field > span,
.led-field > label {
    color: #344054;
    font-size: 13px;
    font-weight: 800;
}

.led-field small {
    color: var(--led-muted);
    line-height: 1.55;
}

.led-input,
.led-select,
.led-textarea {
    width: 100%;
    border: 1px solid #d4deeb;
    border-radius: 7px;
    background: #fff;
    color: var(--led-ink);
    outline: none;
    min-height: 39px;
    padding: 9px 10px;
}

.led-textarea {
    min-height: 132px;
    resize: vertical;
    line-height: 1.55;
}

.led-input:focus,
.led-select:focus,
.led-textarea:focus {
    border-color: var(--led-primary);
    box-shadow: 0 0 0 3px rgba(15, 111, 134, .12);
}

.led-input[type="color"] {
    min-height: 41px;
    padding: 4px;
}

.led-range {
    width: 100%;
    accent-color: var(--led-primary);
}

.led-range-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #344054;
    font-weight: 800;
}

.led-range-label output {
    color: var(--led-primary-dark);
    font-weight: 900;
}

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

.led-choice {
    border: 1px solid var(--led-line);
    background: #fff;
    border-radius: 8px;
    padding: 13px;
    text-align: left;
    cursor: pointer;
    display: grid;
    gap: 5px;
    color: var(--led-ink);
    min-height: 82px;
}

.led-choice:hover,
.led-choice.active {
    border-color: var(--led-primary);
    background: #f0f8fa;
}

.led-choice b {
    font-size: 14px;
}

.led-choice span {
    color: var(--led-muted);
    font-size: 12px;
    line-height: 1.55;
}

.led-actions,
.led-nav,
.led-output-actions,
.led-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.led-nav {
    justify-content: flex-end;
}

.led-btn {
    border: 1px solid #cbd7e6;
    background: #fff;
    color: #24364b;
    border-radius: 7px;
    min-height: 38px;
    padding: 9px 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    cursor: pointer;
    font-weight: 800;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}

.led-btn:hover {
    border-color: var(--led-primary);
    color: var(--led-primary-dark);
}

.led-btn.primary {
    background: var(--led-primary);
    border-color: var(--led-primary);
    color: #fff;
}

.led-btn.primary:hover {
    background: var(--led-primary-dark);
    color: #fff;
    transform: translateY(-1px);
}

.led-btn.accent {
    background: var(--led-accent);
    border-color: var(--led-accent);
    color: #fff;
}

.led-btn.danger {
    border-color: #f1b49a;
    color: var(--led-danger);
}

.led-btn.small {
    min-height: 30px;
    padding: 6px 9px;
    font-size: 12px;
}

.led-btn:disabled {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

.led-swatch-row,
.led-check-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.led-swatch {
    width: 34px;
    height: 34px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px #cfd8e6;
    cursor: pointer;
}

.led-swatch:hover,
.led-swatch.active {
    box-shadow: 0 0 0 2px var(--led-primary);
}

.led-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #dfe7f0;
    border-radius: 999px;
    padding: 8px 11px;
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.led-check input {
    accent-color: var(--led-primary);
}

.led-color-panel {
    display: none;
}

.led-color-panel.active {
    display: grid;
    gap: 12px;
}

.led-batch-box {
    display: none;
}

.led-batch-box.active {
    display: block;
}

.led-preview-card {
    position: sticky;
    top: 14px;
    overflow: hidden;
}

.led-preview-head {
    padding: 13px 15px;
    border-bottom: 1px solid #edf2f7;
    background: #f7fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.led-preview-head b {
    font-size: 15px;
}

.led-preview-head span {
    color: var(--led-muted);
    font-size: 12px;
}

.led-stage {
    background:
        radial-gradient(circle at 20% 10%, rgba(15, 111, 134, .20), transparent 32%),
        linear-gradient(145deg, #0b1118, #111827);
    padding: 16px;
    min-height: 260px;
    display: grid;
    place-items: center;
    overflow: auto;
}

.led-stage canvas {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    image-rendering: auto;
}

.led-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: #e6edf5;
    border-top: 1px solid #e6edf5;
}

.led-stat {
    background: #fbfcff;
    padding: 10px;
    text-align: center;
}

.led-stat span {
    display: block;
    color: var(--led-muted);
    font-size: 12px;
    margin-bottom: 4px;
}

.led-stat b {
    font-size: 14px;
}

.led-progress {
    display: none;
    gap: 8px;
}

.led-progress.active {
    display: grid;
}

.led-progress-track {
    height: 20px;
    border-radius: 999px;
    background: #e8eef6;
    overflow: hidden;
}

.led-progress-bar {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--led-primary), #18a999);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width .18s ease;
}

.led-status {
    color: var(--led-muted);
    min-height: 22px;
    font-size: 13px;
    line-height: 1.6;
}

.led-status.good {
    color: var(--led-good);
}

.led-status.bad {
    color: var(--led-danger);
}

.led-log {
    display: none;
    max-height: 145px;
    overflow: auto;
    border: 1px solid #e2eaf3;
    background: #fbfcff;
    border-radius: 7px;
    padding: 9px;
    color: #344054;
    font-size: 12px;
    line-height: 1.55;
}

.led-log.active {
    display: block;
}

.led-hidden {
    display: none !important;
}

@media (max-width: 1100px) {
    .led-guide,
    .led-workspace {
        grid-template-columns: 1fr;
    }

    .led-preview-card {
        position: static;
    }
}

@media (max-width: 760px) {
    .led-tabs,
    .led-grid,
    .led-grid.two,
    .led-grid.four,
    .led-choice-grid,
    .led-stats {
        grid-template-columns: 1fr;
    }

    .led-panel-head,
    .led-section-title,
    .led-summary-head,
    .led-preview-head {
        display: grid;
    }

    .led-board,
    .led-note,
    .led-summary,
    .led-stage {
        padding: 13px;
    }
}