:root { --ink:#15241f; --muted:#68746f; --paper:#f6f5f0; --line:#d7ddd8; --green:#0e6a4d; --pink:#da4d69; --white:#fffefa; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Arial,"Microsoft YaHei",sans-serif; }
.topbar { height:72px; padding:0 max(24px,calc((100% - 1200px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(255,254,250,.85); }
.brand { color:var(--ink); font-size:21px; font-weight:800; text-decoration:none; letter-spacing:0; }.brand span { color:var(--green); }.topbar p, footer { margin:0; color:var(--muted); font-size:13px; }
main { width:min(1200px,calc(100% - 48px)); margin:0 auto; }.intro { padding:72px 0 48px; max-width:730px; }.eyebrow { color:var(--pink); font-size:12px; font-weight:700; letter-spacing:1.2px; }.intro h1 { margin:12px 0 16px; font-size:48px; line-height:1.13; letter-spacing:0; }.intro p:last-child { margin:0; color:var(--muted); font-size:16px; line-height:1.7; }
.workspace { display:grid; grid-template-columns:240px 1fr; min-height:480px; border:1px solid var(--line); background:var(--white); }.tool-nav { padding:14px; border-right:1px solid var(--line); background:#edf2ee; }.tool-nav button { width:100%; border:0; background:transparent; padding:10px 12px; color:#43514b; text-align:left; font-size:14px; cursor:pointer; border-radius:4px; }.tool-nav button:hover { background:#e1e9e3; }.tool-nav button.active { background:var(--green); color:white; font-weight:700; }
.tool-panel { padding:42px; }.tool-panel h2 { margin:0 0 9px; font-size:28px; }.tool-panel .description { margin:0 0 28px; color:var(--muted); line-height:1.6; }.dropzone { min-height:190px; border:2px dashed #b8c5bd; display:flex; flex-direction:column; justify-content:center; align-items:center; cursor:pointer; transition:.2s; }.dropzone:hover,.dropzone.drag { border-color:var(--green); background:#f4faf6; }.dropzone input { display:none; }.upload-icon { display:grid; place-items:center; height:36px; width:36px; margin-bottom:12px; border-radius:50%; color:white; background:var(--green); font-size:27px; font-weight:300; }.dropzone small { color:var(--muted); margin-top:6px; }.options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:20px; }.field { display:flex; flex-direction:column; gap:7px; color:#425049; font-size:13px; font-weight:700; }.field input,.field select { height:42px; padding:0 12px; border:1px solid var(--line); border-radius:3px; background:white; color:var(--ink); font-size:14px; }.selected-files { min-height:24px; margin:12px 0; color:var(--green); font-size:13px; line-height:1.6; }.submit { display:flex; align-items:center; justify-content:space-between; width:100%; border:0; padding:15px 18px; color:white; background:var(--ink); border-radius:3px; font-size:15px; font-weight:700; cursor:pointer; }.submit:hover { background:var(--green); }.submit:disabled { opacity:.6; cursor:wait; }.status { min-height:20px; margin:14px 0 0; color:var(--muted); font-size:13px; }.status.error { color:#b52945; } footer { padding:35px 24px; text-align:center; }
@media (max-width:720px) { .topbar { height:60px; padding:0 20px; }.topbar p { display:none; } main { width:calc(100% - 32px); }.intro { padding:42px 0 32px; }.intro h1 { font-size:34px; }.workspace { grid-template-columns:1fr; }.tool-nav { display:flex; overflow-x:auto; gap:4px; padding:10px; border-right:0; border-bottom:1px solid var(--line); }.tool-nav button { width:auto; flex:0 0 auto; white-space:nowrap; }.tool-panel { padding:26px 18px; }.options { grid-template-columns:1fr; } }