/* Shared interaction language: quick feedback, clear selection, calm surfaces. */
:root{--motion-fast:140ms;--motion-normal:220ms;--motion-enter:340ms;--motion-ease:cubic-bezier(.2,.8,.2,1);--focus-ring:0 0 0 4px #315def20;--selected:#eaf0ff}
button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent}
button,.button,summary{touch-action:manipulation}
button,.button{transition:background-color var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast),box-shadow var(--motion-normal),transform var(--motion-fast) var(--motion-ease)}
button:enabled:active,.button:not(:disabled):active{transform:translateY(1px) scale(.97)}
button:disabled{cursor:not-allowed;box-shadow:none}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #7696f4;outline-offset:3px}
.button.primary{background:linear-gradient(135deg,#3867f6,#2854e5);box-shadow:0 4px 10px #2f5def23,inset 0 1px 0 #ffffff20}
.button.secondary{border:1px solid #dfe6f1;background:#f0f4fa}
.auth-submit span{display:inline-block;transition:transform var(--motion-normal) var(--motion-ease)}
.nav{position:relative;isolation:isolate;border:1px solid transparent}
.nav.active{background:var(--selected);border-color:#dce6ff;box-shadow:inset 3px 0 #315def;color:#244dce}
.nav.active::after{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;margin-left:auto;flex:none;animation:selection-pop var(--motion-normal) var(--motion-ease)}
.auth-tabs button.active{box-shadow:0 3px 10px #243f6b17,inset 0 0 0 1px #dfe7f7;animation:selection-pop var(--motion-normal) var(--motion-ease)}
.metric,.panel,.auth-card{transition:border-color var(--motion-normal),box-shadow var(--motion-normal),transform var(--motion-normal) var(--motion-ease)}
.panel:focus-within{border-color:#c4d3f4;box-shadow:0 7px 25px #1b345509,0 0 0 1px #e8efff}
.metric{animation:surface-in var(--motion-enter) var(--motion-ease) backwards}
.metric:nth-child(2){animation-delay:45ms}.metric:nth-child(3){animation-delay:90ms}.metric:nth-child(4){animation-delay:135ms}
.view.active{animation:surface-in var(--motion-enter) var(--motion-ease) both}
.view.active>.panel,.view.active>.hero,.view.active>.dashboard-grid,.view.active>.alert-grid{animation:surface-in var(--motion-enter) var(--motion-ease) backwards}
.view.active>:nth-child(2){animation-delay:35ms}.view.active>:nth-child(3){animation-delay:70ms}.view.active>:nth-child(4){animation-delay:105ms}
input:not([type="checkbox"]):not([type="radio"]),select,textarea{transition:border-color var(--motion-fast),background-color var(--motion-fast),box-shadow var(--motion-normal);color:#24334b}
input:not([type="checkbox"]):not([type="radio"]):focus,select:focus,textarea:focus{outline:0;border-color:#6485ee;box-shadow:var(--focus-ring);background-color:#fff}
select,.fields select,.print-layout-control select{appearance:none;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23677590' stroke-width='1.6' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");background-position:right 10px center;background-repeat:no-repeat;padding-right:34px!important;cursor:pointer}
select:focus,.fields select:focus,.print-layout-control select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23315def' stroke-width='1.6' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E")}
select:disabled,input:disabled{cursor:not-allowed;background-color:#f0f3f8;color:#8290a5}
input[type="checkbox"],input[type="radio"]{accent-color:#315def;cursor:pointer;transition:transform var(--motion-fast),filter var(--motion-fast);flex:none}
input[type="checkbox"]:checked,input[type="radio"]:checked{animation:selection-pop var(--motion-normal) var(--motion-ease)}
.permission{border:1px solid transparent;border-radius:9px;transition:background-color var(--motion-fast),border-color var(--motion-fast);padding:8px;cursor:pointer}
.permission:has(input:checked){background:#edf3ff;border-color:#d9e4ff;color:#294fae}
.permission:focus-within{outline:2px solid #7696f4;outline-offset:2px}
tbody tr{transition:background-color var(--motion-fast)}
tbody tr:focus-within{background:#eff4ff}
details>summary{list-style:none;display:flex;align-items:center;gap:9px;border-radius:8px;padding:5px;transition:color var(--motion-fast),background-color var(--motion-fast)}
details>summary::-webkit-details-marker{display:none}
details>summary::before{content:"";width:7px;height:7px;flex:none;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg);transition:transform var(--motion-normal) var(--motion-ease)}
details[open]>summary{color:#2a54ca;margin-bottom:12px}
details[open]>summary::before{transform:rotate(45deg)}
details[open]>:not(summary){animation:surface-in var(--motion-normal) var(--motion-ease)}
#toast:not([hidden]),.auth-feedback:not([hidden]),.search-results:not([hidden]){animation:surface-in var(--motion-normal) var(--motion-ease) both}
.search-results button{border-radius:8px;min-height:40px}
.auth-text-button,.auth-back,.text-button,.link-button{border-radius:5px;text-underline-offset:4px}
form[aria-busy="true"] .auth-submit,form[aria-busy="true"]>.form-actions>.primary{cursor:wait;display:inline-flex;align-items:center;justify-content:center;gap:9px}
form[aria-busy="true"] .auth-submit::after,form[aria-busy="true"]>.form-actions>.primary::after{content:"";width:13px;height:13px;flex:none;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:busy-turn .7s linear infinite}
form[aria-busy="true"] .auth-submit>span{display:none}
@media(hover:hover) and (pointer:fine){
 .button:not(:disabled):hover{transform:translateY(-2px);box-shadow:0 7px 18px #2545a52b}
 .button.primary:not(:disabled):hover{background:linear-gradient(135deg,#2858ed,#2046c9)}
 .button.secondary:not(:disabled):hover{background:#e6edfb;border-color:#c8d7f5}
 .button:not(:disabled):active{transform:translateY(1px) scale(.97)}
 .auth-submit:enabled:hover span{transform:translateX(4px)}
 .nav:enabled:hover{transform:translateX(2px);background:#f0f4ff;color:#244dce}
 .nav.active:hover{background:#e4ecff}
 .metric:hover{transform:translateY(-4px);border-color:#cddcf7;box-shadow:0 12px 28px #2a437716}
 .panel:hover{border-color:#d2dff3;box-shadow:0 9px 26px #233f6e0c}
 .auth-text-button:enabled:hover,.auth-back:enabled:hover,.text-button:enabled:hover,.link-button:enabled:hover{color:#163eab;background:#e9efff;text-decoration:underline}
 .permission:hover,details>summary:hover{background:#f1f5ff;color:#315bd9}
 select:enabled:hover{border-color:#afc3ee}
 input[type="checkbox"]:enabled:hover,input[type="radio"]:enabled:hover{filter:brightness(.92);transform:scale(1.08)}
 tbody tr:hover{background:#f0f5ff}
}
@media(hover:none){.button:hover,.nav:hover,.metric:hover{transform:none}}
@keyframes surface-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes selection-pop{from{transform:scale(.94)}to{transform:scale(1)}}
@keyframes busy-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 button:hover,button:active,.button:hover,.button:active,.nav:hover,.nav:active,.metric:hover,.auth-submit:hover span,input:hover{transform:none!important}
}
@media print{*,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important;transform:none!important}select{appearance:auto;background-image:none}}