/* NAS desktop windows and mobile embedded browsers share the same application. */
html { scroll-padding-top: 76px; }
body { overflow-wrap: anywhere; }
button,input,textarea,select { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }
.mobile-header,.nav-close,.nav-backdrop { display:none; }
.sidebar { width:232px; }
.sidebar .el-menu { overflow-y:auto; min-height:0; }
.content { margin-left:232px; padding:30px clamp(20px,3vw,48px); max-width:1900px; width:calc(100% - 232px); }
.nav-section { color:#9aacbf; font-size:11px; letter-spacing:2px; margin:20px 14px 7px; }
.app-version { font-size:11px; color:#8197a8; }
.head-tools,.tab-toolbar { flex-wrap:wrap; }
.login-wrap { min-height:100vh; min-height:100dvh; height:auto; padding:24px; }
.login-card { max-width:100%; }
.el-dialog { max-width:calc(100vw - 28px); }
.el-dialog__body { overflow-wrap:anywhere; }
.el-overlay-dialog { padding-bottom:env(safe-area-inset-bottom,0); }
.el-select,.el-input,.el-date-editor { max-width:100%; }
.lab-page { max-width:1400px; margin:0 auto; }
.lab-eyebrow { color:#62808f; letter-spacing:1.8px; font-size:10px; font-weight:700; margin-bottom:7px; }
.lab-page .page-head h2 { font-size:25px; letter-spacing:-.5px; }
.lab-alert { margin-bottom:16px; }
.lab-loading { padding:70px 20px; text-align:center; color:var(--ink-3); }
.lab-welcome { display:flex; align-items:center; justify-content:space-between; gap:20px; background:#edf5f6; border:1px solid #d5e6e9; border-radius:14px; padding:28px; margin-bottom:24px; }
.lab-welcome h3 { font-size:24px; margin:6px 0 10px; }
.lab-welcome p { margin:0; color:var(--ink-2); line-height:1.7; }
.lab-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:28px; }
.lab-stats button { text-align:left; background:white; border:1px solid var(--line); border-radius:12px; padding:22px; cursor:pointer; color:var(--ink); }
.lab-stats button:hover { border-color:var(--brand); }
.lab-stats b { display:block; font-size:32px; font-variant-numeric:tabular-nums; margin-bottom:8px; }
.lab-stats span { color:var(--ink-2); font-size:13px; }
.lab-section-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:20px 0 14px; }
.lab-section-head h3 { margin:0; font-size:17px; }
.lab-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); align-items:start; gap:18px; }
.lab-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; min-width:0; box-shadow:var(--shadow-sm); }
.lab-card h3 { font-size:18px; line-height:1.5; margin:8px 0 12px; }
.lab-card p { line-height:1.7; margin:8px 0; }
.lab-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.lab-card-top h3 { margin:0; }
.lab-kicker { font-size:12px; color:#537b8c; font-weight:600; }
.lab-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.lab-toolbar>.el-input { width:280px; flex:1 1 220px; max-width:400px; }
.lab-toolbar>.lab-control { width:auto; max-width:310px; flex:0 1 auto; }
.lab-control { display:block; border:1px solid #d3dce2; background:#fff; border-radius:7px; padding:9px 11px; min-height:40px; color:var(--ink); width:100%; min-width:0; box-sizing:border-box; }
.lab-control:focus { outline:2px solid #7eb5ca; outline-offset:1px; border-color:var(--brand); }
.lab-control:disabled,.lab-control:read-only { background:#f4f7f8; }
select.lab-control { background:#fff; }
.lab-inline { display:flex!important; align-items:center; gap:8px; font-size:13px; line-height:1.6; }
.lab-inline input { accent-color:var(--brand); width:18px; height:18px; flex-shrink:0; }
.lab-empty { padding:36px 22px; background:#f4f7f9; border:1px dashed #d8e1e6; color:var(--ink-2); border-radius:10px; text-align:center; line-height:1.9; margin:14px 0; }
.lab-empty.compact { padding:18px; font-size:13px; }
.lab-booking { border-left:3px solid #5d99ab; padding:12px 14px; margin:14px 0 0; background:#f5f9fa; border-radius:0 7px 7px 0; }
.lab-booking strong { display:block; margin-top:7px; line-height:1.6; }
.lab-booking.cancelled { opacity:.6; border-color:#b4bec4; }
.lab-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; }
.lab-actions .el-button+.el-button,.lab-form-footer .el-button+.el-button { margin-left:0; }
.lab-stock-quantity { font-size:28px; font-weight:700; }
.lab-stock-quantity small { font-size:13px; color:var(--ink-3); font-weight:400; }
.lab-location { border-radius:7px; background:#eef4f6; color:#2e6275; line-height:1.7; padding:10px 12px; font-size:13px; }
.lab-details { display:grid; grid-template-columns:90px minmax(0,1fr); gap:8px; font-size:13px; margin:17px 0; }
.lab-details dt { color:var(--ink-3); }
.lab-details dd { margin:0; color:var(--ink-2); }
.lab-money { display:inline-block; margin-left:12px; color:var(--brand); }
.lab-wrap { white-space:pre-wrap; overflow-wrap:anywhere; }
.lab-setting-row { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 4px; border-bottom:1px solid var(--line); }
.lab-setting-row p { margin:6px 0 0; }
.lab-form { display:flex; flex-direction:column; gap:17px; }
.lab-form label { display:flex; flex-direction:column; gap:7px; font-size:13px; color:var(--ink-2); }
.lab-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.lab-form-footer { display:flex; justify-content:flex-end; gap:10px; padding-top:14px; border-top:1px solid var(--line); }
.lab-history article { border-left:2px solid #a8c5d0; padding:8px 0 12px 16px; margin:0 0 12px 5px; }
.lab-history article>div { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.lab-history p { font-size:13px; line-height:1.7; margin:8px 0; }
.el-form-item__content,.el-tabs__content { min-width:0; }
.el-table { max-width:100%; }
.el-dialog__footer { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }

@media (max-width:1100px) {
  .content { padding:22px; }
  .lab-stats { gap:10px; }
  .lab-stats button { padding:16px; }
  .head-tools { max-width:100%; }
}
@media (max-width:900px) {
  .mobile-header { display:flex; align-items:center; gap:12px; height:60px; padding:0 14px; padding-left:max(14px,env(safe-area-inset-left)); padding-right:max(14px,env(safe-area-inset-right)); background:#0b1f33; color:white; position:sticky; top:0; z-index:20; width:100%; }
  .mobile-header>div { flex:1; display:flex; align-items:baseline; gap:10px; }
  .mobile-header strong { font-size:15px; }
  .mobile-header span { font-size:11px; color:#9db4c6; }
  .menu-toggle,.mobile-home,.nav-close { border:0; background:transparent; color:inherit; cursor:pointer; padding:8px; }
  .menu-toggle { display:flex; align-items:center; margin-left:-5px; }
  .mobile-home { font-size:13px; color:#cbdde9; }
  .layout { display:block; min-height:100dvh; }
  .sidebar { width:min(300px,86vw); z-index:50; transform:translateX(-102%); transition:transform .2s ease; box-shadow:8px 0 40px #0003; }
  .sidebar.is-open { transform:translateX(0); }
  .sidebar .logo { padding-top:max(18px,env(safe-area-inset-top)); }
  .sidebar-user { padding-bottom:max(14px,env(safe-area-inset-bottom)); }
  .nav-close { display:block; margin-left:auto; font-size:28px; line-height:1; }
  .nav-backdrop { display:block; position:fixed; inset:0; background:#071f3280; border:0; z-index:45; }
  .content { margin-left:0; width:100%; max-width:none; padding:22px 18px max(30px,env(safe-area-inset-bottom)); }
  .lab-page .page-head h2 { font-size:23px; }
  .cards,.kb-list { grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr)); }
  .board { flex-direction:column; overflow-x:visible; }
  .bcol { min-width:0; max-width:none; width:100%; }
  .bcol-body { min-height:0; }
  .el-dialog { --el-dialog-margin-top:5vh; max-height:90dvh; display:flex; flex-direction:column; }
  .el-dialog__body { overflow:auto; min-height:0; overscroll-behavior:contain; }
  .el-dialog__header,.el-dialog__footer { flex:none; }
  .task-meta-row { grid-template-columns:1fr; }
  .sci-item { flex-direction:column; gap:7px; }
  .head-tools { width:100%; }
  .gsearch { flex:1; min-width:0; }
  .gsearch-panel { max-width:calc(100vw - 44px); }
}
@media (max-width:520px) {
  .content { padding:20px 12px max(26px,env(safe-area-inset-bottom)); }
  .page-head { margin-bottom:18px; }
  .page-head h2 { font-size:20px; }
  .lab-welcome { flex-direction:column; align-items:stretch; padding:20px; gap:18px; }
  .lab-welcome h3 { font-size:21px; }
  .lab-stats { grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:22px; }
  .lab-stats b { font-size:28px; }
  .lab-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .lab-card { padding:17px; }
  .lab-toolbar>.el-input { width:100%; flex-basis:100%; max-width:none; }
  .lab-toolbar>.lab-control { flex:1 1 135px; max-width:100%; }
  .lab-datebar { gap:7px; }
  .lab-datebar>.lab-control { flex:1 1 120px; }
  .lab-form-grid { grid-template-columns:minmax(0,1fr); }
  .lab-control,.lab-form .el-input__inner,.login-card .el-input__inner { font-size:16px; }
  .lab-form-footer { position:sticky; bottom:0; background:white; padding-bottom:4px; }
  .lab-form-footer .el-button { min-height:40px; }
  .login-wrap { padding:18px; }
  .login-card { padding:32px 22px; border-radius:14px; }
  .stats-bar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .stat-item { min-width:0; padding:14px 8px; }
  .pcard { padding:15px; }
  .pcard-meta,.act-item,.log-item,.mitem { flex-wrap:wrap; }
  .pcard-members { max-width:100%; }
  .pcard-foot { flex-wrap:wrap; }
  .pcard-foot>.spacer { display:none; }
  .pcard-foot>.small { width:100%; }
  .ai-row { flex-wrap:wrap; }
  .ai-row>.el-input { flex-basis:100%; }
  .ai-row>.el-select,.ai-row>.el-date-editor { flex:1; min-width:110px; }
  .ann-toolbar,.task-links,.log-input { flex-wrap:wrap; }
  .el-date-range-picker { max-width:calc(100vw - 16px); }
  .el-date-range-picker .el-picker-panel__body { min-width:0; }
  .el-date-range-picker__content { width:100%; float:none; }
  .el-date-range-picker__content.is-left { border-right:0; border-bottom:1px solid var(--line); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }