:root{--bg:#f5f7fb;--card:#fff;--line:#dfe5ee;--text:#172033;--muted:#677185;--blue:#2368e8;--green:#27ad60;--violet:#6e44ff;--orange:#ff7a35;--shadow:0 8px 22px rgba(21,33,56,.06)}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Segoe UI,Arial,sans-serif;background:var(--bg);color:var(--text)}button{font:inherit}.app-shell{min-height:100vh}.topbar{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 28px;gap:46px}.brand{font-weight:800;font-size:27px;white-space:nowrap}.brand-main{color:var(--blue)}.brand-dot{font-size:18px;color:#566178}.topbar nav{display:flex;gap:28px;align-items:center;overflow:auto}.topbar a{text-decoration:none;color:#1d2637;font-size:14px;padding:22px 0 19px;border-bottom:3px solid transparent}.topbar a.active{color:var(--blue);border-color:var(--blue)}
.workspace{display:grid;grid-template-columns:minmax(0,58%) minmax(360px,42%);min-height:calc(100vh - 64px)}.editor-pane{padding:22px;border-right:1px solid var(--line);background:#fbfcfe}.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}.toolbar button,.improvement-card button{border:1px solid #cfd7e3;background:#fff;border-radius:8px;padding:9px 14px;cursor:pointer;color:#253047}.toolbar .primary{background:#e9fff0;border-color:#8bd8a6;color:#158441;margin-left:auto}.editor-wrap{height:48vh;min-height:360px;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;box-shadow:var(--shadow)}#htmlInput{width:100%;height:100%;resize:none;border:0;outline:none;padding:18px;font-family:Consolas,Monaco,monospace;font-size:14px;line-height:1.55;color:#10213e;background:linear-gradient(#f7faff 1px,transparent 1px);background-size:100% 24px}.tabs{display:flex;gap:24px;margin-top:14px;border-bottom:1px solid var(--line)}.tab{background:none;border:0;padding:11px 4px;color:#47536a;cursor:pointer}.tab.active{color:#101827;border-bottom:3px solid var(--blue)}#preview{width:100%;height:245px;border:1px solid var(--line);border-radius:10px;background:#fff;margin-top:12px}
.ai-pane{padding:22px;background:#fff}.panel-title{font-size:15px;font-weight:800;letter-spacing:.02em;margin:3px 0 18px;display:flex;gap:9px;align-items:center}.panel-title span{color:var(--blue)}.card{border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:var(--shadow)}.score-card{padding:22px;display:grid;grid-template-columns:1fr 112px;gap:18px;align-items:center}.eyebrow{font-size:16px;font-weight:700}.score-line{display:flex;align-items:flex-end;gap:8px;margin:8px 0}.score-line span{font-size:46px;line-height:1;font-weight:800;color:var(--green)}.score-line small{font-size:20px;margin-bottom:4px}.progress{height:9px;border-radius:999px;background:#e8ecf2;overflow:hidden}.progress span{display:block;height:100%;background:var(--green);transition:width .45s ease}.score-card p{color:var(--muted);font-size:14px;margin:12px 0 0}.score-ring{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) 72%,#e6ebf2 0);position:relative}.score-ring:after{content:"";position:absolute;inset:9px;background:#fff;border-radius:50%}.score-ring strong{z-index:1;font-size:25px}.cards{display:grid;gap:12px;margin-top:14px}.improvement-card{display:grid;grid-template-columns:48px 1fr auto;gap:14px;align-items:center;padding:17px}.icon{width:48px;height:48px;border-radius:11px;background:#f3efff;display:grid;place-items:center;color:var(--violet);font-weight:800}.improvement-copy h3{margin:0 0 6px;font-size:17px}.improvement-copy p{margin:0;color:var(--muted);font-size:14px;line-height:1.4}.points{font-size:12px;font-weight:700;padding:6px 8px;border-radius:8px;background:#f3efff;color:#5b38d4;white-space:nowrap}.improvement-card button{color:var(--blue);border-color:#9fbef7}.placeholder{opacity:.72}.next-label{margin:17px 4px 10px;color:#5c6475;font-size:14px}.stats-card{display:grid;grid-template-columns:repeat(3,1fr);padding:18px}.stats-card>div{padding:0 18px;border-right:1px solid var(--line)}.stats-card>div:last-child{border-right:0}.stats-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:9px}.stats-card strong{font-size:22px}.tip{margin-top:14px;padding:13px 15px;border:1px solid #d9d0ff;background:#f7f4ff;color:#5b38d4;border-radius:10px;font-size:13px}.loading{opacity:.6;pointer-events:none}
@media(max-width:1050px){.workspace{grid-template-columns:1fr}.editor-pane{border-right:0}.ai-pane{border-top:1px solid var(--line)}.topbar nav{display:none}}@media(max-width:650px){.topbar{padding:0 16px}.editor-pane,.ai-pane{padding:14px}.score-card{grid-template-columns:1fr}.score-ring{display:none}.improvement-card{grid-template-columns:44px 1fr}.improvement-card button,.points{grid-column:2}.stats-card{grid-template-columns:1fr}.stats-card>div{border-right:0;border-bottom:1px solid var(--line);padding:10px 0}.stats-card>div:last-child{border-bottom:0}}