:root{
  --paper:#F8F7F2; --ink:#2A2721; --ink-soft:#6E6A5E; --card:#FFFFFF; --line:#E7E4D9;
  --brass:#A97A1F; --brass-soft:#F4EAD4;
  --green:#4E7A57; --green-2:#7FA482; --green-3:#BCD2BC; --green-4:#E4EDE2;
  --alert:#B3502D; --radius:14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);height:100%}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",sans-serif;
  color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6;
}
.num{font-variant-numeric:tabular-nums}
ruby rt{font-size:.55em;opacity:.72;font-weight:500;letter-spacing:0}
.no-ruby rt{display:none}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px}

/* アプリ全体は縦いっぱいの1カラム。スマホ最適・PC中央寄せ */
#app{max-width:440px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;background:var(--paper)}
.screen{flex:1;overflow-y:auto}
.view{display:none;padding:18px 16px 26px;flex-direction:column;gap:14px}
.view.on{display:flex}
.hidden{display:none!important}

/* ---- ログイン ---- */
#login{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:28px 22px;text-align:center}
#login .brand{font-size:12px;letter-spacing:.22em;color:var(--brass);font-weight:600}
#login h1{font-size:22px;letter-spacing:.04em}
#login .who{font-size:15px;color:var(--ink-soft)}
#login .who b{color:var(--ink)}
.pin{display:flex;gap:10px;margin-top:4px}
.pin .dot{width:16px;height:16px;border-radius:50%;border:2px solid var(--line)}
.pin .dot.on{background:var(--brass);border-color:var(--brass)}
.pad{display:grid;grid-template-columns:repeat(3,72px);gap:12px;margin-top:6px}
.pad button{
  height:64px;border-radius:16px;border:1px solid var(--line);background:var(--card);
  font-size:24px;font-weight:600;color:var(--ink);cursor:pointer;
}
.pad button:active{background:var(--brass-soft)}
.pad button.blank{border:0;background:transparent;cursor:default}
#login .msg{font-size:13px;color:var(--alert);min-height:1.2em}
#login .hint{font-size:12px;color:var(--ink-soft)}

