/* Anti-Spam v2 primitives (dark). Class prefix: as-. */
/* One number style: .as-figure (2rem), .as-figure--sm (1.5rem). Stat values, plan amounts and the ring value use the same tokens. */
.as-figure{font:var(--type-figure);letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.as-figure--sm{font:var(--type-figure-sm)}
.as-icon{flex:none;display:inline-block;vertical-align:middle;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.as-icon--spin{animation:as-spin .8s linear infinite}

/* Wordmark */
.as-wordmark{display:inline-flex;align-items:center;gap:10px;flex:none;white-space:nowrap;font:var(--weight-medium) 1.125rem/1 var(--font-display);letter-spacing:-.03em;color:var(--text-strong);text-decoration:none}
.as-wordmark:hover{color:var(--text-strong)}
.as-wordmark svg{display:block;flex:none;transition:transform var(--dur-slow) var(--ease-out)}
.as-wordmark:hover svg{transform:rotate(-12deg)}

/* Button */
.as-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--control-h-md);padding:0 14px;border-radius:var(--radius-md);border:1px solid transparent;font:var(--weight-medium) var(--text-sm)/1 var(--font-sans);white-space:nowrap;text-decoration:none;cursor:pointer;user-select:none;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),color var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.as-btn:active:not(:disabled){transform:translateY(1px) scale(.985)}
.as-btn:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-btn:disabled,.as-btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.as-btn--primary{background:var(--primary);color:var(--on-primary);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.12)}
.as-btn--primary:hover:not(:disabled){background:var(--primary-hover);color:var(--on-primary)}
.as-btn--primary:active:not(:disabled){background:var(--primary-press)}
.as-btn--secondary{background:rgba(255,255,255,.04);color:var(--text-strong);border-color:var(--border-strong)}
.as-btn--secondary:hover:not(:disabled){background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:var(--text-strong)}
.as-btn--ghost{background:transparent;color:var(--text-muted)}
.as-btn--ghost:hover:not(:disabled){background:rgba(255,255,255,.06);color:var(--text-strong)}
.as-btn--danger{background:var(--danger);color:var(--on-danger);box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.as-btn--danger:hover:not(:disabled){background:var(--danger-hover);color:var(--on-danger)}
.as-btn--danger:focus-visible{box-shadow:0 0 0 2px var(--coral-400)}
.as-btn--danger-soft{background:transparent;color:var(--danger);border-color:var(--danger-border)}
.as-btn--danger-soft:hover:not(:disabled){background:var(--danger-soft);color:var(--danger-hover)}
.as-btn--link{background:transparent;color:var(--text-link);padding:0 6px;height:auto;min-height:24px}
.as-btn--link:hover:not(:disabled){color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
.as-btn--inverse{background:var(--text-strong);color:var(--void-50)}
.as-btn--inverse:hover:not(:disabled){background:#fff;color:var(--void-50)}
.as-btn--sm{height:var(--control-h-sm);padding:0 10px;gap:6px;font-size:var(--text-xs);border-radius:var(--radius-sm)}
.as-btn--lg{height:var(--control-h-lg);padding:0 20px;gap:10px;font-size:var(--text-md);border-radius:10px}
.as-btn--block{display:flex;width:100%}
.as-btn--icon{padding:0;width:var(--control-h-md)}
.as-btn--icon.as-btn--sm{width:var(--control-h-sm)}
.as-btn--icon.as-btn--lg{width:var(--control-h-lg)}
.as-btn__trail{display:inline-flex;transition:transform var(--dur-base) var(--ease-out)}
.as-btn:hover .as-btn__trail{transform:translateX(3px)}
.as-btn--loading{color:transparent!important}
.as-btn__spinner{position:absolute;inset:0;display:grid;place-items:center}
.as-btn--primary .as-btn__spinner{color:var(--on-primary)}
.as-btn--danger .as-btn__spinner{color:var(--on-danger)}
.as-btn--secondary .as-btn__spinner,.as-btn--ghost .as-btn__spinner{color:var(--text)}

/* Copy button */
.as-copy{display:inline-flex;align-items:center;gap:8px}
.as-copy__status{font-size:var(--text-xs);color:var(--success-text);animation:as-fade-in var(--dur-base) var(--ease-out)}
.as-copy__swap{display:inline-grid}
.as-copy__swap>*{grid-area:1/1;transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.as-copy__swap>[data-off]{opacity:0;transform:scale(.6)}

/* Forms */
.as-field{display:grid;gap:6px;min-width:0}
.as-label{font:var(--type-label);color:var(--text-strong)}
.as-label__opt{color:var(--text-subtle);font-weight:var(--weight-regular)}
.as-input{width:100%;height:var(--control-h-md);padding:0 12px;font:var(--weight-regular) var(--text-sm)/1.4 var(--font-sans);color:var(--text-strong);background:var(--surface-sunken);border:1px solid var(--border-input);border-radius:var(--radius-md);box-shadow:var(--shadow-inset);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),background-color var(--dur-fast)}
.as-input::placeholder{color:var(--text-subtle)}
.as-input:hover{border-color:rgba(255,255,255,.26)}
.as-input:focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring);background:#06080c}
.as-input[aria-invalid="true"]{border-color:var(--danger)}
.as-input[aria-invalid="true"]:focus{box-shadow:0 0 0 2px var(--coral-400)}
.as-input:disabled{opacity:.5;cursor:not-allowed}
textarea.as-input{height:auto;min-height:96px;padding:10px 12px;resize:vertical;line-height:var(--leading-normal)}
select.as-input{appearance:none;padding-right:34px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a3b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 15 5 5 5-5'/><path d='m7 9 5-5 5 5'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
select.as-input option{background:var(--void-200);color:var(--text-strong)}
.as-input--mono{font-family:var(--font-mono);font-size:var(--text-xs);letter-spacing:.04em}
.as-input-wrap{position:relative;display:flex;align-items:center}
.as-input-wrap>.as-icon{position:absolute;left:11px;color:var(--text-subtle);pointer-events:none}
.as-input-wrap>.as-input{padding-left:34px}
.as-help{font-size:var(--text-xs);color:var(--text-muted);line-height:1.45}
.as-error{display:flex;gap:6px;align-items:flex-start;font-size:var(--text-xs);color:var(--danger);line-height:1.45;animation:as-slide-down var(--dur-base) var(--ease-out)}
.as-error .as-icon{margin-top:1px}
.as-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:var(--text-sm);color:var(--text);line-height:1.45}
.as-check input{appearance:none;flex:none;margin:1px 0 0;width:18px;height:18px;border:1px solid var(--border-input);border-radius:5px;background:var(--surface-sunken) center/12px no-repeat;cursor:pointer;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.as-check input:hover{border-color:rgba(255,255,255,.3)}
.as-check input:checked{background-color:var(--primary);border-color:var(--primary);background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2303141c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>")}
.as-check input:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-check input:disabled{opacity:.5;cursor:not-allowed}
.as-check__desc{display:block;color:var(--text-muted);font-size:var(--text-xs);margin-top:2px}
.as-radio-card{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-lg);background:transparent;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
.as-radio-card:hover{border-color:var(--border-strong);background:rgba(255,255,255,.02)}
.as-radio-card input{appearance:none;flex:none;margin:2px 0 0;width:18px;height:18px;border-radius:50%;border:1px solid var(--border-input);background:var(--surface-sunken);transition:border-width var(--dur-base) var(--ease-spring),border-color var(--dur-fast)}
.as-radio-card input:checked{border:5px solid var(--primary);background:var(--on-primary)}
.as-radio-card input:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-radio-card:has(input:checked){border-color:var(--primary);background:rgba(90,216,255,.05)}
.as-radio-card__title{display:flex;align-items:center;gap:8px;font:var(--type-label);color:var(--text-strong)}
.as-radio-card__desc{font-size:var(--text-xs);color:var(--text-muted);margin-top:2px;line-height:1.45}
.as-radio-card__meta{margin-left:auto;font:var(--weight-medium) var(--text-2xs)/1 var(--font-mono);color:var(--text-subtle);padding-top:4px;white-space:nowrap}

/* Card */
.as-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);min-width:0}
.as-card--pad{padding:20px}
.as-card--interactive{transition:box-shadow var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out),border-color var(--dur-slow) var(--ease-out),background-color var(--dur-slow);cursor:pointer}
.as-card--interactive:hover{border-color:var(--border-strong);background:var(--surface-raised)}
.as-card--danger{border-color:var(--danger-border)}
.as-card--glass{background:var(--surface-glass);backdrop-filter:var(--blur-glass);-webkit-backdrop-filter:var(--blur-glass);border-color:var(--border-strong);box-shadow:var(--shadow-lg),var(--highlight-top)}
.as-card--sunken{background:var(--surface-sunken);box-shadow:none}
.as-card__head{display:flex;align-items:center;gap:16px;padding:16px 20px 0;min-height:52px}.as-card__head>div:first-child{flex:1}
.as-card__title{font:var(--weight-medium) var(--text-sm)/1.35 var(--font-sans);letter-spacing:0;color:var(--text-strong);display:flex;align-items:center;gap:8px}
.as-card__desc{font-size:var(--text-xs);color:var(--text-subtle);margin-top:2px}
.as-card__actions{margin-left:auto;display:flex;gap:8px;align-items:center;flex:none}
.as-card__body{padding:20px}
.as-card__foot{padding:12px 20px;border-top:1px solid var(--border-subtle);border-radius:0 0 var(--radius-lg) var(--radius-lg);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.as-card--danger .as-card__title{color:var(--danger-text)}

/* Page header */
.as-page-head{display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;margin-bottom:32px}
.as-page-head__text{flex:1 1 320px;min-width:0}
.as-page-head__eyebrow{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--text-subtle);margin-bottom:10px}
.as-page-head__eyebrow a{color:var(--text-muted);text-decoration:none}
.as-page-head__eyebrow a:hover{color:var(--primary)}
.as-page-head h1{font:var(--type-h1);letter-spacing:var(--tracking-heading);overflow-wrap:anywhere}
.as-page-head__lead,.as-page-head__meta{margin-top:8px;color:var(--text-muted);font-size:var(--text-sm);max-width:46rem}
.as-page-head__actions{display:flex;gap:8px;flex:none;flex-wrap:nowrap}

/* Badge */
.as-badge{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 7px;border-radius:var(--radius-pill);font:var(--weight-medium) var(--text-xs)/1 var(--font-sans);white-space:nowrap;background:rgba(255,255,255,.06);color:var(--text);box-shadow:inset 0 0 0 1px var(--border)}
.as-badge__dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.as-badge--spam{background:var(--danger-soft);color:var(--coral-300);box-shadow:inset 0 0 0 1px var(--danger-border)}
.as-badge--clean{background:var(--success-soft);color:var(--mint-300);box-shadow:inset 0 0 0 1px var(--success-border)}
.as-badge--warn{background:var(--warn-soft);color:var(--amber-300);box-shadow:inset 0 0 0 1px var(--warn-border)}
.as-badge--info{background:var(--primary-soft);color:var(--cyan-200);box-shadow:inset 0 0 0 1px var(--primary-soft-border)}
.as-badge--solid{background:var(--danger);color:var(--on-danger);box-shadow:none;height:18px;min-width:18px;justify-content:center;padding:0 5px;font-size:11px;font-weight:var(--weight-semibold)}
.as-badge--mono{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em}

/* Flash */
.as-flash{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border:1px solid;border-radius:12px;font-size:var(--text-sm);line-height:1.5;animation:as-slide-down var(--dur-slow) var(--ease-out);color:var(--text)}
.as-flash>.as-icon{margin-top:2px}
.as-flash__body{flex:1;min-width:0}
.as-flash__title{font-weight:var(--weight-semibold);display:block;color:var(--text-strong)}
.as-flash__close{margin:-4px -6px -4px 0;background:none;border:0;padding:4px;border-radius:6px;color:inherit;opacity:.6;cursor:pointer;transition:opacity var(--dur-fast),background-color var(--dur-fast)}
.as-flash__close:hover{opacity:1;background:rgba(255,255,255,.08)}
.as-flash--success{background:var(--success-soft);border-color:var(--success-border)}
.as-flash--success>.as-icon{color:var(--success)}
.as-flash--error{background:var(--danger-soft);border-color:var(--danger-border)}
.as-flash--error>.as-icon{color:var(--danger)}
.as-flash--info{background:var(--info-soft);border-color:var(--info-border)}
.as-flash--info>.as-icon{color:var(--primary)}
.as-flash--warn{background:var(--warn-soft);border-color:var(--warn-border)}
.as-flash--warn>.as-icon{color:var(--warn)}
.as-flash--out{animation:none;opacity:0;transform:translateY(-4px);transition:opacity var(--dur-base),transform var(--dur-base)}

/* Empty state */
.as-empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:44px 24px;gap:6px}
.as-empty__icon{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--surface-raised);border:1px solid var(--border-strong);color:var(--text-muted);margin-bottom:12px}
.as-empty h3{font:var(--weight-medium) var(--text-md)/1.3 var(--font-sans);letter-spacing:0}
.as-empty p{color:var(--text-muted);font-size:var(--text-sm);max-width:34rem}
.as-empty__action{margin-top:14px}

