:root { color-scheme: light; font: 16px/1.5 system-ui, sans-serif; color: #172033; background: #f7f8fb; }
* { box-sizing: border-box; } body { margin: 0; } header { position: fixed; inset: 0 auto 0 0; width: 224px; padding: 28px 16px; background: #12213e; color: white; } header b { display:block; font-size: 1.25rem; margin: 0 12px 28px; } nav { display:grid; gap: 6px; } nav a { color:#dce7ff; padding: 12px; border-radius: 6px; text-decoration:none; min-height:44px; } nav a[aria-current="page"] { color:#fff; background:#275db2; border-left:3px solid #9ac1ff; } main { max-width: 1120px; min-height:100vh; margin-left:224px; padding:32px; } h1:focus { outline: 2px solid #2463c5; outline-offset:4px; } section, form { background:white; border:1px solid #dbe1ed; border-radius:10px; padding:20px; margin:20px 0; } .title { display:flex; gap:16px; justify-content:space-between; align-items:center; } label { display:block; margin:12px 0; font-weight:600; } input, textarea, button, .button { display:block; width:100%; max-width:560px; min-height:44px; margin-top:5px; padding:9px 12px; border:1px solid #8993a5; border-radius:5px; font:inherit; color:inherit; background:white; } textarea { min-height:100px; resize:vertical; } button,.button { display:inline-flex; width:auto; align-items:center; justify-content:center; color:white; background:#1457b8; border-color:#1457b8; cursor:pointer; text-decoration:none; margin:12px 8px 0 0; } button[type="button"] { color:#172033; background:white; border-color:#6c778b; } button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible { outline:3px solid #f1a400; outline-offset:2px; } small { font-weight:400; color:#526178; } .error { min-height:1.5em; color:#a60f22; font-weight:700; } input.invalid, textarea.invalid, select.invalid { border:2px solid #a60f22; background:#fff5f6; } .loading { padding:20px; font-weight:700; } .customers { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; } .customers li, li { overflow-wrap:anywhere; } .customers li { border:1px solid #dbe1ed; border-radius:8px; padding:16px; background:#fff; } .customers span { display:block; color:#526178; } .live { position:fixed; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); } .skip { position:absolute; left:-999px; } .skip:focus { left:12px; top:12px; z-index:2; background:#fff; padding:8px; }
@media (max-width:767px) { header { position:fixed; inset: auto 0 0; width:100%; height:auto; z-index:1; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); } header b { margin:0 0 6px; } nav { grid-template-columns:repeat(3,1fr); gap:4px; } nav a { padding:8px 4px; text-align:center; font-size:.9rem; } main { margin:0; padding:16px 16px 130px; } .title { align-items:flex-start; flex-direction:column; } .title .button,.title button { width:100%; } section,form { padding:16px; } }