/* ================================================================
   Parallel Official Site — base.css
   Variables / Reset / Typography / Shared Utilities
   ================================================================ */

:root {
  --bg-main:       #0a0a0f;
  --bg-sidebar:    #0f0f16;
  --bg-panel:      #13131a;
  --bg-tab-row:    #0d0d13;
  --bg-child-row:  #111118;
  --bg-input:      #07070c;
  --bg-hover:      #1a1a24;
  --text-main:     #e8e9f0;
  --text-muted:    #5a5b6e;
  --text-sub:      #8889a0;
  --border:        #1e1e2e;
  --border-light:  #252535;
  --accent:        #5c6bc0;
  --accent-bright: #7986cb;
  --accent-glow:   rgba(92,107,192,0.25);
  --danger:        #ef5350;
  --success:       #66bb6a;
  --warn:          #ffa726;
  --accent-gradient: linear-gradient(135deg, #5c6bc0 0%, #9c27b0 100%);
  --tab-h:         32px;
}

* {
  box-shadow: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  background-color: var(--bg-main);
  color: var(--text-main);
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1.6;
}

body {
  overflow-x: hidden;
}

a {
  color: var(--accent-bright);
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: #fff;
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.text-gradient {
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.section-title {
  font-size: 2.2rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  letter-spacing: -0.02em;
}
.section-title.text-left {
  text-align: left;
}
.section-subtitle {
  color: var(--text-sub);
  text-align: center;
  margin-bottom: 60px;
  font-size: 1.1rem;
}

.btn-primary {
  background: var(--accent-gradient);
  color: #fff;
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 500;
  display: inline-block;
  box-shadow: 0 4px 15px rgba(92,107,192,0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(92,107,192,0.6);
  color: #fff;
}

.btn-secondary {
  background: transparent;
  color: var(--text-main);
  border: 1px solid var(--border-light);
  padding: 14px 28px;
  border-radius: 8px;
  font-weight: 500;
  display: inline-block;
  transition: background 0.2s, border-color 0.2s;
}
.btn-secondary:hover {
  background: var(--bg-hover);
  border-color: var(--text-muted);
}

.code-font {
  font-family: 'JetBrains Mono', monospace;
  color: var(--accent-bright);
  font-size: 0.85rem;
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}