/* Shared web UI. Document/PDF styles and company configuration are independent. */
:root{font-synthesis:none}
body{
  --ui-bg:#f6f7f9;--ui-fg:#22232b;--ui-muted:#656873;--ui-line:#dcdde5;
  --ui-panel:rgba(255,255,255,.93);--ui-solid:#fff;--ui-soft:#f0f1f6;
  --ui-hover:#e9eaf3;--ui-accent:#6552c9;--ui-accent-soft:#eeebfc;
  --ui-primary:#24232e;--ui-primary-ink:#fff;--ui-glow:rgba(119,98,220,.10);
  --ui-shadow:0 8px 32px #28223f08;--ui-good:#276d49;--ui-good-bg:#eaf6ee;
  --ui-warn:#805914;--ui-warn-bg:#fff5df;--ui-bad:#a33442;--ui-bad-bg:#fff0f1;
  --public-bg:var(--ui-bg);--public-fg:var(--ui-fg);--public-muted:var(--ui-muted);
  --public-line:var(--ui-line);--button-bg:var(--ui-primary);--button-fg:var(--ui-primary-ink);
  background:var(--ui-bg);color:var(--ui-fg);color-scheme:light;
}
body.dark{
  --ui-bg:#090a0d;--ui-fg:#eeeef3;--ui-muted:#a2a4b2;--ui-line:#30313c;
  --ui-panel:rgba(21,22,28,.94);--ui-solid:#15161c;--ui-soft:#1c1d26;
  --ui-hover:#272834;--ui-accent:#b8a7ff;--ui-accent-soft:#2a243e;
  --ui-primary:#eeecf7;--ui-primary-ink:#1c1928;--ui-glow:rgba(170,142,255,.10);
  --ui-shadow:0 12px 40px #0003;--ui-good:#8fd7ae;--ui-good-bg:#162e24;
  --ui-warn:#e3bc73;--ui-warn-bg:#30281a;--ui-bad:#ffadb9;--ui-bad-bg:#362029;
  --public-bg:var(--ui-bg);--public-fg:var(--ui-fg);--public-muted:var(--ui-muted);
  --public-line:var(--ui-line);--button-bg:var(--ui-primary);--button-fg:var(--ui-primary-ink);
  background:var(--ui-bg);color:var(--ui-fg);color-scheme:dark;
}
#network{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
body.network-fallback{background-image:radial-gradient(circle,color-mix(in srgb,var(--ui-fg) 22%,transparent) 1px,transparent 1px);background-size:26px 26px;background-attachment:fixed}
.motion-portal .app-shell{position:relative;z-index:1}
.motion-portal .sidebar{background:color-mix(in srgb,var(--ui-solid) 86%,transparent);border-color:var(--ui-line);backdrop-filter:blur(14px);z-index:3}
.motion-portal .wordmark{color:var(--ui-fg)}
.motion-portal .wordmark.has-brand-logo img{background:#fff;padding:4px;border-radius:8px}
.motion-portal .sidebar nav a{border:1px solid transparent;border-radius:12px;color:var(--ui-muted);transition:background .2s,color .2s,border-color .2s,translate .2s}
.motion-portal .sidebar nav a:hover{background:var(--ui-soft);color:var(--ui-fg);translate:2px 0}
.motion-portal .sidebar nav a.active{background:var(--ui-accent-soft);border-color:color-mix(in srgb,var(--ui-accent) 22%,transparent);color:var(--ui-accent);box-shadow:inset 0 1px #ffffff0a}
.motion-portal .sidebar-bottom{padding-top:18px;border-top:1px solid var(--ui-line)}
.motion-portal .avatar{background:var(--ui-accent-soft);color:var(--ui-accent)}
.motion-portal .topbar{background:color-mix(in srgb,var(--ui-solid) 72%,transparent);border-color:var(--ui-line);color:var(--ui-muted);backdrop-filter:blur(10px)}
.motion-portal main{padding-top:28px}
.motion-portal h1{letter-spacing:-.9px}
.motion-portal .page-heading h1,.motion-portal .detail-title h1{font-weight:600}
.motion-portal :is(.muted,.small.muted,small,.eyebrow,.heading-count,.back,.translation,.line-head,.brand-caption,.correction-reference,.correction-available,.list-pagination,.detail-title p,.metadata-grid dt,dl dt,.timeline time,.overview span){color:var(--ui-muted)}
.motion-portal label{color:var(--ui-muted)}
.motion-portal :is(.card,.login-card,.account-card){background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:18px;box-shadow:var(--ui-shadow)}
.motion-portal .panel-content .card{border:0;box-shadow:none;background:transparent;border-radius:0}
.motion-portal :is(input,textarea,select){background:var(--ui-solid);color:var(--ui-fg);border-color:var(--ui-line);border-radius:10px;transition:border-color .2s,box-shadow .2s}
.motion-portal input::placeholder,.motion-portal textarea::placeholder{color:var(--ui-muted);opacity:.8}
.motion-portal :is(input,textarea,select):focus{border-color:var(--ui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 12%,transparent)}
.motion-portal input[type=checkbox]{accent-color:var(--ui-accent)}
:is(button,a,input,select,textarea,summary):focus-visible{outline:2px solid var(--ui-accent);outline-offset:3px}
.motion-portal :is(.button,.account-card button),.public-button{position:relative;isolation:isolate;border-radius:11px;border:1px solid var(--ui-line);background:var(--ui-solid);color:var(--ui-fg);box-shadow:0 1px 2px #00000008;transition:background .2s,border-color .2s,box-shadow .2s,transform .15s}
.motion-portal .button:hover,.public-button:hover{background:var(--ui-hover);border-color:color-mix(in srgb,var(--ui-accent) 45%,var(--ui-line));opacity:1}
.motion-portal .button.primary,.motion-portal .account-card button,.public-button{background:var(--ui-primary);border-color:var(--ui-primary);color:var(--ui-primary-ink)}
.motion-portal .button.primary:hover,.public-button:hover{background:var(--ui-primary);box-shadow:0 4px 18px color-mix(in srgb,var(--ui-accent) 22%,transparent)}
/* The glint is clipped to the button; it never covers a neighbouring control. */
.motion-portal .button.primary,.public-button{overflow:hidden}
.motion-portal .button.primary::after,.public-button::after{content:"";position:absolute;inset:-50% -80%;pointer-events:none;background:linear-gradient(110deg,transparent 42%,#bbaaff55 49%,#ffffff66 50%,transparent 58%);transform:translateX(-55%);opacity:0}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 .motion-portal .button.primary:hover::after,.public-button:hover::after{animation:ui-shimmer .8s ease-out}
}
@keyframes ui-shimmer{0%{transform:translateX(-55%);opacity:0}20%{opacity:1}100%{transform:translateX(55%);opacity:0}}
.motion-portal .text-button{color:var(--ui-accent)}
.motion-portal .icon-button{color:var(--ui-muted);border-radius:9px}
.motion-portal .icon-button:hover{background:var(--ui-hover);color:var(--ui-fg)}
.motion-portal .badge{border-radius:100px;background:var(--ui-soft);color:var(--ui-muted);border:1px solid var(--ui-line);line-height:1.4}
.motion-portal :is(.badge.issued,.notice.success,.icon-button.is-paid,.payment-toggle.is-paid){color:var(--ui-good);background:var(--ui-good-bg);border-color:color-mix(in srgb,var(--ui-good) 25%,transparent)}
.motion-portal :is(.badge.amber,.badge.processing,.compact-warning,.test-stamp){color:var(--ui-warn);background:var(--ui-warn-bg);border-color:color-mix(in srgb,var(--ui-warn) 25%,transparent)}
.motion-portal :is(.notice.error,.error-list,.danger-icon:hover){color:var(--ui-bad);background:var(--ui-bad-bg)}
.motion-portal :is(.proof-warning,.proof-state.missing,.has-warning){color:var(--ui-warn)}
.motion-portal :is(.proof-state,.payment-label){color:var(--ui-good)}
.motion-portal .badge.draft{background:var(--ui-accent-soft);color:var(--ui-accent)}
.motion-portal .notice{border:1px solid var(--ui-line);background:var(--ui-accent-soft);color:var(--ui-accent);border-radius:12px}
.motion-portal :is(.filters,.dialog-heading,.panel-tabs,.wizard-item,.wizard-reason,.wizard-actions,.list-pagination,.separated,.correction-row,.correction-shipping,.timeline>div,.panel-content details,hr,td,th){border-color:var(--ui-line)}
.motion-portal th,.motion-portal .invoice-table th{background:var(--ui-solid);color:var(--ui-muted)}
.motion-portal .invoice-table tbody tr{transition:background .18s}
.motion-portal .invoice-table tbody tr:hover{background:var(--ui-soft)}
.motion-portal .correction-child,.motion-portal .invoice-table tr.invoice-fully-corrected{background:var(--ui-soft)}
.motion-portal .invoice-table tr.invoice-fully-corrected :is(td,.invoice-number,.customer-name){color:var(--ui-muted)}
.motion-portal .invoice-table tr.invoice-fully-corrected .badge{background:var(--ui-hover);color:var(--ui-muted)}
.motion-portal .invoice-table tr.invoice-fully-corrected:hover{background:var(--ui-hover)}
.motion-portal .empty{color:var(--ui-muted)}
.motion-portal .empty h2{color:var(--ui-fg)}
.motion-portal .empty-icon{background:var(--ui-accent-soft);color:var(--ui-accent)}
.motion-portal .step{border-color:var(--ui-line);color:var(--ui-accent);background:var(--ui-accent-soft)}
.motion-portal .totals .grand{color:var(--ui-fg);border-color:var(--ui-line)}
.motion-portal :is(.side-dialog,.workspace-dialog){background:var(--ui-solid);color:var(--ui-fg);border-color:var(--ui-line);box-shadow:0 24px 100px #0005}
.motion-portal .workspace-dialog{border-radius:20px}
.motion-portal .side-dialog{border-radius:20px 0 0 20px}
.motion-portal :is(.side-dialog,.workspace-dialog)::backdrop{background:#08091188;backdrop-filter:blur(7px)}
.motion-portal .wizard-actions{background:var(--ui-solid)}
.motion-portal .panel-tabs button{color:var(--ui-muted);border-radius:9px;transition:background .2s,color .2s}
.motion-portal .panel-tabs button:hover{background:var(--ui-soft)}
.motion-portal .panel-tabs button[aria-selected=true]{background:var(--ui-accent-soft);color:var(--ui-accent)}
.motion-portal .document-empty{background:var(--ui-panel);color:var(--ui-muted)}
.motion-portal .invoice-workspace-main>.compact-warning[role=alert]>.button{background:var(--ui-solid)}
/* CSS-only appearance remains complete when JavaScript is unavailable. */
[data-motion-surface]{position:relative}
[data-motion-surface]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;opacity:0;background:radial-gradient(360px circle at var(--motion-x,50%) var(--motion-y,0%),var(--ui-glow),transparent 75%);border:1px solid color-mix(in srgb,var(--ui-accent) 30%,transparent);transition:opacity .25s}
[data-motion-surface][data-motion-active]::after{opacity:1}
@media(prefers-reduced-motion:no-preference){
 .motion-portal .page-heading,.motion-portal .login-card,.access-form,.legal-main{animation:ui-enter .4s ease-out}
 .motion-portal dialog[open]{animation:ui-enter .2s ease-out}
}
@keyframes ui-enter{from{opacity:.5;translate:0 8px}to{opacity:1;translate:0 0}}
/* Public access and legal pages use the same tokens, without expanding PDF hit areas. */
.access-form,.legal-main{background:var(--ui-panel);border-color:var(--ui-line);border-radius:20px;box-shadow:var(--ui-shadow)}
.password-row input{background:var(--ui-solid);border-color:var(--ui-line);border-radius:10px;color:var(--ui-fg)}
.public-button{border-radius:11px}
.public-brand-logo{border-radius:7px}
.motion-portal .public-wordmark{font-size:30px;font-weight:600;line-height:1.2;letter-spacing:-1px;display:block;text-align:center;margin-bottom:28px}
.motion-portal .wordmark-cloud{font-size:.4em;letter-spacing:0;color:var(--ui-muted)}
.motion-portal .company-wordmark{display:flex;flex-direction:column;align-items:center;gap:12px}
.motion-portal .public-brand-logo{width:auto;height:48px;max-width:70px;object-fit:contain;background:white;padding:3px;align-self:center}
.auth-page .sidebar,.auth-page .topbar{display:none}
.auth-page .workspace{margin:0;width:100%}
.auth-page main{min-height:100svh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:32px 20px;width:100%}
.auth-page :is(.login-card,.account-card){width:min(460px,100%);padding:36px;margin:0}
.auth-page .login-card h1{font-size:27px;margin:0 0 24px}
.auth-page .login-card p{color:var(--ui-muted)}
.auth-page .notice{width:min(460px,100%)}
@media(max-width:700px){
 .motion-portal main{padding-top:16px}
 .motion-portal .sidebar nav a{border-radius:10px}
 .motion-portal .invoice-list-main,.motion-portal .invoice-workspace-main{padding-top:14px}
 .motion-portal .card{border-radius:14px}
 .motion-portal .topbar{gap:8px}
 .motion-portal .workspace-dialog{border-radius:14px}
 .auth-page main{padding:24px 16px}
 .auth-page :is(.login-card,.account-card){padding:26px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 [data-motion-surface]::after{display:none}
 .motion-portal .sidebar nav a:hover{translate:none}
}
/* Efferd-inspired app shell and segmented controls; Matrix-inspired request feedback. */
.motion-portal .sidebar nav span{display:inline-flex;align-items:center;justify-content:center}
.motion-portal .sidebar nav svg{flex:none}
.motion-portal .panel-tabs{gap:5px;padding:12px}
.motion-portal .panel-tabs button[aria-selected=true]{box-shadow:0 2px 8px #0000000d,inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 22%,transparent)}
.request-status{display:none;position:fixed;right:24px;bottom:20px;z-index:10;align-items:center;gap:12px;padding:12px 17px;border:1px solid var(--ui-line);border-radius:14px;background:var(--ui-solid);color:var(--ui-muted);box-shadow:var(--ui-shadow);font-size:12px;pointer-events:none}
body[data-request-pending] .request-status{display:flex;animation:ui-loading-reveal .25s ease both}
@keyframes ui-loading-reveal{0%,80%{opacity:0}100%{opacity:1}}
.matrix-loader{display:grid;grid-template-columns:repeat(3,3px);gap:3px}
.matrix-loader i{width:3px;height:3px;border-radius:50%;background:var(--ui-accent);animation:ui-matrix 1.2s ease-in-out infinite}
.matrix-loader i:nth-child(3n+2){animation-delay:.12s}.matrix-loader i:nth-child(3n){animation-delay:.24s}
@keyframes ui-matrix{0%,100%{opacity:.25}50%{opacity:1}}
@media(prefers-reduced-motion:no-preference){.panel-content:not([hidden]){animation:ui-enter .2s ease-out}}
@media(max-width:700px){
 .motion-portal .topbar>span:first-child{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
 .motion-portal .topbar>.small.muted{display:none}
}