*{box-sizing:border-box;margin:0;padding:0}
:root{
  --g100:#dff2d0;--g200:#bce4a0;--g300:#8ccc64;--g400:#5aab38;--g500:#3d8a22;--g600:#2d6a18;
  --text1:#182412;--text2:#3a5a2a;--text3:#6a8a5a;--text4:#9ab88a;
  --bg:#edf6e6;--surface:#fff;--s2:#f4faf0;--s3:#e8f2e0;
  --border:#cce4b4;--border2:#b0d494;
  --accent:#4a9828;--accent-bg:#e8f5de;
  --warn:#c97a18;--danger:#b83030;
  --r:12px;--r-sm:8px;
  --sh:0 1px 8px rgba(40,80,20,.10);
  --sh-md:0 4px 24px rgba(40,80,20,.16);
  --f:'Figtree',sans-serif;
}
html,body{width:100%;height:100%;font-family:var(--f);background:#1e1e1e;color:var(--text1);overflow:hidden;display:flex;align-items:center;justify-content:center}
#canvas{width:1180px;height:820px;position:relative;flex-shrink:0;transform-origin:center center;background:var(--bg);display:grid;grid-template-rows:64px 1fr 220px;gap:10px;padding:12px;overflow:hidden}
.top-bar{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);display:flex;align-items:center;padding:0 20px;gap:0}
.top-time{font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--text1);line-height:1;margin-right:14px}
.top-date{font-size:.9rem;font-weight:400;color:var(--text3);border-left:1px solid var(--border);padding-left:14px}
.top-spacer{flex:1}
.settings-btn{background:var(--s2);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-size:.78rem;color:var(--text3);cursor:pointer;font-family:var(--f);margin-right:10px}
.weather-tap{display:flex;align-items:center;gap:10px;cursor:pointer;padding:8px 16px;border-radius:var(--r-sm);transition:background .15s;user-select:none}
.weather-tap:hover{background:var(--s2)}
.w-temp{font-size:1.7rem;font-weight:700;color:var(--text1);letter-spacing:-.02em;line-height:1}
.w-desc{font-size:.75rem;color:var(--text3);margin-top:1px}
.w-details{display:flex;gap:10px;font-size:.72rem;color:var(--text4);margin-left:4px}
.cal-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px 10px;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;flex-shrink:0}
.cal-nav-btn{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:3px 10px;font-size:.82rem;color:var(--text2);cursor:pointer;font-family:var(--f)}
.today-btn{background:var(--accent-bg);border:1px solid var(--border2);border-radius:6px;padding:3px 10px;font-size:.75rem;color:var(--accent);cursor:pointer;font-family:var(--f);font-weight:600}
.cal-title{font-size:1rem;font-weight:600;color:var(--text1);min-width:150px}
.vt{background:var(--s2);border:1px solid var(--border);border-radius:6px;padding:3px 13px;font-size:.76rem;color:var(--text3);cursor:pointer;font-family:var(--f);transition:all .12s}
.vt.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.add-ev{background:var(--accent);border:none;border-radius:6px;padding:4px 14px;font-size:.76rem;color:#fff;cursor:pointer;font-family:var(--f);font-weight:600}
.week-wrap{display:flex;gap:6px;height:100%;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
.week-wrap::-webkit-scrollbar{height:4px}
.week-wrap::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.wday{background:var(--s2);border-radius:var(--r-sm);border:1px solid var(--border);padding:8px 8px 6px;cursor:pointer;display:flex;flex-direction:column;overflow:hidden;transition:background .12s;flex:0 0 160px;min-width:160px}
.wday:hover{background:var(--s3)}
.wday.today{border-color:var(--accent);background:var(--accent-bg)}
.wday-name{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-weight:600;text-align:center}
.wday-num{font-size:1.4rem;font-weight:700;color:var(--text1);line-height:1.1;text-align:center}
.wday.today .wday-num{color:var(--accent)}
.wev{font-size:.8rem;padding:5px 8px;border-radius:6px;background:var(--g100);color:var(--g600);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500;flex-shrink:0}
.wev-time{font-size:.68rem;color:var(--text4);display:block}
.animal-text{font-size:.78rem;line-height:1.55;color:var(--text2)}
.din-chip{font-size:.75rem;padding:5px 8px;border-radius:6px;background:#fff3e0;color:#b85c00;border:1px solid #f0c070;margin-bottom:3px;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;font-weight:500}
.din-chip.empty{background:var(--s3);color:var(--text4);border-color:var(--border);font-style:italic}
.amz-chip{font-size:.75rem;padding:5px 8px;border-radius:6px;margin-top:auto;flex-shrink:0;cursor:pointer;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amz-chip.empty{background:var(--s2);color:var(--text4);border:1px dashed var(--border);opacity:.5}
.amz-chip.active{background:#e8e8e8;color:#333;border:1px solid #aaa;font-weight:600}
.mscroll{height:100%;overflow-y:auto;display:flex;flex-direction:column;gap:6px;padding-right:3px}
.mscroll::-webkit-scrollbar{width:3px}
.mscroll::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.mweek-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;flex-shrink:0}
.mweek-label{grid-column:1/-1;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text4);padding:4px 2px 2px;border-top:1px solid var(--border)}
.mweek-label:first-child{border-top:none;padding-top:0}
.mday-hdr-row{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;flex-shrink:0}
.mhdr{font-size:.65rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);font-weight:600;text-align:center;padding:2px 0}
.mday{background:var(--s2);border-radius:6px;border:1px solid transparent;padding:4px 5px;cursor:pointer;overflow:hidden;transition:background .12s;display:flex;flex-direction:column}
.mday:hover{background:var(--s3)}
.mday.today{border-color:var(--accent);background:var(--accent-bg)}
.mday.other-month{opacity:.35}
.mday-num{font-size:.72rem;font-weight:600;color:var(--text1);margin-bottom:3px;flex-shrink:0}
.mday.today .mday-num{color:var(--accent)}
.mev{font-size:.6rem;padding:1px 3px;border-radius:3px;background:var(--g100);color:var(--g600);margin-bottom:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.bottom-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;min-height:0;overflow:hidden}
.col{display:flex;flex-direction:column;gap:8px;overflow:hidden;min-height:0}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--sh);padding:11px 14px;flex-shrink:0}
.panel.grow{flex:1;min-height:0;overflow:hidden}
.panel-label{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text4);margin-bottom:7px}
.fr-word{font-size:1.4rem;font-weight:700;color:var(--accent);letter-spacing:-.01em;line-height:1.1}
.fr-pron{font-size:.7rem;color:var(--text4);margin:2px 0 3px}
.fr-trans{font-size:.82rem;color:var(--text2);font-weight:500}
.fr-ex{font-size:.72rem;color:var(--text3);font-style:italic;margin-top:3px}
.animal-name{font-weight:700;color:var(--accent)}
.cd-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border)}
.cd-row:last-child{border-bottom:none}
.cd-name{font-size:.82rem;font-weight:600;color:var(--text1)}
.cd-sub{font-size:.66rem;color:var(--text4)}
.cd-num{font-size:1.3rem;font-weight:800;color:var(--accent);line-height:1}
.cd-unit{font-size:.6rem;color:var(--text4)}
.ibt{background:none;border:none;cursor:pointer;color:var(--text4);font-size:.82rem;padding:2px 4px}
.ibt:hover{color:var(--text2)}
.add-cd{font-size:.72rem;color:var(--accent);cursor:pointer;background:none;border:none;font-family:var(--f);font-weight:600;padding:4px 0 0;text-align:left}
.grocery-count{font-size:2.4rem;font-weight:800;color:var(--accent);line-height:1;letter-spacing:-.03em}
.gp-tag{font-size:.66rem;padding:2px 7px;border-radius:12px;background:var(--g100);color:var(--g600);font-weight:500}
.map-thumb-wrap{flex:1;min-height:0;overflow:hidden;border-radius:8px;background:#d4e9f7;position:relative;display:flex}
.overlay{position:fixed;inset:0;background:rgba(10,30,5,.5);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:100;opacity:0;pointer-events:none;transition:opacity .2s}
.overlay.open{opacity:1;pointer-events:all}
.box{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--sh-md)}
.btn-pri{padding:7px 18px;border-radius:8px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-size:.84rem;font-family:var(--f);font-weight:600}
.btn-sec{padding:7px 16px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text2);cursor:pointer;font-size:.84rem;font-family:var(--f)}
.btn-danger{padding:7px 16px;border-radius:8px;border:1px solid var(--danger);background:transparent;color:var(--danger);cursor:pointer;font-size:.84rem;font-family:var(--f)}
.btn-dng{padding:7px 14px;border-radius:8px;border:1px solid var(--danger);background:transparent;color:var(--danger);cursor:pointer;font-size:.8rem;font-family:var(--f)}
.btn-add{padding:6px 14px;border-radius:8px;border:none;background:var(--accent);color:#fff;cursor:pointer;font-size:.8rem;font-family:var(--f);font-weight:600}
.modal-footer{display:flex;gap:8px;margin-top:16px;justify-content:flex-end}
.flabel{font-size:.68rem;color:var(--text4);display:block;margin-bottom:3px;margin-top:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.finput{width:100%;padding:7px 11px;background:var(--s2);border:1px solid var(--border);border-radius:8px;color:var(--text1);font-family:var(--f);font-size:.86rem;outline:none}
.finput:focus{border-color:var(--accent)}
/* MAP */
.map-overlay-box{background:var(--surface);border:1px solid var(--border);border-radius:18px;box-shadow:var(--sh-md);width:980px;height:680px;display:flex;flex-direction:column;overflow:hidden}
.map-header{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0;flex-wrap:nowrap}
.map-mode-lbl{font-size:.72rem;color:var(--text3);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#fff;cursor:pointer;border:2.5px solid transparent;transition:all .15s;user-select:none;position:relative;flex-shrink:0}
.p-avatar.active{box-shadow:0 0 0 3px rgba(0,0,0,.2)}
.map-body{flex:1;position:relative;overflow:hidden;background:#d4e9f7}
#wmap{width:100%;height:100%;cursor:grab}
#wmap:active{cursor:grabbing}
.zoom-btns{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;gap:4px}
.zbtn{width:32px;height:32px;background:var(--surface);border:1px solid var(--border);border-radius:8px;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:var(--sh)}
.zbtn:hover{background:var(--s2)}
.map-legend-box{position:absolute;bottom:10px;left:10px;background:rgba(255,255,255,.93);border:1px solid var(--border);border-radius:10px;padding:8px 12px;font-size:.67rem;display:flex;flex-direction:column;gap:3px}
.leg-row{display:flex;align-items:center;gap:6px}
.leg-sw{width:13px;height:13px;border-radius:3px;flex-shrink:0}
.cpopup{position:absolute;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 14px;box-shadow:var(--sh-md);min-width:150px;z-index:10;pointer-events:none;font-size:.78rem}
.cpopup h4{font-size:.85rem;font-weight:700;margin-bottom:6px}
.prow{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.pdot{width:9px;height:9px;border-radius:50%;flex-shrink:0}

/* grocery overlay */
.gov-box{width:96vw;max-width:1400px;max-height:90vh;display:flex;flex-direction:column;overflow:hidden;padding:0!important}
.gov-header{padding:12px 20px 10px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.gov-footer{padding:8px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:7px;flex-shrink:0}
.gov-sort-btns{display:flex;gap:6px;margin-left:12px}
.gov-sort-btn{padding:3px 10px;border-radius:6px;border:1px solid var(--border);background:var(--s2);font-size:.7rem;color:var(--text3);cursor:pointer;font-family:var(--f);font-weight:600}
.gov-sort-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
.gov-body{flex:1;overflow-y:auto;padding:8px 12px}
.gov-body::-webkit-scrollbar{width:3px}
.gov-body::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.gsec-header{display:flex;align-items:center;gap:8px;padding:10px 4px 5px;cursor:pointer;user-select:none;flex-shrink:0}
.gsec-arrow{font-size:.65rem;color:var(--text4);width:12px}
.gsec-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.gsec-name{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text4)}
.gsec-badge{background:var(--accent);color:#fff;font-size:.6rem;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:4px}
.gitem{padding:5px 10px;border-radius:20px;border:2px solid transparent;font-size:.78rem;cursor:pointer;transition:background .1s,color .1s;user-select:none;font-weight:600;white-space:nowrap;display:block;width:100%;margin-bottom:5px;box-sizing:border-box;text-align:left}
.gitem.editing{border-radius:8px;padding:4px 8px;display:block;width:100%;margin-bottom:5px}
.gedit-input{width:100%;padding:4px 6px;border-radius:6px;border:1px solid var(--border2);background:var(--surface);font-size:.75rem;font-family:var(--f);color:var(--text1);outline:none}
.gedit-del{font-size:.65rem;color:var(--danger);background:none;border:none;cursor:pointer;font-family:var(--f);padding:0;text-align:left}
/* dinner opts */
.din-opts{display:flex;flex-direction:column;gap:3px;max-height:220px;overflow-y:auto;margin-bottom:12px}
.din-opts::-webkit-scrollbar{width:4px}
.din-opts::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px}
.din-opt{display:flex;align-items:center;justify-content:space-between;padding:7px 12px;border-radius:8px;border:1px solid var(--border);background:var(--s2);font-size:.84rem;cursor:pointer;transition:all .12s;color:var(--text2);font-weight:500}
.din-opt:hover{background:var(--s3)}
.din-opt.sel{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);font-weight:600}
.din-opt-del{background:none;border:none;cursor:pointer;color:var(--text4);font-size:.8rem;padding:2px 5px;line-height:1;flex-shrink:0;opacity:0;transition:opacity .12s}
.din-opt:hover .din-opt-del{opacity:1}
.din-opt-del:hover{color:var(--danger)!important;opacity:1!important}
.ev-person-btn{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:#fff;cursor:pointer;opacity:.3;transition:all .15s;border:3px solid transparent;user-select:none}
.ev-person-btn.selected{opacity:1;border-color:rgba(255,255,255,.8);box-shadow:0 0 0 2px rgba(0,0,0,.25)}