:root {
  --pink:#ed6f91;
  --pink-dark:#b43f62;
  --pink-soft:#ffe4ec;
  --cream:#fffaf3;
  --ink:#60404b;
  --muted:#9b7b86;
  --line:#efdde3;
  --shadow:0 12px 32px rgba(173,91,116,.14);
  --shadow-soft:0 7px 20px rgba(173,91,116,.10);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  color:var(--ink);
  background:#fff7fa;
  font-synthesis:none;
}
* { box-sizing:border-box; }
html { background:#fff7fa; }
body { margin:0; min-height:100vh; background:
  radial-gradient(circle at 0 0, rgba(255,210,223,.64), transparent 28rem),
  radial-gradient(circle at 100% 15%, rgba(255,239,194,.72), transparent 24rem),
  linear-gradient(180deg,#fff1f7 0%,#fff9e9 48%,#eff9ff 100%); }
button,input,select { font:inherit; }
button { color:inherit; }
button:active { transform:scale(.98); }
.hidden { display:none!important; }

/* 起動画面 */
.splash {
  position:fixed;
  inset:0;
  z-index:100;
  overflow:hidden;
  background:#1b2535;
  cursor:pointer;
}
.splash-image {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.splash-bottom-fade {
  position:absolute;
  inset:auto 0 0;
  height:24%;
  background:linear-gradient(180deg,transparent,rgba(42,20,30,.18) 40%,rgba(42,20,30,.58));
  pointer-events:none;
}
#splashStart {
  position:absolute;
  z-index:2;
  left:50%;
  bottom:calc(24px + env(safe-area-inset-bottom));
  transform:translateX(-50%);
  width:min(calc(100% - 40px),420px);
  border:1px solid rgba(255,255,255,.72);
  border-radius:999px;
  padding:15px 22px;
  color:#734456;
  background:rgba(255,255,255,.94);
  
  font-weight:900;
  box-shadow:0 12px 28px rgba(33,16,23,.24);
}
#splashStart:active { transform:translateX(-50%) scale(.98); }
.splash.premium #splashStart {
  color:#6a4b13;
  background:rgba(255,248,213,.95);
  border-color:rgba(255,221,112,.86);
}

/* 初期設定 */
.setup,.lock { min-height:100vh; padding:calc(24px + env(safe-area-inset-top)) 18px calc(30px + env(safe-area-inset-bottom)); display:flex; align-items:center; justify-content:center; }
.setup-panel,.lock-panel { width:min(100%,540px); border:1px solid rgba(255,255,255,.9); background:rgba(255,255,255,.91);  border-radius:32px; box-shadow:0 20px 60px rgba(169,84,112,.20); padding:27px 22px; }
.setup-panel h1,.lock-panel h1 { margin:7px 0 8px; color:#a83c5e; font-size:27px; }
.setup-panel>p { margin:0 0 20px; color:var(--muted); line-height:1.7; font-size:14px; }
.setup-step { display:inline-flex; padding:7px 12px; border-radius:999px; background:#ffe5ed; color:#c34b6c; font-weight:900; font-size:13px; }
.setup-two { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.setup-submit { margin-top:8px; }

/* ロック */
.lock-panel { max-width:390px; text-align:center; }
.lock-icon { width:92px; height:92px; object-fit:cover; border-radius:26px; box-shadow:var(--shadow); }
.lock-panel p { margin:0; color:var(--muted); }
.lock-panel>small { display:block; margin-top:13px; color:#aa8c96; }
.pin-dots { display:flex; justify-content:center; gap:13px; margin:20px 0; }
.pin-dots i { width:15px; height:15px; border:2px solid #e69ab0; border-radius:50%; background:#fff; transition:.18s; }
.pin-dots i.on { background:#e66186; transform:scale(1.08); }
.keypad { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.keypad button { height:57px; border:0; border-radius:18px; background:#fff5f8; box-shadow:inset 0 0 0 1px #f4d9e2; font-size:21px; font-weight:900; }
.keypad button:disabled { visibility:hidden; }

/* アプリ共通 */
.app { width:min(100%,680px); min-height:100vh; margin:0 auto; padding:calc(14px + env(safe-area-inset-top)) 14px calc(100px + env(safe-area-inset-bottom)); }
.topbar { display:flex; align-items:center; justify-content:space-between; min-height:74px; padding:6px 4px 12px; }
.topbar span { color:#a84764; font-size:14px; font-weight:900; letter-spacing:.06em; }
.topbar h1 { margin:4px 0 0; font-size:24px; color:#8f3855; line-height:1.3; }
#lockButton { width:45px; height:45px; border:1px solid #f0dce3; background:rgba(255,255,255,.88); border-radius:16px; box-shadow:var(--shadow-soft); }
#content { display:grid; gap:14px; }
.card,.focus-card,.hero,.quick-record,.achievement-summary { border:1px solid rgba(255,255,255,.98); background:rgba(255,255,255,.96); box-shadow:0 10px 25px rgba(173,91,116,.12); border-radius:26px; }
.card,.focus-card { padding:18px; }
.simple-card { overflow:hidden; }
.section-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.section-title h3 { margin:0; color:#81425a; font-size:18px; }
.section-title p { margin:3px 0 0; color:var(--muted); font-size:12px; }
.section-title>span,.section-title button { border:0; border-radius:999px; background:#fff0f4; color:#bb4c6c; padding:7px 11px; font-weight:900; font-size:12px; }
.section-label { color:#c05774; font-size:12px; font-weight:900; letter-spacing:.04em; }
.empty,.chart-empty { padding:26px 12px; text-align:center; color:#a98a95; background:#fff8fa; border-radius:19px; }

/* ガイド */
.hero { position:relative; min-height:214px; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr) minmax(170px,46%); padding:20px 16px 16px 20px; background:
  radial-gradient(circle at 10% 10%,rgba(255,255,255,.98),transparent 15rem),
  linear-gradient(135deg,#ffe6ee,#fff8db); cursor:pointer; }
.hero::before { content:"✦"; position:absolute; left:15px; bottom:12px; color:#f8c849; font-size:25px; opacity:.8; }
.hero-ledger { background:linear-gradient(135deg,#eef8ff,#fff0f4); }
.hero-assets { background:linear-gradient(135deg,#e9f6ff,#fff3d7); }
.hero-rewards { background:linear-gradient(135deg,#fff0d9,#ffe8f1); }
.hero-settings { background:linear-gradient(135deg,#eef8ef,#fff0e5); }
.hero-copy { position:relative; z-index:2; align-self:center; }
.hero-badge { display:inline-flex; background:rgba(255,255,255,.85); border:1px solid rgba(239,202,214,.72); border-radius:999px; padding:7px 11px; color:#b34c6b; font-size:12px; font-weight:900; box-shadow:0 4px 10px rgba(142,81,99,.07); }
.hero-name { margin-top:11px; color:#93445e; font-size:13px; font-weight:900; }
.hero-line { margin-top:6px; color:#6e4855; font-size:17px; line-height:1.55; font-weight:900; }
.hero-tap { margin-top:9px; color:#b28c98; font-size:11px; font-weight:800; }
.hero-art { position:relative; align-self:end; height:190px; }
.hero-art img { position:absolute; right:-4px; bottom:-12px; width:100%; height:100%; object-fit:contain; object-position:right bottom;  }
.hero-rewards .hero-art img { max-height:175px; }

/* フォーカスカード */
.focus-card { background:linear-gradient(145deg,#fff,#fff5f8); }
.focus-head { display:flex; justify-content:space-between; align-items:flex-start; gap:15px; }
.focus-head h2 { margin:5px 0 0; color:#9d3155; font-size:clamp(27px,8vw,42px); line-height:1.12; }
.action-mini { border:0; border-radius:999px; padding:9px 14px; background:linear-gradient(135deg,#f38aa7,#dc5b80); color:#fff; font-size:13px; font-weight:900; box-shadow:0 7px 16px rgba(207,74,110,.22); }
.growth-banner { margin:16px 0 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-radius:18px; padding:12px 14px; }
.growth-banner.positive { background:#fff0f4; color:#b43f63; }
.growth-banner.negative { background:#eef5ff; color:#416aa4; }
.growth-banner small { font-weight:800; }
.growth-banner strong { font-size:20px; }
.progress { width:100%; height:11px; overflow:hidden; border-radius:999px; background:#f2e6ea; }
.progress.large { height:13px; }
.progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#ef7192,#ffb765); transition:.3s; }
.progress-note { margin-top:9px; display:flex; justify-content:space-between; gap:10px; color:#97717e; font-size:12px; }
.progress-note strong { color:#a24060; }
.focus-split { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.focus-split>div { padding:13px; border-radius:18px; background:#fff0f4; }
.focus-split>div:nth-child(2) { background:#eef7ff; }
.focus-split small { display:block; color:#9c7c87; font-weight:800; }
.focus-split strong { display:block; margin-top:4px; color:#a83d60; font-size:19px; }

/* サマリー */
.summary-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.summary-card { min-width:0; min-height:126px; display:flex; flex-direction:column; justify-content:center; border-radius:22px; padding:15px; box-shadow:var(--shadow-soft); border:1px solid rgba(255,255,255,.88); }
.summary-card>span { font-size:24px; }
.summary-card small { color:#8e727d; font-weight:800; }
.summary-card strong { margin-top:6px; color:#7d4056; font-size:20px; overflow-wrap:anywhere; }
.summary-card em { margin-top:5px; color:#a68691; font-size:11px; font-style:normal; line-height:1.5; }
.tone-pink { background:linear-gradient(145deg,#fff,#ffe7ef); }
.tone-blue { background:linear-gradient(145deg,#fff,#e9f5ff); }
.tone-yellow { background:linear-gradient(145deg,#fff,#fff3cf); }
.tone-mint { background:linear-gradient(145deg,#fff,#e9f8ed); }

/* アクション */
.action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:11px; }
.big-action { min-height:112px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; border:1px solid rgba(255,255,255,.9); border-radius:23px; padding:15px; text-align:left; box-shadow:var(--shadow-soft); background:#fff; }
.big-action>span { font-size:28px; }
.big-action b { margin-top:7px; font-size:16px; }
.big-action small { margin-top:3px; color:#987b85; }
.big-action.income { background:linear-gradient(145deg,#f9fcff,#e6f4ff); }
.big-action.expense { background:linear-gradient(145deg,#fff,#ffe6ed); }
.big-action.asset { background:linear-gradient(145deg,#fff,#eff1ff); }
.big-action.reward { background:linear-gradient(145deg,#fff,#fff2d8); }

/* 家計簿 */
.month-switch { display:grid; grid-template-columns:48px 1fr 48px; align-items:center; gap:8px; }
.month-switch h2 { margin:0; text-align:center; color:#754555; font-size:22px; }
.month-switch button { height:46px; border:0; border-radius:15px; background:#fff; box-shadow:var(--shadow-soft); color:#b04768; font-size:28px; }
.quick-record-grid { display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.quick-record { border:0; min-height:112px; padding:15px; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; gap:3px 10px; text-align:left; }
.quick-record span { grid-row:1/3; align-self:center; font-size:34px; }
.quick-record b { align-self:end; font-size:17px; }
.quick-record small { color:#927580; }
.quick-record.income { background:linear-gradient(145deg,#eff8ff,#dcedff); }
.quick-record.expense { background:linear-gradient(145deg,#fff0f4,#ffe2eb); }
.bar-list { display:grid; gap:12px; }
.bar-row>div:first-child { display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; }
.bar-row b { font-size:13px; }
.bar-row small { color:#9d7f89; }
.bar { height:9px; background:#f2e7ea; border-radius:999px; overflow:hidden; }
.bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#f08aa6,#ffc064); }
.tx-list { display:grid; gap:8px; }
.tx-item { width:100%; border:0; background:#fff8fa; border-radius:17px; padding:13px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; }
.tx-item div { min-width:0; }
.tx-item b { display:block; color:#784555; }
.tx-item small { display:block; margin-top:4px; color:#a2858f; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tx-item strong { flex:none; font-size:15px; }
.tx-item .plus { color:#347db4; }
.tx-item .minus { color:#d55176; }

/* 資産ピラミッド */
.sparkle-card { position:relative; isolation:isolate; overflow:hidden; }
.sparkle-card::before,.sparkle-card::after { content:"✦"; position:absolute; z-index:-1; color:#ffd254; opacity:.68; font-size:23px; pointer-events:none; }
.sparkle-card::before { right:17px; top:13px; }
.sparkle-card::after { left:17px; bottom:13px; font-size:15px; }
.pyramid-card {
  background:
    radial-gradient(circle at 18% 12%,rgba(255,255,255,.96),transparent 12rem),
    radial-gradient(circle at 88% 24%,rgba(255,228,126,.34),transparent 10rem),
    linear-gradient(180deg,#eaf7ff 0%,#fff8db 58%,#fff0f6 100%);
  border-color:#fff;
  box-shadow:0 15px 34px rgba(124,85,111,.17);
}
.pyramid-title { margin-bottom:5px; }
.mini-ribbon { display:inline-flex; margin-bottom:7px; padding:6px 10px; border-radius:999px; background:linear-gradient(135deg,#ed638a,#ff9b63); color:#fff; font-size:10px; font-weight:1000; box-shadow:0 5px 12px rgba(217,72,113,.18); }
.pyramid-map { position:relative; min-height:418px; padding:8px 112px 8px 0; }
.pyramid-stack { height:400px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:5px; min-width:0; }
.pyramid-level { position:relative; width:var(--level-width); min-height:70px; flex:1 1 0; display:flex; align-items:center; justify-content:center; padding:8px 10px; clip-path:polygon(12% 0,88% 0,100% 100%,0 100%); box-shadow:0 8px 15px rgba(73,80,98,.14); }
.pyramid-level:first-child { min-height:58px; flex:.82 1 0; }
.pyramid-level.tone-pink { background:linear-gradient(135deg,#f486a5,#dc4d7b); }
.pyramid-level.tone-orange { background:linear-gradient(135deg,#ffc878,#f58a43); }
.pyramid-level.tone-yellow { background:linear-gradient(135deg,#ffec85,#eec348); }
.pyramid-level.tone-green { background:linear-gradient(135deg,#c6eb8f,#73b65b); }
.pyramid-level.tone-blue { background:linear-gradient(135deg,#8ed5f5,#429ad8); }
.pyramid-level.active { z-index:3; transform:scale(1.025); box-shadow:0 0 0 4px #fff,0 0 0 8px #f04f81,0 13px 24px rgba(202,65,108,.28); }
.pyramid-level-copy { max-width:92%; padding:5px 9px; border-radius:13px; background:rgba(255,255,255,.88); text-align:center; color:#4d3840; line-height:1.12; box-shadow:0 3px 8px rgba(64,54,60,.09); }
.pyramid-level-copy b { display:block; font-size:clamp(11px,3vw,15px); font-weight:1000; }
.pyramid-level-copy small { display:block; margin-top:4px; font-size:clamp(8px,2.3vw,11px); font-weight:900; }
.pyramid-level-copy em { display:inline-flex; margin-top:5px; padding:3px 7px; border-radius:999px; background:#ed507d; color:#fff; font-size:9px; font-style:normal; font-weight:1000; }
.pyramid-marker { position:absolute; left:0; right:0; top:var(--marker-y); height:1px; z-index:8; transform:translateY(-50%); pointer-events:none; }
.marker-dot { position:absolute; left:var(--marker-left); top:50%; width:18px; height:18px; transform:translate(-50%,-50%); border:4px solid #fff; border-radius:50%; background:#ed3f76; box-shadow:0 0 0 4px rgba(237,63,118,.22),0 4px 10px rgba(170,44,84,.25); }
.marker-line { position:absolute; left:var(--marker-left); right:88px; top:50%; height:5px; transform:translateY(-50%); border-radius:999px; background:linear-gradient(90deg,#ed3f76,#ff9b55); box-shadow:0 2px 6px rgba(205,62,105,.22); }
.marker-line::after { content:""; position:absolute; right:-1px; top:50%; width:0; height:0; transform:translateY(-50%); border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid #ff9b55; }
.marker-side { position:absolute; right:-4px; top:50%; width:102px; transform:translateY(-50%); display:grid; justify-items:center; gap:2px; }
.marker-side img { width:76px; height:84px; object-fit:contain; object-position:center bottom; }
.marker-bubble { width:100%; padding:7px 6px; border:2px solid #ffd5e1; border-radius:17px; background:#fff; text-align:center; box-shadow:0 8px 18px rgba(145,77,99,.16); }
.marker-bubble strong { display:block; color:#e44576; font-size:12px; }
.marker-bubble b { display:block; margin-top:2px; color:#7f3d55; font-size:12px; }
.marker-bubble small { display:block; margin-top:2px; color:#a05f74; font-size:9px; font-weight:900; }
.million-step-card { margin-top:3px; padding:13px; border:1px solid #fff; border-radius:21px; background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(255,240,201,.92)); box-shadow:0 8px 20px rgba(144,87,104,.11); }
.million-step-head,.million-step-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.million-step-head span { color:#8c6270; font-size:11px; font-weight:900; }
.million-step-head strong { color:#d64370; font-size:14px; }
.million-pips { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; margin:10px 0 8px; }
.million-pips i { height:9px; border-radius:999px; background:#f0e2e7; }
.million-pips i.on { background:linear-gradient(90deg,#f05b87,#ffbd52); box-shadow:0 2px 6px rgba(224,73,116,.18); }
.million-step-foot { color:#9b7783; font-size:9px; font-weight:800; }
.million-step-foot span:last-child { color:#a94a68; text-align:right; }
.pyramid-result { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:8px; margin-top:10px; }
.pyramid-result>div { min-width:0; padding:12px 10px; border-radius:18px; background:#fff; box-shadow:0 7px 16px rgba(137,84,102,.10); }
.pyramid-result .rank-result { background:linear-gradient(145deg,#fff4ce,#fff); }
.pyramid-result small { display:block; color:#987b86; font-size:9px; line-height:1.3; }
.pyramid-result strong { display:block; margin-top:4px; color:#93425d; font-size:13px; overflow-wrap:anywhere; }
.rank-result strong { color:#d45a38; font-size:15px; }
.rank-note { margin:9px 2px 0; color:#aa8d96; font-size:8px; line-height:1.5; }

/* NISA */
.nisa-card { display:grid; grid-template-columns:minmax(128px,38%) 1fr; gap:15px; align-items:center; background:radial-gradient(circle at 18% 28%,rgba(255,244,142,.66),transparent 9rem),linear-gradient(145deg,#edfff0,#fff5c8); }
.nisa-tree-visual { position:relative; min-height:235px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; }
.nisa-tree-visual .tree-glow { position:absolute; width:170px; height:170px; bottom:22px; border-radius:50%; background:radial-gradient(circle,rgba(255,240,116,.63),rgba(255,240,116,0) 68%); }
.nisa-tree-visual img { position:relative; z-index:1; width:100%; max-width:225px; max-height:225px; object-fit:contain; object-position:center bottom; }
.nisa-tree-visual span { position:absolute; z-index:2; left:0; bottom:0; padding:7px 10px; border-radius:999px; background:#fff; color:#4e8455; font-size:11px; font-weight:1000; box-shadow:0 7px 16px rgba(70,112,67,.15); }
.nisa-tree-copy h3 { margin:4px 0; color:#427a4c; }
.nisa-tree-copy>strong { display:block; color:#a63c5d; font-size:25px; }
.nisa-tree-copy p { margin:7px 0; color:#806f65; }
.nisa-details { display:grid; gap:4px; margin:9px 0 12px; color:#826f6c; font-size:11px; }
.nisa-tree-copy>small { display:block; margin-top:7px; color:#687c69; }
.tree-complete { margin-top:12px; padding:10px; border-radius:14px; background:#fff0a9; color:#936511; font-weight:1000; font-size:12px; }

/* 推移グラフ */
.chart-feature { display:grid; grid-template-columns:minmax(96px,25%) 1fr; gap:10px; align-items:end; background:radial-gradient(circle at 12% 85%,rgba(255,226,106,.28),transparent 8rem),linear-gradient(145deg,#fff,#fff2f7); }
.chart-character { align-self:end; height:168px; }
.chart-character img { width:100%; height:100%; object-fit:contain; object-position:left bottom; }
.chart-content { min-width:0; }
.chart-title { margin-bottom:8px; }
.chart-tabs { display:grid; grid-template-columns:repeat(3,1fr); gap:5px; margin-bottom:7px; padding:4px; border-radius:14px; background:#f7eaf0; }
.chart-tabs button { min-width:0; border:0; border-radius:11px; padding:7px 4px; background:transparent; color:#9c7482; font-size:9px; font-weight:1000; }
.chart-tabs button.active { background:#fff; color:#d0436f; box-shadow:0 4px 10px rgba(139,75,97,.12); }
.chart-box { min-width:0; }
.chart-meta { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:4px 3px 0; color:#a08690; font-size:9px; }
.chart-meta strong { color:#c34a6b; }
.chart-meta strong.down { color:#4c78ae; }
.chart-svg { width:100%; height:146px; display:block; overflow:visible; }
.chart-caption { display:flex; justify-content:space-between; align-items:center; gap:8px; color:#a08690; font-size:9px; }
.chart-caption strong { color:#a43c5e; font-size:12px; }
.chart-help { margin:8px 0 0; padding:8px 9px; border-radius:12px; background:#fff4d5; color:#956e37; font-size:9px; line-height:1.5; }

/* 実績 */
.achievement-focus { display:grid; grid-template-columns:1fr auto; gap:15px; align-items:center; background:linear-gradient(145deg,#fff,#fff1d7); }
.achievement-focus h2 { margin:5px 0; color:#9b3e5d; }
.achievement-focus p { margin:0; color:#947b82; font-size:12px; line-height:1.7; }
.achievement-count { width:92px; height:92px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; background:linear-gradient(145deg,#f17192,#d84670); color:#fff; box-shadow:0 12px 24px rgba(198,59,99,.25); }
.achievement-count strong { font-size:31px; }
.achievement-count small { font-size:10px; font-weight:900; }
.achievement-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:13px; }
.achievement-summary>div { min-width:0; padding:11px 9px; border-radius:17px; background:#fff6f8; }
.achievement-summary .accent { background:#fff0d5; }
.achievement-summary small { display:block; color:#9e808a; font-size:10px; }
.achievement-summary strong { display:block; margin-top:4px; color:#8a4359; font-size:13px; overflow-wrap:anywhere; }
.achievement-section { background:rgba(255,255,255,.94); }
.achievement-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.achievement-card { display:grid; grid-template-columns:44px 1fr; gap:9px; min-height:126px; border-radius:19px; padding:12px; border:1px solid #f0e2e7; background:#faf8f9; }
.achievement-card.unlocked { background:linear-gradient(145deg,#fff,#fff2d5); border-color:#f3d995; box-shadow:0 8px 18px rgba(184,127,44,.10); }
.achievement-icon { width:43px; height:43px; display:flex; align-items:center; justify-content:center; border-radius:14px; background:#f1e9ec; font-size:22px; }
.unlocked .achievement-icon { background:#fff0bd; }
.achievement-card b { display:block; color:#754553; font-size:13px; line-height:1.35; }
.achievement-card small { display:block; min-height:31px; margin-top:3px; color:#a18890; font-size:9px; line-height:1.45; }
.achievement-progress { height:6px; margin-top:8px; overflow:hidden; border-radius:999px; background:#eae2e5; }
.achievement-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#e96b8d,#ffc15f); }
.achievement-card em { display:block; margin-top:5px; color:#aa8791; font-size:10px; font-style:normal; font-weight:900; }
.achievement-card.unlocked em { color:#c47d1f; }

/* 設定 */
.settings-card { padding:5px 17px; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 0; border-bottom:1px solid #f1e5e9; }
.setting-row:last-child { border-bottom:0; }
.setting-row div { min-width:0; }
.setting-row b { display:block; color:#744653; }
.setting-row small { display:block; margin-top:4px; color:#a18790; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.setting-row button { flex:none; border:0; border-radius:999px; padding:8px 12px; background:#fff0f4; color:#b74868; font-weight:900; }
.tiny-grid { grid-template-columns:repeat(3,1fr); }
.tiny-grid .summary-card { min-height:96px; padding:11px; }
.tiny-grid .summary-card strong { font-size:15px; }
.settings-actions { display:grid; gap:9px; }
.primary { width:100%; border:0; border-radius:17px; padding:14px 16px; background:linear-gradient(135deg,#ed7595,#d9577d); color:#fff; font-weight:900; box-shadow:0 8px 18px rgba(196,60,99,.20); text-align:center; }
.primary.danger { background:linear-gradient(135deg,#8f8990,#726c73); }
.import { display:block; cursor:pointer; }
.import input { display:none; }

/* フォーム・モーダル */
.modal { position:fixed; inset:0; z-index:80; display:flex; align-items:flex-end; justify-content:center; padding:20px 14px max(14px,env(safe-area-inset-bottom)); background:rgba(65,43,51,.38);  }
.sheet { position:relative; width:min(100%,590px); max-height:90vh; overflow:auto; border-radius:29px; padding:26px 19px 20px; background:#fff; box-shadow:0 25px 70px rgba(65,43,51,.28); }
.sheet h2 { margin:0 42px 15px 0; color:#913e5b; }
.close { position:absolute; right:14px; top:13px; width:38px; height:38px; border:0; border-radius:50%; background:#fff0f4; color:#a54463; font-size:25px; }
.sheet-note { margin:-5px 0 16px; color:#9a7d87; font-size:12px; line-height:1.6; }
.sheet-note.warning { padding:10px; border-radius:13px; background:#fff4d7; color:#9a6c22; }
.form { display:grid; gap:13px; }
.form label { display:grid; gap:6px; color:#704752; font-size:13px; font-weight:900; }
.form label>small { color:#aa8e96; font-size:10px; font-weight:700; line-height:1.5; }
.form input,.form select { width:100%; min-width:0; height:49px; border:1px solid #eddce2; border-radius:14px; padding:0 13px; background:#fffafb; color:#63424d; outline:none; }
.form input:focus,.form select:focus { border-color:#ea86a3; box-shadow:0 0 0 3px rgba(234,134,163,.14); }
.input-yen { position:relative; display:block; }
.input-yen input { padding-right:42px; }
.input-yen em { position:absolute; right:13px; top:50%; transform:translateY(-50%); color:#9b7f89; font-style:normal; font-weight:900; }

/* ナビ */
.nav { position:fixed; z-index:40; left:50%; bottom:0; transform:translateX(-50%); width:min(100%,680px); display:grid; grid-template-columns:repeat(5,1fr); gap:2px; padding:8px 8px calc(8px + env(safe-area-inset-bottom)); border-top:1px solid rgba(231,205,214,.78); background:rgba(255,255,255,.93);  box-shadow:0 -8px 24px rgba(123,67,88,.09); }
.nav button { min-width:0; border:0; border-radius:16px; padding:6px 2px; background:transparent; color:#8f7880; font-weight:800; }
.nav button>span { display:block; font-size:20px; line-height:1.2; filter:grayscale(.2); }
.nav button small { display:block; margin-top:3px; font-size:10px; white-space:nowrap; }
.nav button.active { background:linear-gradient(145deg,#fff2f6,#ffe3eb); color:#bc4669; }
.nav button.active>span { filter:none; transform:translateY(-1px); }

@media (max-width:520px) {
  .pyramid-map { min-height:390px; padding-right:96px; }
  .pyramid-stack { height:372px; }
  .marker-side { width:88px; }
  .marker-side img { width:67px; height:72px; }
  .marker-line { right:76px; }
  .pyramid-result { grid-template-columns:1fr 1fr; }
  .pyramid-result .rank-result { grid-column:1 / -1; }
  .app { padding-left:10px; padding-right:10px; }
  .topbar h1 { font-size:21px; }
  .hero { min-height:205px; grid-template-columns:minmax(0,1fr) minmax(145px,45%); padding-left:16px; }
  .hero-line { font-size:15px; }
  .hero-art { height:175px; }
  .summary-card { min-height:118px; padding:13px; }
  .summary-card strong { font-size:17px; }
  .nisa-card { grid-template-columns:37% 1fr; gap:10px; }
  .nisa-tree-copy>strong { font-size:21px; }
  .chart-feature { grid-template-columns:23% 1fr; }
  .chart-character { height:150px; }
  .achievement-card { grid-template-columns:38px 1fr; padding:10px; }
  .achievement-icon { width:37px; height:37px; font-size:19px; }
}

@media (max-width:390px) {
  .pyramid-map { min-height:365px; padding-right:82px; }
  .pyramid-stack { height:350px; gap:4px; }
  .pyramid-level { min-height:58px; }
  .pyramid-level:first-child { min-height:49px; }
  .marker-side { width:76px; }
  .marker-side img { width:58px; height:64px; }
  .marker-line { right:64px; }
  .marker-bubble { padding:5px 3px; }
  .marker-bubble strong,.marker-bubble b { font-size:10px; }
  .marker-bubble small { font-size:7px; }
  .setup-two { grid-template-columns:1fr; }
  .hero { grid-template-columns:1fr 42%; min-height:194px; }
  .hero-line { font-size:14px; }
  .summary-grid,.action-grid,.quick-record-grid { gap:8px; }
  .summary-card { min-height:112px; }
  .summary-card strong { font-size:16px; }
  .big-action { min-height:103px; padding:12px; }
  .big-action b { font-size:14px; }
  .pyramid-result { grid-template-columns:1fr; }
  .pyramid-result .rank-result { grid-column:auto; }
  .nisa-card { grid-template-columns:1fr; }
  .nisa-tree-visual { min-height:220px; }
  .nisa-tree-visual img { max-height:210px; }
  .chart-feature { grid-template-columns:1fr; }
  .chart-character { display:none; }
  .achievement-grid { grid-template-columns:1fr; }
  .achievement-summary { grid-template-columns:1fr; }
  .tiny-grid { grid-template-columns:1fr 1fr; }
}