:root {
  --fg:#1f2933; --muted:#62707d; --bg:#f7f8fa; --card:#fff;
  --accent:#1f6feb; --accent-d:#1550b3; --line:#e3e8ee;
  --warn-bg:#fff8e6; --warn-line:#e0b400; --warn-fg:#9a6b00;
  --err-bg:#fdecec; --err-line:#e0857f; --err-fg:#a32118;
  --ok-bg:#e9f7ef; --ok-line:#86cfa3; --ok-fg:#1d7a46;
}
* { box-sizing: border-box; }
body {
  margin:0; font-family:-apple-system,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  color:var(--fg); background:var(--bg); line-height:1.7;
}
.wrap { max-width: 720px; margin: 0 auto; padding: 40px 18px 64px; }
header h1 { font-size: 1.7rem; margin:.2em 0 .1em; }
header.center { text-align:center; }
header.bar { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
header p.sub { color:var(--muted); margin:.2em 0 1.4em; }
h2 { font-size: 1.05rem; margin: 2em 0 .6em; color:var(--muted); font-weight:600; }
.breadcrumb { font-size:.88rem; margin-bottom: 10px; }
.breadcrumb a, .links a { color:var(--accent); text-decoration:none; }
.breadcrumb a:hover, .links a:hover { text-decoration:underline; }
.center { text-align:center; }
.muted { color:var(--muted); }
.small { font-size:.85rem; }

.card {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:18px 20px; margin:14px 0;
}
.account table { width:100%; border-collapse:collapse; }
.account th, .account td { text-align:left; padding:7px 6px; border-bottom:1px solid var(--line); }
.account th { width:38%; color:var(--muted); font-weight:600; }
.account tr:last-child th, .account tr:last-child td { border-bottom:none; }
code { background:#eef1f5; padding:1px 6px; border-radius:5px; font-size:.92em; }

/* forms */
.form { display:flex; flex-direction:column; gap:14px; }
.form label { display:flex; flex-direction:column; gap:6px; font-size:.92rem; color:var(--muted); }
.form input {
  font-size:1rem; padding:10px 12px; border:1px solid var(--line); border-radius:8px;
  background:#fff; color:var(--fg);
}
.form input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,111,235,.15); }
button[type=submit], .btn {
  display:inline-block; background:var(--accent); color:#fff; border:none; cursor:pointer;
  font-size:1rem; font-weight:600; padding:11px 20px; border-radius:8px; text-decoration:none; text-align:center;
}
button[type=submit]:hover, .btn:hover { background:var(--accent-d); }
.form .hint { margin:.2em 0 0; color:var(--muted); font-size:.85rem; }
.links { margin-top:18px; }

.logout-form { flex:0 0 auto; margin:0; }
.logout {
  font-size:.88rem; color:var(--muted); text-decoration:none; cursor:pointer; font-family:inherit;
  border:1px solid var(--line); border-radius:8px; padding:7px 14px; background:#fff; white-space:nowrap;
}
.logout:hover { border-color:#c9d4e0; color:var(--fg); }

/* alerts */
.alert { border-radius:10px; padding:12px 16px; margin:16px 0; font-size:.95rem; }
.alert.error   { background:var(--err-bg);  border:1px solid var(--err-line);  color:var(--err-fg); }
.alert.success { background:var(--ok-bg);   border:1px solid var(--ok-line);   color:var(--ok-fg); }
.alert.warn    { background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-fg); }

