body { background: var(--bg); min-height: 100vh; }
.app { max-width: 560px; margin: 0 auto; min-height: 100vh; background: var(--bg); position: relative; }

/* Header */
.hdr { position: sticky; top: 0; z-index: 30; background: #fff; height: calc(54px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0; display: flex; align-items: center; border-bottom: 1px solid var(--line); }
.hdr .title { flex: 1; font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 8px; padding-left: 8px; }
.hdr .title .ic { color: var(--brand); width: 22px; height: 22px; }
.hdr.center .title { justify-content: center; padding-left: 0; }
.hdr .side { width: 44px; display: flex; justify-content: center; }
.hdr .icon-btn .ic { width: 22px; height: 22px; }

.page { padding: 14px 14px calc(84px + env(safe-area-inset-bottom)); }
.page.nopad { padding: 0 0 calc(84px + env(safe-area-inset-bottom)); }
.page.has-cta { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

/* Bottom nav */
.bnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 560px; z-index: 40; background: #fff; border-top: 1px solid var(--line); display: flex; padding-bottom: env(safe-area-inset-bottom); }
.bnav button { flex: 1; border: 0; background: none; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: #8a98a3; cursor: pointer; position: relative; }
.bnav button .ic { width: 23px; height: 23px; }
.bnav button.on { color: var(--brand); }
.bnav .count { top: 6px; right: calc(50% - 20px); }

/* Sticky CTA */
.cta { position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; max-width: 560px; z-index: 35; background: linear-gradient(to top, var(--bg) 70%, rgba(242, 246, 247, 0)); padding: 18px 14px calc(14px + env(safe-area-inset-bottom)); }
.cta .btn.lg { box-shadow: 0 4px 14px rgba(27, 138, 140, .3); }

/* Cards */
.card { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 12px; overflow: hidden; }
.card-pad { padding: 14px 16px; }
.card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px; }
.card-head h3 { font-size: 15px; }
.sec-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 18px 4px 8px; }

/* Home hero */
.hero { background: linear-gradient(135deg, #1b8a8c, #23a3a1); color: #fff; padding: 18px 18px 54px; display: flex; align-items: center; gap: 14px; }
.hero .avatar { border: 3px solid rgba(255, 255, 255, .85); }
.hero .hi { font-size: 13px; opacity: .9; }
.hero .nm { font-size: 20px; font-weight: 700; }
.hero .meta { font-size: 12px; opacity: .85; margin-top: 2px; }
.over { margin: -40px 14px 0; position: relative; }

.line-item { display: flex; align-items: flex-start; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.line-item:last-child { border-bottom: 0; }
.line-item > .ic { color: var(--brand); margin-top: 1px; }
.line-item .lt { font-weight: 700; display: flex; align-items: center; gap: 6px; }
.line-item .ld { font-size: 13px; color: var(--text-2); margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-item .chev { color: #a8b4bc; margin-top: 8px; }

.fine { display: flex; align-items: center; gap: 10px; background: var(--danger-bg); border-radius: var(--radius); padding: 13px 16px; margin-bottom: 12px; font-weight: 700; }
.fine .ic { color: #e08a2b; }
.fine .amt { margin-left: auto; color: var(--danger); font-size: 17px; }
.fine.zero { background: #fff; box-shadow: var(--shadow); }
.fine.zero .amt { color: var(--ok); }

.today { display: flex; gap: 14px; align-items: center; padding: 14px 16px; }
.today .when { background: var(--brand-50); color: var(--brand-700); border-radius: 10px; padding: 8px 10px; text-align: center; min-width: 64px; }
.today .when b { display: block; font-size: 18px; }
.today .when span { font-size: 11px; font-weight: 600; }
.today .room { font-size: 17px; font-weight: 700; }
.today-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 16px 14px; }

.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.tile { background: #fff; border: 0; border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 6px 13px; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; position: relative; }
.tile .ic { width: 30px; height: 30px; color: var(--brand); stroke-width: 1.6; }
.tile:active { transform: scale(.97); }
.tile .count { top: 8px; right: 14px; }

.banner { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 10px; font-weight: 600; font-size: 13.5px; margin-bottom: 12px; }
.banner.warn { background: var(--warn-bg); color: #b4661a; }
.banner.info { background: var(--brand-50); color: var(--brand-700); }
.banner.danger { background: var(--danger-bg); color: var(--danger); }
.banner .btn { margin-left: auto; }

/* Month switcher */
.month { display: flex; align-items: center; justify-content: center; gap: 18px; padding: 12px 0; font-size: 16px; font-weight: 700; background: #fff; }
.month .icon-btn { width: 32px; height: 32px; }
.month .icon-btn:disabled { opacity: .3; }

/* Request list */
.req-row { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-2); gap: 6px; }
.req-row .d { width: 84px; white-space: nowrap; font-weight: 700; flex-shrink: 0; }
.req-row .opts { display: flex; flex: 1; justify-content: space-between; gap: 4px; }
.req-row .opt { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.req-row .opt input { width: 19px; height: 19px; accent-color: var(--brand); margin: 0; }
.req-row.past { opacity: .45; }
.req-sum { display: flex; gap: 8px; padding: 10px 16px; background: #fff; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }

/* Shifts */
.shift { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); }
.shift:last-child { border-bottom: 0; }
.shift .d { width: 64px; font-weight: 700; flex-shrink: 0; }
.shift .r { font-weight: 600; }
.shift .t { font-size: 13px; color: var(--text-2); }
.grp-h { background: #f6f9fa; padding: 9px 16px; font-size: 13px; font-weight: 700; color: var(--text-2); border-bottom: 1px solid var(--line-2); }
.grp-h small { font-weight: 500; color: var(--muted); }

/* Report */
.photos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ph { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #f4f7f8; border: 1.5px dashed #c5d2d8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-size: 12.5px; font-weight: 600; cursor: pointer; text-align: center; padding: 6px; }
.ph .ic { width: 26px; height: 26px; color: var(--brand); }
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph.done { border: 0; }
.ph .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 6px; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); color: #fff; font-size: 12px; text-align: left; }
.ph .rm { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; background: rgba(20, 30, 35, .7); color: #fff; border: 0; display: grid; place-items: center; cursor: pointer; z-index: 2; }
.ph .rm .ic { width: 15px; height: 15px; color: #fff; }
.ph input { display: none; }
.chk { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.chk:last-child { border-bottom: 0; }
.chk input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }

/* Notices */
.notice { display: flex; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; background: #fff; }
.notice .top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.notice .nt { font-weight: 700; }
.notice .nd { font-size: 13px; color: var(--text-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.notice.unread .nt::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--danger); margin-left: 6px; vertical-align: 2px; }

/* Me */
.profile { display: flex; flex-direction: column; align-items: center; padding: 22px 16px 16px; text-align: center; }
.profile .ph-edit { position: relative; cursor: pointer; }
.profile .ph-edit .cam { position: absolute; right: -2px; bottom: 2px; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; border: 2px solid #fff; }
.profile .ph-edit .cam .ic { width: 15px; height: 15px; }
.aliases { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.menu-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); cursor: pointer; }
.menu-item:last-child { border-bottom: 0; }
.menu-item > .ic { color: var(--brand); }
.menu-item .chev { color: #a8b4bc; margin-left: auto; }
.score-big { font-size: 34px; font-weight: 800; color: var(--brand); }
.bar { height: 8px; background: var(--line-2); border-radius: 99px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-2); border-top: 1px solid var(--line-2); }
.stats div { background: #fff; padding: 10px; text-align: center; }
.stats b { display: block; font-size: 17px; }
.stats span { font-size: 11.5px; color: var(--muted); }

/* Login */
.login { min-height: 100vh; display: flex; flex-direction: column; background: #fff; }
.login .top { background: linear-gradient(135deg, #1b8a8c, #23a3a1); color: #fff; padding: calc(56px + env(safe-area-inset-top)) 24px 70px; text-align: center; }
.login .top img { width: 64px; height: 64px; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.login .top h1 { font-size: 22px; margin-top: 14px; }
.login .top p { margin: 4px 0 0; opacity: .9; font-size: 13px; }
.login form { margin: -40px 16px 0; background: #fff; border-radius: 16px; box-shadow: 0 8px 30px rgba(16, 42, 56, .12); padding: 22px 18px; }
.login .input { height: 48px; font-size: 16px; }
.login .foot { text-align: center; color: var(--muted); font-size: 12px; padding: 24px; margin-top: auto; }
.err { color: var(--danger); font-size: 13px; font-weight: 600; margin-bottom: 10px; }

/* Nút chính đặt phía trên thanh điều hướng dưới (trang có cả hai) */
.cta.above-nav { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 12px; }
.page.has-cta.with-nav { padding-bottom: calc(230px + env(safe-area-inset-bottom)); }