/* FRONTLINE FINAL PAGE + RESPONSIVE PASS */

/* HOME */
html body #app .workbench-page{display:flex;flex-direction:column;gap:var(--space-3);padding:0 0 var(--space-8)}
html body #app .workbench-page .wb-hero{
  min-height:auto;padding:var(--space-4);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);
  background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:none
}
html body #app .workbench-page .wb-hero:before{display:none}
html body #app .workbench-page .wb-hero>div>span{font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:.06em;color:var(--text-tertiary)}
html body #app .workbench-page .wb-hero h1{margin:var(--space-1) 0 0;font-size:var(--text-xl);font-weight:var(--weight-semibold);color:var(--text-primary)}
html body #app .workbench-page .wb-hero p{margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--text-secondary)}
html body #app .workbench-page .wb-grid{gap:var(--space-3)}
html body #app .wb-action-main{min-height:var(--row-h);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);box-shadow:none}
html body #app .wb-action-main:hover{background:var(--bg-raised)}
html body #app .wb-personal-list>button{min-height:var(--row-h);padding:var(--space-2) var(--space-3);border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;background:var(--bg-surface);color:var(--text-primary)}
html body #app .wb-personal-list>button:hover{background:var(--bg-raised)}

/* FLEET */
html body #app .professional-fleet .fleet-command-grid{gap:var(--space-3);margin-bottom:var(--space-3)}
html body #app .professional-fleet .fleet-command-panel{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:none}
html body #app .professional-fleet .fleet-command-panel>header{min-height:auto;padding:var(--space-3);background:var(--bg-surface);border-bottom:1px solid var(--border)}
html body #app .professional-fleet .fleet-action-queue>button{
  min-height:var(--row-h);padding:var(--space-2) var(--space-3);background:var(--bg-surface);border:0;border-bottom:1px solid var(--border-subtle);border-radius:0;color:var(--text-primary)
}
html body #app .professional-fleet .fleet-action-queue>button:hover{background:var(--bg-raised)}
html body #app .fleet-readiness{padding:0}
html body #app .fleet-readiness-meter{background:var(--bg-raised);border-radius:var(--radius-full);overflow:hidden}
html body #app .fleet-readiness-meter>i{background:var(--accent)}
html body #app .fleet-load-more{min-height:var(--row-h);background:var(--bg-surface);border-top:1px solid var(--border);color:var(--text-secondary)}
html body #app .fleet-load-more button{min-height:var(--control-h-sm);padding:0 var(--space-3);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary)}

/* MAINTENANCE */
html body #app .maintenance-task-page{display:flex;flex-direction:column;gap:var(--space-3)}
html body #app .maintenance-page-actions{display:flex;justify-content:flex-end;gap:var(--space-2);margin:0}
html body #app .maintenance-add-btn{min-height:var(--control-h);padding:0 var(--space-4);background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--text-on-accent);box-shadow:none}
html body #app .maintenance-management-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3)}
html body #app .maintenance-task-panel,
html body #app .maintenance-history-panel{overflow:hidden;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:none}
html body #app .maintenance-task-row,
html body #app .maintenance-history-row{min-height:var(--row-h);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}
html body #app .maintenance-task-row:hover,
html body #app .maintenance-history-row:hover{background:var(--bg-raised)}
html body #app .maintenance-source-health{padding:var(--space-3);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary)}

/* TIRES / BRAKES */
html body #app .tire-density-v7{display:flex;flex-direction:column;gap:var(--space-3)}
html body #app .tire-density-v7 .tire-command-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2)}
html body #app .tire-density-v7 .tire-health-metrics-v7{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-2)}
html body #app .tire-density-v7 .tire-inline-queue{margin:0;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-surface);overflow:hidden}
html body #app .tire-density-v7 .tire-inline-queue>header{min-height:auto;padding:var(--space-3);background:var(--bg-surface);border-bottom:1px solid var(--border)}
html body #app .tire-density-v7 .tire-mode-bar{min-height:auto;margin:0;padding:var(--space-3);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)}
html body #app .tire-density-v7 .tire-inspection-v4{margin:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden}
html body #app .tire-density-v7 .tire-inspection-v4>header{padding:var(--space-3);background:var(--bg-surface);border-bottom:1px solid var(--border)}
html body #app .inspection-grid-head{background:var(--bg-raised);border-bottom:1px solid var(--border);color:var(--text-tertiary);font-size:var(--text-2xs)}
html body #app .inspection-row-v4{min-height:var(--row-h);border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}
html body #app .inspection-row-v4:nth-child(even){background:var(--bg-surface)}
html body #app .inspection-row-v4:hover{background:var(--bg-raised)}
html body #app .tire-inspection-v4>footer{min-height:auto;padding:var(--space-3);background:var(--bg-surface);border-top:1px solid var(--border)}

