:root{color-scheme:light;--bg:#f5f7fb;--surface:#fff;--surface2:#f8fafc;--text:#172033;--muted:#6b7485;--line:#e6eaf0;--primary:#2563eb;--primary2:#1d4ed8;--primary-soft:#eaf2ff;--danger:#e5484d;--danger-soft:#fff0f0;--success:#178a52;--success-soft:#eaf8f1;--warning:#b66a00;--warning-soft:#fff6e5;--shadow:0 16px 50px rgba(20,30,50,.08);--radius:20px}html[data-theme=dark]{color-scheme:dark;--bg:#0c111b;--surface:#121925;--surface2:#171f2d;--text:#edf2fa;--muted:#9aa6b7;--line:#263244;--primary:#69a0ff;--primary2:#82b1ff;--primary-soft:#182b4c;--danger:#ff7479;--danger-soft:#3a1d21;--success:#4fd28e;--success-soft:#143025;--warning:#ffb84d;--warning-soft:#3a2b15;--shadow:0 16px 50px rgba(0,0,0,.28)}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif}body{min-height:100vh}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.topbar{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--surface) 90%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);height:68px;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,calc((100vw - 1180px)/2));gap:18px}.brand{font-weight:800;letter-spacing:-.02em;white-space:nowrap}.brand span{color:var(--primary)}nav{display:flex;align-items:center;gap:6px;overflow:auto}nav a{padding:9px 12px;border-radius:12px;color:var(--muted);font-size:14px;font-weight:650;white-space:nowrap}nav a:hover{background:var(--surface2);color:var(--text)}.container{width:min(1180px,calc(100% - 28px));margin:0 auto;padding:34px 0 60px}.narrow{width:min(720px,calc(100% - 28px))}.page-title{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px}.page-title h1,.hero-card h1{margin:3px 0 8px;font-size:clamp(28px,4vw,42px);line-height:1.08;letter-spacing:-.04em}.eyebrow{font-size:11px;font-weight:850;letter-spacing:.14em;color:var(--primary);text-transform:uppercase}.muted{color:var(--muted)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.page-actions,.actions,.report-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin-bottom:18px}.hero-card{background:linear-gradient(135deg,var(--surface),var(--primary-soft));border:1px solid var(--line);border-radius:28px;padding:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px;box-shadow:var(--shadow)}.submit-badge{min-width:150px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:13px 15px;font-weight:800}.submit-badge span{font-size:11px;color:var(--muted);font-weight:500}.btn{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:10px 15px;border-radius:12px;font-weight:750;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;gap:7px;transition:.15s transform,.15s background,.15s border-color}.btn:hover{transform:translateY(-1px);border-color:#c8d0dc}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.primary:hover{background:var(--primary2)}.btn.ghost{background:transparent}.btn.warn{background:var(--warning-soft);border-color:transparent;color:var(--warning)}.btn.danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}.btn.small{padding:7px 10px;font-size:12px;border-radius:10px}.btn.wide{width:100%;padding:13px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:17px 18px}.stat span{display:block;color:var(--muted);font-size:12px;margin-bottom:5px}.stat b{font-size:26px;letter-spacing:-.03em}.section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px;margin-bottom:16px}.section-head h2,.card h2{margin:0 0 5px;font-size:18px;letter-spacing:-.02em}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:15px}.table-wrap table{border-collapse:collapse;width:100%;min-width:720px}th,td{padding:12px 13px;border-bottom:1px solid var(--line);text-align:left;font-size:13px}th{font-size:12px;color:var(--muted);font-weight:750;background:var(--surface2)}tr:last-child td,tr:last-child th{border-bottom:0}.status,.tag{display:inline-flex;padding:5px 8px;border-radius:999px;font-size:11px;font-weight:750;background:var(--surface2);color:var(--muted)}.status-open{background:var(--success-soft);color:var(--success)}.status-pending{background:var(--primary-soft);color:var(--primary)}.status-closed{background:var(--surface2);color:var(--muted)}.alert{padding:13px 15px;border-radius:14px;margin-bottom:15px;border:1px solid transparent;font-size:14px}.alert.danger{background:var(--danger-soft);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 18%,transparent)}.alert.success{background:var(--success-soft);color:var(--success);border-color:color-mix(in srgb,var(--success) 18%,transparent)}.alert.warning{background:var(--warning-soft);color:var(--warning);border-color:color-mix(in srgb,var(--warning) 18%,transparent)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label,.stack label,.login-form label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700}.form-grid input,.form-grid select,.stack input,.login-form input,.inline-form input,.inline-form select,.mini-form input{width:100%;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:12px;padding:11px 12px;outline:none}.form-grid input:focus,.form-grid select:focus,.stack input:focus,.login-form input:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}.form-actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;padding-top:5px}.inline-form{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.inline-form>*{flex:0 1 auto}.mini-form{display:grid;gap:8px;padding:12px;margin-top:10px;background:var(--surface2);border-radius:13px;min-width:240px}.check{display:flex!important;align-items:center;flex-direction:row!important;gap:7px!important;color:var(--muted)}.check input{width:auto}.muted-row{opacity:.62}.empty{text-align:center;color:var(--muted);padding:30px}.calendar-card{padding:20px}.calendar-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}.calendar-focus{font-size:13px;color:var(--muted);min-height:20px}.calendar-summary{display:flex;gap:7px;flex-wrap:wrap}.pill{padding:6px 9px;border-radius:999px;background:var(--surface2);font-size:11px;color:var(--muted);font-weight:700}.pill.over{background:var(--danger-soft);color:var(--danger)}.week-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}.week-head span{text-align:center;font-size:11px;color:var(--muted);font-weight:800;padding:6px 0}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.day{position:relative;aspect-ratio:1/1;min-height:54px;border:1px solid var(--line);background:var(--surface2);border-radius:15px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.12s}.day:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));transform:translateY(-1px)}.day input{position:absolute;opacity:0;pointer-events:none}.day-num{font-weight:800;font-size:16px}.day.selected{background:#2563eb;border-color:var(--line);color:#fff}.day.over{background:#dc2626;border-color:var(--line);color:#fff}.day.selected-over{background:#2563eb;border-color:var(--line);color:#dc2626}.day.holiday:not(.selected):not(.over){box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--danger) 55%,transparent)}.day.selected.over{outline:none}.day:has(input:disabled){cursor:default;opacity:.82}.legend{display:flex;gap:15px;align-items:center;flex-wrap:wrap;margin:15px 0 17px;color:var(--muted);font-size:12px}.swatch{display:inline-block;width:12px;height:12px;border-radius:4px;background:#2563eb;border:1px solid #2563eb;vertical-align:-2px;margin-right:5px}.swatch.over-swatch{background:#dc2626;border-color:#dc2626}.swatch.neutral-swatch{background:var(--surface2);border-color:var(--line)}.conflict-card{background:linear-gradient(135deg,var(--surface),var(--danger-soft));border-color:color-mix(in srgb,var(--danger) 20%,var(--line))}.conflict-card .section-head{margin-bottom:12px}.conflict-badge{background:var(--danger-soft);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 18%,transparent)}.conflict-list{display:grid;gap:9px}.conflict-item{display:grid;grid-template-columns:145px 1fr;gap:14px;align-items:start;padding:12px 13px;border:1px solid color-mix(in srgb,var(--danger) 14%,var(--line));background:var(--surface);border-radius:14px}.conflict-date{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.conflict-date strong{font-size:16px;color:var(--danger)}.conflict-date span{font-size:11px;color:var(--muted);font-weight:700}.conflict-people{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.conflict-label{font-size:11px;color:var(--muted);font-weight:800;margin-right:2px}.conflict-person{padding:5px 8px;border-radius:999px;background:var(--danger-soft);color:var(--danger);font-size:12px;font-weight:700}.public-card .table-wrap{margin-top:4px}.matrix-scroll{overflow:auto;border:1px solid var(--line);border-radius:15px}.matrix{border-collapse:separate;border-spacing:0;min-width:950px;width:max-content;background:var(--surface)}.matrix th,.matrix td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:0}.matrix thead th{position:sticky;top:0;z-index:2;background:var(--surface2);text-align:center}.matrix .seq-col{position:sticky;left:0;z-index:5;width:52px;min-width:52px;background:var(--surface2);text-align:center}.matrix .number-col{position:sticky;left:52px;z-index:5;width:112px;min-width:112px;background:var(--surface2)}.matrix .name-col{position:sticky;left:164px;z-index:5;width:112px;min-width:112px;background:var(--surface2)}.matrix .seq-cell{position:sticky;left:0;z-index:4;background:var(--surface);width:52px;min-width:52px;text-align:center;padding:8px 5px;color:var(--muted)}.matrix .number-cell{position:sticky;left:52px;z-index:4;background:var(--surface);width:112px;min-width:112px;text-align:left;padding:8px 10px;color:var(--text)}.matrix .name-cell{position:sticky;left:164px;z-index:4;background:var(--surface);width:112px;min-width:112px;text-align:left;padding:8px 10px;color:var(--text)}.matrix .date-head{height:34px;min-width:32px;width:32px;font-size:11px}.matrix .week-head{height:38px;min-width:32px;font-size:10px}.matrix .week-head small{display:block;margin-top:3px;color:var(--muted);font-weight:600}.matrix .over-head{background:var(--danger-soft)!important;color:var(--danger)}.matrix .holiday-head{font-weight:900;color:var(--danger)}.matrix .rest-cell{height:31px;min-width:32px;width:32px;background:var(--surface)}.matrix .rest-normal{background:var(--primary-soft)}.matrix .rest-over{background:var(--danger-soft)}.matrix .seq{font-size:11px;color:var(--muted);margin-left:5px}.report-sub{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.login-body{display:grid;place-items:center;background:radial-gradient(circle at 15% 15%,color-mix(in srgb,var(--primary) 15%,transparent),transparent 30%),var(--bg)}.login-shell{width:min(410px,calc(100% - 34px));background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:30px;padding:34px}.brand-mark{width:50px;height:50px;border-radius:16px;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:900;font-size:24px;margin-bottom:17px;box-shadow:0 10px 25px color-mix(in srgb,var(--primary) 25%,transparent)}.login-shell h1{font-size:30px;letter-spacing:-.04em;margin:0 0 6px}.login-form{display:grid;gap:15px;margin-top:25px}.theme-toggle{border:1px solid var(--line);background:var(--surface);color:var(--muted);border-radius:12px;padding:8px 10px;cursor:pointer}.generated-password{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface2);border:1px dashed var(--line);border-radius:15px;padding:17px;text-align:center;font-size:22px;letter-spacing:.08em;margin:20px 0}.center{text-align:center}.admin-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:18px}.quick-links{display:grid;grid-template-columns:1fr 1fr;gap:10px}.quick-link{padding:16px;border:1px solid var(--line);border-radius:15px;background:var(--surface2);font-weight:750}.quick-link small{display:block;color:var(--muted);font-weight:500;margin-top:5px}.schedule-layout{display:grid;grid-template-columns:260px 1fr;gap:18px}.employee-list{display:flex;flex-direction:column;gap:7px}.employee-list a{padding:10px 12px;border-radius:12px;background:var(--surface2);font-weight:700;font-size:13px}.employee-list a.active{background:var(--primary-soft);color:var(--primary)}.log-table{max-height:360px;overflow:auto}@media(max-width:820px){.topbar{height:60px;padding:0 14px}.container{width:min(100% - 20px,1180px);padding-top:22px}.page-title{align-items:flex-start;flex-direction:column}.page-actions{width:100%}.page-actions .btn{flex:1}.stats{grid-template-columns:1fr 1fr}.hero-card{align-items:flex-start;flex-direction:column}.submit-badge{width:100%}.form-grid{grid-template-columns:1fr}.admin-grid,.schedule-layout{grid-template-columns:1fr}.quick-links{grid-template-columns:1fr}.calendar-grid,.week-head{gap:4px}.day{border-radius:12px;min-height:44px}.day-num{font-size:14px}.card{padding:17px}.report-actions{width:100%}.report-actions .btn{flex:1}.login-shell{padding:27px}.matrix .seq-col,.matrix .seq-cell{width:42px;min-width:42px}.matrix .number-col,.matrix .number-cell{left:42px;width:88px;min-width:88px}.matrix .name-col,.matrix .name-cell{left:130px;width:96px;min-width:96px}}@media(max-width:480px){.conflict-item{grid-template-columns:1fr;gap:8px}.stats{grid-template-columns:1fr}.brand{font-size:14px}nav a{padding:8px}.calendar-grid{gap:3px}.day{border-radius:10px}.day.selected.over{outline-width:2px}.week-head span{padding:3px 0}.calendar-meta{align-items:flex-start;flex-direction:column}.btn{padding:10px 12px}}

/* v2.2 mobile-calendar: seven-column layout follows the real weekday of day 1. */
.calendar-card{padding:16px}
.calendar-title{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.calendar-title h2{margin:0;font-size:17px}
.calendar-month{margin-top:3px;color:var(--muted);font-size:13px}
.week-head{gap:2px;margin-bottom:4px}
.week-head span{padding:5px 0;font-size:12px}
.calendar-grid{gap:2px}
.day-empty{aspect-ratio:1/1;min-height:42px}
.day{aspect-ratio:1/1;min-height:42px;border:1px solid var(--line);border-radius:10px;background:var(--surface2);transition:background .12s,color .12s,border-color .12s}
.day:hover{transform:none;border-color:var(--line)}
.day.selected{background:var(--primary);border-color:var(--primary);color:#fff}
.day.over{background:var(--danger);border-color:var(--danger);color:#fff}
.day.selected.over{outline:2px solid var(--primary);outline-offset:1px}
.day.holiday:not(.selected):not(.over){box-shadow:inset 0 -2px 0 var(--danger)}
.day-num{font-size:15px;font-weight:700}
.day:has(input:disabled){opacity:.68}
.calendar-submit{margin-top:14px}
@media(max-width:480px){.calendar-card{padding:12px}.week-head{gap:1px}.calendar-grid{gap:1px}.day,.day-empty{min-height:40px;border-radius:9px}.day-num{font-size:14px}.calendar-title{margin-bottom:10px}}
/* v2.3 matrix header: weekday stays directly under the date in each cell. */
.matrix .date-head{height:48px;min-width:38px;width:38px;font-size:11px;line-height:1.15}
.matrix .date-head span,.matrix .date-head small{display:block}
.matrix .date-head small{margin-top:3px;color:var(--muted);font-size:10px;font-weight:700}
.matrix .holiday-head{font-weight:900;color:var(--danger)}
.matrix .over-head{background:var(--surface2)!important;color:var(--text)}

/* v2.5 responsive/admin polish + server-clock status panel */
.admin-page .page-title{margin-bottom:20px}
.admin-page .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-batches,.quick-section{width:100%}
.admin-period-table{border-radius:16px}
.quick-section .quick-links{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.quick-link{min-height:92px;display:flex;flex-direction:column;justify-content:center;transition:.15s background,.15s border-color,.15s transform}
.quick-link:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--primary) 30%,var(--line));background:var(--primary-soft)}
.quick-link small{line-height:1.5}

.timing-card{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 22px;margin-bottom:18px;background:var(--surface);border:1px solid var(--line)}
.timing-main{min-width:0}
.timing-label{display:block;color:var(--muted);font-size:12px;font-weight:750;margin-bottom:4px}
.timing-value{display:block;font-size:clamp(25px,5vw,34px);line-height:1.05;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.timing-side{padding-left:20px;border-left:1px solid var(--line);color:var(--muted);font-size:11px;white-space:nowrap}
.timing-side strong{display:block;margin-top:3px;color:var(--text);font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.employee-page .public-card{margin-top:18px}.employee-info{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:8px 0;color:var(--muted);font-size:13px}.employee-info strong{color:var(--text);font-size:18px}.employee-info span{padding:4px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line)}
.employee-page .calendar-submit[style*="display: none"]{display:none!important}

/* Tables become readable cards on narrow screens instead of compressed columns. */
@media(max-width:820px){
  .admin-page .stats{grid-template-columns:1fr 1fr}
  .quick-section .quick-links{grid-template-columns:1fr 1fr}
  .responsive-table table{min-width:0;width:100%}
  .responsive-table thead{display:none}
  .responsive-table tbody{display:grid;gap:10px;padding:10px}
  .responsive-table tr{display:grid;gap:0;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
  .responsive-table td{display:grid;grid-template-columns:92px minmax(0,1fr);gap:10px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
  .responsive-table td:last-child{border-bottom:0}
  .responsive-table td::before{content:attr(data-label);color:var(--muted);font-size:12px;font-weight:700}
  .responsive-table td[colspan]{display:block;text-align:center}
  .responsive-table td[colspan]::before{content:none}
  .timing-card{align-items:flex-start;flex-direction:column;gap:14px}
  .timing-side{width:100%;padding:10px 0 0;border-left:0;border-top:1px solid var(--line)}
}
@media(max-width:560px){
  .admin-page .stats{grid-template-columns:1fr}
  .quick-section .quick-links{grid-template-columns:1fr}
  .page-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .page-actions .btn{width:100%}
  .top-identity{display:none}
  .hero-card.employee-hero{padding:20px;border-radius:22px}
  .timing-card{padding:16px;border-radius:18px}
  .timing-value{font-size:28px}
}
@media(min-width:821px){
  .admin-page .admin-batches,.admin-page .quick-section{max-width:none}
  .admin-page .quick-links{min-height:120px}
}

/* v2.7: batch/position/matrix/audit UX */
.matrix .position-col,.matrix .position-cell{position:sticky;left:276px;z-index:5;background:var(--surface2);width:100px;min-width:100px;text-align:center}.matrix .position-cell{z-index:4;background:var(--surface);padding:8px 10px}.matrix .number-cell,.matrix .name-cell{ text-align:center }.matrix .rest-cell{border:1px solid var(--line)}.matrix .rest-over{background:#ff6b6b!important;border-color:#d00000!important;box-shadow:inset 0 0 0 1px #d00000}.audit-more{text-align:center;color:var(--muted);font-size:12px;padding:15px 8px}.audit-more span{display:inline-block;padding:6px 12px;background:var(--surface2);border-radius:999px}.matrix-scroll{overflow:auto;-webkit-overflow-scrolling:touch}.matrix{width:max-content!important;min-width:100%}.matrix th,.matrix td{text-align:center;white-space:nowrap}.matrix .seq-col,.matrix .seq-cell{width:52px;min-width:52px}.matrix .number-col,.matrix .number-cell{left:52px;width:112px;min-width:112px}.matrix .name-col,.matrix .name-cell{left:164px;width:112px;min-width:112px}.matrix .position-col,.matrix .position-cell{left:276px;width:100px;min-width:100px}.matrix .date-head,.matrix .rest-cell{width:42px;min-width:42px}.matrix .rest-cell{height:34px}.table-wrap th,.table-wrap td{text-align:center;vertical-align:middle}.responsive-table table{table-layout:auto}.responsive-table th,.responsive-table td{white-space:nowrap}.responsive-table td:nth-child(4){white-space:normal;min-width:180px}.report-card{overflow:hidden}@media(max-width:820px){.matrix .seq-col,.matrix .seq-cell{width:44px;min-width:44px}.matrix .number-col,.matrix .number-cell{left:44px;width:92px;min-width:92px}.matrix .name-col,.matrix .name-cell{left:136px;width:100px;min-width:100px}.matrix .position-col,.matrix .position-cell{left:236px;width:90px;min-width:90px}.matrix .date-head,.matrix .rest-cell{width:40px;min-width:40px}}@media(max-width:560px){.matrix .seq-col,.matrix .seq-cell{width:40px;min-width:40px}.matrix .number-col,.matrix .number-cell{left:40px;width:78px;min-width:78px}.matrix .name-col,.matrix .name-cell{left:118px;width:88px;min-width:88px}.matrix .position-col,.matrix .position-cell{left:206px;width:78px;min-width:78px}.matrix .date-head,.matrix .rest-cell{width:36px;min-width:36px}.matrix .date-head{height:48px}.matrix .rest-cell{height:32px}}

/* v2.7 matrix mobile: keep the date area wide and readable by hiding non-essential frozen columns. */
@media(max-width:820px){
  .matrix .seq-col,.matrix .seq-cell,.matrix .number-col,.matrix .number-cell,.matrix .position-col,.matrix .position-cell{display:none!important}
  .matrix .name-col,.matrix .name-cell{position:sticky;left:0;z-index:6;width:96px;min-width:96px}
  .matrix .name-col{background:var(--surface2)}
  .matrix .name-cell{background:var(--surface);z-index:5}
  .matrix .date-head,.matrix .rest-cell{width:40px;min-width:40px}
  .matrix .rest-cell{height:34px}
}
@media(max-width:560px){
  .matrix .name-col,.matrix .name-cell{width:88px;min-width:88px}
  .matrix .date-head,.matrix .rest-cell{width:36px;min-width:36px}
}
/* v2.7 rest-cell status: default border, blue/white normal, red/white overflow. */
.matrix .rest-cell{border:1px solid var(--line)!important;color:#fff;font-weight:800}
.matrix .rest-cell.rest-normal{background:#2563eb!important;color:#fff}
.matrix .rest-cell.rest-over{background:#dc2626!important;color:#fff;box-shadow:none!important;border-color:var(--line)!important}

/* Current employee calendar status colors. */
.day.selected{background:#2563eb!important;border-color:var(--line)!important;color:#fff!important}
.day.over{background:#dc2626!important;border-color:var(--line)!important;color:#fff!important}
.day.selected-over{background:#2563eb!important;border-color:var(--line)!important;color:#dc2626!important}
.day.selected.over{outline:none!important}

/* v2.9: unified top identity and current-page title. */
.topbar{height:68px;align-items:center}
.brand-area{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px}
.brand-row{display:flex;align-items:center;min-width:0;line-height:1.15}
.brand{display:block;line-height:1.15}
.page-title-inline{margin-left:9px;padding-left:10px;border-left:1px solid var(--line);color:var(--muted);font-weight:700;line-height:1.15;white-space:nowrap}
.top-identity{font-size:11px;line-height:1.15;color:var(--muted);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}

.day-check{position:absolute;right:5px;bottom:4px;display:none;width:18px;height:18px;border-radius:50%;align-items:center;justify-content:center;background:rgba(255,255,255,.94);color:#2563eb;font-size:13px;line-height:1;font-weight:950;box-shadow:0 1px 4px rgba(0,0,0,.16)}
.day.selected .day-check{display:flex}
.day.selected-over .day-check{color:#dc2626}
@media(max-width:820px){.topbar{height:68px;padding:0 14px}.page-title-inline{margin-left:6px;padding-left:7px}.top-identity{max-width:48vw}.day-check{width:16px;height:16px;right:4px;bottom:4px;font-size:12px}}
@media(max-width:560px){.topbar{height:66px}.brand{font-size:14px}.page-title-inline{font-size:12px}.top-identity{font-size:10px;max-width:52vw}.day-check{width:14px;height:14px;right:3px;bottom:3px;font-size:10px}}
@media(max-width:380px){.day-check{width:12px;height:12px;right:2px;bottom:2px;font-size:9px}}
@media(max-width:560px){.top-identity{display:block}}

/* v2.9.1: top navigation stays aligned with the site title while identity sits below it. */
.topbar{align-items:flex-start;padding-top:14px;padding-bottom:14px;height:68px}
.brand-area{align-self:flex-start;min-width:0}
.brand-row{height:20px;display:flex;align-items:center}
.topbar nav{align-self:flex-start;margin-top:-1px}
.topbar nav a,.topbar nav .theme-toggle{padding-top:4px;padding-bottom:4px}
.top-identity{margin-top:4px;font-size:11px;line-height:16px;padding:1px 9px;border-radius:999px;background:var(--primary-soft);color:var(--primary);font-weight:800;max-width:42vw}
@media(max-width:820px){.topbar{height:68px;padding-top:13px;padding-bottom:13px}.top-identity{max-width:45vw}.topbar nav a,.topbar nav .theme-toggle{padding-top:3px;padding-bottom:3px}}
@media(max-width:560px){.topbar{height:66px;padding-top:11px;padding-bottom:11px}.top-identity{display:inline-block;font-size:10px;line-height:14px;margin-top:3px;padding:1px 7px;max-width:48vw}.topbar nav a,.topbar nav .theme-toggle{padding:3px 7px;font-size:12px}}
@media(max-width:380px){.top-identity{max-width:42vw}.topbar nav{gap:2px}.topbar nav a,.topbar nav .theme-toggle{padding-left:5px;padding-right:5px}}
/* v2.9.1: mobile report-window text uses intentional line breaks. */
.timing-window-item{display:inline}.timing-window-sep{display:inline}
@media(max-width:560px){.timing-window-item{display:block}.timing-window-sep{display:none}}

/* Team management and period visibility */
.team-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:18px}.team-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px}.team-card summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px}.team-card summary::-webkit-details-marker{display:none}.team-card summary span:first-child{display:flex;flex-direction:column;gap:3px}.team-card summary small{color:var(--muted)}.team-edit-form{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}.member-check-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px;max-height:340px;overflow:auto;padding:2px}.member-check{display:flex!important;align-items:flex-start;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--bg);margin:0!important}.member-check span{display:flex;flex-direction:column;gap:2px}.member-check small{color:var(--muted)}.team-card>form:last-child{margin-top:10px}.period-visibility{display:inline-flex;align-items:center;gap:6px}.status-hidden{background:var(--surface);color:var(--muted);border:1px solid var(--line)}
@media(max-width:640px){.team-grid{grid-template-columns:1fr}.member-check-grid{grid-template-columns:1fr}}

.form-field{display:grid;gap:8px}.field-label{font-weight:600}.form-field input:not([type=checkbox]):not([type=radio]),.form-field select{width:100%;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:12px;padding:11px 12px;outline:none;min-height:42px;font:inherit}.form-field input[type=checkbox],.form-field input[type=radio]{width:18px;height:18px;min-width:18px;min-height:18px;padding:0;margin:0;flex:0 0 18px;accent-color:var(--primary)}.form-field input:not([type=checkbox]):not([type=radio]):focus,.form-field select:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}.form-field .check{margin:0}

/* v2.9.8: employee detail table stays horizontal on mobile; the page can scroll. */
.employee-detail-table{overflow-x:auto;-webkit-overflow-scrolling:touch}.employee-detail-table table{min-width:920px}.employee-detail-table th,.employee-detail-table td{white-space:nowrap!important}.employee-detail-table td:nth-child(4){white-space:nowrap!important;min-width:110px}.team-stat-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}.team-stat-item{display:inline-flex!important;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:var(--surface2);border:1px solid var(--line);font-size:11px}.team-stat-item em{font-style:normal;color:var(--muted)}.team-stat-item strong{font-size:12px;color:var(--text)}.stat>small{display:block;margin-top:6px}.overview-period-groups{display:grid;grid-template-columns:1fr;gap:14px}.overview-period-group{border:1px solid var(--line);border-radius:16px;padding:14px;background:var(--surface2)}.overview-group-title{display:flex;align-items:center;gap:8px;margin-bottom:10px}.overview-period-list{display:grid;gap:8px}.overview-period-item{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:13px;background:var(--surface);transition:.15s transform,.15s border-color}.overview-period-item:hover{transform:translateY(-1px);border-color:var(--primary)}.overview-period-item div{display:grid;gap:3px;min-width:0}.overview-period-item strong{font-size:14px}.overview-period-item span{font-size:12px;color:var(--muted)}.overview-arrow{font-size:20px!important;color:var(--primary)!important}.empty.compact{padding:12px}.rule-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:14px 0}.rule-day{position:relative;min-height:68px;padding:9px;border:1px solid var(--line);border-radius:12px;background:var(--surface2);cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px}.rule-day input{position:absolute;opacity:0;pointer-events:none}.rule-day:has(input:checked){border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 0 0 0 1px var(--primary)}.rule-day.has-rule small{color:var(--primary);font-size:10px}.rule-day-num{font-weight:850}.rule-day-week{font-size:10px;color:var(--muted)}@media(max-width:560px){.overview-period-groups{grid-template-columns:1fr 1fr;gap:8px}.overview-period-group{padding:9px}.overview-period-item{padding:10px;align-items:flex-start}.overview-period-item span{font-size:10px}.overview-arrow{display:none}.rule-calendar{gap:4px}.rule-day{min-height:60px;padding:7px}.rule-day small{font-size:9px;line-height:1.15}}

/* v2.9.14: consolidated period form/table styles. Keep one authoritative rule set to avoid historical cascade conflicts. */
.admin-period-actions{
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  flex-wrap:nowrap!important;
  gap:8px;
  min-width:370px;
  width:max-content;
  margin:0!important;
  white-space:nowrap;
}
.admin-period-actions .action-slot,
.admin-period-actions .period-action-slot{
  flex:0 0 auto;
  width:auto;
  min-width:0;
  box-sizing:border-box;
}
.admin-period-actions .action-slot{width:64px}
.admin-period-actions .period-action-slot{
  width:150px;
  min-height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-period-actions form{width:100%;margin:0;display:inline-flex}
.admin-period-actions .action-slot .btn,
.admin-period-actions .period-action-slot .btn{
  width:100%;
  min-width:0;
  white-space:nowrap;
  justify-content:center;
}
.admin-period-actions .period-action-slot .status{
  width:100%;
  justify-content:center;
  box-sizing:border-box;
  white-space:nowrap;
}
.admin-period-table{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.admin-period-table table{
  width:max-content;
  min-width:1100px;
}
.admin-period-table th,
.admin-period-table td{
  text-align:center;
  vertical-align:middle;
  white-space:nowrap!important;
  word-break:keep-all!important;
  overflow-wrap:normal!important;
  padding-left:13px;
  padding-right:13px;
}
.admin-period-table .actions,
.admin-period-table .admin-period-actions{
  white-space:nowrap!important;
  flex-wrap:nowrap!important;
}

/* Period form: field title follows the same typography as the other standard labels. */
.period-visible-field{display:grid;gap:8px;font-size:13px;font-weight:700;color:var(--text)}
.period-visible-field .field-label{font-size:13px;font-weight:700;color:var(--text);line-height:1.4}
.period-visible-field .check{display:inline-flex!important;width:max-content!important;min-height:18px;align-items:center;flex-direction:row!important;gap:7px!important;margin:0;white-space:nowrap;color:var(--text)}
.period-visible-field .period-visible-text{font-size:13px;font-weight:400;line-height:1.4;color:var(--text);font-family:inherit}

/* Special-date bulk controls use the same field typography and control metrics as the period form. */
.rule-bulk-panel{margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--surface2)}
.rule-bulk-title{font-size:13px;font-weight:800;margin-bottom:10px}
.rule-bulk-form{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,180px) auto;align-items:end;gap:12px}
.rule-bulk-form .form-field{display:flex;flex-direction:column;gap:7px;min-width:0;margin:0}
.rule-bulk-form .field-label{font-size:13px;font-weight:700;color:var(--text);line-height:1.4}
.rule-bulk-form select,
.rule-bulk-form input[type=number]{width:100%;height:44px;min-height:44px;border:1px solid var(--line);background:var(--surface2);color:var(--text);border-radius:12px;padding:11px 12px;outline:none;box-shadow:none;font:inherit;font-size:13px;font-weight:700;line-height:1.4}
.rule-bulk-form select:focus,
.rule-bulk-form input[type=number]:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}
@media(max-width:820px){
  .admin-period-table table{min-width:1100px}
  .admin-period-actions{justify-content:flex-start;min-width:370px;width:max-content}
  .admin-period-table .admin-period-actions{display:flex!important;flex-wrap:nowrap!important}
  .rule-bulk-form{grid-template-columns:1fr 1fr}
  .rule-bulk-form .btn{grid-column:1/-1}
}
@media(max-width:560px){
  .rule-bulk-form{grid-template-columns:1fr}
  .rule-bulk-form .btn{grid-column:auto}
  .rule-bulk-panel{padding:12px}
}

/* v2.9.15: custom compact selects keep Android/mobile option popups consistent with the site's visual language. */
.custom-select{
  position:relative;
  width:100%;
}
.custom-select-native{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:1px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
}
.custom-select-trigger{
  width:100%;
  min-height:42px;
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface2);
  color:var(--text);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  cursor:pointer;
  outline:none;
  transition:.15s border-color,.15s background,.15s box-shadow;
}
.custom-select-trigger:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}
.custom-select-trigger:focus-visible,
.custom-select.is-open .custom-select-trigger{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent);
}
.custom-select-trigger:disabled{cursor:not-allowed;opacity:.62}
.custom-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.custom-select-chevron{
  flex:0 0 auto;
  color:var(--muted);
  font-size:16px;
  line-height:1;
  transform:translateY(-1px);
  transition:.15s transform;
}
.custom-select.is-open{z-index:80}
.custom-select.is-open .custom-select-chevron{transform:rotate(180deg) translateY(1px)}
.custom-select-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:60;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 14px 34px rgba(20,30,50,.16);
  max-height:260px;
  overflow:auto;
}
.custom-select-option{
  display:flex;
  align-items:center;
  width:100%;
  min-height:36px;
  padding:8px 10px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.4;
  text-align:left;
  cursor:pointer;
}
.custom-select-option:hover,
.custom-select-option:focus-visible{background:var(--surface2);outline:none}
.custom-select-option.is-selected{background:var(--primary-soft);color:var(--primary);font-weight:650}
.custom-select-option.is-selected::after{content:'✓';margin-left:auto;font-size:13px;font-weight:800}
.custom-select-empty{padding:10px;color:var(--muted);font-size:13px;line-height:1.4}
.custom-select-menu[hidden]{display:none}
.period-team-field .field-label,
.period-visible-field .field-label{font-size:13px;font-weight:700;line-height:1.4;color:var(--text)}
.period-visible-field .check{color:var(--text)}
.period-visible-field .period-visible-text{font-size:13px;font-weight:400;line-height:1.4;color:var(--text);font-family:inherit}
.rule-bulk-form .custom-select-trigger{font-size:13px;font-weight:500}
.rule-bulk-form .custom-select-option{font-size:13px;font-weight:500}
@media(max-width:560px){
  .custom-select-menu{max-height:220px}
  .custom-select-option{min-height:34px;padding:7px 10px}
}

/* v2.9.16: responsive hardening across the admin UI.  Keep controls inside their cards
   and replace browser-native file-picker chrome with the site's control language. */
.file-picker{
  display:flex;
  align-items:center;
  width:min(100%,360px);
  min-height:42px;
  padding:4px;
  gap:8px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--surface2);
  color:var(--text);
  cursor:pointer;
  overflow:hidden;
}
.file-picker:hover{border-color:color-mix(in srgb,var(--primary) 35%,var(--line))}
.file-picker:focus-within{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 15%,transparent)}
.file-picker-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;white-space:nowrap!important}
.file-picker-button{flex:0 0 auto;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--text);font-size:12px;font-weight:700;line-height:1.3}
.file-picker-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:12px;line-height:1.4}
.employee-import-form{align-items:stretch}
.employee-import-form .file-picker{flex:1 1 320px}
.employee-import-form>.btn{flex:0 0 auto}

