/* デザイン「C HUD（計器）」（10/28 オーナー）。html.fx＝夜／html.fx.fx-day＝昼。色・線・カード・ボタンだけ（中身・動きは変えない） */
html.fx[data-theme] {
  --bg: #03080c; --panel: #071118; --fx-glass: rgba(79, 227, 255, .03); --ink: #d8f6ff; --muted: #7d9aab; --line: rgba(80, 220, 255, .22);
  --accent: #4fe3ff; --accent-ink: #03080c; --accent-soft: rgba(79, 227, 255, .10);
  --ok: #4fffb0; --ok-soft: rgba(79, 255, 176, .10); --err: #ff6b6b; --err-soft: rgba(255, 107, 107, .12); --warn-soft: rgba(255, 159, 67, .12);
  --fx-solid: #071118; --fx-dot: rgba(80, 220, 255, .20); --radius: 2px; color-scheme: dark;
}
html.fx.fx-day[data-theme] {
  --bg: #eef5f8; --panel: #ffffff; --fx-glass: #ffffff; --ink: #0b2230; --muted: #557080; --line: rgba(0, 120, 160, .22);
  --accent: #0089b3; --accent-ink: #fff; --accent-soft: rgba(0, 137, 179, .08);
  --ok: #0a9c62; --ok-soft: rgba(10, 156, 98, .08); --err: #c92a2a; --err-soft: rgba(201, 42, 42, .07); --warn-soft: rgba(214, 110, 0, .09);
  --fx-solid: #ffffff; --fx-dot: rgba(0, 120, 160, .13); color-scheme: light;
}
html.fx body { background-color: var(--bg); background-image: radial-gradient(var(--fx-dot) 1px, transparent 1px); background-size: 22px 22px; background-attachment: fixed; }
html.fx h1 { font-weight: 500; letter-spacing: .1em; }
html.fx .num, html.fx td.num { font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; letter-spacing: .01em; }
html.fx .card > h2:first-child, html.fx .hm-card > h2 { font-weight: 500; letter-spacing: .22em; color: var(--accent); }
html.fx .card, html.fx .hm-card, html.fx .of-post, html.fx .gp-card { background: var(--fx-glass); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
html.fx .card { position: relative; }
html.fx .card::before, html.fx .card::after { content: ""; position: absolute; width: 12px; height: 12px; border: 2px solid var(--accent); pointer-events: none; }
html.fx .card::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
html.fx .card::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
html.fx .top, html.fx .side, html.fx .sidebar { background: var(--panel); border-color: var(--line); }
html.fx .top nav a.on, html.fx .side a.on, html.fx .menu a.on { background: var(--accent-soft); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
html.fx .btn { border-radius: 2px; }
html.fx .btn:not(.primary) { background: transparent; border: 1px solid var(--line); color: var(--ink); }
html.fx .btn:hover { border-color: var(--accent); color: var(--accent); }
html.fx .btn.primary, html.fx button.primary { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); border-radius: 2px; letter-spacing: .06em; box-shadow: 0 0 12px rgba(79, 227, 255, .18); }
html.fx.fx-day .btn.primary, html.fx.fx-day button.primary { background: var(--accent); color: #fff; box-shadow: none; }
html.fx input:not([type=checkbox]):not([type=radio]), html.fx select, html.fx textarea { background: var(--panel); border: 1px solid var(--line); color: var(--ink); border-radius: 2px; }
html.fx input:focus, html.fx select:focus, html.fx textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
html.fx select option { background: var(--fx-solid); color: var(--ink); }
html.fx table th { background: transparent; color: var(--accent); font-weight: 500; letter-spacing: .08em; }
html.fx table td, html.fx table th { border-color: var(--line); }
html.fx tr:hover > td { background: var(--accent-soft); }
html.fx .pgtabs a, html.fx .of-tabs a { border-radius: 2px; }
html.fx .pgtabs a.on, html.fx .of-tabs a.on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
html.fx .me-menu, html.fx dialog, html.fx .modal, html.fx .pop { background: var(--fx-solid); border-color: var(--line); border-radius: 2px; }