:root {
    --editor-bg: #0d0d0e;
    --editor-surface: #171719;
    --editor-surface-2: #202023;
    --editor-line: #303034;
    --editor-text: #f1f1f2;
    --editor-muted: #929298;
    --editor-accent: #ff9800;
}

* { box-sizing: border-box; }
.try-editor-page [hidden] { display: none !important; }

body.try-editor-page {
    margin: 0;
    min-width: 320px;
    background: var(--editor-bg);
    color: var(--editor-text);
    font-family: Inter, sans-serif;
    overflow: hidden;
}

.try-editor-header {
    height: 64px;
    display: grid;
    grid-template-columns: 190px 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 0 18px;
    background: #131315;
    border-bottom: 1px solid var(--editor-line);
}

.try-editor-logo img { display: block; width: 126px; }
.try-editor-header-copy { display: flex; align-items: baseline; gap: 12px; }
.try-editor-header-copy strong { font-size: 0.95rem; }
.try-editor-header-copy span { color: var(--editor-muted); font-size: 0.75rem; }
.try-editor-header-actions { display: flex; gap: 8px; }

.editor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 7px;
    border: 1px solid transparent;
    font: 700 0.78rem/1 Inter, sans-serif;
    text-decoration: none;
    cursor: pointer;
}
.editor-button-primary { background: var(--editor-accent); color: #16110a; }
.editor-button-primary:hover { background: #ffad33; }
.editor-button-muted { background: var(--editor-surface-2); color: var(--editor-text); border-color: var(--editor-line); }
.editor-button:disabled { opacity: 0.5; cursor: not-allowed; }

.try-editor-main { height: calc(100vh - 64px); min-height: 0; }

.editor-empty {
    height: 100%;
    display: grid;
    grid-template-columns: minmax(300px, 520px) minmax(300px, 440px);
    align-content: center;
    justify-content: center;
    gap: clamp(40px, 8vw, 110px);
    padding: 40px;
    background:
        radial-gradient(circle at 72% 38%, rgba(255, 152, 0, 0.11), transparent 26%),
        radial-gradient(circle at 25% 55%, rgba(255,255,255,0.04), transparent 32%),
        #0d0d0e;
}

.editor-kicker {
    color: var(--editor-accent);
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 0.72rem;
    font-weight: 800;
}
.editor-empty h1 { margin: 14px 0 16px; font-size: clamp(2.3rem, 5vw, 4.4rem); line-height: 0.98; letter-spacing: -0.055em; }
.editor-empty p { color: #b0b0b5; line-height: 1.7; font-size: 0.96rem; }
.editor-empty ul { display: grid; gap: 9px; padding: 0; margin: 24px 0 0; list-style: none; color: var(--editor-muted); font-size: 0.82rem; }
.editor-empty li::before { content: "✓"; color: var(--editor-accent); margin-right: 10px; }

.editor-dropzone {
    min-height: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px dashed #5a4a34;
    border-radius: 18px;
    background: rgba(27,27,29,0.82);
    box-shadow: 0 30px 80px rgba(0,0,0,0.3);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, background 0.2s;
}
.editor-dropzone:hover,
.editor-dropzone.dragging { border-color: var(--editor-accent); transform: translateY(-2px); background: #1b1916; }
.editor-dropzone input { display: none; }
.editor-dropzone-icon {
    width: 64px; height: 64px; display: grid; place-items: center;
    margin-bottom: 22px; border-radius: 50%;
    background: rgba(255,152,0,0.12); color: var(--editor-accent);
    font-size: 2rem; font-weight: 300;
}
.editor-dropzone strong { font-size: 1.2rem; }
.editor-dropzone > span:last-child { color: var(--editor-muted); margin-top: 8px; font-size: 0.82rem; }

.editor-upload-progress {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    width: min(420px, calc(100vw - 40px)); padding: 16px;
    background: #1a1a1d; border: 1px solid var(--editor-line); border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45); z-index: 30;
}
.editor-upload-progress > div { height: 5px; overflow: hidden; border-radius: 99px; background: #303034; }
.editor-upload-progress span { display: block; width: 0; height: 100%; background: var(--editor-accent); transition: width 0.15s; }
.editor-upload-progress p { margin: 9px 0 0; color: var(--editor-muted); font-size: 0.74rem; }

.editor-workspace {
    height: 100%;
    display: grid;
    grid-template-columns: 230px minmax(0, 1fr) 290px;
    min-height: 0;
}

.editor-inspector { min-height: 0; overflow-y: auto; background: var(--editor-surface); }
.editor-inspector-left { padding: 16px; border-right: 1px solid var(--editor-line); }
.editor-controls { border-left: 1px solid var(--editor-line); }
.editor-panel-heading { display: flex; justify-content: space-between; color: var(--editor-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
#editor-histogram { width: 100%; height: 110px; margin: 10px 0 18px; border-radius: 7px; background: #0d0d0f; border: 1px solid #29292c; }
.editor-file-card { padding: 12px; border-radius: 8px; background: var(--editor-surface-2); }
.editor-file-card strong, .editor-file-card span { display: block; overflow: hidden; text-overflow: ellipsis; }
.editor-file-card strong { white-space: nowrap; font-size: 0.78rem; }
.editor-file-card span { margin-top: 6px; color: var(--editor-muted); font-size: 0.65rem; line-height: 1.45; }
.editor-shortcuts { display: grid; gap: 9px; margin-top: 24px; color: var(--editor-muted); font-size: 0.68rem; }
.editor-shortcuts strong { color: #c6c6ca; text-transform: uppercase; letter-spacing: 0.08em; }
kbd { padding: 2px 5px; border: 1px solid #444448; border-radius: 4px; background: #262629; color: #d0d0d4; font: inherit; }

.editor-stage { min-width: 0; min-height: 0; display: grid; grid-template-rows: 48px minmax(0, 1fr) 66px; background: #0c0c0d; }
.editor-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 14px; border-bottom: 1px solid var(--editor-line); background: #151517;
}
.editor-toolbar > div { display: flex; align-items: center; gap: 7px; }
.editor-icon-button {
    height: 30px; padding: 0 10px; border: 1px solid #343438; border-radius: 6px;
    background: #222225; color: #d2d2d6; font: 600 0.69rem Inter, sans-serif; cursor: pointer;
}
.editor-icon-button:hover, .editor-icon-button.active { border-color: var(--editor-accent); color: var(--editor-accent); }
.editor-zoom { color: var(--editor-muted); font-size: 0.67rem; }
.editor-zoom input { width: 90px; accent-color: var(--editor-accent); }

.editor-canvas-scroll { min-width: 0; min-height: 0; overflow: auto; display: flex; align-items: center; justify-content: center; padding: 30px; }
.editor-canvas-shell { position: relative; max-width: 100%; max-height: 100%; box-shadow: 0 25px 80px rgba(0,0,0,0.45); }
#editor-canvas { display: block; max-width: 100%; max-height: calc(100vh - 230px); background: #171719; }
.editor-before-badge { position: absolute; top: 12px; left: 12px; padding: 5px 9px; border-radius: 5px; background: rgba(0,0,0,0.75); color: var(--editor-accent); font-size: 0.68rem; font-weight: 800; }
.editor-processing { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 13px; background: rgba(12,12,13,0.88); color: #bbb; font-size: 0.78rem; }
.editor-processing img { width: 54px; animation: editor-spin 1.2s linear infinite; filter: grayscale(1) brightness(1.5); }
@keyframes editor-spin { to { transform: rotate(360deg); } }

.editor-export-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 18px; border-top: 1px solid var(--editor-line); background: #151517; }
.editor-export-bar strong, .editor-export-bar span { display: block; }
.editor-export-bar strong { font-size: 0.78rem; }
.editor-export-bar span { color: var(--editor-muted); font-size: 0.65rem; margin-top: 3px; }
.editor-export-button { min-width: 130px; }

.editor-control-section { border-bottom: 1px solid #2b2b2e; }
.editor-section-toggle { width: 100%; display: flex; justify-content: space-between; padding: 13px 14px; border: 0; background: transparent; color: #d2d2d5; font: 800 0.7rem Inter, sans-serif; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; }
.editor-section-toggle:hover { background: #1e1e21; }
.editor-section-body { padding: 0 14px 13px; }
.editor-control-section.collapsed .editor-section-body { display: none; }
.editor-look-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 11px; }
.editor-look { min-height: 34px; padding: 6px; border-radius: 6px; border: 1px solid #353539; background: #222225; color: #aaa; font: 600 0.66rem Inter, sans-serif; cursor: pointer; }
.editor-look:hover, .editor-look.active { border-color: var(--editor-accent); color: var(--editor-accent); }
.editor-slider-row { display: grid; grid-template-columns: 82px 1fr 30px; gap: 7px; align-items: center; min-height: 30px; color: var(--editor-muted); font-size: 0.68rem; }
.editor-slider-row input { width: 100%; accent-color: var(--editor-accent); }
.editor-slider-row output { text-align: right; color: #bbb; font-variant-numeric: tabular-nums; }

.editor-toast {
    position: fixed; left: 50%; bottom: 24px; z-index: 50;
    max-width: min(520px, calc(100vw - 40px)); padding: 11px 16px;
    transform: translate(-50%, 20px); border-radius: 8px;
    background: #252528; border: 1px solid #3c3c40; color: #eee;
    font-size: 0.76rem; opacity: 0; pointer-events: none; transition: 0.2s;
}
.editor-toast.visible { opacity: 1; transform: translate(-50%, 0); }
.editor-toast.error { border-color: #9d3d3d; color: #ffb6b6; }

@media (max-width: 1050px) {
    .editor-workspace { grid-template-columns: minmax(0, 1fr) 280px; }
    .editor-inspector-left { display: none; }
    .try-editor-header { grid-template-columns: 150px 1fr auto; }
}

@media (max-width: 760px) {
    body.try-editor-page { overflow: auto; }
    .try-editor-header { height: auto; min-height: 62px; grid-template-columns: 1fr auto; }
    .try-editor-header-copy { display: none; }
    .try-editor-header-actions .editor-button-muted { display: none; }
    .try-editor-main { height: auto; min-height: calc(100vh - 62px); }
    .editor-empty { min-height: calc(100vh - 62px); grid-template-columns: 1fr; gap: 30px; padding: 42px 22px; }
    .editor-dropzone { min-height: 260px; }
    .editor-workspace { height: auto; min-height: calc(100vh - 62px); grid-template-columns: 1fr; grid-template-rows: minmax(520px, 70vh) auto; }
    .editor-stage { min-height: 520px; grid-row: 1; }
    .editor-controls { grid-row: 2; border-left: 0; border-top: 1px solid var(--editor-line); overflow: visible; }
    .editor-toolbar { padding: 0 8px; }
    .editor-zoom { display: none !important; }
    .editor-canvas-scroll { padding: 12px; }
    #editor-canvas { max-height: calc(70vh - 150px); }
}