:root { --bg:#f4f7fb; --card:#ffffff; --ink:#172033; --line:#d8dfec; --chip:#ecf3ff; --chiptext:#13467a; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family: Segoe UI, Arial, sans-serif; }
.wrap { max-width: 1024px; margin: 0 auto; padding: 20px; }
.nav { display:flex; flex-wrap:wrap; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px; }
.nav a { text-decoration:none; background:var(--chip); color:var(--chiptext); padding:7px 10px; border-radius:8px; font-size:13px; }
.card { margin-top:14px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; }
h1 { margin:0 0 6px; font-size:26px; }
p { margin:0 0 14px; color:#55627c; }
.row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
input,select,button,textarea { border:1px solid #bcc8dc; border-radius:8px; padding:9px 10px; font-size:14px; }
button { cursor:pointer; background:#1a73e8; color:#fff; border-color:#1a73e8; }
textarea { width:100%; min-height:120px; resize:vertical; }
.out { margin-top:12px; padding:12px; border-radius:10px; background:#f7f9fd; border:1px solid #e1e7f2; white-space:pre-wrap; word-break:break-word; }
canvas { max-width:100%; border:1px solid #d8dfec; border-radius:8px; margin-top:10px; }