/* Dialog */
.as-dialog-backdrop{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:var(--backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:as-fade-in var(--dur-base) var(--ease-out)}
.as-dialog{width:min(28rem,100%);background:var(--surface-raised);border:1px solid var(--border-strong);border-radius:14px;box-shadow:var(--shadow-xl),var(--highlight-top);padding:22px;animation:as-scale-in var(--dur-slow) var(--ease-out);overflow-wrap:anywhere}
.as-dialog__icon{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--danger-soft);border:1px solid var(--danger-border);color:var(--danger);margin-bottom:14px}
.as-dialog__icon--neutral{background:var(--primary-soft);border-color:var(--primary-soft-border);color:var(--primary)}
.as-dialog h2{font:var(--weight-medium) var(--text-md)/1.3 var(--font-sans);letter-spacing:0}
.as-dialog p{margin-top:6px;color:var(--text-muted);font-size:var(--text-sm)}
.as-dialog__actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}

/* Table */
.as-table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow-x:auto;overflow-y:hidden}
.as-table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:var(--text-sm)}
.as-table th{position:sticky;top:0;text-align:left;font:var(--weight-medium) var(--text-2xs)/1.2 var(--font-sans);color:var(--text-subtle);background:var(--surface);padding:11px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
.as-table td{padding:13px 16px;border-top:1px solid var(--border-subtle);vertical-align:top;overflow-wrap:break-word;color:var(--text)}
.as-table tbody tr:first-child td{border-top:0}
.as-table tbody tr{transition:background-color var(--dur-fast) var(--ease-out)}
.as-table tbody tr:hover{background:rgba(255,255,255,.025)}
.as-table .as-right{text-align:right}
.as-table__sort{all:unset;display:inline-flex;align-items:center;gap:4px;min-height:24px;cursor:pointer;border-radius:4px;transition:color var(--dur-fast)}
.as-table__sort:hover{color:var(--text-strong)}
.as-table__sort:focus-visible{box-shadow:var(--focus-ring)}
.as-table__sort .as-icon{opacity:.5}
.as-table__sort[data-active]{color:var(--primary)}
.as-table__sort[data-active] .as-icon{opacity:1}
.as-table__sub{display:block;color:var(--text-subtle);font-size:var(--text-xs);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.as-table--compact td{padding:9px 16px}

/* Pagination */
.as-pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;font-size:var(--text-sm);color:var(--text-muted)}
.as-pagination__btns{display:flex;gap:8px}

/* Meter */
.as-meter{display:grid;gap:10px}
.as-meter__label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:var(--text-sm);color:var(--text-muted)}
.as-meter__label strong{color:var(--text-strong);font-weight:var(--weight-semibold);font-variant-numeric:tabular-nums}
.as-meter__track{position:relative;height:6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.07);overflow:hidden}
.as-meter__fill{height:100%;border-radius:inherit;background:var(--primary);transform-origin:left;animation:as-grow-x 1s var(--ease-out) both;transition:width .6s var(--ease-out)}
.as-meter--high .as-meter__fill{background:var(--amber-400)}
.as-meter--full .as-meter__fill{background:var(--coral-400)}
.as-meter__note{font-size:var(--text-xs);color:var(--text-subtle);font-variant-numeric:tabular-nums}
.as-meter--high .as-meter__note{color:var(--warn-text)}
.as-meter--full .as-meter__note{color:var(--danger-text)}

