/* Shared finishing layer. Colors keep the same roles as theme.css. */
:root {
  --motion-fast: 150ms;
  --motion-enter: 240ms;
  --motion-ease: cubic-bezier(.2,.7,.2,1);
  --surface-shadow: 0 10px 28px color-mix(in srgb,var(--theme-ink) 5%,transparent), 0 2px 5px color-mix(in srgb,var(--theme-ink) 3%,transparent);
  --control-shadow: 0 2px 4px color-mix(in srgb,var(--theme-ink) 5%,transparent);
}
html[data-theme="dark"] {
  --surface-shadow: 0 10px 28px #00000014, 0 2px 5px #0000000a;
  --control-shadow: 0 2px 4px #00000018;
}
html { scrollbar-gutter: stable; }
body { -webkit-font-smoothing: antialiased; }
::selection { color:var(--ink); background:var(--accent-soft); }
.site-header { box-shadow:0 4px 18px color-mix(in srgb,var(--theme-ink) 3%,transparent); }
.brand { flex-shrink:0; }
.brand img { box-shadow:var(--control-shadow); }
.button,.icon-button,.main-nav a,.file-tabs button,.subnav a,.avatar-choice {
  transition:background-color var(--motion-fast),border-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast) var(--motion-ease);
}
.button,.icon-button { box-shadow:var(--control-shadow); }
.button.primary { box-shadow:0 4px 10px color-mix(in srgb,var(--accent) 15%,transparent),inset 0 1px 0 #ffffff15; }
.button.primary .icon { transition:transform var(--motion-fast) var(--motion-ease); }
.button:not(:disabled):active,.icon-button:not(:disabled):active,.avatar-choice:active { transform:translateY(1px) scale(.985); }
.button:disabled,.icon-button:disabled { box-shadow:none; }
.button[aria-busy="true"],form[data-busy="true"] button[type="submit"] { cursor:progress; }
.main-nav a[aria-current="page"],.file-tabs button[aria-selected="true"],.subnav a[aria-current="page"] { box-shadow:inset 0 0 0 1px var(--accent),var(--control-shadow); }
.field input,.field select,.field textarea,.input,.code-input {
  transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast);
  box-shadow:inset 0 1px 2px color-mix(in srgb,var(--theme-ink) 3%,transparent);
}
.field input:hover,.field select:hover,.field textarea:hover,.input:hover { border-color:color-mix(in srgb,var(--accent) 65%,var(--line)); }
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible,.input:focus-visible,.code-input:focus-visible {
  border-color:var(--accent);
  outline-offset:2px;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent);
}
.auth-layout { max-width:540px; padding-top:clamp(32px,6vh,64px); }
.auth-card { box-shadow:var(--surface-shadow); }
.auth-card h1 { text-wrap:balance; }
.auth-card>p { max-width:42ch; }
.auth-card .field:last-of-type { margin-bottom:24px; }
.auth-card .auth-bottom { max-width:none; }
.step-line { align-items:center; padding:10px 12px; border-radius:10px; background:var(--raised); }
.step-line strong { color:var(--ink); }
.workspace { padding-top:40px; }
.page-heading h1 { letter-spacing:-.65px; }
.page-heading p { max-width:68ch; }
.eyebrow { display:block; font-weight:500; }
.panel { box-shadow:var(--surface-shadow); }
.panel-heading { align-items:center; }
.panel-heading h2 { line-height:1.35; }
.panel form>.field+.field { margin-top:20px; }
.welcome { padding:30px; }
.project-card { box-shadow:var(--control-shadow); transition:background-color 180ms,border-color 180ms,box-shadow 180ms,transform 180ms var(--motion-ease); }
.project-card>span:last-child .icon { transition:transform var(--motion-fast) var(--motion-ease); }
.empty-state { min-height:300px; padding-block:48px; }
.empty-state p { max-width:39ch; }
.empty-state .empty-icon { width:64px; height:64px; border-radius:21px; }
.empty-state .empty-icon .icon { width:25px; height:25px; flex-basis:25px; }
.code-input { display:block; caret-color:var(--accent); }
.editor-help { max-width:76ch; line-height:1.7; }
.avatar-choice { min-height:70px; font-size:11px; }
.profile-avatar { box-shadow:0 3px 8px color-mix(in srgb,var(--theme-ink) 7%,transparent); }
.official-profile .profile-avatar { margin-top:-14px; }
.profile-cover { min-height:150px; }
.profile-name { align-items:center; }
.profile-name .uid { letter-spacing:0; font-variant-numeric:tabular-nums; }
.profile-bio:empty { display:none; }
.badge { min-height:29px; line-height:1.3; }
.badge-list { align-items:center; }
.table-wrap { scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.data-table { font-variant-numeric:tabular-nums; }
.data-table th { padding-block:10px; color:var(--text); font-weight:500; }
.data-table td { padding-block:16px; }
.tag { line-height:1.4; }
.account-pagination { margin-top:18px; }
.account-pagination .button { min-width:104px; }
.generated-code { align-items:center; }
.catalog-item { padding:20px; }
.catalog-item h3 { line-height:1.4; }
.catalog-item p { max-width:58ch; line-height:1.65; }
.recovery-grid { grid-template-columns:1fr; }
.recovery-grid li { padding:13px 14px; text-align:center; font-size:13px; letter-spacing:.2px; }
.key-display { line-height:1.8; }
.select-control { position:relative; min-width:0; width:100%; }
.select-trigger { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:46px; width:100%; padding:11px 13px; border:1px solid var(--line); border-radius:12px; color:var(--ink); background:var(--surface); font:inherit; font-weight:400; line-height:1.6; text-align:left; box-shadow:inset 0 1px 2px color-mix(in srgb,var(--theme-ink) 3%,transparent); transition:border-color var(--motion-fast),box-shadow var(--motion-fast),background-color var(--motion-fast); }
.select-trigger:hover,.select-trigger[aria-expanded="true"] { border-color:var(--accent); background:var(--raised); }
.select-trigger:focus-visible { outline:2px solid var(--accent); outline-offset:2px; box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 9%,transparent); }
.select-trigger .icon { flex-shrink:0; width:17px; height:17px; transition:transform var(--motion-fast) var(--motion-ease); }
.select-trigger[aria-expanded="true"]>.icon:last-child { transform:rotate(180deg); }
.select-trigger:disabled { cursor:default; opacity:.55; }
.select-listbox { position:absolute; top:calc(100% + 7px); left:0; right:0; z-index:30; max-height:min(300px,45svh); margin:0; padding:6px; overflow:auto; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:0 10px 28px color-mix(in srgb,var(--theme-ink) 13%,transparent); list-style:none; scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.select-option { display:flex; align-items:center; justify-content:space-between; gap:10px; min-height:40px; width:100%; padding:9px 11px; border:0; border-radius:9px; color:var(--text); background:transparent; font:inherit; font-weight:400; line-height:1.5; text-align:left; cursor:pointer; }
.select-option:hover,.select-option:focus-visible { outline:none; color:var(--ink); background:var(--raised); }
.select-option[aria-selected="true"] { color:var(--ink); background:var(--accent-soft); font-weight:500; }
.select-option[aria-disabled="true"] { opacity:.5; cursor:default; }
dialog[open] .select-listbox { position:static; margin-top:7px; max-height:min(240px,35svh); }
.field-error { display:block; margin:0; color:var(--error); font-size:12px; font-weight:400; line-height:1.6; overflow-wrap:anywhere; }
.field-invalid input,.field-invalid textarea,.field-invalid .select-trigger,input.field-invalid,textarea.field-invalid,[aria-invalid="true"] { border-color:var(--error); }
.field-invalid input:focus-visible,.field-invalid textarea:focus-visible,.field-invalid .select-trigger:focus-visible { outline-color:var(--error); box-shadow:0 0 0 4px color-mix(in srgb,var(--error) 9%,transparent); }
.help-copy { padding:30px 32px; }
.help-copy h2 { margin-top:32px; }
.help-copy p { max-width:66ch; }
.site-footer a { display:inline-flex; align-items:center; min-height:32px; }
dialog { box-shadow:0 22px 70px #0b213b30; }
dialog::backdrop { backdrop-filter:blur(3px); }
.dialog-heading { align-items:flex-start; margin-bottom:24px; }
.dialog-heading h2 { padding-top:6px; }
.dialog-heading .icon-button { margin-top:-2px; }
.toast { box-shadow:var(--surface-shadow); }
@media(hover:hover) and (pointer:fine) {
  .button:not(:disabled):hover,.icon-button:not(:disabled):hover { transform:translateY(-1px); }
  .button.primary:hover { box-shadow:0 5px 14px color-mix(in srgb,var(--accent) 21%,transparent); }
  .button.primary:hover .icon { transform:translateX(2px); }
  .project-card:hover { transform:translateY(-3px); box-shadow:var(--surface-shadow); }
  .project-card:hover>span:last-child .icon { transform:translateX(3px); }
  .avatar-choice:hover { border-color:var(--accent); background:var(--accent-soft); }
}
@media(prefers-reduced-motion:no-preference) {
  .auth-card,.workspace>.page-heading { animation:tinkovo-enter var(--motion-enter) var(--motion-ease) both; }
  .workspace>.panel,.workspace>.split-grid,.workspace>.project-grid,.workspace>.welcome { animation:tinkovo-enter 280ms var(--motion-ease) both; }
  .project-grid .project-card:nth-child(2) { animation-delay:35ms; }
  .project-grid .project-card:nth-child(3) { animation-delay:65ms; }
  dialog[open] { animation:tinkovo-dialog 180ms var(--motion-ease) both; }
  dialog[open]::backdrop { animation:tinkovo-backdrop 180ms ease-out both; }
  .toast:not([hidden]) { animation:tinkovo-toast 190ms var(--motion-ease) both; }
  .form-error:not([hidden]) { animation:tinkovo-feedback 160ms ease-out both; }
  .select-listbox:not([hidden]) { animation:tinkovo-select 130ms var(--motion-ease) both; transform-origin:top center; }
  @keyframes tinkovo-enter { from { opacity:.4; transform:translateY(7px); } to { opacity:1; transform:none; } }
  @keyframes tinkovo-dialog { from { opacity:0; transform:translateY(8px) scale(.985); } to { opacity:1; transform:none; } }
  @keyframes tinkovo-backdrop { from { opacity:0; } to { opacity:1; } }
  @keyframes tinkovo-toast { from { opacity:0; transform:translate(-50%,7px); } to { opacity:1; transform:translate(-50%,0); } }
  @keyframes tinkovo-feedback { from { opacity:.4; transform:translateY(-3px); } to { opacity:1; transform:none; } }
  @keyframes tinkovo-select { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
}
@media(max-width:680px) {
  .site-header { padding-inline:18px; }
  .auth-layout { padding:30px 18px 40px; }
  .auth-card { padding:28px 24px; }
  .workspace { padding-top:28px; }
  .page-heading { gap:16px; }
  .page-heading .button.primary { min-height:44px; }
  .welcome { padding:24px; }
  .empty-state { min-height:270px; padding:34px 18px; }
  .profile-cover { min-height:130px; }
  .profile-name { align-items:baseline; }
  .help-copy { padding:24px; }
  dialog { padding:24px 22px; }
  .dialog-heading h2 { font-size:21px; }
  .generated-code { align-items:flex-start; }
}
@media(max-width:360px) {
  .auth-layout { padding-inline:14px; }
  .auth-card { padding:26px 20px; }
  .auth-card h1 { font-size:25px; letter-spacing:-.6px; }
  .recovery-grid li { font-size:11px; letter-spacing:0; padding-inline:8px; }
  .profile-name { align-items:flex-start; }
  .help-copy { padding:20px; }
  .account-pagination .button { min-width:98px; padding-inline:12px; }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}