/* Tecqx look: charcoal navigation, warm paper, Tecqx orange, soft depth and motion. Loaded after every other stylesheet. */

/* Page changes, as in the reference: navigation and top bar stay put, the old content fades out, the new content writes in and cascades. */
@view-transition{navigation:auto}
:root:not(.vt-circle) .sidebar{view-transition-name:ps-sidebar}
:root:not(.vt-circle) .topbar{view-transition-name:ps-topbar}
::view-transition-group(ps-sidebar),::view-transition-group(ps-topbar),::view-transition-new(ps-sidebar),::view-transition-new(ps-topbar){animation:none}
::view-transition-old(ps-sidebar),::view-transition-old(ps-topbar){display:none}
::view-transition-old(root){animation:pt-out .14s ease-out both}
::view-transition-new(root){animation:none}
::view-transition-group(root){animation-duration:.14s}
@keyframes pt-out{to{opacity:0}}

/* Click effects: circular reveal from the click point (ui.js drives the clip-path) and an ink ripple on controls */
:root.vt-circle::view-transition-old(root),:root.vt-circle::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-circle::view-transition-old(root){z-index:1}
:root.vt-circle::view-transition-new(root){z-index:2}
.has-ripple{position:relative}
.ripple-wrap{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;z-index:0}
.ripple{position:absolute;left:var(--rx);top:var(--ry);width:var(--rs);height:var(--rs);margin:calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2);border-radius:50%;background:currentColor;opacity:.24;transform:scale(0);animation:ripple .6s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes ripple{to{transform:scale(1);opacity:0}}

