.kte-shell {
    --kte-bg: #101314;
    --kte-panel: #171b1d;
    --kte-panel-soft: #111617;
    --kte-line: #313b3f;
    --kte-line-strong: #526369;
    --kte-text: #eef5f6;
    --kte-muted: #aab8bd;
    --kte-cyan: #64d7e8;
    --kte-green: #75dfb0;
    --kte-red: #ffa0a8;
    --kte-amber: #f1ca78;
    --kte-blue: #8fb7ff;
    color: var(--kte-text);
    background: var(--kte-bg);
    margin: -1.5rem calc(50% - 50vw) 0;
    padding: 24px max(14px, calc((100vw - 1480px) / 2)) 56px;
    min-height: 100vh;
    font-variant-numeric: tabular-nums;
    color-scheme: dark;
}

.kte-shell * {
    min-width: 0;
}

.kte-shell [hidden] {
    display: none !important;
}

.kte-top, .kte-empty, .kte-loading, .kte-error, .kte-chart-panel, .kte-final, .kte-panel, .kte-ladder-wrap {
    background: var(--kte-panel);
    border: 1px solid var(--kte-line);
    border-radius: 8px;
}

.kte-top {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(420px, 1.1fr);
    gap: 20px;
    padding: 20px;
}

.kte-title h1 {
    margin: 8px 0;
    font-size: clamp(1.65rem, 3vw, 2.75rem);
    letter-spacing: 0;
}

.kte-title p, .kte-readable, .kte-validation, .kte-socket {
    color: var(--kte-muted);
}

.kte-live, .kte-section-head span, .kte-panel-head span, .kte-controls span, .kte-empty span {
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--kte-muted);
    font-weight: 750;
}

.kte-live {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--kte-cyan);
}

.kte-live i, .kte-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--kte-green);
    box-shadow: 0 0 0 7px rgba(117, 223, 176, .12);
}

.kte-controls {
    display: grid;
    grid-template-columns: 1.2fr .8fr .7fr auto;
    gap: 10px;
    align-items: end;
}

.kte-controls label {
    display: grid;
    gap: 7px;
}

.kte-controls input {
    min-height: 48px;
    border: 1px solid var(--kte-line-strong);
    background: var(--kte-panel-soft);
    color: var(--kte-text);
    border-radius: 6px;
    padding: 0 12px;
    outline: none;
}

.kte-controls input:focus, .kte-shell button:focus-visible {
    border-color: var(--kte-cyan);
    box-shadow: 0 0 0 3px rgba(100, 215, 232, .2);
}

#kteSymbol {
    text-transform: uppercase;
    font-weight: 850;
}

#kteAnalyze {
    min-height: 48px;
    border: 0;
    border-radius: 6px;
    padding: 0 18px;
    background: var(--kte-cyan);
    color: #061013;
    font-weight: 900;
    text-transform: uppercase;
}

.kte-validation {
    grid-column: 1 / -1;
    min-height: 24px;
}

.kte-validation.valid {
    color: var(--kte-green);
}

.kte-validation.invalid {
    color: var(--kte-red);
}

.kte-empty {
    margin-top: 16px;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: center;
}

.kte-empty h2 {
    font-size: 1.3rem;
    margin: 5px 0;
}

.kte-empty p {
    margin: 0;
    color: var(--kte-muted);
}

.kte-quick, .kte-chart-tools, .kte-segment, .kte-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kte-shell button {
    border: 1px solid var(--kte-line-strong);
    background: var(--kte-panel-soft);
    color: var(--kte-text);
    border-radius: 6px;
    min-height: 40px;
    padding: 8px 11px;
}

.kte-shell button.active {
    background: var(--kte-cyan);
    border-color: var(--kte-cyan);
    color: #061013;
}

.kte-loading, .kte-error {
    margin-top: 16px;
    padding: 18px;
}

.kte-loading ol {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 0;
    margin: 0 0 14px;
    list-style: none;
}

.kte-loading li {
    color: var(--kte-muted);
    border-bottom: 2px solid var(--kte-line);
    padding-bottom: 8px;
    font-size: .86rem;
}

.kte-loading li.complete {
    color: var(--kte-green);
    border-color: var(--kte-green);
}

.kte-loading li.active {
    color: var(--kte-text);
    border-color: var(--kte-amber);
}

.kte-rail {
    height: 3px;
    overflow: hidden;
    background: #20282b;
}

.kte-rail i {
    display: block;
    width: 42%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--kte-cyan), transparent);
    animation: kte-scan 1.15s ease-in-out infinite;
}

.kte-error {
    color: var(--kte-red);
    border-color: rgba(255, 160, 168, .45);
}

