:root{color:#15202b;background:#eef2f5;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh}button,textarea{font:inherit}button{border:0}.app-shell{min-height:100vh;padding:24px}.topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 auto 18px;max-width:1440px}.brand{display:flex;align-items:center;gap:16px}.brand img{width:144px;height:auto;object-fit:contain}.brand h1,.panel-title h2{margin:0;letter-spacing:0}.brand h1{font-size:25px;line-height:1.2}.brand p,.panel-title p{margin:5px 0 0;color:#637083}.status-strip{display:flex;align-items:center;gap:10px;color:#2b3a4a;white-space:nowrap}.status-strip span{border:1px solid #d6dee8;border-radius:999px;background:#fff;padding:8px 12px;font-size:13px}.workspace{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:18px;max-width:1440px;margin:0 auto}.control-panel,.preview-panel{border:1px solid #d9e1ea;border-radius:8px;background:#fff;box-shadow:0 18px 48px #1d2d3e14}.control-panel{align-self:start;display:flex;flex-direction:column;gap:16px;padding:18px}.drop-zone{display:grid;place-items:center;gap:8px;min-height:150px;border:1px dashed #9db0c7;border-radius:8px;background:#f7fafc;color:#2b3a4a;cursor:pointer;text-align:center;padding:18px}.drop-zone span{max-width:240px;color:#637083;font-size:13px;line-height:1.5}.drop-zone.is-dragging{border-color:#1664d8;background:#eef6ff}.input-block{display:grid;gap:8px;color:#344457;font-weight:700}.input-block textarea{min-height:190px;width:100%;resize:vertical;border:1px solid #cfd9e5;border-radius:8px;color:#15202b;outline:none;padding:12px;line-height:1.5}.input-block textarea:focus{border-color:#1664d8;box-shadow:0 0 0 3px #1664d81f}.message{display:flex;align-items:flex-start;gap:8px;border-radius:8px;background:#fff7e8;color:#7a5200;padding:10px 12px;font-size:13px;line-height:1.45}.action-row{display:grid;grid-template-columns:1fr 44px;gap:10px}.primary-button,.export-button,.secondary-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;min-height:44px;cursor:pointer;font-weight:700}.primary-button{background:#1664d8;color:#fff}.export-button{width:100%;background:#162131;color:#fff}.secondary-button{width:100%;border:1px solid #cfd9e5;background:#fff;color:#243448}.icon-button{background:#edf2f7;color:#2b3a4a}.primary-button:disabled,.export-button:disabled,.secondary-button:disabled{cursor:not-allowed;opacity:.45}.export-stack{display:grid;gap:10px}.preview-panel{min-width:0;overflow:hidden}.panel-title{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid #e5ebf2}.panel-title h2{font-size:20px}.table-wrap{overflow:auto;max-height:calc(100vh - 160px)}table{width:100%;border-collapse:collapse;min-width:980px}th,td{border-bottom:1px solid #edf1f5;padding:13px 14px;text-align:left;vertical-align:top}th{position:sticky;top:0;z-index:1;background:#f7fafc;color:#526174;font-size:12px;letter-spacing:0}td{color:#253245;font-size:14px}.code-cell{width:130px;color:#0f4fb5;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:700}.elements-cell{min-width:360px;white-space:pre-line}.elements-cell span,.meta-cell span{display:block;line-height:1.55}.meta-cell{min-width:220px;color:#526174}.muted{color:#8a96a7}.pill{display:inline-flex;align-items:center;justify-content:center;gap:5px;width:76px;border-radius:999px;padding:6px 8px;font-size:12px;font-weight:700}.pill.ok{background:#e8f7ef;color:#137341}.pill.warn{background:#fff2d9;color:#8a5a00}.pill.error{background:#fdeceb;color:#bd2e2e}.pill.loading{background:#eaf2ff;color:#175fca}.empty-state{height:320px;color:#758296;text-align:center;vertical-align:middle}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.spin{animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:880px){.app-shell{padding:16px}.topbar,.workspace{display:grid;grid-template-columns:1fr}.brand{align-items:flex-start}.brand img{width:112px}.status-strip{overflow-x:auto;padding-bottom:4px}.table-wrap{max-height:none}}