/* RECRUITING / ONBOARDING / OFFBOARDING */
html body #app .recruiting-page,
html body #app .az-recruiting{padding:0 0 var(--space-8)}
html body #app .recruiting-head{padding:0 0 var(--space-3);align-items:center}
html body #app .recruiting-head h1{font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--text-primary)}
html body #app .recruiting-head p{font-size:var(--text-xs);color:var(--text-secondary)}
html body #app .recruit-toolbar,
html body #app .board-toolbar,
html body #app .board-filterbar{padding:var(--space-2);gap:var(--space-2);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)}
html body #app .viewtoggle{display:inline-flex;gap:var(--space-1);padding:var(--space-1);background:var(--bg-raised);border:1px solid var(--border);border-radius:var(--radius-sm)}
html body #app .viewtoggle button{min-height:var(--control-h-sm);padding:0 var(--space-3);background:transparent;border:0;border-radius:var(--radius-xs);color:var(--text-secondary)}
html body #app .viewtoggle button.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}
html body #app .kanban-scroll{padding:var(--space-2) 0}
html body #app .kanban-col{min-width:280px;max-width:340px}

/* META */
html body #app .meta-dashboard{padding:0 0 var(--space-8)}
html body #app .meta-head{padding:0 0 var(--space-3);align-items:center}
html body #app .meta-head h1{font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--text-primary)}
html body #app .meta-toolbar{padding:var(--space-2);background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md)}
html body #app .meta-ranges{display:flex;gap:var(--space-1);padding:var(--space-1);background:var(--bg-raised);border-radius:var(--radius-sm)}
html body #app .meta-ranges button{min-height:var(--control-h-sm);padding:0 var(--space-3);background:transparent;border:0;border-radius:var(--radius-xs);color:var(--text-secondary)}
html body #app .meta-ranges button.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}
html body #app .meta-account-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-3)}
html body #app .meta-charts-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-3)}
html body #app .meta-table-wrap{overflow:auto;border:1px solid var(--border);border-radius:var(--radius-md)}
html body #app .meta-table thead th{position:sticky;top:0;z-index:var(--z-sticky)}

/* USERS & ACCESS */
html body #app .access-page{padding:0 0 var(--space-8)}
html body #app .access-title{margin:0 0 var(--space-3);align-items:center}
html body #app .access-title h1{font-size:var(--text-2xl);font-weight:var(--weight-semibold);color:var(--text-primary)}
html body #app .access-layout{gap:var(--space-3)}
html body #app .access-users,
html body #app .access-editor,
html body #app .role-list,
html body #app .role-editor{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:none}
html body #app .access-users-head,
html body #app .access-editor-head{padding:var(--space-3);background:var(--bg-surface);border-bottom:1px solid var(--border)}
html body #app .access-user-row{min-height:var(--row-h);padding:var(--space-2) var(--space-3);border-bottom:1px solid var(--border-subtle);background:var(--bg-surface)}
html body #app .access-user-row:hover{background:var(--bg-raised)}
html body #app .access-primary{min-height:var(--control-h);padding:0 var(--space-4);background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-sm);color:var(--text-on-accent);box-shadow:none}

/* OVERLAYS / MODALS */
html body #app .fleet-modal-overlay,
html body #app .modal-overlay,
html body #app .task-modal-overlay{background:color-mix(in srgb,var(--legacy-palette-2063) 46%,transparent);backdrop-filter:none}
html body #app .fleet-modal-card,
html body #app .task-modal-card,
html body #app .modal-card{background:var(--bg-overlay);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);color:var(--text-primary)}
html body #app .fleet-modal-card>header,
html body #app .task-modal-card>header,
html body #app .modal-card>header{background:var(--bg-surface);border-bottom:1px solid var(--border)}

/* PHASE 6 RESPONSIVE */
/* xl >=1440 default */

/* lg 1200–1439 */
@media(max-width:1439px){
  html body #app .wb-kpis,
  html body #app .maintenance-management-grid,
  html body #app .meta-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body #app .topbar .tz:nth-of-type(n+3){display:none}
  html body #app .meta-charts-row{grid-template-columns:1fr}
}

