popup.css

:root {
  color-scheme: light dark;
  --surface: #f8fafc;
  --surface-raised: #eef2f7;
  --surface-strong: #e2e8f0;
  --text: #172033;
  --text-muted: #526077;
  --border: #cbd5e1;
  --accent: #2457c5;
  --accent-hover: #1f49a5;
  --accent-text: #f8fafc;
  --success: #16794a;
  --danger: #b42318;
  --focus: #4f7ee8;
  font-family: "Segoe UI Variable", "Segoe UI", "Microsoft YaHei UI", sans-serif;
}

* { box-sizing: border-box; }
body { width: 390px; max-height: 600px; margin: 0; overflow-y: auto; color: var(--text); background: var(--surface); }
button, input, summary { font: inherit; }
button, summary, .file-picker { -webkit-tap-highlight-color: transparent; }
.app-shell { padding: 18px; }
.app-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.brand-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; color: var(--accent-text); background: var(--accent); font-size: 13px; font-weight: 750; letter-spacing: .04em; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: 20px; line-height: 1.2; letter-spacing: -.02em; }
.app-header p { margin-top: 4px; color: var(--text-muted); font-size: 12px; }
.import-section { padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-raised); }
.section-heading, .preview-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
.privacy-note, .preview-heading span { color: var(--text-muted); font-size: 11px; }
.file-picker { display: block; margin-top: 14px; padding: 14px; border: 1px dashed var(--border); border-radius: 12px; cursor: pointer; background: var(--surface); transition: border-color 150ms ease, transform 150ms ease; }
.file-picker:hover { border-color: var(--accent); }
.file-picker:active { transform: translateY(1px); }
.file-picker-title, .file-picker-help { display: block; }
.file-picker-title { color: var(--accent); font-size: 13px; font-weight: 700; }
.file-picker-help { margin-top: 4px; color: var(--text-muted); font-size: 11px; line-height: 1.45; }
#csvFile { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.file-picker:has(+ #csvFile:focus-visible) { outline: 3px solid color-mix(in srgb, var(--focus) 40%, transparent); outline-offset: 2px; }
.file-meta { margin-top: 10px; color: var(--text-muted); font-size: 11px; overflow-wrap: anywhere; }
.status { margin-top: 12px; padding: 10px 12px; border-radius: 12px; color: var(--text-muted); background: var(--surface-strong); font-size: 12px; line-height: 1.45; }
.status[data-tone="success"] { color: var(--success); }
.status[data-tone="error"] { color: var(--danger); }
.status[data-tone="working"] { color: var(--accent); }
.issues { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--danger); border-radius: 0 10px 10px 0; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); font-size: 11px; line-height: 1.5; }
.issues p + p { margin-top: 5px; }
.preview { margin-top: 14px; }
.table-wrap { margin-top: 8px; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 10px; }
th, td { padding: 8px; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
th { color: var(--text-muted); background: var(--surface-strong); font-weight: 650; }
tbody tr + tr { border-top: 1px solid var(--border); }
.primary-button { width: 100%; margin-top: 14px; padding: 11px 16px; border: 0; border-radius: 12px; color: var(--accent-text); background: var(--accent); cursor: pointer; font-weight: 750; transition: background 150ms ease, transform 150ms ease; }
.primary-button:hover:not(:disabled) { background: var(--accent-hover); }
.primary-button:active:not(:disabled) { transform: translateY(1px); }
.primary-button:disabled { cursor: not-allowed; opacity: .5; }
.primary-button:focus-visible, .feedback-link:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 45%, transparent); outline-offset: 2px; }
.submit-note { margin-top: 8px; color: var(--text-muted); font-size: 10px; line-height: 1.45; text-align: center; }
.feedback-note { margin-top: 10px; font-size: 10px; text-align: center; }
.feedback-link { color: var(--accent); text-decoration: none; }
.feedback-link:hover { text-decoration: underline; }

@media (prefers-color-scheme: dark) {
  :root { --surface: #101725; --surface-raised: #172033; --surface-strong: #222d42; --text: #edf2f8; --text-muted: #b3bfd1; --border: #3a4760; --accent: #6f96ef; --accent-hover: #86a8f2; --accent-text: #101725; --success: #66d59b; --danger: #ff8f86; --focus: #8aacf5; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}