:root { font-family: 'Segoe UI', Arial, sans-serif; color: #20304a; background: #eef2f7; font-synthesis: none; -webkit-tap-highlight-color: transparent; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
.auth-heading { text-align: center; }
.login-brand { text-align: center; padding: 0 8px 22px; }
.login-brand h1 { margin: 0; }
.login-brand img { display: block; width: min(100%, 380px); height: auto; max-height: 275px; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 3px 5px #ffffffd9); }
.brand-motto { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 3px; color: #314e43; text-shadow: 0 1px 8px #fff; }
.login-form { border-color: #c7b07980 !important; box-shadow: 0 12px 40px #173b291c; }
.login-form h2 { margin: 0; text-align: center; color: #244c3a; font-family: Georgia, serif; font-size: 26px; }
.login-intro { text-align: center; font-size: 13px; color: #758196; margin: 8px 0 26px; }
.login-form .primary-button { background: linear-gradient(135deg, #315c47, #173d2c); border: 1px solid #ac905c; }
.login-help { margin: 20px 0 0; text-align: center; font-size: 12px; line-height: 1.8; color: #64786d; }
.account-roster { margin-top: 24px; }
.personal-points { margin-bottom: 20px; }
.points-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.point-card { padding: 20px 16px; border-radius: 18px; border: 1px solid #e4d4ad; background: #fff9edf2; }
.point-card span, .point-card small { display: block; font-size: 12px; }
.point-card strong { display: block; margin: 8px 0; font-size: 32px; color: #977229; font-weight: 700; }
.point-card small { color: #758196; line-height: 1.6; }
.xp-point { border-color: #b9d8cf; background: #effbf7f2; }
.xp-point strong { color: #2c795d; }
.xp-progress { padding: 16px 18px; border: 1px solid #ffffffa6; background: #ffffffe8; border-radius: 16px; margin-top: 12px; }
.xp-progress p { margin: 0 0 10px; font-size: 13px; font-weight: 600; }
.xp-progress progress { display: block; width: 100%; height: 9px; border: 0; border-radius: 8px; overflow: hidden; accent-color: #368566; }
.xp-progress progress::-webkit-progress-bar { background: #e4eee9; border-radius: 8px; }
.xp-progress progress::-webkit-progress-value { background: linear-gradient(90deg, #378764, #b2a15e); border-radius: 8px; }
.xp-progress small { display: block; margin-top: 10px; color: #758196; font-size: 12px; }
.points-link { margin-bottom: 20px; width: 100%; }
.profile-xp-history { margin-bottom: 16px; }
.points-rule { padding: 14px 16px; border-radius: 14px; background: #ffffffe8; font-size: 13px; line-height: 1.7; }
.points-history, .merit-record-form { margin-top: 20px; }
.points-history h2, .merit-record-form h2 { font-size: 18px; margin: 0 0 16px; }
.points-history summary { cursor: pointer; font-weight: 600; }
.point-history-entry { margin: 0; padding: 14px 0; border-bottom: 1px solid #e5eaf2; overflow-wrap: anywhere; font-size: 13px; line-height: 1.7; }
.point-history-entry h3 { margin: 0; font-size: 14px; }
.point-history-entry p { margin: 6px 0; white-space: pre-wrap; }
.point-history-entry small { color: #758196; }
.board-filter { margin-bottom: 20px; }
.board-filter .form-field { margin-bottom: 0; }
.stocktake-location { padding: 12px 16px; border-radius: 12px; background: #ffffffdf; color: #41755a; font-size: 13px; font-weight: 600; }
.stocktake-branch { margin-bottom: 18px; }
.stocktake-branch .form-field { margin-bottom: 0; }
.stocktake-draft > .catalog-button { margin-top: 20px; border: 0; cursor: pointer; }
.stocktake-draft > .catalog-button:disabled { opacity: .5; cursor: not-allowed; }
.stocktake-add-item { margin: 16px 0 20px; }
.stocktake-add-item > summary { width: fit-content; padding: 10px 4px; color: #346be2; cursor: pointer; font-size: 13px; font-weight: 600; }
.stocktake-add-item[open] > summary { margin-bottom: 10px; }
.stocktake-draft, .stocktake-sent { margin-top: 20px; }
.stocktake-draft h2, .stocktake-sent h2 { margin: 0 0 14px; font-size: 18px; }
.stocktake-count { color: #758196; font-size: 12px; font-weight: 400; }
.stocktake-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-bottom: 1px solid #e5eaf2; font-size: 14px; }
.stocktake-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.stocktake-row p { margin: 6px 0 0; color: #758196; white-space: pre-wrap; }
.stocktake-row-actions { display: flex; flex-shrink: 0; gap: 6px; }
.stocktake-row-actions button { min-height: 36px; padding: 6px 10px; color: #346be2; background: #edf3ff; border: 0; border-radius: 9px; font-size: 12px; cursor: pointer; }
.stocktake-row-actions button:last-child { color: #bd3e3e; background: #fff3f3; }
.stocktake-report { padding: 14px 0; border-bottom: 1px solid #e5eaf2; }
.stocktake-report summary { cursor: pointer; font-size: 13px; font-weight: 600; line-height: 1.7; overflow-wrap: anywhere; }
.stocktake-report .form-note { margin-top: 12px; }
.stocktake-report-line { margin: 0; padding: 8px 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; border-top: 1px solid #eff2f7; }
.report-reset { width: 100%; margin-top: 10px; cursor: pointer; }
.report-totals { margin-bottom: 20px; font-size: 13px; }
.report-totals summary { cursor: pointer; font-weight: 600; }
.report-totals p { padding: 10px 0; margin: 0; border-bottom: 1px solid #e5eaf2; overflow-wrap: anywhere; }
.report-totals > div { margin-top: 12px; }
.report-totals h2 { margin: 0; font-size: 18px; }
.report-unit-totals { display: flex; flex-wrap: wrap; gap: 10px; }
.report-unit-totals strong { padding: 12px 16px; border: 1px solid #c7dccf; border-radius: 12px; color: #2b6d4e; background: #edf7ef; font-size: 18px; }
.report-totals .report-total-note { margin-top: 12px; padding: 0; border: 0; color: #758196; font-size: 12px; line-height: 1.6; }
.report-pagination { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 20px; }
.report-pagination span { font-size: 12px; }
.report-pagination button { cursor: pointer; }
.report-pagination button:disabled { opacity: .45; cursor: not-allowed; }
.transfer-report-card > h2 { margin-top: 8px; }
.transfer-report-card > .secondary-button { margin-top: 8px; }
.transfer-content { margin: 0; padding: 0; border: 0; min-width: 0; }
.transfer-line { margin: 0 0 20px; padding: 16px 14px 6px; border: 1px solid #e0e7ef; border-radius: 16px; min-width: 0; }
.transfer-line legend { padding: 0 6px; color: #41755a; font-size: 13px; font-weight: 600; }
.transfer-line .form-field { margin-bottom: 14px; }
.add-transfer-line { width: 100%; margin-bottom: 20px; cursor: pointer; }
.remove-transfer-line { padding: 8px 0 12px; border: 0; background: transparent; color: #bd3e3e; font-size: 12px; cursor: pointer; }
.transfer-item-details { white-space: pre-line; line-height: 1.9; }
.leave-my-requests, .leave-approvals { margin-top: 26px; }
.leave-my-requests h2, .leave-approvals h2 { margin: 0 0 16px; font-size: 20px; }
.leave-request-card h3 { margin: 0; font-size: 16px; }
.leave-request-card > p { font-size: 13px; line-height: 1.8; }
.leave-badge { display: inline-block; padding: 5px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.leave-pending { background: #fff4d9; color: #a07113; }
.leave-approved { background: #eaf6ee; color: #28724d; }
.leave-rejected { background: #ffeded; color: #b34444; }
.leave-decision { color: #758196; }
.leave-reason { padding: 10px 12px; background: #f7f9fc; border-radius: 10px; white-space: pre-wrap; overflow-wrap: anywhere; }
.leave-calendar-controls { padding: 18px; }
.leave-week-nav { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.leave-week-nav strong { font-size: 14px; text-align: center; }
.leave-week-nav button { min-width: 44px; cursor: pointer; }
.leave-today { display: flex; margin: 12px auto; font-size: 12px; min-height: 36px; cursor: pointer; }
.leave-legend { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; margin: 12px 0 0; font-size: 11px; }
.leave-legend > span { display: inline-block; width: 12px; height: 12px; background: #f5a649; border-radius: 3px; }
.leave-week-scroll { max-height: 65dvh; min-height: 120px; overflow-y: auto; border: 1px solid #e4e9ec; border-radius: 14px; background: #fffffff5; touch-action: pan-y; overscroll-behavior-y: contain; scrollbar-width: thin; margin: 18px 0; }
.leave-week-scroll:focus-visible { outline: 3px solid #457bca; outline-offset: 3px; }
.leave-week-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; color: #53667a; }
.leave-week-table th { padding: 8px 2px; font-size: 11px; font-weight: 600; background: #eef4f1; }
.leave-week-table thead th { position: sticky; top: 0; z-index: 2; border-bottom: 1px solid #dce6df; }
.leave-week-table thead th:first-child { width: 34px; }
.leave-week-table thead small { display: block; margin-top: 5px; font-size: 9px; font-weight: 400; }
.leave-week-table tbody th { width: 34px; padding: 0; font-size: 10px; border-bottom: 1px solid #e8eeea; }
.leave-week-table td { padding: 1px; border-bottom: 1px solid #edf0ee; border-left: 1px solid #edf0ee; }
.leave-hour { display: block; width: 100%; height: 31px; border: 0; border-radius: 3px; padding: 0; background: #fbfcfb; color: #8c4a0d; font-size: 11px; cursor: pointer; }
.leave-hour.has-leave { background: #f5a649; font-weight: 700; }
.leave-hour.has-leave:hover { background: #ed912c; }
.leave-week-table .leave-current-day { background: #d8ebe0; color: #28724d; }
.leave-cell-detail { padding: 18px; margin-top: 18px; }
.leave-cell-detail h2 { font-size: 16px; margin: 0 0 12px; }
.leave-cell-detail > div { font-size: 13px; line-height: 1.7; }
.leave-cell-detail .catalog-card { padding: 14px; margin-top: 12px; }
.leave-review-form { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e5eaf2; }
.leave-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.leave-review-actions button { min-height: 48px; }
.report-sync { padding: 0 4px; }
.transfer-filters .form-field input[type="date"] { font-size: 13px; padding: 10px 8px; }
.form-field textarea { width: 100%; padding: 12px 14px; border: 1px solid #dce3ee; border-radius: 12px; background: #fafbfd; font: inherit; font-size: 16px; color: #20304a; resize: vertical; }
.form-field textarea:focus { outline: 3px solid #346be224; border-color: #346be2; }
.reward-toast { position: fixed; z-index: 100; left: 50%; top: max(8px, env(safe-area-inset-top)); transform: translate(-50%, var(--swipe-offset, 0px)); display: flex; align-items: center; gap: 6px; width: min(calc(100% - 48px), 320px); min-height: 42px; padding: 4px 5px 4px 14px; border: 1px solid #d4bc7780; border-radius: 24px; background: #173e30f5; color: #f4e6b8; box-shadow: 0 4px 14px #173e3020; touch-action: pan-x; user-select: none; }
.reward-toast-copy { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; font-size: 12px; line-height: 1.4; }
.reward-toast-copy strong { flex-shrink: 0; font-size: 13px; }
.reward-toast-copy > span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #e0e9df; }
.reward-toast button { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: #ffffff12; color: #f4e6b8; font-size: 21px; cursor: pointer; }
.reward-toast button:hover { background: #ffffff25; }
.sect-mark { display: block; font-size: 42px; color: #a97b33; }
.auth-heading h1 { margin-top: 8px; }
.account-switch { display: block; padding: 18px 0 0; text-align: center; font-size: 14px; color: #346be2; }
.profile-summary { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; padding: 20px; background: #ffffffeb; border-radius: 20px; }
.profile-avatar { display: grid; place-items: center; width: 60px; height: 60px; flex-shrink: 0; border-radius: 50%; background: #e7eee5; color: #41755a; font-size: 28px; }
.profile-avatar { overflow: hidden; }
.profile-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-form { margin-bottom: 20px; }
.avatar-form h2 { margin: 0 0 22px; font-size: 18px; }
.avatar-upload { display: flex; align-items: flex-start; gap: 16px; }
.avatar-preview { width: 80px; height: 80px; font-size: 36px; border: 3px solid #d8e6dc; }
.avatar-upload .form-field { min-width: 0; flex: 1; }
.avatar-upload input[type="file"] { font-size: 12px; padding: 10px; }
@media (max-width: 380px) { .avatar-upload { flex-direction: column; } .avatar-upload .form-field { width: 100%; } }
.profile-summary h2 { margin: 0; overflow-wrap: anywhere; }
.profile-summary p { margin: 6px 0 0; color: #758196; overflow-wrap: anywhere; }
.cultivation-badge, .profile-summary .cultivation-badge { display: inline-block; padding: 6px 10px; border: 1px solid #d4c39b; border-radius: 10px; background: #fcf5e6; color: #82652d; font-size: 12px; font-weight: 600; }
.cultivation-fields { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.cultivation-fields select, .profile-form select[name="displayName"] { font-size: 14px; }
.revision-history form { margin-top: 16px; }
@media (max-width: 360px) { .cultivation-fields { grid-template-columns: 1fr; gap: 0; } }
.profile-form h2, .password-form h2 { margin: 0 0 22px; font-size: 18px; }
.password-form { margin-top: 20px; }
.account-menu { display: grid; gap: 18px; }
.logout-button { min-height: 58px; padding: 12px; border: 1px solid #f2d0d0; border-radius: 12px; color: #bd3e3e; background: #fff3f3; cursor: pointer; }
.form-field input[readonly] { color: #758196; background: #f0f3f7; }
body { margin: 0; min-width: 280px; }
button, a { font: inherit; color: inherit; }
.app { position: relative; isolation: isolate; max-width: 560px; min-height: 100dvh; margin: 0 auto; background: transparent; }
body { background: #dce9e6 url('/assets/cultivation-mountain.webp') center 35% / cover fixed no-repeat; }
.app::before, .app::after { content: ''; position: fixed; pointer-events: none; z-index: -1; border-radius: 50%; filter: blur(22px); }
.app::before { width: min(95vw, 540px); height: 210px; top: 18%; left: calc(50% - min(47.5vw, 270px)); background: radial-gradient(ellipse, #eafffba6 0%, #c6f5ee40 45%, transparent 72%); animation: drifting-qi 16s ease-in-out infinite alternate; }
.app::after { width: min(95vw, 540px); height: 180px; top: 62%; left: calc(50% - min(47.5vw, 270px)); background: radial-gradient(ellipse, #fff6d675 0%, #e5fffa75 35%, transparent 72%); animation: drifting-qi 21s ease-in-out infinite alternate-reverse; }
@keyframes drifting-qi { from { transform: translate(-20px, 25px) rotate(-8deg) scale(.9); opacity: .45; } to { transform: translate(20px, -35px) rotate(8deg) scale(1.15); opacity: .9; } }
.feature-card { background: #ffffffdc; border-color: #ffffffad; backdrop-filter: blur(9px); }
.item-form, .catalog-card, .empty-state { background: #fffffff0; backdrop-filter: blur(12px); }
.page-header { background: #ffffffd9; border: 1px solid #ffffffa6; border-radius: 18px; padding: 18px 20px; backdrop-filter: blur(10px); }
main { padding: calc(30px + env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) calc(110px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); outline: none; }
.feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.feature-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 17px; min-width: 0; height: clamp(132px, 25dvh, 185px); padding: 20px 10px; border: 1px solid #e5eaf2; border-radius: 22px; background: #fff; box-shadow: 0 4px 18px #20304a05; text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; }
.icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.icon svg { width: 29px; height: 29px; }
.feature-card > .icon { width: 62px; height: 62px; border-radius: 19px; color: var(--accent); background: var(--tint); }
.feature-label { font-size: 14px; font-weight: 600; text-align: center; line-height: 1.5; }
.bottom-nav a > span:last-child { text-align: center; line-height: 1.4; }
.function-description { display: block; margin-top: 4px; color: #758196; font-size: 11px; line-height: 1.45; font-weight: 400; }
.feature-card > .icon svg { width: 34px; height: 34px; stroke-width: 1.4; }
.page-header > .function-description { font-size: 13px; margin-top: 6px; }
.bottom-nav .function-description { font-size: 10px; margin-top: 2px; }
.bottom-nav a { min-height: 76px; }
.secondary-button, .catalog-button { flex-direction: column; }
.primary-button, .catalog-button { padding-block: 12px; }
.primary-button .function-description, .catalog-button .function-description { color: #ffffffd9; }
.feature-card[aria-disabled="true"] .function-description { color: inherit; }
.tone-warehouse { --accent: #346be2; --tint: #edf3ff; }
.tone-chat { --accent: #0c9487; --tint: #e6f7f3; }
.tone-leave { --accent: #d88a26; --tint: #fff5e6; }
.tone-kpi { --accent: #805bd5; --tint: #f2edfd; }
.tone-game { --accent: #d65b8d; --tint: #ffedf4; }
.tone-plus { --accent: #9aa6b7; --tint: #f0f3f7; }
.feature-card[aria-disabled="true"] { border-style: dashed; background: #fafbfd; color: #96a0b0; }
@media (hover: hover) {
  .feature-card[href]:hover { transform: translateY(-3px); border-color: #cbd8ec; box-shadow: 0 10px 24px #20304a0c; }
  .bottom-nav a:hover { background: #f2f6fd; }
}
.feature-card[href]:active { transform: scale(.97); }
a:focus-visible, button:focus-visible { outline: 3px solid #457bca; outline-offset: 4px; }
.bottom-nav { position: fixed; z-index: 10; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 560px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 16px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid #e5eaf2; border-radius: 24px 24px 0 0; background: #fff; box-shadow: 0 -8px 30px #20304a06; }
.bottom-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 60px; padding: 7px 6px; border-radius: 16px; color: #8490a3; text-decoration: none; font-size: 12px; font-weight: 500; transition: color 160ms ease, background 160ms ease; }
.bottom-nav .icon svg { width: 23px; height: 23px; }
.bottom-nav a[aria-current="page"] { color: #346be2; background: #edf3ff; font-weight: 650; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 16px; border: 1px solid #dce5f5; border-radius: 12px; color: #346be2; background: #edf3ff; text-decoration: none; font-size: 14px; font-weight: 600; }
.secondary-button:hover { background: #e1ebfc; }
main > .secondary-button { margin-bottom: 20px; }
.item-form > .secondary-button { margin-top: 16px; }
.item-list { display: grid; gap: 16px; }
.catalog-card { padding: 22px; border: 1px solid #e5eaf2; border-radius: 20px; background: #fff; }
.catalog-card h2 { margin: 0 0 16px; font-size: 18px; font-weight: 600; overflow-wrap: anywhere; }
.catalog-card dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; margin: 0 0 20px; font-size: 14px; }
.catalog-card dt { color: #758196; }
.catalog-card dd { margin: 0; text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.item-form { padding: 24px; background: #fff; border: 1px solid #e5eaf2; border-radius: 22px; }
.form-field { margin-bottom: 22px; }
.form-field label { display: block; margin-bottom: 9px; font-size: 14px; font-weight: 600; }
.form-field input { width: 100%; min-width: 0; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px; color: #20304a; background: #fafbfd; border: 1px solid #dce3ee; border-radius: 12px; }
.form-field input::placeholder { color: #98a3b4; }
.form-field input:focus { outline: 3px solid #346be224; border-color: #346be2; }
.form-field select { width: 100%; min-height: 50px; padding: 12px 14px; font: inherit; font-size: 16px; color: #20304a; background: #fafbfd; border: 1px solid #dce3ee; border-radius: 12px; }
.form-field select:focus { outline: 3px solid #346be224; border-color: #346be2; }
.location-field { min-width: 0; margin: 0 0 24px; padding: 0; border: 0; }
.location-field legend { padding: 0; margin-bottom: 10px; font-size: 14px; font-weight: 600; }
.location-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.location-choice { position: relative; cursor: pointer; }
.location-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.location-choice > span { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 54px; height: 100%; padding: 10px 8px; border: 2px solid var(--location-border); border-radius: 12px; background: var(--location-tint); color: var(--location-color); font-size: 13px; font-weight: 600; text-align: center; }
.location-red { --location-color: #bd3e3e; --location-tint: #fff3f3; --location-border: #f2d0d0; --location-active: #c94747; }
.location-blue { --location-color: #2d62ce; --location-tint: #eff5ff; --location-border: #cfddf7; --location-active: #346be2; }
.location-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.location-choice input:checked + span { color: #fff; background: var(--location-active); border-color: var(--location-active); box-shadow: 0 3px 10px #20304a12; }
.location-choice input:focus-visible + span { outline: 3px solid #457bca; outline-offset: 3px; }
.primary-button:disabled { opacity: .5; cursor: not-allowed; }
.input-with-suffix { position: relative; }
.input-with-suffix input { padding-right: 68px; }
.input-with-suffix span { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 13px; color: #758196; pointer-events: none; }
.form-note { font-size: 12px; color: #758196; line-height: 1.6; margin: 0 0 18px; }
.primary-button { width: 100%; min-height: 50px; border: 0; border-radius: 12px; background: #346be2; color: #fff; font-weight: 600; cursor: pointer; }
.primary-button:hover { background: #2859c3; }
.primary-button:active { background: #214ca8; }
.catalog-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 50px; margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: #169b62; color: #fff; text-decoration: none; font-size: 16px; font-weight: 600; text-align: center; }
.catalog-button:hover { background: #128352; }
.catalog-button:active { background: #0e6c43; }
.transfer-route { color: #346be2; font-weight: 600; }
.revision-history { margin-top: 20px; border-top: 1px solid #e5eaf2; padding-top: 16px; font-size: 14px; overflow-wrap: anywhere; }
.revision-history summary { cursor: pointer; color: #346be2; font-weight: 600; min-height: 36px; }
.revision-entry { margin-top: 12px; padding: 14px; background: #f7f9fc; border-radius: 12px; }
.revision-entry p { margin: 0 0 8px; }
.revision-entry ul { margin: 0; padding-left: 18px; line-height: 1.8; }
.form-status { margin: 16px 0 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.form-status:empty { display: none; }
.form-status[data-state="success"] { color: #087b63; }
.form-status[data-state="error"] { color: #b53737; }
.page-header { margin-bottom: 28px; }
.back-link { font-size: 13px; color: #346be2; text-decoration: none; }
h1 { margin: 26px 0 0; font-size: 26px; font-weight: 650; }
.empty-state { border: 1px solid #e5eaf2; border-radius: 22px; background: #fff; padding: 32px 24px; }
.empty-state h2 { margin: 0 0 12px; font-size: 17px; font-weight: 600; }
.empty-state p { margin: 0; color: #758196; font-size: 14px; line-height: 1.7; }
@media (max-height: 600px) {
  main { padding-top: 20px; }
  .feature-card { height: 23dvh; min-height: 112px; gap: 10px; }
  .feature-card > .icon { width: 48px; height: 48px; border-radius: 15px; }
  .feature-grid { gap: 12px; }
}
.feature-card { background: #ffffffdc; border-color: #ffffffad; }
.item-form, .catalog-card, .empty-state { background: #fffffff0; }
.feature-card > .icon { width: 72px; height: 72px; border-radius: 22px; }
.feature-card > .icon svg { width: 44px; height: 44px; }
.bottom-nav .icon svg { width: 28px; height: 28px; }
@media (max-height: 600px) {
  .feature-card > .icon { width: 56px; height: 56px; border-radius: 17px; }
  .feature-card > .icon svg { width: 36px; height: 36px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.merit-actions { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.merit-actions button { flex: 1; border: 0; border-radius: 14px; padding: 16px; color: white; font: inherit; font-weight: 700; cursor: pointer; }
.merit-deduct { background: #b83d42; }
.merit-add { background: #21825b; }
.merit-actions button:disabled { opacity: .5; cursor: wait; }
.merit-editor { margin-bottom: 24px; }
.merit-editor textarea { width: 100%; font: inherit; padding: 12px; border: 1px solid #ccd6df; border-radius: 12px; box-sizing: border-box; }
.merit-editor .merit-cancel { margin-top: 12px; }
.merit-record { padding: 20px 0; border-bottom: 1px solid #d8e1df; overflow-wrap: anywhere; }
.merit-record:last-child { border-bottom: 0; }
.merit-record p { margin: 8px 0; white-space: pre-wrap; }
.merit-negative { color: #ac3039; }
.merit-positive { color: #187246; }
.merit-images { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.merit-images img { width: 92px; height: 92px; object-fit: cover; border-radius: 10px; border: 1px solid #cdd9d6; }
.merit-previews > div { display: grid; gap: 5px; }
.merit-previews button { border: 0; border-radius: 6px; padding: 6px; cursor: pointer; color: #a42d36; background: #fcebee; }
.merit-notice { display: block; padding: 16px 20px; margin-bottom: 18px; border: 1px solid #e3b45e; border-radius: 14px; color: #744716; background: #fff4dc; font-weight: 600; text-decoration: none; }
.merit-notice[hidden] { display: none; }
.merit-inbox, .merit-appeals { margin-bottom: 20px; }
.merit-response-state { display: inline-block; border-radius: 8px; padding: 6px 10px; background: #ecede2; color: #5f5b31; font-weight: 600; }
.merit-appeal-form { padding: 16px; border: 1px solid #d5ddd5; border-radius: 12px; background: #f8fbf8; }
.merit-appeal-form textarea { display: block; width: 100%; padding: 12px; border: 1px solid #ccd6df; border-radius: 10px; font: inherit; box-sizing: border-box; }
.merit-appeal-form .secondary-button { margin-top: 10px; }
.chat-toolbar { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.chat-toolbar .primary-button { width: auto; padding: 12px 18px; }
.chat-sync { font-size: 12px; color: #345946; padding: 6px; background: #ffffffe8; border-radius: 8px; }
.chat-create { margin-bottom: 20px; }
.chat-create h2 { margin-top: 0; }
.chat-create-cancel { margin-top: 10px; }
.chat-people { max-height: 260px; overflow: auto; padding: 6px; margin-bottom: 16px; border: 1px solid #dce5dc; border-radius: 12px; }
.chat-people label { display: flex; gap: 12px; align-items: center; padding: 12px 8px; border-bottom: 1px solid #e2e9e2; cursor: pointer; font-size: 14px; }
.chat-people input { width: 20px; height: 20px; accent-color: #315c47; flex-shrink: 0; }
.chat-selected-count { font-size: 12px; color: #52705d; }
.chat-layout { display: grid; grid-template-columns: minmax(230px, 32%) minmax(0, 1fr); min-height: 560px; border: 1px solid #ffffffb8; border-radius: 20px; overflow: hidden; background: #fffffff0; box-shadow: 0 12px 40px #16382818; }
.chat-sidebar { padding: 14px 0; border-right: 1px solid #dfe7df; min-width: 0; }
.chat-sidebar > label { display: block; margin: 0 14px 12px; font-weight: 700; }
.chat-sidebar > input { width: calc(100% - 28px); margin: 0 14px 14px; padding: 11px; border: 1px solid #d4dfd4; border-radius: 10px; font: inherit; }
.chat-conversations { max-height: 550px; overflow: auto; }
.chat-conversation { width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 12px; text-align: left; border: 0; border-bottom: 1px solid #ebefeb; background: transparent; font: inherit; cursor: pointer; color: #203a2b; }
.chat-conversation:hover, .chat-conversation.selected { background: #e9f2e8; }
.chat-emblem { width: 42px; height: 42px; display: grid; place-items: center; background: #dce9dc; color: #315c47; border-radius: 14px; flex-shrink: 0; font-size: 20px; }
.chat-emblem img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.chat-conversation-text { min-width: 0; flex: 1; }
.chat-conversation-text strong, .chat-conversation-text small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-conversation-text strong { font-size: 14px; }
.chat-conversation-text small { margin-top: 6px; font-size: 12px; color: #738275; }
.chat-conversation-meta { display: grid; gap: 8px; justify-items: end; font-size: 10px; color: #738275; }
.chat-conversation-meta b { border-radius: 12px; background: #315c47; color: white; min-width: 22px; padding: 3px 6px; text-align: center; }
.chat-empty { padding: 80px 30px; color: #6c7f70; text-align: center; line-height: 1.8; }
.chat-list-empty { padding: 20px; color: #738275; font-size: 14px; line-height: 1.7; }
.chat-thread { min-width: 0; }
.chat-active { display: flex; flex-direction: column; height: min(72dvh, 720px); min-height: 520px; position: relative; }
.chat-thread-header { display: flex; gap: 10px; align-items: center; padding: 16px; border-bottom: 1px solid #dfe7df; background: #fbfcf6; }
.chat-thread-header > div { min-width: 0; flex: 1; }
.chat-thread-header h2 { margin: 0; font-size: 18px; overflow-wrap: anywhere; }
.chat-thread-header p { margin: 5px 0 0; font-size: 12px; color: #738275; }
.chat-back { display: none; border: 0; background: #e5eee1; border-radius: 10px; padding: 10px; font-size: 20px; cursor: pointer; }
.chat-members { position: relative; font-size: 12px; flex-shrink: 0; }
.chat-members summary { cursor: pointer; padding: 8px; color: #315c47; }
.chat-members > div { position: absolute; right: 0; top: 35px; width: min(290px, 70vw); max-height: 250px; overflow: auto; background: white; padding: 12px; border: 1px solid #d4dfd4; border-radius: 12px; box-shadow: 0 6px 20px #16382822; z-index: 2; }
.chat-members p { padding: 8px 0; border-bottom: 1px solid #ebefeb; line-height: 1.6; overflow-wrap: anywhere; }
.chat-message-scroll { flex: 1; min-height: 0; overflow: auto; padding: 18px; background: linear-gradient(140deg, #f2f6ed, #edf2ed); overscroll-behavior: contain; }
.chat-messages { display: flex; flex-direction: column; gap: 14px; }
.chat-message { align-self: flex-start; max-width: 86%; border-radius: 16px 16px 16px 4px; background: white; padding: 12px 14px; border: 1px solid #dfe7db; overflow-wrap: anywhere; box-shadow: 0 2px 4px #203a2b05; }
.chat-message.mine { align-self: flex-end; background: #315c47; color: white; border-color: #315c47; border-radius: 16px 16px 4px 16px; }
.chat-message strong { font-size: 11px; opacity: .8; }
.chat-message p { margin: 7px 0; white-space: pre-wrap; line-height: 1.55; font-size: 14px; }
.chat-message time { display: block; text-align: right; font-size: 10px; opacity: .7; }
.chat-older { display: block; margin: 0 auto 16px; padding: 8px 12px; border: 1px solid #cedacb; border-radius: 14px; color: #315c47; background: #fff; cursor: pointer; }
.chat-jump { position: absolute; bottom: 145px; align-self: center; padding: 8px 14px; border-radius: 20px; border: 1px solid #c7d7c1; background: white; color: #315c47; cursor: pointer; box-shadow: 0 3px 10px #203a2b16; }
.chat-composer { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 14px; border-top: 1px solid #dfe7df; }
.chat-composer textarea { width: 100%; resize: none; max-height: 140px; border: 1px solid #ccd8ca; border-radius: 12px; padding: 12px; font: inherit; font-size: 16px; line-height: 1.4; }
.chat-composer .primary-button { width: auto; padding: 12px 20px; align-self: start; background: #315c47; }
.chat-composer small, .chat-send-status { grid-column: 1 / -1; font-size: 11px; color: #738275; margin: 0; }
.chat-send-status { color: #a44a30; }
.chat-page button:disabled { opacity: .55; cursor: wait; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 680px) {
  .chat-layout { display: block; min-height: 450px; }
  .chat-sidebar { border: 0; }
  .chat-thread { display: none; }
  .chat-show-thread .chat-sidebar { display: none; }
  .chat-show-thread .chat-thread { display: block; }
  .chat-back { display: block; }
  .chat-active { height: 68dvh; min-height: 400px; }
  .chat-thread-header { padding: 12px; }
  .chat-thread-header h2 { font-size: 16px; }
}
.install-guide { line-height: 1.8; }
.install-icon { display: block; margin: 0 auto 16px; border-radius: 20px; box-shadow: 0 6px 18px #193d2e20; }
.install-guide h2 { text-align: center; margin: 0; color: #315c47; }
.install-guide ol { padding-left: 24px; }
.install-guide li { padding-left: 5px; margin: 16px 0; }
.install-state { text-align: center; color: #52705d; font-size: 13px; }
.install-guide .secondary-button { display: block; text-align: center; margin-top: 24px; }
.install-link { display: block; margin: 20px 0; text-align: center; color: #315c47; font-size: 13px; line-height: 1.6; }
@media (display-mode: standalone) { body { overscroll-behavior-y: none; } }

/* Chat chiếm vùng nhìn thấy, kể cả khi bàn phím iPhone thu nhỏ visual viewport. */
body.chat-screen { overflow: hidden; overscroll-behavior: none; }
.chat-screen .bottom-nav, .chat-screen .app::before, .chat-screen .app::after { display: none; }
.chat-screen #main-content { padding: 0; }
.chat-screen .chat-page { position: fixed; z-index: 20; top: var(--chat-top, 0px); left: 0; width: 100%; height: var(--chat-height, 100dvh); display: flex; flex-direction: column; min-height: 0; background: #f6f9f2; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
.chat-screen .chat-page > .page-header { flex-shrink: 0; margin: 0; border: 0; border-radius: 0; padding: 10px 18px; backdrop-filter: none; }
.chat-screen .chat-page > .page-header h1 { font-size: 20px; margin: 6px 0 0; }
.chat-screen .chat-page > .page-header .function-description { display: none; }
.chat-screen .chat-toolbar { flex-shrink: 0; padding: 10px 18px; margin: 0; }
.chat-screen .chat-layout { flex: 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); }
.chat-screen .chat-sidebar { display: flex; flex-direction: column; min-height: 0; }
.chat-screen .chat-conversations { flex: 1; min-height: 0; max-height: none; }
.chat-screen .chat-sidebar > label, .chat-screen .chat-sidebar > input { flex-shrink: 0; }
.chat-screen .chat-thread, .chat-screen .chat-active { height: 100%; min-height: 0; }
.chat-screen .chat-thread-header, .chat-screen .chat-composer { flex-shrink: 0; }
.chat-screen .chat-composer { background: #fff; }
.chat-screen .chat-composer textarea { min-height: 48px; }
.chat-screen .chat-composer textarea:focus { outline: 2px solid #315c4733; outline-offset: 1px; border-color: #315c47; }
.chat-screen .chat-send-status:empty { display: none; }
.chat-screen .chat-create { position: absolute; z-index: 40; top: calc(12px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(620px, calc(100% - 24px)); max-height: calc(var(--chat-height, 100dvh) - 24px - env(safe-area-inset-top)); overflow-y: auto; margin: 0; backdrop-filter: none; background: #fff; box-shadow: 0 12px 70px #193d2e40; }
@media (max-width: 680px), (max-width: 1024px) and (hover: none) and (pointer: coarse) {
  .chat-screen .chat-layout { display: block; }
  .chat-screen .chat-sidebar { height: 100%; }
  .chat-screen .chat-show-thread .chat-sidebar { display: none; }
  .chat-screen .chat-show-thread > .page-header, .chat-screen .chat-show-thread > .chat-toolbar { display: none; }
  .chat-screen .chat-show-thread .chat-thread { display: block; }
  .chat-screen .chat-thread { display: none; }
  .chat-screen .chat-back { display: block; }
  .chat-screen .chat-page input, .chat-screen .chat-page select, .chat-screen .chat-page textarea { font-size: 16px; }
  .chat-screen .chat-composer { padding: 10px 12px; }
  .chat-screen .chat-composer > small { display: none; }
  .chat-screen .chat-message-scroll { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .app::before, .app::after { animation: none; }
}