/* Personal AI OS — iOS design language.
   Colours are Apple's system palette; type is SF Pro via -apple-system. */

:root{
  --bg:#F2F2F7;            /* systemGroupedBackground */
  --card:#FFFFFF;          /* secondarySystemGroupedBackground */
  --card-press:#E5E5EA;
  --sep:rgba(60,60,67,0.20);
  --label:#000000;
  --label2:rgba(60,60,67,0.60);
  --label3:rgba(60,60,67,0.30);
  --fill:rgba(120,120,128,0.12);
  --fill2:rgba(120,120,128,0.20);
  --bar:rgba(249,249,249,0.82);
  --bar-line:rgba(60,60,67,0.18);

  --blue:#007AFF; --green:#34C759; --orange:#FF9500;
  --red:#FF3B30; --purple:#AF52DE; --indigo:#5856D6; --teal:#30B0C7;

  --radius:10px;
  --sys:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  --round:ui-rounded,-apple-system,BlinkMacSystemFont,"SF Pro Rounded","Helvetica Neue",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#000000;
    --card:#1C1C1E;
    --card-press:#2C2C2E;
    --sep:rgba(84,84,88,0.60);
    --label:#FFFFFF;
    --label2:rgba(235,235,245,0.60);
    --label3:rgba(235,235,245,0.30);
    --fill:rgba(120,120,128,0.24);
    --fill2:rgba(120,120,128,0.36);
    --bar:rgba(30,30,32,0.82);
    --bar-line:rgba(84,84,88,0.55);
    --blue:#0A84FF; --green:#30D158; --orange:#FF9F0A;
    --red:#FF453A; --purple:#BF5AF2; --indigo:#5E5CE6; --teal:#40C8E0;
  }
}
:root[data-theme="dark"]{
  --bg:#000000; --card:#1C1C1E; --card-press:#2C2C2E;
  --sep:rgba(84,84,88,0.60);
  --label:#FFFFFF; --label2:rgba(235,235,245,0.60); --label3:rgba(235,235,245,0.30);
  --fill:rgba(120,120,128,0.24); --fill2:rgba(120,120,128,0.36);
  --bar:rgba(30,30,32,0.82); --bar-line:rgba(84,84,88,0.55);
  --blue:#0A84FF; --green:#30D158; --orange:#FF9F0A;
  --red:#FF453A; --purple:#BF5AF2; --indigo:#5E5CE6; --teal:#40C8E0;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--label);
  font-family:var(--sys);font-size:17px;line-height:1.29;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;overscroll-behavior-y:none;
}
.shell{max-width:520px;margin:0 auto;padding:0 0 calc(64px + env(safe-area-inset-bottom))}

.navbar{
  position:sticky;top:0;z-index:20;
  background:var(--bar);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  padding:calc(8px + env(safe-area-inset-top)) 16px 8px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  min-height:44px;border-bottom:.5px solid transparent;
}
.navbar.scrolled{border-bottom-color:var(--bar-line)}
.navbar .small{font-size:17px;font-weight:600;opacity:0;transition:opacity .18s}
.navbar.scrolled .small{opacity:1}

h1.large{
  font-size:34px;font-weight:700;letter-spacing:.37px;line-height:1.2;
  margin:0;padding:4px 16px 2px;
}
.subtitle{padding:0 16px 8px;font-size:15px;color:var(--label2)}

