/* TM CMS Page */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
    --navy: #0a1628;
    --deep: #0d1f3c;
    --mid: #152847;
    --panel: #1a3158;
    --accent: #4db8ff;
    --accent2: #00e5c0;
    --gold: #f0b429;
    --white: #f0f6ff;
    --muted: #7a9ac0;
    --border: rgba(77,184,255,0.18);
    --glow: rgba(77,184,255,0.12);
  }

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

  body {
    background: var(--navy);
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
  }

  /* Mountain silhouette background */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
      radial-gradient(ellipse 80% 50% at 50% 100%, rgba(21,40,71,0.9) 0%, transparent 70%),
      radial-gradient(ellipse 60% 40% at 20% 100%, rgba(13,31,60,0.8) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
  }

  .stars {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .stars::before, .stars::after {
    content: '';
    position: absolute;
    width: 2px; height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow:
      120px 40px rgba(255,255,255,0.6),
      300px 80px rgba(255,255,255,0.4),
      480px 20px rgba(255,255,255,0.7),
      600px 100px rgba(255,255,255,0.3),
      750px 50px rgba(255,255,255,0.5),
      900px 30px rgba(255,255,255,0.6),
      1050px 90px rgba(255,255,255,0.4),
      200px 150px rgba(255,255,255,0.3),
      400px 130px rgba(255,255,255,0.5),
      650px 170px rgba(255,255,255,0.4),
      820px 120px rgba(255,255,255,0.6),
      1000px 160px rgba(255,255,255,0.3),
      80px 200px rgba(255,255,255,0.4),
      350px 220px rgba(255,255,255,0.5),
      550px 240px rgba(255,255,255,0.3),
      700px 210px rgba(255,255,255,0.6),
      950px 230px rgba(255,255,255,0.4),
      1100px 250px rgba(255,255,255,0.3);
  }

  .container {
    position: relative;
    z-index: 1;
    max-width: 540px;
    margin: 0 auto;
    padding: 24px 16px 48px;
  }

  header {
    text-align: center;
    padding: 32px 0 28px;
  }

  .logo-icon {
    font-size: 40px;
    display: block;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 16px rgba(77,184,255,0.6));
  }

  header h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(42px, 10vw, 64px);
    letter-spacing: 4px;
    line-height: 1;
    color: var(--white);
    text-shadow: 0 0 40px rgba(77,184,255,0.4);
  }

  header p {
    margin-top: 10px;
    color: var(--muted);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  .card {
    background: linear-gradient(145deg, rgba(26,49,88,0.9), rgba(13,31,60,0.95));
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 28px 24px;
    margin-bottom: 16px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  }

  .section-label {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 13px;
    letter-spacing: 3px;
    color: var(--accent);
    text-transform: uppercase;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
  }

  /* Radio pill groups */
  .pill-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 0;
  }

  .pill-group input[type="radio"] { display: none; }

  .pill-group label {
    flex: 1;
    min-width: 90px;
    padding: 14px 10px;
    text-align: center;
    border-radius: 12px;
    border: 1.5px solid var(--border);
    background: rgba(10,22,40,0.6);
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
  }

  .pill-group label:hover {
    border-color: rgba(77,184,255,0.4);
    color: var(--white);
  }

  .pill-group input[type="radio"]:checked + label {
    background: linear-gradient(135deg, rgba(77,184,255,0.25), rgba(0,229,192,0.15));
    border-color: var(--accent);
    color: var(--white);
    box-shadow: 0 0 20px rgba(77,184,255,0.2);
  }

  /* Select inputs */
  .select-wrap {
    position: relative;
    margin-bottom: 14px;
  }

  .select-wrap:last-child { margin-bottom: 0; }

  .select-label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
    font-weight: 500;
  }

  .select-wrap select {
    width: 100%;
    padding: 16px 48px 16px 18px;
    background: rgba(10,22,40,0.7);
    border: 1.5px solid var(--border);
    border-radius: 12px;
    color: var(--white);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: border-color 0.2s;
  }

  .select-wrap select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(77,184,255,0.1);
  }

  .select-wrap::after {
    content: '▾';
    position: absolute;
    right: 16px;
    bottom: 17px;
    color: var(--accent);
    pointer-events: none;
    font-size: 14px;
  }

  /* Result panel */
  .result-card {
    background: linear-gradient(145deg, rgba(26,49,88,0.95), rgba(13,31,60,0.98));
    border: 1px solid var(--accent);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 40px rgba(77,184,255,0.15), 0 8px 40px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
  }

  .result-card::before {
    content: '';
    position: absolute;
    top: -60px; left: -60px; right: -60px;
    height: 120px;
    background: radial-gradient(ellipse, rgba(77,184,255,0.12), transparent 70%);
    pointer-events: none;
  }

  .result-label {
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 6px;
  }

  .din-value {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(72px, 20vw, 100px);
    line-height: 1;
    color: var(--accent);
    text-shadow: 0 0 60px rgba(77,184,255,0.5);
    letter-spacing: 2px;
    transition: all 0.3s ease;
  }

  .din-value.highlight {
    animation: pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  @keyframes pop {
    0% { transform: scale(0.85); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
  }

  .din-unit {
    font-size: 16px;
    color: var(--muted);
    margin-top: -4px;
    letter-spacing: 1px;
  }

  .code-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 16px;
    background: rgba(0,229,192,0.1);
    border: 1px solid rgba(0,229,192,0.3);
    border-radius: 100px;
    font-size: 13px;
    color: var(--accent2);
    font-weight: 500;
  }

  .meta-row {
    display: flex;
    gap: 10px;
    margin-top: 20px;
  }

  .meta-box {
    flex: 1;
    background: rgba(10,22,40,0.6);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
  }

  .meta-box .meta-val {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 28px;
    color: var(--gold);
    letter-spacing: 1px;
    line-height: 1;
  }

  .meta-box .meta-key {
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 4px;
  }

  .no-result {
    padding: 24px 0;
  }
  .no-result p {
    color: var(--muted);
    font-size: 15px;
  }

  .warning {
    margin-top: 20px;
    padding: 12px 16px;
    background: rgba(240,180,41,0.08);
    border: 1px solid rgba(240,180,41,0.25);
    border-radius: 10px;
    font-size: 12px;
    color: #c89a2a;
    line-height: 1.5;
    text-align: left;
  }

  .disclaimer {
    text-align: center;
    font-size: 11px;
    color: var(--muted);
    line-height: 1.6;
    padding: 0 8px 24px;
    opacity: 0.7;
  }

  /* Mountain SVG at bottom */
  .mountain-bg {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 0;
    opacity: 0.07;
    pointer-events: none;
  }