@import url("/app/ds/css/fonts.css");
@import url("/app/ds/css/tokens.css");
*{box-sizing:border-box}
body{margin:0;background:var(--pds-bg);color:var(--pds-text);font:400 var(--pds-text-md)/var(--pds-leading-normal) var(--pds-font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--pds-accent-text)}
h2{font-family:var(--pds-font-serif);font-weight:500;letter-spacing:var(--pds-tracking-heading)}
header{background:var(--pds-bg);border-bottom:1px solid var(--pds-rule);padding:var(--pds-space-3) var(--pds-layout-gutter)}
header .in{max-width:960px;margin:0 auto;display:flex;align-items:center;gap:var(--pds-space-3);flex-wrap:wrap}
header .brand{height:22px;width:auto;margin-right:auto}
header select{width:auto;max-width:60vw}
header button{background:transparent;color:var(--pds-text);border:1px solid var(--pds-rule);border-radius:var(--pds-radius-sm);padding:6px 12px;font:inherit;cursor:pointer}
main{max-width:960px;margin:0 auto;padding:var(--pds-space-5) var(--pds-layout-gutter) var(--pds-space-7)}
nav.tabs{display:flex;gap:var(--pds-space-5);margin:0 0 var(--pds-space-5);border-bottom:1px solid var(--pds-rule);flex-wrap:wrap}
nav.tabs button{background:transparent;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:var(--pds-space-2) 0;color:var(--pds-text-soft);font:500 var(--pds-text-md) var(--pds-font-sans);cursor:pointer}
nav.tabs button[aria-pressed=true]{color:var(--pds-text);border-bottom-color:var(--pds-accent)}
.card{background:var(--pds-surface);border:1px solid var(--pds-rule);border-radius:var(--pds-radius-sm);padding:var(--pds-space-5);margin:0 0 var(--pds-space-4)}
.card h2{margin:0 0 var(--pds-space-1);font-size:var(--pds-text-xl)}
.hint{color:var(--pds-text-faint);font-size:var(--pds-text-sm);margin:0 0 var(--pds-space-3)}
label{display:block;font-weight:500;font-size:var(--pds-text-xs);color:var(--pds-text-soft);margin:var(--pds-space-3) 0 var(--pds-space-1)}
input,select,textarea{width:100%;padding:8px 10px;border:1px solid var(--pds-rule);border-radius:var(--pds-radius-sm);background:var(--pds-c-paper-raised);color:var(--pds-text);font:inherit}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:2px solid var(--pds-focus);outline-offset:2px}
input[type=color]{padding:2px;height:36px;width:64px}
input[type=checkbox]{width:auto;accent-color:var(--pds-solid)}
.row{display:flex;gap:var(--pds-space-2);align-items:center;flex-wrap:wrap}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--pds-space-3)}
button.primary,button.ghost,button.danger{border-radius:var(--pds-radius-sm);padding:8px 14px;font:500 var(--pds-text-md) var(--pds-font-sans);cursor:pointer;border:1px solid transparent;transition:background var(--pds-motion-fast) var(--pds-motion-ease)}
button.primary{background:var(--pds-solid);color:var(--pds-on-solid)}
button.primary:hover{background:var(--pds-accent)}
button.ghost{background:transparent;border-color:var(--pds-rule);color:var(--pds-text)}
button.ghost:hover{border-color:var(--pds-rule-strong)}
button.danger{background:transparent;border-color:var(--pds-danger);color:var(--pds-danger)}
button:disabled{opacity:.5;cursor:default}
table{width:100%;border-collapse:collapse}
td,th{text-align:left;padding:var(--pds-space-2) 6px;border-bottom:1px solid var(--pds-rule);vertical-align:middle}
th{font:500 var(--pds-text-2xs)/1 var(--pds-font-mono);text-transform:uppercase;letter-spacing:var(--pds-tracking-label);color:var(--pds-text-faint)}
.auth{max-width:380px;margin:var(--pds-space-8) auto}
.wordmark{height:26px;width:auto;display:block;margin:0 0 var(--pds-space-5)}
.msg{font-size:var(--pds-text-sm);margin:var(--pds-space-2) 0 0}
.msg.err{color:var(--pds-danger)}
.pill{display:inline-block;background:var(--pds-sunken);border-radius:var(--pds-radius-full);padding:2px 8px;font:500 var(--pds-text-2xs) var(--pds-font-mono);text-transform:uppercase;letter-spacing:var(--pds-tracking-label)}
.copy{font-family:var(--pds-font-mono);font-size:var(--pds-text-xs)}
.logo{max-height:48px;max-width:180px;border:1px solid var(--pds-rule);border-radius:var(--pds-radius-sm);padding:4px;background:#fff}
@media (max-width:600px){td,th{padding:6px 4px}.hide-sm{display:none}}
.mt{margin-top:var(--pds-space-3)}
.grow2{flex:2;min-width:200px}
.grow1{flex:1;min-width:120px}
label>input,label>select{margin-top:var(--pds-space-1);font-weight:400}