:root { color-scheme: light; font-family: Inter,"SF Pro Text","PingFang SC","Microsoft YaHei",system-ui,sans-serif; color:#17201d; background:#f4f6f5; font-synthesis:none; }
* { box-sizing:border-box; }
html { min-height:100%; background:#f4f6f5; }
body { margin:0; min-width:320px; min-height:100vh; background:#f4f6f5; letter-spacing:0; }
button,input,textarea,select { font:inherit; letter-spacing:0; }
button,a { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
.app-shell { width:min(100%,760px); min-height:100vh; margin:0 auto; padding-bottom:94px; }
.app-header { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:11px; min-height:66px; padding:12px 16px; padding-top:max(12px,env(safe-area-inset-top)); border-bottom:1px solid #e0e5e2; background:rgba(250,251,250,.96); backdrop-filter:blur(16px); }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; flex:0 0 38px; border-radius:11px; color:#fff; background:#173f33; font-weight:760; }
.brand-copy { min-width:0; flex:1; }
h1,h2,h3,h4,p { margin:0; }
.brand-copy h1 { font-size:16px; line-height:1.3; }
.brand-copy p { margin-top:2px; color:#7a837f; font-size:11px; }
.icon-button { display:grid; place-items:center; width:36px; height:36px; border:1px solid #d7dfdb; border-radius:10px; color:#285448; background:#fff; font-size:17px; font-weight:700; }
.hidden { display:none!important; }
.status { display:none; position:sticky; top:66px; z-index:18; margin:10px 14px 0; padding:10px 12px; border:1px solid #c8ddd4; border-radius:11px; color:#245949; background:#edf5f1; font-size:12px; line-height:1.5; }
.status.visible { display:block; }
.status.error { color:#9e3f37; border-color:#ebc8c4; background:#fff2f0; }
.view { display:none; padding:16px 14px 24px; }
.view.active { display:block; }
.input-card,.content-card,.script-card { padding:16px; border:1px solid #dfe5e1; border-radius:16px; background:#fff; box-shadow:0 5px 18px rgba(25,46,38,.04); }
.input-card { display:grid; gap:14px; }
.screenshot-import { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:14px; border:1px solid #cbdad3; border-radius:13px; background:#f6faf8; }
.screenshot-copy { min-width:0; }
.screenshot-copy strong,.screenshot-copy span { display:block; }
.screenshot-copy strong { color:#244a3e; font-size:13px; }
.screenshot-copy span { margin-top:4px; color:#718079; font-size:10px; line-height:1.5; }
.screenshot-import .secondary-button { min-height:38px; padding:0 12px; color:#fff; border-color:#315f50; background:#315f50; white-space:nowrap; }
.ocr-progress { grid-column:1/-1; height:5px; overflow:hidden; border-radius:999px; background:#dce7e2; }
.ocr-progress span { display:block; width:0; height:100%; border-radius:inherit; background:#477b69; transition:width .2s ease; }
.screenshot-preview { grid-column:1/-1; display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
.screenshot-preview img { width:54px; height:72px; flex:0 0 54px; border:1px solid #d6dfda; border-radius:8px; object-fit:cover; background:#fff; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.section-heading > div { min-width:0; }
.section-heading span,.view-header > span { display:block; margin-bottom:3px; color:#7d8581; font-size:10px; font-weight:700; }
.section-heading h2,.view-header h2 { font-size:20px; line-height:1.35; }
.section-heading h3,.content-card h3,.script-card h3 { font-size:13px; line-height:1.4; }
.text-button { padding:5px; border:0; color:#547067; background:transparent; font-size:11px; }
.danger { color:#a3423a!important; }
.form-grid { display:grid; gap:10px; }
.form-grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
label { display:grid; gap:6px; min-width:0; }
label > span { color:#6f7974; font-size:11px; font-weight:620; }
input,textarea,select { width:100%; border:1px solid #d5ddd9; border-radius:10px; color:#26312d; background:#fbfcfb; outline:none; font-size:13px; }
input,select { height:42px; padding:0 11px; }
textarea { resize:vertical; min-height:76px; padding:11px; line-height:1.6; }
input:focus,textarea:focus,select:focus { border-color:#76a08f; box-shadow:0 0 0 3px rgba(60,112,93,.1); }
.primary-button,.secondary-button { min-height:44px; padding:0 15px; border-radius:11px; font-weight:700; font-size:13px; }
.primary-button { border:1px solid #173f33; color:#fff; background:#173f33; }
.primary-button:disabled { cursor:wait; opacity:.55; }
.secondary-button { border:1px solid #d2dbd6; color:#2b3934; background:#fff; }
.full-width { width:100%; }
.empty-state { margin-top:14px; padding:48px 28px; text-align:center; border:1px dashed #ced8d3; border-radius:18px; background:#fafbfa; }
.empty-state.compact { margin-top:0; padding:42px 24px; }
.empty-state > strong { display:grid; place-items:center; width:62px; height:62px; margin:0 auto 14px; border:7px solid #dfe9e4; border-radius:50%; color:#356c5b; font-size:15px; }
.empty-state h3 { font-size:14px; }
.empty-state p { margin:8px auto 0; color:#7b8580; font-size:11px; line-height:1.65; }
.result-stack { display:grid; gap:12px; margin-top:14px; }
.score-hero { display:flex; align-items:center; gap:18px; padding:20px; border-radius:18px; color:#eff7f3; background:#173f33; }
.score-ring { display:grid; place-content:center; width:102px; height:102px; flex:0 0 102px; border:7px solid #5c8276; border-radius:50%; text-align:center; }
.score-ring strong { font-size:31px; line-height:1; }
.score-ring span { margin-top:4px; color:#b9cec7; font-size:10px; }
.score-hero h2 { margin-top:9px; font-size:16px; }
.score-hero p { margin-top:5px; color:#c4d4ce; font-size:11px; line-height:1.55; }
.decision-badge { display:inline-flex; align-items:center; min-height:25px; padding:0 9px; border-radius:999px; color:#244b3f; background:#d7eee4; font-size:10px; font-weight:780; }
.decision-badge.caution { color:#785319; background:#f8e7bc; }
.decision-badge.reject { color:#8e332c; background:#f8d9d5; }
.soft-badge,.risk-count { padding:4px 7px; border-radius:999px; color:#65706b; background:#eef2f0; font-size:10px; font-weight:680; }
.risk-count { color:#93433c; background:#fbe8e5; }
.score-list { display:grid; margin-top:10px; }
.score-list div { display:flex; align-items:center; justify-content:space-between; min-height:34px; border-top:1px solid #edf0ee; }
.score-list span { color:#6d7772; font-size:11px; }
.score-list strong { color:#294f43; font-size:11px; }
.tag-row { display:flex; flex-wrap:wrap; gap:6px; margin-top:11px; }
.risk-tag { padding:5px 8px; border-radius:999px; color:#8b3d36; background:#fcecea; font-size:10px; font-weight:650; }
.detail-list { display:grid; gap:8px; margin:11px 0 0; padding:0; list-style:none; }
.detail-list li { position:relative; padding-left:14px; color:#58635e; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
.detail-list li::before { content:""; position:absolute; top:7px; left:0; width:5px; height:5px; border-radius:50%; background:#cc756b; }
.detail-list.positive li::before { background:#4e907b; }
.content-card h4 { margin-top:14px; color:#53605a; font-size:11px; }
.insight-list { display:grid; margin:10px 0 0; }
.insight-list div { display:grid; grid-template-columns:90px 1fr; gap:10px; padding:10px 0; border-top:1px solid #edf0ee; }
.insight-list dt { color:#7d8581; font-size:10px; }
.insight-list dd { margin:0; color:#424c47; font-size:11px; line-height:1.55; }
.final-note { padding:11px; border-radius:10px; color:#355246; background:#eef4f1; font-size:11px; line-height:1.6; }
.enterprise-card { border-color:#c9d9d2; }
.verification-note { margin-top:12px; padding:11px; border-radius:10px; color:#596660; background:#f1f4f2; font-size:10px; line-height:1.6; }
.search-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.search-grid { margin-top:12px; }
.search-grid a { display:grid; place-items:center; min-height:38px; border:1px solid #d8e0dc; border-radius:10px; color:#31594d; background:#f9faf9; font-size:11px; font-weight:680; text-decoration:none; }
.action-row { display:flex; gap:9px; }
.action-row > * { flex:1; }
.view-header { margin-bottom:14px; }
.script-card p { margin-top:11px; color:#4e5954; font-size:12px; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.script-card.featured { border-color:#b8d0c6; background:#f9fcfa; }
.script-card button { min-height:31px; padding:0 10px; border:1px solid #cddbd5; border-radius:9px; color:#295c4c; background:#fff; font-size:10px; font-weight:700; }
.form-card { display:grid; gap:12px; }
.advanced-settings { padding:0; overflow:hidden; }
.advanced-settings summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; color:#35433d; cursor:pointer; list-style:none; }
.advanced-settings summary::-webkit-details-marker { display:none; }
.advanced-settings summary::after { content:"＋"; color:#527066; font-size:15px; }
.advanced-settings[open] summary::after { content:"−"; }
.advanced-settings summary span { font-size:12px; font-weight:720; }
.advanced-settings summary small { margin-left:auto; color:#7d8782; font-size:9px; }
.advanced-content { display:grid; gap:12px; padding:0 16px 16px; border-top:1px solid #edf0ee; padding-top:14px; }
.text-action { min-height:32px; padding:0 10px; border:1px solid #cbdad3; border-radius:9px; color:#285448; background:#f7faf8; font-size:10px; font-weight:700; }
.field-help { color:#7a8580; font-size:10px; line-height:1.55; }
.toggle-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.toggle-grid label { display:flex; align-items:center; gap:8px; min-height:38px; padding:8px 10px; border:1px solid #e0e6e3; border-radius:10px; background:#fafbfa; }
.toggle-grid input { width:17px; height:17px; flex:0 0 17px; accent-color:#285c4b; }
.toggle-grid span { color:#4f5c56; font-size:10px; }
.record-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; color:#727c77; font-size:11px; }
.record-list { display:grid; gap:10px; }
.record-card { padding:14px; border:1px solid #dfe5e1; border-radius:14px; background:#fff; }
.record-card header { display:flex; justify-content:space-between; gap:10px; }
.record-card h3 { font-size:13px; overflow-wrap:anywhere; }
.record-card header strong { color:#245949; font-size:13px; white-space:nowrap; }
.record-card p { margin-top:6px; color:#77817c; font-size:10px; line-height:1.5; }
.record-card footer { display:flex; gap:8px; margin-top:10px; }
.record-card footer select { height:34px; flex:1; }
.record-card footer button { min-width:62px; min-height:34px; border:1px solid #e2d2cf; border-radius:9px; color:#a3423a; background:#fff; font-size:10px; }
.bottom-nav { position:fixed; right:0; bottom:0; left:0; z-index:30; display:grid; grid-template-columns:repeat(4,1fr); width:min(100%,760px); min-height:68px; margin:0 auto; padding:7px 10px; padding-bottom:max(7px,env(safe-area-inset-bottom)); border-top:1px solid #dfe5e1; background:rgba(250,251,250,.97); backdrop-filter:blur(18px); }
.bottom-nav button { border:0; border-radius:11px; color:#7b8480; background:transparent; }
.bottom-nav button.active { color:#173f33; background:#e7efeb; }
.bottom-nav span,.bottom-nav small { display:block; }
.bottom-nav span { font-size:12px; font-weight:720; }
.bottom-nav small { margin-top:2px; font-size:9px; }
@media (min-width:680px) { .view { padding:20px; } .result-stack.wide,.view[data-view="analysis"] .result-stack { grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; } .score-hero,.action-row { grid-column:1/-1; } }
@media (max-width:380px) { .form-grid.two { grid-template-columns:1fr; } .score-ring { width:88px; height:88px; flex-basis:88px; } .screenshot-import { grid-template-columns:1fr; } .screenshot-import .secondary-button { width:100%; } }