/* melight — 画面の見た目。デモ版から引き継ぎ、本番アプリで共用する */
:root{
  /* 灯り（あかり）のパレット */
  --ink:#15233A;          /* 深い藍 = 信頼 */
  --ink-2:#3B4A63;
  --ink-3:#7A8598;
  --paper:#FAF6F0;        /* 温かいオフホワイト */
  --paper-2:#F2ECE3;
  --line:#E3DACD;
  --amber:#D98B2B;        /* 灯り */
  --amber-soft:#F6E4C8;
  --moss:#4A6B52;         /* 完了 */
  --moss-soft:#E2EBE3;
  --alert:#B5503C;        /* 期限超過 */
  --alert-soft:#F6DED8;
  --shadow:0 24px 60px -20px rgba(10,20,40,.45);
  --serif:"Shippori Mincho",'Hiragino Mincho ProN',serif;
  --sans:"Zen Kaku Gothic New",'Hiragino Sans',sans-serif;
  --num:"Instrument Serif",'Hiragino Mincho ProN',serif;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans);
  background:
    radial-gradient(1200px 700px at 78% -10%, #24405F 0%, transparent 60%),
    radial-gradient(900px 600px at 8% 100%, #1D2E46 0%, transparent 55%),
    #0E1929;
  color:#DCE3EE;
  min-height:100vh;
  display:flex;justify-content:center;
  padding:32px 24px 56px;
  gap:34px;
  overflow-x:hidden;
}
body::after{ /* 粒子感 */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ============ 外側パネル ============ */
.side{width:300px;flex-shrink:0;padding-top:14px;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.side.right{width:340px;animation-delay:.15s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}

.brand{display:flex;align-items:baseline;gap:10px}
.brand h1{font-family:var(--serif);font-size:34px;letter-spacing:.06em;color:#F6EEE2;font-weight:600}
.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 18px 4px rgba(217,139,43,.7);align-self:center}
.brand small{font-family:var(--num);font-style:italic;font-size:15px;color:#8FA1BC}
.side p.lead{margin-top:14px;font-size:13px;line-height:2;color:#93A3BC}
.side .kicker{margin-top:30px;font-size:11px;letter-spacing:.22em;color:#6E809D;border-bottom:1px solid rgba(255,255,255,.09);padding-bottom:9px}

.persona{margin-top:16px;display:flex;flex-direction:column;gap:8px}
.persona button{
  text-align:left;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);
  color:#C3CFE2;padding:12px 14px;border-radius:12px;cursor:pointer;font-family:var(--sans);
  transition:.25s cubic-bezier(.2,.8,.2,1);
}
.persona button strong{display:block;font-size:13.5px;color:#E8EFF9;font-weight:700;margin-bottom:3px}
.persona button span{font-size:11px;color:#8395B0;line-height:1.6}
.persona button:hover{background:rgba(255,255,255,.08);transform:translateX(3px)}
.persona button.on{background:linear-gradient(100deg,rgba(217,139,43,.22),rgba(217,139,43,.06));border-color:rgba(217,139,43,.6);box-shadow:0 0 0 1px rgba(217,139,43,.18) inset}
.persona button.on strong{color:#FFDCA8}

.note{margin-top:26px;font-size:11.5px;line-height:1.95;color:#6F819C;border-left:2px solid rgba(217,139,43,.45);padding-left:12px}

/* CRMログ */
.crm{margin-top:16px;display:flex;flex-direction:column;gap:9px;max-height:62vh;overflow-y:auto;padding-right:4px}
.crm::-webkit-scrollbar{width:4px}.crm::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:4px}
.ev{border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.04);border-radius:12px;padding:11px 13px;animation:pop .45s cubic-bezier(.2,.9,.2,1) both}
@keyframes pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
.ev .t{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ev .tag{font-size:10px;letter-spacing:.1em;padding:3px 7px;border-radius:5px;background:rgba(217,139,43,.18);color:#F0C387;white-space:nowrap}
.ev .tag.warn{background:rgba(181,80,60,.24);color:#F0AC9C}
.ev .tag.good{background:rgba(74,107,82,.28);color:#A9D3B2}
.ev time{font-family:var(--num);font-size:11px;color:#6E809D}
.ev .b{font-size:12px;color:#C6D2E4;margin-top:7px;line-height:1.65}
.ev .fp{font-size:11px;color:#8296B2;margin-top:6px;padding-top:6px;border-top:1px dashed rgba(255,255,255,.11);line-height:1.6}
.ev .fp b{color:#F0C387;font-weight:500}
.crm-empty{font-size:11.5px;color:#6E809D;line-height:1.9;padding:14px;border:1px dashed rgba(255,255,255,.13);border-radius:12px}

/* ============ スマホ筐体 ============ */
.device{
  width:392px;flex-shrink:0;height:812px;border-radius:46px;background:#05090F;padding:11px;
  box-shadow:var(--shadow),0 0 0 1px rgba(255,255,255,.09),0 0 90px -30px rgba(217,139,43,.5);
  position:relative;animation:rise .9s cubic-bezier(.2,.8,.2,1) both;
}
.screen{width:100%;height:100%;border-radius:36px;background:var(--paper);overflow:hidden;position:relative;color:var(--ink);display:flex;flex-direction:column}
.notch{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:112px;height:26px;background:#05090F;border-radius:0 0 16px 16px;z-index:60}

/* ステータスバー */
.status{padding:14px 24px 4px;display:flex;justify-content:space-between;font-family:var(--num);font-size:13px;color:var(--ink-2);flex-shrink:0}

/* アプリヘッダ */
.appbar{padding:6px 22px 12px;flex-shrink:0}
.appbar .row{display:flex;align-items:center;justify-content:space-between}
.appbar .logo{font-family:var(--serif);font-size:21px;letter-spacing:.08em;display:flex;align-items:center;gap:7px}
.appbar .logo i{width:7px;height:7px;background:var(--amber);border-radius:50%;box-shadow:0 0 12px 3px rgba(217,139,43,.5);animation:glow 3.4s ease-in-out infinite}
@keyframes glow{0%,100%{opacity:.55;transform:scale(.86)}50%{opacity:1;transform:scale(1.12)}}
.demoTag{font-family:var(--num);font-size:11.5px;letter-spacing:.2em;padding:4px 8px 4px 10px;border:1px solid var(--line);border-radius:6px;color:#8A5A19;background:var(--amber-soft)}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(140deg,var(--amber-soft),#E9D5B4);display:grid;place-items:center;font-size:12px;font-weight:700;color:#8A5A19;border:1px solid var(--line)}

/* 本文スクロール域 */
.view{flex:1;overflow-y:auto;padding:4px 22px 26px;scroll-behavior:smooth}
.view::-webkit-scrollbar{width:0}
.page{display:none;animation:fade .42s cubic-bezier(.2,.8,.2,1) both}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

h2.sec{font-family:var(--serif);font-size:15px;letter-spacing:.05em;margin:26px 0 12px;display:flex;align-items:center;gap:9px;color:var(--ink)}
h2.sec::after{content:"";flex:1;height:1px;background:var(--line)}
h2.sec:first-child{margin-top:12px}

/* ホーム見出し */
.greet{margin-top:8px}
.greet .day{font-family:var(--num);font-size:13px;color:var(--ink-3);letter-spacing:.06em}
.greet h3{font-family:var(--serif);font-size:25px;line-height:1.6;margin-top:8px;font-weight:600;word-break:auto-phrase;line-break:strict}
.greet h3 em{font-style:normal;background:linear-gradient(transparent 62%,var(--amber-soft) 62%)}
.greet .seg{display:inline-block;margin-top:12px;font-size:11px;color:#8A5A19;background:var(--amber-soft);padding:5px 11px;border-radius:999px;letter-spacing:.04em}

/* サマリーカード */
.summary{margin-top:18px;background:linear-gradient(160deg,#1B2C46,#15233A);border-radius:20px;padding:20px;color:#EAF0F9;position:relative;overflow:hidden}
.summary::before{content:"";position:absolute;width:180px;height:180px;right:-60px;top:-70px;background:radial-gradient(circle,rgba(217,139,43,.42),transparent 68%)}
.summary .lbl{font-size:11px;letter-spacing:.16em;color:#9DB0CB}
.summary .big{font-family:var(--num);font-size:52px;line-height:1;margin-top:6px}
.summary .big span{font-size:16px;font-family:var(--sans);margin-left:6px;color:#B9C8DE}
.summary .sub{margin-top:12px;font-size:12px;color:#B9C8DE;line-height:1.75;position:relative}
.bar{margin-top:14px;height:5px;border-radius:5px;background:rgba(255,255,255,.14);overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),#F2C078);border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.2,1)}

/* タスク */
.task{display:flex;gap:13px;padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer;transition:.2s}
.task:active{opacity:.6}
.check{width:23px;height:23px;border-radius:8px;border:1.5px solid var(--ink-3);flex-shrink:0;margin-top:2px;display:grid;place-items:center;transition:.28s cubic-bezier(.2,.9,.2,1);background:transparent}
.check svg{width:13px;height:13px;stroke:#fff;stroke-width:2.6;fill:none;stroke-dasharray:22;stroke-dashoffset:22;transition:.35s .05s}
.task.done .check{background:var(--moss);border-color:var(--moss)}
.task.done .check svg{stroke-dashoffset:0}
.task .body{flex:1;min-width:0}
.task .ttl{font-size:14px;font-weight:500;line-height:1.55;transition:.3s}
.task.done .ttl{color:var(--ink-3);text-decoration:line-through}
.task .meta{margin-top:7px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pill{font-size:10.5px;padding:3px 8px;border-radius:5px;background:var(--paper-2);color:var(--ink-2);letter-spacing:.03em}
.pill.due{font-family:var(--num);font-size:12px;background:transparent;color:var(--ink-3);padding-left:0}
.pill.soon{color:#8A5A19;background:var(--amber-soft)}
.pill.over{color:#8C2F1E;background:var(--alert-soft);font-weight:700}
.task .why{margin-top:8px;font-size:11.5px;color:var(--ink-3);line-height:1.75;display:none}
.task.open .why{display:block;animation:fade .3s both}
.task .why b{color:var(--ink-2);font-weight:500}

/* ニュース */
.news{padding:16px 0;border-bottom:1px solid var(--line);cursor:pointer;position:relative}
.news.unread::before{content:"";position:absolute;left:-11px;top:24px;width:6px;height:6px;border-radius:50%;background:var(--amber)}
.news .cat{font-size:10.5px;letter-spacing:.08em;color:var(--amber);font-weight:700}
.news .cat.c2{color:#5C7CA6}.news .cat.c3{color:#8A6BA8}.news .cat.c4{color:var(--alert)}.news .cat.c5{color:var(--moss)}
.news h4{font-family:var(--serif);font-size:16px;line-height:1.6;margin-top:7px;font-weight:600}
.news.read h4{color:var(--ink-2)}
.news time{display:block;margin-top:8px;font-family:var(--num);font-size:12px;color:var(--ink-3)}
.news .detail{display:none}
.news.open .detail{display:block;animation:fade .34s both}
.news .detail p{margin-top:12px;font-size:13px;line-height:2;color:var(--ink-2)}
.advice{margin-top:14px;background:var(--paper-2);border-radius:14px;padding:15px;border-left:3px solid var(--amber)}
.advice .h{font-size:11px;letter-spacing:.1em;color:#8A5A19;font-weight:700}
.advice p{margin-top:8px;font-size:13px;line-height:1.95;color:var(--ink)}
.src{margin-top:12px;font-size:11px;color:var(--ink-3)}
.src a{color:var(--ink-2)}
.acts{margin-top:14px;display:flex;gap:9px;flex-wrap:wrap}

/* ボタン */
.btn{font-family:var(--sans);font-size:12.5px;padding:11px 16px;border-radius:11px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);cursor:pointer;transition:.22s cubic-bezier(.2,.8,.2,1);font-weight:500}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(21,35,58,.6)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ink-3);box-shadow:none}
.btn.amber{background:var(--amber);border-color:var(--amber);color:#fff}
.btn.wide{width:100%;text-align:center}
.btn:disabled{opacity:.45;cursor:default;transform:none;box-shadow:none}

/* 相談 */
.fpcard{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;display:flex;gap:15px;align-items:center}
.fpcard .ph{width:56px;height:56px;border-radius:50%;background:linear-gradient(150deg,#2B4162,#15233A);color:#F6E4C8;display:grid;place-items:center;font-family:var(--serif);font-size:19px;flex-shrink:0}
.fpcard .n{font-family:var(--serif);font-size:17px}
.fpcard .r{font-size:11.5px;color:var(--ink-3);margin-top:5px;line-height:1.6}
textarea{width:100%;margin-top:12px;border:1px solid var(--line);border-radius:14px;padding:14px;font-family:var(--sans);font-size:13px;line-height:1.8;resize:none;background:#fff;color:var(--ink)}
textarea:focus{outline:none;border-color:var(--amber)}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-top:11px}
.chip{font-size:11.5px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;transition:.2s;color:var(--ink-2)}
.chip:hover{border-color:var(--amber);color:#8A5A19}

.empty{padding:44px 10px;text-align:center;color:var(--ink-3);font-size:12.5px;line-height:2}
.empty .m{font-family:var(--serif);font-size:15px;color:var(--ink-2);margin-bottom:8px}

/* ============ 資産タブ ============ */
.total{margin-top:14px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.total .lbl{font-size:11px;letter-spacing:.16em;color:var(--ink-3)}
.total .v{font-family:var(--num);font-size:60px;line-height:1;margin-top:8px;letter-spacing:-.01em}
.total .v i{font-family:var(--sans);font-size:17px;font-style:normal;margin-left:7px;color:var(--ink-2)}
.total .d{margin-top:12px;font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:8px}
.total .d b{font-family:var(--num);font-size:16px;color:var(--moss)}
.total .d b.minus{color:var(--alert)}
.total .d span{color:var(--ink-3);font-size:11.5px}

.donutwrap{display:flex;gap:14px;align-items:center;margin-top:6px}
.donutwrap svg{width:132px;height:132px;flex-shrink:0;transform:rotate(-90deg)}
.donutwrap svg circle{fill:none;stroke-width:19;transition:stroke-dashoffset 1.1s cubic-bezier(.2,.8,.2,1)}
.dcenter{position:absolute;inset:0;display:grid;place-items:center;transform:none}
.donutbox{position:relative;width:132px;height:132px;flex-shrink:0}
.donutbox .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donutbox .mid em{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--ink-3)}
.donutbox .mid b{font-family:var(--num);font-size:24px;font-weight:400;margin-top:2px}
.legend{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.lg{display:flex;align-items:center;gap:8px;font-size:12px}
.lg i{width:9px;height:9px;border-radius:3px;flex-shrink:0}
.lg .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.lg .v{font-family:var(--num);font-size:13.5px}
.lg .p{font-size:10.5px;color:var(--ink-3);width:32px;text-align:right}

.bars{display:flex;align-items:flex-end;gap:5px;height:132px;margin-top:8px;padding:0 1px}
.bars .b{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;gap:6px}
.bars .b i{width:100%;border-radius:5px 5px 2px 2px;background:linear-gradient(180deg,#3B5578,#22334D);height:0;transition:height .9s cubic-bezier(.2,.8,.2,1)}
.bars .b.now i{background:linear-gradient(180deg,#EBAA55,var(--amber))}
.bars .b span{font-family:var(--num);font-size:10px;color:var(--ink-3);white-space:nowrap}
.bars .b.now span{color:#8A5A19;font-weight:700}
.trendnote{margin-top:12px;font-size:12px;color:var(--ink-3);line-height:1.8}
.trendnote b{font-family:var(--num);font-size:14px;color:var(--moss)}

.gauge{padding:15px 0;border-bottom:1px solid var(--line)}
.gauge .r{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.gauge .n{font-size:13px;font-weight:500}
.gauge .q{font-family:var(--num);font-size:15px;color:var(--ink-2);white-space:nowrap}
.gauge .q b{font-size:21px;color:var(--ink)}
.gtrack{margin-top:10px;height:8px;border-radius:8px;background:var(--paper-2);overflow:hidden;position:relative}
.gtrack i{display:block;height:100%;border-radius:8px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1);background:linear-gradient(90deg,var(--amber),#F2C078)}
.gtrack.full i{background:linear-gradient(90deg,var(--moss),#7FA588)}
.gauge .m{margin-top:9px;font-size:11.5px;color:var(--ink-3);line-height:1.7}
.gauge .m b{color:#8A5A19}

.goal{padding:15px 0;border-bottom:1px solid var(--line)}
.goal .n{font-size:13.5px;font-weight:500}
.goal .s{margin-top:6px;font-size:11.5px;color:var(--ink-3)}
.goal .s b{font-family:var(--num);font-size:14px;color:var(--ink-2)}
.goal .done{color:var(--moss);font-weight:700}

.disclaimer{margin-top:22px;font-size:11px;line-height:1.9;color:var(--ink-3);background:var(--paper-2);border-radius:12px;padding:14px}

/* タブバー */
.tabs{flex-shrink:0;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);background:rgba(250,246,240,.92);backdrop-filter:blur(14px);padding:9px 6px 24px}
.tab{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px;padding:5px 0;color:var(--ink-3);transition:.25s;position:relative;font-family:var(--sans)}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:.25s}
.tab span{font-size:9.5px;letter-spacing:.02em}
.tab.on{color:var(--ink)}
.tab.on svg{stroke:var(--amber);transform:translateY(-1px)}
.tab .badge{position:absolute;top:1px;right:50%;margin-right:-19px;min-width:16px;height:16px;border-radius:9px;background:var(--alert);color:#fff;font-size:9.5px;display:grid;place-items:center;padding:0 4px;font-family:var(--num)}

/* ============ 灯り（自分を褒める） ============ */
.sheet{position:absolute;inset:0;z-index:80;display:none;background:rgba(16,27,46,.5);backdrop-filter:blur(4px)}
.sheet.on{display:flex;align-items:flex-end;animation:fade .3s both}
.sheetcard{width:100%;background:var(--paper);border-radius:28px 28px 0 0;padding:30px 24px calc(28px + env(safe-area-inset-bottom,0px));transform:translateY(100%);animation:slideUp .55s cubic-bezier(.2,1,.3,1) forwards;text-align:center}
@keyframes slideUp{to{transform:none}}
.flame{width:78px;height:78px;margin:0 auto;border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 43%,#FFFEFA 0%,#FFF1D6 16%,#FBD79A 34%,#E8A64B 52%,rgba(217,139,43,.34) 66%,rgba(217,139,43,0) 78%);
  box-shadow:0 0 52px 12px rgba(217,139,43,.26);
  animation:lightup 1.3s cubic-bezier(.2,.9,.2,1) both, breathe 3.6s ease-in-out 1.3s infinite}
@keyframes breathe{0%,100%{opacity:.92}50%{opacity:1}}
.flame::after{content:"";position:absolute;inset:-16px;border-radius:50%;border:1px solid rgba(217,139,43,.35);animation:ring 1.9s ease-out .3s infinite}
@keyframes lightup{0%{transform:scale(.15);opacity:0}60%{transform:scale(1.16);opacity:1}100%{transform:scale(1)}}
@keyframes ring{0%{transform:scale(.75);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.sheetcard .did{margin-top:20px;font-size:12px;color:var(--ink-3);letter-spacing:.05em}
.sheetcard h3{font-family:var(--serif);font-size:20px;line-height:1.7;margin-top:10px;font-weight:600}
.sheetcard .praise{margin-top:16px;font-size:13.5px;line-height:2.05;color:var(--ink-2);background:var(--paper-2);border-radius:16px;padding:16px 18px;text-align:left}
.sheetcard .mylbl{margin-top:20px;font-size:11.5px;color:var(--ink-3);text-align:left;line-height:1.7}
.sheetcard .mylbl b{color:var(--ink-2);font-weight:500}
.sheetcard textarea{margin-top:9px}
.sheetcard .close{margin-top:16px}

.lightsHead{margin-top:14px;background:linear-gradient(155deg,#1B2C46,#15233A);border-radius:20px;padding:22px 20px;color:#EAF0F9;position:relative;overflow:hidden;text-align:center}
.lightsHead::before{content:"";position:absolute;width:230px;height:230px;left:50%;margin-left:-115px;top:-130px;background:radial-gradient(circle,rgba(217,139,43,.4),transparent 66%)}
.lightsHead .n{font-family:var(--num);font-size:60px;line-height:1;position:relative}
.lightsHead .n i{font-family:var(--sans);font-style:normal;font-size:15px;margin-left:8px;color:#B9C8DE}
.lightsHead .c{margin-top:10px;font-size:12px;color:#B9C8DE;line-height:1.8;position:relative}

.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(29px,1fr));gap:12px;margin-top:6px}
.light{aspect-ratio:1;border-radius:50%;cursor:pointer;
  background:radial-gradient(circle at 50% 43%,#FFFEFA 0%,#FFF1D6 18%,#FBD79A 38%,#E8A64B 58%,rgba(217,139,43,.18) 76%,rgba(217,139,43,0) 88%);
  box-shadow:0 0 16px rgba(217,139,43,.4);animation:pop .5s both;transition:transform .25s}
.light:hover{transform:scale(1.12)}
.light.mine{box-shadow:0 0 13px rgba(217,139,43,.45),0 0 0 2px var(--paper),0 0 0 3.5px rgba(217,139,43,.5)}

.lrec{padding:15px 0;border-bottom:1px solid var(--line)}
.lrec .d{font-family:var(--num);font-size:12px;color:var(--ink-3)}
.lrec .t{font-size:13.5px;font-weight:500;margin-top:5px;line-height:1.6}
.lrec .p{margin-top:7px;font-size:12px;color:var(--ink-2);line-height:1.85}
.lrec .memo{margin-top:10px;font-size:12.5px;line-height:1.85;color:var(--ink);background:var(--amber-soft);border-radius:12px;padding:11px 13px;position:relative}
.lrec .memo em{display:block;font-style:normal;font-size:10px;letter-spacing:.1em;color:#8A5A19;margin-bottom:5px}

.backrow{display:flex;align-items:center;gap:8px;margin-top:10px;cursor:pointer;color:var(--ink-2);font-size:12.5px}
.backrow svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8}
.lightsLink{display:flex;align-items:center;gap:12px;padding:15px 16px;margin-top:12px;border-radius:16px;background:linear-gradient(100deg,var(--amber-soft),#FBF1E1);border:1px solid #EFDFC4;cursor:pointer;transition:.25s}
.lightsLink:hover{transform:translateY(-1px);box-shadow:0 8px 18px -12px rgba(138,90,25,.5)}
.lightsLink .ic{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:radial-gradient(circle at 50% 44%,#FFF6E8,#FFD9A0 35%,var(--amber) 65%,rgba(217,139,43,0) 80%)}
.lightsLink .tx{flex:1}
.lightsLink .tx b{display:block;font-size:13px;color:#7A4E14}
.lightsLink .tx span{font-size:11px;color:#9C7135}
.lightsLink .ar{font-family:var(--num);font-size:17px;color:#8A5A19}

/* ============ オンボーディング ============ */
.onb{position:absolute;inset:0;z-index:95;background:var(--paper);display:none;flex-direction:column;padding:0 26px calc(26px + env(safe-area-inset-bottom,0px));overflow-y:auto}
.onb.on{display:flex}
.onb .step{margin:auto 0;padding:34px 0;animation:fade .5s both}
.onb .k{font-size:11px;letter-spacing:.2em;color:var(--ink-3)}
.onb h2{font-family:var(--serif);font-size:26px;line-height:1.65;margin-top:14px;font-weight:600}
.onb h2 em{font-style:normal;background:linear-gradient(transparent 62%,var(--amber-soft) 62%)}
.onb p{margin-top:16px;font-size:13.5px;line-height:2.05;color:var(--ink-2)}
.onb .fld{margin-top:26px}
.onb label{font-size:12px;color:var(--ink-3);letter-spacing:.05em}
.onb input[type=date],.onb input[type=text]{width:100%;margin-top:9px;border:1px solid var(--line);border-radius:14px;padding:15px;font-family:var(--sans);font-size:16px;background:#fff;color:var(--ink)}
.onb input:focus{outline:none;border-color:var(--amber)}
.onb .hint{margin-top:10px;font-size:11.5px;color:var(--ink-3);line-height:1.8}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.opt{border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 14px;font-size:12.5px;cursor:pointer;font-family:var(--sans);color:var(--ink-2);transition:.2s cubic-bezier(.2,.8,.2,1)}
.opt:hover{border-color:var(--ink-3)}
.opt.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.opt.on.amberish{background:var(--amber);border-color:var(--amber);color:#fff}
.onb .fld+.fld{margin-top:24px}
.skip{display:block;width:100%;margin-top:13px;background:none;border:0;font-family:var(--sans);font-size:12px;color:var(--ink-3);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.prog{display:flex;gap:5px;margin-bottom:18px}
.prog i{height:3px;flex:1;border-radius:3px;background:var(--line)}
.prog i.on{background:var(--amber)}
.pick{margin-top:16px;display:flex;flex-direction:column;gap:11px}
.pick button{text-align:left;background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;cursor:pointer;font-family:var(--sans);transition:.25s cubic-bezier(.2,.8,.2,1)}
.pick button strong{display:block;font-family:var(--serif);font-size:16px;margin-bottom:7px}
.pick button span{font-size:12px;color:var(--ink-2);line-height:1.85}
.pick button:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.pick button.on{border-color:var(--amber);background:linear-gradient(150deg,#FFFBF4,var(--amber-soft));box-shadow:0 10px 24px -16px rgba(138,90,25,.7)}
.onb .foot{margin-top:26px}

/* ============ キャラ（灯りの姿） ============ */
.chara{margin-top:14px;background:linear-gradient(155deg,#1D2F4A,#141F33);border-radius:22px;padding:22px 20px;color:#EAF0F9;position:relative;overflow:hidden}
.chara::before{content:"";position:absolute;width:280px;height:280px;right:-90px;top:-140px;background:radial-gradient(circle,rgba(217,139,43,.34),transparent 66%)}
.chara .top{display:flex;gap:16px;align-items:center;position:relative}
.sigil{width:88px;height:88px;flex-shrink:0;position:relative;display:grid;place-items:center}
.sigil.big{width:150px;height:150px;margin:0 auto}
.sigil .core{position:absolute;inset:6px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,241,214,.5) 0%,rgba(232,166,75,.22) 60%,rgba(217,139,43,0) 78%);
  box-shadow:0 0 38px 10px rgba(217,139,43,.3);animation:breathe 3.8s ease-in-out infinite}
.sigil img{position:relative;z-index:2;width:74px;height:74px;border-radius:50%;object-fit:cover;
  border:1.5px solid rgba(246,228,200,.55);box-shadow:0 6px 18px -6px rgba(0,0,0,.5)}
.sigil.big img{width:128px;height:128px;border-color:rgba(217,139,43,.45)}
.sigil .rings{position:absolute;inset:0}
.sigil .rings i{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(246,228,200,.42);animation:spin 22s linear infinite}
.sigil .rings i:nth-child(2){inset:-6px;border-style:dashed;animation-duration:32s;animation-direction:reverse;opacity:.7}
.sigil .rings i:nth-child(3){inset:-12px;opacity:.45}
.sigil .rings i:nth-child(4){inset:-18px;border-style:dotted;opacity:.3}
@keyframes spin{to{transform:rotate(360deg)}}
.chara .nm{flex:1;min-width:0}
.chara .star{font-size:11px;letter-spacing:.14em;color:#F0C387}
.chara .cn{font-family:var(--serif);font-size:21px;margin-top:5px;line-height:1.4}
.chara .ttl{margin-top:7px;font-size:11.5px;color:#B9C8DE}
.chara .ttl span{display:block;margin-top:5px;font-size:11px;color:#F0C387}
.chara .lv{margin-top:18px;position:relative}
.chara .lvr{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;color:#B9C8DE}
.chara .lvr b{font-family:var(--num);font-size:15px;color:#FFDCA8}
.xpbar{margin-top:8px;height:6px;border-radius:6px;background:rgba(255,255,255,.14);overflow:hidden}
.xpbar i{display:block;height:100%;width:0;min-width:9px;border-radius:6px;background:linear-gradient(90deg,var(--amber),#FFD79A);transition:width .9s cubic-bezier(.2,.8,.2,1)}
.stages{display:flex;justify-content:space-between;gap:4px;margin-top:11px}
.sd{flex:1;text-align:center;font-size:9px;letter-spacing:.02em;color:#63758F;padding-top:9px;position:relative;line-height:1.3}
.sd::before{content:"";position:absolute;top:0;left:50%;margin-left:-2.5px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.2)}
.sd.on{color:#A8BAD4}
.sd.on::before{background:var(--amber)}
.sd.now{color:#FFDCA8;font-weight:700}
.sd.now::before{background:#FFE3B4;box-shadow:0 0 10px 3px rgba(217,139,43,.7)}
.chara .desc{margin-top:16px;font-size:12.5px;line-height:1.95;color:#C6D2E4;position:relative;padding-top:15px;border-top:1px solid rgba(255,255,255,.11)}
.chara .desc b{color:#FFDCA8;font-weight:500}
.luck{margin-top:12px;background:rgba(255,255,255,.06);border-radius:14px;padding:13px 15px;font-size:12px;line-height:1.9;color:#CBD6E8;position:relative}
.luck em{display:block;font-style:normal;font-size:10px;letter-spacing:.14em;color:#F0C387;margin-bottom:6px}
.charaNote{margin-top:10px;font-size:10.5px;color:var(--ink-3);line-height:1.8}

/* 設定シート */
.setrow{display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);text-align:left}
.setrow .l{font-size:13px}
.setrow .s{font-size:11px;color:var(--ink-3);margin-top:4px;line-height:1.6}
.seg{display:inline-flex;background:var(--paper-2);border-radius:11px;padding:3px;gap:2px}
.seg button{border:0;background:transparent;font-family:var(--sans);font-size:12px;padding:8px 13px;border-radius:9px;cursor:pointer;color:var(--ink-3);transition:.25s;white-space:nowrap}
.seg button.on{background:var(--ink);color:var(--paper)}
.btn.danger{background:var(--alert);border-color:var(--alert);color:#fff}


/* ライフプラン */
.bars .b.neg i{background:linear-gradient(180deg,#D4796A,var(--alert))}
table.cf{width:100%;border-collapse:collapse;font-size:12px;min-width:400px}
table.cf th{font-weight:500;font-size:10.5px;letter-spacing:.04em;color:var(--ink-3);text-align:right;padding:0 8px 9px;border-bottom:1px solid var(--line);white-space:nowrap}
table.cf th:first-child,table.cf td:first-child{text-align:left}
table.cf td{text-align:right;padding:10px 8px;border-bottom:1px solid var(--line);font-family:var(--num);font-size:13px;white-space:nowrap}
table.cf tr.neg td{color:var(--alert)}
table.cf tr.neg td b{color:var(--alert)}
.cmp{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.cmp .l{font-size:12.5px}
.cmp .r{text-align:right}
.cmp .r b{display:block;font-family:var(--num);font-size:17px}
.cmp .r span{font-size:9.5px;color:var(--ink-3);letter-spacing:.06em}
.cmp .d{font-family:var(--num);font-size:12px;padding:3px 7px;border-radius:5px}
.cmp .d.up{color:#3D5A45;background:var(--moss-soft)}
.cmp .d.dn{color:#8C2F1E;background:var(--alert-soft)}
.planLink{display:flex;align-items:center;gap:12px;padding:16px;margin-top:14px;border-radius:16px;background:linear-gradient(150deg,#1F3350,#16243A);color:#E7EEF8;cursor:pointer;transition:.25s}
.planLink:hover{transform:translateY(-1px)}
.planLink .ic{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;background:rgba(217,139,43,.2)}
.planLink .ic svg{width:19px;height:19px;stroke:var(--amber);fill:none;stroke-width:1.7}
.planLink .tx{flex:1}
.planLink .tx b{display:block;font-size:13.5px}
.planLink .tx span{font-size:11px;color:#9DB0CB;line-height:1.6}
.planLink .ar{font-family:var(--num);font-size:17px;color:#F0C387}

/* ライフプランの入力フォーム（オンボーディングと同じ見た目に） */
#p-plan .fld{margin-top:22px}
#p-plan label{display:block;font-size:12px;color:var(--ink-3);letter-spacing:.05em;margin-bottom:9px}
#p-plan input{width:100%;border:1px solid var(--line);border-radius:14px;padding:14px 15px;font-family:var(--num);font-size:19px;background:#fff;color:var(--ink)}
#p-plan input:focus{outline:none;border-color:var(--amber)}
#p-plan .hint{margin-top:9px;font-size:11.5px;color:var(--ink-3);line-height:1.8}
#p-plan .opts{margin-top:2px}

/* 資産推移グラフ（ゼロ線をはさんで上がプラス・下がマイナス） */
.pchart{height:165px;display:flex;flex-direction:column;margin-top:8px}
.prow{display:flex;gap:2px;flex-shrink:0}
.pc{flex:1;height:100%;display:flex;align-items:flex-end;min-width:0}
.prow.bot .pc{align-items:flex-start}
.pc i{width:100%;border-radius:4px 4px 0 0;background:linear-gradient(180deg,#3B5578,#22334D);transition:height .9s cubic-bezier(.2,.8,.2,1)}
.pc.ret i{background:linear-gradient(180deg,#EBAA55,var(--amber))}
.prow.bot .pc i{border-radius:0 0 4px 4px;background:linear-gradient(0deg,#C9705C,var(--alert))}
.zline{height:1px;background:var(--ink-3);opacity:.45;flex-shrink:0}

/* FPの物語 */
.story{margin-top:20px;background:var(--paper-2);border-radius:18px;padding:20px;border-left:3px solid var(--amber)}
.story p{margin-top:0;font-size:13px;line-height:2.1;color:var(--ink)}
.story p+p{margin-top:14px}
.story .sign{margin-top:18px;text-align:right;font-family:var(--serif);font-size:14px;color:var(--ink-2)}
.editnote{margin-top:14px;font-size:11px;line-height:1.85;color:var(--ink-3);border:1px dashed var(--line);border-radius:10px;padding:11px 13px}
/* いまの段階 */
.stageCard{margin-top:14px;border:1px solid var(--line);background:#fff;border-radius:18px;padding:16px 18px;cursor:pointer;transition:.25s}
.stageCard:hover{border-color:var(--ink-3)}
.stageCard .dots{display:flex;gap:6px}
.stageCard .dots i{flex:1;height:4px;border-radius:4px;background:var(--paper-2)}
.stageCard .dots i.on{background:var(--amber)}
.stageCard .tx{margin-top:12px}
.stageCard .tx b{display:block;font-size:13.5px;font-family:var(--serif)}
.stageCard .tx span{display:block;margin-top:6px;font-size:11.5px;color:var(--ink-3);line-height:1.8}
.stageCard .dp{margin-top:10px;font-size:10.5px;color:#8A5A19;background:var(--amber-soft);display:inline-block;padding:4px 9px;border-radius:5px}
/* 面談履歴 */
.mt{padding:15px 0;border-bottom:1px solid var(--line)}
.mt .d{font-family:var(--num);font-size:12px;color:var(--ink-3)}
.mt .t{font-size:13.5px;font-weight:500;margin-top:5px}
.mt .b{font-size:12px;color:var(--ink-2);margin-top:7px;line-height:1.85}
.mt .by{font-size:11px;color:var(--ink-3);margin-top:7px}

/* プッシュ通知 */
.push{position:absolute;top:14px;left:12px;right:12px;z-index:70;background:rgba(255,255,255,.86);backdrop-filter:blur(22px);border-radius:20px;padding:14px 16px;box-shadow:0 18px 40px -14px rgba(10,20,40,.4);border:1px solid rgba(255,255,255,.7);transform:translateY(-160%);transition:transform .62s cubic-bezier(.2,1.1,.3,1);cursor:pointer}
.push.show{transform:none}
.push .h{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink-3);letter-spacing:.06em}
.push .h i{width:15px;height:15px;border-radius:4px;background:var(--ink);display:grid;place-items:center}
.push .h i::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--amber)}
.push .t{font-size:13.5px;font-weight:700;margin-top:8px;line-height:1.5}
.push .b{font-size:12px;color:var(--ink-2);margin-top:5px;line-height:1.6}

/* トースト */
.toast{position:absolute;bottom:104px;left:22px;right:22px;background:var(--ink);color:var(--paper);padding:13px 16px;border-radius:14px;font-size:12.5px;z-index:65;opacity:0;transform:translateY(14px);transition:.4s cubic-bezier(.2,.9,.2,1);pointer-events:none;line-height:1.6}
.toast.show{opacity:1;transform:none}

@media(max-width:1180px){
  body{flex-direction:column;align-items:center;padding:24px 16px 48px}
  .side,.side.right{width:min(392px,100%)}
  .crm{max-height:none}
}

/* スマホ実機：説明パネルを外し、アプリを全画面に */
@media(max-width:768px){
  body{display:block;padding:0;gap:0;background:#05090F;min-height:100dvh;overflow:hidden}
  .side{display:none}
  .device{width:100%;height:100dvh;border-radius:0;padding:0;box-shadow:none;animation:none}
  .screen{border-radius:0}
  .notch,.status{display:none}
  .appbar{padding-top:calc(env(safe-area-inset-top,0px) + 16px)}
  .push{top:calc(env(safe-area-inset-top,0px) + 12px)}
  .tabs{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px)}
  .toast{bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
}