:root { --ink:#182230; --muted:#718096; --line:#e7ebf1; --blue:#356ae6; --blue-soft:#eef3ff; --bg:#f6f8fb; --green:#138a68; }
    * { box-sizing:border-box; }
    body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif; }
    button, input, select { font:inherit; }
    .app { min-height:100vh; display:flex; flex-direction:column; }
    header { height:72px; padding:0 42px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; }
    .brand { display:flex; align-items:center; gap:12px; font-weight:800; font-size:19px; letter-spacing:-.4px; }
    .brand-mark { width:34px; height:34px; border-radius:10px; background:linear-gradient(135deg,#5a83f4,#284fd0); display:grid; place-items:center; color:#fff; box-shadow:0 5px 12px #356ae633; }
    .brand-mark span { width:4px; height:14px; margin:2px; border-radius:3px; background:#fff; box-shadow:7px -5px 0 #b9caff,14px 2px 0 #fff; }
    .header-actions { display:flex; align-items:center; gap:14px; }
    .header-hint { color:var(--muted); font-size:13px; }
    .coffee-trigger { padding:7px 11px; border:1px solid #d78a42; border-radius:9px; background:#ffd140; color:#241600; font-size:11px; font-weight:800; white-space:nowrap; cursor:pointer; transition:filter .2s,transform .2s; }
    .coffee-trigger:hover { filter:brightness(1.06); transform:translateY(-1px); }
    .coffee-trigger:focus-visible, .coffee-dialog-close:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
    .language-switch { display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:7px; background:#fafbfd; }
    .language-switch button { padding:5px 8px; border:0; border-radius:5px; color:var(--muted); background:transparent; cursor:pointer; font-size:11px; }
    .language-switch button.active { color:var(--blue); background:#fff; box-shadow:0 1px 4px #263b5b14; font-weight:700; }
    main { width:min(1440px,calc(100% - 64px)); margin:30px auto 54px; }
    .hero { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:23px; }
    h1 { margin:0 0 7px; font-size:29px; letter-spacing:-1px; }
    .hero p { margin:0; color:var(--muted); font-size:14px; }
    .privacy-note { display:flex; align-items:center; gap:9px; width:max-content; max-width:100%; margin-top:14px; padding:9px 12px; border:1px solid #b9e5d2; border-radius:8px; color:#176b4f; background:#effbf5; font-size:12px; font-weight:600; }
    .privacy-note::before { content:'✓'; display:grid; place-items:center; flex:0 0 18px; width:18px; height:18px; border-radius:50%; color:#fff; background:#138a68; font-size:11px; font-weight:900; }
    .workspace { display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; align-items:start; }
    .panel, .chart-card { background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 4px 18px #263b5b08; }
    .panel { padding:20px; }
    .panel + .panel { margin-top:14px; }
    .panel-title { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; font-weight:700; font-size:15px; }
    .step { color:#98a3b4; font-size:11px; font-weight:700; }
    .upload { position:relative; padding:19px 12px; border:1px dashed #aebbd1; background:#fbfcff; border-radius:10px; text-align:center; cursor:pointer; transition:.2s; }
    .upload:hover, .upload.dragover { border-color:var(--blue); background:var(--blue-soft); }
    .upload-icon { color:var(--blue); font-size:26px; line-height:1; margin-bottom:8px; }
    .upload strong { display:block; font-size:13px; }
    .upload small { color:var(--muted); display:block; margin-top:6px; font-size:11px; }
    #fileInput { display:none; }
    .file-name { color:var(--green); font-size:12px; margin-top:11px; word-break:break-all; }
    label { display:block; margin:14px 0 7px; color:#596577; font-size:12px; font-weight:600; }
    select { width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:7px; color:var(--ink); background:#fff; outline:none; }
    select:focus { border-color:var(--blue); box-shadow:0 0 0 3px #356ae614; }
    .type-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
    .type-btn { padding:10px 6px; border:1px solid var(--line); border-radius:8px; color:#687589; background:#fff; cursor:pointer; font-size:12px; }
    .type-btn.active { color:var(--blue); border-color:#9bb3fb; background:var(--blue-soft); font-weight:700; }
    .type-icon { display:block; font-size:17px; margin-bottom:4px; }
    .primary { width:100%; margin-top:18px; padding:10px; border:0; border-radius:8px; color:#fff; background:var(--blue); cursor:pointer; font-weight:700; box-shadow:0 5px 13px #356ae633; }
    .primary:hover { background:#2859d5; }
    .content { min-width:0; }
    .chart-card { padding:22px 25px 12px; }
    .chart-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
    .chart-head h2 { margin:0 0 5px; font-size:17px; }
    .chart-head p { margin:0; color:var(--muted); font-size:12px; }
    .actions { display:flex; gap:8px; }
    .ghost { padding:7px 11px; color:#657286; background:#fff; border:1px solid var(--line); border-radius:7px; cursor:pointer; font-size:12px; }
    .ghost:hover { border-color:#a9b5c8; color:var(--ink); }
    #chart { width:100%; height:420px; margin-top:12px; }
    .table-card { margin-top:16px; overflow:hidden; }
    .table-head { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--line); }
    .table-head strong { font-size:14px; }
    .table-head span { color:var(--muted); font-size:12px; }
    .table-wrap { overflow:auto; max-height:255px; }
    table { width:100%; border-collapse:collapse; font-size:12px; white-space:nowrap; }
    th { color:#647188; background:#fafbfd; font-weight:700; position:sticky; top:0; z-index:1; }
    th, td { padding:11px 18px; text-align:left; border-bottom:1px solid #f0f2f5; }
    td { color:#4f5c6d; }
    .empty { padding:42px 20px; text-align:center; color:var(--muted); font-size:13px; }
    .toast { position:fixed; top:88px; left:50%; z-index:20; display:flex; align-items:center; gap:10px; width:min(560px,calc(100% - 32px)); padding:13px 18px; transform:translate(-50%,-18px); opacity:0; pointer-events:none; border:1px solid #ff9a7d; border-radius:10px; color:#7e2414; background:#fff1ed; box-shadow:0 10px 28px #b93b202e; font-size:14px; font-weight:700; transition:.25s; }
    .toast::before { content:'!'; display:grid; place-items:center; flex:0 0 21px; width:21px; height:21px; border-radius:50%; color:#fff; background:#e34827; font-size:14px; font-weight:900; }
    .toast.success { border-color:#7bd3ad; color:#176b4f; background:#ecfbf4; box-shadow:0 10px 28px #138a682e; }
    .toast.success::before { content:'✓'; background:#138a68; }
    .toast.show { opacity:1; transform:translate(-50%,0); }
    .coffee-dialog { width:min(420px,calc(100% - 32px)); padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; color:var(--ink); box-shadow:0 24px 100px rgba(0,0,0,.28); }
    .coffee-dialog::backdrop { background:rgba(24,34,48,.68); backdrop-filter:blur(3px); }
    .coffee-dialog-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
    .coffee-dialog h2 { margin:4px 0 0; font-size:28px; letter-spacing:-.04em; }
    .coffee-dialog-kicker { margin:0; color:var(--blue); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
    .coffee-dialog-close { display:grid; place-items:center; width:34px; height:34px; padding:0 0 3px; border:1px solid var(--line); border-radius:9px; background:#fafbfd; color:var(--muted); font-size:24px; line-height:1; cursor:pointer; }
    .coffee-dialog-close:hover { color:var(--ink); border-color:#a9b5c8; }
    .coffee-description { margin:18px 0 22px; color:var(--muted); }
    .paypal-button { display:grid; place-items:center; padding:20px; border-radius:12px; background:#fff; color:#000; }
    .paypal-submit { text-align:center; border:0; border-radius:.25rem; min-width:11.625rem; padding:0 2rem; height:2.625rem; font-weight:bold; background:#ffd140; color:#000; font-family:"Helvetica Neue",Arial,sans-serif; font-size:1rem; line-height:1.25rem; cursor:pointer; }
    .paypal-button form > img { max-width:100%; }
    @media (max-width:800px) { header { padding:0 20px; } .header-hint { display:none; } main { width:calc(100% - 32px); margin-top:22px; } .hero { display:block; } .workspace { grid-template-columns:1fr; } #chart { height:340px; } .toast { top:78px; } }
    @media (max-width:560px) { .coffee-trigger { padding:6px 8px; } }