/* Stat */
.as-stat{padding:20px;display:grid;gap:10px;align-content:start;min-width:0}
.as-stat__label{display:flex;align-items:center;gap:8px;font-size:var(--text-xs);color:var(--text-muted)}
.as-stat__dot{width:6px;height:6px;border-radius:2px;background:var(--void-600)}
.as-stat__value{font:var(--type-figure);letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.as-stat__hint{font-size:var(--text-xs);color:var(--text-subtle)}
.as-stat__delta{font-size:var(--text-xs);color:var(--text-subtle)}

/* Bar chart */
.as-bars{display:grid;grid-template-columns:repeat(var(--cols,7),1fr);gap:14px;height:168px;align-items:end;padding:0 2px;border-bottom:1px solid var(--border);background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px);background-size:100% 45px;background-position:0 -1px}
.as-bars__col{display:flex;flex-direction:column;height:100%;justify-content:flex-end;position:relative}
.as-bars__pair{display:flex;gap:3px;align-items:flex-end;height:100%}
.as-bars__bar{flex:1;min-height:2px;border-radius:3px 3px 0 0;transform-origin:bottom;animation:as-grow-y .8s var(--ease-out) both;transition:filter var(--dur-fast)}
.as-bars__bar--spam{background:var(--coral-400)}
.as-bars__bar--clean{background:rgba(255,255,255,.16)}
.as-bars__bar--zero{min-height:0;visibility:hidden}
.as-bars__col:hover .as-bars__bar{filter:brightness(1.25)}
.as-bars__labels{display:grid;grid-template-columns:repeat(var(--cols,7),1fr);gap:14px;margin-top:8px;font:var(--weight-regular) 11px/1 var(--font-mono);color:var(--text-subtle);text-align:center}
.as-bars__tip{position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%,4px);background:var(--void-400);border:1px solid var(--border-strong);color:var(--text-strong);font:11px/1 var(--font-mono);padding:7px 9px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity var(--dur-fast),transform var(--dur-fast);z-index:2;box-shadow:var(--shadow-md)}
.as-bars__col:hover .as-bars__tip{opacity:1;transform:translate(-50%,0)}
.as-legend{display:flex;gap:16px;font-size:var(--text-xs);color:var(--text-muted)}
.as-legend span{display:inline-flex;align-items:center;gap:6px}
.as-legend i{width:8px;height:8px;border-radius:2px;display:inline-block}