/* md 900–1199 */
@media(max-width:1199px){
  :root{--sidebar-w:64px;--page-pad-x:var(--space-5)}
  html body #app .shell{grid-template-columns:var(--sidebar-w) minmax(0,1fr)}
  html body #app .shell>aside{width:var(--sidebar-w)}
  html body #app .brandtxt,
  html body #app .nav-item b,
  html body #app .nav-group-head b,
  html body #app .nav-sub,
  html body #app .sidebottom .user>div,
  html body #app .sidebottom>button span{display:none}
  html body #app .nav-item,
  html body #app .nav-group-head{justify-content:center;padding:0}
  html body #app .nav-item span,
  html body #app .nav-group-head span{margin:0}
  html body #app .fleet-table-v5 th[data-col="owner"],
  html body #app .fleet-table-v5 td[data-col="owner"],
  html body #app .fleet-table-v5 th[data-col="notes"],
  html body #app .fleet-table-v5 td[data-col="notes"]{display:none}
  html body #app .tire-density-v7 .tire-command-strip,
  html body #app .tire-density-v7 .tire-health-metrics-v7{grid-template-columns:repeat(3,minmax(0,1fr))}
  html body #app .access-layout{grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr)}
}

/* sm <900 */
@media(max-width:899px){
  :root{--page-pad-x:var(--space-4)}
  html body #app .shell{display:block}
  html body #app .shell>aside{position:fixed;left:0;top:0;bottom:0;z-index:var(--z-drawer);width:248px;transform:translateX(-100%);transition:transform var(--dur) var(--ease);box-shadow:var(--shadow-lg)}
  html body #app .shell.open>aside{transform:translateX(0)}
  html body #app .shell.open .overlay{display:block}
  html body #app .brandtxt,
  html body #app .nav-item b,
  html body #app .nav-group-head b,
  html body #app .sidebottom .user>div,
  html body #app .sidebottom>button span{display:block}
  html body #app .nav-sub{display:block}
  html body #app .nav-item,
  html body #app .nav-group-head{justify-content:flex-start;padding:0 var(--space-3)}
  html body #app .mobile{display:flex}
  html body #app .topbar .date,
  html body #app .topbar .tz{display:none}
  html body #app .topbar .search{max-width:42vw}
  html body #app .wb-kpis,
  html body #app .maintenance-management-grid,
  html body #app .meta-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #app .meta-account-cards{grid-template-columns:1fr}
  html body #app .kanban-board,
  html body #app .board-columns{display:flex;overflow-x:auto;scroll-snap-type:x mandatory}
  html body #app .kanban-col,
  html body #app .board-column{min-width:min(84vw,340px);scroll-snap-align:start}
  html body #app .fleet-table-wrap{display:none}
  html body #app .fleet-mobile-cards{display:flex}
  html body #app .access-layout{grid-template-columns:1fr}
  html body #app .approved-workspace{grid-template-columns:1fr}
  html body #app .approved-sidebar{border-right:0;border-bottom:1px solid var(--border)}
}

/* xs <640 */
@media(max-width:639px){
  :root{--page-pad-x:var(--space-3);--page-pad-y:var(--space-3)}
  html body #app .content{padding:var(--page-pad-y) var(--page-pad-x)}
  html body #app .wb-kpis,
  html body #app .maintenance-management-grid,
  html body #app .meta-kpis{grid-template-columns:1fr}
  html body #app .tire-density-v7 .tire-command-strip,
  html body #app .tire-density-v7 .tire-health-metrics-v7{grid-template-columns:repeat(2,minmax(0,1fr))}
  html body #app .workbench-page .wb-hero{align-items:flex-start;flex-direction:column}
  html body #app .meta-toolbar,
  html body #app .recruit-toolbar,
  html body #app .board-toolbar{overflow-x:auto}
  html body #app .genericcards{grid-template-columns:1fr}
}

/* MERGED APPROVED TIRE CSS START */

