:root {
  --bg:#f6f6f8; --card:#fff; --text:#111; --muted:#737780; --line:#e8e8ed;
  --red:#ff3b30; --yellow:#f6b400; --green:#12a85a;
  --redBg:#fff0ef; --yellowBg:#fff8e2; --greenBg:#eaf8f0;
  --shadow:0 10px 30px rgba(20,20,20,.08);
  font-size:18px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; min-height:100%; background:var(--bg); color:var(--text); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
button,input,select,textarea { font:inherit; }
button { cursor:pointer; }
.app { max-width:540px; margin:0 auto; min-height:100vh; padding:calc(18px + env(safe-area-inset-top)) 16px calc(96px + env(safe-area-inset-bottom)); }
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.iconBtn { width:46px; height:46px; border:0; background:transparent; border-radius:14px; font-size:1.35rem; color:var(--text); }
.brand { font-size:1.42rem; font-weight:950; letter-spacing:-.04em; }
.brand span { color:var(--green); font-size:.9rem; }
.hero h2 { margin:0 0 6px; font-size:1.25rem; }
.hero p { margin:0 0 16px; color:var(--muted); }
.tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:16px; }
.tile { border:0; border-radius:18px; padding:15px 8px; text-align:center; box-shadow:var(--shadow); font-weight:900; color:var(--text); }
.tile.red { background:var(--redBg); }
.tile.yellow { background:var(--yellowBg); }
.tile.green { background:var(--greenBg); }
.tile.active { outline:3px solid rgba(10,132,255,.35); }
.circle { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; margin:0 auto 10px; color:#fff; font-weight:950; }
.red .circle { background:var(--red); }
.yellow .circle { background:var(--yellow); }
.green .circle { background:var(--green); }
.num { font-size:2rem; line-height:1; }
.label { font-size:.78rem; margin-top:7px; }
.controls { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.input,.select,.textarea { width:100%; min-height:56px; border:1px solid var(--line); border-radius:18px; background:var(--card); padding:0 16px; color:var(--text); }
.textarea { padding:12px 16px; min-height:100px; }
.section { display:flex; gap:10px; align-items:center; font-size:1.06rem; font-weight:950; margin-bottom:12px; }
.pill { min-width:34px; height:34px; border-radius:17px; background:#e9e9ee; color:var(--muted); display:grid; place-items:center; }
.list { display:grid; gap:10px; }
.row { border:1px solid var(--line); background:var(--card); border-radius:18px; min-height:92px; display:grid; grid-template-columns:7px 64px 1fr 34px; overflow:hidden; box-shadow:0 5px 18px rgba(20,20,20,.05); }
.strip.red { background:var(--red); }
.strip.yellow { background:var(--yellow); }
.strip.green { background:var(--green); }
.emoji { align-self:center; justify-self:center; width:48px; height:48px; border-radius:15px; display:grid; place-items:center; background:#f4f4f7; font-size:1.5rem; }
.main { align-self:center; min-width:0; }
.name { font-weight:950; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.meta { display:flex; gap:10px; color:var(--muted); font-size:.78rem; }
.redTxt { color:var(--red); font-weight:900; }
.yellowTxt { color:#d48800; font-weight:900; }
.greenTxt { color:var(--green); font-weight:900; }
.chev { align-self:center; color:#8a8d98; font-size:1.6rem; }
.done { margin-top:18px; width:100%; min-height:62px; border:0; border-radius:18px; background:linear-gradient(135deg,#0aa85a,#087f45); color:#fff; font-weight:950; }
.nav { position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom)); max-width:540px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:rgba(255,255,255,.92); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:28px; padding:8px; box-shadow:var(--shadow); }
.nav button { border:0; min-height:58px; border-radius:20px; background:transparent; color:var(--muted); font-size:.68rem; font-weight:900; }
.nav .active { color:var(--green); background:#eef8f2; }
.nav b { display:block; font-size:1.22rem; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:22px; padding:8px 18px; box-shadow:var(--shadow); margin-bottom:16px; }
.drow { display:grid; grid-template-columns:36px 1fr auto; gap:8px; align-items:center; min-height:62px; border-bottom:1px solid var(--line); }
.drow:last-child { border:0; }
.dval { color:var(--muted); font-size:.9rem; text-align:right; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.detailCard { background:var(--card); border:1px solid var(--line); border-left:8px solid var(--green); border-radius:24px; padding:22px; margin-bottom:16px; box-shadow:var(--shadow); }
.detailCard.red { border-left-color:var(--red); }
.detailCard.yellow { border-left-color:var(--yellow); }
.badge { display:inline-block; margin-top:8px; border-radius:999px; padding:7px 12px; font-weight:950; }
.badge.red { background:var(--redBg); color:var(--red); }
.badge.yellow { background:var(--yellowBg); color:#d48800; }
.badge.green { background:var(--greenBg); color:var(--green); }
.actions { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.actions button,.primary,.secondary { min-height:58px; border:0; border-radius:18px; font-weight:950; }
.primary { background:var(--green); color:#fff; }
.secondary { background:#ececf1; color:#111; }
.del { color:var(--red); background:var(--card); border:1px solid var(--line)!important; }
.modal { position:fixed; inset:0; display:none; align-items:flex-end; background:rgba(0,0,0,.35); z-index:20; }
.modal.show { display:flex; }
.sheet { width:100%; max-height:92vh; overflow:auto; background:var(--card); border-radius:28px 28px 0 0; padding:22px 16px calc(20px + env(safe-area-inset-bottom)); }
.form { display:grid; gap:12px; }
label { font-size:.76rem; color:var(--muted); margin-left:6px; }
.formActions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.empty { text-align:center; color:var(--muted); background:var(--card); border-radius:18px; padding:26px; }
.toast { position:fixed; left:50%; bottom:100px; transform:translateX(-50%); background:#111; color:#fff; border-radius:999px; padding:12px 18px; font-weight:900; display:none; z-index:100; }
.drawerBackdrop { position:fixed; inset:0; background:rgba(0,0,0,.32); display:none; z-index:30; }
.drawerBackdrop.show { display:block; }
.drawer { position:fixed; top:0; bottom:0; left:0; width:min(82vw,360px); background:var(--card); box-shadow:var(--shadow); padding:calc(22px + env(safe-area-inset-top)) 18px 22px; transform:translateX(-105%); transition:.2s ease; z-index:31; }
.drawer.show { transform:translateX(0); }
.drawer h2 { margin:0 0 18px; }
.drawerCard { border:1px solid var(--line); border-radius:18px; padding:14px; margin-bottom:14px; }
.drawerCard small { display:block; color:var(--muted); overflow:hidden; text-overflow:ellipsis; }
.drawerBtn { width:100%; min-height:54px; border:0; border-radius:16px; font-weight:950; background:#111; color:#fff; }
.drawerBtn.out { background:#ececf1; color:#111; }
.drawerNote { color:var(--muted); font-size:.85rem; line-height:1.4; }
.templateRow { cursor:pointer; }
.templateHint { font-size:.82rem; color:var(--muted); margin:-4px 0 10px; }
@media(prefers-color-scheme:dark){
  :root{--bg:#000;--card:#1c1c1e;--text:#f5f5f7;--muted:#a1a1a6;--line:#2c2c2e;--shadow:0 10px 30px rgba(0,0,0,.35)}
  .emoji{background:#2c2c2e}.nav{background:rgba(28,28,30,.92)}.secondary,.drawerBtn.out{background:#2c2c2e;color:#fff}
}