/* Detail list */
.as-dl{display:grid;grid-template-columns:max-content 1fr;gap:10px 24px;margin:0;font-size:var(--text-sm)}
.as-dl dt{color:var(--text-subtle)}
.as-dl dd{margin:0;color:var(--text-strong);overflow-wrap:anywhere}
@media (max-width:640px){.as-dl{grid-template-columns:1fr;gap:2px}.as-dl dd{margin-bottom:8px}}

/* Code snippet */
.as-snippet{background:var(--surface-code);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;color:var(--text-code);min-width:0}
.as-snippet__bar{display:flex;align-items:center;gap:8px;padding:6px 6px 6px 14px;border-bottom:1px solid var(--border-subtle);font:var(--weight-regular) 11px/1 var(--font-mono);color:var(--text-subtle);white-space:nowrap;min-width:0}
.as-snippet__bar>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.as-snippet__tabs{display:flex;gap:2px}
.as-snippet__tab{all:unset;cursor:pointer;box-sizing:border-box;min-height:24px;display:inline-flex;align-items:center;padding:4px 9px;border-radius:6px;color:var(--text-subtle);transition:color var(--dur-fast),background-color var(--dur-fast)}
.as-snippet__tab:hover{color:var(--text-strong)}
.as-snippet__tab[aria-selected="true"]{color:var(--text-strong);background:rgba(255,255,255,.07)}
.as-snippet__copy{all:unset;margin-left:auto;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:6px 9px;border-radius:6px;color:var(--text-subtle);font:inherit;transition:color var(--dur-fast),background-color var(--dur-fast)}
.as-snippet__copy:hover{color:var(--text-strong);background:rgba(255,255,255,.06)}
.as-snippet pre{margin:0;padding:16px 18px;overflow-x:auto;font:var(--type-code);tab-size:2}
.as-tok-s{color:#8ff0c6}.as-tok-k{color:#7ee0ff}.as-tok-c{color:#5f6a7c}.as-tok-n{color:#ffd37e}.as-tok-f{color:#b8adff}

/* Key reveal */
.as-key{border:1px solid var(--warn-border);background:rgba(255,181,71,.05);border-radius:var(--radius-lg);padding:18px 20px;animation:as-scale-in var(--dur-slow) var(--ease-out)}
.as-key__head{display:flex;gap:10px;align-items:center;font:var(--weight-medium) var(--text-sm)/1.3 var(--font-sans);color:var(--text-strong)}
.as-key__head .as-icon{color:var(--warn)}
.as-key p{font-size:var(--text-sm);color:var(--text-muted);margin-top:4px}
.as-key__row{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.as-key__code{flex:1 1 280px;min-width:0;font:var(--weight-medium) var(--text-sm)/1.4 var(--font-mono);background:var(--surface-code);border:1px solid var(--warn-border);border-radius:var(--radius-md);padding:9px 12px;user-select:all;overflow-wrap:anywhere;color:var(--amber-300)}

/* Plan card */
.as-plan{position:relative;display:flex;flex-direction:column;gap:20px;padding:28px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);transition:transform var(--dur-slow) var(--ease-out),box-shadow var(--dur-slow) var(--ease-out),border-color var(--dur-slow)}
.as-plan:hover{border-color:var(--border-strong)}
.as-plan--featured{border-color:rgba(90,216,255,.45);background:var(--surface-raised)}
.as-plan--featured:hover{border-color:var(--primary)}
.as-plan__flag{position:absolute;top:-11px;left:26px}
.as-plan__flag .as-badge{background:var(--void-200);box-shadow:inset 0 0 0 1px var(--primary-soft-border)}
.as-plan__name{font:var(--weight-medium) var(--text-lg)/1.2 var(--font-display);letter-spacing:-.02em;color:var(--text-strong)}
.as-plan__blurb{font-size:var(--text-sm);color:var(--text-muted);margin-top:4px}
.as-plan__price{display:flex;align-items:baseline;gap:6px}
.as-plan__amount{font:var(--type-figure);letter-spacing:-.03em;color:var(--text-strong);font-variant-numeric:tabular-nums}
.as-plan__amount--soft{font-size:var(--text-xl);letter-spacing:-.02em;color:var(--text-muted)}
.as-plan__period{font-size:var(--text-sm);color:var(--text-muted)}
.as-plan ul{list-style:none;margin:0;padding:20px 0 0;border-top:1px solid var(--border);display:grid;gap:10px;font-size:var(--text-sm)}
.as-plan li{display:flex;gap:10px;align-items:flex-start}
.as-plan li .as-icon{color:var(--text-subtle);margin-top:2px}
.as-plan__cta{margin-top:auto}

.as-progress{height:4px;background:rgba(255,255,255,.06);border-radius:var(--radius-pill);overflow:hidden}
.as-progress>i{display:block;height:100%;background:var(--success);border-radius:inherit;transition:width .6s var(--ease-out)}

/* Disclosure */
.as-disclosure{border-bottom:1px solid var(--border)}
.as-disclosure__btn{all:unset;box-sizing:border-box;width:100%;display:flex;align-items:center;gap:16px;padding:20px 4px;cursor:pointer;font:var(--weight-medium) var(--text-base)/1.4 var(--font-sans);color:var(--text-strong);border-radius:6px;transition:color var(--dur-fast)}
.as-disclosure__btn:hover{color:var(--text-strong)}.as-disclosure__btn:hover .as-icon{color:var(--text-strong)}
.as-disclosure__btn:focus-visible{box-shadow:var(--focus-ring)}
.as-disclosure__btn .as-icon{margin-left:auto;color:var(--text-subtle);transition:transform var(--dur-slow) var(--ease-out)}
.as-disclosure[data-open] .as-disclosure__btn .as-icon{transform:rotate(45deg)}
.as-disclosure__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-slow) var(--ease-out)}
.as-disclosure[data-open] .as-disclosure__panel{grid-template-rows:1fr}
.as-disclosure__inner{overflow:hidden;color:var(--text-muted);font-size:var(--text-md)}
.as-disclosure__inner>div{padding:0 4px 20px;opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.as-disclosure[data-open] .as-disclosure__inner>div{opacity:1}

/* ==========================================================================
   Additions for the EJS app (progressive enhancement, no inline styles)
   ========================================================================== */

/* Icons that are sized by the partial, wordmark logo */
.as-wordmark img,.as-wordmark svg{display:block;flex:none}

/* Copy button: icon swap driven by a data attribute that copy.js sets */
.as-copy__swap>[data-off]{color:var(--success)}
[data-copied] .as-copy__swap>:first-child{opacity:0;transform:scale(.6)}
[data-copied] .as-copy__swap>[data-off]{opacity:1;transform:none}

/* Layout helpers */
.as-stack{display:grid;gap:16px;min-width:0}
.as-stack--lg{gap:24px}
.as-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.as-inline{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.as-inline>.as-grow{flex:1 1 200px;min-width:0}
.as-inline>form{margin:0}
.as-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.as-grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.as-grid-auto{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.as-grid-split{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:16px;align-items:start}
.as-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.as-stats>*+*{border-left:1px solid var(--border-subtle)}
.as-section-title{font:var(--weight-medium) var(--text-md)/1.3 var(--font-sans);letter-spacing:0;color:var(--text-strong);margin:32px 0 12px}
.as-note{font-size:var(--text-xs);color:var(--text-subtle)}
.as-right{text-align:right}
.as-mono{font-family:var(--font-mono)}
.as-nowrap{white-space:nowrap}
@media (max-width:900px){.as-grid-split{grid-template-columns:1fr}.as-grid-3{grid-template-columns:1fr}}
@media (max-width:640px){.as-grid-2{grid-template-columns:1fr}.as-stats>*+*{border-left:0;border-top:1px solid var(--border-subtle)}}

/* Page header on narrow screens */
@media (max-width:640px){.as-page-head{margin-bottom:24px}.as-page-head__actions{flex-wrap:wrap;width:100%}.as-page-head__actions>:not(dialog){flex:1 1 auto}.as-page-head__actions .as-btn{width:100%}.as-page-head__actions form{display:contents}
  /* The add-site dialog sits inside the actions: keep its form a flex column and its buttons their own width (screen 06) */
  .as-page-head__actions dialog form{display:flex}.as-page-head__actions dialog .as-btn{width:auto}}

/* Field extras: bare controls inside .as-field (views that do not carry the as-input class) */
.as-field>label{font:var(--type-label);color:var(--text-strong)}
.as-field :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),select,textarea){width:100%;height:var(--control-h-md);padding:0 12px;font:var(--weight-regular) var(--text-sm)/1.4 var(--font-sans);color:var(--text-strong);background:var(--surface-sunken);border:1px solid var(--border-input);border-radius:var(--radius-md);box-shadow:var(--shadow-inset)}
.as-field :where(textarea){height:auto;min-height:96px;padding:10px 12px}
.as-field :where(input,select,textarea):focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
.as-field :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--danger)}
.as-field :where(select){appearance:none;padding-right:34px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2398a3b4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m7 15 5 5 5-5'/><path d='m7 9 5-5 5 5'/></svg>");background-repeat:no-repeat;background-position:right 10px center}
.as-field :where(select option){background:var(--void-200);color:var(--text-strong)}

/* Native confirmation dialog. Without JS the dialog stays closed and the checkbox is the confirmation. */
dialog.as-dialog{width:min(28rem,calc(100vw - 32px));max-width:none;margin:auto;padding:22px;border:1px solid var(--border-strong);border-radius:14px;background:var(--surface-raised);color:var(--text);box-shadow:var(--shadow-xl),var(--highlight-top);text-align:left;overflow-wrap:anywhere}
dialog.as-dialog[open]{animation:as-scale-in var(--dur-slow) var(--ease-out)}
dialog.as-dialog::backdrop{background:var(--backdrop);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.as-confirm-fallback{margin:12px 0;padding:10px 12px;background:var(--warn-soft);border:1px solid var(--warn-border);border-radius:var(--radius-md)}
html.has-dialog .as-confirm-fallback{display:none}

/* Disclosure built on <details>. The panel height animates where the browser supports ::details-content. */
:root{interpolate-size:allow-keywords}
details.as-disclosure>summary{list-style:none;display:flex;align-items:center;gap:16px;padding:20px 4px;cursor:pointer;font:var(--weight-medium) var(--text-base)/1.4 var(--font-sans);color:var(--text-strong);border-radius:6px}
details.as-disclosure>summary::-webkit-details-marker{display:none}
details.as-disclosure>summary:focus-visible{outline:none;box-shadow:var(--focus-ring)}
details.as-disclosure>summary .as-icon{margin-left:auto;color:var(--text-subtle);transition:transform var(--dur-slow) var(--ease-out)}
details.as-disclosure[open]>summary .as-icon{transform:rotate(45deg)}
details.as-disclosure>summary:hover .as-icon{color:var(--text-strong)}
details.as-disclosure::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size var(--dur-slow) var(--ease-out),opacity var(--dur-slow) var(--ease-out),content-visibility var(--dur-slow) allow-discrete}
details.as-disclosure[open]::details-content{block-size:auto;opacity:1}
.as-disclosure__body{padding:0 4px 20px;color:var(--text-muted);font-size:var(--text-md)}
.as-disclosure__body>*+*{margin-top:10px}
.as-card details.as-disclosure{border-bottom:0}
.as-card details.as-disclosure>summary{padding:0;font-size:var(--text-sm)}
.as-card .as-disclosure__body{padding:12px 0 0;font-size:var(--text-sm)}

/* Snippet: tabs, panels and the no-JS caption */
.as-snippet__cap{padding:10px 18px 0;font:11px/1 var(--font-mono);color:var(--text-subtle)}
html.js .as-snippet__cap{display:none}
.as-snippet__title{min-width:0;overflow:hidden;text-overflow:ellipsis}
.as-snippet__panel[hidden]{display:none}
.as-snippet__panel+.as-snippet__panel{border-top:1px solid var(--border-subtle)}
html.js .as-snippet__panel+.as-snippet__panel{border-top:0}
.as-snippet__copy .as-copy__swap{display:inline-grid}

/* Table: header sort buttons are added by sort.js */
.as-table th[aria-sort="ascending"] .as-table__sort,.as-table th[aria-sort="descending"] .as-table__sort{color:var(--primary)}
.as-table th[aria-sort="ascending"] .as-table__sort::after{content:"\2191"}
.as-table th[aria-sort="descending"] .as-table__sort::after{content:"\2193"}
.as-table th[aria-sort="none"] .as-table__sort::after{content:"\2195";opacity:.45}
.as-table td code{white-space:nowrap}
.as-table__actions{display:flex;gap:6px;flex-wrap:wrap}
.as-table__actions form{margin:0}
.as-table-note{font-size:var(--text-xs);color:var(--text-subtle);margin:0 0 8px}

/* Plan card grid */
.as-plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;align-items:stretch}
.as-plans>*{display:grid}
.as-plan__period,.as-plan__flag{white-space:nowrap}

