@font-face {
  font-family: "Fredoka Day";
  src: url("/fonts/Fredoka-Day.woff2") format("woff2"),
       url("/fonts/Fredoka-Day.woff") format("woff");
  font-weight: 500; font-style: normal; font-display: swap;
}
:root {
  --bg:#f5f5f7; --card:#fff; --ink:#1d1d1f; --muted:#86868b;
  --border:#d2d2d7; --border-light:#e5e5ea; --accent:#0071e3;
  --work:#ff3b30; --personal:#34c759; --fixed:#007aff; --other:#af52de; --private:#ff2d55;
  --font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", system-ui, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:var(--font);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}
button,input{font:inherit} button{cursor:pointer} ul{list-style:none;margin:0;padding:0}
.hidden{display:none!important}

/* lock */
.lock{min-height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 24px;gap:10px;text-align:center}
.lock-logo{width:88px;height:88px;border-radius:22px;border:1px solid var(--border);object-fit:cover;background:#fff}
.lock h1{margin:8px 0 0;font-size:22px}
.lock-hint,.lock-note{margin:0;color:var(--muted);font-size:13px;max-width:280px;line-height:1.4}
.lock-form{display:flex;flex-direction:column;gap:10px;width:min(320px,100%);margin-top:12px}
.lock-form input{border:1px solid var(--border);border-radius:12px;padding:12px 14px;background:#fff;outline:none;font-size:16px}
.lock-form input:focus{border-color:var(--accent)}
.btn{border:1px solid var(--border);border-radius:12px;padding:12px 16px;background:#fff;color:var(--ink)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.link{border:none;background:transparent;color:var(--accent);font-size:13px;margin-top:8px}

/* app shell */
.app{height:100%;display:flex;flex-direction:column;padding:10px 12px calc(8px + var(--safe-b));gap:8px;position:relative;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-shrink:0}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.logo{width:42px;height:42px;border-radius:11px;object-fit:cover;border:1px solid var(--border);background:#fff;flex-shrink:0}
.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.brand-text strong{font-size:14px;white-space:nowrap}
.brand-text span{font-size:12px;color:var(--muted);white-space:nowrap}
.top-actions{display:flex;gap:4px;align-items:center;flex-shrink:0}
.icon-btn{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);background:#fff;color:var(--ink);padding:0}
.pill{border:1px solid var(--border);border-radius:8px;padding:6px 10px;background:#fff;font-size:12px;white-space:nowrap}
.pill.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.pill.warn-on{background:var(--ink);color:#fff;border-color:var(--ink)}

.avatars{display:none;align-items:center;margin-left:6px}
.avatars img{width:36px;height:36px;border-radius:50%;border:2px solid #fff;outline:1px solid var(--border-light);margin-left:-8px;object-fit:cover;background:#fff}
.avatars img:first-child{margin-left:0}

.weekday-row{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:11px;color:var(--muted);flex-shrink:0}
.month-grid{flex:1;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;min-height:0}

.day-cell{border:none;background:transparent;border-radius:10px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px 2px;color:var(--ink);min-height:0;overflow:visible}
.day-cell.other{color:#c7c7cc}
.day-cell.today{background:#fff;border:1px solid var(--border);font-weight:600;color:var(--accent);position:relative}
.day-cell .day-n{font-family:"Fredoka Day","SF Pro Rounded",ui-rounded,system-ui,sans-serif;font-size:15px;font-weight:500;line-height:1.1}
.day-cell .cell-dots{display:flex;gap:2px;height:6px;align-items:center;justify-content:center}
.day-cell .dot{width:5px;height:5px;border-radius:50%;display:inline-block;background:var(--other)}
.dot.work{background:var(--work)}.dot.personal{background:var(--personal)}.dot.fixed{background:var(--fixed)}
.dot.other,.dot.inspiration{background:var(--other)}.dot.private{background:var(--private)}
.day-cell.today .paw{position:absolute;top:3px;right:3px;width:9px;height:9px}
.privacy-on .cell-dots{opacity:.35}

.foot-avatars{display:flex;justify-content:center;align-items:center;padding:4px 0;flex-shrink:0}
.foot-avatars img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;outline:1px solid var(--border-light);margin-left:-8px;object-fit:cover;background:#fff}
.foot-avatars img:first-child{margin-left:0}

.foot{flex-shrink:0}
.sync-row{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.sync-dot{width:7px;height:7px;border-radius:50%;background:#c7c7cc}
.sync-row.ok .sync-dot{background:var(--personal)}
.sync-row.warn .sync-dot{background:#ff9500}
.link-btn{border:none;background:transparent;color:var(--accent);font-size:11px;padding:0}

/* webs + spider */
.deco-web{position:absolute;width:90px;height:90px;background:url("/assets/web.svg") no-repeat center/contain;opacity:.34;pointer-events:none;z-index:0}
.deco-web-tr{top:0;right:0}.deco-web-bl{left:0;bottom:40px;transform:rotate(180deg);opacity:.28}
.deco-spider{position:absolute;top:40px;right:14px;width:24px;height:48px;pointer-events:none;z-index:4;transform-origin:50% 0;animation:spider-swing 5.5s ease-in-out infinite}
.deco-spider .thread{display:block;width:1px;height:16px;margin:0 auto;background:#c7c7cc}
.deco-spider .spider-img{display:block;width:16px;height:16px;margin:0 auto}
@keyframes spider-swing{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3.5deg)}}
@media(prefers-reduced-motion:reduce){.deco-spider{animation:none}}

/* bottom sheet */
.sheet{position:fixed;inset:0;z-index:50}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.28)}
.sheet-panel{position:absolute;left:0;right:0;bottom:0;max-height:min(78vh,640px);background:#fff;border-radius:16px 16px 0 0;border:1px solid var(--border);border-bottom:none;padding:8px 16px calc(16px + var(--safe-b));display:flex;flex-direction:column;gap:10px}
.sheet-handle{width:36px;height:4px;border-radius:2px;background:#d2d2d7;margin:4px auto 2px}
.sheet-head{display:flex;justify-content:space-between;align-items:flex-start}
.sheet-sub{margin:0;font-size:12px;color:var(--muted)}
#sheetTitle{margin:2px 0 0;font-size:18px;font-weight:600}
.sheet-form{display:grid;grid-template-columns:1fr auto;gap:8px;background:var(--bg);border:1px solid var(--border-light);border-radius:12px;padding:8px}
.sheet-form input{border:none;outline:none;background:transparent;padding:8px;font-size:16px}
.sheet-list{overflow:auto;flex:1;min-height:80px;display:flex;flex-direction:column;gap:4px;-webkit-overflow-scrolling:touch}
.ed-item{display:grid;grid-template-columns:22px 14px 1fr auto;gap:6px;align-items:start;padding:8px 4px;border-radius:10px}
.ed-item:hover,.ed-item:active{background:var(--bg)}
.ed-item.done .ed-text{text-decoration:line-through;color:var(--muted)}
.ed-check{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border);background:#fff;margin-top:2px;color:transparent;font-size:11px;display:grid;place-items:center;padding:0}
.ed-item.done .ed-check{background:var(--accent);color:#fff;border-color:var(--accent)}
.ed-cat{width:10px;height:10px;border-radius:50%;border:none;margin-top:5px;padding:0}
.ed-text{border:none;outline:none;background:transparent;width:100%;resize:none;font-size:15px;line-height:1.4;color:var(--ink);padding:0;min-height:20px}
.ed-del{border:none;background:transparent;color:var(--muted);font-size:12px;padding:0 4px}

.toast{position:fixed;left:50%;bottom:calc(24px + var(--safe-b));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-size:13px;z-index:80}

/* tablet / desktop wide */
@media (min-width:700px){
  .app{max-width:980px;margin:0 auto;padding:16px}
  .logo{width:44px;height:44px;border-radius:12px}
  .avatars{display:flex}
  .foot-avatars{display:none}
  .title-full{display:block}
  .deco-web{width:130px;height:130px}
}
@media (max-width:699px){
  .title-full{display:none}
  .brand-text{flex-direction:row;align-items:center;gap:0}
  .brand-text span{font-size:13px;font-weight:600;color:var(--ink)}
  .avatars{display:none!important}
}