/* quota bar */
.quota-head { display:flex; justify-content:space-between; font-size:.92rem; margin-bottom:8px; }
.bar-track { background:#eef1f5; border-radius:999px; height:10px; overflow:hidden; }
.bar-fill { background:var(--accent); height:100%; border-radius:999px; transition:width .3s; }
/* stacked (mail/web/other) bar + breakdown legend */
.bar-track.bar-stack { font-size:0; white-space:nowrap; }
.bar-seg { display:inline-block; height:100%; vertical-align:top; transition:width .3s; }
.bd { margin-top:10px; display:grid; gap:8px; }
.bd-item { display:grid; gap:4px; }
.bd-row { display:flex; align-items:center; gap:8px; font-size:.9rem; }
.bd-dot { width:10px; height:10px; border-radius:3px; flex:none; }
.bd-val { margin-left:auto; }
.bd-bar { height:6px; margin-left:18px; }

/* service cards */
.toc { list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.toc a {
  display:flex; align-items:flex-start; gap:14px; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px;
  transition: box-shadow .15s, transform .15s, border-color .15s;
}
.toc a:hover { box-shadow:0 6px 18px rgba(31,41,51,.10); transform:translateY(-2px); border-color:#c9d4e0; }
.toc .ico { font-size:1.5rem; line-height:1.2; }
.toc .txt h3 { margin:0 0 .15em; font-size:1.05rem; color:var(--accent-d); }
.toc .txt p { margin:0; color:var(--muted); font-size:.9rem; }

footer { margin-top:3em; color:var(--muted); font-size:.85rem; border-top:1px solid var(--line); padding-top:16px; }

/* ---- login history ---- */
.login-hist { width:100%; border-collapse:collapse; margin-top:6px; font-size:.86rem; }
.login-hist th, .login-hist td { text-align:left; padding:5px 8px; border-bottom:1px solid #eef1f4; }
.login-hist th { font-weight:600; color:#555; }
.login-hist code { font-size:.85em; }
.small { font-size:.8rem; }

/* ---- mail filters (modern) ---- */
.fhint {
  background:linear-gradient(180deg,#f3f8ff,#eef4ff); border:1px solid #d6e4ff; color:#39506e;
  border-radius:12px; padding:13px 16px; font-size:.86rem; line-height:1.65; margin:6px 0 20px;
}
.fhint strong { color:var(--accent-d); }
.filters { display:flex; flex-direction:column; gap:14px; }
.frow {
  position:relative; background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:15px 16px 15px 22px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  box-shadow:0 1px 2px rgba(16,24,40,.04); transition:border-color .15s, box-shadow .15s, transform .1s;
}
.frow:hover { border-color:#bcd0ed; box-shadow:0 4px 14px rgba(16,24,40,.08); }
.frow::before {
  content:""; position:absolute; left:0; top:12px; bottom:12px; width:4px;
  border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--accent),#4f93ff); opacity:.9;
}
.frow .lbl {
  font-size:.7rem; font-weight:700; letter-spacing:.05em; color:var(--muted);
  background:#eef2f8; padding:4px 10px; border-radius:999px; flex:none;
}
.frow select, .frow input[type=text], .frow input[type=email] {
  padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:.92rem;
  font-family:inherit; color:var(--fg); background:#fff; min-height:42px; box-sizing:border-box;
  transition:border-color .15s, box-shadow .15s;
}
.frow select { cursor:pointer; background-image:none; }
.frow input[type=text], .frow input[type=email] { flex:1 1 160px; min-width:150px; }
.frow select:focus, .frow input:focus {
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,111,235,.16);
}
.frow .arrow { color:var(--accent); font-weight:800; font-size:1.15rem; line-height:1; flex:none; }
.t-folder { flex:1 1 160px; }
.t-fwd { display:flex; gap:8px; align-items:center; flex-wrap:wrap; flex:1 1 220px; }
.t-fwd input[type=email] { flex:1 1 160px; }
.cpy {
  font-size:.83rem; color:var(--muted); display:inline-flex; align-items:center; gap:5px;
  white-space:nowrap; cursor:pointer; user-select:none;
}
.cpy input { width:16px; height:16px; accent-color:var(--accent); margin:0; }
.factions {
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  margin-top:22px; flex-wrap:wrap;
}
.fcount { font-variant-numeric:tabular-nums; }
button.ghost {
  background:#fff; border:1px solid var(--line); color:var(--fg); border-radius:10px;
  padding:10px 18px; font-size:.9rem; font-weight:600; cursor:pointer; font-family:inherit;
  transition:background .15s, border-color .15s, transform .1s;
}
button.ghost:hover { background:#f4f7fb; border-color:#bcd0ed; }
button.ghost:active { transform:translateY(1px); }
@media (max-width:560px){
  .frow { padding:14px; gap:8px; }
  .frow select, .frow input { flex-basis:100%; }
  .frow .lbl, .frow .arrow { align-self:flex-start; }
}

/* ---- connection info ---- */
table.kv { width:100%; border-collapse:collapse; margin-top:6px; font-size:.9rem; }
table.kv th, table.kv td { text-align:left; padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
table.kv th { font-weight:600; color:#3a4656; white-space:nowrap; }
.note-inline { margin-top:10px; background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-fg); border-radius:8px; padding:9px 12px; font-size:.85rem; }

/* ---- vacation / senders forms ---- */
.fld { margin:14px 0; }
.fld > label { display:block; font-size:.9rem; color:#33414f; }
.fld input[type=text], .fld textarea, .fld select { width:100%; box-sizing:border-box; margin-top:5px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; font-size:.92rem; font-family:inherit; }
.fld textarea { resize:vertical; line-height:1.5; }
.fld input:focus, .fld textarea:focus, .fld select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(31,111,235,.16); }
.toggle { display:flex; align-items:center; gap:8px; font-size:.95rem; cursor:pointer; }
.toggle input { width:18px; height:18px; accent-color:var(--accent); }

/* ---- announcements ---- */
.annwrap { margin:4px 0 8px; }
.ann { border:1px solid var(--line); border-left-width:4px; border-radius:10px; padding:11px 14px; margin:8px 0; background:var(--card); }
.ann-info { border-left-color:var(--accent); }
.ann-warn { border-left-color:var(--warn-line); background:var(--warn-bg); }
.ann-h { display:flex; align-items:center; gap:8px; }
.ann-t { font-weight:700; }
.ann-d { margin-left:auto; font-size:.78rem; }
.ann-b { margin-top:6px; font-size:.9rem; line-height:1.6; color:#33414f; }

/* ---- file manager ---- */
.fm-bar { margin:8px 0; }
.fm-bc { font-size:.9rem; }
.fm-tools { display:flex; gap:14px; flex-wrap:wrap; margin:10px 0 14px; }
.fm-tools form { display:flex; gap:6px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:8px 10px; }
.fm-tools input[type=text], .fm-tools input[type=file] { font-size:.85rem; }
table.fm { width:100%; border-collapse:collapse; background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:.9rem; }
table.fm th, table.fm td { padding:8px 10px; text-align:left; border-bottom:1px solid var(--line); }
table.fm th { background:#f7f9fb; font-weight:600; }
table.fm td.num, table.fm th.num { text-align:right; font-variant-numeric:tabular-nums; }
.fm-act a { font-size:.82rem; margin-right:4px; }
.fm-act a.del { color:var(--err-fg); }
.fm-editor { width:100%; box-sizing:border-box; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.85rem; border:1px solid var(--line); border-radius:8px; padding:10px; line-height:1.5; }

/* ---- passkey ---- */
.pk-or { display:flex; align-items:center; text-align:center; color:var(--muted); font-size:.8rem; margin:14px 0 10px; }
.pk-or::before, .pk-or::after { content:""; flex:1; border-top:1px solid var(--line); }
.pk-or span { padding:0 10px; }
.pk-btn { width:100%; background:#fff; border:1px solid var(--accent); color:var(--accent); border-radius:10px; padding:11px; font-size:.95rem; font-weight:700; cursor:pointer; font-family:inherit; }
.pk-btn:hover { background:#f0f5ff; }
.pk-msg { color:var(--err-fg); font-size:.85rem; text-align:center; min-height:1em; margin-top:8px; }

.fm-cutbar { background:var(--warn-bg); border:1px solid var(--warn-line); color:var(--warn-fg); border-radius:8px; padding:8px 12px; margin:8px 0; font-size:.88rem; }
.fm-cutbar form { margin:0 2px; }