/* Shared interface finish. Keep canvas rendering and drawing coordinates unchanged. */
html { scroll-padding-top: 84px; }
html body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
button, a, summary, input, textarea, select { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease; }
:where(button, a, summary, input, select, textarea):focus-visible { outline: 2px solid #5684bd; outline-offset: 3px; }
button:disabled { cursor: default; }
html body { padding-top: 72px; }
html .socialTop { height: 64px; padding: 0 clamp(16px,3vw,40px); gap: 6px; background: var(--dd-surface); }
html .socialTop > button { border-color: transparent; border-radius: 8px; background: transparent; font-size: 13px; font-weight: 500; min-height: 40px; padding: 9px 12px; }
html .socialTop > button:hover { background: var(--dd-soft); border-color: transparent; }
html .socialTop #topProfile { background: var(--dd-soft); border-color: var(--dd-line); padding: 6px 12px; }
html .socialTop .topBarBrand { gap: 14px; }
html .socialTop .topBarBrand .brand { font-size: 22px; letter-spacing: -.7px; }
html .socialTop .brandSubtitle { display: none; }
html .socialTop .homeButton { background: transparent; border-color: transparent; }
html .socialTop .topBarBrand .logo, html .socialTop .topBarBrand .logo svg { width: 34px; height: 34px; }
html .welcomeScreen { box-sizing: border-box; min-height: calc(100svh - 72px); background: var(--dd-bg); padding: 48px 24px 100px; }
html .welcomeContent { max-width: 490px; }
html .welcomeMark { width: 72px; height: 72px; margin-bottom: 24px; box-shadow: none; }
html .welcomeEyebrow { font-size: 11px; font-weight: 500; letter-spacing: .12em; margin-bottom: 12px; color: var(--dd-muted); }
html .welcomeContent h1 { font-size: clamp(48px,7vw,68px); font-weight: 650; letter-spacing: -3px; line-height: 1.08; margin: 0 0 20px; }
html .welcomeDescription { font-size: clamp(20px,3vw,25px); line-height: 1.4; font-weight: 450; letter-spacing: -.5px; margin: 0 0 12px; }
html .welcomePurpose { max-width: 360px; font-size: 15px; line-height: 1.7; margin: 0 auto 30px; color: var(--dd-muted); }
html .practiceEntry { border-radius: 10px; font-size: 15px; padding: 15px 20px; min-height: 50px; box-shadow: none; font-weight: 600; }
html .welcomeContent .practiceEntry { width: min(100%,340px); }
html .welcomeContent .weeklyEntry { margin-top: 10px; font-weight: 500; }
html .welcomeDiscord { border-color: transparent; background: transparent; font-size: 13px; font-weight: 500; bottom: 28px; padding: 10px; }
html .shell { max-width: 1600px; padding: 20px 28px 28px; }
html #studioScreen > .top { min-height: 0; padding: 0; margin: 0; border: 0; }
html .studio { padding: 24px; border-radius: 14px; }
html .studioHead { margin-bottom: 22px; }
html .studioHead h2 { font-size: 23px; font-weight: 600; letter-spacing: -.6px; }
html .studioHead .studioSubtitle { font-size: 13px; margin-top: 5px; }
html #randomTooth { font-size: 12px; min-height: 38px; border-radius: 8px; }
html .pickerRow { border-radius: 10px; }
html .pickerLabel { font-size: 10px; letter-spacing: .06em; }
html .pickerTrigger { font-size: 14px; min-height: 42px; }
html .pickerMenu { padding: 6px; border-radius: 11px; box-shadow: 0 10px 28px #10223d18; }
html .pickerOption { border-radius: 6px; min-height: 40px; font-size: 13px; }
html .workspaceModes { gap: 6px; padding: 16px 0; margin-bottom: 14px; }
html .workspaceModes button { font-size: 13px; min-height: 38px; border-radius: 8px; padding: 8px 13px; }
html .workspaceModes button.active { color: var(--dd-text); font-weight: 600; }
html .workspaceModes span { font-size: 12px; }
html .workspaceTools { padding-bottom: 12px; gap: 8px; }
html .workspaceTools > button { min-height: 40px; font-size: 12px; border-radius: 8px; color: var(--dd-text); }
html .workspaceTools > button:hover { background: var(--dd-soft); }
html .workspaceTools #clearDrawing { color: var(--dd-muted); }
html .toolPicker > summary { box-sizing: border-box; min-height: 40px; }
html .brushSettings { border-radius: 10px; }
html .brushSettings summary { padding: 12px 14px; font-size: 12px; }
html .brushSettings summary span { font-size: 11px; }
html .inkControls { padding: 14px; gap: 14px; }
html .inkControls label { font-size: 12px; }
html .artPresets { padding: 12px 14px; gap: 8px; }
html .artPresets button { border-radius: 6px; }
html .canvasStatus { padding: 12px 0; gap: 10px; }
html .canvasViewTools button { min-height: 32px; }
html .comparisonBar { padding-top: 14px; gap: 14px; }
html .foot { font-size: 11px; line-height: 1.6; max-width: 760px; margin: 20px auto 0; text-align: center; }
html .galleryScreen { max-width: 1240px; margin: 0 auto; padding: 24px 28px 64px; }
html .galleryNav { border-bottom: 1px solid var(--dd-line); padding-bottom: 18px; gap: 20px; }
html .galleryNav a { font-size: 13px; text-decoration: none; color: var(--dd-muted); }
html .galleryHero { padding: 38px 0 28px; gap: 24px; }
html .galleryHero h1 { font-size: clamp(30px,4vw,42px); font-weight: 600; letter-spacing: -1.2px; line-height: 1.2; margin: 8px 0 12px; }
html .galleryHero p { line-height: 1.6; }
html .galleryHero .accountEyebrow { letter-spacing: .08em; font-size: 10px; }
html .galleryRules { font-size: 12px; color: var(--dd-muted); }
html .galleryBar { padding: 16px 0; font-size: 13px; }
html .galleryGrid { gap: 24px; }
html .galleryCard { border-radius: 12px; box-shadow: none; overflow: hidden; border-color: var(--dd-line); }
html .galleryCardInfo { padding: 18px; }
html .galleryCardInfo h2 { font-size: 17px; font-weight: 600; line-height: 1.4; margin: 0 0 12px; letter-spacing: -.2px; }
html .galleryCardActions { gap: 10px; padding-top: 14px; }
html .communityByline { font-size: 12px; line-height: 1.5; }
html .accountDialog, html .galleryImageDialog { box-sizing: border-box; border: 1px solid var(--dd-line); border-radius: 16px; padding: 30px; box-shadow: 0 24px 80px #07122135; color: var(--dd-text); background: var(--dd-surface); max-height: calc(100dvh - 40px); }
html dialog::backdrop { background: #0d172c80; backdrop-filter: blur(3px); }
html .accountDialog h2 { font-size: 26px; line-height: 1.25; letter-spacing: -.7px; margin: 8px 32px 20px 0; }
html .accountEyebrow { font-weight: 500; letter-spacing: .08em; color: var(--dd-muted); }
html .accountDialog form label { font-size: 13px; line-height: 1.6; }
html .accountDialog input:not([type=checkbox]):not([type=color]), html .accountDialog textarea, html .accountDialog select, html .artComments textarea { border-radius: 8px; border: 1px solid var(--dd-line); background: var(--dd-soft); color: var(--dd-text); font-size: 14px; padding: 11px 12px; }
html .accountDialog .passwordField input { padding-right: 48px !important; }
html .accountDialog form button:not(.passwordToggle), html .accountSecondary { border-radius: 8px; }
html .accountFine { font-size: 12px; line-height: 1.7; color: var(--dd-muted); }
html .accountClose { border-radius: 8px; width: 34px; height: 34px; }
html .artComment { padding: 18px 0; border-color: var(--dd-line); }
html .artComment p { font-size: 14px; line-height: 1.7; }
html .leaderboardTable td, html .leaderboardTable th { padding: 14px 10px; border-color: var(--dd-line); }
@media (max-width: 900px) {
 html body, html body:not(.drawingScreen) { padding-top: 72px; }
 html .socialTop, html body:not(.drawingScreen) .socialTop { height: 64px; flex-wrap: nowrap; }
 html .socialTop .topBarBrand { flex-basis: auto; }
 html .socialTop .topBarBrand .brand > div:last-child { display: none; }
 html .socialTop .topBarBrand { gap: 4px; }
 html .shell { padding: 12px 16px 24px; }
}
@media (max-width: 600px) {
 html body, html body:not(.drawingScreen) { padding-top: 64px; }
 html .socialTop, html body:not(.drawingScreen) .socialTop { display: flex; height: 56px; gap: 2px; padding: 0 8px; }
 html .socialTop > button { font-size: 11px; padding: 8px; min-height: 38px; }
 html .socialTop .topBarBrand { width: auto; margin-right: auto; }
 html .socialTop .topBarBrand .brand { display: none; }
 html #notificationBell > span { display: none; }
 html .socialTop .homeButton { font-size: 20px; padding: 7px; min-width: 34px; }
 html .socialTop .headerAvatar { width: 22px; height: 22px; }
 html .welcomeScreen { min-height: calc(100svh - 64px); padding: 32px 24px 94px; }
 html .welcomeMark { width: 62px; height: 62px; margin-bottom: 20px; }
 html .welcomeContent h1 { letter-spacing: -2px; }
 html .welcomeDiscord { left: 16px; bottom: 20px; }
 html .shell { padding: 8px 8px 20px; }
 html .studio { padding: 14px; border-radius: 10px; }
 html .studioHead { margin-bottom: 16px; }
 html .studioHead h2 { font-size: 20px; }
 html .pickerTrigger { font-size: 12px; }
 html .workspaceModes button { padding: 8px 10px; font-size: 12px; }
 html .galleryScreen { padding: 16px 18px 40px; }
 html .galleryHero { align-items: flex-start; flex-direction: column; padding: 26px 0 20px; }
 html .galleryGrid { gap: 18px; }
 html .accountDialog, html .galleryImageDialog { padding: 24px 20px; max-width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 button, a, summary, input, textarea, select { transition: none; }
}

/* Compact theme switch, immediately after Leaderboard. */
html .socialTop > #themeToggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; min-height: 36px; flex: 0 0 36px; padding: 0; border: 1px solid var(--dd-line); border-radius: 7px; color: var(--dd-text); }
html #themeToggle svg { flex-shrink: 0; }
.galleryFilters{display:flex;gap:4px;padding:4px;background:var(--dd-soft);border:1px solid var(--dd-line);border-radius:10px}
.galleryFilters button{border:0;border-radius:7px;padding:9px 14px;background:transparent;color:var(--dd-muted);font:inherit;cursor:pointer}
.galleryFilters button[aria-pressed=true]{background:var(--dd-surface);color:var(--dd-text);box-shadow:0 1px 3px #0001}
.bookmarkButton[aria-pressed=true]{background:var(--dd-selected);color:var(--dd-text)}
.milestonePanel{margin:20px 0 26px;padding-bottom:18px;border-bottom:1px solid var(--dd-line)}
.milestonePanel h3{font-size:16px;margin-bottom:12px}
.milestoneList{display:grid;gap:8px}
.milestone{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--dd-line);border-radius:10px;color:var(--dd-muted);background:var(--dd-soft)}
.milestone.earned{color:var(--dd-text);background:var(--dd-selected)}
.milestoneIcon{font-size:25px;width:32px;text-align:center}
.milestone.earned .milestoneIcon{color:#ad7c29}
html[data-theme=dark] .milestone.earned .milestoneIcon{color:#f1ca7a}
.milestone strong{display:block;font-size:13px;font-weight:600}
.milestone small{display:block;font-size:11px;margin-top:3px}

.milestoneList[hidden]{display:none!important}
/* Compact profile badges; descriptions appear on hover or keyboard/touch focus. */
html .milestonePanel{margin:14px 0 20px;padding-bottom:14px}
html .milestonePanel h3{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin:0 0 6px;color:var(--dd-muted)}
html #milestoneList{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badgeRow{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.badgeRow[hidden]{display:none!important}
#remainingMilestones{flex-basis:100%;margin-top:4px}
html .miniBadge{position:relative;display:inline-grid;place-items:center;width:32px;height:32px;padding:5px;border:0;border-radius:7px;background:transparent;cursor:pointer;color:#497fac}
.miniBadge svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
html .miniBadge:hover,html .miniBadge:focus{background:var(--dd-soft)}
html .badge-five{color:#7187c2}html .badge-ten{color:#9371c6}html .badge-votes10{color:#cb6986}html .badge-votes50{color:#b28b36}
html[data-theme=dark] .badge-first{color:#91bff0}html[data-theme=dark] .badge-five{color:#a5b5ed}html[data-theme=dark] .badge-ten{color:#c5a2f0}html[data-theme=dark] .badge-votes10{color:#f09fbb}html[data-theme=dark] .badge-votes50{color:#edce81}
html .miniBadge.locked{color:var(--dd-muted)}
.badgeTooltip{display:none;position:absolute;left:0;bottom:calc(100% + 7px);width:190px;box-sizing:border-box;padding:9px 11px;border-radius:8px;border:1px solid var(--dd-line);background:var(--dd-surface);color:var(--dd-text);box-shadow:0 5px 18px #0002;font:400 12px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;text-align:left;z-index:10;pointer-events:none}
.miniBadge:hover .badgeTooltip,.miniBadge:focus .badgeTooltip{display:block}
html .badgeMore{border:0;background:transparent;color:var(--dd-muted);font:inherit;font-size:11px;padding:7px 4px;cursor:pointer;border-radius:5px}
html .badgeMore:hover{color:var(--dd-text);text-decoration:underline}
#milestoneStatus:empty{display:none}