/* ---- 共通 ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.label{font-size:11px;letter-spacing:.14em;color:var(--ink-soft);font-weight:600;margin-bottom:6px}
.chip{display:inline-block;font-size:11px;font-weight:700;padding:2px 10px;border-radius:99px}
.chip.brass{background:var(--brass-soft);color:var(--brass)}

.hero-head{display:flex;justify-content:space-between;align-items:flex-start}
.hero-head .who{font-size:15px;font-weight:700}
.hero-head .who small{display:block;font-size:11px;color:var(--ink-soft);font-weight:500}
.streak{display:flex;align-items:center;gap:8px;background:var(--brass-soft);border-radius:12px;padding:6px 14px}
.streak .n{font-size:26px;font-weight:700;color:var(--brass);line-height:1}
.streak .t{font-size:10px;color:var(--brass);line-height:1.3;font-weight:600}

.mission{background:var(--ink);color:#fff;border:0}
.mission .label{color:#B9B4A6}
.mission .goal-text{font-size:18px;font-weight:700;line-height:1.5;text-wrap:balance}
.mission .anchor{font-size:12px;color:#CFCABB;margin-top:8px}
.mission .anchor b{color:#EFD9A8;font-weight:600}

.bigbtn{
  width:100%;border:0;border-radius:16px;background:var(--brass);color:#fff;
  font-size:18px;font-weight:700;padding:18px;cursor:pointer;letter-spacing:.06em;
  box-shadow:0 10px 24px -12px rgba(169,122,31,.7);transition:transform .12s ease;
}
.bigbtn:active{transform:scale(.97)}
.bigbtn.done{background:var(--green);box-shadow:none;cursor:default}

.weekdots{display:flex;justify-content:space-between}
.weekdots .d{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:10px;color:var(--ink-soft)}
.weekdots .dot{width:26px;height:26px;border-radius:50%;border:1.5px dashed var(--line);display:flex;align-items:center;justify-content:center}
.weekdots .dot.hit{background:var(--green);border:0;color:#fff}
.weekdots .dot.today{border:1.5px solid var(--brass)}
.weekdots .dot svg{width:13px;height:13px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}

.karte-peek{border-left:4px solid var(--brass);padding-left:12px}
.karte-peek p{font-size:13px}
.karte-peek .from{font-size:11px;color:var(--ink-soft);margin-top:4px}

/* 振り返り */
.statgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 10px;text-align:center}
.stat .v{font-size:22px;font-weight:700}
.stat .k{font-size:10px;color:var(--ink-soft);letter-spacing:.06em}
.progressline{height:10px;border-radius:99px;background:var(--green-4);overflow:hidden;margin-top:8px}
.progressline i{display:block;height:100%;background:var(--green);border-radius:99px}
.heatwrap{overflow-x:auto;padding-bottom:4px}
.heat{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,14px);gap:3px;width:max-content}
.heat i{width:14px;height:14px;border-radius:4px;background:#EFEDE4}
.heat i.l1{background:var(--green-3)}
.heat i.l2{background:var(--green-2)}
.heat i.l3{background:var(--green)}
.heat-legend{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--ink-soft);margin-top:8px;justify-content:flex-end}
.heat-legend i{width:11px;height:11px;border-radius:3px;background:#EFEDE4;display:inline-block}
.heat-legend i.l1{background:var(--green-3)}
.heat-legend i.l2{background:var(--green-2)}
.heat-legend i.l3{background:var(--green)}

/* カルテ */
.tl{display:flex;flex-direction:column;gap:0}
.tl-lesson{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.tl-lesson .date{font-size:11px;color:var(--ink-soft);letter-spacing:.08em;margin-bottom:6px;display:flex;justify-content:space-between;align-items:center}
.tl-lesson .sec{font-size:12.5px;margin-bottom:8px}
.tl-lesson .sec b{display:block;font-size:11px;color:var(--brass);letter-spacing:.1em;font-weight:700;margin-bottom:2px}
.tl-lesson .hw{background:var(--brass-soft);border-radius:10px;padding:10px 12px;font-size:12.5px}
.tl-lesson .hw b{display:block;font-size:11px;color:var(--brass);letter-spacing:.1em;margin-bottom:2px}
.tl-gap{display:flex;align-items:center;gap:10px;padding:14px 6px 14px 22px;border-left:2px dashed var(--green-2);margin-left:24px}
.tl-gap .dots{display:flex;gap:4px;flex-wrap:wrap}
.tl-gap .dots i{width:12px;height:12px;border-radius:50%;background:#E4E1D6}
.tl-gap .dots i.hit{background:var(--green)}
.tl-gap span{font-size:11px;color:var(--ink-soft)}
.tl-gap span b{color:var(--green);font-weight:700}
.empty{font-size:13px;color:var(--ink-soft);text-align:center;padding:20px}

/* 目標 */
.goaltypes{display:flex;flex-direction:column;gap:10px}
.gcard{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px 16px;cursor:pointer;display:flex;gap:12px;align-items:flex-start;text-align:left;width:100%}
.gcard.on{border-color:var(--brass);background:#FDFBF4}
.gcard .radio{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;margin-top:2px;position:relative}
.gcard.on .radio{border-color:var(--brass)}
.gcard.on .radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--brass)}
.gcard h4{font-size:14px}
.gcard p{font-size:11.5px;color:var(--ink-soft)}
.gparams{display:flex;gap:16px;align-items:center;justify-content:center;padding:4px 0}
.stepper{display:flex;align-items:center;gap:10px}
.stepper button{width:34px;height:34px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);font-size:18px;cursor:pointer;color:var(--ink);line-height:1}
.stepper .val{font-size:18px;font-weight:700;min-width:84px;text-align:center}
.anchor-input{width:100%;border:1.5px solid var(--line);border-radius:12px;padding:11px 13px;font-size:13px;font-family:inherit;background:var(--card)}
.togglerow{display:flex;justify-content:space-between;align-items:center;gap:10px}
.togglerow p{font-size:12px;color:var(--ink-soft)}
.toggle{width:46px;height:26px;border-radius:99px;background:#DDD9CC;border:0;cursor:pointer;position:relative;flex-shrink:0}
.toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s ease}
.toggle.on{background:var(--green)}
.toggle.on::after{left:23px}
.savebtn{width:100%;border:0;border-radius:14px;background:var(--brass);color:#fff;font-size:15px;font-weight:700;padding:14px;cursor:pointer}
.linkbtn{background:none;border:0;color:var(--ink-soft);font-size:12px;text-decoration:underline;cursor:pointer;padding:8px}

/* 記録シート */
.sheet-wrap{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:rgba(42,39,33,.45);z-index:20}
.sheet-wrap.on{display:flex}
.sheet{background:var(--card);width:100%;max-width:440px;border-radius:22px 22px 0 0;padding:22px 20px 26px}
.sheet h3{font-size:16px;margin-bottom:4px}
.sheet .sub{font-size:12px;color:var(--ink-soft);margin-bottom:14px}
.minutes{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.minutes button{border:1.5px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 0;flex:1 1 28%;font-size:14px;font-weight:700;cursor:pointer;color:var(--ink)}
.minutes button.on{border-color:var(--brass);background:var(--brass-soft);color:var(--brass)}
.sheet .row{display:flex;gap:10px}
.sheet .row button{flex:1;border-radius:12px;padding:13px;font-size:14px;font-weight:700;cursor:pointer;border:0}
.btn-ghost{background:var(--paper);color:var(--ink-soft);border:1px solid var(--line)!important}
.btn-main{background:var(--brass);color:#fff}
.btn-main:disabled{opacity:.4;cursor:default}

/* タブバー */
.tabbar{display:flex;border-top:1px solid var(--line);background:var(--card);position:sticky;bottom:0}
.tabbar button{flex:1;border:0;background:transparent;padding:9px 4px 10px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--ink-soft);letter-spacing:.04em}
.tabbar button svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.on{color:var(--brass);font-weight:700}

/* トースト・音符 */
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:#fff;font-size:13px;font-weight:600;padding:10px 20px;border-radius:99px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;white-space:nowrap;z-index:30}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.note-fly{position:fixed;font-size:22px;color:var(--brass);pointer-events:none;animation:fly 1.1s ease-out forwards;z-index:25}
@keyframes fly{from{opacity:1;transform:translateY(0) rotate(0)}to{opacity:0;transform:translateY(-90px) rotate(20deg)}}
@media (prefers-reduced-motion:reduce){.note-fly{animation:none;opacity:0}.bigbtn,.toast,.toggle::after{transition:none}}

/* ローディング */
.loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:13px}