:root {
  --canvas: #f4f6f1;
  --surface: #ffffff;
  --surface-raised: #f7f9f4;
  --surface-hover: #edf1e8;
  --line: #d9dfd3;
  --line-soft: #e8ece4;
  --ink: #20251e;
  --muted: #667062;
  --faint: #899287;
  --accent: #a7d84e;
  --accent-ink: #26380c;
  --danger: #e94d42;
  --warning: #e99018;
  --ok: #35a853;
  --radius: 8px;
}

* { box-sizing: border-box; }
html { height: 100%; background: var(--canvas); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100%; margin: 0; color: var(--ink); background: var(--canvas); font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; font-size: 15px; line-height: 1.5; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-header { display: flex; align-items: center; justify-content: space-between; height: 64px; width: 100%; margin: 0 auto; padding: 0 32px; border-bottom: 1px solid var(--line-soft); }
.brand { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); text-decoration: none; font-size: 18px; font-weight: 800; }
.brand-mark { display: grid; grid-template-columns: repeat(3, 4px); align-items: end; gap: 3px; width: 22px; height: 22px; padding: 4px; border-radius: 6px; background: var(--accent); }
.brand-mark i { display: block; border-radius: 2px; background: #27310b; }.brand-mark i:nth-child(1) { height: 7px; }.brand-mark i:nth-child(2) { height: 12px; }.brand-mark i:nth-child(3) { height: 15px; }
.header-actions { display: flex; align-items: center; gap: 15px; color: var(--faint); font-size: 13px; }.text-button { border: 0; border-radius: 5px; padding: 7px 8px; color: var(--accent); background: transparent; font-size: 14px; font-weight: 750; }.text-button:hover { color: var(--ink); background: var(--surface-hover); }

main { width: 100%; height: calc(100dvh - 64px); margin: 0 auto; padding: 30px 32px; overflow: hidden; }
.app-shell { display: grid; grid-template-columns: 272px minmax(0, 1fr); height: 100%; min-height: 0; align-items: stretch; gap: 18px; }
.workspace { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 20px 52px rgb(0 0 0 / .16); }
.workspace-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding: 24px 26px 20px; border-bottom: 1px solid var(--line); }
.section-kicker { margin: 0 0 4px; color: var(--accent); font-size: 13px; font-weight: 800; }.workspace-heading h1 { margin: 0; font-size: 27px; line-height: 1.2; letter-spacing: 0; }.workspace-note { max-width: 275px; margin: 0; color: var(--muted); font-size: 13px; text-align: right; }

