:root{
  --tn-bg: #070a12;
  --tn-bg2:#0b1020;
  --tn-card:#0c1224;
  --tn-card2:#0b0f1d;
  --tn-border:#1f2a44;
  --tn-text:#e5e7eb;
  --tn-muted:#94a3b8;
  --tn-purple:#7c3aed;
  --tn-green:#22c55e;
  --tn-blue:#38bdf8;
  --tn-gold:#fbbf24;
  --tn-red:#fb7185;
}

html, body { height: 100%; }
body{
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(124,58,237,.18), transparent 55%),
    radial-gradient(1000px 500px at 90% 10%, rgba(34,197,94,.14), transparent 55%),
    linear-gradient(180deg, var(--tn-bg), #05070d 60%);
  color: var(--tn-text);
}

/* subtle checkered overlay (race vibe) */
body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(148,163,184,.04) 0 50%, transparent 50% 100%),
    linear-gradient(0deg,  rgba(148,163,184,.04) 0 50%, transparent 50% 100%);
  background-size: 28px 28px;
  mask-image: radial-gradient(1200px 700px at 50% 0%, rgba(0,0,0,.75), transparent 65%);
  opacity: .9;
}

a, .link-light{
  color: rgba(186,230,253,.95);
}
a:hover{ color: rgba(125,211,252,1); }

.form-label,
label,
.form-check-label{
  color: rgba(229,231,235,.95) !important;
}
.form-text{
  color: rgba(148,163,184,.95) !important;
}

.form-check-input{
  background-color: rgba(7,10,18,.65);
  border: 1px solid rgba(31,42,68,.85);
}
.form-check-input:checked{
  background-color: var(--tn-green);
  border-color: rgba(34,197,94,.6);
}

.tn-nav{
  background: rgba(9,12,22,.65);
  border-bottom: 1px solid rgba(31,42,68,.8);
  backdrop-filter: blur(10px);
}
.tn-brand img{ height: 34px; width: auto; }
.tn-brand .tn-brand-title{
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.1;
}
.tn-brand .tn-brand-sub{
  color: rgba(148,163,184,.95);
  font-size: .78rem;
  margin-top: 1px;
}
.tn-pill{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .55rem;
  border-radius: 999px;
  border: 1px solid rgba(31,42,68,.85);
  background: rgba(148,163,184,.08);
  color: rgba(229,231,235,.92);
  font-size: .75rem;
  white-space: nowrap;
}
.tn-pill-gold{
  background: rgba(251,191,36,.12);
  border-color: rgba(251,191,36,.25);
  color: rgba(253,230,138,.95);
}
.tn-illust{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  border: 1px solid rgba(31,42,68,.8);
  background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(56,189,248,.10));
  display: grid;
  place-items: center;
  box-shadow: 0 16px 40px rgba(0,0,0,.25);
}
.tn-illust svg{ width: 44px; height: 44px; opacity: .95; }
.tn-note{
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .9rem 1rem;
  border: 1px solid rgba(31,42,68,.8);
  background: rgba(12,18,36,.55);
  border-radius: 14px;
}
.tn-note .tn-note-icon{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(56,189,248,.10);
  border: 1px solid rgba(56,189,248,.20);
  color: rgba(186,230,253,.95);
}
.tn-note .tn-note-title{
  font-weight: 800;
  font-size: .95rem;
  margin-bottom: .15rem;
}
.tn-legend{
  display:flex;
  flex-wrap: wrap;
  gap: .55rem .75rem;
  margin: .4rem 0 0;
}
.tn-legend .tn-legend-item{
  display:flex;
  align-items:center;
  gap:.35rem;
  color: rgba(229,231,235,.88);
  font-size: .85rem;
}
.tn-legend .tn-legend-mark{
  font-weight: 900;
  width: 1.6rem;
  text-align:center;
}
.tn-divider{
  height: 1px;
  background: rgba(31,42,68,.6);
  margin: .9rem 0;
}

.tn-container{ max-width: 1100px; }

