:root { --ink:#10233d; --blue:#076aa9; --deep:#062a52; --sky:#eaf5fc; --line:#c9d9e6; --paper:#fff; --muted:#64748b; --danger:#b42318; font-family:Arial,sans-serif; color:var(--ink); background:#f3f7fa; }
* { box-sizing:border-box; }
body { margin:0; min-width:760px; background:linear-gradient(120deg,#f7fbfe 0%,#e8f3f9 100%); }
.topbar { height:76px; background:var(--deep); display:flex; align-items:center; padding:0 6vw; box-shadow:0 3px 16px #001a3344; }
.topbar img { width:150px; max-height:48px; object-fit:contain; object-position:left center; }
.topbar span { margin-left:28px; padding-left:28px; border-left:1px solid #ffffff55; color:#d5eafb; font-size:.86rem; letter-spacing:.08em; text-transform:uppercase; }
main { width:min(1180px,88vw); margin:42px auto 70px; background:var(--paper); padding:38px 46px 52px; border-radius:14px; box-shadow:0 12px 36px #153b5720; }
h1 { margin:0 0 28px; font-size:2rem; letter-spacing:-.03em; color:var(--deep); }
h2 { border-bottom:2px solid var(--sky); padding-bottom:12px; margin-top:38px; color:var(--blue); }
h3 { margin-top:30px; color:var(--deep); }
p { line-height:1.6; } a { color:var(--blue); font-weight:600; text-decoration:none; } a:hover { text-decoration:underline; }
form { display:flex; flex-wrap:wrap; gap:15px 20px; margin:16px 0 24px; padding:20px; background:#f8fbfd; border:1px solid var(--line); border-radius:9px; }
label { display:flex; flex-direction:column; gap:7px; font-size:.84rem; font-weight:700; color:#334b62; min-width:220px; } label:has(input[type=checkbox]) { flex-direction:row; align-items:center; min-width:unset; }
input, select, textarea { width:100%; border:1px solid #b8cad9; border-radius:6px; padding:10px 11px; background:#fff; color:var(--ink); font:inherit; } textarea { min-height:92px; resize:vertical; }
input[type=checkbox] { width:auto; accent-color:var(--blue); } input[type=file] { background:#fff; }
button { align-self:end; border:0; border-radius:6px; padding:10px 16px; background:var(--blue); color:#fff; font-weight:700; cursor:pointer; } button:hover { background:#055586; } form button[name=direction] { padding:5px 8px; font-size:.76rem; }
section { margin:22px 0; padding:0 20px 2px; border-left:4px solid #6dc3ee; background:#fcfeff; }
ul { padding-left:0; list-style:none; } li { margin:8px 0; padding:12px 14px; border:1px solid var(--line); border-radius:7px; background:#fff; } li[draggable=true] { cursor:grab; } li form { margin:10px 0 0; padding:10px; }
details { margin-top:10px; } summary { cursor:pointer; color:var(--blue); font-weight:700; } code { color:#075c90; font-weight:700; }
[role=alert] { padding:12px 16px; border-left:4px solid var(--danger); background:#fff1f0; color:#7a271a; border-radius:4px; }
fieldset { width:100%; border:1px dashed var(--line); border-radius:6px; } fieldset label { display:inline-flex; flex-direction:row; margin:7px 15px 7px 0; min-width:unset; }
@media (max-width:900px) { main { width:94vw; padding:30px; } .topbar { padding:0 3vw; } }