/* Rocks AI Cloud 共通（色・ダーク対応・部品）。各画面はこの上に足す。
   見た目の方針：Gemini のような、白〜うすい青灰の面・青のアクセント・青→紫→桃のグラデーション・丸みの強い部品。
   （他社のロゴや名前は使わない。色と形の雰囲気だけ） */
:root {
  --bg: #ffffff;            /* 画面の地 */
  --surface: #f0f4f9;       /* 左の列・カード・入力欄の面 */
  --surface-2: #e9eef6;     /* 押したとき・選んだもの */
  --surface-3: #dde3ea;
  --card: #ffffff;          /* 管理画面などのカード（地より一段上） */
  --ink: #1f1f1f; --sub: #5e6368; --line: #e1e5ea; --line-strong: #c4c7c5;
  --accent: #0b57d0; --accent-strong: #0b57d0; --accent-ink: #ffffff;
  --accent-soft: #d3e3fd; --accent-soft-ink: #041e49;
  --ok: #146c2e; --warn: #8a5300; --ng: #b3261e;
  --user: #e9eef6; --code: #f0f4f9; --stone: #1f1f1f;
  --grad: linear-gradient(90deg, #4285f4 0%, #9b72cb 45%, #d96570 100%);
  --grad-soft: linear-gradient(135deg, rgba(66,133,244,.12), rgba(155,114,203,.12) 50%, rgba(217,101,112,.12));
  --shadow: 0 1px 2px rgba(60,64,67,.12), 0 2px 6px rgba(60,64,67,.10);
  --shadow-lg: 0 4px 12px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.12);
  --radius: 16px; --radius-sm: 12px; --pill: 999px;
  --font: "Google Sans", "Google Sans Text", "Noto Sans JP", -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #131314; --surface: #1e1f20; --surface-2: #282a2c; --surface-3: #333537; --card: #1e1f20;
    --ink: #e3e3e3; --sub: #a8abb0; --line: #2f3133; --line-strong: #444746;
    --accent: #a8c7fa; --accent-strong: #a8c7fa; --accent-ink: #062e6f;
    --accent-soft: #004a77; --accent-soft-ink: #c2e7ff;
    --ok: #6dd58c; --warn: #f2b84b; --ng: #f2b8b5;
    --user: #282a2c; --code: #282a2c; --stone: #e3e3e3;
    --grad-soft: linear-gradient(135deg, rgba(66,133,244,.18), rgba(155,114,203,.18) 50%, rgba(217,101,112,.18));
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
    --shadow-lg: 0 4px 16px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #131314; --surface: #1e1f20; --surface-2: #282a2c; --surface-3: #333537; --card: #1e1f20;
  --ink: #e3e3e3; --sub: #a8abb0; --line: #2f3133; --line-strong: #444746;
  --accent: #a8c7fa; --accent-strong: #a8c7fa; --accent-ink: #062e6f;
  --accent-soft: #004a77; --accent-soft-ink: #c2e7ff;
  --ok: #6dd58c; --warn: #f2b84b; --ng: #f2b8b5;
  --user: #282a2c; --code: #282a2c; --stone: #e3e3e3;
  --grad-soft: linear-gradient(135deg, rgba(66,133,244,.18), rgba(155,114,203,.18) 50%, rgba(217,101,112,.18));
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 6px rgba(0,0,0,.3);
  --shadow-lg: 0 4px 16px rgba(0,0,0,.5);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--accent-strong); text-underline-offset: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { padding: 8px 18px; border-radius: var(--pill); border: 1px solid var(--line-strong); background: transparent; cursor: pointer;
  font-weight: 500; transition: background-color .15s, border-color .15s, box-shadow .15s; }
button:hover { background: var(--surface); }
button.primary { background: var(--accent-strong); border-color: transparent; color: var(--accent-ink); font-weight: 600; }
button.primary:hover { background: var(--accent-strong); box-shadow: var(--shadow); filter: brightness(1.06); }
button.danger { color: var(--ng); border-color: color-mix(in srgb, var(--ng) 55%, transparent); }
button.danger:hover { background: color-mix(in srgb, var(--ng) 10%, transparent); }
button:disabled { opacity: .45; cursor: default; box-shadow: none; filter: none; }
input[type=text], input[type=password], input[type=number], input[type=email], input[type=url], input[type=month], input[type=date], select, textarea {
  width: 100%; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--bg);
  transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
textarea { resize: vertical; }
label { display: block; font-size: 13px; font-weight: 600; margin: 12px 0 5px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sub { color: var(--sub); font-size: 13px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.badge { display: inline-block; font-size: 12px; padding: 1px 10px; border-radius: var(--pill); background: var(--surface-2); color: var(--sub); border: 0; }
.badge.ok { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); }
.badge.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.badge.ng { color: var(--ng); background: color-mix(in srgb, var(--ng) 14%, transparent); }
.msg { padding: 11px 14px; border-radius: var(--radius-sm); margin: 10px 0; font-size: 14px; background: var(--surface); }
.msg.ok { background: color-mix(in srgb, var(--ok) 12%, transparent); }
.msg.ng { background: color-mix(in srgb, var(--ng) 12%, transparent); }
.msg.warn { background: color-mix(in srgb, var(--warn) 14%, transparent); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
table.tbl th, table.tbl td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
table.tbl th { font-size: 12px; color: var(--sub); font-weight: 600; }
table.tbl tr:hover td { background: color-mix(in srgb, var(--surface) 60%, transparent); }
td.num, th.num, table.tbl td.num, table.tbl th.num { text-align: right; white-space: nowrap; }

/* ブランド（形は「積み上げ」のまま。いちばん上の石をグラデーションに） */
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex-shrink: 0; }
.brand svg { width: 30px; height: 28px; flex-shrink: 0; }
.brand b { font-size: 20px; font-weight: 600; letter-spacing: -.2px; white-space: nowrap; }
.brand b span { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand .role { font-size: 12px; font-weight: 600; color: var(--sub); background: var(--surface-2); border-radius: var(--pill); padding: 2px 10px; margin-left: 6px; white-space: nowrap; }
.stone { fill: var(--stone); }
.grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Markdown 表示 */
.md h1, .md h2, .md h3 { line-height: 1.4; margin: 1.1em 0 .45em; font-weight: 600; } .md h1 { font-size: 21px; } .md h2 { font-size: 18px; } .md h3 { font-size: 16px; }
.md p { margin: .55em 0; } .md ul, .md ol { padding-left: 1.4em; margin: .45em 0; } .md li { margin: .2em 0; }
.md code { background: var(--code); padding: 1px 6px; border-radius: 6px; font-size: 13px; }
.md pre { background: var(--code); padding: 12px 14px; border-radius: var(--radius-sm); overflow: auto; white-space: pre-wrap; font-size: 13px; }
.md table { border-collapse: collapse; margin: .7em 0; font-size: 13px; } .md th, .md td { border: 1px solid var(--line); padding: 6px 10px; }
.md th { background: var(--surface); }
.md blockquote { border-left: 3px solid var(--accent-soft); margin: .6em 0; padding-left: 12px; color: var(--sub); }
.hidden { display: none !important; }
@media (max-width: 760px) { html, body { font-size: 14px; } }
/* 件数の動き（管理画面・マスター管理） */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.timeline li:last-child { border-bottom: 0; }
.timeline .when { flex: none; min-width: 120px; color: var(--sub); font-size: 13px; font-variant-numeric: tabular-nums; }
.timeline .badge { flex: none; }