/* アカウント画面。本体サイト（style.css）の設計言語に合わせる:
   濃紺×ティールのトークン、モノスペースのキッカー、角丸カード。
   light-dark() で両テーマに同じ構造が効くようにしている。 */
:root{
  color-scheme:light dark;
  font-family:"M PLUS 2","Noto Sans JP",system-ui,sans-serif;
  --bg:light-dark(#edf3f4,#0a161d);
  --surface:light-dark(#ffffff,#0d1d25);
  --surface2:light-dark(#f5f9fa,#102430);
  --ink:light-dark(#0c1e24,#dfeaed);
  --muted:light-dark(#4c666f,#92aab3);
  --line:light-dark(#d2dde0,#17313c);
  --accent:light-dark(#04707e,#4fd0e0);
  --accent-ink:light-dark(#ffffff,#06232b);
  --soft:light-dark(#dcedef,#0c2c34);
  --heart:#d2436b;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
body{margin:0;background:var(--bg);color:var(--ink);line-height:1.75;
  background-image:radial-gradient(60rem 30rem at 85% -10%,light-dark(#dcedef,#0c2c3477),transparent 70%);}
main{max-width:640px;margin:0 auto;padding:2.5rem 1.25rem 4rem}
a{color:var(--accent)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ── 外枠と見出し ── */
.acct-nav{display:flex;gap:1.25rem;flex-wrap:wrap;font-size:13.5px;margin-bottom:2rem}
.acct-nav a{color:var(--muted);text-decoration:none}
.acct-nav a:hover{color:var(--accent)}
.acct-hero{margin-bottom:1.25rem}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.22em;color:var(--accent);margin:0 0 .3rem}
h1{font-size:clamp(26px,5vw,34px);margin:0 0 .5rem;letter-spacing:.01em}
.lead{color:var(--muted);margin:0}
#message{min-height:2.2em;margin:1rem 0;padding:.55rem .9rem;border-left:3px solid var(--accent);
  background:var(--surface2);border-radius:0 8px 8px 0;font-size:14px}

/* ── カード ── */
section.card{border:1px solid var(--line);border-radius:16px;background:var(--surface);
  padding:1.6rem 1.6rem 1.8rem;margin:1.25rem 0;box-shadow:0 8px 30px light-dark(#0c1e2414,#00000055)}
.card h2{font-size:20px;margin:.1rem 0 .3rem}
.card-sub{color:var(--muted);font-size:14px;margin:0 0 1.2rem}
p{margin:.4rem 0}

/* ── ログインフォーム ── */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:48px;
  border:1px solid var(--line);border-radius:10px;background:light-dark(#fff,#13293a);color:var(--ink);
  font:inherit;font-weight:600;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.btn-google:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn-google svg{width:18px;height:18px;flex:none}
.divider{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:12px;margin:1.1rem 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
form.stack{display:grid;gap:.85rem}
label{display:grid;gap:.35rem;font-size:13.5px;color:var(--muted)}
input,select{font:inherit;color:var(--ink);background:var(--surface2);border:1px solid var(--line);
  border-radius:10px;padding:.7rem .85rem;min-height:44px}
input:focus,select:focus{outline:none;border-color:var(--accent)}
.btn-primary{font:inherit;font-weight:700;min-height:46px;border:0;border-radius:10px;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);transition:filter .15s ease,transform .15s ease}
.btn-primary:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{font:inherit;min-height:42px;padding:0 1rem;border:1px solid var(--line);border-radius:10px;
  background:none;color:var(--ink);cursor:pointer}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-block{width:100%}
button:disabled{cursor:wait;opacity:.5}
.auth-alt{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:1rem}
.btn-text{font:inherit;font-size:13.5px;background:none;border:0;padding:0;cursor:pointer;color:var(--muted)}
.btn-text:hover{color:var(--accent);text-decoration:underline}
.auth-hint{font-size:12.5px;color:var(--muted);margin:.9rem 0 0}
details.privacy{margin-top:1rem;font-size:13px;color:var(--muted)}
details.privacy summary{cursor:pointer;color:var(--ink)}
details.privacy p{font-size:13px}
.verify{margin-top:1rem;padding:1rem;border:1px solid var(--line);border-radius:12px;background:var(--surface2)}
.verify .row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:.6rem}
#logout{margin-top:1.25rem}

/* ── メンバー画面 ── */
.history{list-style:none;padding:0;margin:0 0 .5rem}
.history li{position:relative;padding:.55rem 0 .9rem;border-bottom:1px solid var(--line);margin:0}
.history .history-head{font-size:11.5px;letter-spacing:.14em;color:var(--muted);border:0;padding:1rem 0 .2rem}
.history a{font-weight:600;text-decoration:none}
.history a:hover{text-decoration:underline}
.history-meta{font-size:12.5px;color:var(--muted)}
.history-bar{position:absolute;left:0;bottom:0;height:3px;background:var(--accent);border-radius:2px}
.history-actions{display:flex;gap:.7rem;flex-wrap:wrap}
.history-actions button,.saved li button{font:inherit;font-size:13px;padding:.35rem .8rem;min-height:34px;
  border:1px solid var(--line);border-radius:8px;background:none;color:var(--muted);cursor:pointer}
.history-actions button:hover,.saved li button:hover{border-color:var(--heart);color:var(--heart)}
.saved{list-style:none;padding:0;margin:.6rem 0}
.saved li{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.55rem .2rem;border-bottom:1px solid var(--line);margin:0}
.saved li a{display:inline-flex;align-items:center;gap:.55rem;text-decoration:none;min-width:0;
  font-weight:600;overflow-wrap:anywhere}
.saved li a:hover{text-decoration:underline}
.mark-fav{color:var(--heart)}
.mark-later{color:var(--muted)}
details.manual-save{margin-top:1rem;font-size:13.5px;color:var(--muted)}
details.manual-save summary{cursor:pointer;color:var(--ink)}
details.manual-save form{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.7rem;align-items:flex-end}
details.manual-save label{flex:1 1 12rem}
details.manual-save button{font:inherit;font-weight:600;min-height:44px;padding:0 1rem;border:0;
  border-radius:10px;background:var(--accent);color:var(--accent-ink);cursor:pointer}
.foot{margin-top:1.5rem}
.muted{color:var(--muted)}
.small{font-size:13px}

@media(max-width:600px){
  main{padding:1.5rem 1rem 3rem}
  section.card{padding:1.2rem 1.1rem 1.4rem}
}