/* Ancla — 「灯台の夜×Cupertino」の兄弟。夜の海の底、氷青(アイスブルー)の光。
   Faro(ライム)と並べたとき家族と分かる文法(黒・ガラス・発光)で、色だけ変える。 */

:root{
  --bg: #141820;                 /* Faroよりわずかに青い夜 */
  --ice: #4fd8eb;                /* 錨の氷青 */
  --ice-soft: #2f9db0;
  --plus: #6fe3a5;
  --minus: #ff7a76;
  --text: #e2e8ee;
  --text-mute: #93a0ac;
  --text-faint: #5f6b76;
  --hairline: rgba(255,255,255,0.13);
  --glass-hi: rgba(255,255,255,0.055);
  --glass-lo: rgba(255,255,255,0.022);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:
    radial-gradient(480px 340px at 85% -6%, rgba(79,216,235,0.10), transparent 65%),
    radial-gradient(560px 460px at -12% 28%, rgba(109,147,201,0.09), transparent 60%),
    radial-gradient(520px 420px at 55% 110%, rgba(163,116,201,0.06), transparent 60%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text); font-family:var(--font); min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{outline:1px solid var(--ice); outline-offset:3px;}

/* ---------- ガラス部品 ---------- */
.glass{
  background:linear-gradient(180deg, var(--glass-hi), var(--glass-lo));
  border:0.5px solid var(--hairline);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-radius:14px;
}

/* ---------- ヘッダー ---------- */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:22px 28px; position:sticky; top:0; z-index:10;
  background:rgba(20,24,32,0.92);
  border-bottom:0.5px solid var(--hairline);
}
.brand{display:flex; align-items:center; gap:10px; cursor:pointer;}
.brand .mark{height:30px; width:30px; color:var(--ice);}
.brand .word{font-size:15px; color:var(--ice); letter-spacing:0.26em; font-weight:600;}
.brand .sub{font-size:9.5px; color:var(--text-faint); letter-spacing:2.5px; margin-top:4px;}

nav.tabs{display:flex; gap:4px; background:rgba(255,255,255,0.05); padding:4px; border-radius:999px; border:0.5px solid var(--hairline);}
nav.tabs[hidden]{display:none;}
nav.tabs button{
  appearance:none; border:none; background:transparent; color:var(--text-mute);
  padding:8px 20px; border-radius:999px; font-size:12px; font-weight:600;
  font-family:var(--font); cursor:pointer; letter-spacing:1px;
  display:flex; align-items:center; gap:6px;
}
nav.tabs button svg{display:none; width:22px; height:22px;}
nav.tabs button.active{background:var(--ice); color:#0c1a1e;}

main{max-width:860px; margin:0 auto; padding:36px 24px 110px;}
.view{display:none;}
.view.active{display:block; animation:fade .3s ease;}
@keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);}}

/* ---------- 接続設定 ---------- */
.gate{max-width:430px; margin:8vh auto;}
.gate h1{font-size:22px; font-weight:800;}
.gate-lead{font-size:13px; color:var(--text-mute); line-height:1.8;}
.gate label{display:block; margin:16px 0;}
.gate label span{display:block; font-size:11px; color:var(--text-faint); letter-spacing:1px; margin-bottom:6px;}
.gate input{
  width:100%; padding:13px 14px; font-size:16px; color:var(--text);
  background:rgba(255,255,255,0.05); border:0.5px solid var(--hairline); border-radius:10px;
}
.gate-error{color:var(--minus); font-size:12px;}
.btn-solid{
  width:100%; padding:14px; margin-top:8px; font-size:14px; font-weight:700;
  background:var(--ice); color:#0c1a1e; border:none; border-radius:12px; cursor:pointer;
}
.btn{
  display:block; margin:18px auto; padding:11px 26px; font-size:13px;
  background:rgba(255,255,255,0.06); color:var(--text-mute);
  border:0.5px solid var(--hairline); border-radius:999px; cursor:pointer;
}
.state-msg{text-align:center; color:var(--text-faint); margin-top:14vh;}

