:root { --ink:#17342d; --muted:#61716c; --paper:#f6f2e8; --card:#fffdf7; --mint:#c9f0df; --green:#19765f; --line:#d8ded8; --orange:#f18f56; --text:var(--ink); --panel:var(--card); --accent:var(--green); --soft:#eef2ed; --danger:#a53c2d; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; }
[data-theme="dark"] { --ink:#e9f4ef; --muted:#9fb1aa; --paper:#101815; --card:#18241f; --mint:#244d40; --green:#71d6b4; --line:#34443d; --orange:#f3a06e; --text:var(--ink); --panel:var(--card); --accent:var(--green); --soft:#25332d; --danger:#a53c2d; }
[data-theme="dark"] { color-scheme:dark; }
html[data-accent="ocean"] { --green:#0e7490; --mint:#cffafe; --accent:var(--green); }
html[data-accent="ocean"][data-theme="dark"] { --green:#22d3ee; --mint:#164e63; --accent:var(--green); }
html[data-accent="teal"] { --green:#0f766e; --mint:#ccfbf1; --accent:var(--green); }
html[data-accent="teal"][data-theme="dark"] { --green:#2dd4bf; --mint:#134e4a; --accent:var(--green); }
html[data-accent="indigo"] { --green:#4338ca; --mint:#e0e7ff; --accent:var(--green); }
html[data-accent="indigo"][data-theme="dark"] { --green:#818cf8; --mint:#312e81; --accent:var(--green); }
html[data-accent="plum"] { --green:#7e22ce; --mint:#f3e8ff; --accent:var(--green); }
html[data-accent="plum"][data-theme="dark"] { --green:#c084fc; --mint:#3b0764; --accent:var(--green); }
html[data-accent="rose"] { --green:#be123c; --mint:#ffe4e6; --accent:var(--green); }
html[data-accent="rose"][data-theme="dark"] { --green:#fb7185; --mint:#4c0519; --accent:var(--green); }
html[data-accent="amber"] { --green:#b45309; --mint:#fef3c7; --accent:var(--green); }
html[data-accent="amber"][data-theme="dark"] { --green:#fbbf24; --mint:#451a03; --accent:var(--green); }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 ui-sans-serif, system-ui, sans-serif; }
body,.workspace,.clean-panel,.drop-zone,.privacy-pill,.text-button,.secondary-button,th,.result-bar { transition:background-color .2s,color .2s,border-color .2s; }
button,input { font:inherit; }
.site-header,main,footer { width:min(1180px, calc(100% - 40px)); margin:auto; }
.site-header { display:flex; justify-content:space-between; align-items:center; padding:26px 0; }
.brand { color:var(--ink); text-decoration:none; font-weight:850; font-size:22px; letter-spacing:-.8px; }
.brand span { color:var(--green); }
.privacy-pill { border-left:1px solid var(--line); padding-left:12px; color:var(--muted); font-size:12px; font-weight:650; }
[data-theme="dark"] .privacy-pill { border-color:var(--line); }
.header-actions { display:flex; align-items:center; gap:10px; }
.theme-toggle { border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 10px; color:var(--ink); background:transparent; cursor:pointer; font-size:12px; font-weight:650; }
.hero { min-height:500px; display:grid; place-items:center; align-content:center; text-align:center; padding:50px 0 70px; }
.hero.tool-hero { min-height:0; padding:48px 0 32px; }
.eyebrow { text-transform:uppercase; letter-spacing:.16em; font-weight:800; font-size:11px; color:var(--green); margin:0 0 13px; }
h1 { font-size:clamp(38px,6vw,62px); line-height:1.05; letter-spacing:-.045em; margin:0; font-weight:720; }
.lede { color:var(--muted); max-width:560px; margin:20px auto 28px; font-size:16px; }
.tool-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin:0 0 56px; }
.tool-grid a { display:flex; flex-direction:column; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg,12px); padding:20px; text-decoration:none; color:var(--ink); transition:.15s; }
.tool-grid a:hover { border-color:var(--green); box-shadow:0 8px 20px rgba(23,52,45,.08); }
.tool-grid a strong { font-size:16px; font-weight:750; }
.tool-grid a span { color:var(--muted); font-size:13px; line-height:1.5; }
.tool-intro { display:flex; flex-direction:column; align-items:center; text-align:center; padding:40px 28px; }
.recipe-bar { margin-bottom:16px; }
.recipe-bar select { width:100%; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px; background:var(--card); color:var(--ink); font-size:13px; margin-bottom:8px; }
.recipe-actions { display:flex; gap:8px; }
.recipe-actions .secondary-button { width:auto; flex:1; margin:0; }
.small-note { color:var(--muted); font-size:12px; line-height:1.5; }
.recipe-bar .small-note { margin:8px 0 0; }
.two-up { display:grid; grid-template-columns:1fr 1fr; gap:20px; padding:28px; }
@media (max-width:800px) { .two-up { grid-template-columns:1fr; } }
.rule-controls { display:flex; flex-direction:column; gap:6px; flex:1; }
.clean-panel input.rule-pattern-input { width:100%; height:auto; accent-color:initial; border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 9px; font-size:12px; background:var(--card); color:var(--ink); }
.custom-pattern-form { display:flex; flex-direction:column; gap:8px; margin:4px 0 16px; }
.clean-panel .custom-pattern-form input { width:100%; height:auto; accent-color:initial; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; background:var(--card); color:var(--ink); }
.custom-pattern-form .secondary-button { margin-top:0; }
.custom-pattern-form .error { margin:0; font-size:11px; }
.date-normalize-options { margin:-6px 0 16px 30px; display:flex; flex-direction:column; gap:10px; }
.date-normalize-options label { display:flex; flex-direction:column; gap:4px; font-size:12px; color:var(--muted); font-weight:650; margin:0; cursor:default; }
.date-normalize-options select { border:1px solid var(--line); border-radius:var(--radius-sm); padding:7px 9px; font-size:13px; background:var(--card); color:var(--ink); }
.map-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border-bottom:1px solid var(--line); cursor:pointer; }
.map-row:last-child { border-bottom:0; }
.map-row span { display:flex; flex-direction:column; gap:2px; }
.map-row small { color:var(--muted); font-size:11px; }
.map-row select { flex:0 0 auto; min-width:200px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; background:var(--card); color:var(--ink); font-size:13px; }
.option-list-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.option-list-row label { flex:1; margin:14px 0; }
.remove-btn { border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; padding:4px 8px; }
.remove-btn:hover { color:var(--danger); }
.drop-zone { width:min(680px,100%); min-height:150px; border:1px dashed #8cb4a5; border-radius:var(--radius-md); display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--card); cursor:pointer; transition:.15s; }
.drop-zone:hover,.drop-zone.dragging { border-color:var(--green); background:#f4fff9; }
[data-theme="dark"] .drop-zone:hover,[data-theme="dark"] .drop-zone.dragging { background:#1d3028; }
.drop-zone input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.drop-zone:focus-within { outline:2px solid var(--green); outline-offset:2px; }
.drop-zone strong { font-size:18px; }
.drop-zone span:last-child { color:var(--muted); font-size:13px; margin-top:4px; }
.upload-icon { font-size:28px; margin-bottom:8px; color:var(--green); }
.paste-toggle { margin-top:12px; border:0; background:transparent; color:var(--green); cursor:pointer; font-size:12px; font-weight:750; }
.paste-panel { width:min(680px,100%); margin-top:14px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--card); text-align:left; }
.paste-panel>label { display:block; margin-bottom:7px; color:var(--muted); font-size:12px; font-weight:700; }
.paste-panel textarea { width:100%; resize:vertical; border:1px solid var(--line); border-radius:var(--radius-sm); padding:10px; color:var(--ink); background:var(--paper); font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace; }
.paste-panel>div { display:flex; gap:8px; margin-top:8px; }
.paste-panel .primary-button,.paste-panel .secondary-button { width:auto; margin:0; }
.error { color:var(--danger); min-height:24px; }
.workspace { background:var(--card); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:0 12px 35px rgba(23,52,45,.06); margin-bottom:70px; }
.file-bar { display:flex; justify-content:space-between; align-items:center; padding:18px 22px; border-bottom:1px solid var(--line); }
.file-bar>div:first-child { display:grid; grid-template-columns:46px auto; column-gap:12px; align-items:center; }
.file-bar strong,.file-bar small { grid-column:2; }
.file-bar small { color:var(--muted); }
.file-icon { grid-row:1/3; background:var(--mint); color:var(--green); border-radius:var(--radius-md); font-size:10px; font-weight:900; padding:12px 7px; text-align:center; }
.file-actions { display:flex; align-items:center; gap:12px; }
.file-actions label { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:11px; font-weight:700; }
.file-actions select { max-width:150px; border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px; color:var(--ink); background:var(--card); }
.text-button { border:0; background:transparent; color:var(--green); font-weight:750; cursor:pointer; }
.panel-grid { display:grid; grid-template-columns:320px 1fr; min-height:570px; }
.clean-panel { padding:28px; border-right:1px solid var(--line); background:#fbfaf4; }
[data-theme="dark"] .clean-panel { background:#141f1b; }
h2 { font:700 24px/1.15 ui-sans-serif,system-ui,sans-serif; letter-spacing:-.025em; margin:0 0 24px; }
.option-drawer { margin:0 0 20px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.option-drawer summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 2px; cursor:pointer; list-style:none; font-size:18px; font-weight:750; letter-spacing:-.02em; }
.option-drawer summary::-webkit-details-marker { display:none; }
.option-drawer summary::after { content:'⌄'; order:3; color:var(--muted); font-size:18px; transition:transform .15s; }
.option-drawer[open] summary::after { transform:rotate(180deg); }
.option-drawer summary small { margin-left:auto; color:var(--muted); font-size:11px; font-weight:650; letter-spacing:0; }
.option-list { padding:0 0 8px; }
.clean-panel label { display:flex; gap:12px; margin:18px 0; cursor:pointer; }
.clean-panel input { accent-color:var(--green); width:18px; height:18px; }
.clean-panel input.number-input { width:110px; height:auto; accent-color:initial; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 10px; font-size:13px; background:var(--card); color:var(--ink); }
.clean-panel label span { display:flex; flex-direction:column; }
.clean-panel small { color:var(--muted); margin-top:2px; }
.primary-button,.secondary-button { width:100%; border-radius:var(--radius-md); padding:13px 16px; font-weight:800; cursor:pointer; }
.primary-button { border:0; background:var(--green); color:white; box-shadow:0 5px 16px rgba(25,118,95,.18); }
.secondary-button { border:1px solid var(--line); background:transparent; color:var(--ink); margin-top:8px; }
.preview-panel { min-width:0; display:flex; flex-direction:column; }
.preview-heading { display:flex; justify-content:space-between; align-items:start; padding:28px 28px 8px; }
.preview-heading h2 { margin:0; }
.preview-heading>span { font-size:12px; color:var(--muted); background:var(--soft); padding:6px 10px; border-radius:99px; }
.preview-actions { display:flex; align-items:center; gap:10px; }
.preview-actions>span { font-size:12px; color:var(--muted); background:var(--soft); padding:6px 10px; border-radius:99px; }
.view-toggle { display:flex; flex-wrap:wrap; margin:4px 28px 12px; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; width:max-content; max-width:calc(100% - 56px); }
.view-toggle button { border:0; border-right:1px solid var(--line); padding:6px 9px; background:transparent; color:var(--muted); cursor:pointer; font-size:11px; font-weight:700; }
.view-toggle button:last-child { border-right:0; }
.view-toggle button.active { background:var(--ink); color:var(--card); }
.table-wrap { overflow:auto; margin:12px 28px; border:1px solid var(--line); border-radius:var(--radius-lg); max-height:380px; }
.raw-preview { overflow:auto; margin:12px 28px; min-height:280px; max-height:380px; padding:16px; border:1px solid var(--line); border-radius:var(--radius-lg); background:#101815; color:#d9eee5; font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace; white-space:pre; }
.alt-preview { overflow:auto; margin:12px 28px; min-height:280px; max-height:420px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card); }
.alt-section { padding:16px; border-bottom:1px solid var(--line); }
.alt-section:last-child { border-bottom:0; }
.alt-section h3 { margin:0 0 7px; font-size:14px; }
.alt-section p,.alt-section li { color:var(--muted); font-size:12px; }
.alt-section ul { margin:6px 0 0; padding-left:18px; }
.alt-warning { border-left:3px solid var(--orange); padding-left:13px; }
.alt-warning h3 { color:var(--orange); }
.metric-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; background:var(--line); }
.metric { padding:15px; background:var(--card); }
.metric strong { display:block; font-size:22px; }
.metric span { color:var(--muted); font-size:11px; }
.profile-table { width:100%; white-space:normal; }
.record-nav { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.record-nav button { border:1px solid var(--line); border-radius:var(--radius-sm); padding:6px 9px; background:transparent; color:var(--ink); cursor:pointer; }
.record-fields { display:grid; grid-template-columns:minmax(120px,1fr) 2fr; border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.record-fields dt,.record-fields dd { margin:0; padding:9px 11px; border-bottom:1px solid var(--line); font-size:12px; }
.record-fields dt { background:rgba(127,127,127,.07); font-weight:700; }
table { width:100%; border-collapse:collapse; font-size:13px; white-space:nowrap; }
th { text-align:left; background:#eaf4ed; position:sticky; top:0; color:var(--green); }
[data-theme="dark"] th { background:#20352d; }
th,td { padding:10px 12px; border-right:1px solid #e4e8e3; border-bottom:1px solid #e4e8e3; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.result-bar { margin-top:auto; padding:20px 28px; background:#e8f7ef; display:flex; align-items:center; justify-content:space-between; gap:24px; }
[data-theme="dark"] .result-bar { background:#1e382e; }
.result-bar div { display:flex; flex-direction:column; }
.result-bar span { color:var(--muted); font-size:13px; }
.result-bar .primary-button { width:auto; white-space:nowrap; }
.download-controls { display:grid !important; grid-template-columns:auto auto; align-items:center; gap:5px 10px; min-width:225px; }
.download-controls label { color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; }
.download-controls select { grid-column:2; border:1px solid var(--line); border-radius:var(--radius-sm); padding:8px 9px; color:var(--ink); background:var(--card); font-size:12px; }
.excel-style-options { grid-column:1/3; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.excel-style-options>summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 1px; cursor:pointer; color:var(--ink); font-size:12px; font-weight:750; }
.selected-style { display:flex; align-items:center; gap:6px; color:var(--muted); }
.selected-style small { font-size:11px; font-weight:650; }
.style-fields { display:grid !important; grid-template-columns:1fr 1.4fr; align-items:center; gap:7px 10px; padding:3px 0 11px; }
.style-fields label { color:var(--muted); font-size:11px; font-weight:650; }
.style-fields select { grid-column:2; width:100%; }
.theme-picker { grid-column:2; }
.theme-picker>summary { display:flex; align-items:center; gap:8px; min-height:34px; padding:7px 9px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); color:var(--ink); cursor:pointer; list-style:none; font-size:12px; }
.theme-picker>summary::-webkit-details-marker { display:none; }
.theme-picker>summary::after { content:'⌄'; margin-left:auto; color:var(--muted); }
.theme-swatches { display:inline-flex; overflow:hidden; border:1px solid var(--line); border-radius:4px; }
.theme-swatches i { width:12px; height:12px; background:var(--swatch); }
.theme-menu { width:100%; max-height:245px; overflow:auto; margin-top:4px; padding:5px; border:1px solid var(--line); border-radius:var(--radius-sm); background:var(--card); box-shadow:0 8px 20px rgba(0,0,0,.12); }
.theme-menu button { display:flex; align-items:center; gap:9px; width:100%; padding:7px 8px; border:0; border-radius:var(--radius-sm); background:transparent; color:var(--ink); cursor:pointer; text-align:left; font-size:12px; }
.theme-menu button:hover,.theme-menu button[aria-checked="true"] { background:rgba(90,130,115,.12); }
.accent-picker { position:relative; }
.accent-picker>summary { display:flex; align-items:center; gap:6px; min-height:34px; padding:7px 10px; border:1px solid var(--line); border-radius:var(--radius-sm); background:transparent; color:var(--ink); cursor:pointer; list-style:none; font-size:12px; font-weight:650; }
.accent-picker>summary::-webkit-details-marker { display:none; }
.accent-picker .theme-menu { position:absolute; right:0; top:calc(100% + 4px); width:170px; z-index:20; }
.download-controls .primary-button { grid-column:1/3; }
.notes-row { display:flex; flex-wrap:wrap; gap:10px 24px; border-top:1px solid var(--line); padding:24px 0 56px; color:var(--muted); font-size:12px; }
.notes-row span::before { content:'✓'; color:var(--green); margin-right:7px; font-weight:800; }
footer { display:flex; justify-content:space-between; padding:24px 0 34px; border-top:1px solid var(--line); color:var(--muted); font-size:12px; }
@media (max-width:800px) { .panel-grid { grid-template-columns:1fr; } .clean-panel { border-right:0; border-bottom:1px solid var(--line); } .result-bar { align-items:stretch; flex-direction:column; } .result-bar .primary-button { width:100%; } }
@media (max-width:520px) { .site-header,main,footer { width:min(100% - 24px,1180px); } .privacy-pill { display:none; } .theme-toggle span { display:none; } .hero { min-height:440px; } h1 { font-size:40px; } .file-bar { align-items:flex-start; } .preview-heading { flex-direction:column; gap:10px; } footer { flex-direction:column; gap:5px; } }