:root { color-scheme: dark; --bg:#06100d; --panel:rgba(13,31,25,.86); --panel-2:#091914; --line:rgba(144,255,214,.15); --line-strong:rgba(49,229,165,.38); --text:#effbf6; --muted:#91a8a0; --green:#31e5a5; --green-strong:#08b981; --danger:#ff8378; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; color:var(--text); background:radial-gradient(circle at 82% 3%,rgba(8,185,129,.15),transparent 34rem),linear-gradient(180deg,#07130f,#06100d 65%,#081511); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 72%); }
.noise { position:fixed; inset:0; opacity:.03; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
a { color:inherit; text-decoration:none; }.site-header,main,footer { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.site-header { height:82px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); position:relative; z-index:2; }
.brand { display:inline-flex; align-items:center; gap:12px; font-weight:760; letter-spacing:-.02em; }.brand-mark { display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--green); color:#052019; font-weight:900; box-shadow:0 0 28px rgba(49,229,165,.18); }
nav { display:flex; gap:26px; color:var(--muted); font-size:14px; }nav a:hover,footer a:hover { color:var(--green); }
.intro { padding:70px 0 38px; display:flex; justify-content:space-between; align-items:end; gap:40px; }
.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 14px; color:var(--green); font:750 11px/1 ui-monospace,SFMono-Regular,Consolas,monospace; letter-spacing:.16em; }.eyebrow span { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 12px var(--green); }
h1 { margin:0; font-size:clamp(45px,7vw,78px); line-height:1; letter-spacing:-.06em; }.intro>div>p:last-child { max-width:650px; margin:20px 0 0; color:var(--muted); font-size:16px; line-height:1.7; }
.privacy-badge { display:flex; align-items:center; gap:12px; min-width:205px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:rgba(12,29,23,.65); }.privacy-badge i { width:9px; height:9px; border-radius:50%; background:var(--green); box-shadow:0 0 14px var(--green); }.privacy-badge span { display:flex; flex-direction:column; gap:3px; }.privacy-badge strong { font-size:13px; }.privacy-badge small { color:var(--muted); font-size:11px; }
.workspace { padding:22px 0 110px; display:grid; gap:18px; }.panel { border:1px solid var(--line); border-radius:22px; padding:28px; background:linear-gradient(145deg,rgba(17,42,33,.84),rgba(8,23,18,.88)); backdrop-filter:blur(12px); box-shadow:0 18px 55px rgba(0,0,0,.16); }
.panel-title { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:20px; }.panel-title>div:first-child { display:flex; align-items:center; gap:14px; }.step { display:grid; place-items:center; flex:0 0 auto; width:36px; height:36px; border:1px solid var(--line-strong); border-radius:10px; color:var(--green); font:700 11px/1 ui-monospace,monospace; }.panel h2 { margin:0; font-size:20px; letter-spacing:-.02em; }.panel-title p { margin:4px 0 0; color:var(--muted); font-size:12px; }
button,input,textarea { font:inherit; }button { border:0; cursor:pointer; }button:disabled { cursor:not-allowed; opacity:.38; }.ghost { padding:10px 13px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); color:#bcd1c9; }.ghost:hover:not(:disabled) { border-color:var(--line-strong); color:var(--text); }.danger { color:#ffaaa3; }.danger:hover:not(:disabled) { border-color:rgba(255,131,120,.34); }
textarea { display:block; width:100%; min-height:250px; resize:vertical; border:1px solid var(--line); border-radius:15px; padding:18px; color:var(--text); background:rgba(2,13,10,.62); outline:none; line-height:1.65; font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; font-size:14px; tab-size:4; }textarea:focus,input:focus { border-color:var(--green-strong); box-shadow:0 0 0 3px rgba(49,229,165,.08); }
.drop-zone { margin-top:12px; min-height:76px; display:flex; align-items:center; justify-content:center; gap:14px; border:1px dashed rgba(144,255,214,.23); border-radius:14px; color:#b7cdc4; background:rgba(4,17,13,.3); cursor:pointer; transition:.2s ease; }.drop-zone:hover,.drop-zone.dragover { border-color:var(--green); background:rgba(49,229,165,.07); }.drop-zone.dragover { transform:scale(1.005); }.drop-zone input { position:absolute; width:1px; height:1px; opacity:0; }.drop-icon { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; background:rgba(49,229,165,.1); color:var(--green); font-weight:900; }.drop-zone>span:last-child { display:flex; flex-direction:column; gap:3px; }.drop-zone strong { font-size:13px; }.drop-zone small { color:var(--muted); }
.controls-grid { margin-top:18px; display:grid; grid-template-columns:minmax(260px,1fr) auto; gap:18px; align-items:end; }.delimiter-field { display:flex; flex-direction:column; gap:8px; color:#c8dbd4; font-size:13px; }.delimiter-field small { color:var(--muted); font-weight:400; margin-left:6px; }.delimiter-field input { width:100%; min-height:45px; padding:0 14px; border:1px solid var(--line); border-radius:11px; background:rgba(2,13,10,.62); color:var(--text); outline:none; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }.quick-delimiters { display:flex; flex-wrap:wrap; gap:7px; }.quick-delimiters button { height:45px; padding:0 12px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); color:var(--muted); }.quick-delimiters button:hover { color:var(--green); border-color:var(--line-strong); }
.options { display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; color:var(--muted); font-size:12px; }.options label { display:flex; align-items:center; gap:8px; cursor:pointer; }.options input { accent-color:var(--green-strong); }
.actions { display:flex; align-items:center; gap:10px; margin-top:22px; }.primary { min-height:46px; padding:0 19px; display:inline-flex; align-items:center; justify-content:center; gap:34px; border-radius:11px; color:#052019; background:var(--green); font-weight:800; box-shadow:0 12px 32px rgba(8,185,129,.16); }.primary:hover { transform:translateY(-1px); }.shortcut { margin-left:auto; color:#6f8a80; font:11px/1 ui-monospace,monospace; }
.result-heading { margin-bottom:18px; }.result-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }.stats { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); border-radius:14px; overflow:hidden; background:rgba(2,13,10,.32); }.stats div { padding:16px 18px; display:flex; align-items:end; justify-content:space-between; gap:12px; }.stats div+div { border-left:1px solid var(--line); }.stats span { color:var(--muted); font-size:12px; }.stats strong { color:var(--green); font:750 24px/1 ui-monospace,monospace; }.stats div:last-child strong { color:#ffc76d; }
.table-wrap { margin-top:18px; max-height:600px; overflow:auto; border:1px solid var(--line); border-radius:14px; background:rgba(2,13,10,.38); }.table-wrap::-webkit-scrollbar { width:10px; height:10px; }.table-wrap::-webkit-scrollbar-thumb { background:#214438; border-radius:99px; border:2px solid #0a1b15; }
table { width:100%; border-collapse:separate; border-spacing:0; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; }th,td { min-width:120px; padding:11px 13px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; white-space:pre-wrap; word-break:break-word; }.row-number { position:sticky; left:0; z-index:2; min-width:116px; width:116px; color:#6f8a80; text-align:center; background:#0b1d17; user-select:none; }.row-index { display:block; }.duplicate-badge { display:inline-block; margin-top:5px; padding:3px 6px; border:1px solid rgba(255,199,109,.35); border-radius:999px; color:#ffc76d; background:rgba(255,178,56,.08); font-size:9px; white-space:nowrap; }.row-copy { position:sticky; left:116px; z-index:2; min-width:62px; width:62px; text-align:center; background:#0b1d17; }.row-copy button { padding:5px 7px; border:1px solid var(--line); border-radius:7px; background:transparent; color:var(--muted); font-size:11px; }.row-copy button:hover { color:var(--green); }.data-cell { cursor:pointer; transition:background .15s ease; }.data-cell:hover { background:rgba(49,229,165,.08); }.duplicate-row .data-cell { background:rgba(255,178,56,.045); }.active-row .data-cell { background:rgba(49,229,165,.105); }.active-row .row-number { color:var(--green); box-shadow:inset 3px 0 var(--green); }.data-cell.flash { animation:flash .35s ease; }@keyframes flash { 50% { background:rgba(49,229,165,.45); } }.render-note { margin:11px 2px 0; color:#d8a95e; font-size:12px; }
.toast { position:fixed; z-index:10; top:22px; right:22px; max-width:min(420px,calc(100% - 44px)); padding:11px 15px; border:1px solid rgba(49,229,165,.35); border-radius:11px; background:#0f3025; color:#dffff3; box-shadow:0 16px 45px rgba(0,0,0,.28); font-size:13px; opacity:0; transform:translateY(-12px); pointer-events:none; transition:.2s ease; }.toast.show { opacity:1; transform:translateY(0); }.toast.error { border-color:rgba(255,131,120,.4); background:#38201d; color:#ffd8d4; }
footer { min-height:100px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:12px; }
@media(max-width:760px){.site-header,main,footer{width:min(100% - 28px,1180px)}.site-header{height:70px}nav a:first-child{display:none}.intro{padding:55px 0 28px;align-items:flex-start;flex-direction:column}.privacy-badge{width:100%}.panel{padding:20px;border-radius:18px}.panel-title,.result-heading{align-items:flex-start;flex-direction:column}.result-actions{justify-content:flex-start}.controls-grid{grid-template-columns:1fr}.quick-delimiters button{flex:1}.actions{flex-wrap:wrap}.primary{flex:1}.shortcut{width:100%;margin:4px 0 0}.stats{grid-template-columns:repeat(2,1fr)}.stats div{padding:13px 12px;flex-direction:column;align-items:flex-start}.stats div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.stats div:nth-child(4){border-top:1px solid var(--line)}.stats strong{font-size:20px}.table-wrap{max-height:520px}footer{padding:24px 0;gap:18px;align-items:flex-start;flex-direction:column}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}