/* Charts: no inline styles, so columns, widths and heights are classes */
.as-bars__col:nth-child(2) .as-bars__bar{animation-delay:50ms}
.as-bars__col:nth-child(3) .as-bars__bar{animation-delay:100ms}
.as-bars__col:nth-child(4) .as-bars__bar{animation-delay:150ms}
.as-bars__col:nth-child(5) .as-bars__bar{animation-delay:200ms}
.as-bars__col:nth-child(6) .as-bars__bar{animation-delay:250ms}
.as-bars__col:nth-child(7) .as-bars__bar{animation-delay:300ms}
.as-bars__col:nth-child(n+8) .as-bars__bar{animation-delay:350ms}
.as-bars__bar--clean{animation-delay:25ms}
.as-legend{margin-top:14px}
.as-legend__spam{background:var(--spam)}
.as-legend__clean{background:rgba(255,255,255,.16)}
.as-bars--cols-1,.as-bars__labels--cols-1{--cols:1}.as-bars--cols-2,.as-bars__labels--cols-2{--cols:2}.as-bars--cols-3,.as-bars__labels--cols-3{--cols:3}.as-bars--cols-4,.as-bars__labels--cols-4{--cols:4}.as-bars--cols-5,.as-bars__labels--cols-5{--cols:5}.as-bars--cols-6,.as-bars__labels--cols-6{--cols:6}.as-bars--cols-7,.as-bars__labels--cols-7{--cols:7}.as-bars--cols-8,.as-bars__labels--cols-8{--cols:8}.as-bars--cols-10,.as-bars__labels--cols-10{--cols:10}.as-bars--cols-12,.as-bars__labels--cols-12{--cols:12}.as-bars--cols-14,.as-bars__labels--cols-14{--cols:14}.as-bars--cols-30,.as-bars__labels--cols-30{--cols:30}
.as-bars__tip{pointer-events:none}
.as-bars__col:focus-visible{outline:none}
.as-bars__col:focus-visible .as-bars__pair{border-radius:4px;box-shadow:var(--focus-ring)}
.as-bars__col:focus-visible .as-bars__tip{opacity:1;transform:translate(-50%,0)}
@media (max-width:640px){.as-bars{gap:6px}.as-bars__labels{gap:6px}}

