:root {
  --bg: #F3F8F7; --card: #FFFFFF; --ink: #0F2A30; --soft: #46606A; --line: #DCE7E5; --line2: #C5D5D2;
  --accent: #F2A93B; --accent-ink: #1A1205; --teal: #0F6E6A; --mist: #E6F0EE;
  --red: #B42318; --red-bg: #FEF3F2; --amber: #9A5200; --amber-bg: #FFF4E2; --blue: #1D4ED8; --blue-bg: #EFF4FF; --green: #067647; --green-bg: #ECFDF3;
  --display: "Lexend", system-ui, sans-serif; --text: "Be Vietnam Pro", system-ui, sans-serif;
  --r: 14px; --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 var(--text); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--teal); }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 6px; }
.boot { display: grid; place-items: center; min-height: 100vh; font-family: var(--display); color: var(--soft); }
h1, h2, h3 { font-family: var(--display); margin: 0; letter-spacing: -0.01em; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 20; background: var(--ink); color: #fff; padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px; display: flex; flex-direction: column; gap: 12px; }
.top__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.brand { font: 700 17px var(--display); } .brand b { color: var(--accent); }
.top h1 { font-size: 21px; font-weight: 600; }
.icon-btn { min-width: 40px; min-height: 40px; border-radius: 999px; border: 1px solid #3B5560; background: transparent; color: #fff; display: inline-grid; place-items: center; cursor: pointer; }
.lang { display: inline-flex; border: 1px solid #3B5560; border-radius: 999px; padding: 2px; }
.lang button { min-width: 36px; min-height: 32px; border: 0; border-radius: 999px; background: transparent; color: #C9D6DA; font-weight: 600; font-size: 12px; cursor: pointer; }
.lang button[aria-pressed="true"] { background: #fff; color: var(--ink); }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { background: #fff; border-radius: 12px; padding: 8px 10px; color: var(--ink); border: 0; text-align: left; cursor: pointer; }
.stat b { display: block; font: 700 22px var(--display); }
.stat span { font-size: 12px; font-weight: 600; }
.stat.red b { color: var(--red); } .stat.amber b { color: var(--amber); }

/* Layout */
main { max-width: 760px; margin: 0 auto; padding: 12px 16px calc(96px + var(--safe-b)); }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 10px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; font-size: 14px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.chip small { opacity: .7; margin-left: 4px; }

.list { display: flex; flex-direction: column; gap: 10px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; width: 100%; cursor: pointer; }
.card:hover { border-color: var(--line2); }
.card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card__name { font: 600 16px var(--display); }
.card__code { font-size: 12px; color: var(--soft); }
.card__todo { font-size: 14px; }
.card__meta { font-size: 12px; color: var(--soft); display: flex; gap: 10px; flex-wrap: wrap; }
.pill { font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 9px; white-space: nowrap; background: var(--blue-bg); color: var(--blue); }
.pill.p1 { background: var(--red-bg); color: var(--red); } .pill.p2 { background: var(--amber-bg); color: var(--amber); }
.pill.p3 { background: var(--mist); color: var(--teal); } .pill.done { background: var(--green-bg); color: var(--green); }
.pill.grey { background: #EEF2F2; color: var(--soft); }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.empty { text-align: center; color: var(--soft); padding: 40px 12px; }

/* Bottom nav */
.nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(8px + var(--safe-b)); }
.nav button { border: 0; background: transparent; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 50px; color: var(--soft); font-size: 11px; cursor: pointer; }
.nav button[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav svg { width: 22px; height: 22px; }

/* Sections, detail */
.section { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.section h3 { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--soft); font-weight: 600; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--soft); font-weight: 600; min-width: 0; }
.field input, .field select, .field textarea { font-size: 15px; font-weight: 400; color: var(--ink); background: #FAFCFB; border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; min-height: 44px; width: 100%; }
.field textarea { min-height: 84px; resize: vertical; }
.check { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); font-weight: 500; min-height: 40px; }
.check input { width: 20px; height: 20px; accent-color: var(--teal); }
.full { grid-column: 1 / -1; }
.progress { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.progress i { height: 6px; border-radius: 3px; background: var(--line); }
.progress i.on { background: var(--green); } .progress i.now { background: var(--accent); }
.progress-labels { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; font-size: 10px; color: var(--soft); }
.btn { min-height: 46px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--line2); background: #fff; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: var(--ink); }
.btn.dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn.accent { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.danger { color: var(--red); }
.btn[disabled] { opacity: .5; cursor: default; }
.savebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line); padding: 10px 16px calc(10px + var(--safe-b)); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.back { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; min-height: 36px; font-size: 14px; background: none; border: 0; cursor: pointer; padding: 0; }
.sub { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sub li { border-top: 1px solid var(--line); padding-top: 8px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; }
.sub li:first-child { border-top: 0; padding-top: 0; }
.sub small { color: var(--soft); }

/* Overview */
.bars { display: flex; flex-direction: column; gap: 8px; }
.bar { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr) 2rem; gap: 8px; align-items: center; font-size: 13px; }
.bar i { height: 10px; border-radius: 5px; background: var(--accent); display: block; }
.bar .track { background: var(--mist); border-radius: 5px; }
.bar b { text-align: right; font-variant-numeric: tabular-nums; }

/* Auth */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: linear-gradient(180deg, #EAF5F6, #FDE6C3); }
.auth form { width: 100%; max-width: 380px; background: #fff; border-radius: 22px; padding: 24px; box-shadow: 0 12px 32px -16px hsl(190 35% 25% / .35); display: flex; flex-direction: column; gap: 14px; }
.auth h1 { font-size: 22px; }
.auth p { margin: 0; color: var(--soft); font-size: 14px; }
.err { color: var(--red); font-size: 13px; font-weight: 500; }
.ok { color: var(--green); font-size: 13px; font-weight: 600; }
.qr { display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
.qr img, .qr svg { width: 180px; height: 180px; }
.secret { font: 600 13px ui-monospace, monospace; word-break: break-all; background: var(--mist); border-radius: 8px; padding: 8px; color: var(--ink); }
.code-input { font: 600 24px ui-monospace, monospace !important; letter-spacing: .3em; text-align: center; }

.search { position: relative; margin-bottom: 10px; }
.search input { width: 100%; min-height: 48px; border-radius: 999px; border: 1px solid var(--line2); background: #fff; padding: 0 16px 0 44px; font-size: 15px; }
.search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--soft); }
.toast { position: fixed; left: 50%; bottom: calc(110px + var(--safe-b)); transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 999px; font-size: 14px; z-index: 50; box-shadow: 0 8px 20px -10px rgb(0 0 0 / .4); }
table.preview { width: 100%; border-collapse: collapse; font-size: 12px; }
table.preview th, table.preview td { border-bottom: 1px solid var(--line); padding: 6px 4px; text-align: left; vertical-align: top; }
.scroll-x { overflow-x: auto; }
@media (min-width: 700px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }