:root { --card:#ffffff; --border:#e6e6e6; --muted:#666; --danger:#b30000; }
body { font-family: Arial, Helvetica, sans-serif; background:#fafafa; margin:0; }
.wrap { max-width: 1100px; margin: 18px auto; padding: 0 14px; }
.top { margin-bottom: 10px; }
.brand { display:flex; gap:14px; align-items:center; }
.logo { width: 92px; height: auto; }
h1 { margin:0; font-size: 34px; }
.sub { color:#333; margin-top:4px; }
.mini { color:var(--muted); font-size: 13px; line-height: 1.35; }
.card { background:var(--card); border:1px solid var(--border); border-radius: 10px; padding: 14px; margin: 12px 0; }
.row { display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap; }
.col { flex:1; min-width: 260px; }
label { display:block; font-size: 13px; color:#111; margin: 10px 0 4px; }
input, select, button { font-size: 14px; padding: 8px 10px; width:100%; box-sizing:border-box; }
button { cursor:pointer; }
.status { margin-top: 8px; font-size: 14px; }
canvas { width:100%; border:1px solid var(--border); border-radius: 10px; margin-top: 10px; }
.result { margin-top: 10px; background:#fbfbfb; border:1px solid var(--border); border-radius: 10px; padding: 10px; }
.kv { margin: 4px 0; }
.pill { display:inline-block; margin-top: 10px; margin-right: 10px; padding: 8px 10px; border:1px solid var(--border); border-radius: 999px; background:#fff; text-decoration:none; color:#111; }
.debug { margin-top: 10px; }
.danger { color: var(--danger); font-weight: bold; }
.btnrow { display:flex; gap:10px; margin-top: 8px; }
.btnrow button { width:auto; }