/* Tokens */
:root[data-theme]{--tx-orange:#e2600f;--tx-orange-2:#ff8a3d;--tx-blue:#2a78d6;--tx-green:#1baf7a;--tx-amber:#eda100;--tx-red:#d64532;--tx-pink:#e87ba4;--ease:cubic-bezier(.2,.7,.2,1);--side:#191d23;--side-2:#242a33;--side-fg:#d9dade;--side-mut:#8b929c;--card-shadow:0 1px 2px rgba(28,33,40,.05),0 6px 18px rgba(28,33,40,.05);--lift-shadow:0 2px 4px rgba(28,33,40,.06),0 16px 36px rgba(28,33,40,.11)}
:root[data-theme="light"]{--paper:#f6f5f3;--surface:#fff;--surface-2:#f4f2ef;--ink:#1c2128;--muted:#5f6772;--border:#e5e1db;--nav:#191d23}
:root[data-theme="light"] body,:root[data-theme="light"] body[data-section]{--accent:#e2600f;--accent-hover:#c4520c;--accent-soft:#fdeee3;--accent-border:#f5c7a4}
:root[data-theme="dark"]{--paper:#0d1118;--surface:#141a23;--surface-2:#1a212c;--border:#242c39;--ink:#e7e9ed;--muted:#98a1ae;--side:#0a0d13;--side-2:#161c26;--card-shadow:0 1px 2px #0006,0 8px 24px #0000004d;--lift-shadow:0 2px 6px #0007,0 18px 40px #00000073}
:root[data-theme="dark"] body,:root[data-theme="dark"] body[data-section]{--accent:#ff8a3d;--accent-hover:#ffa264;--accent-soft:#ff8a3d1c;--accent-border:#ff8a3d55}

/* Page */
:root[data-theme] body{background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased}
/* The soft glow sits on its own fixed layer so scrolling never repaints the whole page. */
:root[data-theme] body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(900px 420px at 92% -8%,#e2600f12,transparent 62%),radial-gradient(700px 380px at 8% 108%,#2a78d60c,transparent 60%)}
:root[data-theme="dark"] body::before{background:radial-gradient(900px 420px at 92% -8%,#ff8a3d17,transparent 62%),radial-gradient(700px 380px at 8% 108%,#2a78d614,transparent 60%)}
:root[data-theme] ::selection{background:#ff8a3d40}
:root[data-theme] :focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Sidebar */
:root[data-theme] .sidebar{background:linear-gradient(180deg,var(--side) 0%,color-mix(in srgb,var(--side) 88%,#000) 100%);border-right:1px solid #ffffff0f;box-shadow:inset -1px 0 0 #00000040}
:root[data-theme] .sidebar::before{content:"";position:absolute;inset:0 0 auto 0;height:220px;pointer-events:none;background:linear-gradient(#ffffff08 1px,transparent 1px) 0 0/22px 22px,linear-gradient(90deg,#ffffff08 1px,transparent 1px) 0 0/22px 22px;-webkit-mask-image:linear-gradient(#000,transparent);mask-image:linear-gradient(#000,transparent)}
:root[data-theme] .sidebar>*{position:relative}
:root[data-theme] .sidebar .brand{color:#fff}
:root[data-theme] .sidebar .brand-light{color:var(--side-mut)}
:root[data-theme] .logo-mark{background:linear-gradient(140deg,#ff8a3d,#e2600f);color:#fff;box-shadow:0 6px 16px #e2600f4d,inset 0 1px 0 #ffffff40}
:root[data-theme] .logo-mark span{color:#ffe1cc}
:root[data-theme] .sidebar .workspace{background:var(--side-2);border:1px solid #ffffff0d}
:root[data-theme] .sidebar .workspace strong{color:#fff}
:root[data-theme] .sidebar .workspace small{color:var(--side-mut)}
:root[data-theme] .sidebar .workspace-icon{background:#ff8a3d26;color:#ff9d5c}
:root[data-theme] .sidebar .nav-label{color:#6c737d}
:root[data-theme] .sidebar :is(.nav-item,.project-nav-heading){position:relative;color:var(--side-fg);background:transparent;transition:background .18s var(--ease),color .18s var(--ease)}
:root[data-theme] .sidebar .nav-item svg,:root[data-theme] .sidebar nav a[href] svg{color:var(--side-mut);transition:color .18s var(--ease),transform .25s var(--ease)}
:root[data-theme] .sidebar .nav-item:hover{background:#ffffff0d;color:#fff}
:root[data-theme] .sidebar .nav-item:hover svg{color:#fff;transform:translateX(1px)}
:root[data-theme] .sidebar :is(.nav-item.active,.project-nav-heading.active){background:linear-gradient(90deg,#ff8a3d2b,#ff8a3d08);color:#fff}
:root[data-theme] .sidebar :is(.nav-item.active,.project-nav-heading.active) svg,:root[data-theme] .sidebar .project-nav-heading.active .nav-item svg{color:#ff9d5c}
:root[data-theme] .sidebar .nav-item.active::before,:root[data-theme] .sidebar .project-nav-heading.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:#ff8a3d;box-shadow:0 0 12px #ff8a3d;animation:nav-in .35s var(--ease) backwards}
:root[data-theme] .sidebar .project-nav-heading.active .nav-item.active::before{display:none}
@keyframes nav-in{from{transform:scaleY(0);opacity:0}}
:root[data-theme] .sidebar .projects-toggle{color:var(--side-mut)}
:root[data-theme] .sidebar .projects-toggle:hover{background:#ffffff14;color:#fff}
:root[data-theme] .sidebar .nav-item b{background:#ffffff17;color:#fff}
:root[data-theme] .sidebar .nav-item b.nav-due{background:#ff8a3d;color:#1b1206;box-shadow:0 0 0 0 #ff8a3d80;animation:badge-pulse 2.2s ease-out 3}
@keyframes badge-pulse{0%{box-shadow:0 0 0 0 #ff8a3d80}70%{box-shadow:0 0 0 7px #ff8a3d00}100%{box-shadow:0 0 0 0 #ff8a3d00}}
:root[data-theme] .sidebar .profile{border-top-color:#ffffff12;color:var(--side-fg)}
:root[data-theme] .sidebar .profile strong{color:#fff}
:root[data-theme] .sidebar .profile small,:root[data-theme] .sidebar .profile>span:last-child{color:var(--side-mut)}
:root[data-theme] .sidebar .avatar{background:var(--side-2);color:#ffb27f;border:1px solid #ffffff14}
:root[data-theme] .nav-open .sidebar{box-shadow:18px 0 50px #0000004d}

:is(.brand,.auth-brand){display:flex;align-items:center;gap:11px;text-decoration:none}
:is(.brand,.auth-brand) .logo-mark{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:10px;font:800 19px/1 Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;letter-spacing:0;text-align:center;color:#fff;background:linear-gradient(140deg,#ff8a3d,#e2600f);box-shadow:0 6px 16px #e2600f4d,inset 0 1px 0 #ffffff40;transition:transform .35s var(--ease,ease)}
:is(.brand,.auth-brand):hover .logo-mark{transform:rotate(-6deg) scale(1.05)}
.brand-word{display:flex;flex-direction:column;gap:3px;line-height:1}
.brand-word b{font-size:19px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#fff}
.brand-word small{font-size:9.5px;font-weight:650;letter-spacing:.2em;text-transform:uppercase;color:#ff9d5c}
.auth-brand .brand-word b{font-size:21px}

/* While scrolling, cards under a still pointer do not lift, glow or change (class set by ui.js) */
:root.is-scrolling :is(.content,.sidebar){pointer-events:none}

/* Top bar */
:root[data-theme] .topbar{background:color-mix(in srgb,var(--paper) 94%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid transparent;position:sticky;top:0;z-index:20;transition:border-color .2s,box-shadow .2s}
:root[data-theme] .topbar.scrolled{border-bottom-color:var(--border);box-shadow:0 6px 20px #1c21280d}
:root[data-theme] :is(.palette-trigger,.theme-toggle,.bell){background:var(--surface);border-color:var(--border);box-shadow:0 1px 2px #1c212808;transition:transform .15s var(--ease),border-color .15s,box-shadow .15s,color .15s}
:root[data-theme] :is(.palette-trigger,.theme-toggle,.bell):hover{border-color:var(--accent-border);box-shadow:0 4px 12px #e2600f1a;transform:translateY(-1px)}
:root[data-theme="light"] .theme-icon-light,:root[data-theme="dark"] .theme-icon-dark{display:inline-block;transition:transform .5s var(--ease)}
:root[data-theme] .theme-toggle:hover :is(.theme-icon-light,.theme-icon-dark){transform:rotate(-25deg)}
:root[data-theme] .bell b{background:var(--tx-orange);border-color:var(--paper)}
:root[data-theme] .topbar .avatar{background:linear-gradient(140deg,#ff8a3d,#e2600f);color:#fff;border:0}

/* Headings */
:root[data-theme] .page-heading h1{color:var(--ink);letter-spacing:-.025em}
:root[data-theme] .eyebrow{color:var(--accent);letter-spacing:.14em}

/* Surfaces */
:root[data-theme] :is(.panel,.stat-card,.dash-kpi,.kb-card){background:var(--surface);border-color:var(--border);box-shadow:var(--card-shadow)}
:root[data-theme] .panel{border-radius:14px}
:root[data-theme] :is(th){background:var(--surface-2);color:var(--muted)}
:root[data-theme] tbody tr{transition:background .15s}
:root[data-theme] tbody tr:hover{background:color-mix(in srgb,var(--accent) 5%,var(--surface))}
:root[data-theme] .kb-column{background:color-mix(in srgb,var(--surface-2) 70%,transparent);border-color:var(--border)}

/* Buttons and fields */
:root[data-theme] .button{transition:transform .15s var(--ease),box-shadow .15s,background .15s,border-color .15s,color .15s;color:var(--ink);background:var(--surface);border-color:var(--border)}
:root[data-theme] .button:hover{border-color:var(--accent-border);color:var(--accent);background:var(--surface);transform:translateY(-1px);box-shadow:0 4px 12px #1c21280f}
:root[data-theme] .button:active{transform:translateY(0) scale(.97)}
:root[data-theme] .button.subtle{background:transparent;border-color:transparent;color:var(--accent);box-shadow:none}
:root[data-theme] .button.subtle:hover{background:var(--accent-soft);transform:none}
:root[data-theme] .button.primary{background:linear-gradient(180deg,#f2752d,#e2600f);border-color:#d9580a;color:#fff;box-shadow:inset 0 1px 0 #ffffff38,0 6px 16px #e2600f38}
:root[data-theme] .button.primary:hover{background:linear-gradient(180deg,#ff8a3d,#ea6a19);color:#fff;border-color:#e2600f;box-shadow:inset 0 1px 0 #ffffff40,0 10px 22px #e2600f4d}
:root[data-theme="dark"] .button.primary{background:linear-gradient(180deg,#ffa060,#ff8a3d);border-color:#ff8a3d;color:#1b1206;box-shadow:inset 0 1px 0 #ffffff4d,0 6px 18px #ff8a3d33}
:root[data-theme="dark"] .button.primary:hover{background:linear-gradient(180deg,#ffb27f,#ff944d);color:#1b1206}
:root[data-theme] .button.primary .plus{transition:transform .3s var(--ease)}
:root[data-theme] .button.primary:hover .plus{transform:rotate(90deg)}
:root[data-theme] :is(input,select,textarea){transition:border-color .15s,box-shadow .15s,background .15s}
:root[data-theme] :is(input,select,textarea):focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:none}
:root[data-theme] .task-add:focus-within{border-color:var(--accent-border);box-shadow:0 0 0 4px var(--accent-soft),var(--card-shadow)}

/* Status colours from the Tecqx palette */
:root[data-theme="light"] :is(.badge.quotation,.badge.sent){background:#fbf0d2;color:#8a5d00;border-color:#f0d995}
:root[data-theme="light"] .badge.in_progress{background:#e3eefb;color:#1d5fa8;border-color:#bcd5f2}
:root[data-theme="light"] :is(.badge.completed,.badge.approved){background:#e2f3ea;color:#1f7a4d;border-color:#b9e1cb}
:root[data-theme] .dash-dot.amber,:root[data-theme] :is(.dash-kpis,.dash-grid,.kb-board) .dash-dot.amber{background:var(--tx-amber)}
:root[data-theme] .dash-dot.blue,:root[data-theme] :is(.dash-kpis,.dash-grid,.kb-board) .dash-dot.blue{background:var(--tx-blue)}
:root[data-theme] .dash-dot.green,:root[data-theme] :is(.dash-kpis,.dash-grid,.kb-board) .dash-dot.green{background:var(--tx-green)}
:root[data-theme] .dash-dot.red,:root[data-theme] :is(.dash-kpis,.dash-grid,.kb-board) .dash-dot.red{background:var(--tx-red)}
:root[data-theme] .dash-dot.lilac,:root[data-theme] :is(.dash-kpis,.dash-grid,.kb-board) .dash-dot.lilac{background:var(--tx-orange)}
:root[data-theme] .dash-dot{box-shadow:0 0 0 3px color-mix(in srgb,currentColor 0%,transparent)}
:root[data-theme] .dash-bar.in,:root[data-theme] .dash-swatch{fill:var(--tx-blue);background:var(--tx-blue)}
:root[data-theme] .dash-bar.out,:root[data-theme] .dash-swatch.out{fill:#eb6834;background:#eb6834}
:root[data-theme] .dash-stagebar .amber{fill:var(--tx-amber)}:root[data-theme] .dash-stagebar .blue{fill:var(--tx-blue)}:root[data-theme] .dash-stagebar .green{fill:var(--tx-green)}
:root[data-theme] .project-summary .stat-card:first-child{border-top-color:var(--tx-orange)}
:root[data-theme] .project-summary .stat-card:nth-child(2){border-top-color:var(--tx-amber)}
:root[data-theme] .project-summary .stat-card:nth-child(3){border-top-color:var(--tx-blue)}
:root[data-theme] .project-summary .stat-card:nth-child(4){border-top-color:var(--tx-green)}
:root[data-theme] .kb-column[data-status="quotation"]{box-shadow:inset 0 3px 0 var(--tx-amber)}
:root[data-theme] .kb-column[data-status="in_progress"]{box-shadow:inset 0 3px 0 var(--tx-blue)}
:root[data-theme] .kb-column[data-status="completed"]{box-shadow:inset 0 3px 0 var(--tx-green)}
:root[data-theme] .kb-column.drop-over.drop-ok{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent),0 0 0 6px var(--accent-soft)}
:root[data-theme] meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,var(--tx-green),#3fcf98);border-radius:4px}
:root[data-theme] meter::-webkit-meter-bar{background:var(--surface-2);border:0;border-radius:4px}

/* Expandable "+ ..." sections read as buttons; open, they become the form card */
:root[data-theme] details.panel:has(>summary.summary-heading):not([open]){display:inline-block;vertical-align:top;margin:0 8px 12px 0;padding:0;background:transparent;border:0;box-shadow:none;overflow:visible;animation:none}
:root[data-theme] summary.summary-heading{list-style:none;display:inline-flex;align-items:center;gap:8px;margin:0;padding:5px 13px 5px 5px;min-height:0;border:1px solid var(--accent-border);border-radius:10px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--accent) 7%,var(--surface)));color:var(--ink);font-size:13px;font-weight:600;letter-spacing:0;cursor:pointer;user-select:none;box-shadow:0 1px 2px #1c21280a;transition:transform .15s var(--ease),box-shadow .15s,border-color .15s,background .15s}
:root[data-theme] summary.summary-heading::-webkit-details-marker{display:none}
:root[data-theme] summary.summary-heading::marker{content:""}
:root[data-theme] summary.summary-heading:hover{transform:translateY(-1px);border-color:var(--accent);box-shadow:0 8px 20px #e2600f1f}
:root[data-theme] summary.summary-heading:active{transform:scale(.98)}
:root[data-theme] .summary-icon{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:linear-gradient(140deg,#ff8a3d,#e2600f);color:#fff;font-size:15px;font-weight:600;line-height:1;box-shadow:0 4px 10px #e2600f40;transition:transform .3s var(--ease)}
:root[data-theme="dark"] .summary-icon{color:#1b1206}
:root[data-theme] details[open]>summary.summary-heading{margin:0 0 16px;padding:0;border-color:transparent;background:transparent;box-shadow:none;font-size:15px;transform:none}
:root[data-theme] details[open]>summary .summary-icon{transform:rotate(45deg);background:var(--surface-2);color:var(--muted);box-shadow:none}
:root[data-theme] details[open]:has(>summary.summary-heading){animation:pop-in .3s var(--ease) backwards}

/* Section menus (Accounts, project records) as a sticky row of tabs at the top */
:root[data-theme] .record-layout{display:block}
:root[data-theme] .record-nav{position:sticky;top:var(--topbar-h,64px);z-index:9;display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;overflow-x:auto;scrollbar-width:none;white-space:nowrap;margin:0 0 22px;padding:5px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--card-shadow)}
:root[data-theme] .record-nav::-webkit-scrollbar{display:none}
:root[data-theme] .record-nav a{flex:none;margin:0;padding:9px 15px;border:0;border-radius:9px;font-size:13px;font-weight:550;line-height:1.2;color:var(--muted);background:transparent;box-shadow:none;transition:background .18s var(--ease),color .18s,box-shadow .18s}
:root[data-theme] .record-nav a:hover{background:var(--surface-2);color:var(--ink)}
:root[data-theme] .record-nav a.selected{background:linear-gradient(180deg,#f2752d,#e2600f);color:#fff;font-weight:650;box-shadow:0 4px 14px #e2600f40}
:root[data-theme="dark"] .record-nav a.selected{background:linear-gradient(180deg,#ffa060,#ff8a3d);color:#1b1206}
@media(max-width:900px){:root[data-theme] .record-nav{margin-left:-4px;margin-right:-4px}}
/* When pinned, a strip of page colour above and around the tab row stops content showing through */
:root[data-theme] .record-nav.is-stuck{border-top-left-radius:0;border-top-right-radius:0;border-top-color:transparent;box-shadow:0 -10px 0 0 var(--paper),0 8px 22px #1c212814}

/* Filter bars and exports */
:root[data-theme] .filter-bar{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:14px 16px;margin-bottom:16px}
:root[data-theme] .filter-bar label{display:flex;flex-direction:column;gap:5px;margin:0;flex:0 1 200px;min-width:150px;font-size:12px;font-weight:600;color:var(--muted)}
:root[data-theme] .filter-title{align-self:center;flex:1 1 auto;font-size:13.5px;font-weight:650;color:var(--ink)}
:root[data-theme] .filter-actions{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}
:root[data-theme] .export-button{gap:7px;white-space:nowrap}
:root[data-theme] .export-button svg{transition:transform .25s var(--ease)}
:root[data-theme] .export-button:hover svg{transform:translateY(2px)}
:root[data-theme] .export-bar{display:flex;justify-content:flex-end;margin:0 0 14px}
:root[data-theme] .panel-header .export-button{flex:none}
@media(max-width:700px){:root[data-theme] .filter-bar label{flex:1 1 100%}:root[data-theme] .filter-actions{margin-left:0;width:100%}:root[data-theme] .filter-actions .button{flex:1}}

/* Anything marked hidden stays hidden, whatever its usual display */
[hidden]{display:none!important}

/* Compact buttons */
:root[data-theme] .button.small,:root[data-theme] .export-button{min-height:32px;padding:5px 11px;font-size:12.5px;border-radius:8px;gap:6px}
:root[data-theme] .button.small.subtle{padding:5px 9px}

/* Export: small button with a date popover */
.export-menu{position:relative;display:inline-block}
.export-menu>summary{list-style:none;cursor:pointer}
.export-menu>summary::-webkit-details-marker{display:none}
.export-menu>summary::marker{content:""}
.export-menu[open]>summary{border-color:var(--accent);color:var(--accent)}
.export-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:30;width:240px;display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--border);border-radius:12px;background:var(--surface,#fff);box-shadow:var(--lift-shadow,0 16px 36px #1c21281c);animation:pop-in .18s var(--ease,ease) backwards}
.export-pop strong{font-size:13px;color:var(--ink)}
.export-pop label{display:flex;flex-direction:column;gap:4px;margin:0;font-size:11.5px;font-weight:600;color:var(--muted)}
.export-pop input{min-height:34px;padding:5px 9px;font-size:13px}
.export-pop .button{width:100%;min-height:34px}
.export-pop small{font-size:11px;color:var(--muted)}
:root[data-theme] .export-bar{margin:0 0 10px}

/* Dialogs for add / edit forms */
dialog.modal{width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--border);border-radius:16px;background:var(--surface,#fff);color:var(--ink);box-shadow:0 30px 80px #0f172a40;overflow:auto}
dialog.modal.modal-wide{width:min(680px,calc(100vw - 32px))}
dialog.modal[open]{animation:pop-in .2s var(--ease,ease) backwards}
dialog.modal::backdrop{background:#0f172a59;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
:root[data-theme="dark"] dialog.modal::backdrop{background:#000000a6}
dialog.modal form{display:flex;flex-direction:column;gap:12px;padding:20px 22px 22px}
dialog.modal .form-row{gap:12px}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:2px}
.modal-head h2{margin:0;font-size:17px}
.modal-close{width:32px;height:32px;border:0;border-radius:9px;background:var(--surface-2);color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.modal-close:hover{color:var(--ink)}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px;padding-top:14px;border-top:1px solid var(--border)}

/* Compact directory lists (clients, vendors, users) */
.dir-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.dir-search{flex:1;max-width:460px}
.dir-count{font-size:12.5px;color:var(--muted);white-space:nowrap}.dir-count b{color:var(--ink)}
:root[data-theme] .dir-panel{padding:0;overflow:hidden}
.dir-head,.dir-row{display:grid;grid-template-columns:minmax(220px,1.6fr) minmax(160px,1.3fr) minmax(120px,1fr) minmax(90px,.7fr) 132px;align-items:center;gap:14px;padding:0 18px}
.dir-head{padding-top:10px;padding-bottom:10px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.dir-list{list-style:none;margin:0;padding:0}
.dir-row{min-height:58px;border-bottom:1px solid var(--border);transition:background .15s}
.dir-row:last-of-type{border-bottom:0}
.dir-row:hover{background:color-mix(in srgb,var(--accent) 4%,var(--surface,#fff))}
.dir-name{display:flex;align-items:center;gap:11px;min-width:0;padding:9px 0;color:inherit;text-decoration:none}
.dir-name>span:last-child{min-width:0}
.dir-name strong{display:block;font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
a.dir-name:hover strong{color:var(--accent)}
.dir-name small{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-name .project-initial,.dir-name .avatar{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-weight:700;font-size:13px}
.dir-cell{min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dir-cell a{color:var(--ink);text-decoration:none}.dir-cell a:hover{color:var(--accent)}
.dir-meta{display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600}
.dir-actions{display:flex;align-items:center;justify-content:flex-end;gap:6px}
.dir-actions form{margin:0}
.dir-row:not(:hover) .dir-actions .button.small:not(.subtle){border-color:var(--border)}
.dir-empty{display:none;padding:28px 18px;text-align:center;font-size:13px;color:var(--muted)}
.dir-list.is-empty .dir-empty{display:block}
.dir-row.is-inactive .dir-name strong{color:var(--muted)}
.dir-row.is-inactive .avatar{opacity:.5}
em.you{font-style:normal;font-size:10.5px;font-weight:700;padding:1px 6px;margin-left:6px;border-radius:5px;background:var(--accent-soft);color:var(--accent);vertical-align:1px}
@media(max-width:900px){.dir-head{display:none}.dir-row{grid-template-columns:1fr auto;gap:2px 12px;padding:10px 14px}.dir-row .dir-cell{grid-column:1;padding-left:45px}.dir-row .dir-actions{grid-column:2;grid-row:1}.dir-toolbar{flex-wrap:wrap}}

/* Users: roles, extra access and switches */
.role-legend{display:flex;flex-wrap:wrap;gap:8px 18px;margin:-6px 0 16px;font-size:12px;color:var(--muted)}
.role-legend span{display:inline-flex;align-items:center;gap:7px}
.role-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:700;background:var(--surface-2);color:var(--muted)}
.role-badge.role-admin{background:#fdeee3;color:#c4520c}.role-badge.role-sales{background:#e3eefb;color:#1d5fa8}.role-badge.role-engineer{background:#e2f3ea;color:#1f7a4d}.role-badge.role-technician{background:#fbf0d2;color:#8a5d00}
:root[data-theme="dark"] .role-badge.role-admin{background:#ff8a3d26;color:#ffa264}:root[data-theme="dark"] .role-badge.role-sales{background:#82a9d126;color:#9cbde0}:root[data-theme="dark"] .role-badge.role-engineer{background:#7cb39a26;color:#93c6ae}:root[data-theme="dark"] .role-badge.role-technician{background:#d0ab7226;color:#ddbb86}
.perm-chips{display:flex;flex-wrap:wrap;gap:5px;white-space:normal}
.perm-chip{padding:2px 8px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--surface-2);color:var(--ink);border:1px solid var(--border)}
.perm-chip.all{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-border)}
.user-head,.user-list .dir-row{grid-template-columns:minmax(220px,1.6fr) 110px minmax(160px,1.4fr) 110px 170px}
fieldset.role-pick,fieldset.perm-switches{margin:2px 0 0;padding:0;border:0;min-width:0}
fieldset.role-pick legend,fieldset.perm-switches legend{padding:0;margin-bottom:8px;font-size:12px;font-weight:600;color:var(--muted)}
.role-pick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.role-pick legend{grid-column:1/-1}
.role-pick label{position:relative;margin:0;cursor:pointer}
.role-pick input{position:absolute;opacity:0;inset:0;margin:0}
.role-pick label>span{display:flex;flex-direction:column;gap:2px;height:100%;padding:10px 12px;border:1px solid var(--border);border-radius:11px;transition:border-color .15s,background .15s,box-shadow .15s}
.role-pick strong{font-size:13px;color:var(--ink)}.role-pick small{font-size:11.5px;color:var(--muted);line-height:1.35}
.role-pick label:hover>span{border-color:var(--accent-border)}
.role-pick input:checked+span{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent-soft)}
.role-pick input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.perm-switches{display:flex;flex-direction:column;border:1px solid var(--border)!important;border-radius:12px;overflow:hidden}
.perm-switches legend{float:left;width:100%;padding:10px 12px 0!important}
.switch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0;padding:10px 12px;border-top:1px solid var(--border);cursor:pointer}
.perm-switches legend+.switch-row{border-top:0}
.switch-row strong{display:block;font-size:13px;color:var(--ink)}.switch-row small{display:block;font-size:11.5px;color:var(--muted)}
input.switch{appearance:none;-webkit-appearance:none;flex:none;width:38px;height:22px;min-height:0;margin:0;padding:0;border:0;border-radius:999px;background:#c9ced6;position:relative;cursor:pointer;transition:background .2s;box-shadow:none}
input.switch::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s var(--ease,ease)}
input.switch:checked{background:linear-gradient(140deg,#ff8a3d,#e2600f)}
input.switch:checked::after{transform:translateX(16px)}
input.switch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:root[data-theme="dark"] input.switch{background:#3a4352}
@media(max-width:700px){.role-pick{grid-template-columns:1fr}}

/* Dashboard banner: the Project Desk grid and glow */
:root[data-theme] .dash-heading{position:relative;overflow:hidden;margin-bottom:22px;padding:28px 30px;border-radius:18px;color:#fff;background:radial-gradient(520px 260px at 88% 130%,#ff8a3d55,transparent 70%),radial-gradient(420px 220px at 10% -40%,#2a78d633,transparent 70%),linear-gradient(135deg,#121826,#1a2131 60%,#1d2232);box-shadow:0 18px 40px #0d111833;isolation:isolate}
:root[data-theme] .dash-heading::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#ffffff0a 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,#ffffff0a 1px,transparent 1px) 0 0/28px 28px;-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at 70% 50%,#000 30%,transparent 80%)}
:root[data-theme] .dash-heading::after{content:"";position:absolute;width:220px;height:220px;right:-60px;top:-90px;border-radius:50%;background:#ff8a3d;filter:blur(70px);opacity:.25;z-index:-1;animation:glow-drift 9s ease-in-out infinite alternate}
@keyframes glow-drift{to{transform:translate(-80px,60px) scale(1.2)}}
:root[data-theme] .dash-heading h1{color:#fff;font-size:30px}
:root[data-theme] .dash-heading .eyebrow{color:#ffa264}
:root[data-theme] .dash-heading p{color:#c4cad3}
:root[data-theme] .dash-heading .button.primary{color:#1b1206;background:linear-gradient(180deg,#ffa060,#ff8a3d);border-color:#ff8a3d}

/* KPI tiles */
:root[data-theme] .dash-kpi{position:relative;overflow:hidden;border-radius:14px}
:root[data-theme] .dash-kpi strong{font-variant-numeric:tabular-nums}
:root[data-theme] .dash-kpi::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--kpi,var(--tx-orange));opacity:.85;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
:root[data-theme] .dash-kpi:hover::after{transform:scaleX(1)}
:root[data-theme] .dash-kpi:has(.dash-dot.amber){--kpi:var(--tx-amber)}:root[data-theme] .dash-kpi:has(.dash-dot.blue){--kpi:var(--tx-blue)}:root[data-theme] .dash-kpi:has(.dash-dot.green){--kpi:var(--tx-green)}:root[data-theme] .dash-kpi:has(.dash-dot.red){--kpi:var(--tx-red)}

/* Cursor spotlight on cards (position set by ui.js) */
:root[data-theme] :is(.dash-kpi,.kb-card,.client-grid>.panel,.dash-card){--mx:50%;--my:50%}
:root[data-theme] :is(.dash-kpi,.kb-card,.client-grid>.panel)::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx) var(--my),color-mix(in srgb,var(--accent) 12%,transparent),transparent 65%)}
:root[data-theme] :is(.dash-kpi,.kb-card,.client-grid>.panel):hover::before{opacity:1}
:root[data-theme] .client-grid>.panel{position:relative;transition:transform .2s var(--ease),box-shadow .2s,border-color .2s}
:root[data-theme] .client-grid>.panel:hover{transform:translateY(-3px);box-shadow:var(--lift-shadow);border-color:var(--accent-border)}
:root[data-theme] :is(a.dash-kpi,.kb-card):hover{box-shadow:var(--lift-shadow);border-color:var(--accent-border)}

/* Lists */
:root[data-theme] :is(.dash-list a,.dash-timeline a,.dash-balances a,.cp-projects a){transition:background .15s,transform .2s var(--ease)}
:root[data-theme] :is(.dash-list a,.dash-timeline a):hover{transform:translateX(3px)}
:root[data-theme] .dash-chevron{transition:transform .2s var(--ease),color .2s}
:root[data-theme] .dash-list a:hover .dash-chevron{transform:translateX(3px);color:var(--accent)}

/* Tasks: tick animation */
:root[data-theme] .task-box{transition:transform .15s var(--ease),background .2s,border-color .2s}
:root[data-theme] .task-box:active{transform:scale(.88)}
:root[data-theme] .task-item{transition:opacity .35s var(--ease),transform .35s var(--ease)}
:root[data-theme] .task-item.completing .task-box{background:var(--tx-green);border-color:var(--tx-green);color:#fff;animation:tick-pop .35s var(--ease)}
:root[data-theme] .task-item.completing .task-box::after{content:"✓"}
:root[data-theme] .task-item.completing .task-body>strong{text-decoration:line-through;color:var(--muted)}
:root[data-theme] .task-item.completing{opacity:.45;transform:translateX(6px)}
@keyframes tick-pop{0%{transform:scale(.6)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* Toast countdown */
:root[data-theme] .alert.toast{position:relative;overflow:hidden;border-radius:12px}
:root[data-theme] .alert.toast.success::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:100%;background:linear-gradient(90deg,var(--tx-green),#3fcf98);transform-origin:left;animation:toast-timer 5s linear forwards}
@keyframes toast-timer{to{transform:scaleX(0)}}
:root[data-theme] .toast-icon{background:var(--tx-green)}
:root[data-theme] .toast.error .toast-icon{background:var(--tx-red)}

/* Entrance: heading writes in, then blocks fade up and list rows cascade one by one (backwards fill so nothing stays pinned afterwards) */
@keyframes rise{from{opacity:0;transform:translateY(10px)}}
@keyframes pop-in{from{opacity:0;transform:translateY(8px) scale(.985)}}
@keyframes row-in{from{opacity:0;transform:translateY(6px)}}
@keyframes write-in{from{clip-path:inset(-.25em 100% -.25em 0)}to{clip-path:inset(-.25em 0 -.25em 0)}}
:root[data-theme] :is(.page-heading,.cp-identity) h1{animation:write-in .42s cubic-bezier(.4,0,.2,1) .04s backwards}
:root[data-theme] :is(.page-heading,.cp-identity) :is(.eyebrow,p){animation:rise .38s var(--ease) .12s backwards}
:root[data-theme] .content>:not(.toast-stack):not(dialog):not(script):not(.page-heading){animation:rise .42s var(--ease) .16s backwards}
:root[data-theme] .content>:nth-child(n+3):not(.toast-stack):not(dialog):not(.page-heading){animation-delay:.2s}:root[data-theme] .content>:nth-child(n+4):not(.toast-stack):not(dialog):not(.page-heading){animation-delay:.24s}:root[data-theme] .content>:nth-child(n+5):not(.toast-stack):not(dialog):not(.page-heading){animation-delay:.28s}
:root[data-theme] .dash-heading{animation:rise .42s var(--ease) backwards}
:root[data-theme] :is(.dash-kpis,.kb-cards,.client-grid,.stats)>*{animation:pop-in .42s var(--ease) .18s backwards}
:root[data-theme] :is(.dash-kpis,.kb-cards,.client-grid,.stats)>:nth-child(2){animation-delay:.22s}
:root[data-theme] :is(.dash-kpis,.kb-cards,.client-grid,.stats)>:nth-child(3){animation-delay:.26s}
:root[data-theme] :is(.dash-kpis,.kb-cards,.client-grid,.stats)>:nth-child(4){animation-delay:.3s}
:root[data-theme] :is(.dash-kpis,.kb-cards,.client-grid,.stats)>:nth-child(n+5){animation-delay:.34s}
:root[data-theme] .dash-col>*{animation:rise .42s var(--ease) .24s backwards}
:root[data-theme] .dash-col>:nth-child(2){animation-delay:.3s}:root[data-theme] .dash-col>:nth-child(n+3){animation-delay:.36s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li){animation:row-in .34s var(--ease) .3s backwards}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(2){animation-delay:0.335s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(3){animation-delay:0.370s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(4){animation-delay:0.405s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(5){animation-delay:0.440s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(6){animation-delay:0.475s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(7){animation-delay:0.510s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(8){animation-delay:0.545s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(9){animation-delay:0.580s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(10){animation-delay:0.615s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(11){animation-delay:0.650s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(12){animation-delay:0.685s}
:root[data-theme] :is(tbody tr,.task-item,.dash-list li,.dash-timeline li,.dash-balances li,.cp-projects li,.cp-timeline li,.dash-feed li):nth-child(n+13){animation-delay:.7s}
:root[data-theme] .dash-bar{transform-box:fill-box;transform-origin:50% 100%;animation:bar-grow .7s var(--ease) .3s backwards}
:root[data-theme] .dash-month:nth-of-type(2) .dash-bar{animation-delay:.35s}:root[data-theme] .dash-month:nth-of-type(3) .dash-bar{animation-delay:.4s}:root[data-theme] .dash-month:nth-of-type(4) .dash-bar{animation-delay:.45s}:root[data-theme] .dash-month:nth-of-type(5) .dash-bar{animation-delay:.5s}:root[data-theme] .dash-month:nth-of-type(6) .dash-bar{animation-delay:.55s}
@keyframes bar-grow{from{transform:scaleY(0)}}
:root[data-theme] .dash-stagebar rect:not(.track){transform-box:fill-box;transform-origin:0 50%;animation:bar-sweep .8s var(--ease) .3s backwards}
@keyframes bar-sweep{from{transform:scaleX(0)}}

/* Smooth colour change when switching theme (class added by ui.js) */
:root.theme-switching,:root.theme-switching *,:root.theme-switching *::before,:root.theme-switching *::after{transition:background-color .35s ease,border-color .35s ease,color .35s ease,fill .35s ease!important}

/* Sign-in: split brand panel like Project Desk */
body.auth-page.auth-v2{min-height:100vh;margin:0;display:grid;place-items:center;padding:24px;background:radial-gradient(700px 400px at 20% 110%,#ff8a3d33,transparent 65%),#0d1118;color:#e7e9ed;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.auth-shell{width:min(980px,100%);min-height:560px;display:grid;grid-template-columns:1.05fr 1fr;border:1px solid #232b38;border-radius:22px;overflow:hidden;background:#11161f;box-shadow:0 30px 80px #0008;animation:rise .6s cubic-bezier(.2,.7,.2,1) backwards}
.auth-aside{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:30px;padding:40px;background:radial-gradient(420px 300px at 30% 110%,#ff8a3d40,transparent 70%),linear-gradient(160deg,#121a2b,#0f1522);isolation:isolate;overflow:hidden}
.auth-aside::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(#ffffff0b 1px,transparent 1px) 0 0/30px 30px,linear-gradient(90deg,#ffffff0b 1px,transparent 1px) 0 0/30px 30px;-webkit-mask-image:linear-gradient(180deg,#000,transparent 95%);mask-image:linear-gradient(180deg,#000,transparent 95%)}
.auth-aside::after{content:"";position:absolute;width:260px;height:260px;left:-60px;bottom:-120px;border-radius:50%;background:#ff8a3d;filter:blur(90px);opacity:.35;z-index:-1;animation:glow-drift 10s ease-in-out infinite alternate}
.auth-aside .auth-brand{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:700;letter-spacing:-.5px;color:#fff}
.auth-aside .logo-mark{background:linear-gradient(140deg,#ff8a3d,#e2600f);color:#fff;box-shadow:0 8px 20px #e2600f55}
.auth-aside .logo-mark span{color:#ffe1cc}
.auth-aside h2{margin:0 0 10px;font-size:15px;font-weight:700;color:#fff}
.auth-aside p{margin:0;max-width:340px;font-size:15px;line-height:1.6;color:#aeb6c2}
.auth-chips{display:flex;flex-wrap:wrap;gap:8px}
.auth-chips span{padding:6px 12px;border:1px solid #2c3546;border-radius:999px;font-size:12px;color:#c9ced6;background:#ffffff06;animation:pop-in .5s cubic-bezier(.2,.7,.2,1) backwards}
.auth-chips span:nth-child(2){animation-delay:.05s}.auth-chips span:nth-child(3){animation-delay:.1s}.auth-chips span:nth-child(4){animation-delay:.15s}.auth-chips span:nth-child(5){animation-delay:.2s}.auth-chips span:nth-child(6){animation-delay:.25s}
.auth-foot{font-size:12px;color:#7d8694}
.auth-v2 .auth-card{width:auto;max-width:none;margin:0;padding:48px 44px;border:0;border-radius:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;justify-content:center;color:#e7e9ed}
.auth-v2 .auth-card .eyebrow{color:#ff9d5c}
.auth-v2 .auth-card h1{color:#fff;font-size:30px;letter-spacing:-.02em}
.auth-v2 .auth-card>p,.auth-v2 .auth-card .fine{color:#98a1ae}
.auth-v2 label{color:#c3c9d2}
.auth-v2 input{background:#0f141c;border:1px solid #2f3848;color:#fff;border-radius:10px}
.auth-v2 input:focus{border-color:#ff8a3d;box-shadow:0 0 0 3px #ff8a3d26;outline:none}
.auth-v2 .button.primary{width:100%;background:linear-gradient(180deg,#ffa060,#ff8a3d);border:0;color:#1b1206;font-weight:700;border-radius:10px;box-shadow:0 10px 24px #ff8a3d33;transition:transform .15s,box-shadow .15s}
.auth-v2 .button.primary:hover{transform:translateY(-1px);box-shadow:0 14px 30px #ff8a3d4d}
.auth-v2 .button.primary span{transition:transform .2s}.auth-v2 .button.primary:hover span{transform:translateX(4px)}
@media(max-width:820px){.auth-shell{grid-template-columns:1fr;min-height:0}.auth-aside{padding:28px;gap:18px}.auth-aside p{font-size:14px}.auth-foot{display:none}.auth-v2 .auth-card{padding:32px 26px}}

@media(max-width:700px){:root[data-theme] .dash-heading{padding:22px 20px;border-radius:16px}:root[data-theme] .dash-heading h1{font-size:24px}}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* Original TECQX artwork, unchanged on a light backing for both themes. */
.tecqx-logo{display:inline-flex;flex-shrink:0}.tecqx-logo img{display:block;width:132px;height:auto;max-width:100%}.brand:has(.tecqx-logo){flex-wrap:wrap;gap:10px}.brand:has(.tecqx-logo) .brand-word{display:block}.form-panel fieldset{border:1px solid var(--border,#d9dce3);border-radius:10px;padding:16px;margin:18px 0}.form-panel legend{padding:0 8px;font-weight:600}
/* Trading */
.trade-tabs{margin:0 0 22px;padding:0;overflow-x:auto}
.trade-doc .section-heading{align-items:flex-start}
.trade-doc h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.trade-doc-actions,.trade-buttons{display:flex;gap:8px;flex-wrap:wrap}
.trade-buttons form{margin:0}
.trade-chain a{color:var(--accent);font-weight:600}
.trade-totals{max-width:340px;margin:18px 0 0 auto}
.trade-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-bottom:22px}
.trade-steps .panel{margin:0}
.trade-convert{display:grid;gap:8px;padding:14px 0;border-top:1px solid var(--border)}
.trade-convert label{margin:0}
.trade-payment{padding:20px 23px;border-top:1px solid var(--border)}
.trade-howto li{margin-bottom:8px}
.trade-howto code{display:block;margin-top:6px;padding:8px;border-radius:6px;background:var(--surface-2,#f4f2ef);font-size:11px;max-width:none}
.print-logo{display:block;height:auto;margin-bottom:12px}
.dn-sign{margin-top:60px}
.sign-line{border-top:1px solid #999;padding-top:6px;margin-top:50px;font-size:11px;color:#777}
@media print{.trade-print .print-toolbar{display:none}}
.sidebar .brand{margin-bottom:26px}