.group{margin:22px 16px 0}
.group > h2{
  font-size:13px;font-weight:400;color:var(--label2);
  margin:0 0 7px;padding:0 16px;letter-spacing:-.08px;
}
.inset{background:var(--card);border-radius:var(--radius);overflow:hidden}
.rowitem{
  display:flex;align-items:center;gap:12px;
  padding:11px 16px;min-height:44px;position:relative;
  color:inherit;text-decoration:none;
}
.rowitem + .rowitem::before{
  content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--sep);
}
.rowitem.hasicon + .rowitem.hasicon::before{left:56px}
.rowitem .grow{flex:1;min-width:0}
.rowitem .t{font-size:17px;letter-spacing:-.41px}
.rowitem .s{font-size:13px;color:var(--label2);margin-top:2px;letter-spacing:-.08px}
.rowitem .v{font-size:17px;color:var(--label2);white-space:nowrap;letter-spacing:-.41px}
.rowitem .v.mono{font-variant-numeric:tabular-nums}
.chev{width:8px;height:13px;flex-shrink:0;color:var(--label3)}
.glyph{
  width:29px;height:29px;border-radius:7px;flex-shrink:0;
  display:grid;place-items:center;color:#fff;
}
.glyph svg{width:17px;height:17px}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.hero{background:var(--card);border-radius:var(--radius);padding:18px 16px}
.hero .n{font-size:40px;font-weight:700;letter-spacing:.4px;font-variant-numeric:tabular-nums;line-height:1}
.hero .of{font-size:15px;color:var(--label2);margin-top:6px}
.track{height:8px;background:var(--fill);border-radius:4px;overflow:hidden;margin-top:14px}
.track i{display:block;height:100%;border-radius:4px}
.hero .foot{display:flex;justify-content:space-between;margin-top:9px;font-size:13px;color:var(--label2)}

.week{display:flex;justify-content:space-between;padding:16px;background:var(--card);border-radius:var(--radius)}
.week .d{display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}
.week .ring{width:30px;height:30px;border-radius:50%;border:2px solid var(--fill2);display:grid;place-items:center}
.week .ring.done{background:var(--green);border-color:var(--green)}
.week .ring.done svg{width:15px;height:15px;color:#fff}
.week .ring.today{border-color:var(--blue);border-style:dashed}
.week .n{font-size:13px;color:var(--label2)}
.week .n.now{color:var(--blue);font-weight:600}

.chartcard{background:var(--card);border-radius:var(--radius);padding:16px}
.bars{display:flex;align-items:flex-end;gap:12px;height:92px}
.bars .c{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px}
.bars .b{width:100%;max-width:42px;border-radius:5px;background:var(--fill2);min-height:3px}
.bars .b.cur{background:var(--orange)}
.bars .n{font-size:12px;color:var(--label2)}
.catrow{display:flex;flex-direction:column;gap:6px;padding:11px 0;position:relative}
.catrow + .catrow::before{content:"";position:absolute;left:0;right:0;top:0;height:.5px;background:var(--sep)}
.catrow .top{display:flex;justify-content:space-between;font-size:16px;letter-spacing:-.4px}
.catrow .v{font-variant-numeric:tabular-nums;color:var(--label2)}

.empty{padding:34px 22px;text-align:center}
.empty b{display:block;font-size:17px;font-weight:600;margin-bottom:6px;letter-spacing:-.41px}
.empty span{font-size:15px;color:var(--label2);line-height:1.4}
.skel{background:var(--fill);border-radius:var(--radius);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.5}50%{opacity:.9}}
.notice{background:var(--card);border-radius:var(--radius);padding:16px}
.notice b{display:block;font-size:17px;font-weight:600;margin-bottom:5px;letter-spacing:-.41px}
.notice p{margin:0;font-size:15px;color:var(--label2);line-height:1.4}
.notice p + p{margin-top:8px}
.btn{
  display:flex;align-items:center;justify-content:center;
  min-height:50px;background:var(--blue);color:#fff;border:0;border-radius:12px;
  font-family:var(--sys);font-size:17px;font-weight:600;letter-spacing:-.41px;cursor:pointer;width:100%;
}
.footnote{padding:14px 32px 0;font-size:13px;color:var(--label2);text-align:center;line-height:1.4}

