/* mathru.net の account / dashboard / purchase 共通スタイル。
   mathru.net 本体と同じ Bootstrap 5.3（data-bs-theme="dark"）の上に、足りない部分だけを重ねる。 */
[hidden] { display: none !important; }

body { padding-top: 56px; min-height: 100vh; display: flex; flex-direction: column; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .list-group-item:hover, .navbar a:hover, .mn-service:hover { text-decoration: none; }

/* ---------- header ---------- */
.mn-brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.mn-brand img { width: 24px; height: 24px; }
.mn-brand span { font-family: "Orbitron", sans-serif; font-size: 1.25rem; }
.mn-navbar .navbar-nav .nav-link.active { color: var(--bs-emphasis-color); }
.mn-navbar .form-select { width: auto; }
.mn-user-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- layout ---------- */
.mn-main { flex: 1; padding-top: 2.5rem; padding-bottom: 4rem; }
.mn-title { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; }
.mn-title i { font-size: 1.5rem; color: var(--bs-secondary-color); width: 2rem; text-align: center; }
.mn-sub { color: var(--bs-secondary-color); margin-bottom: 1.75rem; }
.mn-side h5 { margin: 0.5rem 0; }
.mn-side .list-group-item i { width: 1.25rem; margin-right: 0.5rem; color: var(--bs-secondary-color); text-align: center; }

/* ログイン画面は中央のカード1枚だけにする。 */
.mn-auth { max-width: 440px; margin: 0 auto; }
.mn-auth-logo { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.mn-auth-logo img { width: 56px; height: 56px; }
.mn-auth-logo span { font-family: "Orbitron", sans-serif; font-size: 1.75rem; }

/* ---------- parts ---------- */
.mn-secret {
  font-family: var(--bs-font-monospace); word-break: break-all; background: var(--bs-tertiary-bg);
  border: 1px dashed var(--bs-primary-border-subtle); border-radius: var(--bs-border-radius); padding: 0.75rem 1rem;
}
.mn-stat { font-size: 2rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.mn-stat-label { color: var(--bs-secondary-color); font-size: 0.875rem; }
.mn-bars { display: flex; align-items: flex-end; gap: 3px; height: 120px; }
.mn-bars > span { flex: 1; background: var(--bs-primary); opacity: 0.8; border-radius: 3px 3px 0 0; min-height: 1px; }
.mn-service { color: inherit; transition: border-color 0.15s; }
.mn-service:hover { border-color: var(--bs-primary); color: inherit; }
.mn-plan.mn-current { border-color: var(--bs-primary); }
.mn-price { font-size: 1.5rem; font-weight: 700; }
.table td.num, .table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.table > :not(caption) > * > * { background-color: transparent; }
/* 狭い画面では列を折り返さず、.table-responsive の横スクロールに任せる。 */
.table-responsive .table th, .table-responsive .table td { white-space: nowrap; }

/* ---------- footer ---------- */
.mn-footer { border-top: 1px solid var(--bs-border-color); color: var(--bs-secondary-color); font-size: 0.875rem; padding: 1.5rem 0; }
.mn-footer a { color: var(--bs-secondary-color); }
.mn-footer a:hover { color: var(--bs-emphasis-color); }
.mn-footer .mn-social a { font-size: 1.1rem; }