/* Approved truck / trailer cards. Scoped to prevent legacy tire CSS collisions. */
.approved-tires{border:1px solid var(--border,var(--legacy-palette-2064));border-radius:12px;overflow:hidden;background:var(--panel,var(--legacy-palette-024))}
.approved-head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:16px 20px}
.approved-head h3{margin:0;font-size:22px}.approved-head p{margin:5px 0 0;font-size:14px}.approved-head>span{font-size:13px}
.approved-scroll{overflow-x:auto;background:var(--legacy-palette-2065)}
.approved-stage{position:relative;container-type:inline-size;aspect-ratio:1024/1158;max-width:850px;min-width:580px;margin:0 auto;overflow:hidden;color:var(--legacy-palette-2066)}
.approved-art{position:absolute;display:block;left:0;top:-17.4439%;width:100%;height:auto;max-width:none;pointer-events:none}
.approved-reading{position:absolute;box-sizing:border-box;width:26%;background:var(--legacy-palette-2067);border:1px solid var(--legacy-palette-2068);border-radius:7px;padding:1cqw;display:flex;flex-direction:column;gap:.3cqw;z-index:2;color:var(--legacy-palette-2066)}
.approved-reading>b{font-size:clamp(11px,1.65cqw,15px);line-height:1.25;white-space:nowrap;letter-spacing:-.25px}
.approved-number{display:inline-flex;align-items:center;justify-content:center;background:var(--legacy-palette-2069);color:white;border-radius:50%;width:2.25cqw;height:2.25cqw;font-size:1.65cqw}
.approved-reading>small{font-size:clamp(10px,1.45cqw,13px);color:var(--legacy-palette-2070)}
.approved-fields{display:grid;grid-template-columns:1fr 1fr;gap:1cqw}
.approved-fields label{font-size:clamp(11px,1.65cqw,14px);color:var(--legacy-palette-2071);display:flex;flex-direction:column;gap:.35cqw}
.approved-fields input{box-sizing:border-box;width:100%;min-width:0;height:4.5cqw;min-height:27px;padding:.4cqw;font-size:clamp(13px,2.1cqw,18px);text-align:center;background:var(--legacy-palette-024);color:var(--legacy-palette-2072);border:1px solid var(--legacy-palette-2073);border-radius:5px}
.approved-fields input::placeholder{color:var(--legacy-palette-2074);opacity:1}.approved-fields input:disabled{opacity:.8}
.approved-history{border:0;background:transparent;color:var(--legacy-palette-2075);padding:0;text-align:left;font-size:clamp(10px,1.3cqw,12px);min-height:0;margin-top:auto;cursor:pointer}
.approved-reading.bad{border-left:3px solid var(--legacy-palette-2076)}.approved-reading.warn{border-left:3px solid var(--legacy-palette-2077)}
.approved-reading.is-focused{outline:2px solid var(--legacy-palette-2069);outline-offset:2px}
.approved-wheel{position:absolute;width:4.5%;aspect-ratio:1;height:auto;transform:translate(-50%,-50%);border:0;background:transparent;z-index:3;border-radius:50%;cursor:pointer;padding:0}
.approved-wheel:focus-visible{outline:3px solid var(--legacy-palette-2078);outline-offset:2px}
.approved-footer{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 20px}
.approved-footer>span{font-size:13px}.approved-footer button{white-space:nowrap;min-height:40px}
@media(max-width:639px){.approved-head{padding:12px;align-items:flex-start;flex-direction:column;gap:4px}.approved-head h3{font-size:20px}.approved-footer{padding:12px;align-items:stretch;flex-direction:column;gap:8px}.approved-scroll{scrollbar-width:thin}.approved-head p:after{content:" · Swipe diagram sideways";font-size:12px}.approved-stage{min-width:580px}}

.approved-head,.approved-footer{background:var(--legacy-palette-2079);color:var(--legacy-palette-2080)}.approved-head h3,.approved-head p,.approved-head>span,.approved-footer>span{color:var(--legacy-palette-2080)}.approved-fields input{height:3.9cqw}.approved-history{line-height:1.15}.approved-head{border-bottom:1px solid var(--legacy-palette-2081)}.approved-footer{border-top:1px solid var(--legacy-palette-2081)}

.approved-reading[data-approved-pos="LF"],.approved-reading[data-approved-pos="RF"]{height:13.5%}