.kte-results {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.kte-ticker {
    display: grid;
    grid-template-columns: minmax(180px, 1.3fr) repeat(6, minmax(110px, 1fr));
    gap: 0;
    overflow: hidden;
    border: 1px solid var(--kte-line);
    border-radius: 8px;
    background: var(--kte-panel);
}

.kte-tick {
    padding: 13px;
    border-left: 1px solid var(--kte-line);
}

.kte-tick:first-child {
    border-left: 0;
}

.kte-tick span, .kte-metric span, .kte-stage span {
    color: var(--kte-muted);
    font-size: .75rem;
    text-transform: uppercase;
}

.kte-tick b, .kte-metric b {
    display: block;
    color: var(--kte-text);
    font-size: 1.04rem;
    overflow-wrap: anywhere;
}

.kte-workstation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 16px;
}

.kte-chart-panel, .kte-final, .kte-panel, .kte-ladder-wrap {
    padding: 16px;
}

.kte-panel-head, .kte-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.kte-panel-head strong, .kte-section-head strong {
    color: var(--kte-text);
    font-size: .95rem;
    text-align: right;
}

.kte-chart {
    height: min(62vh, 620px);
    min-height: 430px;
    width: 100%;
}

.kte-socket {
    margin-top: 10px;
    font-size: .85rem;
}

.kte-final {
    display: grid;
    gap: 14px;
    align-content: start;
    border-top: 3px solid var(--kte-cyan);
}

.kte-final.signal-LONG {
    border-top-color: var(--kte-green);
}

.kte-final.signal-SHORT {
    border-top-color: var(--kte-red);
}

.kte-final.signal-WAIT {
    border-top-color: var(--kte-amber);
}

.kte-final h2 {
    font-size: 2.1rem;
    margin: 0;
}

.kte-final .signal {
    font-size: 3rem;
    line-height: 1;
    font-weight: 950;
}

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

.kte-metric, .kte-stage, .kte-note, .kte-why li, .kte-chip {
    background: var(--kte-panel-soft);
    border: 1px solid var(--kte-line);
    border-radius: 6px;
    padding: 11px;
}

.kte-why {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

.kte-stage {
    position: relative;
    display: grid;
    gap: 8px;
}

.kte-stage:not(:last-child)::after {
    content: ">";
    position: absolute;
    right: -13px;
    top: 34px;
    color: var(--kte-muted);
}

.kte-badge {
    display: inline-flex;
    width: fit-content;
    border: 1px solid var(--kte-line-strong);
    border-radius: 999px;
    padding: 3px 8px;
    font-size: .72rem;
    color: var(--kte-muted);
}

.kte-badge.CONFIRMED {
    color: var(--kte-green);
}

.kte-badge.WAITING {
    color: var(--kte-amber);
}

.kte-badge.FAILED {
    color: var(--kte-red);
}

.kte-badge.NOT.APPLICABLE, .kte-badge.NOT {
    color: var(--kte-muted);
}

.kte-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 16px;
}

.kte-chip {
    color: var(--kte-muted);
}

.kte-readable {
    margin: 0;
    line-height: 1.6;
}

.tone-up {
    color: var(--kte-green);
}

.tone-down {
    color: var(--kte-red);
}

.tone-wait {
    color: var(--kte-amber);
}

@keyframes kte-scan {
    from {
        transform: translateX(-120%);
    }
    to {
        transform: translateX(260%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .kte-shell *, .kte-shell *::before, .kte-shell *::after {
        animation: none !important;
        transition: none !important;
    }
}

@media (max-width: 1180px) {
    .kte-top, .kte-workstation, .kte-grid {
        grid-template-columns: 1fr;
    }

    .kte-ticker {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

    .kte-stage::after {
        display: none;
    }
}

@media (max-width: 760px) {
    .kte-shell {
        padding: 14px 10px 42px;
    }

    .kte-top, .kte-empty, .kte-chart-panel, .kte-final, .kte-panel, .kte-ladder-wrap {
        padding: 13px;
    }

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

    .kte-controls label:first-child, #kteAnalyze, .kte-validation {
        grid-column: 1 / -1;
    }

    .kte-empty, .kte-ticker, .kte-ladder, .kte-loading ol {
        grid-template-columns: 1fr;
    }

    .kte-chart-tools {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
    }

    .kte-chart-tools button {
        flex: 0 0 auto;
    }

    .kte-chart {
        min-height: 360px;
        height: 390px;
    }

    .kte-final .signal {
        font-size: 2.35rem;
    }
}

@media (max-width: 430px) {
    .kte-controls, .kte-metrics {
        grid-template-columns: 1fr;
    }

    .kte-tick {
        border-left: 0;
        border-top: 1px solid var(--kte-line);
    }

    .kte-tick:first-child {
        border-top: 0;
    }
}