/* Shared presentation layer: no network calls or business state changes. */
:root{--tx-accent:#3166dd;--tx-ink:#172033;--tx-line:#e3e9f2;--tx-soft:#f4f7fc;--tx-ease:cubic-bezier(.2,.7,.2,1)}
body{color:var(--tx-ink);background:#f4f7fb;-webkit-font-smoothing:antialiased}
button,input,select,textarea,a,summary{transition:background-color 160ms var(--tx-ease),border-color 160ms var(--tx-ease),box-shadow 160ms var(--tx-ease),color 160ms var(--tx-ease)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #86aaff;outline-offset:3px}
input:focus,select:focus,textarea:focus{border-color:var(--tx-accent);box-shadow:0 0 0 3px #3166dd18;outline:none}
button:disabled{cursor:not-allowed}
button:not(:disabled):active{filter:brightness(.96)}
.card,.panel,.login-box{border-color:var(--tx-line);border-radius:16px;box-shadow:0 3px 14px #17203305}
thead th{background:#f6f8fc;color:#59677d;font-weight:600}
tbody tr{transition:background-color 140ms ease}
tbody tr:hover{background-color:#f3f7ff}
dialog{border:1px solid var(--tx-line);border-radius:18px;box-shadow:0 24px 80px #17203330}
dialog[open]{animation:tx-enter 180ms var(--tx-ease)}
dialog::backdrop{background:#17203366}
@keyframes tx-enter{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{*,*::before,*::after{animation:none!important;transition:none!important;box-shadow:none!important}}

.sidebar{background:#fff;border-right:1px solid var(--tx-line)}
.sidebar .brand{padding-top:22px;padding-bottom:22px}
.grouped-nav button,.nav-group summary{border-radius:10px}
.grouped-nav button:hover,.nav-group summary:hover{background:#f0f5ff}
.grouped-nav button.active{background:#eaf1ff;color:#2458c2;box-shadow:inset 3px 0 #3166dd}
.topbar{background:#ffffff;border-bottom:1px solid var(--tx-line)}
.content{line-height:1.6}
.content h1,.content h2{letter-spacing:-.3px}
button.primary{background:#3166dd;border-color:#3166dd;box-shadow:0 3px 8px #3166dd1c}
button.primary:hover{background:#2858c3;border-color:#2858c3}
button.secondary{border-color:#dce3ee;background:#fff}
button.secondary:hover{background:#f3f6fc;border-color:#b8c9e6}
.modal-head{border-bottom:1px solid var(--tx-line);padding-bottom:16px}
#modal footer{border-top:1px solid var(--tx-line);padding-top:16px}
.taskbar{background:#f7f9fd}
.nav-children{animation:tx-enter 150ms ease}
#toast{border-radius:12px;box-shadow:0 8px 28px #17203324}
@media(max-width:700px){.content{padding:14px}.topbar{gap:10px}.mobile-bottom{border-top:1px solid var(--tx-line);box-shadow:0 -4px 20px #17203306}dialog{max-width:calc(100vw - 24px)}}

.loading{padding:28px 20px;color:#69768c;display:flex;align-items:center;gap:12px}
.loading::before{content:"";width:18px;height:18px;border:2px solid #dce6f7;border-top-color:#3166dd;border-radius:50%;animation:tx-spin .8s linear infinite}
@keyframes tx-spin{to{transform:rotate(360deg)}}