.workspace-body { min-height: 0; flex: 1; }
.rule-sidebar { min-height: 0; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius); background: #191917; box-shadow: 0 16px 42px rgb(0 0 0 / .12); }
.custom-rules-panel { display: flex; flex-direction: column; gap: 17px; padding: 20px 18px 24px; }.custom-rules-panel[hidden], .custom-rules-panel label[hidden] { display: none; }
.custom-rule-heading { display: flex; align-items: center; justify-content: space-between; color: var(--ink); font-size: 16px; font-weight: 800; }.rule-save-state { color: var(--faint); font-size: 11px; font-weight: 500; white-space: nowrap; }.rule-save-state.has-error { color: var(--warning); }.rule-intro { margin: -9px 0 1px; color: var(--faint); font-size: 12px; line-height: 1.55; }
.rule-section { display: grid; gap: 12px; padding-top: 15px; border-top: 1px solid var(--line-soft); }.rule-section-title { margin: 0 0 1px; color: #d4d3c9; font-size: 12px; font-weight: 800; }
.custom-rules-panel label { position: relative; display: grid; gap: 6px; color: var(--muted); font-size: 13px; font-weight: 650; }.custom-rules-panel input:not([type="checkbox"]), .custom-rules-panel select { width: 100%; height: 38px; border: 1px solid #4a4a42; border-radius: 6px; padding: 7px 10px; color: var(--ink); background: #22221f; outline-color: var(--accent); font-size: 14px; }.custom-rules-panel input:not([type="checkbox"]):hover, .custom-rules-panel select:hover { border-color: #64635a; background: var(--surface-raised); }.custom-rules-panel label > span { position: absolute; right: 10px; bottom: 9px; color: var(--faint); font-size: 12px; pointer-events: none; }.custom-rules-panel label:has(> span) input:not([type="checkbox"]) { padding-right: 32px; }.format-rule input { font-family: Consolas, "Microsoft YaHei UI", monospace; font-size: 12px; }
.toggle-rule { display: flex !important; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 9px !important; padding-top: 2px; color: var(--ink) !important; line-height: 1.35; cursor: pointer; }.toggle-rule input { position: absolute; opacity: 0; }.toggle-control { position: static !important; display: block; width: 32px; height: 18px; border-radius: 20px; background: #4a4a42; transition: background .16s ease; }.toggle-control::after { content: ""; display: block; width: 12px; height: 12px; margin: 3px; border-radius: 50%; background: #d4d3c9; transition: transform .16s ease; }.toggle-rule input:checked + .toggle-control { background: #7fa038; }.toggle-rule input:checked + .toggle-control::after { transform: translateX(14px); background: #eff8ca; }.toggle-copy { position: static !important; display: grid; gap: 1px; color: inherit; pointer-events: auto; }.toggle-copy strong { font-size: 13px; font-weight: 750; }.toggle-copy small { color: var(--faint); font-size: 11px; font-weight: 500; }

.workspace { display: flex; min-height: 0; flex-direction: column; }.checker-grid { display: grid; grid-template-columns: minmax(320px, .93fr) minmax(0, 1.07fr); min-height: 0; height: 100%; }
.import-panel { display: flex; padding: 22px; border-right: 1px solid var(--line); }.dropzone { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; min-height: 410px; padding: 30px; border: 1px solid #4a4a42; border-radius: 7px; color: var(--ink); background: #20201d; text-align: center; outline: none; transition: border-color .16s ease, background .16s ease; }.dropzone:hover, .dropzone:focus-visible { border-color: var(--accent); background: #25271d; }.drop-graphic { position: relative; width: 66px; height: 52px; overflow: hidden; border-radius: 7px; background: #5b6c34; }.drop-graphic::before { content: ""; position: absolute; z-index: 1; top: 9px; right: 11px; width: 14px; height: 14px; border-radius: 50%; background: #e5efb0; }.drop-graphic span { position: absolute; bottom: -12px; width: 55px; height: 49px; background: var(--accent); transform: rotate(45deg); }.drop-graphic span:nth-child(1) { left: -29px; }.drop-graphic span:nth-child(2) { right: -35px; background: #86b95f; }.drop-graphic span:nth-child(3) { display: none; }.dropzone h3 { margin: 18px 0 16px; font-size: 20px; }.drop-actions { display: flex; gap: 8px; }
.primary-button, .secondary-button { border: 0; border-radius: 6px; padding: 10px 14px; font-weight: 800; transition: transform .12s ease, background .12s ease; }.primary-button:active, .secondary-button:active { transform: translateY(1px); }.primary-button { color: var(--accent-ink); background: var(--accent); }.primary-button:hover { background: #d8f78a; }.secondary-button { color: var(--ink); background: #393935; }.secondary-button:hover { background: #4a4a43; }

.result-panel { display: flex; flex-direction: column; min-width: 0; padding: 24px 26px 20px; background: #1e1e1b; }.result-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft); }.result-label { color: var(--ink); font-size: 18px; font-weight: 800; }.result-count { color: var(--muted); font-size: 13px; white-space: nowrap; }.empty-result { display: flex; flex: 1; align-items: center; min-height: 260px; }.empty-result[hidden], .pending-config[hidden], .result-list[hidden] { display: none; }.empty-lines { display: grid; width: min(85%, 420px); gap: 11px; }.empty-lines i { display: block; height: 9px; border-radius: 9px; background: #33332e; }.empty-lines i:nth-child(2) { width: 70%; }.empty-lines i:nth-child(3) { width: 83%; }.pending-config { display: flex; flex: 1; flex-direction: column; align-items: flex-start; justify-content: center; max-width: 320px; padding: 16px 0; }.pending-config-title { margin: 0 0 6px; color: #bd382f; font-size: 18px; font-weight: 800; }.pending-config p:not(.pending-config-title) { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }.pending-config .secondary-button { margin-top: 17px; }
.result-list { flex: 1; min-height: 0; max-height: none; margin-top: 0; overflow-y: auto; padding-right: 4px; }.result-group + .result-group { margin-top: 22px; }.group-title { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 13px; font-weight: 750; }.group-dot { width: 8px; height: 8px; border-radius: 50%; }.group-dot.required { background: var(--danger); }.group-dot.advice { background: var(--warning); }.group-dot.pass { background: var(--ok); }.result-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 11px 0; }.result-item + .result-item { border-top: 1px solid var(--line-soft); }.result-file { min-width: 0; overflow: hidden; color: var(--ink); font-size: 15px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }.result-path { min-width: 0; margin-top: 4px; overflow: hidden; color: #8e9d78; font-family: Consolas, "Microsoft YaHei UI", monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.result-detail { margin-top: 4px; color: var(--muted); font-size: 13px; }.result-actions { display: flex; align-items: center; gap: 7px; }.copy-button { border: 1px solid #4a4a42; border-radius: 5px; padding: 3px 7px; color: var(--muted); background: transparent; font-size: 12px; font-weight: 700; white-space: nowrap; }.copy-button:hover { color: var(--ink); border-color: #77766d; }

.workspace.has-results .workspace-body, .workspace.has-results .checker-grid { min-height: 470px; }.workspace.has-results .dropzone { min-height: 360px; }.workspace.has-results .dropzone h3 { margin: 18px 0 16px; font-size: 17px; }

.modal { width: min(560px, calc(100% - 32px)); border: 1px solid #55554d; border-radius: 8px; padding: 0; color: var(--ink); background: #22221f; box-shadow: 0 24px 80px rgb(0 0 0 / .55); }.modal::backdrop { background: rgb(0 0 0 / .66); }.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 23px 24px 0; }.modal-header h2 { margin: 0; font-size: 22px; }.icon-button { display: grid; width: 32px; height: 32px; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: #393935; font-size: 22px; line-height: 1; }.icon-button:hover { color: var(--ink); background: #4a4a43; }.modal-lead { margin: 11px 24px 18px; color: var(--muted); }.feedback-modal form { padding: 0 24px 24px; }.feedback-modal label { display: grid; gap: 7px; margin-top: 14px; font-size: 14px; font-weight: 700; }.feedback-modal select, .feedback-modal textarea { width: 100%; border: 1px solid #55554d; border-radius: 6px; padding: 10px; color: var(--ink); background: #191917; outline-color: var(--accent); resize: vertical; }.feedback-status { margin: 14px 0 -6px; color: #24783a; font-size: 13px; font-weight: 700; }.feedback-status.is-error { color: #bd382f; }.primary-button:disabled { cursor: not-allowed; opacity: .52; }.modal-actions { display: flex; justify-content: end; gap: 8px; margin-top: 22px; }

@media (max-width: 1040px) { .app-shell { grid-template-columns: 236px minmax(0, 1fr); gap: 14px; }.custom-rules-panel { padding: 18px 14px 22px; }.checker-grid { grid-template-columns: 1fr; }.import-panel { min-height: 305px; border-right: 0; border-bottom: 1px solid var(--line); }.dropzone { min-height: 260px; } }
@media (max-width: 760px) { html, body { height: auto; } .site-header { padding: 0 18px; }.header-actions { gap: 7px; }.header-actions > span { display: none; } main { height: auto; padding: 0; overflow: visible; }.app-shell { display: flex; height: auto; flex-direction: column; gap: 0; }.rule-sidebar { width: 100%; max-height: none; overflow: visible; border-right: 0; border-left: 0; border-radius: 0; box-shadow: none; }.custom-rules-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 19px 20px 22px; }.custom-rule-heading, .rule-intro, .rule-section { grid-column: 1 / -1; }.rule-section { grid-template-columns: 1fr 1fr; gap: 12px; }.rule-section-title, .format-rule, .toggle-rule { grid-column: 1 / -1; }.workspace { border-right: 0; border-bottom: 0; border-left: 0; border-radius: 0; box-shadow: none; }.workspace-heading { align-items: start; flex-direction: column; gap: 6px; padding: 20px; }.workspace-heading h1 { font-size: 24px; }.workspace-note { max-width: none; text-align: left; }.checker-grid { grid-template-columns: 1fr; height: auto; }.import-panel { padding: 20px; }.dropzone { min-height: 280px; }.result-panel { min-height: 385px; padding: 22px 20px; }.result-footer { align-items: start; flex-direction: column; gap: 4px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Light workspace surfaces retain the existing compact tool layout. */
.brand-mark i { background: #2d3d13; }
.workspace { box-shadow: 0 16px 38px rgb(31 48 24 / .08); }
.rule-sidebar { background: #fbfcf9; box-shadow: 0 12px 28px rgb(31 48 24 / .06); }
.rule-section-title { color: #3f493c; }
.custom-rules-panel input:not([type="checkbox"]), .custom-rules-panel select { border-color: #cbd3c5; background: #fff; }
.custom-rules-panel input:not([type="checkbox"]):hover, .custom-rules-panel select:hover { border-color: #9baa93; background: var(--surface-raised); }
.toggle-control { background: #c5ccc0; }
.toggle-control::after { background: #fff; box-shadow: 0 1px 2px rgb(31 48 24 / .2); }
.toggle-rule input:checked + .toggle-control { background: #81b52b; }
.toggle-rule input:checked + .toggle-control::after { background: #fff; }
.import-panel { border-color: var(--line); }
.dropzone { border-color: #d1d9cb; background: #fbfcf9; }
.dropzone:hover, .dropzone:focus-visible { border-color: #95bf4c; background: #f3f8e9; }
.drop-graphic { background: #769a36; }
.drop-graphic::before { background: #eff8c8; }
.secondary-button { color: #354033; background: #edf0ea; }
.secondary-button:hover { background: #e0e6dc; }
.primary-button:hover { background: #b8e764; }
.result-panel { background: #fff; }
.empty-lines i { background: #e5e9e1; }
.result-path { color: #66864c; }
.copy-button { border-color: #cbd3c5; }
.copy-button:hover { border-color: #99a791; }
.modal { border-color: #d1d8cc; background: #fff; box-shadow: 0 24px 80px rgb(31 48 24 / .22); }
.modal::backdrop { background: rgb(30 38 28 / .34); }
.icon-button { background: #edf0ea; }
.icon-button:hover { background: #e0e6dc; }
.feedback-modal select, .feedback-modal textarea { border-color: #cbd3c5; background: #fff; }
.feedback-validation { margin-top: -2px; color: #bd382f; font-size: 12px; font-weight: 600; }
.primary-button:disabled { cursor: not-allowed; opacity: .52; pointer-events: none; }
.primary-button:disabled:active { transform: none; }
.feedback-success-modal { width: min(370px, calc(100% - 32px)); }.feedback-success-modal .modal-header { padding: 20px 22px 0; }.feedback-success-modal .modal-header h2 { font-size: 19px; }.feedback-success-body { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 22px 8px; }.success-mark { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #e4f5e8; }.success-mark::after { width: 13px; height: 7px; border-bottom: 2px solid #24783a; border-left: 2px solid #24783a; content: ""; transform: rotate(-45deg) translate(1px, -1px); }.feedback-success-body p { margin: 4px 0 0; color: var(--muted); font-size: 14px; line-height: 1.65; }.feedback-success-actions { display: flex; justify-content: end; padding: 14px 22px 22px; }
.result-tabs { display: flex; gap: 4px; margin: 18px 0 10px; overflow-x: auto; border-bottom: 1px solid var(--line-soft); }.result-tab { flex: 0 0 auto; border: 0; border-bottom: 2px solid transparent; padding: 8px 10px 9px; color: var(--muted); background: transparent; font-size: 13px; font-weight: 750; white-space: nowrap; }.result-tab span { display: inline-grid; min-width: 18px; height: 18px; place-items: center; margin-left: 3px; border-radius: 9px; padding: 0 5px; color: inherit; background: #edf0ea; font-size: 11px; }.result-tab:hover { color: var(--ink); background: #f7f9f4; }.result-tab.is-active { color: #bb382f; border-bottom-color: var(--danger); }.result-tab.is-active span { color: #bb382f; background: #fde7e4; }.result-tab.pass.is-active { color: #24783a; border-bottom-color: var(--ok); }.result-tab.pass.is-active span { color: #24783a; background: #e4f5e8; }.result-tab.required.is-active { color: #bb382f; border-bottom-color: var(--danger); }.result-tab-panel[hidden] { display: none; }
.group-title.advice-title { color: #c54338; }
.group-dot.advice { background: var(--danger); }
.result-detail.advice, .result-detail.required { color: #c54338; font-weight: 700; }
.detail-button { border: 0; border-radius: 5px; padding: 3px 7px; color: #8a5800; background: #fff1d8; font-size: 12px; font-weight: 750; white-space: nowrap; }.detail-button:hover { color: #684200; background: #ffe5b5; }
.issue-detail-modal { width: min(520px, calc(100% - 32px)); }.issue-detail-modal .modal-header { padding: 20px 22px 14px; border-bottom: 1px solid var(--line-soft); }.issue-detail-heading { display: flex; align-items: center; gap: 9px; }.issue-detail-modal .modal-header h2 { font-size: 20px; }.issue-detail-count { border-radius: 4px; padding: 3px 6px; color: #bd382f; background: #fde7e4; font-size: 12px; font-weight: 750; }.issue-detail-count.required { color: #bd382f; background: #fde7e4; }.issue-detail-modal .icon-button { width: 30px; height: 30px; font-size: 20px; }.issue-detail-body { padding: 14px 22px 18px; }.issue-detail-path { display: flex; align-items: center; gap: 8px; min-width: 0; }.issue-detail-file { min-width: 0; flex: 1; margin: 0; overflow: hidden; border: 1px solid var(--line-soft); border-radius: 5px; padding: 8px 9px; color: #527239; background: #f7faf3; font-family: Consolas, "Microsoft YaHei UI", monospace; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }.issue-detail-path .copy-button { flex: 0 0 auto; }.issue-detail-list { max-height: min(360px, 46dvh); margin-top: 10px; overflow-y: auto; }.issue-detail-row { padding: 13px 0 13px 12px; border-bottom: 1px solid var(--line-soft); border-left: 2px solid #f2b4ae; }.issue-detail-row-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.issue-detail-rule { color: var(--ink); font-size: 14px; font-weight: 800; }.issue-detail-status { color: #bd382f; font-size: 12px; font-weight: 750; white-space: nowrap; }.issue-detail-values { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 7px; color: var(--muted); font-size: 13px; }.issue-detail-values span { display: grid; gap: 2px; }.issue-detail-values span:first-child b { color: var(--ink); font-weight: 750; }.issue-detail-values span:last-child b { color: #bd382f; font-weight: 750; }.issue-detail-row.required .issue-detail-status, .issue-detail-row.required .issue-detail-values span:last-child b { color: #bd382f; }
.issue-detail-modal { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 48px); }.issue-detail-body { padding: 18px 24px 22px; }.issue-detail-list { max-height: min(520px, 62dvh); }
.empty-result { align-items: center; justify-content: center; text-align: center; }
.empty-result-content { display: grid; justify-items: center; gap: 0; padding: 20px; }
.empty-result-icon { position: relative; width: 44px; height: 38px; margin-bottom: 16px; border: 1px solid #c9d7bc; border-radius: 7px; background: #f6f9f1; }
.empty-result-icon::before { position: absolute; top: 10px; left: 10px; width: 13px; height: 2px; background: #9ab47b; box-shadow: 0 6px 0 #9ab47b; content: ""; }
.empty-result-icon::after { position: absolute; right: 10px; bottom: 10px; width: 9px; height: 5px; border-right: 2px solid #5d9238; border-bottom: 2px solid #5d9238; content: ""; transform: rotate(45deg); }
.empty-result-title { margin: 0; color: var(--ink); font-size: 16px; font-weight: 800; }
.empty-result-copy { margin: 7px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }
.copy-button { display: inline-flex; min-width: 66px; align-items: center; justify-content: center; }
.copy-button.is-copied { border-color: #a7cda8; color: #24783a; background: #f2faf1; }
.copy-button.is-copied::before { width: 8px; height: 4px; margin-right: 5px; border-bottom: 2px solid currentcolor; border-left: 2px solid currentcolor; content: ""; transform: rotate(-45deg) translate(1px, -1px); }
.custom-rules-panel [aria-invalid="true"] { border-color: #df5449 !important; background: #fff7f6 !important; }.custom-rules-panel [aria-invalid="true"]:focus-visible { outline-color: #df5449; }.custom-rules-panel .field-validation { margin-top: -2px; color: #bd382f; font-size: 12px; font-weight: 500; line-height: 1.4; }
.custom-rules-panel .field-help { margin-top: -2px; color: var(--faint); font-size: 11px; font-weight: 500; line-height: 1.45; }
.custom-rules-panel .input-with-suffix { position: relative; right: auto; bottom: auto; display: block; width: 100%; color: inherit; font-size: inherit; pointer-events: auto; }.custom-rules-panel .input-with-suffix .input-suffix { position: absolute; top: 50%; right: 10px; bottom: auto; display: block; color: var(--faint); font-size: 12px; pointer-events: none; transform: translateY(-50%); }.custom-rules-panel label:has(.input-suffix) input:not([type="checkbox"]) { padding-right: 32px; }.custom-rules-panel .unit-input { position: static; display: grid; grid-template-columns: minmax(0, 1fr) 66px; gap: 0; width: 100%; overflow: hidden; border: 1px solid #cbd3c5; border-radius: 6px; background: #fff; pointer-events: auto; transition: border-color .16s ease, outline-color .16s ease; }.custom-rules-panel .unit-input:hover { border-color: #9baa93; }.custom-rules-panel .unit-input:focus-within { border-color: #cbd3c5; outline: 2px solid var(--accent); outline-offset: 2px; }.custom-rules-panel label:has(> .unit-input) input:not([type="checkbox"]), .custom-rules-panel .unit-input select { min-width: 0; border: 0 !important; border-radius: 0; outline: 0 !important; background: transparent !important; }.custom-rules-panel label:has(> .unit-input) input:not([type="checkbox"]) { padding-right: 10px; }.custom-rules-panel .unit-input select { border-left: 1px solid #dfe5da !important; padding: 7px 5px; font-size: 12px; }.custom-rules-panel .unit-input:has([aria-invalid="true"]) { border-color: #df5449; background: #fff7f6; box-shadow: none; }.format-rule small { color: var(--faint); font-size: 11px; font-weight: 500; line-height: 1.45; }
.dropzone.is-dragging { border-color: #7faa32; background: #eef7df; box-shadow: inset 0 0 0 2px rgb(167 216 78 / .22); }
.dropzone.is-dragging .drop-graphic { transform: translateY(-4px); }
.drop-hint { margin: -8px 0 16px; color: var(--muted); font-size: 13px; }