:root{
  --bg:#eef7f6; --bg-grad:linear-gradient(160deg,#d9f3f0 0%,#e9f1fb 55%,#fdeee6 100%);
  --card:#ffffff; --border:#e2e0d8; --border-strong:#c9c6ba;
  --text:#232320; --text-2:#6b6a63; --text-3:#95938a;
  --accent:#185fa5; --accent-bg:#e6f1fb; --accent-text:#0c447c;
  --danger:#a32d2d; --danger-bg:#fcebeb;
  --success:#3b6d11; --success-bg:#eaf3de;
  --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#1a2a2c; --bg-grad:linear-gradient(160deg,#0d2a2e 0%,#141f33 60%,#2a1a1a 100%);
    --card:#262623; --border:#3a3a36; --border-strong:#4c4c47;
    --text:#f1efe8; --text-2:#b4b2a9; --text-3:#888780;
    --accent:#85b7eb; --accent-bg:#0c447c; --accent-text:#e6f1fb;
    --danger:#f09595; --danger-bg:#501313;
    --success:#97c459; --success-bg:#173404;
  }
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg-grad); background-attachment:fixed; min-height:100vh; color:var(--text); line-height:1.5;
  -webkit-tap-highlight-color:transparent;
}
#app{max-width:600px; margin:0 auto; padding:calc(16px + env(safe-area-inset-top, 0px)) 16px 110px;}
h1{font-size:20px; font-weight:600; margin:0 0 4px;}
h2{font-size:16px; font-weight:600; margin:0 0 12px;}
h3{font-size:14px; font-weight:600; margin:0 0 8px;}
p{margin:0 0 8px;}
.muted{color:var(--text-2); font-size:13px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:16px; margin-bottom:12px;}
button{
  font-family:inherit; font-size:14px; padding:10px 16px; min-height:40px; border-radius:8px;
  border:1px solid var(--border-strong); background:var(--card); color:var(--text); cursor:pointer;
}
button:active{transform:scale(0.98);}
button:disabled{opacity:.55; cursor:default;}
button.primary{background:var(--accent); color:#fff; border-color:var(--accent);}
button.danger{background:var(--danger-bg); color:var(--danger); border-color:var(--danger);}
button.block{width:100%; margin-top:8px;}
button.small{padding:6px 10px; min-height:32px; font-size:13px;}
input[type=text], input[type=password], input[type=tel], input[type=number], select, textarea{
  width:100%; padding:10px; font-size:16px; border-radius:8px;
  border:1px solid var(--border-strong); background:var(--bg); color:var(--text);
  font-family:inherit; margin-bottom:10px;
}
textarea{min-height:90px; resize:vertical;}
label{font-size:13px; color:var(--text-2); display:block; margin-bottom:4px;}
.row{display:flex; gap:8px;}
.row > *{flex:1;}
.badge{display:inline-block; font-size:12px; padding:2px 8px; border-radius:20px; background:var(--accent-bg); color:var(--accent-text); font-weight:600;}
.badge.success{background:var(--success-bg); color:var(--success);}
.badge.warn{background:#fff3cd; color:#7a5a00;}
.area-item{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--border);}
.area-item:last-child{border-bottom:none;}
.top-bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;}
.avatar{width:36px; height:36px; border-radius:50%; background:var(--accent-bg); color:var(--accent-text); display:flex; align-items:center; justify-content:center; font-weight:600; font-size:14px;}
.header-flex{display:flex; align-items:center; gap:10px;}
.photo-grid{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0;}
.photo-thumb{position:relative; width:80px; height:80px;}
.photo-thumb img{width:100%; height:100%; object-fit:cover; border-radius:8px; border:1px solid var(--border);}
.photo-thumb .rm{position:absolute; top:-6px; right:-6px; width:22px; height:22px; min-height:0; border-radius:50%; background:var(--danger); color:#fff; border:none; font-size:12px; line-height:1; display:flex; align-items:center; justify-content:center; padding:0;}
.item-row{display:flex; gap:8px; align-items:center; margin-bottom:6px;}
.item-row input{margin-bottom:0;}
.item-row button{padding:6px 10px;}
.empty{color:var(--text-3); font-size:13px; text-align:center; padding:20px 0;}
.record{border-bottom:1px solid var(--border); padding:10px 0;}
.record:last-child{border-bottom:none;}
.error-text{color:var(--danger); font-size:13px; margin:-4px 0 10px;}
.link-btn{background:none; border:none; color:var(--accent); text-decoration:underline; padding:4px 0; min-height:0; font-size:13px;}
.kv{display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px solid var(--border);}
.kv:last-child{border-bottom:none;}
.checkrow{display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:14px; color:var(--text); margin:0;}
.checkrow input{width:20px; height:20px; margin:1px 0 0; flex:none; accent-color:var(--success);}
.checkrow.done span{text-decoration:line-through; color:var(--text-3);}
.hero-pic{width:150px; height:150px; border-radius:50%; object-fit:cover; object-position:center 22%; border:5px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.18); animation:bob 3s ease-in-out infinite;}
.hero{font-size:44px; font-weight:800; letter-spacing:-1.5px; margin:4px 0 6px; background:linear-gradient(90deg,#0aa5a8,#185fa5,#d85a30); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-emoji{font-size:64px; line-height:1; animation:bob 3s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg);}50%{transform:translateY(-8px) rotate(4deg);}}
@media (prefers-reduced-motion: reduce){ .hero-pic,.hero-emoji{animation:none;} }
.pills{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:14px;}
.pills span{background:var(--card); border:1px solid var(--border); border-radius:20px; padding:4px 12px; font-size:13px;}
.tg-island{--tg-bg:rgba(10,165,168,.14); --tg-line:rgba(10,165,168,.45); --tg-strong:#0a8f92;}
.tg-house{--tg-bg:rgba(24,95,165,.12); --tg-line:rgba(24,95,165,.4); --tg-strong:#185fa5;}
.tg-clean{--tg-bg:rgba(216,90,48,.12); --tg-line:rgba(216,90,48,.42); --tg-strong:#c4491f;}
.tg-set{--tg-bg:rgba(128,128,120,.14); --tg-line:rgba(128,128,120,.4); --tg-strong:#5f5e5a;}
.bottombar{position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--card); border-top:1px solid var(--border); padding:6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); display:flex; justify-content:center;}
.bottombar .inner{display:flex; gap:6px; width:100%; max-width:600px;}
.bb{flex:1; border:none; background:transparent; padding:6px 2px; border-radius:12px; display:flex; flex-direction:column; align-items:center; gap:2px; font-size:11px; color:var(--text-2);}
.bb .ic{font-size:22px; line-height:1;}
.bb.active{background:var(--tg-bg); color:var(--tg-strong); font-weight:700;}
.pillrow{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px;}
.pillrow button{flex:1 1 auto; border-radius:20px; padding:8px 12px; font-size:13px; background:var(--card);}
.pillrow button.active{background:var(--tg-strong); border-color:var(--tg-strong); color:#fff; font-weight:600;}
.msg{font-size:13px; margin:8px 0; color:var(--success);}
.msg.err{color:var(--danger);}
.flash{position:fixed; left:12px; right:12px; top:calc(10px + env(safe-area-inset-top, 0px)); z-index:50; max-width:576px; margin:0 auto; padding:12px 14px; border-radius:10px; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.2); background:var(--success-bg); color:var(--success); border:1px solid var(--success);}
.flash.err{background:var(--danger-bg); color:var(--danger); border-color:var(--danger);}
.person-card{border:1px solid var(--border); border-radius:10px; padding:12px; margin-bottom:10px; background:var(--bg);}
.person-card .row{margin-bottom:0;}
.pin-chip{display:inline-block; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:15px; letter-spacing:2px; padding:2px 8px; border-radius:6px; background:var(--accent-bg); color:var(--accent-text); font-weight:700;}
.tablewrap{overflow-x:auto; -webkit-overflow-scrolling:touch;}
.tablewrap img{display:block; width:100%; min-width:640px; height:auto; border-radius:8px;}
.sticky-note{background:#fff8e1; color:#5d4a00; border:1px solid #f0d98a; border-radius:8px; padding:10px 12px; font-size:13px; margin-bottom:12px;}
@media (prefers-color-scheme: dark){ .sticky-note{background:#3a3000; color:#ffe9a0; border-color:#6b5a10;} .badge.warn{background:#4a3a00; color:#ffe9a0;} }