/* Compact viewport-fit diagram plus permanent left history/comments panel */
.approved-workspace{display:grid;grid-template-columns:280px minmax(0,1fr);align-items:start;background:var(--legacy-palette-2065)}
.approved-sidebar{min-width:0;align-self:stretch;background:var(--panel,var(--legacy-palette-1158));border-right:1px solid var(--border,var(--legacy-palette-2082))}
.approved-inspector{padding:14px;display:flex;flex-direction:column;gap:10px;color:var(--text,var(--legacy-palette-2083));font-size:13px;max-height:calc(100dvh - 300px);overflow-y:auto;box-sizing:border-box}
.approved-inspector header{padding:0;display:block}.approved-inspector header small{font-size:11px;color:var(--muted,var(--legacy-palette-2084))}
.approved-inspector h3{font-size:17px;margin:5px 0;line-height:1.25}.approved-inspector p{margin:4px 0;line-height:1.4}
.approved-inspector-fields{display:grid;grid-template-columns:1fr 1fr;gap:8px}.approved-inspector label{display:flex;flex-direction:column;gap:5px;font-size:12px}
.approved-inspector input{width:100%;min-width:0;box-sizing:border-box;height:34px;font-size:15px}
.approved-inspector textarea{width:100%;box-sizing:border-box;min-height:65px;height:65px;resize:vertical;font-size:13px}
.approved-inspector>button{min-height:34px;font-size:12px}.approved-inspector h4{margin:5px 0 0;font-size:14px}
.approved-inspector [data-side-message]{font-size:12px;color:var(--legacy-palette-2085)}
.approved-history-list article{border-top:1px solid var(--border,var(--legacy-palette-2086));padding:9px 0}.approved-history-list time{display:block;font-size:11px;color:var(--muted,var(--legacy-palette-2087))}.approved-history-list b{display:block;font-size:13px;margin-top:4px}.approved-history-list p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px}
.approved-tires .approved-head{padding:9px 14px}.approved-tires .approved-head h3{font-size:18px}.approved-tires .approved-head p{font-size:12px;margin-top:3px}.approved-tires .approved-footer{padding:8px 12px}.approved-tires .approved-footer button{min-height:32px;font-size:12px}
.approved-tires .approved-stage{width:clamp(430px,calc((100dvh - 380px)*.884),620px);max-width:100%;min-width:430px}
.approved-tires .approved-reading{padding:.7cqw;gap:.15cqw;border-radius:5px}
.approved-tires .approved-reading>b{font-size:clamp(9px,1.65cqw,12px);letter-spacing:-.3px}
.approved-tires .approved-reading>small{display:none}
.approved-tires .approved-fields label{font-size:clamp(9px,1.7cqw,12px);gap:0}
.approved-tires .approved-fields input{height:5cqw;min-height:21px;font-size:clamp(11px,2.3cqw,14px);background:var(--legacy-palette-024);color:var(--legacy-palette-2080);padding:0}
.approved-tires .approved-history{font-size:clamp(8px,1.6cqw,11px);line-height:1}
.approved-tires .approved-number{min-width:13px;min-height:13px;font-size:10px}
.approved-head p:after{content:none}
@media(max-width:899px){.approved-workspace{grid-template-columns:240px minmax(0,1fr)}}
@media(max-width:899px){.approved-workspace{grid-template-columns:1fr}.approved-sidebar{border-right:0;border-bottom:1px solid var(--border,var(--legacy-palette-2082))}.approved-inspector{max-height:320px}.approved-tires .approved-stage{width:480px}.approved-tires .approved-head{flex-direction:row}.approved-head>span{font-size:11px}}

/* Wider live measurement cards, unchanged vehicle height */
.approved-tires .approved-stage{--art-width:clamp(430px,calc((100dvh - 380px)*.884),620px);width:100%;max-width:none;min-width:600px;height:calc(var(--art-width)*1.130859375);aspect-ratio:auto}
.approved-tires .approved-art{width:var(--art-width);left:calc(50% - var(--art-width)*.5);top:calc(var(--art-width)*-.197265625)}
.approved-tires .approved-reading{width:calc(50% - var(--art-width)*.22 - 12px);left:12px;padding:6px 9px;gap:3px;cursor:pointer}
.approved-tires .approved-reading[data-approved-pos^="R"]{left:auto;right:12px}
.approved-tires .approved-reading>b{font-size:13px;line-height:16px;letter-spacing:0}
.approved-tires .approved-number{width:17px;height:17px;font-size:11px}
.approved-tires .approved-fields{gap:8px}
.approved-tires .approved-fields label{font-size:11px;line-height:13px}
.approved-tires .approved-fields input{height:28px;min-height:28px;font-size:15px}
.approved-tires .approved-history{display:none}
.approved-tires .approved-wheel{width:calc(var(--art-width)*.055)}
.approved-tires .approved-reading.is-focused{background:var(--legacy-palette-2088);border-color:var(--legacy-palette-2089);outline:2px solid var(--legacy-palette-2089)}
@media(max-width:899px){.approved-tires .approved-stage{--art-width:430px;width:100%;min-width:600px}.approved-tires .approved-reading>b{font-size:11px}}

/* MERGED APPROVED TIRE CSS END */

/* Login responsive retained after legacy breakpoint cleanup */
@media(max-width:899px){
  html body #app .auth-copy,
  html body #app .auth-foot{display:none}
  html body #app .auth-wrap{right:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - var(--space-8)))}
  html body #app .login-card{border-radius:var(--radius-lg)}
}
@media(max-width:639px){
  html body #app .auth-wrap{width:calc(100vw - var(--space-5))}
  html body #app .login-card{padding:var(--space-6)}
  html body #app .login-card h2{font-size:var(--text-2xl)}
}