:root{--bg:#f5f6fa;--fg:#1b1f2a;--muted:#5d6577;--card:#fff;--line:#dfe2ea;--accent:#2b5cd8;--accent-fg:#fff;--tint:rgba(43,92,216,.09);--danger:#b3261e;--ok:#17703a;--warn:#8a5300;--radius:14px;--gap:16px}
@media (prefers-color-scheme:dark){:root{--bg:#12141a;--fg:#eceef4;--muted:#a3abbd;--card:#1b1e27;--line:#323747;--accent:#7fa2ff;--accent-fg:#0e1220;--tint:rgba(127,162,255,.14);--danger:#ff8a80;--ok:#7fd89b;--warn:#f0b35a}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--gap);top:var(--gap);background:var(--card);padding:8px 12px;border-radius:8px;z-index:30}
.top{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding:8px max(var(--gap),env(safe-area-inset-right)) 8px max(var(--gap),env(safe-area-inset-left));background:var(--card);border-bottom:1px solid var(--line);z-index:20}
.brand{font-weight:700;font-size:1.15rem;color:var(--fg);text-decoration:none}
.menu-toggle{display:none;margin-left:auto;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--fg);font:inherit;cursor:pointer}
.sitenav{display:flex;flex-wrap:wrap;align-items:center;gap:2px 6px;flex:1}
.nav-link,.nav-group>summary{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 12px;border-radius:10px;color:var(--fg);text-decoration:none;cursor:pointer;list-style:none}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary::after{content:"▾";font-size:.7rem;color:var(--muted)}
.nav-link:hover,.nav-group>summary:hover,.is-current>summary,.nav-link.is-current{background:var(--tint)}
.nav-group{position:relative}.nav-account{margin-left:auto}
.nav-group>ul{position:absolute;left:0;top:calc(100% + 4px);min-width:13rem;margin:0;padding:6px;list-style:none;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.16)}
.nav-account>ul{left:auto;right:0}
.nav-group>ul a,.nav-group>ul .linklike{display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:8px;color:var(--fg);text-decoration:none;width:100%;text-align:left}
.nav-group>ul a:hover,.nav-group>ul .linklike:hover,.nav-group>ul a[aria-current=page]{background:var(--tint)}
.who{padding:6px 12px;display:flex;flex-direction:column}.who small{color:var(--muted)}
.avatar{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-fg);font-weight:700;font-size:.8rem}
.linklike{background:none;border:0;font:inherit;cursor:pointer;color:var(--accent);padding:0}
@media (max-width:820px){.menu-toggle{display:inline-flex;align-items:center}.sitenav{display:none;width:100%;flex-direction:column;align-items:stretch}.sitenav.open{display:flex}.nav-group>ul{position:static;box-shadow:none;border:0;padding-left:14px}.nav-account{margin-left:0}}
.wrap{max-width:70rem;margin:0 auto;padding:var(--gap) max(var(--gap),env(safe-area-inset-right)) 40px max(var(--gap),env(safe-area-inset-left))}
.narrow{max-width:30rem;margin:8vh auto 0}
h1{font-size:1.6rem;margin:.5em 0 .3em}h2{font-size:1.2rem;margin:1.4em 0 .5em}h3{font-size:1rem;margin:1em 0 .3em}
.lead{color:var(--muted);margin-top:0}.hint{color:var(--muted);font-size:.9rem}.muted{color:var(--muted)}
.foot{text-align:center;color:var(--muted);font-size:.85rem;padding:24px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:var(--gap);margin:0 0 var(--gap)}
.grid{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}.stat b{display:block;font-size:1.8rem;line-height:1.1}.stat span{color:var(--muted);font-size:.9rem}
.btn,button.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border:0;border-radius:10px;background:var(--accent);color:var(--accent-fg);font:inherit;font-weight:600;text-decoration:none;cursor:pointer}
.btn.secondary{background:transparent;color:var(--accent);border:2px solid var(--accent)}.btn.danger{background:var(--danger);color:#fff}.btn.small{min-height:34px;padding:0 12px;font-size:.9rem}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:var(--gap) 0}
form.inline{display:inline}
.field{margin:0 0 var(--gap)}.field label{display:block;font-weight:600;margin-bottom:4px}
.check{display:flex;gap:10px;align-items:flex-start;margin:0 0 var(--gap)}.check label{font-weight:400;margin:0}.check input{margin-top:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=search],input[type=url],input[type=tel],input[type=date],select,textarea{width:100%;min-height:42px;padding:9px 12px;font:inherit;color:var(--fg);background:var(--card);border:2px solid var(--line);border-radius:10px}
textarea{resize:vertical}
input[type=checkbox],input[type=radio]{width:20px;height:20px;accent-color:var(--accent)}
.row{display:flex;flex-wrap:wrap;gap:var(--gap)}.row>.field{flex:1 1 12rem;min-width:0}
.errorlist{color:var(--danger);list-style:none;padding:0;margin:4px 0 0}
.errors-box{border:1px solid var(--danger);border-radius:10px;padding:10px 14px;margin-bottom:var(--gap);color:var(--danger)}
.messages{list-style:none;padding:0;margin:0 0 var(--gap)}.msg{padding:12px 16px;border-radius:12px;background:var(--card);border:1px solid var(--line);margin-bottom:8px}
.msg.success{border-color:var(--ok)}.msg.error{border-color:var(--danger)}.msg.warning{border-color:var(--warn)}
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius)}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}th{font-size:.85rem;color:var(--muted);font-weight:600}
.badge{display:inline-block;padding:2px 10px;border:1px solid var(--line);border-radius:999px;background:var(--tint);font-size:.8rem;font-weight:600;white-space:nowrap}
.badge.ok{border-color:var(--ok);color:var(--ok)}.badge.bad{border-color:var(--danger);color:var(--danger)}.badge.warn{border-color:var(--warn);color:var(--warn)}.badge.fb{border-color:#1877f2;color:#1877f2}.badge.ig{border-color:#c13584;color:#c13584}
@media (prefers-color-scheme:dark){.badge.fb{color:#7db0ff;border-color:#7db0ff}.badge.ig{color:#ff8fcf;border-color:#ff8fcf}}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--muted);margin-right:6px}.dot.ok{background:var(--ok)}.dot.bad{background:var(--danger)}.dot.warn{background:var(--warn)}
.pager{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;margin:var(--gap) 0}
.tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 var(--gap)}.tabs a{padding:8px 14px;border-radius:999px;border:1px solid var(--line);text-decoration:none;color:var(--fg);background:var(--card)}.tabs a[aria-current=page]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:0 0 var(--gap)}.filters .field{margin:0;flex:1 1 11rem}
.alert{border-left:5px solid var(--warn);background:var(--card);border-radius:10px;padding:12px 16px;margin:0 0 var(--gap)}.alert.bad{border-color:var(--danger)}.alert.ok{border-color:var(--ok)}
.codes{display:grid;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));gap:8px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.1rem}.codes span{padding:8px 12px;border:1px dashed var(--line);border-radius:8px;text-align:center}
code,.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em;word-break:break-all}
.copybox{display:flex;gap:8px;align-items:center}.copybox code{flex:1;padding:9px 12px;background:var(--tint);border-radius:10px}
.qr{display:block;margin:0 auto;max-width:14rem;background:#fff;padding:8px;border-radius:12px}
.perm-group{border:1px solid var(--line);border-radius:12px;padding:10px 14px;margin:0 0 12px;background:var(--card)}.perm-group legend{font-weight:700;padding:0 6px}
.bubble{max-width:36rem;padding:10px 14px;border-radius:16px;margin:6px 0;background:var(--card);border:1px solid var(--line);white-space:pre-wrap;word-wrap:break-word}
.bubble.out{margin-left:auto;background:var(--tint)}.bubble small{display:block;color:var(--muted);margin-top:4px}
.bubble.sim{border-style:dashed}
.thread{display:flex;flex-direction:column}
.steps{counter-reset:s;list-style:none;padding:0;margin:0}.steps>li{counter-increment:s;position:relative;padding:12px 14px 12px 52px;margin:0 0 10px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.steps>li::before{content:counter(s);position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--accent-fg);display:grid;place-items:center;font-weight:700;font-size:.85rem}
.variant{padding:6px 10px;margin:4px 0;border-left:3px solid var(--line);white-space:pre-wrap}
.builder-step{padding:12px 14px;margin:0 0 10px;background:var(--card);border:1px solid var(--line);border-radius:12px}
.builder-step header{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:8px}.builder-step header strong{flex:1}
.btnrow{display:flex;flex-wrap:wrap;gap:6px}
.qr-row{display:flex;gap:8px;margin:0 0 6px}.qr-row input{flex:1}
.banner{padding:10px 16px;border-radius:12px;margin:0 0 var(--gap);border:1px solid var(--line);background:var(--card);display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}