:root {
  color-scheme: light;
  --ink: #202a27;
  --muted: #7d8984;
  --line: #e8ebe7;
  --paper: #f5f6f3;
  --white: #ffffff;
  --green: #173f35;
  --green-2: #235a4b;
  --mint: #e4eee8;
  --gold: #d5aa64;
  --amber: #a16c24;
  --radius: 17px;
  --shadow: 0 12px 36px rgba(26, 52, 42, .045);
  font-family: Inter, "Segoe UI", "Microsoft YaHei", Arial, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-size: 14px; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(35, 90, 75, .24); outline-offset: 2px; }
.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 236px; background: var(--green); color: #f4f7f4; min-height: 100vh; padding: 25px 16px 20px; display: flex; flex-direction: column; flex: 0 0 236px; }
.brand { display:flex; align-items:center; gap:11px; padding: 0 10px; margin: 1px 0 43px; }
.brand-mark { width:35px; height:35px; display:grid; place-items:center; border-radius:11px; background:#f4f5ed; color:var(--green); font-weight:800; font-size:19px; letter-spacing:-2px; position:relative; }
.brand-mark::after { content:""; width:6px; height:6px; border-radius:99px; background:var(--gold); position:absolute; right:6px; top:6px; }
.brand-name { font-weight:700; letter-spacing:.09em; font-size:15px; }
.brand-sub { font-size:10px; color:#a9c0b5; letter-spacing:.05em; margin-top:3px; }
.side-caption { padding: 0 12px; margin:0 0 10px; color:#88a79a; text-transform:uppercase; font-size:10px; letter-spacing:.13em; }
.nav-list { display:flex; flex-direction:column; gap:5px; }
.nav-item { border:0; color:#d0ddd6; background:transparent; padding:11px 12px; border-radius:10px; display:flex; align-items:center; gap:12px; text-align:left; width:100%; transition:background .18s,color .18s; }
.nav-item:hover { color:#fff; background:rgba(255,255,255,.08); }
.nav-item.active { color:#fff; background:#285344; box-shadow: inset 3px 0 #d5aa64; }
.nav-icon { width:18px; height:18px; display:grid; place-items:center; flex:none; }
.nav-icon svg { width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.side-bottom { margin-top:auto; }
.connection-card { margin:0 4px 20px; padding:13px 12px; background:rgba(255,255,255,.075); border:1px solid rgba(255,255,255,.09); border-radius:12px; display:flex; align-items:center; gap:10px; }
.connection-dot { width:8px;height:8px;border-radius:50%;background:#67c58e;box-shadow:0 0 0 4px rgba(103,197,142,.12); flex:none; }
.connection-dot.offline { background:#e0aa5f;box-shadow:0 0 0 4px rgba(224,170,95,.13); }
.connection-label { font-size:12px; font-weight:600; }
.connection-detail { font-size:10px; color:#a9c0b5; margin-top:3px; }
.sidebar-note { color:#93afa2; font-size:10px; padding:0 12px; line-height:1.6; }
.app-main { min-width:0; flex:1; }
.topbar { height:74px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.76); display:flex; align-items:center; justify-content:space-between; padding:0 4.2%; }
.top-date { color:#68756f; font-size:12px; }
.top-actions { display:flex;align-items:center;gap:17px; }
.online-mini { display:flex;align-items:center;gap:8px;color:#54705f;font-size:11px; }
.lang-switch { display:flex; align-items:center; gap:2px; padding:3px; background:#f0f2ef; border-radius:9px; }
.lang-btn { border:0; background:transparent; padding:6px 9px; border-radius:7px; color:#79837e; font-size:11px; }
.lang-btn.active { background:#fff; color:var(--green); font-weight:700; box-shadow:0 1px 4px rgba(0,0,0,.08); }
.page { width:min(1180px, 92%); margin:0 auto; padding:34px 0 62px; }
.page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:26px; }
h1 { font-size:28px; letter-spacing:-.045em; line-height:1.2; margin:0; font-weight:680; }
.page-intro { color:var(--muted); margin:8px 0 0; font-size:13px; }
.heading-actions { display:flex; align-items:center; gap:9px; }
.button { border:1px solid transparent; border-radius:9px; padding:10px 14px; display:inline-flex; gap:8px; align-items:center; justify-content:center; font-weight:650; font-size:12px; transition:transform .16s,background .16s,border-color .16s; }
.button:active { transform:translateY(1px); }
.button.primary { color:#fff; background:var(--green); box-shadow:0 5px 14px rgba(23,63,53,.14); }
.button.primary:hover { background:#245848; }
.button.secondary { background:#fff; color:#40504a; border-color:#e2e7e2; }
.button.secondary:hover { border-color:#b8c8bd; }
.button.ghost { background:transparent;color:#6e7c75;border-color:transparent;padding-left:9px;padding-right:9px; }
.button.small { padding:8px 11px;font-size:11px; }
.button svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round; }
.stat-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; margin-bottom:24px; }
.stat-card { background:var(--white); border:1px solid var(--line); border-radius:13px; padding:15px 17px; display:flex; align-items:center; gap:13px; min-height:79px; }
.stat-icon { width:35px;height:35px;border-radius:10px;background:#edf3ef;color:var(--green-2);display:grid;place-items:center;flex:none; }
.stat-icon.gold { background:#f6f0e4;color:#a3783c; }
.stat-icon svg { width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; }
.stat-label { color:#75817b;font-size:11px; }
.stat-value { font-size:19px;font-weight:700;letter-spacing:-.03em;margin-top:4px; }
.content-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,.9fr); gap:18px; align-items:start; }
.panel { background:var(--white); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.panel-head { padding:19px 21px 15px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel-title { font-size:14px; margin:0;font-weight:680;letter-spacing:-.02em; }
.panel-sub { color:var(--muted); font-size:11px; margin:5px 0 0; }
.text-link { border:0;background:none;color:#376c58;font-size:11px;font-weight:650;padding:6px; }
.text-link:hover { color:#163e33;text-decoration:underline; }
.report-list { padding:0 11px 10px; }
.report-row { border-top:1px solid #eff1ee; padding:14px 10px; display:grid; grid-template-columns:38px minmax(0,1fr) auto; gap:12px; align-items:start; cursor:pointer; border-radius:8px; }
.report-row:hover { background:#fafbf9; }
.avatar { width:38px;height:38px;border-radius:50%; background:#dce8e0;color:#315b48; display:grid;place-items:center;font-weight:700;font-size:12px; overflow:hidden; flex:none; }
.avatar img { width:100%;height:100%;object-fit:cover; }
.report-name-line { display:flex;align-items:center;gap:8px;flex-wrap:wrap; }
.report-name { font-size:12px;font-weight:680; }
.report-time { color:#8a948f;font-size:10px; }
.report-location { color:#63736a;font-size:11px;margin-top:5px; display:flex;align-items:center;gap:5px; }
.report-location svg { width:12px;height:12px;stroke:#81938a;fill:none;stroke-width:1.7; }
.report-snippet { color:#718078;font-size:11px;line-height:1.55;margin-top:6px; max-width:530px; }
.report-meta { display:flex;align-items:center;gap:8px; margin-top:8px; }
.status { display:inline-flex; align-items:center; gap:5px; border-radius:99px; padding:4px 7px; font-size:9px; font-weight:650; white-space:nowrap; background:#eaf3ed;color:#397553; }
.status.pending { background:#f6f0e4;color:#986b2b; }
.status.demo { background:#eff1ef;color:#7c8780; }
.photo-count { display:flex;align-items:center;gap:4px;color:#79877f;font-size:10px; }
.photo-count svg {width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.7;}
.side-stack { display:flex;flex-direction:column;gap:17px; }
.form-panel { padding:20px; }
.form-title-row { display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px; }
.form-title { font-weight:700;font-size:15px;letter-spacing:-.02em;margin:0; }
.form-desc { margin:5px 0 0;font-size:11px;color:var(--muted); }
.offline-tag { font-size:9px;color:#42745b;background:#edf4ef;border-radius:99px;padding:6px 8px;white-space:nowrap; }
.field { margin-bottom:13px; }
.field-grid { display:grid;grid-template-columns:1fr 1fr;gap:11px; }
.field label { display:block;color:#56645d;font-weight:650;font-size:10px;margin:0 0 6px; }
.required { color:#bd7b43; }
.input, .textarea, .select { display:block;width:100%;border:1px solid #e2e7e2;border-radius:8px;background:#fff;color:var(--ink);padding:10px 11px;font-size:12px;transition:border-color .15s,box-shadow .15s; }
.input::placeholder,.textarea::placeholder { color:#a9b1ac; }
.input:focus,.textarea:focus,.select:focus { border-color:#84a995;box-shadow:0 0 0 3px rgba(67,123,92,.09);outline:0; }
.textarea { min-height:84px;resize:vertical;line-height:1.55; }
.textarea.short { min-height:64px; }
.upload-box { border:1px dashed #bfcbc2;border-radius:10px;background:#fbfcfa;padding:13px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:border .15s,background .15s; }
.upload-box:hover { border-color:#6b967a;background:#f6faf6; }
.upload-icon { width:34px;height:34px;border-radius:9px;background:#eaf1eb;color:#417453;display:grid;place-items:center;flex:none; }
.upload-icon svg {width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.upload-copy { min-width:0; }
.upload-main { color:#43534a;font-weight:650;font-size:11px; }
.upload-help { color:#909b94;font-size:10px;margin-top:3px; }
.file-input { display:none; }
.photo-strip { display:flex;gap:8px;flex-wrap:wrap;margin-top:9px; }
.photo-thumb { position:relative;width:56px;height:56px;border-radius:8px;overflow:hidden;background:#edf1ed;border:1px solid #e1e6e1; }
.photo-thumb img { width:100%;height:100%;object-fit:cover; }
.photo-remove { position:absolute;right:3px;top:3px;width:18px;height:18px;border:0;border-radius:50%;background:rgba(18,36,29,.78);color:white;display:grid;place-items:center;font-size:12px;line-height:1;padding:0; }
.form-actions { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:17px; }
.save-hint { color:#849089;font-size:10px;line-height:1.4; }
.activity-panel { padding:18px 19px; background:#eaf1eb;box-shadow:none;border-color:#e2eae3; }
.activity-title { font-size:12px;font-weight:700;margin:0 0 5px;color:#2d4f3e; }
.activity-copy { margin:0;color:#697c70;font-size:10px;line-height:1.55; }
.activity-line {display:flex;align-items:flex-start;gap:10px;}
.activity-icon { width:29px;height:29px;display:grid;place-items:center;border-radius:9px;background:#dce9df;color:#527963;flex:none; }
.activity-icon svg {width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
.employee-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px; }
.employee-card { background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px;display:flex;align-items:center;gap:12px;transition:border .15s,transform .15s; }
.employee-card:hover { border-color:#bfd0c3;transform:translateY(-1px); }
.employee-card .avatar { width:46px;height:46px;font-size:13px; }
.employee-fullname { font-size:12px;font-weight:680; }
.employee-id { font-size:10px;color:#849089;margin-top:4px; }
.employee-foot { border-top:1px solid #edf0ed;margin-top:13px;padding-top:11px;display:flex;align-items:center;justify-content:space-between;color:#7e8b83;font-size:10px; }
.employee-foot button { padding:3px 0; }
.search-box { position:relative; }
.search-box svg { position:absolute;left:11px;top:10px;width:15px;height:15px;stroke:#8c9991;fill:none;stroke-width:1.7; }
.search-box input { padding-left:33px;min-width:210px; }
.history-toolbar { display:flex;gap:10px;align-items:center; }
.empty-state { padding:42px 20px;text-align:center;color:#7f8d85; }
.empty-state strong { display:block;color:#45564c;font-size:13px;margin-bottom:6px; }
.empty-icon { width:42px;height:42px;border-radius:13px;background:#eef3ef;margin:0 auto 12px;display:grid;place-items:center;color:#517a61; }
.empty-icon svg {width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;}
.modal-backdrop { position:fixed;inset:0;z-index:20;background:rgba(17,35,28,.36);display:grid;place-items:center;padding:18px; }
.modal { width:min(470px,100%);background:#fff;border-radius:18px;box-shadow:0 25px 80px rgba(14,33,25,.25);padding:23px; }
.modal-head { display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px; }
.modal-title { font-size:17px;font-weight:700;margin:0;letter-spacing:-.03em; }
.modal-close { width:29px;height:29px;border:0;border-radius:8px;background:#f1f3f1;color:#748179;font-size:18px;line-height:1; }
.modal-actions {display:flex;justify-content:flex-end;gap:8px;margin-top:19px;}
.avatar-upload {display:flex;align-items:center;gap:12px;margin-bottom:17px;}
.avatar-upload .avatar {width:54px;height:54px;}
.toast { position:fixed;z-index:30;left:50%;bottom:25px;transform:translate(-50%,15px);opacity:0;pointer-events:none;background:#203c31;color:#fff;padding:10px 15px;border-radius:9px;box-shadow:0 8px 25px rgba(0,0,0,.16);font-size:12px;transition:.2s;max-width:min(90vw,520px);text-align:center; }
.toast.show {opacity:1;transform:translate(-50%,0);}
.mobile-nav {display:none;}
.login-screen { min-height:100vh; display:grid; place-items:center; padding:22px; background:radial-gradient(ellipse at 15% 15%,#e3ede6 0,transparent 40%),var(--paper); }
.login-card { width:min(430px,100%); position:relative; background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px; box-shadow:0 18px 55px rgba(26,52,42,.08); }
.login-brand { padding:0; margin:0 0 38px; }
.login-card h1 { font-size:26px; }
.login-language { position:absolute; right:22px; top:25px; display:flex; gap:2px; padding:3px; background:#f0f2ef; border-radius:9px; }
.login-card .page-intro { margin:8px 0 24px; }
.login-submit { width:100%; margin-top:4px; }
.login-help { color:var(--muted); font-size:11px; margin:15px 0 0; line-height:1.5; }
.login-error { min-height:17px; margin:9px 0 0; color:#a44939; font-size:11px; line-height:1.4; }
.admin-password-field[hidden] { display:none!important; }
.top-user { color:#59685f; font-size:11px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.signout-mobile { display:none; border:0; color:#54685c; border-radius:8px; background:#f0f2ef; width:30px; height:30px; font-size:18px; }
.sidebar-user { display:flex;align-items:center;gap:10px;padding:12px 8px;color:#eef4ef;font-size:11px;line-height:1.35; }
.sidebar-user .avatar { width:31px;height:31px; flex:none; }
.sidebar-user small,.profile-inline small,.table-person small { display:block;color:#a8c0b4;font-size:9px;margin-top:3px; }
.signout-button { width:100%;border:1px solid rgba(255,255,255,.15);background:transparent;border-radius:8px;padding:8px 10px;color:#c6d7cc;font-size:10px;text-align:left; }
.signout-button:hover { background:rgba(255,255,255,.08);color:#fff; }
.profile-inline { display:flex;align-items:center;gap:9px;padding:7px 0;color:#48584e;font-size:11px; }
.profile-inline .avatar { width:32px;height:32px; }
.profile-inline small { color:#8b978f; }
.date-rule { margin:-5px 0 13px;color:#8b978f;font-size:10px;line-height:1.45; }
.small-value { font-size:14px; }
.metric-stack { min-width:0; }
.stat-value small { font-size:10px;letter-spacing:0;color:#728078;font-weight:500; }
.metric-sub { color:#8a958f;font-size:10px;margin-top:3px; }
.admin-grid { display:grid;grid-template-columns:minmax(230px,.75fr) minmax(0,1.6fr);gap:15px;align-items:stretch;margin-bottom:16px; }
.chart-panel,.month-summary,.admin-report-panel { overflow:hidden; }
.weekly-chart { height:200px;padding:9px 20px 16px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:9px;align-items:end; }
.chart-column { height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0; }
.chart-count { color:#607068;font-size:10px;font-weight:650; }
.chart-bar { width:min(35px,80%);min-height:3px;border-radius:6px 6px 2px 2px;background:#bad1c1;transition:height .2s; }
.chart-bar.current { background:var(--green-2); }
.chart-label { max-width:100%;color:#87928c;font-size:9px;white-space:nowrap; }
.month-picker { display:flex;align-items:center;gap:7px;color:#839087;font-size:9px;white-space:nowrap; }
.month-picker .input { width:130px;padding:7px 8px;font-size:10px; }
.table-wrap { overflow-x:auto; }
.stats-table { width:100%;border-collapse:collapse;text-align:left;white-space:nowrap; }
.stats-table th { padding:0 12px 10px;color:#8a958e;font-size:9px;font-weight:600; }
.stats-table td { border-top:1px solid #eff1ee;padding:9px 12px;color:#627067;font-size:10px; }
.stats-table tr td:first-child,.stats-table th:first-child { padding-left:20px; }
.table-person { display:flex;align-items:center;gap:8px;color:#34463b;font-size:10px;font-weight:650; }
.table-person .avatar { width:29px;height:29px;font-size:9px; }
.table-person small { color:#89968e;font-weight:400; }
.backfill-number { display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:7px;background:#f6f0e4;color:#997139;font-weight:700; }
.month-bar { width:58px;height:5px;border-radius:9px;background:#edf0ed;overflow:hidden; }
.month-bar span { display:block;height:100%;border-radius:inherit;background:#78a084; }
.table-empty { text-align:center!important;padding:25px!important;color:#8a958e!important; }
.report-clickable { cursor:pointer; }
.report-clickable:hover { background:#f8faf8; }
.report-meta-right { color:#9aa69e;display:grid;place-items:center; }
.report-meta-right svg { width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7; }
.backfill-status { background:#f6f0e4;color:#986b2b; }
.locked-status { background:#f0f1ef;color:#7d8781; }
.danger { color:#9b493d!important;border-color:#eed8d4!important;background:#fff!important; }
.danger:hover { background:#fff5f3!important; }
.danger svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7; }
.report-modal { max-height:min(88vh,780px);overflow-y:auto; }
.detail-location { display:flex;align-items:center;gap:6px;color:#4f6959;background:#eef4ef;border-radius:9px;padding:10px 12px;font-size:11px;margin-bottom:14px; }
.detail-location svg { width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.7; }
.detail-block { border-top:1px solid #edf0ed;padding:12px 0; }
.detail-block h3 { margin:0 0 5px;color:#53665a;font-size:11px; }
.detail-block p { white-space:pre-wrap;line-height:1.6;color:#303e35;font-size:12px;margin:0;overflow-wrap:anywhere; }
.detail-photos { display:flex;gap:8px;flex-wrap:wrap;margin:8px 0; }
.detail-photos img { width:90px;height:90px;border-radius:9px;object-fit:cover;background:#edf1ed; }
.detail-lock { color:#87928c;font-size:9px;line-height:1.5;margin:11px 0 0; }
.report-modal .modal-actions { position:sticky;bottom:-23px;padding:12px 0 0;background:#fff; }
.report-modal .modal-actions .button { min-width:85px; }
.calendar-panel { margin-bottom:16px; }
.calendar-head { align-items:flex-start; }
.calendar-controls { display:flex;align-items:flex-end;gap:10px; }
.calendar-person-picker { display:grid;gap:5px;color:#839087;font-size:9px; }
.calendar-person-picker .select { width:min(245px,34vw);padding:8px 10px;font-size:11px; }
.calendar-controls .month-picker { display:grid;gap:5px; }
.calendar-legend { display:flex;justify-content:center;gap:22px;padding:3px 14px 13px;color:#728078;font-size:10px; }
.calendar-legend span { display:flex;align-items:center;gap:7px; }
.legend-dot,.calendar-dot { width:8px;height:8px;border-radius:50%;background:#4d8a63;display:inline-block; }
.legend-dot.backfill,.calendar-day.backfill-day .calendar-dot { background:#c08a3a; }
.legend-dot.no-report-dot { background:#d9dfda; }
.month-calendar { max-width:760px;margin:0 auto;padding:0 20px 20px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px; }
.calendar-weekday { color:#89958d;text-align:center;font-size:10px;font-weight:600;padding:5px 0; }
.calendar-day { position:relative;height:54px;min-height:42px;border:1px solid #edf0ed;border-radius:10px;background:#fbfcfa;color:#53645a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px; }
button.calendar-day { width:100%;padding:2px; }
.calendar-day.has-report { border-color:#dce9de;background:#edf5ef;color:#285c3b;cursor:pointer; }
.calendar-day.has-report:hover { border-color:#8eaf97;background:#e3efe6; }
.calendar-day.backfill-day { border-color:#efe1c5;background:#faf4e9;color:#89642e; }
.calendar-day.backfill-day:hover { border-color:#d4b377;background:#f7eedc; }
.calendar-day-number { line-height:1; }
.calendar-dot { width:6px;height:6px; }
.calendar-multiple { position:absolute;top:4px;right:5px;color:#87938b;font-size:8px;line-height:1; }
.calendar-spacer { visibility:hidden; }
.calendar-day.no-report { border-color:transparent;background:transparent;color:#88938d; }
.calendar-day.future-day { color:#c0c7c1; }
.calendar-empty { border-top:1px solid #eff1ee;padding:24px 18px;text-align:center;color:#87938d;font-size:11px; }
@media(max-width:1060px) {
  .sidebar {width:210px;flex-basis:210px;}
  .page {width:94%;}
  .content-grid {grid-template-columns:minmax(0,1.3fr) minmax(285px,.9fr);gap:13px;}
  .form-panel {padding:17px;}
  .employee-grid {grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media(max-width:760px) {
  .sidebar {display:none;}
  .admin-grid { grid-template-columns:1fr;gap:12px; }
  .top-user { display:none; }
  .signout-mobile { display:block; }
  .sidebar-user,.signout-button { display:none; }
  .login-card { padding:24px; }
  .topbar {height:61px;padding:0 18px;}
  .top-date {font-size:11px;}
  .online-mini {display:none;}
  .top-actions {gap:10px;}
  .page {width:auto;margin:0;padding:24px 16px 92px;}
  .page-heading {align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:19px;}
  h1 {font-size:25px;}
  .heading-actions {width:100%;}
  .heading-actions .button {flex:1;}
  .stat-row {gap:8px;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:16px;}
  .stat-card {min-height:72px;padding:11px 9px;gap:8px;align-items:flex-start;flex-direction:column;}
  .stat-icon {width:27px;height:27px;border-radius:8px;}
  .stat-icon svg {width:15px;height:15px;}
  .stat-label {font-size:9px;line-height:1.3;}
  .stat-value {font-size:17px;margin-top:3px;}
  .content-grid {grid-template-columns:1fr;gap:14px;}
  .side-stack {order:-1;}
  .panel-head {padding:16px 16px 13px;}
  .report-list {padding:0 8px 8px;}
  .report-row {grid-template-columns:34px minmax(0,1fr);padding:13px 7px;gap:10px;}
  .report-row>.report-meta-right {grid-column:2;display:flex;}
  .avatar {width:34px;height:34px;}
  .employee-grid {grid-template-columns:1fr;gap:9px;}
  .weekly-chart { height:170px;padding-left:12px;padding-right:12px;gap:4px; }
  .chart-label { font-size:8px; }
  .month-summary .panel-head { align-items:flex-start;flex-direction:column; }
  .month-picker { width:100%;justify-content:space-between; }
  .month-picker .input { width:145px; }
  .stats-table td { padding:8px; }
  .stats-table tr td:first-child,.stats-table th:first-child { padding-left:12px; }
  .calendar-head { align-items:flex-start;flex-direction:column; }
  .calendar-controls { width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(125px,.8fr);align-items:end;gap:9px; }
  .calendar-person-picker .select { width:100%;min-width:0; }
  .month-calendar { padding:0 12px 16px;gap:4px; }
  .calendar-day { height:42px;min-height:36px;border-radius:8px; }
  .calendar-legend { justify-content:flex-start;flex-wrap:wrap;padding-bottom:11px;font-size:9px;gap:8px 14px; }
  .report-modal { padding:18px; }
  .history-toolbar {width:100%;}
  .search-box {flex:1;}
  .search-box input {min-width:0;}
  .mobile-nav {display:flex;position:fixed;z-index:10;bottom:0;left:0;right:0;padding:7px 13px max(9px,env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid var(--line);justify-content:space-around;backdrop-filter:blur(12px);}
  .mobile-nav .nav-item {color:#7e8983;width:auto;flex:1;flex-direction:column;gap:4px;padding:5px 3px;border-radius:8px;font-size:9px;}
  .mobile-nav .nav-item.active {background:transparent;color:var(--green);box-shadow:none;font-weight:700;}
}
@media(max-width:430px) {
  .page {padding-left:12px;padding-right:12px;}
  .field-grid {grid-template-columns:1fr;gap:0;}
  .form-panel {padding:15px;}
  .form-actions {align-items:flex-start;flex-direction:column;}
  .form-actions .button {width:100%;}
  .topbar {padding:0 13px;}
  .lang-btn {padding:6px 7px;font-size:10px;}
  .report-name-line {gap:5px;}
  .calendar-controls { grid-template-columns:1fr; }
  .calendar-day { height:37px;min-height:32px;font-size:10px; }
  .calendar-weekday { font-size:8px; }
  .month-calendar { padding-left:8px;padding-right:8px;gap:2px; }
  .calendar-legend { gap:10px;font-size:8px; }
}

.avatar-edit-button { border:0;background:transparent;color:#59685f;display:flex;align-items:center;gap:8px;padding:3px 7px;border-radius:10px;font-size:11px; }
.avatar-edit-button:hover { background:#f0f4f0; }
.avatar-edit-thumb { width:34px;height:34px;position:relative;display:block; }
.avatar-edit-thumb > .avatar { width:34px;height:34px; }
.avatar-edit-badge { position:absolute;right:-3px;bottom:-2px;width:16px;height:16px;border:2px solid #fff;border-radius:50%;background:var(--green-2);color:#fff;display:grid;place-items:center; }
.avatar-edit-badge svg { width:9px;height:9px;stroke:currentColor;fill:none;stroke-width:2; }
.avatar-edit-label { white-space:nowrap; }
@media(max-width:760px) {
  .avatar-edit-button { width:36px;height:36px;padding:1px;justify-content:center; }
  .avatar-edit-thumb,.avatar-edit-thumb > .avatar { width:32px;height:32px; }
  .avatar-edit-label { display:none; }
}