/* Ring: the circumference is fixed (viewBox 140, r 61), so the draw-in is a pure CSS animation */
@keyframes as-ring-draw{from{stroke-dashoffset:383.27}}
.as-ring__fill{animation:as-ring-draw 1.4s var(--ease-out) both}
.as-ring--sm svg{width:104px;height:104px}
.as-ring--md svg{width:132px;height:132px}
.as-ring--lg svg{width:140px;height:140px}


/* Heat strip: the fade-in is staggered by weekday row */
.as-heat__cell{animation-duration:.6s}

/* Reduced motion: the global rule in tokens.css collapses animations; make the ring and bars sit at their end state */
@media (prefers-reduced-motion:reduce){.as-ring__fill,.as-bars__bar,.as-meter__fill{animation:none}}

/* Percent helpers: width and height classes, 0 to 100 */
.as-w-0{width:0%}.as-h-0{height:0%}
.as-w-1{width:1%}.as-h-1{height:1%}
.as-w-2{width:2%}.as-h-2{height:2%}
.as-w-3{width:3%}.as-h-3{height:3%}
.as-w-4{width:4%}.as-h-4{height:4%}
.as-w-5{width:5%}.as-h-5{height:5%}
.as-w-6{width:6%}.as-h-6{height:6%}
.as-w-7{width:7%}.as-h-7{height:7%}
.as-w-8{width:8%}.as-h-8{height:8%}
.as-w-9{width:9%}.as-h-9{height:9%}
.as-w-10{width:10%}.as-h-10{height:10%}
.as-w-11{width:11%}.as-h-11{height:11%}
.as-w-12{width:12%}.as-h-12{height:12%}
.as-w-13{width:13%}.as-h-13{height:13%}
.as-w-14{width:14%}.as-h-14{height:14%}
.as-w-15{width:15%}.as-h-15{height:15%}
.as-w-16{width:16%}.as-h-16{height:16%}
.as-w-17{width:17%}.as-h-17{height:17%}
.as-w-18{width:18%}.as-h-18{height:18%}
.as-w-19{width:19%}.as-h-19{height:19%}
.as-w-20{width:20%}.as-h-20{height:20%}
.as-w-21{width:21%}.as-h-21{height:21%}
.as-w-22{width:22%}.as-h-22{height:22%}
.as-w-23{width:23%}.as-h-23{height:23%}
.as-w-24{width:24%}.as-h-24{height:24%}
.as-w-25{width:25%}.as-h-25{height:25%}
.as-w-26{width:26%}.as-h-26{height:26%}
.as-w-27{width:27%}.as-h-27{height:27%}
.as-w-28{width:28%}.as-h-28{height:28%}
.as-w-29{width:29%}.as-h-29{height:29%}
.as-w-30{width:30%}.as-h-30{height:30%}
.as-w-31{width:31%}.as-h-31{height:31%}
.as-w-32{width:32%}.as-h-32{height:32%}
.as-w-33{width:33%}.as-h-33{height:33%}
.as-w-34{width:34%}.as-h-34{height:34%}
.as-w-35{width:35%}.as-h-35{height:35%}
.as-w-36{width:36%}.as-h-36{height:36%}
.as-w-37{width:37%}.as-h-37{height:37%}
.as-w-38{width:38%}.as-h-38{height:38%}
.as-w-39{width:39%}.as-h-39{height:39%}
.as-w-40{width:40%}.as-h-40{height:40%}
.as-w-41{width:41%}.as-h-41{height:41%}
.as-w-42{width:42%}.as-h-42{height:42%}
.as-w-43{width:43%}.as-h-43{height:43%}
.as-w-44{width:44%}.as-h-44{height:44%}
.as-w-45{width:45%}.as-h-45{height:45%}
.as-w-46{width:46%}.as-h-46{height:46%}
.as-w-47{width:47%}.as-h-47{height:47%}
.as-w-48{width:48%}.as-h-48{height:48%}
.as-w-49{width:49%}.as-h-49{height:49%}
.as-w-50{width:50%}.as-h-50{height:50%}
.as-w-51{width:51%}.as-h-51{height:51%}
.as-w-52{width:52%}.as-h-52{height:52%}
.as-w-53{width:53%}.as-h-53{height:53%}
.as-w-54{width:54%}.as-h-54{height:54%}
.as-w-55{width:55%}.as-h-55{height:55%}
.as-w-56{width:56%}.as-h-56{height:56%}
.as-w-57{width:57%}.as-h-57{height:57%}
.as-w-58{width:58%}.as-h-58{height:58%}
.as-w-59{width:59%}.as-h-59{height:59%}
.as-w-60{width:60%}.as-h-60{height:60%}
.as-w-61{width:61%}.as-h-61{height:61%}
.as-w-62{width:62%}.as-h-62{height:62%}
.as-w-63{width:63%}.as-h-63{height:63%}
.as-w-64{width:64%}.as-h-64{height:64%}
.as-w-65{width:65%}.as-h-65{height:65%}
.as-w-66{width:66%}.as-h-66{height:66%}
.as-w-67{width:67%}.as-h-67{height:67%}
.as-w-68{width:68%}.as-h-68{height:68%}
.as-w-69{width:69%}.as-h-69{height:69%}
.as-w-70{width:70%}.as-h-70{height:70%}
.as-w-71{width:71%}.as-h-71{height:71%}
.as-w-72{width:72%}.as-h-72{height:72%}
.as-w-73{width:73%}.as-h-73{height:73%}
.as-w-74{width:74%}.as-h-74{height:74%}
.as-w-75{width:75%}.as-h-75{height:75%}
.as-w-76{width:76%}.as-h-76{height:76%}
.as-w-77{width:77%}.as-h-77{height:77%}
.as-w-78{width:78%}.as-h-78{height:78%}
.as-w-79{width:79%}.as-h-79{height:79%}
.as-w-80{width:80%}.as-h-80{height:80%}
.as-w-81{width:81%}.as-h-81{height:81%}
.as-w-82{width:82%}.as-h-82{height:82%}
.as-w-83{width:83%}.as-h-83{height:83%}
.as-w-84{width:84%}.as-h-84{height:84%}
.as-w-85{width:85%}.as-h-85{height:85%}
.as-w-86{width:86%}.as-h-86{height:86%}
.as-w-87{width:87%}.as-h-87{height:87%}
.as-w-88{width:88%}.as-h-88{height:88%}
.as-w-89{width:89%}.as-h-89{height:89%}
.as-w-90{width:90%}.as-h-90{height:90%}
.as-w-91{width:91%}.as-h-91{height:91%}
.as-w-92{width:92%}.as-h-92{height:92%}
.as-w-93{width:93%}.as-h-93{height:93%}
.as-w-94{width:94%}.as-h-94{height:94%}
.as-w-95{width:95%}.as-h-95{height:95%}
.as-w-96{width:96%}.as-h-96{height:96%}
.as-w-97{width:97%}.as-h-97{height:97%}
.as-w-98{width:98%}.as-h-98{height:98%}
.as-w-99{width:99%}.as-h-99{height:99%}
.as-w-100{width:100%}.as-h-100{height:100%}