/* Prevent long admin controls from forcing horizontal page overflow. */
.admin-page,.admin-page .card,.admin-page .section-head,.admin-page .section-head>div{min-width:0}
.admin-page .section-head p{max-width:100%;overflow-wrap:anywhere}
.inline-form input:not([type=hidden]),.inline-form select,.inline-form .btn{min-width:0}
.page-title>div:first-child{min-width:0}
.page-title h1,.section-head h2{overflow-wrap:anywhere}
.page-title .muted{overflow-wrap:anywhere}
.team-card,.team-card summary,.team-card summary>span:first-child{min-width:0}
.team-card summary>span:first-child strong{overflow-wrap:anywhere}
.team-card summary .btn{flex:0 0 auto;white-space:nowrap}
.team-edit-form{min-width:0}
.member-check{min-width:0}
.member-check>span{min-width:0;overflow-wrap:anywhere}

@media(max-width:820px){
  .container{width:calc(100% - 20px);padding:24px 0 46px}
  .narrow{width:calc(100% - 20px)}
  .topbar{min-height:64px;height:auto;padding:10px 10px;gap:8px;align-items:flex-start}
  .brand-area{flex:1 1 auto;max-width:55%;min-width:0}
  .brand-row{min-width:0;max-width:100%}
  .brand{overflow:hidden;text-overflow:ellipsis}
  .page-title-inline{min-width:0;max-width:48%;overflow:hidden;text-overflow:ellipsis}
  .topbar nav{flex:0 1 auto;max-width:45%;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  .topbar nav::-webkit-scrollbar{display:none}
  .topbar nav a,.topbar nav .theme-toggle{flex:0 0 auto}
  .page-title{gap:14px;margin-bottom:18px}
  .page-title .page-actions,.page-title .report-actions{width:100%}
  .page-title .page-actions .btn,.page-title .report-actions .btn{flex:1 1 auto}
  .section-head{gap:10px;margin-bottom:13px}
  .card{padding:17px;border-radius:18px;margin-bottom:14px}
  .hero-card{padding:20px;border-radius:20px}
  .form-grid{grid-template-columns:1fr;gap:13px}
  .form-actions{justify-content:stretch;flex-wrap:wrap}
  .form-actions .btn{flex:1 1 150px}
  .inline-form{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:9px;align-items:stretch}
  .inline-form>*{width:100%;min-width:0;max-width:100%}
  .inline-form .btn{width:100%}
  .employee-import-form .file-picker{width:100%;max-width:none}
  .page-actions{width:100%}
  .page-actions .btn{min-width:0}
  .team-grid{grid-template-columns:1fr}
  .team-card{padding:13px}
  .member-check-grid{grid-template-columns:1fr;max-height:300px}
  .member-check{padding:10px}
  .employee-detail-table{max-width:100%;overflow-x:auto;overflow-y:hidden}
  .employee-detail-table table{min-width:900px;width:max-content}
  .employee-detail-table th,.employee-detail-table td{white-space:nowrap!important}
  .employee-detail-table .actions{min-width:300px;flex-wrap:nowrap}
  .employee-detail-table .actions .btn,.employee-detail-table .actions summary{flex:0 0 auto}
  .overview-period-groups{grid-template-columns:1fr}
  .overview-period-item{min-width:0}
  .conflict-item{grid-template-columns:1fr;gap:8px}
  .calendar-card{padding:15px}
  .calendar-grid,.week-head{gap:4px}
  .day{min-height:44px}
  .report-actions{flex-wrap:wrap}
  .report-actions .btn{flex:1 1 180px}
  .responsive-table{max-width:100%;overflow-x:auto}
  .matrix-scroll{max-width:100%}
}

@media(max-width:560px){
  .container{width:calc(100% - 16px);padding-top:18px}
  .narrow{width:calc(100% - 16px)}
  .topbar{padding:9px 8px;min-height:60px}
  .brand-area{max-width:52%}
  .page-title-inline{font-size:11px;margin-left:4px;padding-left:5px}
  .topbar nav{max-width:47%;gap:2px}
  .topbar nav a,.topbar nav .theme-toggle{padding:5px 6px;font-size:11px}
  .top-identity{max-width:100%;font-size:10px}
  .page-title h1,.hero-card h1{font-size:28px}
  .page-title .page-actions,.page-title .report-actions{display:grid;grid-template-columns:1fr}
  .page-title .page-actions .btn,.page-title .report-actions .btn{width:100%}
  .page-actions{display:grid;grid-template-columns:1fr;width:100%}
  .page-actions .btn{width:100%}
  .section-head{display:block}
  .section-head h2{font-size:17px}
  .card{padding:15px;border-radius:16px}
  .hero-card{padding:17px;border-radius:18px}
  .stats{grid-template-columns:1fr}
  .inline-form{gap:8px}
  .file-picker{min-height:42px}
  .file-picker-button{padding:7px 9px}
  .file-picker-name{font-size:11px}
  .team-card summary{gap:8px;align-items:flex-start}
  .team-card summary .btn{font-size:11px;padding:6px 8px}
  .member-check-grid{max-height:280px}
  .member-check{padding:9px}
  .employee-detail-table table{min-width:860px}
  .employee-detail-table th,.employee-detail-table td{padding:10px 11px;font-size:12px}
  .employee-detail-table th{font-size:11px}
  .employee-detail-table .actions{min-width:280px}
  .form-actions{flex-direction:column}
  .form-actions .btn{width:100%;flex:1 1 auto}
  .rule-calendar{gap:4px}
  .rule-day{min-height:58px;padding:7px}
  .report-actions .btn{flex:1 1 auto}
}

@media(max-width:380px){
  .container{width:calc(100% - 12px)}
  .narrow{width:calc(100% - 12px)}
  .topbar{padding-left:6px;padding-right:6px}
  .brand-area{max-width:48%}
  .topbar nav{max-width:50%}
  .topbar nav a,.topbar nav .theme-toggle{padding-left:5px;padding-right:5px;font-size:10px}
  .page-title-inline{display:none}
  .card{padding:13px}
  .btn{padding:9px 10px}
  .employee-import-form .file-picker{min-width:0}
  .file-picker-button{font-size:11px}
  .file-picker-name{font-size:10px}
}

/* v2.9.18: page-title actions must keep their intrinsic button width on desktop.
   Long introductory copy may wrap, but action labels such as “返回总览” stay on one line. */
.page-title > div:first-child{flex:1 1 auto;min-width:0}
.page-title > .btn{flex:0 0 auto;white-space:nowrap}

/* v2.9.17: audit account selector and mobile log table.  The filter uses the same custom
   select language as batch settings; the audit table intentionally remains a wide table
   on phones so every field can be inspected by horizontal scrolling. */
.audit-filter-form{align-items:stretch}
.audit-account-select{flex:1 1 280px;min-width:0}
.audit-filter-form>.btn{flex:0 0 auto;align-self:stretch}
.audit-account-select .custom-select-trigger{font-size:13px;font-weight:500}
.audit-account-select .custom-select-option{font-size:13px;font-weight:500}
.custom-select.is-invalid .custom-select-trigger{border-color:var(--danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--danger) 14%,transparent)}
.audit-table-wrap{max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.audit-table-wrap .audit-table{width:max-content;min-width:980px;table-layout:auto}
.audit-table-wrap .audit-table th,.audit-table-wrap .audit-table td{white-space:nowrap;vertical-align:middle}
.audit-table-wrap .audit-table .audit-details{min-width:320px;white-space:nowrap}
@media(max-width:820px){
  .audit-filter-form{display:grid;grid-template-columns:minmax(0,1fr);width:100%;gap:9px}
  .audit-filter-form>.btn{width:100%}
  .audit-account-select{width:100%;min-width:0}
  .audit-table-wrap{margin:0;max-width:100%;border-radius:14px;scrollbar-width:thin}
  .audit-table-wrap .audit-table{min-width:980px}
}

/* v2.9.25: unified administrator identity and account management controls. */
.top-role{display:inline-flex;align-items:center;margin-left:7px;padding:2px 7px;border:1px solid var(--border);border-radius:999px;font-size:10px;font-weight:650;color:var(--muted);vertical-align:middle}
.admin-account-create{grid-template-columns:repeat(3,minmax(0,1fr));align-items:end}
.admin-account-create .form-actions{grid-column:1/-1}
@media(max-width:720px){.admin-account-create{grid-template-columns:1fr}}
@media(max-width:560px){.top-role{font-size:9px;padding:1px 5px;margin-left:4px}.top-identity{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* v2.9.25-fix: administrator header identity and current-page title.
   Keep the current page visible even on narrow phones; name and role are a single
   flex row so their baselines never drift vertically. */
.top-identity{display:flex!important;align-items:center;justify-content:flex-start;gap:7px;margin-top:4px;min-width:0;max-width:48vw;line-height:1!important;padding:0!important;border-radius:0!important;background:transparent!important;color:var(--muted)!important;font-weight:700!important}
.top-name{display:inline-flex;align-items:center;min-width:0;max-width:32vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}
.top-role{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;margin:0;padding:3px 8px;border:1px solid var(--line);border-radius:999px;background:var(--primary-soft);color:var(--primary);font-size:10px;font-weight:750;line-height:1.2;vertical-align:middle;white-space:nowrap}
.page-title-inline{display:inline-block!important;visibility:visible!important;max-width:min(44vw,240px);overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
@media(max-width:820px){.top-identity{max-width:48vw}.top-name{max-width:29vw}.page-title-inline{max-width:42vw}}
@media(max-width:560px){.topbar{gap:6px}.brand-area{max-width:56%}.top-identity{max-width:100%;gap:5px}.top-name{max-width:31vw;font-size:10px}.top-role{font-size:9px;padding:2px 6px}.page-title-inline{font-size:11px;max-width:55vw}}
@media(max-width:380px){.brand-area{max-width:58%}.topbar nav{max-width:42%}.page-title-inline{display:inline-block!important;max-width:54vw;margin-left:3px;padding-left:5px;font-size:10px}.top-name{max-width:30vw}.top-role{font-size:8px;padding:2px 5px}}