:root { --ink:#14213d; --muted:#5c677d; --line:#d9dee7; --accent:#b8862b; --bg:#f7f8fb; }
* { box-sizing: border-box; }
body { margin:0; font:16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; color:var(--ink); background:var(--bg); }
.top { padding:1.5rem 1rem 0.5rem; max-width:1100px; margin:0 auto; }
.top h1 { margin:0; }
.note { color:var(--muted); margin:.25rem 0 0; }
.grid { display:grid; gap:1rem; padding:1rem; max-width:1100px; margin:0 auto; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); }
.card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:1rem; }
.card.wide { grid-column:1 / -1; }
label { display:block; margin:.5rem 0; font-weight:600; }
input, select, textarea { display:block; width:100%; margin-top:.25rem; padding:.6rem; font:inherit; border:1px solid var(--line); border-radius:8px; }
button { min-height:44px; padding:.6rem 1rem; margin-top:.5rem; border:0; border-radius:8px; background:var(--ink); color:#fff; font:inherit; font-weight:600; cursor:pointer; }
button.ghost { background:#fff; color:var(--ink); border:1px solid var(--line); }
button.small { min-height:36px; padding:.35rem .7rem; margin-left:.5rem; font-size:.9rem; }
button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid var(--accent); outline-offset:2px; }
.row { display:flex; gap:.5rem; flex-wrap:wrap; }
iframe { width:100%; height:420px; border:1px solid var(--line); border-radius:8px; background:#fff; }
.pkg-form { display:grid; gap:.25rem; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); align-items:end; }
.pkg-list { list-style:none; padding:0; margin:.75rem 0 0; }
.pkg { padding:.6rem 0; border-bottom:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; word-break:break-all; }
.errors { color:#a4161a; min-height:1.2em; }
.msg { color:var(--muted); min-height:1.2em; }
.foot { max-width:1100px; margin:0 auto; padding:0 1rem 2rem; color:var(--muted); font-size:.9rem; }