/* ==========================================================================
   Legacy markup bridge. Views that have not been redesigned yet still carry bare elements and a few old classes.
   Screen owners: delete rules here as the views move to as- classes.
   ========================================================================== */
.sr-only,.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
:where(main) h2{font:var(--weight-medium) var(--text-lg)/1.3 var(--font-display);letter-spacing:-.02em;margin:0 0 12px}
:where(main) h3{font:var(--weight-medium) var(--text-md)/1.35 var(--font-sans);letter-spacing:0;margin:0 0 8px}
:where(main) p{margin:0}
:where(.as-app__content,.as-card--pad,.as-card__body,.as-auth-card)>*+*{margin-top:16px}
:where(.as-app__content)>.as-section-title,:where(.as-app__content)>h2{margin-top:32px}
:where(main) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),select,textarea):not(.as-input){width:100%;height:var(--control-h-md);padding:0 12px;font:var(--weight-regular) var(--text-sm)/1.4 var(--font-sans);color:var(--text-strong);background:var(--surface-sunken);border:1px solid var(--border-input);border-radius:var(--radius-md);box-shadow:var(--shadow-inset)}
:where(main) :where(input,select,textarea):not(.as-input):focus{outline:none;border-color:var(--primary);box-shadow:var(--focus-ring)}
:where(main) :where(input,select,textarea)[aria-invalid="true"]{border-color:var(--danger)}
:where(main) input[type="checkbox"],:where(main) input[type="radio"]{width:16px;height:16px;accent-color:var(--primary);vertical-align:-3px}
:where(main) label{display:block;font:var(--type-label);color:var(--text-strong);margin-bottom:6px}
:where(main) label:has(input[type="checkbox"]),:where(main) label:has(input[type="radio"]){display:flex;gap:10px;font-weight:var(--weight-regular);color:var(--text)}
:where(main) form{margin:0}
.as-card--pad>form+form{margin-top:16px}
.as-card form[data-confirm]{margin-top:0}
.as-flash p+p{margin-top:6px}
.as-card .as-empty{padding:32px 16px}

