:root{--bg:#0f1115;--panel:#171a21;--panel2:#1d212b;--line:#2a2f3a;--txt:#d6dae3;--txt2:#8b93a3;--accent:#4a9eff;--green:#3ddc84;color-scheme:dark;font-family:"Noto Sans CJK SC","Microsoft YaHei","PingFang SC",system-ui,sans-serif;}
*{box-sizing:border-box}body{margin:0;color:var(--txt);background:radial-gradient(ellipse at 80% 0,rgba(74,158,255,.09),transparent 600px),var(--bg);font-size:14px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.shell{width:min(1080px,calc(100% - 40px));margin:auto}.site-header{display:flex;justify-content:space-between;align-items:center;padding:24px 0;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700}.brand img{border-radius:50%;background:#fff}.brand small{display:block;font-size:9px;font-weight:500;letter-spacing:1px;color:var(--txt2);margin-top:3px}.local-badge{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--txt2)}.local-badge i{width:6px;height:6px;border-radius:50%;background:var(--green)}
.intro{padding:54px 0 34px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--accent)}h1{font-size:clamp(30px,5vw,48px);line-height:1.25;margin:15px 0 14px;letter-spacing:-1px;color:#f3f6fb}h1 span{color:var(--txt2)}.intro p{color:var(--txt2);line-height:1.8;max-width:740px;margin:0}
.converter{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 26px;border-bottom:1px solid var(--line)}h2{font-size:19px;margin:0;color:#eef2f8}.card-heading h2{font-size:15px}.card-heading>span{font-size:10px;letter-spacing:.5px;color:var(--txt2)}.conversion-grid{display:grid;grid-template-columns:1fr 1fr}.source-pane,.target-pane{padding:26px}.source-pane{border-right:1px solid var(--line)}.step-label{display:flex;align-items:center;gap:10px;margin-bottom:22px}.step-label>span{font:11px ui-monospace,monospace;color:var(--accent);background:rgba(74,158,255,.08);padding:6px;border-radius:4px}.step-label h3{font-size:14px;margin:0}.file-zone{min-height:212px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:9px;padding:20px;border:1px dashed #414b5c;border-radius:9px;background:rgba(29,33,43,.6);margin-bottom:20px;transition:border-color .18s,background .18s}.file-zone.drag{border-color:var(--accent);background:rgba(74,158,255,.09)}.file-zone svg{color:var(--accent);margin-bottom:2px}.file-zone strong{max-width:100%;overflow-wrap:anywhere;font-size:13px}.file-zone>span{font-size:11px;color:var(--txt2)}button,select{font:inherit}button,a.primary{cursor:pointer}button:disabled{cursor:default;opacity:.45}label{display:block;font-size:11px;color:var(--txt2);margin-bottom:8px}select{width:100%;min-width:0;height:42px;padding:0 32px 0 12px;border:1px solid #36404f;border-radius:7px;background:var(--panel2);color:var(--txt);font-size:13px}.secondary,.primary{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:42px;border-radius:7px;padding:0 20px;font-size:13px;font-weight:600;border:1px solid var(--line)}.secondary{background:var(--panel2);color:var(--txt)}.file-zone .secondary{min-height:36px;margin-top:4px;font-size:12px}.primary{background:var(--accent);border-color:var(--accent);color:#071523}.primary:not(:disabled):hover{filter:brightness(1.1)}.secondary:not(:disabled):hover{border-color:var(--accent)}:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.target-info{position:relative;margin-top:20px;padding:20px;background:linear-gradient(135deg,rgba(74,158,255,.075),rgba(74,158,255,.01));border:1px solid rgba(74,158,255,.18);border-radius:9px;min-height:180px}.target-info>span{font:26px ui-monospace,monospace;color:var(--accent)}.target-info h4{font-size:13px;margin:12px 0 7px}.target-info p{margin:0;color:var(--txt2);font-size:12px;line-height:1.75}.target-info small{display:block;color:var(--green);font-size:10px;margin-top:12px}.check{display:flex;align-items:center;gap:7px;margin:16px 0 0;line-height:1.6}.check input{accent-color:var(--accent);width:16px;height:16px;margin:0}
.advanced{border-top:1px solid var(--line);padding:16px 26px}.advanced summary{color:var(--txt2);cursor:pointer;font-size:12px}.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding-top:18px}.advanced p{font-size:11px;color:var(--txt2);line-height:1.8}.action-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 26px;border-top:1px solid var(--line);background:rgba(0,0,0,.12)}.action-bar p{flex:1;min-width:0;font-size:11px;color:var(--txt2);line-height:1.7;margin:0}.actions{display:flex;gap:8px;flex-shrink:0}.status-panel{padding:0 26px 20px}.status-panel p{font-size:12px;color:var(--accent)}progress{width:100%;height:6px;accent-color:var(--accent)}.error{margin:0;padding:18px 26px;background:rgba(255,100,100,.07);color:#ff9898;line-height:1.8;font-size:12px;overflow-wrap:anywhere}.result{margin-top:22px;padding:26px;border:1px solid rgba(61,220,132,.3);background:rgba(61,220,132,.025);border-radius:12px}.result-head{display:flex;align-items:center;justify-content:space-between;gap:20px}.result h2{margin-top:8px}.resultSummary,.result p{color:var(--txt2);font-size:12px;line-height:1.7}.result .warning{color:#ffc781}.preview-wrap,.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:left;font-size:12px}caption{text-align:left;margin:22px 0 10px;color:var(--txt2);font-size:11px}th{color:var(--txt2);font-size:11px;font-weight:500}th,td{padding:15px 12px;border-bottom:1px solid var(--line);line-height:1.6}thead{background:rgba(29,33,43,.5)}.preview-wrap td{white-space:nowrap;font:11px ui-monospace,monospace}.preview-wrap td:last-child{color:var(--green)}.compatibility{padding:48px 0}.section-heading p{color:var(--txt2);font-size:12px;line-height:1.8;max-width:800px;margin:12px 0 20px}.compatibility td{min-width:160px}.compatibility td:first-child{min-width:95px}.compatibility td small{display:block;color:var(--txt2);font-size:10px;margin-top:3px}.notes{padding:14px 0;color:var(--txt2);font-size:11px;line-height:1.9}.notes strong{color:#b8c1d1;font-weight:500}footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:24px 0 calc(28px + env(safe-area-inset-bottom));font-size:11px;color:var(--txt2)}html[lang="en"] .intro h1 span{margin-left:.16em}html[lang="en"] .notes strong{margin-right:.25em}
#navNotice{position:fixed;z-index:160;max-width:calc(100vw - 16px);padding:8px 12px;border:1px solid var(--accent);border-radius:7px;background:var(--panel);color:#fff;font-size:12px;pointer-events:none;opacity:0}#navNotice.show{opacity:1}
@media(max-width:700px){.shell{width:calc(100% - 24px)}.site-header{padding:20px 0}.brand small{display:none}.local-badge{font-size:10px}.intro{padding:36px 0 26px}h1{font-size:33px}.intro p{font-size:12px}.card-heading{padding:18px}.card-heading>span{display:none}.conversion-grid{grid-template-columns:1fr}.source-pane,.target-pane{padding:20px}.source-pane{border-right:none;border-bottom:1px solid var(--line)}.target-info{min-height:0}.file-zone{min-height:190px}.advanced{padding:16px 20px}.advanced-grid{grid-template-columns:1fr}.action-bar{padding:20px;flex-direction:column;align-items:stretch;gap:14px}.actions{justify-content:flex-end}.actions .primary{flex:1}.result{padding:20px}.result-head{align-items:stretch;flex-direction:column}.result-head .primary{width:100%}.compatibility{padding-top:36px}.status-panel{padding:0 20px 20px}.error{padding:16px 20px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto;transition:none!important}}

/* The conversion flow is intentionally vertical: source first, target second. */
.conversion-grid{grid-template-columns:minmax(0,1fr)}
.source-pane{border-right:0;border-bottom:1px solid var(--line)}
.file-zone{min-height:176px}
.target-info{min-height:0}
.save-result{margin:10px 0 0;color:var(--green)!important}
.csv-options{margin-top:20px;padding:20px;border:1px solid var(--line);border-radius:9px;background:rgba(0,0,0,.13)}
.csv-options-head,.dbc-picker,.signal-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.csv-options-head span{font-size:9px;letter-spacing:1.5px;color:var(--accent)}.csv-options-head h4{margin:5px 0 0;font-size:14px}.csv-options-head strong{color:var(--green);font-size:11px}.dbc-picker{justify-content:flex-start;margin:18px 0}.dbc-picker span{min-width:0;color:var(--txt2);font-size:11px;overflow-wrap:anywhere}.csv-controls{display:grid;grid-template-columns:180px minmax(0,1fr);gap:14px}.csv-controls input{width:100%;height:42px;padding:0 12px;border:1px solid #36404f;border-radius:7px;background:var(--panel2);color:var(--txt);font:inherit;font-size:13px}.signal-actions{justify-content:flex-end;margin:14px 0 10px}.signal-actions .secondary{min-height:34px;padding:0 12px;font-size:11px}.signal-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:260px;overflow:auto;padding:8px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}.signal-list>p{grid-column:1/-1;margin:12px;color:var(--txt2);font-size:11px}.signal-option{display:flex;align-items:flex-start;gap:8px;margin:0;padding:9px;border-radius:5px;color:var(--txt);background:var(--panel2);cursor:pointer}.signal-option:hover{background:#242a35}.signal-option input{flex:0 0 auto;margin:2px 0 0;accent-color:var(--accent)}.signal-option span{min-width:0;overflow:hidden}.signal-option b,.signal-option small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.signal-option b{font-size:11px}.signal-option small{margin-top:3px;color:var(--txt2);font-size:9px}.csv-note{margin:12px 0 0;color:var(--txt2);font-size:10px;line-height:1.7}
@media(max-width:700px){.csv-options{padding:16px}.csv-controls{grid-template-columns:1fr}.signal-list{grid-template-columns:1fr}.dbc-picker{align-items:stretch;flex-direction:column}.dbc-picker .secondary{width:100%}}

/* Three independent workflow rows: source, raw format conversion and DBC signal CSV. */
.conversion-flow{display:flex;flex-direction:column}
.workflow-row{padding:26px;border-bottom:1px solid var(--line)}
.workflow-row:last-child{border-bottom:0}
.source-pane{border:0;border-bottom:1px solid var(--line)}
.file-zone{min-height:150px;margin-bottom:14px}
.field-note,.row-note{display:block;margin-top:8px;color:var(--txt2);font-size:11px;line-height:1.7}
.file-list{display:grid;gap:6px;margin:0 0 18px}
.file-item{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:9px 12px;border:1px solid var(--line);border-radius:6px;background:var(--panel2)}
.file-item strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.file-item span{flex:none;color:var(--txt2);font-size:11px}
.target-layout{display:grid;grid-template-columns:minmax(190px,.65fr) minmax(300px,1.35fr) auto;align-items:end;gap:16px}
.target-info{display:flex;align-items:center;gap:16px;min-height:0;margin:0;padding:14px 16px}
.target-info>span{flex:none}.target-info h4{margin:0 0 4px}.target-info p{line-height:1.5}.target-info small{margin-top:5px}
.target-layout>.primary{min-width:150px}
.csv-options{margin:0;padding:26px;border:0;border-radius:0;background:transparent}
.csv-options .step-label strong{margin-left:auto;color:var(--green);font-size:11px}
.csv-stage{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
.stage-number{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(74,158,255,.1);color:var(--accent);font:11px ui-monospace,monospace}
.csv-stage>div>label,.signal-toolbar>label{margin:0 0 9px;color:var(--txt);font-weight:600}
.dbc-picker{justify-content:flex-start;margin:0}.dbc-picker span{min-width:0;color:var(--txt2);font-size:11px;overflow-wrap:anywhere}
.signal-workspace{min-width:0}
.signal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:10px}
.signal-toolbar label{margin:0}.signal-toolbar input{width:min(430px,65%);height:38px;padding:0 12px;border:1px solid #36404f;border-radius:7px;background:var(--panel2);color:var(--txt);font:inherit;font-size:12px}
.signal-selector{display:grid;grid-template-columns:1fr 1fr;gap:1px;min-height:280px;max-height:390px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:var(--line)}
.signal-column{display:flex;min-width:0;min-height:0;flex-direction:column;background:var(--panel)}
.signal-column-head{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid var(--line);background:var(--panel2);color:var(--txt2);font-size:11px;font-weight:600}
.signal-column-head>span{margin-left:auto;color:var(--green)}
.mini-button{min-height:26px;padding:0 9px;border:1px solid var(--line);border-radius:5px;background:var(--panel);color:var(--txt2);font-size:11px;cursor:pointer}
.signal-list{display:block;min-height:0;max-height:none;flex:1;overflow:auto;padding:6px;border:0;border-radius:0;background:var(--panel)}
.signal-list>p{margin:14px;color:var(--txt2);font-size:11px}
.signal-group{margin:4px 0 10px}
.signal-group-title{padding:5px 7px;color:var(--accent);font-size:11px}
.signal-option{margin:2px 0;padding:6px 8px 6px 18px}
.signal-option b{font-size:12px}.signal-option small{font-size:10px}
.interval-stage>div{width:min(260px,100%)}
.start-stage>div{width:min(260px,100%)}.start-stage .primary{width:100%}
.csv-note{margin:8px 0 0 40px}
.download-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.download-list a{text-decoration:none}

@media(max-width:820px){
  .target-layout{grid-template-columns:1fr}.target-layout>.primary{width:100%}
  .target-info{align-items:flex-start}.signal-selector{grid-template-columns:1fr;max-height:none}.signal-column{min-height:230px}.signal-toolbar{align-items:stretch;flex-direction:column}.signal-toolbar input{width:100%}
}
@media(max-width:700px){
  .workflow-row,.csv-options{padding:20px}.file-item{align-items:flex-start;flex-direction:column;gap:4px}.file-item span{flex:auto}
  .dbc-picker{align-items:stretch;flex-direction:column}.dbc-picker .secondary{width:100%}.csv-note{margin-left:0}
}

/* The two conversion modes are compact horizontal accordions, collapsed by default. */
.conversion-flow{position:relative;gap:8px;background:#11141a}
.conversion-accordion{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)}
.conversion-accordion>summary{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:66px;padding:12px 26px 12px 22px;overflow:hidden;list-style:none;cursor:pointer;user-select:none;transition:box-shadow 1.2s cubic-bezier(.22,1,.36,1)}
.conversion-accordion>summary::-webkit-details-marker{display:none}
.conversion-accordion>summary::after{content:"";position:absolute;z-index:0;inset:0;background:rgba(255,255,255,.055);box-shadow:inset 0 0 34px var(--section-tint);opacity:0;pointer-events:none;transition:opacity 1.2s cubic-bezier(.22,1,.36,1)}
.conversion-accordion>summary>*{position:relative;z-index:1}
.conversion-accordion>summary>.accordion-copy{display:flex;min-width:0;flex-direction:column;gap:4px}
.conversion-accordion>summary b{font-size:13px;color:var(--txt)}
.conversion-accordion>summary small{overflow:hidden;color:var(--txt2);font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.conversion-accordion>summary>strong{margin-left:auto;color:var(--green);font-size:11px;white-space:nowrap}
.conversion-accordion>summary>i{color:var(--section-accent);font-style:normal;font-size:18px;transition:transform .2s ease}
.conversion-accordion[open]>summary{background:linear-gradient(90deg,var(--section-tint),rgba(29,33,43,.72) 78%)}
.conversion-accordion[open]>summary>i{transform:rotate(180deg)}
.conversion-accordion>summary:hover,.conversion-accordion>summary:focus-visible{box-shadow:inset 4px 0 var(--section-accent),inset 0 0 32px var(--section-tint),0 0 16px var(--section-tint);outline:none}
.conversion-accordion>summary:hover::after,.conversion-accordion>summary:focus-visible::after{opacity:1}
.workflow-heading{--section-accent:#38bdf8;--section-tint:rgba(56,189,248,.14);border-left:4px solid var(--section-accent);background:linear-gradient(90deg,var(--section-tint),rgba(29,33,43,.34) 76%);box-shadow:inset 0 0 22px rgba(255,255,255,.015)}
.source-heading{--section-accent:#38bdf8;--section-tint:rgba(56,189,248,.14);--section-highlight:rgba(56,189,248,.3);--section-glow:rgba(56,189,248,.2)}
.format-heading{--section-accent:#3ddc84;--section-tint:rgba(61,220,132,.13);--section-highlight:rgba(61,220,132,.28);--section-glow:rgba(61,220,132,.18)}
.csv-heading{--section-accent:#a78bfa;--section-tint:rgba(167,139,250,.15);--section-highlight:rgba(167,139,250,.3);--section-glow:rgba(167,139,250,.2)}
.source-heading{animation:workflow-row-guide 1s ease-out .12s 1 both}
.format-heading{animation:workflow-row-guide 1s ease-out 1.12s 1 both}
.csv-heading{animation:workflow-row-guide 1s ease-out 2.12s 1 both}
@keyframes workflow-row-guide{0%,100%{box-shadow:inset 0 0 22px rgba(255,255,255,.015)}18%,72%{background:linear-gradient(90deg,var(--section-highlight),rgba(29,33,43,.48) 76%);box-shadow:inset 4px 0 var(--section-accent),inset 0 0 38px var(--section-highlight),0 0 18px var(--section-glow)}}
.accordion-index{display:grid;place-items:center;width:30px;height:30px;flex:0 0 30px;border:1px solid var(--section-accent);border-radius:8px;background:var(--section-tint);color:var(--section-accent);font:700 10px ui-monospace,monospace;box-shadow:0 0 14px var(--section-tint)}
.accordion-action{flex:none;margin-left:auto;padding:5px 9px;border:1px solid var(--section-accent);border-radius:999px;background:var(--section-tint);color:var(--section-accent);font-size:11px;font-weight:700;letter-spacing:.3px;white-space:nowrap}
.conversion-accordion>summary>strong+.accordion-action{margin-left:0}
.conversion-accordion>summary>strong[hidden]+.accordion-action{margin-left:auto}
.when-open{display:none}
.conversion-accordion[open] .when-closed{display:none}
.conversion-accordion[open] .when-open{display:inline}
.accordion-content{padding:24px 26px 26px;border-top:1px solid var(--line);animation:accordion-in .2s ease both}
.source-accordion .source-pane{border:0}
.source-pane>.advanced{margin:0 0 18px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.12)}
@keyframes accordion-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.format-cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px;margin:0 0 16px}
.format-card{display:flex;min-width:0;min-height:104px;padding:12px 8px;border:1px solid var(--line);border-radius:9px;flex-direction:column;align-items:center;justify-content:center;gap:6px;background:var(--panel2);color:var(--txt);cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.format-card:hover{border-color:#4a607a;transform:translateY(-1px)}
.format-card[aria-pressed="true"]{border-color:var(--accent);background:linear-gradient(145deg,rgba(74,158,255,.18),rgba(74,158,255,.05));box-shadow:0 0 0 1px rgba(74,158,255,.1) inset}
.format-card>span{color:var(--accent);font:20px ui-monospace,monospace}
.format-card>b{overflow:hidden;max-width:100%;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.target-layout{grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.target-layout>.primary{align-self:stretch;min-width:170px}
.target-info{display:flex;align-items:center;min-height:90px}
.csv-options{padding:24px 26px 26px}

@media(max-width:900px){.format-cards{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){
  .conversion-accordion>summary{padding:12px 14px}.conversion-accordion>summary small{white-space:normal}
  .accordion-content,.csv-options{padding:20px}.format-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.format-card{min-height:92px}
  .target-layout{grid-template-columns:1fr}.target-layout>.primary{min-height:46px}
}
@media(max-width:430px){.conversion-accordion>summary>strong{display:none}.conversion-accordion>summary>strong+.accordion-action{margin-left:auto}.accordion-action{padding:4px 7px;font-size:10px}.conversion-accordion>summary{gap:9px}}
@media(prefers-reduced-motion:reduce){.workflow-heading{animation:none}}

/* Compatibility information stays compact until the user asks for it. */
.compatibility-accordion{margin:36px 0 12px;padding:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.compatibility-accordion>summary{--section-accent:#f59e0b;--section-tint:rgba(245,158,11,.13);display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 14px;border-left:4px solid var(--section-accent);list-style:none;cursor:pointer;user-select:none;background:linear-gradient(90deg,var(--section-tint),rgba(29,33,43,.34) 76%);box-shadow:inset 0 0 22px rgba(255,255,255,.015)}
.compatibility-accordion>summary::-webkit-details-marker{display:none}
.compatibility-accordion>summary h2{margin:0;font-size:18px}
.compatibility-accordion>summary p{margin:7px 0 0}
.compatibility-action{display:flex;align-items:center;gap:10px;flex:none;color:var(--section-accent);font-size:11px;font-weight:700;white-space:nowrap}
.compatibility-action i{font-style:normal;font-size:18px;transition:transform .2s ease}
.compatibility-accordion[open] .compatibility-action i{transform:rotate(180deg)}
.compatibility-accordion[open] .when-closed{display:none}
.compatibility-accordion[open] .when-open{display:inline}
.compatibility-accordion>.table-wrap{border-top:1px solid var(--line)}
@media(max-width:700px){.compatibility-accordion{margin-top:28px}.compatibility-accordion>summary{align-items:flex-start;padding:17px 2px}.compatibility-accordion>summary p{font-size:11px}.compatibility-action>span{display:none}}