/* DOT UI v1.0 — requires ../tokens.css before this file. */
*{box-sizing:border-box}
body{margin:0;background:var(--dot-bg);color:var(--dot-text);font-family:var(--dot-font-ui)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.dot-ui{max-width:1180px;margin:0 auto;padding:28px 22px 96px}
.dot-ui h1,.dot-ui h2,.dot-ui h3{letter-spacing:-.04em;line-height:1.15}
.dot-ui h1{font-size:clamp(32px,5vw,52px);margin:18px 0 14px}
.dot-ui h2{font-size:24px;margin:0 0 18px}
.dot-ui p{line-height:1.5}
.dot-ui .muted{color:var(--dot-text-muted)}
.dot-ui .kicker{font-size:11px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--dot-text-muted)}
.dot-ui .top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:22px;border-bottom:1px solid var(--dot-border)}
.dot-ui .top img{width:109px;display:block}
.dot-ui .hero{padding:48px 0 30px;display:flex;justify-content:space-between;align-items:end;gap:24px}
.dot-ui .hero p{max-width:650px;color:var(--dot-text-muted)}
.dot-ui .section{margin-top:48px}
.dot-ui .grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dot-ui .stack{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.dot-card{background:var(--dot-surface);border:1px solid var(--dot-border);border-radius:var(--dot-radius-card);padding:24px;transition:border-color var(--dot-motion-fast),transform var(--dot-motion-fast)}
.dot-card.interactive:hover{border-color:var(--dot-control-border);transform:translateY(-1px)}
.dot-card h3{font-size:17px;margin:0 0 8px}
.dot-btn{min-height:42px;border-radius:var(--dot-radius-control);border:1px solid var(--dot-control-border);background:var(--dot-surface);color:var(--dot-text);padding:10px 16px;font-size:14px;font-weight:650;line-height:1.25;transition:background var(--dot-motion-fast),border-color var(--dot-motion-fast),transform var(--dot-motion-fast)}
.dot-btn:hover{background:var(--dot-accent-tint);border-color:var(--dot-text-muted)}
.dot-btn:active{transform:translateY(1px)}
.dot-btn.primary{background:var(--dot-red);border-color:var(--dot-red);color:#000}
.dot-btn.primary:hover{background:var(--dot-accent-hover);border-color:var(--dot-accent-hover)}
.dot-btn.quiet{background:transparent;border-color:transparent}
.dot-btn.quiet:hover{background:var(--dot-accent-tint)}
.dot-btn:disabled{cursor:not-allowed;opacity:.53;transform:none}
.dot-ui :is(button,input,select,textarea,a,[role=tab]):focus-visible,.dot-dialog :is(button,input):focus-visible{outline:2px solid var(--dot-text);outline-offset:3px}
.dot-field-group{display:grid;gap:7px;margin-bottom:16px}
.dot-field-group label{font-weight:650;font-size:13px}
.dot-field-group .hint{font-size:12px;color:var(--dot-text-muted)}
.dot-input,.dot-select,.dot-textarea{width:100%;border:1px solid var(--dot-control-border);border-radius:var(--dot-radius-control);background:var(--dot-surface);color:var(--dot-text);padding:11px 13px;min-height:43px}
.dot-textarea{min-height:96px;resize:vertical}
.dot-input::placeholder,.dot-textarea::placeholder{color:var(--dot-text-muted)}
.dot-input[aria-invalid=true]{border-color:#b72b2b;box-shadow:0 0 0 1px #b72b2b}
.dot-error{color:#9d2424;font-size:12px;margin:0}
[data-dot-theme=dark] .dot-error{color:#ff9999}
.dot-tabs{display:flex;gap:24px;border-bottom:1px solid var(--dot-border);overflow-x:auto}
.dot-tab{white-space:nowrap;padding:12px 2px;border:0;border-bottom:2px solid transparent;background:none;color:var(--dot-text-muted);font-weight:650;font-size:14px}
.dot-tab:hover{color:var(--dot-text)}
.dot-tab[aria-selected=true]{color:var(--dot-text);border-bottom-color:var(--dot-red)}
.dot-panel{padding:18px 0 4px;min-height:65px}
.dot-badge{display:inline-flex;align-items:center;gap:7px;border-radius:100px;background:var(--dot-accent-tint);padding:7px 10px;font-size:12px;font-weight:650;color:var(--dot-text)}
.dot-badge:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dot-red)}
.dot-badge.neutral{background:var(--dot-bg)}.dot-badge.neutral:before{background:var(--dot-control-border)}
.dot-badge.success{background:#e9f5ee;color:#165536}.dot-badge.success:before{background:#24794b}
[data-dot-theme=dark] .dot-badge.success{background:#1c382b;color:#b9e9ca}
.dot-table-wrap{overflow-x:auto;border:1px solid var(--dot-border);border-radius:var(--dot-radius-card);background:var(--dot-surface)}
.dot-table{width:100%;border-collapse:collapse;text-align:left;min-width:550px}
.dot-table th,.dot-table td{padding:15px 18px;border-bottom:1px solid var(--dot-border);font-size:13px}
.dot-table tr:last-child td{border-bottom:0}
.dot-table th{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--dot-text-muted)}
.dot-table td:last-child{text-align:right}
.dot-table tbody tr:hover{background:var(--dot-accent-tint)}
.dot-progress{display:flex;align-items:center;gap:20px}
.dot-progress-mark{position:relative;width:90px;height:80px;flex:none;display:grid;place-items:center}
.dot-progress-mark img{position:absolute;width:90px;height:77px;object-fit:fill}
.dot-progress-mark .base{opacity:.17;filter:grayscale(1)}
.dot-progress-mark .fill{clip-path:inset(var(--unfilled,100%) 0 0 0);transition:clip-path 260ms ease}
.dot-progress-mark strong{z-index:1;font-size:15px;font-variant-numeric:tabular-nums;letter-spacing:-.05em}
.dot-progress.indeterminate .fill{animation:dot-sweep 1.6s ease-in-out infinite}
.dot-progress.indeterminate strong{display:none}
@keyframes dot-sweep{0%,100%{clip-path:inset(100% 0 0)}50%{clip-path:inset(0 0 0)}}
.dot-toast{position:fixed;z-index:20;right:18px;bottom:18px;max-width:min(380px,calc(100vw - 36px));background:var(--dot-text);color:var(--dot-surface);padding:13px 18px;border-radius:var(--dot-radius-control);box-shadow:0 14px 45px #0003;font-size:14px}
.dot-toast[hidden]{display:none}
.dot-dialog{max-width:min(460px,calc(100vw - 32px));width:100%;border:1px solid var(--dot-border);border-radius:var(--dot-radius-card);padding:25px;background:var(--dot-surface);color:var(--dot-text);box-shadow:0 28px 80px #0004}
.dot-dialog::backdrop{background:#111a}
.dot-dialog h2{margin:0 0 8px;font-size:22px}
.dot-dialog .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}
@media(max-width:740px){.dot-ui .hero{display:block}.dot-ui .grid{grid-template-columns:1fr}.dot-ui .top img{width:94px}.dot-card{padding:20px}.dot-ui .section{margin-top:37px}}
@media(prefers-reduced-motion:reduce){.dot-card,.dot-btn,.dot-progress-mark .fill{transition:none}.dot-progress.indeterminate .fill{animation:none;clip-path:inset(0 0 0)}}

.dot-inline-feedback{font-size:13px;line-height:1.5;color:var(--dot-text-muted);margin-top:9px}.dot-inline-feedback[hidden]{display:none!important}