:root {
  --paper: #fffdf9;
  --paper-warm: #fbf8f0;
  --ink: #3d332d;
  --muted: #776e66;
  --line: rgba(162, 147, 124, .14);
  --loan: #4f8b4d;
  --loan-soft: #edf7eb;
  --stocks: #6957c6;
  --stocks-soft: #f2efff;
  --nisa: #ec7f1d;
  --nisa-soft: #fff4e6;
  --check: #3e80c7;
  --check-soft: #eff7ff;
  --danger: #c65c5c;
  --shadow: 0 12px 30px rgba(92, 73, 53, .10);
  --radius: 24px;
  --radius-sm: 16px;
  font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Hiragino Sans", sans-serif;
}
* { box-sizing: border-box; }
html { background:#f7f3ea; }
body {
  margin:0; color:var(--ink); background:
  repeating-linear-gradient(0deg, transparent 0 28px, rgba(127,108,82,.075) 29px 30px),
  linear-gradient(135deg,#faf7ef,#f6f2ea);
  min-height:100vh;
}
button, input, select, textarea { font: inherit; }
button { cursor:pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline:3px solid rgba(62,128,199,.32); outline-offset:2px; }
.app-shell { min-height:100vh; max-width:1020px; margin:0 auto; padding:0 16px calc(100px + env(safe-area-inset-bottom)); position:relative; }
.app-shell::before { content:""; position:fixed; inset:0; pointer-events:none; background:
 radial-gradient(circle at 3% 7%, rgba(255,255,255,.78), transparent 24%),
 radial-gradient(circle at 90% 18%, rgba(255,255,255,.74), transparent 25%);
 z-index:-1; }
.topbar {
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:10px;
  min-height:84px; padding:12px 4px; background:rgba(251,248,240,.9); backdrop-filter: blur(16px);
  border-bottom:1px solid rgba(203,191,175,.45);
}
.topbar::after { content:""; position:absolute; width:118px; height:22px; right:92px; top:1px; transform:rotate(5deg); background:rgba(255,255,255,.54); border:1px solid rgba(212,208,201,.52); box-shadow:0 2px 7px rgba(84,73,62,.05); pointer-events:none; }
.brand { display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-align:left; border:0; background:transparent; color:var(--ink); padding:0; }
.brand-button:hover .brand-title { color:var(--loan); }
.brand-mascot { width:51px; height:51px; border-radius:19px; display:grid; place-items:center; background:linear-gradient(145deg,#fff,#f9f0e9); box-shadow:0 4px 12px rgba(91,72,52,.10); font-size:24px; letter-spacing:-10px; padding-right:8px; border:1px solid rgba(225,209,191,.7); }
.brand-copy { min-width:0; display:grid; gap:2px; }
.brand-title { font-size:clamp(17px,3.1vw,26px); font-weight:800; letter-spacing:.015em; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand-title .logo-ma { position:relative; display:inline-block; }
.tail-loop { font-style:normal; position:absolute; width:12px; height:12px; right:-1px; top:5px; color:#cf7a40; font-size:13px; line-height:12px; transform:rotate(-34deg); font-weight:900; }
.logo-t { color:var(--loan); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:2px; }
#topSubtitle { font-size:11px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.top-actions { display:flex; gap:8px; }
.icon-button { width:45px; height:45px; border-radius:50%; border:1px solid rgba(191,182,170,.64); color:#4a6356; background:#fffdf9; font-size:23px; box-shadow:0 3px 8px rgba(91,72,52,.07); }
.icon-button:hover { background:#f2f8ef; transform:translateY(-1px); }
.mobile-menu { display:none; }
.content { padding:22px 0 8px; }
.page-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin:0 2px 16px; }
.page-head h2 { margin:0; font-size:29px; letter-spacing:.03em; }
.page-head p { margin:7px 0 0; color:var(--muted); line-height:1.6; font-size:14px; }
.pill { align-self:center; flex:0 0 auto; border-radius:999px; padding:9px 12px; border:1px solid #cae0c5; background:#f1f8ef; color:#4b8545; font-size:12px; font-weight:700; }
.card { background:rgba(255,254,251,.94); border:1px solid rgba(229,217,202,.88); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.card h3 { margin:0 0 13px; font-size:18px; }
.card.flat { box-shadow:none; }
.card.tone-green { background:linear-gradient(135deg,#fbfffb,var(--loan-soft)); border-color:#d5e8d1; }
.card.tone-purple { background:linear-gradient(135deg,#fff,var(--stocks-soft)); border-color:#ddd6fb; }
.card.tone-orange { background:linear-gradient(135deg,#fffdf9,var(--nisa-soft)); border-color:#f6d8b7; }
.card.tone-blue { background:linear-gradient(135deg,#fff,var(--check-soft)); border-color:#d3e3f5; }
.grid { display:grid; gap:14px; }
.grid.two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.grid.three { grid-template-columns:repeat(3,minmax(0,1fr)); }
.asset-summary { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid rgba(220,208,191,.86); border-radius:24px; background:rgba(255,255,255,.78); box-shadow:var(--shadow); overflow:hidden; margin-bottom:16px; }
.asset-summary > div { padding:18px 15px; min-height:120px; position:relative; display:grid; align-content:center; gap:8px; }
.asset-summary > div + div { border-left:1px dashed rgba(173,160,145,.5); }
.asset-summary .label { font-size:14px; font-weight:800; display:flex; gap:7px; align-items:center; }
.asset-summary .value { font-size:clamp(20px,3.5vw,30px); font-weight:800; letter-spacing:.01em; }
.asset-summary .note { color:var(--muted); font-size:12px; }
.tone-label-loan { color:var(--loan); }.tone-label-stocks { color:var(--stocks); }.tone-label-nisa { color:var(--nisa); }.tone-label-check { color:var(--check); }
.home-hero { min-height:192px; padding:20px; border-radius:26px; border:1px solid #e4d8c9; background:linear-gradient(118deg,rgba(255,255,255,.96),rgba(245,249,242,.92)); box-shadow:var(--shadow); position:relative; overflow:hidden; }
.home-hero::after { content:""; position:absolute; width:220px; height:220px; right:-60px; top:-86px; border-radius:50%; background:rgba(113,159,94,.11); }
.hero-top { position:relative; z-index:1; display:flex; align-items:flex-start; gap:16px; }
.hero-copy { flex:1; }.hero-copy h3 { margin:0 0 5px; font-size:23px; }.hero-copy p { margin:0; color:var(--muted); line-height:1.65; }
.mascot-button { border:0; background:transparent; padding:0; flex:0 0 auto; position:relative; z-index:2; }
.mascot-art { width:115px; height:92px; display:block; filter:drop-shadow(0 6px 8px rgba(94,72,52,.12)); }
.speech-wrap { margin-top:14px; position:relative; z-index:1; display:flex; align-items:flex-end; gap:8px; }
.speech-bubble { max-width:580px; position:relative; border-radius:18px 18px 18px 5px; background:#fff; border:1px solid #e7dccd; padding:12px 14px; box-shadow:0 5px 14px rgba(97,77,54,.08); font-size:14px; line-height:1.55; }
.speech-bubble::before { content:""; position:absolute; left:-6px; bottom:9px; width:12px; height:12px; background:#fff; transform:rotate(45deg); border-left:1px solid #e7dccd; border-bottom:1px solid #e7dccd; }
.speaker-tag { display:inline-block; font-weight:800; color:var(--loan); font-size:12px; margin-bottom:2px; }
.text-button { border:0; background:transparent; color:var(--check); padding:4px 0; font-size:12px; text-decoration:underline; }
.next-card { margin-top:14px; padding:15px; border-radius:20px; background:rgba(255,255,255,.86); border:1px solid #d5e8d1; position:relative; z-index:1; }
.next-card h4 { margin:0 0 6px; font-size:18px; }.next-card p { margin:0; color:var(--muted); line-height:1.55; }
.meta-chip { border:1px solid #e0d6c9; background:#fffdfa; color:#6f675f; border-radius:999px; padding:7px 9px; font-size:12px; display:inline-flex; gap:4px; align-items:center; }
.chip-row { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
.section-title { display:flex; align-items:center; gap:9px; margin:22px 0 11px; font-size:18px; }.section-title .circle-icon { width:32px; height:32px; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:16px; }.circle-icon.loan{background:var(--loan)}.circle-icon.stocks{background:var(--stocks)}.circle-icon.nisa{background:var(--nisa)}.circle-icon.check{background:var(--check)}
.summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.summary-box { min-height:110px; padding:14px; display:grid; gap:6px; align-content:center; background:#fffefa; border:1px solid #eadfce; border-radius:19px; }.summary-box .label{font-size:12px;color:var(--muted)}.summary-box .value{font-size:20px;font-weight:800;line-height:1.2}.summary-box .note{font-size:11px;color:var(--muted);line-height:1.45}
.kpi-line { display:flex; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px dashed rgba(178,164,146,.48); align-items:baseline; }.kpi-line:last-child{border-bottom:0}.kpi-line span{color:var(--muted);font-size:14px}.kpi-line b{font-size:16px;text-align:right}
.btn-row { display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }.btn { border:0; border-radius:14px; padding:11px 15px; font-weight:800; min-height:43px; }.btn.primary{background:var(--loan);color:#fff}.btn.secondary{background:var(--check);color:#fff}.btn.purple{background:var(--stocks);color:#fff}.btn.orange{background:var(--nisa);color:#fff}.btn.outline{background:#fffdfa;color:#5c5954;border:1px solid #dfd6c9}.btn.danger{background:#c85e5e;color:#fff}.btn.small{padding:7px 10px;min-height:auto;font-size:12px}
.notice { padding:12px 13px; border-radius:15px; line-height:1.55; font-size:13px; border:1px solid transparent; }.notice.info{background:#eff7ff;border-color:#d7e7f7}.notice.good{background:#eef8ed;border-color:#d5ead1}.notice.warn{background:#fff3e6;border-color:#f4d6ae}.notice.danger{background:#fff0f0;border-color:#efcccc}
.status-row { display:flex; gap:10px; align-items:flex-start; padding:11px 0; border-bottom:1px dashed rgba(178,164,146,.45); }.status-row:last-child{border-bottom:0}.status-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f1f6f0;flex:0 0 auto}.status-row b,.status-row span{display:block}.status-row span{color:var(--muted);font-size:13px;line-height:1.55;margin-top:3px}
.advice-list { margin:9px 0; padding-left:20px; line-height:1.7; color:#544d45; font-size:14px; }.score { font-size:28px; letter-spacing:2px; margin:6px 0 9px; }.score.good{color:#5a984f}.score.mid{color:#d3851a}.score.low{color:#c6645d}
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:13px;font-weight:800;color:#4b443d}.field small{color:var(--muted);font-size:11px;line-height:1.5}.field input,.field select,.field textarea { width:100%; padding:11px 12px; border:1px solid #d9d0c5; border-radius:13px; background:#fffefa; color:var(--ink); }.field textarea{min-height:85px;resize:vertical}.unit-input{display:flex;align-items:center;border:1px solid #d9d0c5;border-radius:13px;background:#fffefa;overflow:hidden}.unit-input input{border:0;border-radius:0;flex:1;background:transparent}.unit-input span{padding:0 11px;color:var(--muted);font-size:13px;white-space:nowrap}
.table-wrap{overflow:auto;border:1px solid #e3d9cd;border-radius:16px}table{width:100%;border-collapse:collapse;min-width:650px}th,td{padding:10px;border-bottom:1px solid #eee6da;text-align:right;font-size:13px}th{background:#fbf8f2;color:#625950;white-space:nowrap}td:first-child,th:first-child{text-align:left}.empty{padding:23px;text-align:center;color:var(--muted);border:1px dashed #d9d0c4;border-radius:16px;line-height:1.7}
.stock-list { display:grid; gap:10px; }.stock-card{border:1px solid #ded7f7;background:linear-gradient(135deg,#fff,#f5f2ff);border-radius:18px;padding:14px}.stock-card-head{display:flex;gap:12px;align-items:start;justify-content:space-between}.stock-name{font-weight:800;font-size:16px}.stock-code{font-size:12px;color:var(--muted);margin-top:3px}.stock-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.stock-grid div{font-size:12px;color:var(--muted)}.stock-grid b{display:block;color:var(--ink);font-size:14px;margin-top:3px}.gain.up{color:#3d8a51!important}.gain.down{color:#c45d61!important}
.bottom-nav { position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:30; width:min(1020px,100%); padding:7px max(10px,env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); background:rgba(255,253,249,.95); backdrop-filter:blur(18px); border-top:1px solid rgba(217,207,194,.78); box-shadow:0 -8px 25px rgba(86,70,52,.08); }.nav-item{border:0;background:transparent;color:#777a77;border-radius:16px;padding:6px 1px;display:grid;gap:3px;place-items:center;font-size:11px;min-height:57px}.nav-item span{font-size:22px;line-height:1}.nav-item b{font-size:11px;font-weight:700}.nav-item.active{color:var(--loan);background:#f0f7ed}.nav-item:hover{background:#f7f3ee}
.app-modal { padding:0; border:0; border-radius:26px; max-width:min(720px,calc(100vw - 28px)); width:100%; background:transparent; box-shadow:0 20px 56px rgba(63,46,31,.26); }.app-modal::backdrop{background:rgba(48,40,31,.36);backdrop-filter:blur(3px)}.modal-inner{background:#fffdf8;border:1px solid #eee2d2;border-radius:26px;max-height:min(82vh,780px);overflow:auto;padding:20px;position:relative}.modal-inner::before{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 28px,rgba(154,137,112,.05) 29px 30px);opacity:.8}.modal-inner>*{position:relative;z-index:1}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.modal-head h2{margin:0;font-size:21px}.close-button{width:38px;height:38px;border-radius:50%;border:1px solid #dbd1c4;background:#fff;color:#6e6258;font-size:23px}.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.profile-card{border:1px solid #eadfce;border-radius:20px;padding:15px;background:#fffefa}.profile-card h3{margin:0 0 8px}.profile-list{display:grid;gap:9px;margin:0}.profile-list div{border-bottom:1px dashed #e2d8ca;padding-bottom:8px}.profile-list div:last-child{border:0;padding-bottom:0}.profile-list dt{font-size:12px;color:var(--muted);font-weight:700}.profile-list dd{margin:2px 0 0;line-height:1.55;font-size:14px}.intro-hero{display:flex;gap:13px;align-items:center;border-radius:19px;background:linear-gradient(135deg,#f4fbf0,#fff7ed);border:1px solid #dfead7;padding:14px;margin-bottom:14px}.intro-hero .mascot-art{width:135px;height:106px}.hidden{display:none}.toast{position:fixed;z-index:60;left:50%;bottom:calc(86px + env(safe-area-inset-bottom));transform:translate(-50%,18px);background:#3e5144;color:#fff;padding:11px 15px;border-radius:999px;font-size:13px;box-shadow:0 8px 23px rgba(39,34,29,.2);opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
@media (max-width:720px){.app-shell{padding-left:12px;padding-right:12px}.topbar{min-height:78px}.brand-mascot{width:43px;height:43px;font-size:21px}.topbar::after{right:76px;width:82px}.icon-button{width:40px;height:40px;font-size:20px}.page-head h2{font-size:25px}.page-head{display:block}.pill{display:inline-flex;margin-top:10px}.grid.two,.grid.three{grid-template-columns:1fr}.asset-summary{grid-template-columns:1fr}.asset-summary>div+div{border-left:0;border-top:1px dashed rgba(173,160,145,.5)}.asset-summary>div{min-height:95px}.summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-hero{padding:16px}.mascot-art{width:95px;height:76px}.hero-copy h3{font-size:20px}.profile-grid{grid-template-columns:1fr}.stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bottom-nav{padding-top:5px}.nav-item span{font-size:20px}.nav-item b{font-size:10px}.mobile-menu{display:grid;place-items:center}.topbar{gap:7px}.brand-title{font-size:16px}.brand-mascot{display:none}.brand-copy{gap:3px}.app-shell{padding-bottom:90px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}}
@media (max-width:390px){.top-actions{gap:5px}.icon-button{width:37px;height:37px}.brand-title{font-size:14px}#topSubtitle{font-size:10px}.summary-box .value{font-size:17px}.nav-item b{font-size:9px}.nav-item span{font-size:18px}}


/* =========================================================
   Ver0.4.0 — ノート背景 + 色分けされたページ見出し
   ========================================================= */
:root { --paper:#fffdf7; --paper-warm:#fcf7ed; --paper-edge:#ded0ba; --notebook-line:rgba(143,174,196,.19); --notebook-margin:rgba(231,154,150,.22); --ink:#3e3028; --muted:#7b6f66; --loan:#4f934f; --stocks:#6555bb; --nisa:#ec7e20; --check:#3d81c4; --shadow:0 8px 20px rgba(93,68,45,.10); }
html{background:#e9dfcd}
body{background:radial-gradient(circle at 7% 4%,rgba(255,255,255,.85),transparent 24%),linear-gradient(100deg,rgba(255,255,255,.3),transparent 25%),#e9dfcd}
.app-shell{max-width:1120px;min-height:100vh;margin:0 auto;padding:0 28px calc(108px + env(safe-area-inset-bottom)) 62px;isolation:isolate;border-left:1px solid rgba(168,151,125,.28);border-right:1px solid rgba(168,151,125,.28);box-shadow:0 0 36px rgba(80,60,40,.11);background:linear-gradient(90deg,transparent 0 55px,var(--notebook-margin) 55px 57px,transparent 57px),repeating-linear-gradient(0deg,transparent 0 31px,var(--notebook-line) 32px 33px),var(--paper)}
.app-shell::before{content:"";position:absolute;pointer-events:none;z-index:0;top:83px;bottom:66px;left:9px;width:40px;background:repeating-radial-gradient(ellipse at 19px 17px,transparent 0 8px,rgba(92,77,57,.65) 8.5px 10px,rgba(244,239,229,.98) 10.5px 13px,transparent 13.5px 39px);opacity:.8}
.app-shell > *{position:relative;z-index:1}
.app-shell::after{content:"";position:fixed;z-index:2;pointer-events:none;width:128px;height:22px;right:clamp(18px,9vw,148px);top:9px;transform:rotate(5deg);background:rgba(255,255,255,.52);border:1px solid rgba(219,213,201,.72);box-shadow:0 2px 8px rgba(84,73,62,.08)}
.topbar{min-height:94px;padding:13px 2px 11px;background:rgba(255,253,247,.88);border-bottom:1px solid rgba(204,190,170,.58)}
.topbar::after{display:none}
.brand{gap:11px}.brand-mascot{width:63px;height:63px;overflow:hidden;border-radius:20px;padding:0;background:transparent;box-shadow:none;border:0}.brand-mascot img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 4px 6px rgba(86,62,41,.10))}
.brand-title{font-size:clamp(18px,2.8vw,30px);letter-spacing:.02em;color:#3f3028}.brand-title .logo-ma{color:#513522}.tail-loop{font-size:17px;line-height:14px;width:15px;height:15px;right:-3px;top:4px;color:#d28647;transform:rotate(-24deg)}.logo-t{color:#4e914e}#topSubtitle{font-size:12px;color:#84776c}
.icon-button{background:rgba(255,255,255,.94);border-color:#e0d6c7;color:#3e714d;box-shadow:0 3px 9px rgba(91,72,52,.10)}
.content{padding:24px 0 14px}
.page-head{margin:0 0 17px;padding:12px 16px 13px;min-height:89px;border:1px solid rgba(226,214,197,.92);border-radius:20px;background:linear-gradient(105deg,rgba(255,255,255,.96),rgba(255,250,239,.88));box-shadow:0 5px 14px rgba(98,74,48,.07)}
.page-head-copy{display:grid;gap:2px}.page-kicker{display:inline-flex;align-items:center;width:max-content;color:#5a934e;font-size:11px;font-weight:800;letter-spacing:.08em}.page-kicker::before{content:"●";color:#8dbe6b;margin-right:5px;font-size:10px}.page-head h2{font-size:clamp(25px,3.2vw,33px);color:#433129;letter-spacing:.06em;line-height:1.25}.page-head p{color:#776b62;font-size:14px}.pill{background:#f2f8ef;border-color:#cde1c6;color:#4f884a;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.card,.home-hero,.asset-summary{border-color:rgba(220,206,188,.90);box-shadow:var(--shadow)}.card{border-radius:21px;background:rgba(255,254,250,.94)}.card.tone-green{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(240,250,237,.94))}.card.tone-purple{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,243,255,.94))}.card.tone-orange{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,247,235,.96))}.card.tone-blue{background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(239,248,255,.96))}.card h3{font-size:20px;margin-bottom:14px;letter-spacing:.02em}.tone-green h3{color:var(--loan)}.tone-purple h3{color:var(--stocks)}.tone-orange h3{color:var(--nisa)}.tone-blue h3{color:var(--check)}
.home-hero{min-height:176px;border-radius:24px;padding:18px 20px;background:radial-gradient(circle at 96% 2%,rgba(134,177,104,.12),transparent 34%),linear-gradient(120deg,rgba(255,255,255,.96),rgba(246,251,243,.96))}.home-hero::after{width:190px;height:190px;right:-58px;top:-72px;background:rgba(127,171,100,.09)}.hero-copy h3{font-size:24px;color:#47352b}.mascot-art{width:132px;height:112px;object-fit:contain;filter:drop-shadow(0 4px 7px rgba(84,61,41,.10))}.mascot-button{align-self:flex-start}.speech-bubble{background:rgba(255,255,255,.95);border-color:#e6d9c9;border-radius:18px 18px 18px 7px}.next-card{background:rgba(255,255,255,.88);border-color:#d2e5cd}
.notebook-summary{border-radius:22px;background:rgba(255,255,255,.95);margin-top:16px;margin-bottom:4px}.asset-summary>div{min-height:126px;padding:18px 16px}.asset-summary .label{font-size:14px}.asset-summary .value{font-size:clamp(20px,3.1vw,31px)}.asset-summary .note{font-size:12px}.summary-loan .value{color:#3f7c45}.summary-stocks .value{color:#594ab5}.summary-nisa .value{color:#d96f1b}
.section-title{margin:22px 0 0;padding:10px 13px;gap:9px;color:#3f352e;background:rgba(255,254,250,.82);border:1px solid rgba(221,208,193,.90);border-bottom:0;border-radius:19px 19px 0 0;font-size:19px;font-weight:800;box-shadow:0 -2px 7px rgba(93,68,45,.04)}.section-title+.card{border-radius:0 0 21px 21px}.section-title .circle-icon{width:34px;height:34px;font-size:17px;box-shadow:0 2px 5px rgba(61,45,33,.14)}
.kpi-line{border-color:rgba(183,168,149,.42)}.kpi-line span{color:#776c63}.btn{border-radius:13px;box-shadow:0 3px 7px rgba(82,62,45,.10)}.btn.primary{background:linear-gradient(135deg,#5c9d58,#4b874a)}.btn.purple{background:linear-gradient(135deg,#7463ce,#5e4fb2)}.btn.orange{background:linear-gradient(135deg,#f0933e,#dc731c)}.btn.secondary{background:linear-gradient(135deg,#5698d1,#387ab7)}.btn.outline{background:rgba(255,254,250,.92)}.notice{border-radius:14px}.stock-card{border-color:#ddd5f6;background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(246,242,255,.94))}
.bottom-nav{width:min(1120px,100%);padding-left:max(15px,env(safe-area-inset-left));padding-right:max(15px,env(safe-area-inset-right));background:rgba(255,253,248,.96);border-top-color:#d9cdbd}.nav-item{border-radius:14px}.nav-item.active{color:var(--loan);background:rgba(237,247,234,.95)}.app-modal .modal-inner{background:repeating-linear-gradient(0deg,transparent 0 30px,rgba(143,174,196,.10) 31px 32px),#fffdf8}.intro-hero .mascot-art{width:145px;height:118px}
@media(max-width:720px){.app-shell{padding-left:42px;padding-right:12px;border-left:0;border-right:0}.app-shell::before{left:1px;width:34px;top:78px}.app-shell::after{right:56px;width:85px;height:16px;top:7px}.topbar{min-height:80px;padding-top:9px}.brand-mascot{display:grid;width:47px;height:47px;border-radius:14px}.brand-title{font-size:15px}#topSubtitle{font-size:10px}.page-head{min-height:auto;padding:12px 13px}.page-head h2{font-size:25px}.page-kicker{font-size:10px}.asset-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.asset-summary>div{min-height:106px;padding:13px 8px;gap:5px}.asset-summary>div+div{border-left:1px dashed rgba(173,160,145,.5);border-top:0}.asset-summary .label{font-size:11px;align-items:flex-start}.asset-summary .value{font-size:16px;line-height:1.2}.asset-summary .note{font-size:10px;line-height:1.35}.home-hero{padding:15px;min-height:169px}.hero-copy h3{font-size:19px}.hero-copy p{font-size:13px}.mascot-art{width:102px;height:88px}.speech-wrap{display:block;margin-top:10px}.text-button{display:block;margin-top:4px}.section-title{margin-top:18px;font-size:17px;padding:8px 10px}.section-title .circle-icon{width:31px;height:31px}.card{padding:15px}.grid.two,.grid.three{grid-template-columns:1fr}.profile-grid{grid-template-columns:1fr}.intro-hero{display:block}.intro-hero .mascot-art{width:140px;height:110px;margin:0 auto 8px}}
@media(max-width:390px){.app-shell{padding-left:37px;padding-right:8px}.app-shell::before{left:0;width:29px}.brand-mascot{display:none}.brand-title{font-size:14px}.asset-summary .value{font-size:14px}.asset-summary .label{font-size:10px}}


/* =========================================================
   Ver0.4.1 — PCダッシュボード強化 / キャラクター発話吹き出し
   ========================================================= */
.desktop-nav { display:none; }

.home-dashboard-grid { display:grid; gap:14px; }
.home-hero-dashboard { min-height:0; }
.hero-label { display:inline-flex; align-items:center; gap:5px; margin-bottom:7px; color:#5d914e; font-size:11px; font-weight:800; letter-spacing:.06em; }
.hero-label::before { content:"●"; color:#9bc779; font-size:10px; }
.hero-shortcuts { display:flex; gap:7px; flex-wrap:wrap; margin-top:15px; }
.mini-action { border:1px solid #e4d9cb; border-radius:999px; background:rgba(255,255,255,.9); padding:8px 10px; color:#665d55; font-size:12px; font-weight:800; }
.mini-action.loan { color:var(--loan); border-color:#cfe4c9; }
.mini-action.stocks { color:var(--stocks); border-color:#dcd5f5; }
.mini-action.nisa { color:var(--nisa); border-color:#f1d5b4; }
.today-board { padding:17px; }
.module-head { display:flex; align-items:center; gap:9px; min-width:0; }
.module-head h3 { margin:0; font-size:19px; line-height:1.2; }
.module-head small { display:block; color:#877b70; font-size:10px; font-weight:800; letter-spacing:.1em; line-height:1; margin-bottom:3px; }
.module-icon { width:35px; height:35px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%; color:#fff; font-size:17px; box-shadow:0 2px 6px rgba(61,45,33,.16); }
.module-head.green .module-icon { background:var(--loan); }
.module-head.purple .module-icon { background:var(--stocks); }
.module-head.orange .module-icon { background:var(--nisa); }
.module-head.blue .module-icon { background:var(--check); }
.module-head.green h3 { color:var(--loan); }
.module-head.purple h3 { color:var(--stocks); }
.module-head.orange h3 { color:var(--nisa); }
.module-head.blue h3 { color:var(--check); }
.module-lead { margin:9px 0 10px; color:var(--muted); font-size:13px; line-height:1.55; }
.task-list { display:grid; gap:7px; }
.task-row { width:100%; padding:9px 7px; display:grid; grid-template-columns:27px minmax(0,1fr) 16px; gap:7px; align-items:center; border:0; border-radius:12px; background:rgba(255,255,255,.78); text-align:left; color:var(--ink); }
.task-row:hover { background:#fff; }
.task-row .task-icon { width:25px; height:25px; border-radius:9px; display:grid; place-items:center; color:#fff; font-size:13px; }
.task-loan .task-icon { background:var(--loan); }.task-stocks .task-icon { background:var(--stocks); }.task-nisa .task-icon { background:var(--nisa); }.task-check .task-icon { background:var(--check); }
.task-row b { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:12px; }
.task-row small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-top:2px; color:var(--muted); font-size:10px; }
.task-row i { color:#7891a1; font-size:20px; font-style:normal; line-height:1; }
.task-empty { display:grid; gap:3px; padding:13px 5px; color:var(--muted); font-size:12px; }
.task-empty b { color:#426b47; }
.review-mini { display:grid; grid-template-columns:1fr auto; gap:6px 10px; padding-top:11px; margin-top:10px; border-top:1px dashed rgba(141,168,190,.44); color:#6a7b87; font-size:11px; }
.review-mini b { color:#3c78b8; font-size:12px; }
.asset-summary-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
.asset-summary-four .summary-net .value { color:#377ab7; }
.dashboard-detail-grid { display:grid; gap:14px; }
.dashboard-panel { min-width:0; padding:17px; border:1px solid rgba(220,206,188,.9); border-radius:21px; background:rgba(255,254,250,.94); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden; }
.panel-loan { background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(240,250,237,.95)); border-color:#d4e7cf; }
.panel-stocks { background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(246,243,255,.95)); border-color:#ddd5f6; }
.panel-nisa { background:linear-gradient(135deg,rgba(255,255,255,.97),rgba(255,247,235,.97)); border-color:#f5d8bb; }
.module-link { margin-left:auto; flex:0 0 auto; border:1px solid currentColor; border-radius:999px; padding:6px 9px; background:rgba(255,255,255,.7); color:#777; font-size:11px; font-weight:800; }
.module-head.green .module-link { color:var(--loan); }.module-head.purple .module-link { color:var(--stocks); }.module-head.orange .module-link { color:var(--nisa); }.module-head.blue .module-link { color:var(--check); }
.metric-stack { display:grid; grid-template-columns:1fr; margin:11px 0 10px; }
.metric-stack > div { display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px dashed rgba(178,164,146,.48); }
.metric-stack > div:last-child { border-bottom:0; }
.metric-stack span { color:var(--muted); font-size:12px; }
.metric-stack b { color:#315c35; font-size:18px; white-space:nowrap; text-align:right; }
.compact-notice { display:grid; gap:3px; padding:10px 11px; margin-top:1px; border:1px solid transparent; border-radius:14px; font-size:12px; line-height:1.42; }
.compact-notice b { font-size:12px; }.compact-notice span { color:#70665d; }
.compact-notice.info { background:#eff7ff; border-color:#d7e7f7; }.compact-notice.good { background:#eef8ed; border-color:#d5ead1; }.compact-notice.warn { background:#fff3e6; border-color:#f4d6ae; }
.dashboard-action { margin-top:auto; width:100%; }
.stocks-dashboard-value { display:grid; gap:4px; padding:12px 0 8px; }
.stocks-dashboard-value span { color:var(--muted); font-size:12px; }
.stocks-dashboard-value b { color:#5646ae; font-size:24px; line-height:1.1; }
.stocks-dashboard-value em { font-style:normal; font-size:12px; font-weight:800; }
.holding-mini-list { display:grid; gap:5px; margin:4px 0 11px; min-height:78px; }
.holding-mini-list > div:not(.holding-empty) { display:flex; justify-content:space-between; gap:10px; border-bottom:1px dashed rgba(151,135,198,.3); padding:5px 0; font-size:12px; }
.holding-mini-list span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.holding-mini-list b { white-space:nowrap; color:#5547a7; }
.holding-empty { display:flex; align-items:center; height:75px; color:#746b83; font-size:12px; line-height:1.5; }
.nisa-dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 0 10px; }
.nisa-dashboard-grid > div { border:1px solid rgba(235,190,137,.48); border-radius:14px; background:rgba(255,255,255,.72); padding:10px; }
.nisa-dashboard-grid span { display:block; color:var(--muted); font-size:11px; }.nisa-dashboard-grid b { display:block; margin-top:4px; color:#d66e1a; font-size:17px; white-space:nowrap; }
.nisa-score-line { display:flex; justify-content:space-between; gap:8px; align-items:center; padding:0 0 8px; color:var(--muted); font-size:12px; }
.nisa-score-line b { font-size:16px; letter-spacing:.04em; }
.review-board { margin-top:14px; padding:17px; }
.review-grid { display:grid; gap:9px; margin-top:13px; }
.review-grid > div { display:flex; align-items:center; gap:8px; min-width:0; padding:9px; border:1px solid rgba(182,204,226,.52); border-radius:14px; background:rgba(255,255,255,.75); }
.review-grid p { display:grid; gap:2px; margin:0; min-width:0; }
.review-grid b { font-size:12px; }.review-grid small { color:var(--muted); font-size:10px; line-height:1.4; }
.review-icon { width:27px; height:27px; flex:0 0 auto; display:grid; place-items:center; border-radius:9px; color:#fff; font-size:13px; }
.review-icon.loan { background:var(--loan); }.review-icon.stocks { background:var(--stocks); }.review-icon.nisa { background:var(--nisa); }.review-icon.check { background:var(--check); }

@media (min-width:901px) {
  .app-shell { max-width:1360px; padding:0 34px 40px 76px; }
  .app-shell::before { left:13px; width:44px; top:92px; bottom:24px; }
  .topbar { min-height:84px; padding:10px 2px 7px; }
  .brand-mascot { width:55px; height:55px; }
  .brand-title { font-size:23px; }
  .content { padding:15px 0 12px; }
  .desktop-nav { display:flex; align-items:center; justify-content:flex-end; gap:7px; margin:0 2px 8px; padding:0 0 9px; border-bottom:1px solid rgba(211,197,178,.54); }
  .desktop-nav-item { border:1px solid rgba(221,209,194,.78); background:rgba(255,255,255,.72); border-radius:11px; padding:7px 11px; color:#72675e; font-size:12px; font-weight:800; }
  .desktop-nav-item span { margin-right:4px; font-size:14px; }
  .desktop-nav-item.active { color:var(--loan); border-color:#cfe3c9; background:#f1f8ef; }
  .desktop-nav-item:hover { transform:translateY(-1px); background:#fff; }
  .bottom-nav { display:none; }
  .toast { bottom:25px; }
  .page-head { min-height:78px; margin-bottom:14px; padding:11px 16px; }
  .page-head h2 { font-size:30px; }
  .page-head p { margin-top:4px; }
  .home-dashboard-grid { grid-template-columns:minmax(0,1.55fr) minmax(338px,.85fr); gap:15px; }
  .home-hero-dashboard { min-height:242px; display:grid; grid-template-columns:minmax(0,1fr) 340px; align-items:stretch; gap:14px; padding:19px 21px; }
  .hero-copy { padding:7px 0 0; }
  .hero-copy h3 { font-size:25px; max-width:480px; }
  .hero-copy p { font-size:14px; max-width:480px; }
  .hero-mascot-zone { position:relative; min-height:194px; }
  .mascot-home-button { position:absolute; right:-2px; bottom:-2px; z-index:3; }
  .mascot-home-button .mascot-art { width:177px; height:150px; }
  .speech-anchor { position:absolute; left:0; bottom:21px; width:226px; z-index:4; }
  .speech-from-mascot { max-width:226px; min-height:78px; border-radius:18px 18px 7px 18px; font-size:13px; padding:11px 12px; }
  .speech-from-mascot::before { left:auto; right:-7px; bottom:22px; border-left:0; border-bottom:0; border-right:1px solid #e6d9c9; border-top:1px solid #e6d9c9; }
  .speech-change { margin-top:4px; }
  .today-board { min-height:242px; }
  .asset-summary-four { margin-top:15px; grid-template-columns:repeat(4,minmax(0,1fr)); }
  .asset-summary-four > div { min-height:113px; padding:14px 15px; }
  .asset-summary-four .value { font-size:clamp(19px,2.05vw,29px); }
  .dashboard-detail-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-top:14px; }
  .dashboard-panel { min-height:316px; padding:16px; }
  .review-board { margin-top:15px; padding:15px 17px; }
  .review-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
  .review-grid > div { min-height:76px; padding:9px; align-items:flex-start; }
  .review-grid small { font-size:10px; }
}

@media (min-width:721px) and (max-width:900px) {
  .desktop-nav { display:none; }
  .home-dashboard-grid { grid-template-columns:1.25fr .9fr; }
  .asset-summary-four { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .asset-summary-four > div { min-height:108px; padding:12px 10px; }
  .asset-summary-four .label { font-size:11px; }
  .asset-summary-four .value { font-size:17px; }
  .dashboard-detail-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .panel-nisa { grid-column:span 2; }
  .review-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero-mascot-zone { position:relative; min-height:160px; }
  .mascot-home-button { position:absolute; right:0; bottom:0; }
  .speech-anchor { position:absolute; left:0; bottom:18px; width:180px; z-index:4; }
  .speech-from-mascot::before { left:auto; right:-7px; bottom:18px; border-left:0; border-bottom:0; border-right:1px solid #e6d9c9; border-top:1px solid #e6d9c9; }
}

@media (max-width:720px) {
  .desktop-nav { display:none!important; }
  .home-dashboard-grid { grid-template-columns:1fr; gap:13px; }
  .home-hero-dashboard { display:block; min-height:260px; }
  .hero-copy { padding-right:4px; }
  .hero-shortcuts { gap:5px; margin-top:10px; }
  .mini-action { font-size:10px; padding:6px 8px; }
  .hero-mascot-zone { position:relative; min-height:111px; margin-top:1px; }
  .mascot-home-button { position:absolute; right:-3px; bottom:-1px; z-index:3; }
  .mascot-home-button .mascot-art { width:112px; height:95px; }
  .speech-anchor { position:absolute; left:0; right:95px; bottom:13px; z-index:4; }
  .speech-from-mascot { max-width:none; min-height:65px; padding:9px 10px; font-size:12px; line-height:1.45; border-radius:16px 16px 6px 16px; }
  .speech-from-mascot::before { left:auto; right:-7px; bottom:18px; border-left:0; border-bottom:0; border-right:1px solid #e6d9c9; border-top:1px solid #e6d9c9; }
  .speech-change { margin-top:2px; }
  .today-board { padding:14px; }
  .asset-summary-four { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .asset-summary-four > div { min-height:96px; padding:11px 9px; }
  .asset-summary-four > div + div { border-left:1px dashed rgba(173,160,145,.5); border-top:0; }
  .asset-summary-four > div:nth-child(odd) { border-left:0; }
  .asset-summary-four > div:nth-child(n+3) { border-top:1px dashed rgba(173,160,145,.5); }
  .asset-summary-four .label { font-size:10px; }
  .asset-summary-four .value { font-size:16px; }
  .dashboard-detail-grid { grid-template-columns:1fr; gap:12px; margin-top:12px; }
  .dashboard-panel { padding:15px; min-height:0; }
  .module-head h3 { font-size:18px; }
  .module-link { padding:5px 8px; font-size:10px; }
  .review-board { margin-top:12px; padding:14px; }
  .review-grid { grid-template-columns:1fr; margin-top:10px; }
}


/* =========================================================
   Ver0.4.2 — スマホ背景・下部ナビゲーション修正
   - リングは左上だけに表示し、縦に続く黒い線を解消
   - 下部ナビの高さを固定し、最終カード下の空き領域を縮小
   ========================================================= */
.app-shell::before {
  top: 5px;
  bottom: auto;
  left: 4px;
  width: 54px;
  height: 158px;
  z-index: 2;
  opacity: .96;
  background: none left top / 54px 158px no-repeat;
}
.app-shell::after {
  position: absolute;
  top: 9px;
}
.app-shell > * { z-index: 1; }

@media (max-width:720px) {
  .app-shell {
    /* 下部ナビ分だけを確保。従来の大きな余白をなくす。 */
    padding-bottom: calc(70px + env(safe-area-inset-bottom));
    background:
      linear-gradient(90deg, transparent 0 55px, var(--notebook-margin) 55px 57px, transparent 57px),
      repeating-linear-gradient(0deg, transparent 0 31px, var(--notebook-line) 32px 33px),
      var(--paper);
  }
  .app-shell::before {
    top: 4px;
    left: 0;
    width: 49px;
    height: 145px;
    background-size: 49px 145px;
  }
  .app-shell::after {
    top: 8px;
    right: 54px;
    width: 82px;
    height: 16px;
  }
  .content { padding-bottom: 4px; }
  .bottom-nav {
    left: 0;
    right: 0;
    width: 100%;
    height: calc(66px + env(safe-area-inset-bottom));
    min-height: calc(66px + env(safe-area-inset-bottom));
    padding: 4px 7px calc(4px + env(safe-area-inset-bottom));
    transform: none;
    align-items: stretch;
  }
  .nav-item {
    min-height: 0;
    height: 58px;
    gap: 2px;
    padding: 4px 0 3px;
  }
  .nav-item span { font-size: 19px; }
  .nav-item b {
    display: block;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: clip;
    font-size: 9px;
    line-height: 1.1;
    letter-spacing: -.055em;
  }
  .toast { bottom: calc(74px + env(safe-area-inset-bottom)); }
}

@media (max-width:390px) {
  .app-shell { padding-bottom: calc(68px + env(safe-area-inset-bottom)); }
  .bottom-nav { height: calc(64px + env(safe-area-inset-bottom)); min-height: calc(64px + env(safe-area-inset-bottom)); padding-left: 4px; padding-right: 4px; }
  .nav-item { height: 56px; }
  .nav-item span { font-size: 18px; }
  .nav-item b { font-size: 8.5px; }
}

/* =========================================================
   Ver0.4.3 — 和紙ノート強化・マスコット多パターン化
   ========================================================= */
:root {
  --paper: #fbf7ee;
  --paper-warm: #f8f2e7;
  --paper-fiber: rgba(179, 158, 127, 0.10);
  --paper-fiber-light: rgba(255,255,255,0.22);
}

html {
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,.44), transparent 28%),
    radial-gradient(circle at 86% 16%, rgba(237,222,199,.34), transparent 26%),
    linear-gradient(180deg, #f6f0e2 0%, #f2ebdd 100%);
}
body {
  background:
    radial-gradient(circle at 14% 12%, rgba(255,255,255,.42), transparent 24%),
    radial-gradient(circle at 82% 18%, rgba(228,215,193,.22), transparent 22%),
    linear-gradient(180deg, #f8f2e7 0%, #f5efe3 100%);
}
.app-shell {
  background:
    linear-gradient(90deg, transparent 0 64px, rgba(214, 166, 166, 0.26) 64px 66px, transparent 66px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(176, 199, 219, 0.34) 31px 33px),
    none left top / 320px 320px repeat,
    linear-gradient(180deg, rgba(255,255,255,.42), rgba(245,236,221,.32)),
    var(--paper);
}
.app-shell::before {
  filter: drop-shadow(0 2px 1px rgba(109,90,67,.15));
}
.topbar,
.page-head,
.card,
.home-hero,
.dashboard-panel,
.asset-summary,
.notebook-summary {
  position: relative;
}
.page-head > *,
.card > *,
.home-hero > *,
.dashboard-panel > *,
.asset-summary > * {
  position: relative;
  z-index: 1;
}
.page-head::before,
.card::before,
.home-hero::before,
.dashboard-panel::before,
.asset-summary::before {
  content: "";
  position: absolute;
  top: 12px;
  right: 18px;
  width: 92px;
  height: 18px;
  transform: rotate(5deg);
  background: linear-gradient(180deg, rgba(255,255,255,.58), rgba(242,238,231,.36));
  border: 1px solid rgba(206, 196, 181, .72);
  box-shadow: 0 1px 4px rgba(94,76,57,.08);
  opacity: .58;
  pointer-events: none;
  z-index: 0;
}
.card:nth-of-type(2n)::before,
.dashboard-panel:nth-of-type(2n)::before,
.asset-summary::before {
  right: auto;
  left: 20px;
  transform: rotate(-5deg);
}
.page-head::before {
  right: 28px;
  width: 104px;
  opacity: .50;
}
.home-hero::before {
  top: 18px;
}
.page-head {
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,250,241,.72)),
    none left top / 280px 280px repeat;
}
.card,
.dashboard-panel,
.asset-summary,
.home-hero {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,252,246,.72)),
    none;
  background-size: auto, 280px 280px;
}
.page-head.has-mascot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding-right: 18px;
}
.page-head-side {
  display: grid;
  gap: 10px;
  justify-items: end;
  align-items: center;
}
.page-head-mascot {
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.page-head-mascot-image {
  width: 74px;
  height: 74px;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(84,61,41,.08));
}
.bottom-nav {
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: none;
  padding-left: max(12px, env(safe-area-inset-left));
  padding-right: max(12px, env(safe-area-inset-right));
  background:
    linear-gradient(180deg, rgba(255,253,248,.94), rgba(250,245,236,.98)),
    none left top / 260px 260px repeat;
  backdrop-filter: blur(18px);
}
.nav-item b {
  font-size: 10px;
}
.mascot-variant-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.mascot-sticker {
  margin: 0;
  padding: 10px 10px 8px;
  border-radius: 18px;
  border: 1px solid rgba(226, 214, 197, .92);
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,252,246,.76)),
    none left top / 220px 220px repeat;
  text-align: center;
  box-shadow: 0 4px 12px rgba(98,74,48,.06);
}
.mascot-sticker-image {
  width: 78px;
  height: 78px;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px;
}
.mascot-sticker figcaption {
  font-size: 12px;
  font-weight: 700;
  color: #6b6057;
}
@media (min-width: 721px) {
  .app-shell {
    background:
      linear-gradient(90deg, transparent 0 76px, rgba(214, 166, 166, 0.24) 76px 78px, transparent 78px),
      repeating-linear-gradient(0deg, transparent 0 31px, rgba(176, 199, 219, 0.34) 31px 33px),
      none left top / 340px 340px repeat,
      linear-gradient(180deg, rgba(255,255,255,.42), rgba(245,236,221,.32)),
      var(--paper);
  }
}
@media (max-width: 720px) {
  .app-shell {
    background:
      linear-gradient(90deg, transparent 0 56px, rgba(214, 166, 166, 0.24) 56px 58px, transparent 58px),
      repeating-linear-gradient(0deg, transparent 0 31px, rgba(176, 199, 219, 0.32) 31px 33px),
      none left top / 260px 260px repeat,
      linear-gradient(180deg, rgba(255,255,255,.42), rgba(245,236,221,.32)),
      var(--paper);
  }
  .page-head.has-mascot {
    grid-template-columns: 1fr;
  }
  .page-head-side {
    grid-auto-flow: column;
    justify-content: space-between;
    justify-items: start;
  }
  .page-head-mascot {
    width: 70px;
    height: 70px;
    border-radius: 18px;
  }
  .page-head-mascot-image {
    width: 58px;
    height: 58px;
  }
  .page-head::before,
  .card::before,
  .home-hero::before,
  .dashboard-panel::before,
  .asset-summary::before {
    width: 76px;
    height: 14px;
    top: 10px;
    right: 14px;
  }
  .card:nth-of-type(2n)::before,
  .dashboard-panel:nth-of-type(2n)::before,
  .asset-summary::before {
    left: 12px;
  }
  .nav-item b { font-size: 8.8px; }
}


/* =========================================================
   Ver0.4.4 — モバイル表示・和紙背景・ノートリング修正
   ・黒い波模様を完全に撤去
   ・リングは左上だけの専用SVG
   ・テープは各カードに貼る装飾（固定しない）
   ・下部メニューは全端末で画面下に固定
   ========================================================= */

html,
body {
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 14% 7%, rgba(255,255,255,.54), transparent 24%),
    radial-gradient(circle at 89% 18%, rgba(229,215,192,.24), transparent 26%),
    #f4eddf !important;
}

body {
  background:
    radial-gradient(circle at 14% 7%, rgba(255,255,255,.54), transparent 24%),
    radial-gradient(circle at 89% 18%, rgba(229,215,192,.24), transparent 26%),
    #f4eddf !important;
}

/* 和紙の紙面。SVG内の線には fill="none" を指定しており、黒い波模様は発生しない。 */
.app-shell {
  width: 100%;
  min-height: 100dvh;
  padding: 0 28px calc(100px + env(safe-area-inset-bottom)) 62px;
  background:
    linear-gradient(90deg, transparent 0 62px, rgba(220,163,163,.22) 62px 64px, transparent 64px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(160,188,210,.26) 31px 32px),
    none 0 0 / 360px 360px repeat,
    #fbf7ee !important;
  background-blend-mode: normal;
}

/* 右上に追随していたテープは廃止 */
.app-shell::after,
.topbar::after {
  display: none !important;
}

/* 参考画面に寄せた、紙の左上だけにある綴じリング */
.app-shell::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -2px;
  width: 72px;
  height: 186px;
  background: none left top / 72px 186px no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none;
  z-index: 4;
}

/* テープは各項目の上端に貼る。スクロールに追随する固定装飾にはしない。 */
.page-head,
.card,
.home-hero,
.dashboard-panel,
.asset-summary,
.notebook-summary {
  isolation: isolate;
  overflow: hidden;
}

.page-head::before,
.card::before,
.home-hero::before,
.dashboard-panel::before,
.asset-summary::before,
.notebook-summary::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 11px !important;
  right: 17px !important;
  left: auto !important;
  width: 74px !important;
  height: 17px !important;
  transform: rotate(5deg) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(235,228,216,.31)) !important;
  border: 1px solid rgba(196,184,165,.50) !important;
  border-radius: 1px;
  box-shadow: 0 1px 4px rgba(84,68,49,.08) !important;
  opacity: .48 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.card:nth-of-type(even)::before,
.dashboard-panel:nth-of-type(even)::before,
.asset-summary::before {
  top: 12px !important;
  left: 17px !important;
  right: auto !important;
  transform: rotate(-5deg) !important;
}

.page-head > *,
.card > *,
.home-hero > *,
.dashboard-panel > *,
.asset-summary > *,
.notebook-summary > * {
  position: relative;
  z-index: 1;
}

/* カード・見出しにも和紙を薄く重ねる。背景主張を強くしすぎない。 */
.page-head {
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,250,241,.80)),
    none 0 0 / 360px 360px repeat !important;
}
.card,
.home-hero,
.dashboard-panel,
.asset-summary,
.notebook-summary {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.87), rgba(255,252,246,.78)),
    none !important;
  background-size: auto, 360px 360px !important;
  background-repeat: no-repeat, repeat !important;
}

/* 下部メニューは、画面幅に関係なく常時表示する。 */
.bottom-nav {
  display: grid !important;
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: calc(72px + env(safe-area-inset-bottom)) !important;
  height: calc(72px + env(safe-area-inset-bottom)) !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  padding: 5px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  border-top: 1px solid rgba(211,198,179,.92) !important;
  box-shadow: 0 -8px 22px rgba(77,61,43,.13) !important;
  background:
    linear-gradient(180deg, rgba(255,253,248,.98), rgba(248,242,232,.99)),
    none 0 0 / 300px 300px repeat !important;
  backdrop-filter: blur(12px);
  z-index: 9999 !important;
}

.nav-item {
  min-height: 0 !important;
  height: 59px !important;
  padding: 4px 1px 3px !important;
  gap: 2px !important;
}
.nav-item span { font-size: 21px !important; }
.nav-item b {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: 9px !important;
  line-height: 1.12 !important;
  letter-spacing: -.045em !important;
}

/* PCでも固定メニューを残し、コンテンツを隠さない。 */
.content {
  padding-bottom: 14px !important;
}
.app-shell {
  padding-bottom: calc(100px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 720px) {
  .app-shell {
    max-width: none !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    padding: 0 12px calc(92px + env(safe-area-inset-bottom)) !important;
    background:
      linear-gradient(90deg, transparent 0 56px, rgba(220,163,163,.22) 56px 58px, transparent 58px),
      repeating-linear-gradient(0deg, transparent 0 31px, rgba(160,188,210,.25) 31px 32px),
      none 0 0 / 280px 280px repeat,
      #fbf7ee !important;
  }

  .app-shell::before {
    top: 8px !important;
    left: -20px !important;
    width: 74px !important;
    height: 170px !important;
    background-size: 74px 170px !important;
  }

  .topbar {
    min-height: 78px;
  }

  .page-head::before,
  .card::before,
  .home-hero::before,
  .dashboard-panel::before,
  .asset-summary::before,
  .notebook-summary::before {
    top: 9px !important;
    right: 12px !important;
    width: 68px !important;
    height: 13px !important;
    opacity: .40 !important;
  }

  .card:nth-of-type(even)::before,
  .dashboard-panel:nth-of-type(even)::before,
  .asset-summary::before {
    left: 12px !important;
    right: auto !important;
  }

  .bottom-nav {
    min-height: calc(70px + env(safe-area-inset-bottom)) !important;
    height: calc(70px + env(safe-area-inset-bottom)) !important;
    padding-top: 4px !important;
  }
  .nav-item {
    height: 57px !important;
  }
  .nav-item span { font-size: 19px !important; }
  .nav-item b { font-size: 8.7px !important; }
}

@media (max-width: 390px) {
  .bottom-nav {
    min-height: calc(67px + env(safe-area-inset-bottom)) !important;
    height: calc(67px + env(safe-area-inset-bottom)) !important;
  }
  .nav-item { height: 54px !important; }
  .nav-item span { font-size: 18px !important; }
  .nav-item b { font-size: 8.2px !important; }
}

/* =========================================================
   Ver0.4.5 — 表示不具合を根本から分離して修正
   ・旧和紙SVGを画面の背景・カード背景から完全に排除
   ・リングは新しい短い左上専用のコイルのみ
   ・固定テープを廃止し、各カードの半透明テープだけを残す
   ・下部メニューは常に viewport 下端へ固定
   ========================================================= */

html,
body {
  width: 100% !important;
  min-height: 100% !important;
  overflow-x: hidden !important;
  background: #f3ecde !important;
}

body {
  background:
    radial-gradient(circle at 11% 8%, rgba(255,255,255,.58) 0 1px, transparent 1.4px) 0 0/23px 29px,
    radial-gradient(circle at 77% 36%, rgba(185,164,131,.10) 0 .85px, transparent 1.25px) 0 0/31px 37px,
    linear-gradient(180deg, #f8f2e7 0%, #f3ebdc 100%) !important;
}

/* 黒波の発生源になっていた画像テクスチャを使わない、淡い和紙風の紙面。 */
#app.app-shell {
  width: 100% !important;
  min-height: 100dvh !important;
  max-width: 1360px !important;
  margin: 0 auto !important;
  padding: 0 28px calc(112px + env(safe-area-inset-bottom)) 82px !important;
  position: relative !important;
  isolation: isolate !important;
  background:
    radial-gradient(circle at 15% 16%, rgba(255,255,255,.52) 0 1px, transparent 1.5px) 0 0/21px 27px,
    radial-gradient(circle at 78% 54%, rgba(194,174,143,.11) 0 .8px, transparent 1.25px) 0 0/29px 35px,
    linear-gradient(90deg, transparent 0 76px, rgba(221,163,163,.22) 76px 78px, transparent 78px),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(159,188,212,.25) 31px 32px),
    linear-gradient(180deg, #fcf8ef 0%, #f9f3e8 100%) !important;
  background-blend-mode: normal !important;
}

/* 旧背景層・旧固定テープを完全に止める。 */
#app.app-shell::after,
#app .topbar::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* 左上にだけ置く、短い立体コイル。縦線や大きな楕円の連続は使わない。 */
#app.app-shell::before {
  content: "" !important;
  position: absolute !important;
  inset: auto !important;
  top: 9px !important;
  left: -32px !important;
  width: 74px !important;
  height: 188px !important;
  display: block !important;
  background: url("./assets/notebook-rings-v0410-photo.png?v=0.4.11") left top / 74px 188px no-repeat !important;
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 35 !important;
}

/* テクスチャSVGをカードから完全に除去。 */
#app .page-head,
#app .card,
#app .home-hero,
#app .dashboard-panel,
#app .asset-summary,
#app .notebook-summary,
#app .summary-box,
#app .next-card,
#app .review-grid > div,
#app .nisa-dashboard-grid > div,
#app .bottom-nav {
  background-image: none !important;
}

#app .page-head {
  background: linear-gradient(180deg, rgba(255,253,248,.95), rgba(252,247,239,.92)) !important;
}
#app .card,
#app .dashboard-panel,
#app .asset-summary,
#app .notebook-summary,
#app .summary-box,
#app .next-card,
#app .review-grid > div,
#app .nisa-dashboard-grid > div {
  background-color: rgba(255,253,248,.93) !important;
}
#app .card.tone-green,
#app .panel-loan { background: linear-gradient(135deg, #fbfffb, #edf7eb) !important; }
#app .card.tone-purple,
#app .panel-stocks { background: linear-gradient(135deg, #fff, #f2efff) !important; }
#app .card.tone-orange,
#app .panel-nisa { background: linear-gradient(135deg, #fffdf8, #fff3e4) !important; }
#app .card.tone-blue { background: linear-gradient(135deg, #fff, #eff7ff) !important; }
#app .home-hero { background: linear-gradient(118deg, rgba(255,255,255,.96), rgba(245,249,242,.92)) !important; }

/* 各項目にだけ貼る半透明テープ。文字の上を避け、固定追随もしない。 */
#app .page-head,
#app .card,
#app .home-hero,
#app .dashboard-panel,
#app .asset-summary,
#app .notebook-summary {
  isolation: isolate !important;
  overflow: hidden !important;
}
#app .page-head::before,
#app .card::before,
#app .home-hero::before,
#app .dashboard-panel::before,
#app .asset-summary::before,
#app .notebook-summary::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 10px !important;
  right: 15px !important;
  left: auto !important;
  width: 80px !important;
  height: 14px !important;
  transform: rotate(5deg) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(232,224,210,.25)) !important;
  border: 1px solid rgba(195,184,168,.38) !important;
  border-radius: 1px !important;
  box-shadow: 0 1px 3px rgba(74,60,45,.06) !important;
  opacity: .36 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
#app .card:nth-of-type(even)::before,
#app .dashboard-panel:nth-of-type(even)::before {
  top: 11px !important;
  right: auto !important;
  left: 15px !important;
  transform: rotate(-5deg) !important;
}
#app .page-head > *,
#app .card > *,
#app .home-hero > *,
#app .dashboard-panel > *,
#app .asset-summary > *,
#app .notebook-summary > * {
  position: relative !important;
  z-index: 1 !important;
}

/* 固定ナビ。旧 @media の display:none より強い指定で、全画面幅で表示する。 */
#app .bottom-nav {
  display: grid !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  inset: auto 0 0 0 !important;
  transform: none !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: calc(72px + env(safe-area-inset-bottom)) !important;
  height: calc(72px + env(safe-area-inset-bottom)) !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  padding: 5px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)) !important;
  margin: 0 !important;
  border: 0 !important;
  border-top: 1px solid rgba(207,194,174,.92) !important;
  border-radius: 0 !important;
  box-shadow: 0 -7px 21px rgba(79,63,45,.13) !important;
  background: linear-gradient(180deg, rgba(255,253,248,.98), rgba(248,242,232,.99)) !important;
  z-index: 2147483000 !important;
}
#app .bottom-nav .nav-item {
  display: grid !important;
  visibility: visible !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 59px !important;
  padding: 4px 1px 3px !important;
  gap: 2px !important;
  align-content: center !important;
}
#app .bottom-nav .nav-item span { font-size: 20px !important; }
#app .bottom-nav .nav-item b {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: clip !important;
  font-size: 9px !important;
  line-height: 1.1 !important;
  letter-spacing: -.05em !important;
}
#app .content { padding-bottom: 18px !important; }

@media (max-width: 720px) {
  #app.app-shell {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 12px calc(98px + env(safe-area-inset-bottom)) 50px !important;
    background:
      radial-gradient(circle at 12% 13%, rgba(255,255,255,.50) 0 1px, transparent 1.45px) 0 0/20px 26px,
      radial-gradient(circle at 78% 52%, rgba(194,174,143,.10) 0 .75px, transparent 1.2px) 0 0/27px 33px,
      linear-gradient(90deg, transparent 0 56px, rgba(221,163,163,.22) 56px 58px, transparent 58px),
      repeating-linear-gradient(0deg, transparent 0 31px, rgba(159,188,212,.24) 31px 32px),
      linear-gradient(180deg, #fcf8ef 0%, #f9f3e8 100%) !important;
  }
  #app.app-shell::before {
    top: 8px !important;
    left: -26px !important;
    width: 62px !important;
    height: 160px !important;
    background-size: 62px 160px !important;
  }
  #app .topbar {
    min-height: 80px !important;
    padding-left: 46px !important;
  }
  #app .page-head::before,
  #app .card::before,
  #app .home-hero::before,
  #app .dashboard-panel::before,
  #app .asset-summary::before,
  #app .notebook-summary::before {
    top: 9px !important;
    right: 11px !important;
    width: 66px !important;
    height: 12px !important;
    opacity: .28 !important;
  }
  #app .card:nth-of-type(even)::before,
  #app .dashboard-panel:nth-of-type(even)::before {
    left: 11px !important;
  }
  #app .bottom-nav {
    min-height: calc(70px + env(safe-area-inset-bottom)) !important;
    height: calc(70px + env(safe-area-inset-bottom)) !important;
  }
  #app .bottom-nav .nav-item { height: 57px !important; }
  #app .bottom-nav .nav-item span { font-size: 19px !important; }
  #app .bottom-nav .nav-item b { font-size: 8.6px !important; }
}

@media (min-width: 901px) {
  #app.app-shell { padding-bottom: 112px !important; }
  #app .bottom-nav .nav-item b { font-size: 10px !important; }
}

/* Ver0.4.10: ring holes must stay visible; mascot square background must not appear. */
#app .page-head.has-mascot {
  padding-right: 12px !important;
}
#app .page-head-mascot,
#app .page-head-side .page-head-mascot,
#app .page-head-mascot-image,
#app .brand-mascot,
#app .mascot-home-button {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
#app .page-head-mascot {
  border-radius: 0 !important;
}
@media (max-width: 720px) {
  #app.app-shell {
    padding-left: 50px !important;
  }
  #app .topbar {
    padding-left: 46px !important;
  }
  #app .page-head,
  #app .card,
  #app .home-hero,
  #app .dashboard-panel,
  #app .notebook-summary,
  #app .asset-summary {
    margin-left: 1px !important;
  }
}

/* Ver0.4.10: mascot background removal and full body display */
#app .page-head-mascot,
#app .page-head-side .page-head-mascot {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}
#app .page-head-mascot-image {
  width: 86px !important;
  height: 86px !important;
  object-fit: contain !important;
  display: block !important;
  filter: drop-shadow(0 3px 5px rgba(84,61,41,.08)) !important;
}
#app .brand-mascot,
#app .brand-mascot img,
#app .mascot-home-button,
#app .mascot-home-button .mascot-art {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  object-fit: contain !important;
}
@media (max-width: 720px) {
  #app .page-head-mascot {
    width: 78px !important;
    height: 78px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  #app .page-head-mascot-image {
    width: 72px !important;
    height: 72px !important;
    object-fit: contain !important;
  }
}


/* Ver0.4.11: mascot asset cleanup, ring-hole visibility, title wrapping */
#app .page-head-mascot,
#app .page-head-side .page-head-mascot,
#app .page-head-mascot-image,
#app .brand-mascot,
#app .brand-mascot img,
#app .mascot-home-button,
#app .mascot-home-button .mascot-art {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}
#app .page-head-mascot {
  border-radius: 0 !important;
  overflow: visible !important;
}
#app .page-head-mascot-image {
  width: 82px !important;
  height: 82px !important;
  object-fit: contain !important;
  display: block !important;
}
#app .brand {
  min-width: 0 !important;
  overflow: visible !important;
}
#app .brand-copy {
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}
#app .brand-title {
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: keep-all !important;
  line-height: 1.08 !important;
}
#app #topSubtitle {
  overflow: visible !important;
  text-overflow: clip !important;
}
#app .hero-mascot-zone {
  min-height: 124px !important;
}
#app .mascot-home-button {
  right: -1px !important;
  bottom: -1px !important;
}
#app .mascot-home-button .mascot-art {
  width: 122px !important;
  height: 106px !important;
  object-fit: contain !important;
  display: block !important;
}
@media (max-width: 720px) {
  #app.app-shell {
    padding-left: 54px !important;
  }
  #app .topbar {
    min-height: 92px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    padding-left: 52px !important;
    align-items: flex-start !important;
  }
  #app .brand {
    align-items: flex-start !important;
    padding-top: 2px !important;
  }
  #app .brand-title {
    font-size: 13.5px !important;
  }
  #app #topSubtitle {
    font-size: 9.5px !important;
    white-space: nowrap !important;
  }
  #app .page-head,
  #app .card,
  #app .home-hero,
  #app .dashboard-panel,
  #app .notebook-summary,
  #app .asset-summary {
    margin-left: 4px !important;
  }
  #app .page-head-mascot {
    width: 74px !important;
    height: 74px !important;
  }
  #app .page-head-mascot-image {
    width: 68px !important;
    height: 68px !important;
  }
  #app .hero-mascot-zone {
    min-height: 126px !important;
    margin-top: 4px !important;
  }
  #app .mascot-home-button .mascot-art {
    width: 118px !important;
    height: 108px !important;
  }
}
@media (max-width: 390px) {
  #app.app-shell {
    padding-left: 50px !important;
    padding-right: 8px !important;
  }
  #app .topbar {
    padding-left: 48px !important;
  }
  #app .brand-title {
    font-size: 12.8px !important;
  }
  #app #topSubtitle {
    font-size: 9px !important;
  }
}


/* Ver0.4.12: mobile topbar stability, full mascot visibility, round ring holes */
#app .mobile-menu,
#app .icon-button,
#app .top-actions,
#app .brand-mascot {
  flex-shrink: 0 !important;
}
@media (max-width: 720px) {
  #app.app-shell {
    padding-left: 58px !important;
    padding-right: 10px !important;
  }
  #app.app-shell::before {
    top: 8px !important;
    left: -31px !important;
    width: 74px !important;
    height: 188px !important;
    background-size: 74px 188px !important;
  }
  #app .topbar {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    min-height: 96px !important;
    padding: 8px 0 8px 0 !important;
    overflow: visible !important;
  }
  #app .mobile-menu {
    display: grid !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
  }
  #app .brand {
    min-width: 0 !important;
    width: 100% !important;
    gap: 8px !important;
    align-items: center !important;
  }
  #app .brand-mascot {
    display: grid !important;
    width: 42px !important;
    height: 42px !important;
    padding-right: 0 !important;
  }
  #app .brand-copy {
    min-width: 0 !important;
    gap: 2px !important;
  }
  #app .brand-title {
    font-size: 11.6px !important;
    line-height: 1.06 !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }
  #app #topSubtitle {
    font-size: 8.4px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  #app .top-actions {
    display: flex !important;
    gap: 6px !important;
    align-items: center !important;
  }
  #app .icon-button {
    width: 40px !important;
    height: 40px !important;
    font-size: 20px !important;
  }
  #app .page-head,
  #app .card,
  #app .home-hero,
  #app .dashboard-panel,
  #app .notebook-summary,
  #app .asset-summary {
    margin-left: 8px !important;
  }
  #app .page-head-side {
    align-items: end !important;
  }
  #app .page-head-mascot {
    width: 76px !important;
    height: 76px !important;
    padding-top: 4px !important;
    overflow: visible !important;
  }
  #app .page-head-mascot-image {
    width: 64px !important;
    height: 64px !important;
    object-fit: contain !important;
    object-position: center 58% !important;
    transform: translateY(3px) !important;
  }
  #app .hero-mascot-zone {
    min-height: 132px !important;
    margin-top: 4px !important;
  }
  #app .mascot-home-button {
    right: 0 !important;
    bottom: 0 !important;
  }
  #app .mascot-home-button .mascot-art {
    width: 118px !important;
    height: 108px !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }
}
@media (max-width: 390px) {
  #app.app-shell {
    padding-left: 56px !important;
    padding-right: 8px !important;
  }
  #app.app-shell::before {
    left: -30px !important;
    width: 72px !important;
    height: 184px !important;
    background-size: 72px 184px !important;
  }
  #app .topbar {
    grid-template-columns: 38px minmax(0, 1fr) auto !important;
    column-gap: 6px !important;
    min-height: 94px !important;
  }
  #app .mobile-menu {
    width: 38px !important;
    height: 38px !important;
  }
  #app .brand-mascot {
    width: 40px !important;
    height: 40px !important;
  }
  #app .brand-title {
    font-size: 11px !important;
  }
  #app #topSubtitle {
    font-size: 8px !important;
  }
  #app .top-actions {
    gap: 5px !important;
  }
  #app .icon-button {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
  }
}


