/* Shared interaction language: short feedback, calm surfaces, no delayed controls. */
:root{--ease-ui:cubic-bezier(.22,1,.36,1);--motion-fast:160ms;--motion-enter:280ms;--focus-ring:color-mix(in srgb,var(--blue),transparent 78%)}
body{line-height:1.6;text-rendering:optimizeLegibility}
.header{border-bottom-color:color-mix(in srgb,var(--border),transparent 15%)}
.card,.hub-card,.input-panel,.settings,.tool-guide{box-shadow:0 2px 5px #17243b03,0 8px 24px #17243b04}
.card p,.hub-card p,.hint,.work-title p{line-height:1.65}.card p,.hub-card p{font-size:14px}.card h3{line-height:1.45}
.card,.hub-card{transition:transform 220ms var(--ease-ui),box-shadow 220ms var(--ease-ui),border-color 160ms ease}
.card-arrow,.hub-card>svg{transition:transform 200ms var(--ease-ui),color 160ms ease}
.primary,.secondary,.iconbutton,.navbutton,.preview-eye,.category-link,.subcategories button{transition:background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,transform var(--motion-fast) var(--ease-ui)}
.primary:active:not(:disabled),.secondary:active:not(:disabled),.iconbutton:active:not(:disabled),.navbutton:active:not(:disabled){transform:translateY(1px) scale(.985);box-shadow:none}
button:disabled{transform:none!important;filter:none!important;box-shadow:none!important}
:where(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.field input,.field select,.field textarea,.dev-text{transition:border-color 160ms ease,box-shadow 160ms ease;background:var(--bg)}
.field input:focus,.field select:focus,.field textarea:focus,.dev-text:focus{border-color:var(--blue);outline:2px solid transparent;box-shadow:0 0 0 4px var(--focus-ring)}
.field{line-height:1.6}.field input:not([type=range]):not([type=checkbox]),.field select{min-height:46px}
.dropzone{transition:border-color 180ms ease,background-color 180ms ease,box-shadow 180ms ease,transform 180ms var(--ease-ui)}
.dropzone:focus-within{border-color:var(--accent,var(--blue));box-shadow:0 0 0 4px var(--focus-ring)}
.dropzone.dragging{transform:scale(1.008);box-shadow:0 0 0 5px var(--focus-ring)}
.file-row{transition:border-color 160ms ease,background-color 160ms ease;min-width:0}.file-row .filename{min-width:0}
.steps b{transition:background-color 180ms ease,border-color 180ms ease,color 180ms ease;min-width:26px;min-height:26px}
.steps li[aria-current=step]{color:var(--accent,var(--blue));font-weight:600}.steps li[aria-current=step] b{border-color:var(--accent,var(--blue));background:var(--tint,var(--soft));color:var(--accent,var(--blue))}
.action-dock{box-shadow:0 -8px 32px #17243b0b}.dock-actions .primary,.dock-actions .secondary{border-radius:12px}.dock-status{line-height:1.5}.dock-summary{font-size:14px}.dock-actions{row-gap:8px}
.advanced-settings,.conversion-details,.tool-content details{transition:border-color 180ms ease,background-color 180ms ease}.advanced-settings[open],.conversion-details[open]{border-color:color-mix(in srgb,var(--blue),var(--border) 65%)}
summary{min-height:32px;align-content:center}summary::marker{color:var(--muted)}
.large-preview{border-radius:18px}.large-preview>header{padding:16px 20px}.preview-modal-toolbar{border-bottom:1px solid var(--border);padding:12px}.preview-modal-stage{background:var(--surface)}
.progress-box{border-radius:14px}.progress-box progress,.action-dock progress{border-radius:999px;overflow:hidden}.error{line-height:1.65}.success .actions{gap:10px}
body.dark .card,body.dark .hub-card,body.dark .input-panel,body.dark .settings{box-shadow:0 4px 20px #00000018}body.dark .action-dock{box-shadow:0 -8px 30px #00000024}
@media(hover:hover) and (pointer:fine){
 .card:hover,.hub-card:hover{transform:translateY(-3px);box-shadow:0 12px 30px #17243b12;border-color:color-mix(in srgb,var(--blue),var(--border) 65%)}
 .card:hover .card-arrow,.hub-card:hover>svg{transform:translateX(3px)}
 .file-row:hover{background:var(--surface)}
}
@media(prefers-reduced-motion:no-preference){
 .workspace-head,.intro{animation:ui-arrive var(--motion-enter) var(--ease-ui)}
 .cards>.card,.hub-grid>.hub-card{animation:ui-arrive 240ms var(--ease-ui) backwards}
 .cards>.card:nth-child(2),.hub-grid>.hub-card:nth-child(2){animation-delay:20ms}
 .cards>.card:nth-child(3),.hub-grid>.hub-card:nth-child(3){animation-delay:40ms}
 .cards>.card:nth-child(4),.hub-grid>.hub-card:nth-child(4){animation-delay:60ms}
 .input-panel,.settings{animation:ui-arrive 300ms var(--ease-ui)}
 .file-row,.selected-file:not([hidden]){animation:ui-arrive 200ms var(--ease-ui)}
 .mega:not([hidden]){animation:ui-arrive 180ms var(--ease-ui);transform-origin:top}
 .action-dock{animation:ui-dock 240ms var(--ease-ui)}
 .large-preview[open]{animation:ui-dialog 220ms var(--ease-ui)}
 .large-preview[open]::backdrop{animation:ui-fade 180ms ease-out}
 details[open]>:not(summary){animation:ui-fade 180ms ease-out}
 #result:not([hidden]),#ex-result:not([hidden]){animation:ui-arrive 300ms var(--ease-ui)}
}
@keyframes ui-arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes ui-dock{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes ui-dialog{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ui-fade{from{opacity:0}to{opacity:1}}
@media(max-width:750px){
 .card p,.hub-card p,.steps li,.hint{font-size:14px!important}.steps{gap:8px;flex-wrap:wrap}.steps li{flex:1;min-width:85px}.steps b{flex-shrink:0}
 .iconbutton{min-width:44px;min-height:44px}.workspace-head{gap:12px}.dock-summary{font-size:13px}.action-dock .primary,.action-dock .secondary{font-size:15px}
 .preview-modal-toolbar{gap:8px}.preview-modal-toolbar button{min-height:44px}.large-preview{border-radius:0}.field input,.field select,.field textarea{font-size:16px}
}
@media(hover:none){.card:hover,.hub-card:hover,.primary:hover:not(:disabled){transform:none;box-shadow:none}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .card:hover,.hub-card:hover,.primary:hover:not(:disabled),.dropzone.dragging{transform:none}
}

.it-color-swatch{height:96px;border-radius:12px;border:1px solid var(--border);margin:16px 0}