:root{--bg:#f7f7f5;--panel:#fff;--text:#0f2747;--muted:#64748b;--line:#e5e7eb;--dark:#111827;--green:#059669;--red:#e11d2e;--yellow:#d97706;--blue:#2563eb;--shadow:0 12px 30px rgba(15,23,42,.08);--radius:18px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Arial,sans-serif;color:var(--text)}
button,input,select,textarea{font:inherit}button{cursor:pointer}
.layout{max-width:1500px;margin:0 auto;padding:16px;display:grid;grid-template-columns:minmax(760px,1fr) 360px;gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.main{display:flex;flex-direction:column;gap:14px}.header{padding:16px}.header h1{font-size:22px;margin:0}.header p{font-size:13px;color:var(--muted);margin:6px 0 0}
.form,.score-form,.score-card,.note-box{padding:16px}.form h3,.score-form h3,.note-box h3{margin:0 0 6px}
.form-grid,.score-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:12px}
.field,.score-field{border:1px solid var(--line);border-radius:16px;padding:12px;background:#fff}
.field.wide{grid-column:span 2}
.field label,.score-field label{display:block;font-weight:700;font-size:13px;margin-bottom:8px}
.field input,.field select,.score-field select{width:100%;height:40px;border:1px solid var(--line);border-radius:12px;padding:0 10px;background:#fafafa}
.field small,.score-field small{display:block;color:var(--muted);font-size:12px;margin-top:6px;line-height:1.5}
.computed{background:#f8fafc}.computed input{font-weight:800;color:var(--blue)}
.score-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.score-num{font-size:48px;font-weight:900;line-height:1;color:#0f2747}.score-result{font-weight:900;font-size:18px;margin-top:4px}
.threshold{font-size:13px;line-height:1.7;color:#475569;text-align:right;white-space:nowrap}
.meter{height:14px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin:12px 0 14px}.meter-fill{height:100%;width:0%;background:var(--green);transition:.2s}
.score-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.score-item{border:1px solid #dfe3ea;border-radius:13px;padding:12px;background:#fff}
.score-item span{display:block;color:#64748b;font-size:13px;margin-bottom:4px}.score-item b{font-size:20px;color:#0f2747}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.btn{border:1px solid var(--line);background:#fff;border-radius:13px;padding:10px 13px}
.btn.dark{background:var(--dark);color:#fff;border-color:var(--dark)}.btn.green{background:var(--green);color:#fff;border-color:var(--green)}.btn:disabled{opacity:.45;cursor:not-allowed}
.note-box textarea{width:100%;min-height:220px;border:1px solid var(--line);border-radius:16px;padding:12px;line-height:1.7;resize:vertical;background:#fafafa}
.right{display:flex;flex-direction:column;gap:14px}.right-card{padding:15px}.right-title{font-weight:900;margin-bottom:4px}.right-sub{font-size:12px;color:var(--muted);line-height:1.6}
.rule-list{margin-top:12px;display:flex;flex-direction:column;gap:8px}.rule{border:1px solid var(--line);border-radius:14px;padding:9px;background:#fafafa;font-size:13px;line-height:1.55}.rule b{color:#111827}
.ai{display:flex;flex-direction:column;gap:9px;margin-top:12px}.ai div{border-radius:14px;padding:10px;font-size:13px;line-height:1.65}.ai .good{background:#ecfdf5}.ai .warn{background:#fffbeb}.ai .bad{background:#fff1f2}.ai .info{background:#eff6ff}
.preview{white-space:pre-wrap;border:1px solid var(--line);border-radius:16px;padding:12px;background:#fafafa;font-size:13px;line-height:1.7;min-height:180px;max-height:420px;overflow:auto}
.green{color:var(--green)}.red{color:var(--red)}.yellow{color:var(--yellow)}
@media(max-width:1050px){.layout{grid-template-columns:1fr}.right{display:grid;grid-template-columns:1fr 1fr}.right-card:last-child{grid-column:1/-1}}
@media(max-width:760px){.layout{display:block;padding:12px}.main,.right{margin-bottom:12px}.form-grid,.score-grid{grid-template-columns:1fr}.field.wide{grid-column:auto}.score-breakdown{grid-template-columns:repeat(2,1fr)}.score-top{display:block}.threshold{text-align:left;margin-top:8px}.right{display:flex;margin-top:12px}}