/* Control styling only: retain page layout, content, artwork and canvas geometry. */
:root{
 --ui-radius:9px;
 --ui-edge:#d4dfec;
 --ui-hover:#eff5fc;
 --ui-focus:#5788bf;
 --ui-primary:#accff7;
 --ui-primary-hover:#bedbfc;
 --ui-primary-ink:#193b60;
 --ui-shadow:0 1px 2px #17304d0a;
 --ui-menu-shadow:0 12px 32px #132c491c;
}
html[data-theme=dark]{
 --ui-edge:#3b4d65;
 --ui-hover:#26364b;
 --ui-focus:#aacffa;
 --ui-primary:#a8cefa;
 --ui-primary-hover:#c2ddfc;
 --ui-primary-ink:#173958;
 --ui-shadow:0 1px 2px #0002;
 --ui-menu-shadow:0 12px 32px #0005;
}
html :is(button,summary,a,input,textarea,select){-webkit-tap-highlight-color:transparent}
html :is(.practiceEntry,.accountEntry,.accountSecondary,.workspaceTools>button,.canvasViewTools button,.drawToolbar .btn,.comparisonBar button,#randomTooth,.toolPicker>summary,.socialTop>button,.galleryFilters button,.accountDialog form button:not(.passwordToggle):not(.avatarChoice)){
 border-radius:var(--ui-radius);
 transition:background-color 150ms ease,border-color 150ms ease,box-shadow 150ms ease,color 150ms ease,transform 100ms ease;
}
html :is(.accountEntry,.accountSecondary,.workspaceTools>button,.canvasViewTools button,.drawToolbar .btn,.comparisonBar button,#randomTooth,.toolPicker>summary){
 border-color:var(--ui-edge);
 color:var(--dd-text);
 box-shadow:var(--ui-shadow);
 font-weight:500;
}
html :is(.accountEntry,.accountSecondary,.workspaceTools>button,.canvasViewTools button,.drawToolbar .btn,.comparisonBar button,#randomTooth,.toolPicker>summary):hover:not(:disabled){
 background:var(--ui-hover);
 border-color:var(--ui-focus);
}
html :is(.practiceEntry,.accountDialog form button[type=submit],#exportDrawing){
 background:var(--ui-primary);
 color:var(--ui-primary-ink);
 border:1px solid #94b9e5;
 box-shadow:0 1px 2px #193b6010,inset 0 1px 0 #ffffff30;
 font-weight:600;
}
html :is(.practiceEntry,.accountDialog form button[type=submit],#exportDrawing):hover:not(:disabled){
 background:var(--ui-primary-hover);
 border-color:#7da5d4;
 transform:none;
}
html .welcomeContent .weeklyEntry{
 background:var(--dd-surface);color:var(--dd-text);border-color:var(--ui-edge);box-shadow:var(--ui-shadow)
}
html .welcomeContent .weeklyEntry:hover{background:var(--ui-hover);border-color:var(--ui-focus)}
html :is(.practiceEntry,.accountEntry,.accountSecondary,.workspaceTools>button,.canvasViewTools button,#randomTooth,.socialTop>button):active:not(:disabled){
 transform:translateY(1px);box-shadow:none
}
html :is(button,a,summary,input,select,textarea):focus-visible{
 outline:2px solid var(--ui-focus);outline-offset:3px
}
html button:disabled{opacity:.48;cursor:default;transform:none}
html button[aria-busy=true]{cursor:wait}
html .socialTop>button{font-weight:500}
html .socialTop>button:hover:not(:disabled){background:var(--ui-hover)}
html .socialTop #themeToggle{border-color:var(--ui-edge)}
html .socialTop #topProfile{box-shadow:var(--ui-shadow);border-color:var(--ui-edge)}
html #notificationBell svg{color:var(--dd-text)}
html .pickerRow{border-color:var(--ui-edge)}
html .pickerTrigger{font-weight:500;border-radius:7px;transition:background-color 150ms ease,color 150ms ease}
html .pickerTrigger:hover,html .pickerTrigger[aria-expanded=true]{background:var(--ui-hover);color:var(--dd-text)}
html .pickerChevron{transition:transform 150ms ease;background:transparent}
html .pickerTrigger[aria-expanded=true] .pickerChevron{transform:rotate(180deg);background:transparent;color:var(--dd-text)}
html .pickerMenu,html .toolPicker>.toolRail{border-color:var(--ui-edge);border-radius:12px;box-shadow:var(--ui-menu-shadow)}
html .pickerOption{border-radius:7px;position:relative;padding-right:30px;font-weight:400}
html .pickerOption[aria-selected=true]{background:var(--dd-selected);color:var(--dd-text);font-weight:600}
html .pickerOption[aria-selected=true]::after{content:'✓';position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:12px}
html .pickerOption:hover,html .pickerOption:focus-visible{background:var(--ui-hover);color:var(--dd-text)}
html .toolPicker .toolRail button{border-radius:8px}
html .toolPicker .toolRail button.active{box-shadow:inset 0 0 0 1px var(--ui-edge);color:var(--dd-text)}
html .workspaceModes button{font-weight:500}
html .workspaceModes button.active{box-shadow:inset 0 0 0 1px var(--ui-edge);color:var(--dd-text)}
html .workspaceModes button:hover{background:var(--ui-hover)}
html .brushSettings{border-color:var(--ui-edge)}
html .brushSettings summary{border-radius:8px;transition:background-color 150ms ease}
html .brushSettings summary:hover{background:var(--ui-hover)}
html input[type=range],html input[type=checkbox]{accent-color:#6b9ed7}
html[data-theme=dark] input[type=range],html[data-theme=dark] input[type=checkbox]{accent-color:#a8cefa}
html .accountDialog input:not([type=checkbox]):not([type=color]),html .accountDialog textarea,html .accountDialog select,html .artComments textarea{
 border-color:var(--ui-edge);border-radius:8px;box-shadow:inset 0 1px 2px #16334c04;caret-color:var(--dd-text)
}
html .accountDialog input:hover,html .accountDialog textarea:hover,html .artComments textarea:hover{border-color:var(--dd-muted)}
html .accountDialog input:focus,html .accountDialog textarea:focus,html .artComments textarea:focus{border-color:var(--ui-focus);background:var(--dd-surface)}
html .accountDialog input::placeholder,html .accountDialog textarea::placeholder,html .artComments textarea::placeholder{color:var(--dd-muted);opacity:.8}
html .accountDialog,html .galleryImageDialog{border-color:var(--ui-edge);box-shadow:0 24px 70px #07122138}
html .accountClose{color:var(--dd-muted);transition:background-color 150ms ease,color 150ms ease}
html .accountClose:hover{background:var(--ui-hover);color:var(--dd-text)}
html .accountDialog .passwordToggle{border:0;background:transparent;color:var(--dd-muted);box-shadow:none}
html .accountDialog .passwordToggle:hover{color:var(--dd-text);background:var(--ui-hover)}
html .accountDialog #deleteAccountSubmit{background:var(--dd-surface);color:#b13e4c;border:1px solid #c6767f;box-shadow:none}
html[data-theme=dark] .accountDialog #deleteAccountSubmit{color:#f2a6b0;border-color:#a45d68}
html .galleryFilters{border-color:var(--ui-edge)}
html .galleryFilters button{font-weight:500}
html .galleryFilters button:hover{color:var(--dd-text)}
html .galleryFilters button[aria-pressed=true]{box-shadow:0 1px 4px #102a4412}
html .galleryCard{border-color:var(--ui-edge);box-shadow:var(--ui-shadow);transition:border-color 160ms ease,box-shadow 160ms ease}
html .galleryCard:hover{border-color:var(--ui-focus);box-shadow:0 4px 16px #17304d0d}
html .galleryCardActions .bookmarkButton[aria-pressed=true]{background:var(--dd-selected);border-color:var(--ui-focus);color:var(--dd-text)}
html .galleryCardActions .pixelVote{border-radius:8px}
html .galleryDelete{border-radius:5px}
html .galleryDelete:hover{color:#bc4b5b}
html[data-theme=dark] .galleryDelete:hover{color:#f2a6b0}
html .notificationItem{border-color:var(--ui-edge);transition:background-color 150ms ease,border-color 150ms ease}
html .notificationItem:hover{background:var(--ui-hover)}
html .leaderboardTable tbody tr:hover{background:var(--dd-soft)}
html .studio,html .lessonCard{box-shadow:0 2px 10px #142c4505}
html .studioHead h2,html .accountDialog h2,html .galleryCardInfo h2{font-weight:600}
html .canvasViewTools output{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:no-preference){
 .pickerMenu:not([hidden]),.toolPicker[open]>.toolRail{animation:controlReveal 140ms ease-out}
 dialog[open]{animation:controlReveal 150ms ease-out}
 @keyframes controlReveal{from{opacity:0}to{opacity:1}}
}
@media(prefers-reduced-motion:reduce){
 html :is(button,summary,a,input,textarea,select,.galleryCard,.pickerChevron){transition:none!important}
 html :is(.practiceEntry,.accountEntry,.accountSecondary,.workspaceTools>button,.canvasViewTools button,#randomTooth,.socialTop>button):active:not(:disabled){transform:none}
}

.emailVerificationPanel{margin:18px 0;padding:16px;border:1px solid var(--line,#d6e1ef);border-radius:14px;background:var(--surface,#f3f7fd)}
.emailVerificationPanel h3{font-size:15px;margin:0 0 8px}
.emailVerificationPanel p{font-size:13px;line-height:1.55;margin:8px 0;overflow-wrap:anywhere}
html[data-theme="dark"] .emailVerificationPanel{background:#202c40;border-color:#3a4b63;color:#e6eefb}
.emailVerificationPanel [hidden]{display:none!important}

.accountDialog .passwordMatchHint{display:block;color:#b4233d;font-size:13px;margin-top:6px}
.accountDialog .passwordMatchHint[hidden]{display:none}
.accountDialog #confirmPassword[aria-invalid="true"]{border-color:#b4233d}
html[data-theme=dark] .accountDialog .passwordMatchHint{color:#ffb0bb}
html[data-theme=dark] .accountDialog #confirmPassword[aria-invalid="true"]{border-color:#ffb0bb}

/* Registration agreement: readable in both themes, with a native keyboard-accessible checkbox. */
html .accountDialog .registrationAgreement{display:flex;align-items:flex-start;gap:10px;font-size:13px;line-height:1.6;color:var(--dd-text);margin:12px 0;}
html .accountDialog .registrationAgreement input[type=checkbox]{width:18px;height:18px;min-width:18px;flex:0 0 18px;margin:3px 0 0;padding:0;accent-color:#4b78b5;}
html .accountDialog .registrationAgreement a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
html .accountDialog .registrationAgreement a:hover{opacity:.8;}
html .accountDialog .registrationAgreement input:focus-visible{outline:2px solid var(--ui-focus);outline-offset:3px;}