/* gas/Css.html から機械的に切り出したもの。手で書き写していない。
フォントの は web/index.html の へ移した。
ログイン画面のスタイルはここに無い（index.html 側にある）。 */
:root {
color-scheme: dark;
--bg: #0b0d14;
--bg2: #10131d;
--card: #161a26;
--card2: #1c2130;
--border: rgba(255,255,255,.08);
--text: #eef1f8;
--text2: #8b93a7;
--accent: #6366f1;
--accent2: #22d3ee;
--up: #2dd4a0;
--down: #ff5c7a;
--primary: var(--accent);
--success: var(--up);
--danger: var(--down);
--radius: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
font-family: 'Inter', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background:
radial-gradient(60% 320px at 50% -60px, rgba(99,102,241,.22), transparent 70%),
var(--bg);
color: var(--text);
max-width: 480px; margin: 0 auto;
padding-bottom: 96px;
-webkit-tap-highlight-color: transparent;
}
.page { display: none; padding: 16px; }
.page.active { display: block; animation: pageIn .28s ease both; }
@keyframes pageIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
/* ヘッダー */
.header {
padding: 20px 4px 14px;
font-size: 20px; font-weight: 800; letter-spacing: .01em;
display: flex; align-items: center; gap: 8px;
}
.header::before {
content: '';
width: 4px; height: 20px; border-radius: 2px;
background: linear-gradient(180deg, var(--accent), var(--accent2));
}
/* アイコンボタン（ヘッダー右端の更新など） */
.icon-btn {
margin-left: auto;
width: 36px; height: 36px; border-radius: 12px;
border: 1px solid var(--border);
background: var(--card); color: var(--text2);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: color .15s, border-color .15s, transform .1s;
}
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn:active { transform: scale(.94); }
.icon-btn:disabled { opacity: .5; }
.icon-btn.spinning { color: var(--accent2); border-color: rgba(34,211,238,.4); }
.icon-btn.spinning svg { animation: spin .8s linear infinite; }
/* ナビ（フローティングピル） */
.nav {
position: fixed; bottom: 12px; left: 12px; right: 12px;
max-width: 456px; margin: 0 auto;
background: rgba(22,26,38,.88);
backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: 0 12px 32px rgba(0,0,0,.5);
display: flex; justify-content: space-around;
padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px));
z-index: 100;
}
.nav-btn {
flex: 1; border: none; background: none; padding: 4px;
font-size: 10px; font-weight: 500; color: var(--text2); cursor: pointer;
display: flex; flex-direction: column; align-items: center; gap: 3px;
transition: color .15s;
}
.nav-btn svg { width: 22px; height: 22px; }
.nav-btn.active { color: var(--accent2); }
.nav-btn.active svg { filter: drop-shadow(0 0 8px rgba(34,211,238,.55)); }
/* カード */
.card {
background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%), var(--card);
border: 1px solid var(--border);
border-radius: var(--radius);
padding: 18px; margin-bottom: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.card h3 {
font-size: 11px; font-weight: 700; color: var(--text2);
text-transform: uppercase; letter-spacing: .08em;
margin-bottom: 8px;
}
.card .amount {
font-size: 24px; font-weight: 700;
font-variant-numeric: tabular-nums; letter-spacing: -.01em;
word-break: break-all;
}
.card .amount.total { font-size: 32px; font-weight: 800; }
/* ヒーローカード（総資産） */
.card.hero {
background:
radial-gradient(120% 140% at 100% 0%, rgba(34,211,238,.28), transparent 55%),
linear-gradient(135deg, #4338ca, #6d28d9 90%);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 16px 40px rgba(79,56,202,.35);
}
.card.hero h3 { color: rgba(255,255,255,.72); }
.card.hero .amount.total { color: #fff; }
.card.hero .meta { color: rgba(255,255,255,.6); }
/* テーブル内の数値折り返し防止 */
.tbl td { white-space: normal; }
.tbl td[style*="text-align:right"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* フォーム */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
width: 100%; padding: 11px 12px;
border: 1px solid var(--border); border-radius: 10px;
font-size: 16px; font-family: inherit;
background: var(--bg2); color: var(--text);
transition: border-color .15s, box-shadow .15s;
}
.form-group input:focus, .form-group select:focus {
outline: none; border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(99,102,241,.25);
}
.btn {
width: 100%; padding: 13px; border: none; border-radius: 12px;
font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer;
color: #fff;
background: linear-gradient(135deg, var(--accent), #8b5cf6);
box-shadow: 0 6px 18px rgba(99,102,241,.35);
transition: transform .1s, box-shadow .15s, opacity .15s;
}
.btn:active { transform: translateY(1px) scale(.99); box-shadow: 0 3px 10px rgba(99,102,241,.3); }
.btn:disabled { opacity: .45; box-shadow: none; }
.btn-outline {
background: transparent; color: var(--text);
border: 1px solid var(--border); box-shadow: none;
}
.btn-outline:active { transform: translateY(1px); }
/* セグメント */
.seg {
display: flex; gap: 4px; padding: 4px;
background: var(--bg2); border: 1px solid var(--border);
border-radius: 12px; margin-bottom: 12px;
}
.seg button {
flex: 1; padding: 8px; border: none; border-radius: 8px;
background: transparent; font-size: 13px; font-weight: 500; font-family: inherit;
cursor: pointer; color: var(--text2);
transition: background .15s, color .15s;
}
.seg button.active {
background: var(--accent); color: #fff; font-weight: 700;
box-shadow: 0 2px 10px rgba(99,102,241,.4);
}
/* テーブル */
.tbl-wrap { width: 100%; }
.tbl { width: 100%; font-size: 11px; border-collapse: collapse; table-layout: fixed; }
.tbl th, .tbl td { padding: 7px 3px; text-align: left; border-bottom: 1px solid rgba(255,255,255,.06); word-break: break-word; }
.tbl th { color: var(--text2); font-weight: 500; font-size: 10px; letter-spacing: .04em; white-space: nowrap; }
.tbl .tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl tr:last-child td { border-bottom: none; }
/* チャート */
#chartArea { width: 100%; height: 280px; }
div.google-visualization-tooltip {
background: var(--card2) !important;
border: 1px solid rgba(255,255,255,.12) !important;
border-radius: 10px !important;
box-shadow: 0 8px 24px rgba(0,0,0,.5) !important;
}
/* トースト */
.toast {
position: fixed; top: 16px; left: 50%; transform: translateX(-50%) translateY(-8px);
background: rgba(28,33,48,.95); color: var(--text);
border: 1px solid var(--border);
backdrop-filter: blur(12px);
padding: 11px 20px; border-radius: 12px;
box-shadow: 0 8px 24px rgba(0,0,0,.5);
font-size: 14px; z-index: 200; opacity: 0;
transition: opacity .25s, transform .25s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
/* ローディング */
.spinner {
display: inline-block; width: 22px; height: 22px;
border: 2px solid rgba(255,255,255,.12); border-top-color: var(--accent2);
border-radius: 50%; animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* 保有一覧 */
.holding-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.holding-name { font-size: 14px; }
.holding-val { font-size: 14px; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.holding-sub { font-size: 11px; color: var(--text2); }
/* ファイル入力 */
.file-drop {
border: 2px dashed rgba(255,255,255,.15); border-radius: var(--radius);
padding: 24px; text-align: center; color: var(--text2);
font-size: 14px; cursor: pointer; margin-bottom: 12px;
transition: border-color .15s, background .15s;
}
.file-drop.over { border-color: var(--accent2); background: rgba(34,211,238,.08); }
details summary { color: var(--accent2); }