/* Product UX v2: tokens and document foundations. */
:root{--page-width:1280px;--control-height:44px;--icon-size:18px;--space-1:8px;--space-2:16px;--space-3:24px;--space-4:32px;--card-ratio:16/9;--header-layer:30;--nav-layer:40;--safe-bottom:env(safe-area-inset-bottom,0px);--body-leading:1.65;--title-leading:1.4;--brand:#783c8a;--brand-hover:#673376;--control-radius:10px;--brand-soft:#f2eaf5;--green:var(--brand);--gold:var(--brand);--paper:#f6f7f9;--white:#fff;--ink:#24242a;--muted:#73747e;--line:#e7e7ed;--success:#247747;--danger:#b63238;--radius:12px;--serif:inherit;--shadow:0 4px 20px #25202e08;--space:8px}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.65 'PingFang SC','Microsoft YaHei',sans-serif}a{color:inherit;text-decoration:none}a:hover{color:var(--brand)}button,input,textarea,select{font:inherit}button,a,input,textarea,select{touch-action:manipulation}button{cursor:pointer}img{display:block;max-width:100%;height:auto}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #ad78bc;outline-offset:3px}h1,h2,h3,p{overflow-wrap:anywhere}h1{font-size:30px;line-height:1.4}h2{font-size:22px;line-height:1.5}h3{font-size:17px;line-height:1.5}h1,h2,h3{margin:0 0 16px;font-weight:650}p{margin:0 0 16px}.wrap{width:min(var(--page-width),calc(100% - 64px));margin-inline:auto}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.muted,.small,.card-meta,time,.eyebrow{color:var(--muted)}.small{font-size:13px}.eyebrow{font-size:12px;letter-spacing:1px}.skip-link{position:absolute;top:-100px;z-index:100;background:white;padding:12px}.skip-link:focus{top:0}main{min-height:65vh;padding-bottom:48px}form{margin:0}label{display:block}input:not([type=checkbox]):not([type=hidden]),textarea,select{max-width:100%;min-height:var(--control-height);border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:#fff;color:var(--ink)}textarea{width:100%;resize:vertical}input[type=checkbox]{accent-color:var(--brand)}/* Shared action controls: retain brand, clarify hierarchy and interaction states. */
button,.button,.r2-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--control-height);max-width:100%;padding:11px 18px;border:1px solid transparent;border-radius:var(--control-radius);background:var(--brand);color:white;font-size:14px;font-weight:600;line-height:1.25;text-align:center;text-decoration:none;cursor:pointer;user-select:none;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .12s ease}
:is(button,.button,.r2-button):where(:not(:disabled):not([aria-disabled=true]):not([aria-busy=true])):hover{background:var(--brand-hover);color:white;filter:none;box-shadow:0 3px 8px #783c8a1a;text-decoration:none}
:is(button,.button,.r2-button):where(:not(:disabled):not([aria-disabled=true]):not([aria-busy=true])):active{transform:translateY(1px);box-shadow:none}
:is(button,.button,.r2-button)>svg{width:18px;height:18px;flex:none}
.quiet{background:var(--brand-soft);border-color:#e8ddec;color:var(--brand)}
:is(button,.button,.r2-button).quiet:where(:not(:disabled):not([aria-disabled=true]):not([aria-busy=true])):hover{background:#e8dced;border-color:#d9c7e0;color:var(--brand)}
.secondary{background:white;border-color:var(--line);color:var(--ink)}
:is(button,.button,.r2-button).secondary:where(:not(:disabled):not([aria-disabled=true]):not([aria-busy=true])):hover{background:#f7f4f9;border-color:#d8cce0;color:var(--brand)}
.danger{background:#fff5f4;border-color:#edc9c7;color:var(--danger)}
:is(button,.button,.r2-button).danger:where(:not(:disabled):not([aria-disabled=true]):not([aria-busy=true])):hover{background:#ffe8e6;border-color:#dcaaa6;color:var(--danger)}
:is(button,.button,.r2-button):is(:disabled,[aria-disabled=true]){background:#f0eef3;border-color:#e4dfe8;color:#8a8392;opacity:1;cursor:not-allowed;box-shadow:none;transform:none}
:is(button,.button,.r2-button)[aria-busy=true]{position:relative;padding-right:44px;cursor:progress}
:is(button,.button,.r2-button)[aria-busy=true]::after{content:'';position:absolute;right:16px;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:control-spin .75s linear infinite}
@keyframes control-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){button,.button,.r2-button{transition:none}:is(button,.button,.r2-button):active{transform:none}:is(button,.button,.r2-button)[aria-busy=true]::after{animation:none}}
.panel{background:white;border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:16px 0}table{border-collapse:collapse;width:100%}th,td{padding:12px;text-align:left;border-bottom:1px solid var(--line)}