/* Setup page only. Everything inside a widget preview lives in widget.css. */
:root {
    color-scheme: light;
    --canvas: #f5f5f7;
    --surface: rgba(255, 255, 255, .86);
    --surface-solid: #fff;
    --ink: #1d1d1f;
    --muted: #6e6e73;
    --line: rgba(29, 29, 31, .12);
    --blue: #0071e3;
    --blue-dark: #0066cc;
    --blue-soft: #eef6ff;
    --green: #248a3d;
    --red: #d70015;
    --radius: 22px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
    max-width: 100%;
    overflow-x: hidden;
    margin: 0;
    background: radial-gradient(circle at 16% -10%, rgba(163,207,255,.48), transparent 34rem), radial-gradient(circle at 92% 15%, rgba(215,228,255,.62), transparent 31rem), var(--canvas);
    color: var(--ink);
    line-height: 1.48;
}
body.preview-open { overflow: hidden; }

@keyframes widget-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes widget-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
    .widget-preview-drawer { animation: none; }
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.shell { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: 92px 0 108px; }
.hero { max-width: 760px; margin: 0 auto 42px; text-align: center; }
.eyebrow { margin: 0 0 9px; color: var(--blue); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
h1, h2, h3, h4 { margin-top: 0; color: var(--ink); letter-spacing: -.035em; line-height: 1.08; }
h1 { margin-bottom: 13px; font-size: clamp(2.5rem, 7vw, 4.7rem); font-weight: 700; }
h2 { margin-bottom: 0; font-size: 1.65rem; }
h3 { margin: 30px 0 13px; font-size: 1.2rem; }
h4 { margin: 18px 0 10px; color: var(--muted); font-size: 1rem; }
.intro { max-width: 610px; margin: 0 auto; color: var(--muted); font-size: 1.12rem; }

.panel { border: 1px solid rgba(255,255,255,.65); border-radius: var(--radius); background: var(--surface); box-shadow: 0 18px 48px rgba(28,28,30,.08), inset 0 1px rgba(255,255,255,.7); backdrop-filter: blur(18px); padding: 27px; }
.load-panel { max-width: 1000px; margin: 0 auto; }
label { display: block; margin-bottom: 8px; color: var(--ink); font-size: .88rem; font-weight: 650; }
input, select, textarea { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.9); color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; }
input { min-height: 48px; padding: 11px 14px; }
select { min-height: 42px; padding: 8px 36px 8px 12px; }
textarea { width: 100%; resize: vertical; padding: 11px 14px; }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(0,113,227,.17); }
button { min-height: 44px; border: 0; border-radius: 980px; background: var(--blue); color: #fff; font-weight: 650; padding: 10px 19px; transition: transform .18s, background .18s, box-shadow .18s; }
button:hover { background: var(--blue-dark); box-shadow: 0 6px 16px rgba(0,102,204,.23); transform: translateY(-1px); }
button:disabled { cursor: wait; opacity: .65; transform: none; }

.mode-field { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 11px 16px; margin-bottom: 22px; padding: 14px 16px; border-radius: 16px; background: rgba(0,113,227,.06); }
.mode-field label { margin: 0; }
.mode-field select { width: min(100%, 320px); }
.mode-field p { grid-column: 2; margin: -4px 0 0; color: var(--muted); font-size: .79rem; }
.load-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.load-row button { min-width: 128px; }
.sheet-options { display: flex; align-items: end; gap: 18px; margin-top: 14px; }
.sheet-options > div { width: 178px; }
.sheet-options label { margin-bottom: 5px; font-size: .8rem; }
.sheet-options label span, .sheet-options p { color: var(--muted); font-size: .77rem; font-weight: 400; }
.sheet-options input { width: 100%; min-height: 38px; }
.sheet-options p { max-width: 580px; margin: 0 0 9px; }
.range-options { display: flex; align-items: end; gap: 14px; margin-top: 14px; }
.range-options > div { width: 178px; }
.range-options label { margin-bottom: 5px; font-size: .8rem; }
.range-options label span, .range-options p { color: var(--muted); font-size: .77rem; font-weight: 400; }
.range-options input { width: 100%; min-height: 38px; }
.range-options p { max-width: 500px; margin: 0 0 9px; }
.widget-options { display: grid; grid-template-columns: minmax(160px, .65fr) minmax(240px, 1fr); gap: 18px 26px; margin-top: 22px; border-top: 1px solid var(--line); padding-top: 22px; }
.widget-options h3 { margin: 0; font-size: 1.08rem; }
.widget-option-control label, .worksheet-tab-input label { margin-bottom: 5px; font-size: .8rem; }
.widget-option-control select { width: 100%; }
.worksheet-tab-input { grid-column: 2; }
.worksheet-tab-input p { margin: 8px 0 0; color: var(--muted); font-size: .77rem; }
.widget-profile-options { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-top: 1px solid var(--line); padding-top: 17px; }
.widget-profile-options label { margin-bottom: 5px; font-size: .8rem; }
.widget-profile-options label span { color: var(--muted); font-weight: 400; }
.widget-profile-options input, .widget-profile-options select { width: 100%; min-height: 40px; }
.widget-option-help { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.5; }
.hint { margin: 14px 0 0; color: var(--muted); font-size: .8rem; }
.status { margin-top: 17px; border-radius: 14px; padding: 12px 14px; font-size: .9rem; white-space: pre-line; }
.status.loading { background: var(--blue-soft); color: var(--blue-dark); }
.status.success { background: #effbf2; color: var(--green); }
.status.error { background: #fff1f2; color: var(--red); }

#workspace { margin-top: 28px; }
.summary { margin-bottom: 29px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 28px; }
.metrics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 20px; }
.metrics div { min-width: 76px; text-align: right; }
.metrics strong, .metrics span { display: block; }
.metrics strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.metrics span { color: var(--muted); font-size: .72rem; }
.warnings, .preamble { margin-top: 18px; border-radius: 14px; padding: 12px 14px; }
.warnings { background: #fff8e8; color: #765b00; }
.preamble { border-left: 3px solid var(--blue); background: var(--blue-soft); }
.warnings p, .preamble p { margin: 3px 0; }
.data-health { margin-top: 18px; border: 1px solid var(--line); border-radius: 14px; background: #f8fafc; padding: 13px 14px; }
.data-health-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.data-health-heading h3 { margin: 0; font-size: .96rem; }
.data-health-heading span { color: var(--muted); font-size: .75rem; }
.data-health.healthy { border-color: #b8dfcf; background: #f1fbf7; }
.data-health.warning { border-color: #ead39b; background: #fffaf0; }
.data-health.error { border-color: #efb8b8; background: #fff7f7; }
.health-ok, .health-issue { margin: 8px 0 0; font-size: .8rem; line-height: 1.45; }
.health-issue { display: flex; align-items: flex-start; gap: 8px; }
.health-issue strong { flex: 0 0 auto; border-radius: 999px; background: #e8edf3; padding: 2px 7px; font-size: .62rem; letter-spacing: .04em; text-transform: uppercase; }
.health-error strong { background: #ffe1e1; color: #8e2424; }
.health-warning strong { background: #ffedbd; color: #765400; }
.health-info strong { background: #dfeeff; color: #245e91; }
.confidence { margin-top: 18px; border-radius: 14px; background: #f1f7ff; padding: 13px 14px; }
.confidence strong { color: var(--blue-dark); }
.confidence p { margin: 4px 0; color: var(--muted); font-size: .82rem; }
.confidence ul { margin: 9px 0 0; padding-left: 18px; color: var(--muted); font-size: .79rem; }
.preview-launchers { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-bottom: 25px; }
.preview-launchers h2 { font-size: 1.35rem; }
.preview-launchers p:not(.eyebrow) { margin: 8px 0 0; color: var(--muted); font-size: .84rem; }
.preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; }
.preview-actions button { white-space: nowrap; }
.export-json { min-height: 42px; flex: 0 0 auto; background: #1d1d1f; font-size: .83rem; }
.export-json:hover { background: #000; }
.floating-preview-actions {
    position: fixed;
    z-index: 15;
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    display: flex;
    gap: 8px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    background: rgba(255,255,255,.86);
    box-shadow: 0 14px 38px rgba(28,28,30,.18);
    backdrop-filter: blur(18px);
    padding: 7px;
    transition: opacity .18s, transform .18s;
}
.floating-preview-actions button { display: grid; grid-template-columns: 30px auto; min-height: 46px; align-items: center; column-gap: 8px; white-space: nowrap; font-size: .8rem; padding: 6px 13px 6px 7px; text-align: left; }
.floating-preview-actions button small { grid-column: 2; margin-top: -5px; font-size: .62rem; font-weight: 500; opacity: .72; }
.launcher-avatar { display: grid; width: 30px; height: 30px; grid-row: 1 / span 2; place-items: center; border-radius: 50%; background: rgba(255,255,255,.2); font-size: .67rem; font-weight: 750; }
body.preview-open .floating-preview-actions { opacity: 0; pointer-events: none; transform: translateY(8px); }

.mapping { max-width: 100%; overflow-x: hidden; }
.header-override { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 18px; padding-top: 17px; border-top: 1px solid var(--line); }
.header-override label { flex: 1; margin: 0; color: var(--muted); font-size: .82rem; font-weight: 500; }
.table-block-title { flex-basis: 100%; margin: 0; color: var(--muted); font-size: .82rem; }
.table-block-actions { display: flex; flex-basis: 100%; flex-wrap: wrap; gap: 7px; }
.table-block-actions button { min-height: 34px; border: 1px solid var(--line); background: #fff; color: var(--blue-dark); font-size: .76rem; padding: 6px 10px; }
.mapping-table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
th { color: var(--muted); font-size: .71rem; font-weight: 700; letter-spacing: .055em; text-align: left; text-transform: uppercase; }
th, td { border-bottom: 1px solid var(--line); padding: 13px 14px; vertical-align: top; }
.mapping-table tr:last-child td { border-bottom: 0; }
.mapping-table input, .mapping-table select { width: 100%; min-height: 38px; padding: 8px 10px; }
.type-label { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }
.unnamed-column { color: var(--muted); font-style: italic; }

.debug-panel { margin-top: 25px; }
.debug-panel summary { cursor: pointer; font-weight: 650; }
.debug-panel pre { max-height: 560px; overflow-x: hidden; overflow-y: auto; margin: 18px 0 0; border-radius: 15px; background: #1d1d1f; color: #f5f5f7; font: .78rem/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 17px; white-space: pre-wrap; word-break: break-word; }
.diagnostics-panel { margin-top: 18px; }
.diagnostics-panel summary { cursor: pointer; font-weight: 650; }
.diagnostics-panel > p { color: var(--muted); font-size: .82rem; }
.diagnostics { max-width: 100%; overflow-x: hidden; }
.diagnostic-summary { color: var(--muted); font-size: .8rem; }
.diagnostics-table { width: 100%; max-width: 100%; table-layout: fixed; border-collapse: collapse; font-size: .8rem; }
.diagnostics-table td { border-bottom: 1px solid var(--line); padding: 9px 8px; vertical-align: top; }
.diagnostics-table td:nth-child(1) { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.diagnostics-table td:nth-child(3) { overflow-wrap: anywhere; }
.row-kind { display: inline-block; border-radius: 999px; background: #eef0f4; color: #56565c; font-size: .68rem; font-weight: 700; padding: 3px 7px; text-transform: uppercase; }
.row-kind.header { background: #dceeff; color: #0066cc; }
.row-kind.section { background: #e6f7ec; color: #248a3d; }
.row-kind.repeated_header { background: #fff3d4; color: #8b5e00; }
.row-kind.data { background: #f0f1f3; }
.row-kind.empty { background: #f6f6f7; color: #98989d; }
.diagnostic-actions { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; }
.diagnostic-action { min-height: 29px; border: 1px solid var(--line); background: #fff; color: var(--blue-dark); font-size: .72rem; padding: 4px 8px; }
.diagnostic-action:hover { background: var(--blue-soft); box-shadow: none; transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }

/* Drawer shell. The widget itself paints the inside. */
.widget-preview-modal { position: fixed; z-index: 20; inset: 0; display: flex; justify-content: flex-end; background: rgba(0,0,0,.42); backdrop-filter: blur(9px); }
.widget-preview-drawer { position: relative; display: flex; height: 100%; flex-direction: column; overflow: hidden; background: #f5f5f7; box-shadow: -24px 0 60px rgba(0,0,0,.28); animation: widget-drawer-in .34s cubic-bezier(.22,.61,.36,1) both; }
.mobile-preview-drawer { width: min(430px, 100%); }
.desktop-preview-drawer { width: min(75vw, 1180px); min-width: min(720px, 100%); }
.drawer-close { position: absolute; z-index: 6; top: max(14px, env(safe-area-inset-top)); right: 14px; min-height: 34px; width: 34px; padding: 0; border-radius: 50%; background: rgba(255,255,255,.82); color: var(--ink); font-size: 1.55rem; font-weight: 400; line-height: 1; backdrop-filter: blur(10px); box-shadow: 0 3px 12px rgba(0,0,0,.16); }
.drawer-close:hover { background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.2); transform: none; }
.mobile-call-bar { position: absolute; z-index: 4; right: 0; bottom: 0; left: 0; padding: 28px 15px max(15px, env(safe-area-inset-bottom)); background: linear-gradient(to bottom, rgba(245,245,247,0), rgba(245,245,247,.92) 28%, #f5f5f7 58%); pointer-events: none; }
.mobile-call { display: flex; min-height: 52px; align-items: center; justify-content: center; border-radius: 15px; background: var(--blue); color: #fff; font-size: .92rem; font-weight: 700; text-decoration: none; box-shadow: 0 12px 28px rgba(0,91,187,.28); pointer-events: auto; }
.mobile-call:hover { background: var(--blue-dark); }

@media (max-width: 720px) {
    .shell { width: min(100% - 24px, 1220px); padding: 45px 0 82px; }
    .hero { margin-bottom: 28px; text-align: left; }
    h1 { font-size: 2.75rem; }
    .panel { border-radius: 18px; padding: 18px; }
    .mode-field { grid-template-columns: 1fr; gap: 7px; }
    .mode-field p { grid-column: auto; margin: 0; }
    .load-row { grid-template-columns: 1fr; }
    .sheet-options, .range-options { align-items: stretch; flex-direction: column; gap: 8px; }
    .sheet-options > div, .range-options > div { width: 100%; }
    .sheet-options p, .range-options p { margin: 0; }
    .widget-options { grid-template-columns: 1fr; gap: 13px; }
    .worksheet-tab-input { grid-column: auto; }
    .widget-profile-options { grid-template-columns: 1fr; }
    .preview-launchers { align-items: stretch; flex-direction: column; }
    .preview-actions { justify-content: stretch; }
    .preview-actions button { flex: 1 1 100%; }
    .floating-preview-actions {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
        flex-direction: column;
        align-items: stretch;
        border-radius: 18px;
    }
    .floating-preview-actions button { width: auto; max-width: calc(100vw - 34px); }
    .section-heading, .header-override { align-items: stretch; flex-direction: column; }
    .metrics { justify-content: flex-start; }
    .metrics div { text-align: left; }
    .mapping-table thead { display: none; }
    .mapping-table, .mapping-table tbody, .mapping-table tr, .mapping-table td { display: block; width: 100%; }
    .mapping-table tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; border-bottom: 1px solid var(--line); padding: 12px 0; }
    .mapping-table td { border: 0; padding: 0; }
    .mapping-table td::before { display: block; margin-bottom: 4px; color: var(--muted); font-size: .64rem; font-weight: 750; text-transform: uppercase; }
    .mapping-table td:nth-child(1)::before { content: "Колонка"; }
    .mapping-table td:nth-child(2)::before { content: "Название"; }
    .mapping-table td:nth-child(3)::before { content: "Тип"; }
    .mapping-table td:nth-child(4)::before { content: "Назначение"; }
    .diagnostics-table, .diagnostics-table tbody, .diagnostics-table tr, .diagnostics-table td { display: block; width: 100%; }
    .diagnostics-table tr { border-bottom: 1px solid var(--line); padding: 10px 0; }
    .diagnostics-table td { border: 0; padding: 3px 0; overflow-wrap: anywhere; }
}

@media (max-width: 560px) {
    .widget-preview-modal { align-items: flex-end; }
    .mobile-preview-drawer {
        width: 100%;
        height: calc(100dvh - 18px);
        border-radius: 22px 22px 0 0;
        animation-name: widget-sheet-in;
    }
}