/* Small patches */
.as-stat__dot--spam{background:var(--spam)}
.as-stat__dot--clean{background:var(--clean)}
.as-stat__dot--primary{background:var(--primary)}
.as-empty h2,.as-empty h3{font:var(--weight-medium) var(--text-md)/1.3 var(--font-sans);letter-spacing:0;margin:0}
.as-empty p{margin:0}
@media (max-width:640px){.as-bars__tip{display:none}.as-bars__col:hover .as-bars__tip,.as-bars__col:focus-visible .as-bars__tip{display:block}}

/* Scrollable table wrapper is a keyboard stop (see partials/tableOpen.ejs) */
.as-table-wrap:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* Windows high contrast: box-shadow rings are removed, so give every focus style a real outline */
@media (forced-colors:active){
  .as-btn:focus-visible,.as-input:focus-visible,.as-side__item:focus-visible,.as-side__search:focus-visible,.as-side__usage:focus-visible,.dx-toc a:focus-visible,.dx-wrap:focus-visible,.as-cmdk__item:focus-visible,.as-search-hint:focus-visible,.as-table__sort:focus-visible,.as-disclosure summary:focus-visible,.as-table-wrap:focus-visible,.as-input:focus,.as-cmdk__item:focus{outline:2px solid Highlight;outline-offset:2px}
}

/* ==========================================================================
   UX pass shared pieces (docs/design/IMPLEMENTATION.md "UX pass partials"). No inline styles: everything is a class.
   ========================================================================== */

/* Score bar (partials/scoreBar.ejs): fill only, no threshold marker */
.as-scorebar{position:relative;height:6px;border-radius:var(--radius-pill);background:rgba(255,255,255,.08);overflow:hidden}
.as-scorebar__fill{position:absolute;inset:0 auto 0 0;border-radius:inherit;background:var(--text-muted)}
.as-scorebar--spam .as-scorebar__fill{background:var(--spam)}
.as-scorebar--clean .as-scorebar__fill{background:var(--clean)}

/* Segmented filter (partials/segmented.ejs): links or submit buttons; the selected one is lighter */
.as-seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;border:1px solid var(--border);border-radius:var(--radius-md);background:rgba(255,255,255,.02);max-width:100%}
.as-seg__item{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;border-radius:calc(var(--radius-md) - 2px);background:transparent;color:var(--text-muted);font:var(--weight-medium) var(--text-xs)/1 var(--font-sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background-color var(--dur-fast),color var(--dur-fast)}
.as-seg__item:hover{color:var(--text-strong);background:rgba(255,255,255,.04)}
.as-seg__item[aria-pressed="true"],.as-seg__item[aria-current="true"]{background:rgba(255,255,255,.08);color:var(--text-strong)}
.as-seg__item:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.as-seg__count{font-family:var(--font-mono);font-size:var(--text-2xs);color:var(--text-subtle);font-variant-numeric:tabular-nums}

/* Settings rows (Account): title and one-line description on the left (240px), controls on the right; stacks on a phone */
.as-settings-row{display:flex;flex-wrap:wrap;gap:16px 32px;padding:24px 0;border-top:1px solid var(--border-subtle)}
.as-settings-row:first-child{border-top:0;padding-top:0}
.as-settings-row:last-child{padding-bottom:0}
.as-settings-row__aside{flex:1 1 240px;min-width:0}
.as-settings-row__aside h2,.as-settings-row__aside h3{font:var(--weight-medium) var(--text-md)/1.35 var(--font-sans);letter-spacing:0;margin:0}
.as-settings-row__aside p{margin-top:4px;font-size:var(--text-sm);color:var(--text-muted)}
.as-settings-row__main{flex:999 1 460px;min-width:0;display:flex;flex-direction:column;gap:16px}
:where(.as-settings-row__main)>*+*{margin-top:0}

/* Site form (partials/siteFields.ejs): fieldset reset and the two platform radio cards */
.as-fieldset{border:0;margin:0;padding:0;min-width:0}
.as-fieldset>legend{padding:0;margin-bottom:10px}
.as-platform__cards{display:flex;flex-wrap:wrap;gap:10px}
.as-platform__cards>.as-radio-card{flex:1 1 260px;min-width:0;margin:0}
.as-platform__cards--stacked{flex-direction:column}
.as-platform__cards--stacked>.as-radio-card{flex:none}
.as-platform .as-help{margin-top:10px}

/* Form dialog (partials/addSiteDialog.ejs). The native modal sits in the top layer, above the sidebar; z-index is for
   browsers that fall back to a positioned dialog. */
dialog.as-dialog--form{z-index:100;width:min(32rem,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto}
.as-dialog__form{display:flex;flex-direction:column;gap:16px}
:where(.as-dialog__form)>*+*{margin-top:0}
.as-dialog__form h2{margin:0}
.as-dialog__form>p{margin:-10px 0 0}
.as-dialog__form .as-dialog__actions{margin-top:6px}