/* QWERTY Mobile Role Experiences v106
 * Phone: 360-599px | Tablet: 600-1024px | Desktop: 1025px+
 */

.qmr-mobile-view{min-width:0;overflow-x:clip}
.qmr-page,.qmr-page *{box-sizing:border-box}
.qmr-page{--qmr-line:var(--border,#dbe4f0);--qmr-surface:var(--surface,#fff);--qmr-soft:var(--surface-2,#f6f8fc);--qmr-text:var(--text,#172033);--qmr-muted:var(--text-soft,#64748b);width:min(100%,1120px);min-width:0;margin-inline:auto;color:var(--qmr-text);overflow-x:clip}
.qmr-page button,.qmr-page a,.qmr-primary-nav button{min-width:44px;min-height:44px;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#mobilePrimaryNav.qmr-primary-nav [data-qedu-context-switch]{position:relative;background:linear-gradient(145deg,var(--accent,#6d28d9),#2563eb)!important;color:#fff!important;box-shadow:0 7px 17px color-mix(in srgb,var(--accent,#6d28d9) 28%,transparent)!important}#mobilePrimaryNav.qmr-primary-nav [data-qedu-context-switch] i,#mobilePrimaryNav.qmr-primary-nav [data-qedu-context-switch] span{color:#fff!important}

.qmr-hero{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;min-width:0;padding:18px;margin-bottom:10px;overflow:hidden;border:1px solid var(--qmr-line);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#6d28d9) 11%,var(--qmr-surface)),var(--qmr-surface) 70%);box-shadow:var(--shadow-sm,0 5px 16px rgba(15,23,42,.06))}
.qmr-hero:after{content:"";position:absolute;right:-58px;bottom:-82px;width:190px;aspect-ratio:1;border:28px solid color-mix(in srgb,var(--accent,#6d28d9) 8%,transparent);border-radius:50%;pointer-events:none}
.qmr-hero-copy{position:relative;z-index:1;min-width:0;max-width:760px}
.qmr-eyebrow{display:block;margin-bottom:4px;color:var(--accent,#6d28d9);font-size:.65rem;font-weight:850;letter-spacing:.11em;text-transform:uppercase}
.qmr-hero h2{margin:0;color:var(--qmr-text);font-size:clamp(1.12rem,4.2vw,1.55rem);line-height:1.18;overflow-wrap:anywhere}
.qmr-hero-copy>strong{display:block;margin-top:5px;font-size:.76rem;line-height:1.3}
.qmr-hero p{max-width:700px;margin:5px 0 0;color:var(--qmr-muted);font-size:.76rem;line-height:1.48;overflow-wrap:anywhere}
.qmr-readonly{position:relative;z-index:1;flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 10px;border:1px solid #c4b5fd;border-radius:999px;background:#f5f3ff;color:#6d28d9;font-size:.64rem;font-weight:850;white-space:nowrap}

[data-qmr-state-host]:empty{display:none}
.qmr-state{display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:10px;margin-bottom:10px;padding:10px 12px;border:1px solid;border-radius:14px}
.qmr-state>i{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;font-size:1rem}
.qmr-state>span{min-width:0;display:flex;flex-direction:column}.qmr-state strong{font-size:.75rem}.qmr-state small{margin-top:2px;font-size:.65rem;line-height:1.35;overflow-wrap:anywhere}.qmr-state button{padding:0 12px;border:1px solid currentColor;border-radius:10px;background:transparent;color:inherit;font:inherit;font-size:.7rem;font-weight:800;cursor:pointer}
.qmr-state-offline{border-color:#fed7aa;background:#fff7ed;color:#9a3412}.qmr-state-offline>i{background:#ffedd5}
.qmr-state-error{border-color:#fecaca;background:#fef2f2;color:#b91c1c}.qmr-state-error>i{background:#fee2e2}

.qmr-security{display:flex;align-items:center;gap:6px;min-width:0;margin-bottom:10px;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:none}
.qmr-security::-webkit-scrollbar{display:none}
.qmr-security span{flex:0 0 auto;display:inline-flex;align-items:center;gap:5px;min-height:32px;padding:0 9px;border:1px solid var(--qmr-line);border-radius:999px;background:var(--qmr-surface);font-size:.61rem;font-weight:780;white-space:nowrap}
.qmr-security-safe{color:#0f766e}.qmr-security-info{color:#1d4ed8}.qmr-security-warn{color:#b45309}.qmr-security-neutral{color:var(--qmr-muted)}

.qmr-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:10px}
.qmr-kpi{position:relative;min-width:0;min-height:102px;display:grid;grid-template-columns:36px minmax(0,1fr) 10px;align-items:start;gap:8px;padding:11px;border:1px solid var(--qmr-line);border-radius:15px;background:var(--qmr-surface);color:var(--qmr-text);box-shadow:var(--shadow-sm,0 4px 12px rgba(15,23,42,.04));font:inherit;text-align:left;overflow:hidden}
button.qmr-kpi{cursor:pointer;transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}
button.qmr-kpi:active{transform:scale(.985)}
.qmr-kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--qmr-tone,#2563eb)}
.qmr-kpi-icon{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--qmr-tone,#2563eb) 14%,var(--qmr-surface));color:var(--qmr-tone,#2563eb)}
.qmr-kpi-copy{min-width:0;display:flex;flex-direction:column}.qmr-kpi-copy small{color:var(--qmr-muted);font-size:.64rem;line-height:1.22;overflow-wrap:anywhere}.qmr-kpi-copy strong{margin-top:3px;color:var(--qmr-text);font-size:1.02rem;line-height:1.12;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.qmr-kpi-copy em{display:-webkit-box;margin-top:4px;overflow:hidden;color:var(--qmr-muted);font-size:.58rem;font-style:normal;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}.qmr-kpi-arrow{align-self:center;color:var(--qmr-muted);font-size:.62rem}
.qmr-kpi.is-unavailable{background:color-mix(in srgb,var(--qmr-soft) 80%,var(--qmr-surface));box-shadow:none}.qmr-kpi.is-unavailable .qmr-kpi-icon{filter:grayscale(.6);opacity:.72}
.qmr-kpi.is-loading .qmr-kpi-copy strong{width:42px;color:transparent;border-radius:6px;background:linear-gradient(100deg,var(--qmr-soft) 25%,color-mix(in srgb,var(--qmr-line) 62%,var(--qmr-soft)) 45%,var(--qmr-soft) 65%);background-size:220% 100%;animation:qmr-shimmer 1.15s linear infinite}

.qmr-panel{min-width:0;margin-bottom:10px;padding:12px;border:1px solid var(--qmr-line);border-radius:16px;background:var(--qmr-surface);box-shadow:var(--shadow-sm,0 4px 14px rgba(15,23,42,.05))}
.qmr-panel>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.qmr-panel>header>div{min-width:0}.qmr-panel>header span{display:block;color:var(--accent,#6d28d9);font-size:.62rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.qmr-panel>header h3{margin:3px 0 0;font-size:.91rem;line-height:1.25;overflow-wrap:anywhere}.qmr-panel>header time{flex:0 0 auto;min-height:30px;display:grid;place-items:center;padding:0 9px;border-radius:9px;background:var(--qmr-soft);color:var(--qmr-muted);font-size:.63rem;font-weight:800}
.qmr-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.qmr-action{position:relative;min-width:0;min-height:82px;display:grid;grid-template-columns:38px minmax(0,1fr) 10px;align-items:center;gap:8px;padding:9px;border:1px solid var(--qmr-line);border-radius:13px;background:var(--qmr-soft);color:var(--qmr-text);font:inherit;text-align:left;cursor:pointer;overflow:hidden;transition:border-color .18s ease,transform .18s ease,background .18s ease}
.qmr-action:active{transform:scale(.985)}.qmr-action:hover{border-color:color-mix(in srgb,var(--qmr-tone,#2563eb) 48%,var(--qmr-line));background:color-mix(in srgb,var(--qmr-tone,#2563eb) 4%,var(--qmr-soft))}
.qmr-action-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--qmr-tone,#2563eb) 14%,var(--qmr-surface));color:var(--qmr-tone,#2563eb)}
.qmr-action-copy{min-width:0;display:flex;flex-direction:column}.qmr-action-copy strong{font-size:.73rem;line-height:1.22;overflow-wrap:anywhere}.qmr-action-copy small{display:-webkit-box;margin-top:3px;overflow:hidden;color:var(--qmr-muted);font-size:.59rem;line-height:1.3;-webkit-box-orient:vertical;-webkit-line-clamp:2}.qmr-action>i{color:var(--qmr-muted);font-size:.61rem}

.qmr-empty{grid-column:1/-1;min-height:126px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;color:var(--qmr-muted);text-align:center}.qmr-empty i{font-size:1.25rem;color:var(--accent,#6d28d9)}.qmr-empty strong{margin-top:7px;font-size:.8rem}.qmr-empty p{max-width:420px;margin:4px 0 0;font-size:.68rem;line-height:1.4}

.qmr-assurance{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--qmr-line);border-radius:15px;background:color-mix(in srgb,var(--qmr-surface) 96%,var(--accent,#6d28d9) 4%)}
.qmr-assurance>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--accent-soft,#ede9fe);color:var(--accent,#6d28d9)}
.qmr-assurance>div{min-width:0}.qmr-assurance strong{display:block;font-size:.72rem}.qmr-assurance p{margin:3px 0 0;color:var(--qmr-muted);font-size:.61rem;line-height:1.38;overflow-wrap:anywhere}.qmr-assurance button{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 11px;border:1px solid var(--qmr-line);border-radius:11px;background:var(--qmr-surface);color:var(--accent,#6d28d9);font:inherit;font-size:.67rem;font-weight:820;white-space:nowrap;cursor:pointer}

.qmr-tone-blue{--qmr-tone:#2563eb}.qmr-tone-cyan{--qmr-tone:#0891b2}.qmr-tone-green{--qmr-tone:#16a34a}.qmr-tone-orange{--qmr-tone:#ea580c}.qmr-tone-amber{--qmr-tone:#b45309}.qmr-tone-purple{--qmr-tone:#7c3aed}.qmr-tone-red{--qmr-tone:#dc2626}.qmr-tone-pink{--qmr-tone:#db2777}.qmr-tone-teal{--qmr-tone:#0f766e}.qmr-tone-slate{--qmr-tone:#475569}

.qmr-loading{min-height:420px}.qmr-skeleton,.qmr-skeleton-grid i{display:block;border-radius:16px;background:linear-gradient(100deg,var(--qmr-soft) 25%,color-mix(in srgb,var(--qmr-line) 65%,var(--qmr-soft)) 45%,var(--qmr-soft) 65%);background-size:220% 100%;animation:qmr-shimmer 1.15s linear infinite}.qmr-skeleton-hero{height:126px;margin-bottom:10px}.qmr-skeleton-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.qmr-skeleton-grid i{height:102px}.qmr-skeleton-actions{height:188px;margin-top:10px}
@keyframes qmr-shimmer{to{background-position-x:-220%}}

/* The base app stops its tablet rail at 1000px. v106 intentionally extends
 * the same interaction model through 1024px, matching the specification. */
@media (max-width:1024px){
  body[data-qmr-role]:not([data-qmr-role=""]) .sidebar,body[data-qmr-role]:not([data-qmr-role=""]) .sidebar-overlay{display:none!important}
  body[data-qmr-role]:not([data-qmr-role=""]) .main{margin-left:76px}
  body[data-qmr-role]:not([data-qmr-role=""]) .topbar .menu-btn{display:none}
  #mobilePrimaryNav.qmr-primary-nav{position:fixed;z-index:55;top:0;bottom:0;left:0;width:76px;height:auto;display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:calc(11px + env(safe-area-inset-top)) 7px 11px;border-right:1px solid var(--border,#dbe4f0);border-top:0;background:color-mix(in srgb,var(--surface,#fff) 95%,transparent);box-shadow:4px 0 18px rgba(15,23,42,.07);backdrop-filter:blur(18px)}
  #mobilePrimaryNav.qmr-primary-nav button{position:relative;min-width:0;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:4px;border:0;border-radius:13px;background:transparent;color:var(--text-soft,#64748b);font:inherit;cursor:pointer}
  #mobilePrimaryNav.qmr-primary-nav button i{font-size:1rem}#mobilePrimaryNav.qmr-primary-nav button span{max-width:100%;overflow:hidden;font-size:.59rem;font-weight:780;text-overflow:ellipsis;white-space:nowrap}#mobilePrimaryNav.qmr-primary-nav button.active{background:var(--accent-soft,#ede9fe);color:var(--accent,#6d28d9)}
  #mobilePrimaryNav.qmr-primary-nav button.active:before{content:"";position:absolute;top:13px;bottom:13px;left:-7px;width:3px;border-radius:0 4px 4px 0;background:var(--accent,#6d28d9)}
}

@media (min-width:600px) and (max-width:1024px){
  .qmr-page{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:12px;align-items:start}
  .qmr-hero,.qmr-page>[data-qmr-state-host],.qmr-security,.qmr-kpis,.qmr-assurance{grid-column:1/-1;margin-bottom:0}
  .qmr-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.qmr-kpi{min-height:108px}
  .qmr-panel{grid-column:1/-1;margin-bottom:0}.qmr-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.qmr-action{min-height:78px}
  .qmr-hero{padding:20px 22px}.qmr-hero p{font-size:.8rem}.qmr-security{overflow:visible;flex-wrap:wrap}
  .qmr-assurance{margin-top:0}
}

@media (max-width:599px){
  body[data-qmr-role]:not([data-qmr-role=""]) .main{margin-left:0;padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  #mobilePrimaryNav.qmr-primary-nav{top:auto;right:0;bottom:0;width:auto;height:calc(66px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(var(--qmr-nav-count,5),minmax(0,1fr));gap:2px;padding:5px 4px env(safe-area-inset-bottom);border-top:1px solid var(--border,#dbe4f0);border-right:0;box-shadow:0 -7px 24px rgba(15,23,42,.1)}
  #mobilePrimaryNav.qmr-primary-nav button{min-height:56px;border-radius:11px}#mobilePrimaryNav.qmr-primary-nav button.active:before{top:-5px;right:28%;bottom:auto;left:28%;width:auto;height:3px;border-radius:0 0 4px 4px}
  .qmr-page{padding-bottom:2px}.qmr-hero{min-height:118px;padding:15px}.qmr-hero h2{font-size:1.16rem}.qmr-hero p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3}
  .qmr-readonly{position:absolute;top:10px;right:10px;min-height:30px;padding-inline:8px;font-size:.58rem}.qmr-hero:has(.qmr-readonly) .qmr-hero-copy{padding-right:70px}
  .qmr-state{grid-template-columns:36px minmax(0,1fr)}.qmr-state>i{width:36px;height:36px}.qmr-state button{grid-column:2;justify-self:start}
  .qmr-security{margin-right:-2px;padding-right:2px}.qmr-kpis{gap:7px}.qmr-kpi{min-height:100px;padding:10px 9px}.qmr-kpi-copy strong{font-size:.96rem}
  .qmr-panel{padding:11px}.qmr-actions{grid-template-columns:1fr;gap:7px}.qmr-action{min-height:64px;padding:8px 10px}.qmr-action-copy strong{font-size:.73rem}
  .qmr-assurance{grid-template-columns:38px minmax(0,1fr)}.qmr-assurance>span{width:38px;height:38px}.qmr-assurance button{grid-column:1/-1;width:100%}
}

@media (max-width:380px){
  .qmr-kpi{grid-template-columns:32px minmax(0,1fr);gap:7px}.qmr-kpi-icon{width:32px;height:32px}.qmr-kpi-arrow{display:none}.qmr-kpi-copy em{font-size:.56rem}
  .qmr-action{grid-template-columns:34px minmax(0,1fr)}.qmr-action-icon{width:34px;height:34px}.qmr-action>i{display:none}
}

@media (min-width:1025px){#mobilePrimaryNav.qmr-primary-nav{display:none!important}}
@media (prefers-reduced-motion:reduce){.qmr-page *{scroll-behavior:auto!important}.qmr-kpi,.qmr-action{transition:none}.qmr-kpi.is-loading .qmr-kpi-copy strong,.qmr-skeleton,.qmr-skeleton-grid i{animation:none}}
@media (prefers-contrast:more){.qmr-kpi,.qmr-action,.qmr-panel,.qmr-hero,.qmr-assurance{border-width:2px}}

[data-theme="dark"] .qmr-state-offline{background:rgba(154,52,18,.16)}
[data-theme="dark"] .qmr-state-error{background:rgba(185,28,28,.14)}
[data-theme="dark"] .qmr-readonly{border-color:#6d28d9;background:rgba(109,40,217,.18);color:#c4b5fd}

@media print{#mobilePrimaryNav.qmr-primary-nav,.qmr-security,.qmr-state{display:none!important}.qmr-page{display:block!important;width:100%;max-width:none}.qmr-kpi,.qmr-action,.qmr-panel,.qmr-hero,.qmr-assurance{break-inside:avoid;box-shadow:none}}