/* ---------- 今月 ---------- */
.month-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; gap:12px; flex-wrap:wrap;}
.month-head .month{
  font-size:32px; font-weight:800; letter-spacing:-0.01em;
  background:linear-gradient(135deg,#d8f7fb,var(--ice) 55%,var(--ice-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.seg{display:flex; background:rgba(255,255,255,0.05); border:0.5px solid var(--hairline); border-radius:9px; padding:2px;}
.seg button{
  appearance:none; border:none; background:transparent; color:var(--text-mute);
  padding:7px 16px; font-size:12px; font-weight:600; border-radius:7px; cursor:pointer; font-family:var(--font);
}
.seg button.active{background:rgba(79,216,235,0.9); color:#0c1a1e;}

.hero{padding:26px 26px 22px; margin-bottom:14px;}
.hero-label{font-size:12px; color:var(--text-mute); letter-spacing:1.5px;}
.hero-num{font-size:44px; font-weight:800; letter-spacing:-0.02em; margin:6px 0 2px; font-variant-numeric:tabular-nums;}
.hero-num.plus{color:var(--plus);}
.hero-num.minus{color:var(--minus);}
.hero-sub{font-size:12px; color:var(--text-faint);}

.duo{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:26px;}
.card{padding:16px 18px;}
.card-l{font-size:11px; color:var(--text-faint); letter-spacing:1px;}
.card-n{font-size:22px; font-weight:700; margin-top:4px; font-variant-numeric:tabular-nums;}
.card-n.plus{color:var(--plus);}
.card-n.minus{color:var(--minus);}

.sec{font-size:12px; color:var(--text-faint); letter-spacing:2px; font-weight:700; margin:26px 0 10px;}

.cat-row{display:flex; align-items:center; gap:12px; padding:9px 4px;}
.cat-name{flex:0 0 11em; font-size:13px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.cat-bar{flex:1; height:8px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden;}
.cat-bar i{display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,var(--ice-soft),var(--ice));}
.cat-amt{flex:0 0 6.4em; text-align:right; font-size:13px; color:var(--text-mute); font-variant-numeric:tabular-nums;}

/* ---------- 明細行 ---------- */
.row{display:flex; align-items:baseline; gap:12px; padding:12px 4px; border-bottom:0.5px solid rgba(255,255,255,0.07);}
.row .d{flex:0 0 4.4em; font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.row .n{flex:1; min-width:0; font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.row .c{font-size:10.5px; color:var(--text-faint); display:block; margin-top:2px;}
.row .a{flex:0 0 6.6em; text-align:right; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;}
.row .a.plus{color:var(--plus);}
.badge{display:inline-block; font-size:9px; padding:1px 7px; border-radius:999px; margin-left:7px; vertical-align:1px;
  border:0.5px solid var(--hairline); color:var(--text-faint); letter-spacing:0.5px;}
.badge.biz{border-color:rgba(79,216,235,0.5); color:var(--ice);}

.list-head{display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
#q{
  flex:1; min-width:200px; padding:11px 14px; font-size:16px; color:var(--text);
  background:rgba(255,255,255,0.05); border:0.5px solid var(--hairline); border-radius:10px;
}

/* ---------- 推移 ---------- */
.page-title{font-size:26px; font-weight:800; margin:0 0 18px;
  background:linear-gradient(135deg,#d8f7fb,var(--ice) 55%,var(--ice-soft));
  -webkit-background-clip:text; background-clip:text; color:transparent;}
.chartbox{padding:20px 22px; margin-bottom:16px;}
.chart-title{font-size:13px; font-weight:700; margin-bottom:14px;}
.chart-note{font-size:10.5px; color:var(--text-faint); font-weight:400;}
.chartbox svg{width:100%; height:auto; display:block;}

.note{text-align:center; color:var(--text-faint); font-size:10.5px; padding:20px; letter-spacing:0.5px;}

/* ---------- スマホ: 下部すりガラスタブバー(iOSの作法) ---------- */
@media (max-width:700px){
  header{padding:16px 20px 10px; backdrop-filter:none; -webkit-backdrop-filter:none;}
  nav.tabs{
    position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:flex; gap:0; margin:0; border-radius:0; border:none;
    background:rgba(20,24,32,0.6);
    backdrop-filter:blur(28px) saturate(1.8);
    -webkit-backdrop-filter:blur(28px) saturate(1.8);
    border-top:0.5px solid var(--hairline);
    padding:6px 6px calc(8px + env(safe-area-inset-bottom));
  }
  nav.tabs[hidden]{display:none;}
  nav.tabs button{
    flex:1; flex-direction:column; align-items:center; gap:3px;
    background:transparent; color:var(--text-faint); font-size:10px; padding:6px 0 2px; min-height:44px;
  }
  nav.tabs button svg{display:block;}
  nav.tabs button.active{background:transparent; color:var(--ice);}
  main{padding:22px 16px 130px;}
  .hero-num{font-size:38px;}
  .cat-name{flex-basis:8.5em;}
}


/* ---------- いまタブ ---------- */
.freebar{height:10px; border-radius:5px; background:rgba(255,255,255,0.07); overflow:hidden; margin:12px 0 8px;}
.freebar i{display:block; height:100%; border-radius:5px;
  background:linear-gradient(90deg,var(--ice-soft),var(--ice)); transition:width .6s ease;}
.meter-card{margin:14px 0 4px; padding:16px 18px;}
.meter{height:8px; border-radius:4px; background:rgba(255,255,255,0.07); overflow:hidden; margin:10px 0 6px;}
.meter i{display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#8a6cd4,#a374c9);}
.meter-nums{display:flex; justify-content:space-between; font-size:11px; color:var(--text-faint); font-variant-numeric:tabular-nums;}
.fixedbox{padding:6px 16px;}
.fx{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:0.5px solid rgba(255,255,255,0.06); font-size:13px;}
.fx:last-child{border-bottom:none;}
.fx .ok{width:18px; height:18px; border-radius:9px; flex:none; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--hairline); color:transparent; font-size:11px;}
.fx.paid .ok{background:rgba(111,227,165,0.18); border-color:var(--plus); color:var(--plus);}
.fx .fn{flex:1; color:var(--text-mute);}
.fx.paid .fn{color:var(--text);}
.fx .fa{font-variant-numeric:tabular-nums; color:var(--text-faint);}
.fx.paid .fa{color:var(--text-mute);}


/* ---------- その場修正 ---------- */
.row.tappable{cursor:pointer;}
.badge.warn{border-color:rgba(255,196,80,0.5); color:#f4c56a;}
.badge.ok{border-color:rgba(111,227,165,0.5); color:var(--plus);}
.editor{margin-top:8px; display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text-faint);}
.ebtn{
  appearance:none; border:0.5px solid var(--hairline); background:rgba(255,255,255,0.05);
  color:var(--text-mute); padding:6px 14px; border-radius:999px; font-size:12px; cursor:pointer; font-family:var(--font);
}
.ebtn.on{background:var(--ice); color:#0c1a1e; border-color:var(--ice);}


/* ---------- 明細3段表示(人間の言葉が主役) ---------- */
.row .n .main{font-size:14.5px; font-weight:600; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.row .c{margin-top:3px;}
.row .raw{display:block; font-size:9.5px; color:var(--text-faint); opacity:0.7; margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}


/* ---------- つかいみちメーター ---------- */
.caps{margin-top:18px; display:grid; gap:12px;}
.capline{}
.cap-head{display:flex; justify-content:space-between; font-size:12px; color:var(--text-mute); margin-bottom:5px;}
.cap-nums{font-variant-numeric:tabular-nums; color:var(--text-faint);}
.cap-nums em{font-style:normal; opacity:0.65;}
.cap-nums.over{color:var(--minus);}
.capbar{height:7px; border-radius:4px; background:rgba(255,255,255,0.07); overflow:hidden;}
.capbar i{display:block; height:100%; border-radius:4px;
  background:linear-gradient(90deg,var(--ice-soft),var(--ice)); transition:width .5s ease;}
.capbar i.warn{background:linear-gradient(90deg,#c9a84c,#f4c56a);}
.capbar i.over{background:linear-gradient(90deg,#c95a4c,var(--minus));}
@media (max-width:700px){ .caps{gap:10px;} }


/* ---------- 人間化パス(2026-08-30) ---------- */
.hero-num{font-size:52px;}
.hero-label{font-size:13px;}
.hero-sub{font-size:13px; color:var(--text-mute); margin-top:6px;}
.row{padding:14px 4px; align-items:center;}
.row .n .main{font-size:15.5px;}
.row .c{font-size:11.5px; color:var(--text-mute);}
.row .a{font-size:15px;}
.cap-head{font-size:13px;}
.cap-head > span:first-child{color:var(--text);}
.caps{margin-top:22px; gap:14px;}
.sec{font-size:12.5px;}
.fx{font-size:14px; padding:11px 0;}
@media (max-width:700px){
  .hero-num{font-size:42px;}
}

/* ================================================================
   Liquid Glass パス(2026-08-30・依頼者指示: iOS最新デザインへ)
   iOS 26の質感: 浮遊カプセル・大きな角丸・屈折するガラス・スペキュラハイライト
   ================================================================ */

.glass, .fixedbox{
  background:rgba(255,255,255,0.055);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:26px;
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.18),
    inset 0 -1px 1px rgba(0,0,0,0.25),
    0 10px 34px rgba(0,0,0,0.38);
  position:relative; overflow:hidden;
}
/* ガラス上面を滑る光(スペキュラ) */
.glass::before, .fixedbox::before{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 28%, transparent 45%);
}
.hero{border-radius:32px;}

/* ヘッダー: 素通しに(浮くのはタブバーの仕事) */
header{background:transparent; border-bottom:none; backdrop-filter:none; -webkit-backdrop-filter:none; position:static;}

/* デスクトップのタブもカプセルガラス */
nav.tabs{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  backdrop-filter:blur(24px) saturate(1.8);
  -webkit-backdrop-filter:blur(24px) saturate(1.8);
  box-shadow:inset 0 1px 1px rgba(255,255,255,0.15), 0 6px 24px rgba(0,0,0,0.35);
}
nav.tabs button.active{
  background:rgba(79,216,235,0.92); color:#0c1a1e;
  box-shadow:0 2px 10px rgba(79,216,235,0.35);
}

/* 部品もカプセルに */
.seg{border-radius:999px; padding:3px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);}
.seg button{border-radius:999px;}
#q, .gate input{border-radius:16px;}
.btn-solid{border-radius:16px;}
.capbar, .meter, .freebar{border-radius:999px;}
.capbar i, .meter i, .freebar i{border-radius:999px;}

/* ---------- スマホ: 浮遊カプセルタブバー(Liquid Glassの主役) ---------- */
@media (max-width:700px){
  nav.tabs{
    left:14px; right:14px; bottom:calc(12px + env(safe-area-inset-bottom));
    border-radius:999px;
    padding:7px;
    background:rgba(24,30,40,0.55);
    border:1px solid rgba(255,255,255,0.16);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.16),
      0 12px 36px rgba(0,0,0,0.5);
  }
  nav.tabs button{border-radius:999px; padding:7px 0 5px; min-height:48px;}
  nav.tabs button.active{
    background:rgba(79,216,235,0.16);
    color:var(--ice);
    box-shadow:inset 0 1px 1px rgba(255,255,255,0.12), inset 0 0 0 1px rgba(79,216,235,0.35);
  }
  main{padding-bottom:140px;}
  .glass, .fixedbox{border-radius:24px;}
  .hero{border-radius:28px;}
}

/* ヒーロー数字は折り返さない(画面幅に応じて縮む) */
.hero-num{font-size:clamp(28px, 10.5vw, 52px); white-space:nowrap;}
@media (max-width:700px){ .hero-num{font-size:clamp(26px, 10vw, 42px);} }

/* ================================================================
   色調整(2026-08-30・依頼者指示: 背景の青みを抜く/赤・黄を深く)
   ================================================================ */
:root{
  --bg: #191719;            /* 青みを抜いた温かい黒 */
  --minus: #e8493c;         /* 深い緋色 */
}
body{
  background:
    radial-gradient(480px 340px at 85% -6%, rgba(79,216,235,0.07), transparent 65%),
    radial-gradient(560px 460px at -12% 30%, rgba(255,235,210,0.035), transparent 60%),
    var(--bg);
  background-attachment:fixed;
}
header{background:transparent;}
nav.tabs{}
@media (max-width:700px){
  nav.tabs{background:rgba(28,25,27,0.6);}
}
/* 深い琥珀と緋色のバー */
.capbar i.warn{background:linear-gradient(90deg,#9a6a14,#d99425);}
.capbar i.over{background:linear-gradient(90deg,#8f291f,#e8493c);}
.badge.warn{border-color:rgba(217,148,37,0.55); color:#d99425;}
.cap-nums.over{color:#f0655a;}
.hero-num.minus{color:#f0655a;}
.card-n.minus{color:#f0655a;}