.tn-card{
  background: linear-gradient(180deg, rgba(12,18,36,.9), rgba(10,14,28,.85));
  border: 1px solid rgba(31,42,68,.8);
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.tn-card .card-header{
  background: transparent;
  border-bottom: 1px solid rgba(31,42,68,.7);
}

.tn-input, .tn-select{
  background: rgba(7,10,18,.65) !important;
  border: 1px solid rgba(31,42,68,.85) !important;
  color: var(--tn-text) !important;
  border-radius: 12px !important;
}
.tn-input::placeholder{ color: rgba(148,163,184,.65); }

/* 日付入力フィールドのスタイル */
input[type="date"].tn-input {
  padding-right: 2.5rem;
  position: relative;
}

/* WebKit系ブラウザ（Chrome、Safari）のカレンダーアイコン */
input[type="date"].tn-input::-webkit-calendar-picker-indicator {
  filter: invert(0.8) brightness(1.2);
  cursor: pointer;
  opacity: 0.9;
}

input[type="date"].tn-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Firefoxのカレンダーアイコン */
input[type="date"].tn-input::-moz-calendar-picker-indicator {
  filter: invert(0.8) brightness(1.2);
  cursor: pointer;
  opacity: 0.9;
}

input[type="date"].tn-input::-moz-calendar-picker-indicator:hover {
  opacity: 1;
}

.btn-tn{
  background: linear-gradient(135deg, rgba(124,58,237,.95), rgba(34,197,94,.85));
  border: 0;
  color: #0b0f19;
  font-weight: 700;
  border-radius: 12px;
}
.btn-tn:hover{ filter: brightness(1.05); }

.btn-tn-ghost{
  background: rgba(148,163,184,.08);
  border: 1px solid rgba(31,42,68,.85);
  color: var(--tn-text);
  border-radius: 12px;
}
.btn-tn-ghost:hover{ background: rgba(148,163,184,.12); }

.tn-table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--tn-text);
}
.tn-table thead th{
  color: rgba(229,231,235,.9);
  border-bottom: 1px solid rgba(31,42,68,.7);
}
.tn-table td, .tn-table th{
  border-top: 1px solid rgba(31,42,68,.45);
}
.tn-table tr:hover{
  background: rgba(56,189,248,.06);
}
.tn-table tr:hover td{
  color: rgba(229,231,235,.95) !important;
}
.tn-table tr:hover td.text-muted{
  color: rgba(148,163,184,.95) !important;
}

.badge-tn{
  background: rgba(148,163,184,.12);
  border: 1px solid rgba(31,42,68,.8);
  color: var(--tn-text);
}
.badge-on{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.35);
  color: #a7f3d0;
}
.badge-off{
  background: rgba(148,163,184,.08);
  border-color: rgba(148,163,184,.25);
  color: rgba(148,163,184,.95);
}
.badge-status{
  background: rgba(56,189,248,.10);
  border-color: rgba(56,189,248,.25);
  color: rgba(186,230,253,.95);
}

.mark { font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; }
.mark-◎ { color: #fb7185; }
.mark-〇 { color: #fbbf24; }
.mark-▲ { color: #60a5fa; }
.mark-△ { color: #cbd5e1; }
.mark-注 { color: #86efac; }

.text-muted{ color: var(--tn-muted) !important; }

/* 見出しの色を明るく */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: rgba(229,231,235,.95) !important;
}

/* 強調テキスト（strong, b）の色を明るく */
strong, b {
  color: rgba(229,231,235,.98) !important;
  font-weight: 600;
}

/* code タグの色を明るく */
code {
  background: rgba(31,42,68,.5);
  color: rgba(186,230,253,.95) !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.alert{
  border-radius: 14px;
  border: 1px solid rgba(31,42,68,.8);
  background: rgba(12,18,36,.75);
  color: var(--tn-text);
}
.alert-danger{ border-color: rgba(248,113,113,.35); }
.alert-success{ border-color: rgba(34,197,94,.35); }

/* レース名の表示スタイル */
.race-name-display {
  color: rgba(229,231,235,.9) !important;
  font-size: 1.5rem; /* h4と同じサイズ */
  font-weight: 500;
  margin-top: 0.25rem;
}