.chatlog{display:flex;flex-direction:column;gap:8px;padding:4px 16px 0}
.msg{max-width:82%;padding:9px 14px;border-radius:19px;font-size:17px;line-height:1.3;letter-spacing:-.41px;word-wrap:break-word}
.msg.me{align-self:flex-end;background:var(--blue);color:#fff;border-bottom-right-radius:5px}
.msg.ai{align-self:flex-start;background:var(--fill);color:var(--label);border-bottom-left-radius:5px}
.msg.ai.flag{background:rgba(255,149,0,.18)}
.msg.sys{align-self:center;background:transparent;color:var(--red);font-size:13px;text-align:center;max-width:100%}
.msg.pending{align-self:flex-start;background:var(--fill);color:var(--label3);border-bottom-left-radius:5px}
.composer{
  position:fixed;left:0;right:0;bottom:calc(56px + env(safe-area-inset-bottom));
  background:var(--bar);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--bar-line);
  padding:8px 12px;display:flex;gap:8px;align-items:flex-end;z-index:15;
}
.composer .in{max-width:520px;margin:0 auto;width:100%;display:flex;gap:8px;align-items:center}
.composer input{
  flex:1;min-height:36px;padding:8px 14px;border-radius:18px;
  border:.5px solid var(--sep);background:var(--card);color:var(--label);
  font-family:var(--sys);font-size:17px;letter-spacing:-.41px;
}
.composer input:focus{outline:none;border-color:var(--blue)}
.send{
  width:32px;height:32px;border-radius:50%;border:0;background:var(--blue);
  color:#fff;display:grid;place-items:center;cursor:pointer;flex-shrink:0;
}
.send:disabled{background:var(--fill2);color:var(--label3)}
.send svg{width:17px;height:17px}

nav{
  position:fixed;left:0;right:0;bottom:0;z-index:20;
  background:var(--bar);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:.5px solid var(--bar-line);
  padding-bottom:env(safe-area-inset-bottom);
}
nav .in{max-width:520px;margin:0 auto;display:flex}
nav button{
  flex:1;background:none;border:0;padding:7px 0 4px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--label2);font-family:var(--sys);font-size:10px;letter-spacing:.06px;min-height:49px;
}
nav button[aria-current="true"]{color:var(--blue)}
nav svg{width:26px;height:26px}
nav .pip{position:absolute;transform:translate(9px,-2px);width:8px;height:8px;border-radius:50%;background:var(--red)}

#gate{position:fixed;inset:0;background:var(--bg);display:none;place-items:center;padding:24px;z-index:60}
#gate.on{display:grid}
#gate .box{width:100%;max-width:340px;text-align:center}
#gate .mk{width:60px;height:60px;border-radius:14px;background:var(--blue);margin:0 auto 20px;display:grid;place-items:center}
#gate .mk svg{width:32px;height:32px;color:#fff}
#gate h2{font-size:28px;font-weight:700;letter-spacing:.36px;margin:0 0 8px}
#gate p{margin:0 0 26px;font-size:15px;color:var(--label2);line-height:1.4}
#gate input{
  width:100%;min-height:50px;padding:0 16px;border-radius:12px;
  border:.5px solid var(--sep);background:var(--card);color:var(--label);
  font-family:var(--sys);font-size:17px;text-align:center;margin-bottom:10px;
}
#gate input:focus{outline:none;border-color:var(--blue)}
#gate .msg{font-size:13px;line-height:1.5;margin-top:16px;color:var(--label2)}
#gate .msg.ok{color:var(--green)}
#gate .msg.bad{color:var(--red)}

:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

.cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cards .dcard:first-child{grid-column:1 / -1}
.dcard{
  border-radius:18px;padding:16px;color:#fff;cursor:pointer;
  display:flex;flex-direction:column;gap:2px;min-height:128px;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.dcard:active{filter:brightness(.94)}
.dtop{display:flex;align-items:center;gap:7px;font-size:15px;font-weight:600;opacity:.92;letter-spacing:-.2px}
.dtop svg{width:18px;height:18px}
.dbig{font-size:40px;font-weight:700;letter-spacing:.3px;line-height:1.05;margin-top:10px;font-variant-numeric:tabular-nums}
.dbig small{font-size:20px;font-weight:400;opacity:.75}
.dsmall{font-size:14px;opacity:.85;letter-spacing:-.2px}
.dline{font-size:14px;opacity:.9;margin-top:auto;padding-top:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dtrack{height:6px;background:rgba(255,255,255,.28);border-radius:3px;overflow:hidden;margin-top:auto;position:relative;top:6px}
.dtrack i{display:block;height:100%;background:#fff;border-radius:3px}