/* Ver0.4.13: final mobile header/rings/mascot visibility corrections */
#app .page-head {
  overflow: visible !important;
}
#app .page-head-side,
#app .page-head-mascot {
  overflow: visible !important;
}
#app .page-head-mascot-image {
  display: block !important;
}
@media (max-width: 720px) {
  #app.app-shell {
    padding-left: 66px !important;
    padding-right: 8px !important;
  }
  #app.app-shell::before {
    top: 8px !important;
    left: -18px !important;
    width: 78px !important;
    height: 198px !important;
    background-size: 78px 198px !important;
    z-index: 20 !important;
  }
  #app .topbar {
    display: grid !important;
    grid-template-columns: 36px 34px minmax(0,1fr) 82px !important;
    grid-template-areas: "menu mascot title actions" "menu mascot subtitle actions" !important;
    column-gap: 6px !important;
    align-items: center !important;
    min-height: 82px !important;
    padding: 6px 0 !important;
    overflow: visible !important;
  }
  #app .mobile-menu {
    grid-area: menu !important;
    width: 36px !important;
    height: 36px !important;
    margin: 0 !important;
  }
  #app .brand {
    display: contents !important;
  }
  #app .brand-mascot {
    grid-area: mascot !important;
    display: grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
  }
  #app .brand-mascot img {
    width: 34px !important;
    height: 34px !important;
    object-fit: contain !important;
  }
  #app .brand-copy {
    display: contents !important;
  }
  #app .brand-title {
    grid-area: title !important;
    font-size: 9.6px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    letter-spacing: -0.03em !important;
    align-self: end !important;
  }
  #app #topSubtitle {
    grid-area: subtitle !important;
    display: block !important;
    font-size: 7.6px !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    align-self: start !important;
  }
  #app .top-actions {
    grid-area: actions !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 6px !important;
    min-width: 82px !important;
  }
  #app .icon-button {
    width: 38px !important;
    height: 38px !important;
    font-size: 18px !important;
    flex: 0 0 38px !important;
  }
  #app .page-head,
  #app .card,
  #app .home-hero,
  #app .dashboard-panel,
  #app .notebook-summary,
  #app .asset-summary {
    margin-left: 16px !important;
  }
  #app .page-head.has-mascot {
    padding-right: 14px !important;
  }
  #app .page-head-mascot {
    width: 88px !important;
    height: 88px !important;
    padding-top: 0 !important;
  }
  #app .page-head-mascot-image {
    width: 70px !important;
    height: 70px !important;
    object-fit: contain !important;
    object-position: center center !important;
    transform: none !important;
  }
}
@media (max-width: 390px) {
  #app.app-shell {
    padding-left: 62px !important;
    padding-right: 6px !important;
  }
  #app.app-shell::before {
    left: -16px !important;
    width: 76px !important;
    height: 194px !important;
    background-size: 76px 194px !important;
  }
  #app .topbar {
    grid-template-columns: 34px 32px minmax(0,1fr) 78px !important;
    column-gap: 5px !important;
  }
  #app .mobile-menu {
    width: 34px !important;
    height: 34px !important;
  }
  #app .brand-mascot,
  #app .brand-mascot img {
    width: 32px !important;
    height: 32px !important;
  }
  #app .brand-title {
    font-size: 9.1px !important;
  }
  #app #topSubtitle {
    font-size: 7.2px !important;
  }
  #app .top-actions {
    min-width: 78px !important;
    gap: 4px !important;
  }
  #app .icon-button {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }
  #app .page-head,
  #app .card,
  #app .home-hero,
  #app .dashboard-panel,
  #app .notebook-summary,
  #app .asset-summary {
    margin-left: 14px !important;
  }
  #app .page-head-mascot {
    width: 84px !important;
    height: 84px !important;
  }
  #app .page-head-mascot-image {
    width: 68px !important;
    height: 68px !important;
  }
}

