:root { --ink:#19322d; --muted:#60736d; --paper:#f7f5ef; --card:#fffdf8; --line:#dfe7e1; --accent:#087a63; --accent-dark:#05604d; --danger:#a23c35; --shadow:0 16px 45px rgba(20,57,48,.09); font-family: Inter, "Microsoft YaHei", system-ui, sans-serif; color:var(--ink); background:var(--paper); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button, input, textarea { font:inherit; }
button { border:0; border-radius:10px; padding:11px 17px; color:white; background:var(--accent); cursor:pointer; font-weight:700; }
button:hover { background:var(--accent-dark); }
button:disabled { opacity:.55; cursor:not-allowed; }
.shell { width:min(1020px, calc(100% - 32px)); margin:0 auto; padding:56px 0 72px; }
.hero, .section-heading, .search-row, .dialog-heading, .dialog-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.hero { margin-bottom:28px; }
.eyebrow { margin:0 0 8px; color:var(--accent); font-size:.75rem; font-weight:800; letter-spacing:.13em; }
h1 { margin:0; font-size:clamp(2rem, 5vw, 3.4rem); letter-spacing:-.045em; }
h2 { margin:0; font-size:1.25rem; }
.lede, .section-heading p, .hint { color:var(--muted); line-height:1.6; }
.lede { margin:9px 0 0; }
.card, .result { background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:24px; margin-top:18px; }
.search-card label, #settingsForm > label { display:block; font-weight:750; margin-bottom:9px; }
.search-row input { flex:1; }
input, textarea { width:100%; border:1px solid #bed0c7; border-radius:10px; padding:12px; color:var(--ink); background:white; }
input:focus, textarea:focus { outline:3px solid rgba(8,122,99,.18); border-color:var(--accent); }
.hint { font-size:.88rem; margin:10px 0 0; }
.notice { padding:13px 16px; background:#e6f3ee; color:#075a48; border-radius:10px; margin-top:18px; }
.notice.error { background:#fbecea; color:#8d2822; }
.hidden { display:none; }
.result-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:14px; margin-top:18px; }
.field { border-left:3px solid #b9d9cf; padding:4px 0 4px 11px; overflow-wrap:anywhere; }
.field dt { color:var(--muted); font-size:.78rem; font-weight:700; }
.field dd { margin:4px 0 0; line-height:1.45; }
.description { margin-top:18px; line-height:1.7; }
.translate-box { background:#f0f7f4; padding:16px; border-radius:12px; margin-top:18px; }
.batch-card textarea { margin:12px 0; resize:vertical; }
.danger { background:transparent; color:var(--danger); border:1px solid #e7bbb6; }
.danger:hover { color:white; background:var(--danger); }
.secondary { background:transparent; color:var(--accent); border:1px solid #9bcabc; }
.secondary:hover { color:white; background:var(--accent); }
dialog { width:min(580px, calc(100% - 30px)); color:var(--ink); border:0; border-radius:16px; box-shadow:0 20px 80px rgba(0,0,0,.25); padding:0; }
dialog::backdrop { background:rgba(16,36,31,.55); }
#settingsForm { padding:24px; }
fieldset { border:0; padding:0; margin:20px 0; display:grid; gap:10px; }
fieldset label { display:flex; gap:8px; align-items:center; }
fieldset input { width:auto; }
#settingsForm > input { margin:0 0 15px; }
.icon-button { background:transparent; color:var(--ink); font-size:1.8rem; padding:0 8px; }
@media (max-width:620px) { .shell { width:min(100% - 22px, 1020px); padding-top:30px; } .hero, .section-heading { align-items:flex-start; flex-direction:column; } .hero .secondary, .section-heading button { width:100%; } .search-row { flex-direction:column; } .search-row input, .search-row button { width:100%; } }