/* Ver0.5.0: market automation / prediction / notification / encrypted sync */
.feature-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}.feature-card-head h3{margin:0}.feature-card-head p{margin:4px 0 0}.btn-row.compact{gap:6px;flex-wrap:wrap;justify-content:flex-end}.feature-badge{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 9px;font-size:11px;font-weight:800;white-space:nowrap}.feature-badge.ok{color:#357b42;background:#edf8ed;border:1px solid #bfe0c0}.feature-badge.setup{color:#8f5d1f;background:#fff5e9;border:1px solid #f2d2a7}.feature-status-list{display:grid;gap:8px}.feature-status-list>div{display:flex;gap:10px;justify-content:space-between;align-items:flex-start;padding:8px 0;border-bottom:1px dashed rgba(168,151,129,.35);font-size:13px}.feature-status-list>div:last-child{border-bottom:0}.feature-status-list span{color:var(--muted)}.feature-status-list b{max-width:62%;text-align:right;word-break:break-word}.feature-url{font-size:11px}.feature-error{font-size:11px;color:#a84e4e}.feature-empty{min-height:86px;display:grid;place-items:center;text-align:center}.feature-stock-list{display:grid;gap:10px}.stock-item{border:1px solid rgba(217,203,186,.86);border-radius:16px;padding:13px;background:rgba(255,255,255,.62)}.stock-main{display:flex;gap:12px;justify-content:space-between;align-items:flex-start}.stock-main h4{margin:0 0 3px;font-size:16px}.stock-main p{margin:0;color:var(--muted);font-size:11px}.stock-price{text-align:right;display:grid;gap:2px}.stock-price b{font-size:17px}.stock-price span{font-size:11px}.stock-metrics{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0;font-size:12px;color:var(--muted)}.stock-metrics b{color:var(--ink);margin-left:4px}.stock-metrics .up,.stock-price .up,.up{color:#428640!important}.stock-metrics .down,.stock-price .down,.down{color:#bd5e5e!important}.nisa-item{border-color:rgba(239,179,105,.65)}.compact-list{display:grid;gap:8px}.compact-list>div{display:grid;gap:2px;padding:8px;border-radius:10px;background:rgba(255,255,255,.48)}.compact-list span{font-size:12px;color:var(--muted)}.news-list{display:grid;gap:8px}.news-item{display:grid;gap:3px;padding:10px 11px;border-radius:12px;border:1px solid rgba(202,218,236,.8);background:rgba(255,255,255,.58);color:var(--ink);text-decoration:none}.news-item:hover{background:#f4f8fd}.news-item b{font-size:13px}.news-item span{font-size:11px;color:var(--muted)}.prediction-main{display:grid;gap:6px;padding:14px;border-radius:16px;background:rgba(255,255,255,.68);border:1px solid rgba(203,191,240,.8)}.prediction-main>b{font-size:27px;color:#5b4eb1}.prediction-main small{color:var(--muted);font-size:11px}.feature-status-list+ .btn-row{margin-top:12px}.table-wrap table{min-width:680px}.advice-list{margin:8px 0 12px;padding-left:20px;line-height:1.75}.advice-list li{margin:2px 0}.gain.up{color:#43864a}.gain.down{color:#bd5e5e}.home-dashboard-grid .feature-status-list{font-size:12px}.home-dashboard-grid .feature-status-list>div{padding:5px 0}.feature-card-head .btn.small{padding:7px 10px;font-size:11px}
@media(max-width:720px){.feature-card-head{display:grid;gap:9px}.feature-card-head .btn-row.compact{justify-content:flex-start}.stock-main{align-items:flex-start}.stock-price b{font-size:15px}.stock-metrics{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}.feature-status-list>div{font-size:12px}.feature-url{font-size:10px}.prediction-main>b{font-size:23px}.table-wrap table{min-width:620px}}