/* ── LIFE IN ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html, body, a, button, input, label, * { cursor: auto !important; }
  button, [type="submit"], .nmi-cta, .inlab-topbar__nav a { cursor: pointer !important; }
  input[type="date"] { cursor: pointer !important; }

  :root {
    --red:     var(--in-accent, #E92038);
    --red-dim: rgba(233,32,56,.12);
    --bg:      #0a0a0a;
    --card1:   #111113;
    --card2:   #0e0e10;
    --border:  rgba(255,255,255,.06);
    --sf:      var(--in-font-display, 'Steelfish', sans-serif);
    --pp:      var(--in-font-body, 'Poppins', sans-serif);
    --topbar:  48px;
    --hud:     64px;  /* IN-LAB HUD standart yükseklik */
    --gap:     8px;
    --inlab-cta-arr-x: 5px;
  }

  html, body {
    background: var(--bg); color: #fff;
    font-family: var(--pp);
    height: 100%; overflow: hidden;
  }

  /* ── CURSOR CANVAS ── */
  #bgCanvas { display: none; }

  /* ── INTRO SCREEN ── */
  #mcIntro {
    position: fixed; inset: 0; z-index: 8000;
    background:
      radial-gradient(ellipse at 50% 45%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.88) 60%, rgba(2,2,2,.96) 100%),
      url('../images/lifein-intro-bg.jpg') center/cover no-repeat,
      var(--bg);
    animation: mcIntroBreath 18s ease-in-out infinite;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: calc(var(--topbar) + 2rem) 2rem 2rem;
  }
  @keyframes mcIntroBreath {
    0%, 100% { background-size: auto, 108% auto, auto; background-position: center, 50% 50%, center; }
    50%      { background-size: auto, 114% auto, auto; background-position: center, 52% 48%, center; }
  }
  #mcIntro.hidden { display: none; }
  #mcIntro::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0px 1px, transparent 1px 3px);
    mix-blend-mode: overlay; opacity: .6; z-index: 0;
  }
  #mcIntro > * { position: relative; z-index: 1; }

  @keyframes introFadeUp {
    to { opacity: 1; transform: translateY(0); }
  }

  .mc-form-fields {
    display: flex; flex-direction: row; gap: 0; margin-bottom: 1.8rem;
    width: 100%; max-width: 640px;
  }
  .mc-date-row {
    display: flex; flex-direction: column; gap: .35rem; flex: 1;
    border: 1px solid rgba(255,255,255,.08); padding: .75rem 1.3rem;
    background: rgba(255,255,255,.02);
  }
  .mc-form-fields .mc-date-row:first-child {
    border-right: none;
  }
  .mc-date-row label {
    font-family: var(--pp); font-size: .36rem; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(255,255,255,.28); flex-shrink: 0;
  }
  .mc-date-row input[type=date],
  .mc-date-row input[type=text] {
    background: transparent; border: none; border-bottom: 1px solid rgba(255,255,255,.15);
    color: #fff; font-family: var(--sf); font-size: 1.3rem;
    letter-spacing: .05em; padding: .2rem 0; outline: none;
    -webkit-appearance: none; appearance: none; color-scheme: dark;
    width: 100%;
  }
  .mc-date-row input[type=date]:focus,
  .mc-date-row input[type=text]:focus { border-bottom-color: var(--red); }
  .mc-date-row input[type=date]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.3); }
  .mc-date-row input[type=text]::placeholder { color: rgba(255,255,255,.18); }
  .nmi-cta:disabled { opacity: .35; }
  /* Boş input uyarısı */
  .mc-form-warn {
    min-height: 1em; margin: -1.2rem 0 1.6rem; text-align: center;
    font-family: var(--pp, sans-serif); font-size: .62rem; font-weight: 500;
    letter-spacing: .12em; text-transform: uppercase; color: #ff6072;
    opacity: 0; transform: translateY(-4px); transition: opacity .25s ease, transform .25s ease;
  }
  .mc-form-warn.show { opacity: 1; transform: none; }
  .mc-date-row input.is-invalid {
    border-color: #ff6072 !important;
    box-shadow: 0 0 0 2px rgba(255,96,114,.18) !important;
    animation: mcShake .35s ease;
  }
  @keyframes mcShake {
    0%,100%{transform:translateX(0)} 20%{transform:translateX(-5px)}
    40%{transform:translateX(5px)} 60%{transform:translateX(-3px)} 80%{transform:translateX(3px)}
  }

  /* ── INTRO ANIMATED TEXT/BOX ENHANCEMENTS ── */
  #mcIntro .nmi-eyebrow,
  #mcIntro .nmi-h1,
  #mcIntro .nmi-sub,
  #mcIntro #introBeginBtn,
  #mcIntro .nmi-guide,
  #mcIntro .nmi-hint {
    animation: introRise .8s cubic-bezier(.16,1,.3,1) both;
  }
  #mcIntro .nmi-eyebrow { animation-delay: .05s; }
  #mcIntro .nmi-h1      { animation-delay: .14s; }
  #mcIntro .nmi-sub     { animation-delay: .26s; }
  #mcIntro #introBeginBtn { animation-delay: .38s; }
  #mcIntro .nmi-guide   { animation-delay: .5s; }
  #mcIntro .nmi-hint    { animation-delay: .62s; }
  @keyframes introRise {
    0%   { opacity: 0; transform: translateY(26px) scale(.98); filter: blur(6px); }
    100% { opacity: 1; transform: none; filter: none; }
  }
  #mcIntro .nmi-item {
    position: relative;
    animation: itemPop .7s cubic-bezier(.16,1,.3,1) both;
    transition: transform .35s cubic-bezier(.16,1,.3,1), background .35s ease, box-shadow .35s ease;
    overflow: hidden;
  }
  #mcIntro .nmi-item::before {
    content: ''; position: absolute; top: 0; left: 50%;
    width: 0; height: 2px; background: var(--red);
    transform: translateX(-50%);
    transition: width .35s ease;
  }
  #mcIntro .nmi-item:nth-child(1){ animation-delay:.55s; }
  #mcIntro .nmi-item:nth-child(2){ animation-delay:.65s; }
  #mcIntro .nmi-item:nth-child(3){ animation-delay:.75s; }
  #mcIntro .nmi-item:nth-child(4){ animation-delay:.85s; }
  #mcIntro .nmi-item:hover {
    transform: translateY(-8px) scale(1.03);
    background: rgba(233,32,56,.08);
    box-shadow: 0 18px 44px rgba(0,0,0,.45), 0 0 0 1px rgba(233,32,56,.25) inset;
    z-index: 2;
  }
  #mcIntro .nmi-item:hover::before { width: 70%; }
  #mcIntro .nmi-item i {
    transition: transform .35s ease, text-shadow .35s ease;
    animation: nmiIconFloat 3.2s ease-in-out infinite;
  }
  #mcIntro .nmi-item:nth-child(2) i { animation-delay: .4s; }
  #mcIntro .nmi-item:nth-child(3) i { animation-delay: .8s; }
  #mcIntro .nmi-item:nth-child(4) i { animation-delay: 1.2s; }
  #mcIntro .nmi-item:hover i {
    transform: scale(1.25) translateY(-2px);
    text-shadow: 0 0 18px rgba(233,32,56,.8);
  }
  @keyframes nmiIconFloat {
    0%,100% { transform: translateY(0); }
    50%     { transform: translateY(-4px); }
  }
  @keyframes itemPop {
    0%   { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: none; }
  }

  /* ── SETUP POPUP ── */
  .in-modal.mc-setup-modal { max-width: 560px; }
  .mc-setup-eyebrow {
    font-family: var(--pp); font-size: .5rem; letter-spacing: .4em;
    text-transform: uppercase; color: var(--red); margin-bottom: .6rem;
    animation: introRise .6s cubic-bezier(.16,1,.3,1) both; animation-delay: .15s;
  }
  .mc-setup-card .mc-setup-title {
    font-family: var(--sf); font-size: 2.4rem; font-weight: bold; line-height: 1; color: #fff;
    text-transform: uppercase; margin: 0 2.2rem .5rem 0;
    animation: introRise .65s cubic-bezier(.16,1,.3,1) both; animation-delay: .22s;
  }
  .mc-setup-title em { color: var(--red); font-style: normal; }
  .mc-setup-sub {
    font-family: var(--pp); font-size: .62rem; letter-spacing: .04em;
    color: rgba(255,255,255,.5); margin-bottom: 2rem;
    animation: introRise .65s cubic-bezier(.16,1,.3,1) both; animation-delay: .3s;
  }
  .mc-setup-card #mcForm { display: flex; flex-direction: column; align-items: stretch; }
  .mc-setup-card .mc-form-fields {
    flex-direction: column; gap: .8rem; max-width: 100%; margin-bottom: 1.4rem;
  }
  .mc-setup-card .mc-form-fields .mc-date-row:first-child { border-right: 1px solid rgba(255,255,255,.08); }
  .mc-setup-card .mc-date-row {
    border-radius: 12px;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .mc-setup-card .mc-date-row:focus-within {
    border-color: rgba(233,32,56,.45);
    background: rgba(233,32,56,.04);
    box-shadow: 0 0 0 3px rgba(233,32,56,.1);
    transform: translateY(-1px);
  }
  .mc-setup-card .nmi-cta { width: 100%; justify-content: center; margin-bottom: .6rem; }
  .mc-setup-card .mc-form-warn { margin: 0 0 .2rem; }
  .mc-setup-card .mc-anim {
    animation: introRise .6s cubic-bezier(.16,1,.3,1) both;
    animation-delay: var(--d, 0s);
  }
  @media (max-width: 560px) {
    .mc-setup-card .mc-setup-title { font-size: 1.9rem; }
  }

  /* ── MAIN DASHBOARD ── */
  #mcMain {
    display: none; opacity: 0;
    position: fixed;
    top: var(--topbar); left: 0; right: 0; bottom: var(--hud);
    overflow: hidden;
  }
  #mcMain.visible { display: block; opacity: 1; }

  /* ── DASHBOARD GRID ── */
  .db-grid {
    display: grid;
    width: 100%; height: 100%;
    gap: var(--gap);
    padding: var(--gap);
    grid-template-columns: 1fr 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas:
      "greet  hero  hb   br"
      "thanks hero  slp  wtr"
      "facts  facts facts bl";
  }

  /* ── CARD BASE ── */
  .db-card {
    position: relative;
    display: flex; flex-direction: column;
    padding: 18px 20px;
    background: var(--card1);
    border: 1px solid var(--border);
    overflow: hidden;
    min-width: 0;
  }
  .db-card:nth-child(even) { background: var(--card2); }

  .db-card:not(.db-card--greet) {
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease;
  }
  .db-card:not(.db-card--greet):hover {
    transform: translateY(-4px);
    border-color: rgba(233,32,56,.35);
    box-shadow: 0 16px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(233,32,56,.18) inset;
    z-index: 3;
  }
  .db-card:hover .db-value { text-shadow: 0 0 22px rgba(233,32,56,.35); }
  .db-card .db-value { transition: text-shadow .35s ease; }

  /* ── Card entrance ── */
  #mcMain.visible .db-card,
  #mcMain.visible .db-fact {
    animation: dbCardIn .7s cubic-bezier(.16,1,.3,1) both;
  }
  @keyframes dbCardIn {
    0%   { opacity: 0; transform: translateY(26px) scale(.97); filter: blur(8px); }
    100% { opacity: 1; transform: none; filter: none; }
  }
  #mcMain.visible .db-card--greet  { animation-delay: .04s; }
  #mcMain.visible .db-card--hero   { animation-delay: .10s; }
  #mcMain.visible .db-card--tools  { animation-delay: .14s; }
  #mcMain.visible .db-card--hb     { animation-delay: .18s; }
  #mcMain.visible .db-card--br     { animation-delay: .22s; }
  #mcMain.visible .db-card--bl     { animation-delay: .26s; }
  #mcMain.visible .db-card--slp    { animation-delay: .30s; }
  #mcMain.visible .db-card--wtr    { animation-delay: .34s; }
  #mcMain.visible .db-fact:nth-child(1) { animation-delay: .40s; }
  #mcMain.visible .db-fact:nth-child(2) { animation-delay: .46s; }
  #mcMain.visible .db-fact:nth-child(3) { animation-delay: .52s; }
  #mcMain.visible .db-fact:nth-child(4) { animation-delay: .58s; }
  #mcMain.visible .db-fact:nth-child(5) { animation-delay: .64s; }
  #mcMain.visible .db-fact:nth-child(6) { animation-delay: .70s; }

  /* ── Per-card background animations ── */

  /* HERO */
  @keyframes heroBreathe {
    0%,100% { opacity: .07; transform: scale(1);   }
    50%      { opacity: .18; transform: scale(1.25); }
  }
  .db-card--hero::before {
    content: ''; position: absolute; inset: -40%;
    background: radial-gradient(circle at 30% 60%, var(--red), transparent 60%);
    animation: heroBreathe 6s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }

  /* HEARTBEATS */
  @keyframes hbPulse {
    0%   { transform: scaleX(0); opacity: .5; }
    60%  { transform: scaleX(1); opacity: .18; }
    100% { transform: scaleX(0); opacity: 0; }
  }
  .db-card--hb::before {
    content: ''; position: absolute; bottom: 0; left: 0;
    height: 3px; width: 100%; transform-origin: left;
    background: linear-gradient(90deg, var(--red), transparent);
    animation: hbPulse 1.1s ease-out infinite;
    pointer-events: none; z-index: 0;
  }

  /* BREATHS */
  @keyframes brWave {
    0%,100% { transform: scaleY(.04); opacity: .6; }
    50%      { transform: scaleY(1);   opacity: .08; }
  }
  .db-card--br::before {
    content: ''; position: absolute; inset: 0; transform-origin: bottom;
    background: linear-gradient(0deg, rgba(233,32,56,.15), transparent);
    animation: brWave 4s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }

  /* BLINKS */
  @keyframes blFlash {
    0%,94%,100% { opacity: 0; }
    95%,98%     { opacity: .12; }
  }
  .db-card--bl::before {
    content: ''; position: absolute; inset: 0;
    background: rgba(233,32,56,.15);
    animation: blFlash 3.5s ease-in-out infinite;
    pointer-events: none; z-index: 0;
  }

  /* SLEEP */
  @keyframes slpDrift {
    0%   { background-position: 0% 0%; }
    100% { background-position: 100% 100%; }
  }
  .db-card--slp::before {
    content: ''; position: absolute; inset: 0;
    background: repeating-linear-gradient(135deg,
      rgba(255,255,255,.015) 0px, rgba(255,255,255,.015) 1px,
      transparent 1px, transparent 20px);
    background-size: 28px 28px;
    animation: slpDrift 12s linear infinite;
    pointer-events: none; z-index: 0;
  }

  /* WATER */
  @keyframes wtrRipple {
    0%   { transform: scale(.6); opacity: .25; }
    100% { transform: scale(2.2); opacity: 0; }
  }
  .db-card--wtr::before {
    content: ''; position: absolute; top: -20px; right: -20px;
    width: 80px; height: 80px; border-radius: 50%;
    border: 1.5px solid rgba(233,32,56,.35);
    animation: wtrRipple 2.8s ease-out infinite;
    pointer-events: none; z-index: 0;
  }

  /* STEPS */
  @keyframes stpMarch {
    0%   { background-position: 0 0; }
    100% { background-position: 40px 0; }
  }
  .db-card--stp::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle, rgba(233,32,56,.18) 1.5px, transparent 1.5px);
    background-size: 20px 20px;
    animation: stpMarch 1.4s linear infinite;
    pointer-events: none; z-index: 0;
  }

  /* FACTS */
  @keyframes factCrawl {
    0%   { background-position: -100% 0; }
    100% { background-position: 200%  0; }
  }
  .db-fact::before {
    content: ''; position: absolute; bottom: 0; left: 0;
    height: 2px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--red), transparent);
    animation: factCrawl 3s linear infinite;
    pointer-events: none;
  }
  .db-fact:nth-child(1)::before { animation-delay: 0s; }
  .db-fact:nth-child(2)::before { animation-delay: .5s; }
  .db-fact:nth-child(3)::before { animation-delay: 1s; }
  .db-fact:nth-child(4)::before { animation-delay: 1.5s; }
  .db-fact:nth-child(5)::before { animation-delay: 2s; }
  .db-fact:nth-child(6)::before { animation-delay: 2.5s; }

  /* ── Card label ── */
  .db-label {
    font-family: var(--pp); font-size: .54rem; letter-spacing: .24em; text-transform: uppercase;
    color: rgba(255,255,255,.35); line-height: 1;
    display: flex; align-items: center; gap: .45rem;
    position: relative; z-index: 1; flex-shrink: 0;
  }
  .db-label i { color: var(--red); font-size: .6rem; }
  .db-num {
    margin-left: auto;
    font-family: var(--pp); font-size: .42rem;
    color: rgba(255,255,255,.14); letter-spacing: .05em;
  }

  /* ── Card value ── */
  .db-value {
    font-family: var(--sf); font-weight: 700;
    font-size: clamp(1.6rem, 2.8vw, 3rem);
    letter-spacing: -.03em; line-height: .88;
    color: #fff; font-variant-numeric: tabular-nums;
    position: relative; z-index: 1;
    flex: 1; display: flex; align-items: center;
  }

  /* ── Card rate ── */
  .db-rate {
    font-family: var(--pp); font-size: .34rem;
    color: rgba(255,255,255,.22); letter-spacing: .06em;
    position: relative; z-index: 1; flex-shrink: 0;
    margin-top: 6px;
  }

  /* ── Hero card ── */
  .db-card--hero {
    grid-area: hero;
    background: #0f0f11;
    border-color: rgba(233,32,56,.18);
    justify-content: space-between;
    gap: .6rem; text-align: left; align-items: flex-start;
  }
  .db-card--hero .db-value {
    font-size: clamp(3rem, 6vw, 6.4rem);
    letter-spacing: -.04em; line-height: .9;
    align-items: flex-start; justify-content: flex-end;
    text-align: left;
    flex: 1 1 auto; margin: 0; padding-bottom: .35rem;
  }
  .db-value-age {
    font-family: var(--sf); font-size: clamp(1.1rem, 1.8vw, 1.7rem);
    color: var(--red); letter-spacing: .01em; font-variant-numeric: tabular-nums;
    line-height: 1.2; flex-shrink: 0; margin-bottom: .1rem; text-align: left;
  }

  /* Pulse */
  @keyframes agePulse {
    0%,100% { text-shadow: 0 0 0 rgba(233,32,56,0); }
    50%      { text-shadow: 0 0 28px rgba(233,32,56,.5); }
  }
  .db-card--hero .db-value.pulse { animation: agePulse .35s ease; }

  /* ── Count-up reveal glow ── */
  .db-value.counting,
  .db-fact__val.counting {
    color: #fff;
    text-shadow: 0 0 24px rgba(233,32,56,.55);
    animation: countGlow 1.5s ease-out;
  }
  @keyframes countGlow {
    0%   { text-shadow: 0 0 4px rgba(233,32,56,.2);  transform: scale(.96); }
    25%  { text-shadow: 0 0 30px rgba(233,32,56,.7);  transform: scale(1.04); }
    100% { text-shadow: 0 0 0 rgba(233,32,56,0);      transform: scale(1); }
  }

  /* ── Grid areas ── */
  .db-card--hb  { grid-area: hb; }
  .db-card--br  { grid-area: br; }
  .db-card--bl  { grid-area: bl; }   /* Blinks */
  .db-card--slp { grid-area: slp; }
  .db-card--wtr { grid-area: wtr; }
  .db-card--stp { display: none; }

  /* ── Facts row ── */
  .db-facts {
    grid-area: facts;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--gap);
  }
  .db-fact {
    position: relative;
    display: flex; flex-direction: column;
    padding: 14px 16px;
    background: var(--card2);
    border: 1px solid var(--border);
    overflow: hidden; min-width: 0;
  }
  .db-fact__lbl {
    font-family: var(--pp); font-size: .42rem; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.32); line-height: 1; margin-bottom: 6px;
    display: flex; align-items: center; gap: .4rem;
  }
  .db-fact__lbl i { color: rgba(233,32,56,.75); font-size: .48rem; }

  /* ── Greeting card ── */
  .db-card--greet {
    grid-area: greet;
    background: var(--red) !important;
    border: 2px solid rgba(255,255,255,.14);
    display: flex; flex-direction: column; justify-content: center;
    padding: 20px 22px;
    overflow: hidden;
    z-index: 4;
    box-shadow: none;
  }
  .db-greet-hello {
    font-family: var(--pp); font-size: .76rem; letter-spacing: .3em; text-transform: uppercase;
    color: rgba(255,255,255,.7); margin-bottom: 4px;
    position: relative; z-index: 1;
  }
  .db-greet-name {
    font-family: var(--sf); font-size: clamp(3rem, 5.2vw, 5.8rem);
    font-weight: 700; letter-spacing: -.01em; color: #fff;
    position: relative; z-index: 1; line-height: .88;
    text-shadow: 0 4px 30px rgba(0,0,0,.45), 0 0 40px rgba(255,255,255,.15);
  }
  #mcMain.visible .db-greet-name {
    animation: greetNameIn .9s cubic-bezier(.16,1,.3,1) both;
    animation-delay: .3s;
  }
  @keyframes greetNameIn {
    0%   { opacity: 0; transform: translateY(18px) scale(.92); filter: blur(8px); letter-spacing: .12em; }
    60%  { letter-spacing: -.03em; }
    100% { opacity: 1; transform: none; filter: none; letter-spacing: -.01em; }
  }
  .db-greet-sub {
    font-family: var(--pp); font-size: .6rem; letter-spacing: .08em;
    color: rgba(255,255,255,.6); margin-top: 10px;
    position: relative; z-index: 1; line-height: 1.5;
  }
  /* Next birthday line */
  .db-greet-bday {
    position: relative; z-index: 2; margin-top: auto;
    font-family: var(--pp); font-size: .52rem; letter-spacing: .04em;
    color: #fff; display: flex; align-items: center; gap: .45rem;
    padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2);
  }
  .db-greet-bday i { color: rgba(255,255,255,.9); font-size: .58rem; }

  .db-sofar { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 10px; position: relative; z-index: 1; }
  .db-sofar__chip {
    font-family: var(--pp); font-size: .4rem; letter-spacing: .06em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
    border-radius: 4px; padding: 4px 8px; display: inline-flex; align-items: center; gap: .4rem;
  }
  .db-sofar__chip i { color: rgba(233,32,56,.7); font-size: .44rem; }
  .db-sofar__chip b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

  .db-next {
    font-family: var(--pp); font-size: .44rem; letter-spacing: .04em;
    color: rgba(255,255,255,.6); margin-top: 10px; line-height: 1.5;
    position: relative; z-index: 1; display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap;
  }
  .db-next i { color: rgba(233,32,56,.75); font-size: .48rem; }
  .db-next b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

  /* Planet ages */
  .db-planets {
    display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 10px;
    position: relative; z-index: 1;
  }
  .db-planet {
    font-family: var(--pp); font-size: .4rem; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255,255,255,.55);
    border: 1px solid rgba(255,255,255,.12); border-radius: 4px;
    padding: 4px 7px; display: inline-flex; align-items: center; gap: .35rem;
  }
  .db-planet i { color: rgba(233,32,56,.75); font-size: .42rem; }
  .db-planet b { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }

  /* Tools card facts */
  .db-tools-facts { margin-top: 10px; display: flex; flex-direction: column; gap: 7px; position: relative; z-index: 1; }
  .db-tools-line {
    font-family: var(--pp); font-size: .46rem; letter-spacing: .04em;
    color: rgba(255,255,255,.72); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  }
  .db-tools-line i { color: rgba(233,32,56,.8); font-size: .5rem; }
  .db-tools-line b { color: #fff; font-weight: 700; letter-spacing: .1em; font-variant-numeric: tabular-nums; }
  .db-tools-timer {
    font-family: var(--pp); font-size: .42rem; letter-spacing: .06em;
    color: rgba(255,255,255,.4); margin-top: 10px; display: flex; align-items: center; gap: .4rem;
    position: relative; z-index: 1;
  }
  .db-tools-timer i { color: rgba(233,32,56,.6); font-size: .46rem; }
  .db-tools-timer b { color: rgba(255,255,255,.85); font-weight: 700; font-variant-numeric: tabular-nums; }

  /* Tools card action buttons */
  .db-thanks-acts { display: flex; gap: .5rem; margin-top: 12px; }
  .db-mini-btn {
    font-family: var(--pp); font-size: .4rem; letter-spacing: .14em; text-transform: uppercase;
    font-weight: 600; color: var(--red);
    background: rgba(233,32,56,.1); border: 1px solid rgba(233,32,56,.4);
    border-radius: 4px; padding: 7px 11px; display: inline-flex; align-items: center; gap: .4rem;
    transition: background .2s, color .2s, border-color .2s;
  }
  .db-mini-btn:hover { background: var(--red); color: #fff; border-color: var(--red); }
  .db-mini-btn--ghost { color: rgba(255,255,255,.5); background: transparent; border-color: rgba(255,255,255,.14); }
  .db-mini-btn--ghost:hover { background: rgba(255,255,255,.06); color: #fff; border-color: rgba(255,255,255,.28); }

  /* Milestone celebration toast */
  #mcMilestone {
    position: fixed; left: 50%; top: 22%; transform: translateX(-50%) translateY(-20px);
    z-index: 3000; pointer-events: none; opacity: 0;
    background: linear-gradient(135deg, var(--red), #a30f24);
    color: #fff; font-family: var(--pp); font-size: .7rem; letter-spacing: .1em;
    text-transform: uppercase; font-weight: 700;
    padding: 16px 26px; border-radius: 6px;
    box-shadow: 0 20px 60px rgba(233,32,56,.5);
    display: flex; align-items: center; gap: .7rem;
    transition: opacity .4s ease, transform .4s cubic-bezier(.16,1,.3,1);
  }
  #mcMilestone.show { opacity: 1; transform: translateX(-50%) translateY(0); }
  #mcMilestone i { font-size: .9rem; }

  /* Language toggle */
  #mcLang {
    position: fixed; top: 14px; right: 16px; z-index: 2500;
    display: flex; gap: 2px; background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.12); border-radius: 4px; padding: 2px;
    backdrop-filter: blur(6px);
  }
  #mcLang button {
    font-family: var(--pp); font-size: .42rem; letter-spacing: .1em; font-weight: 700;
    color: rgba(255,255,255,.45); padding: 4px 9px; border-radius: 3px;
    transition: background .2s, color .2s;
  }
  #mcLang button.active { background: var(--red); color: #fff; }

  .mc-cmp-box h3 {
    font-family: var(--sf); color: #fff; font-size: 1.1rem; margin-bottom: 4px;
  }
  .mc-cmp-box p.sub { font-family: var(--pp); font-size: .5rem; color: rgba(255,255,255,.4); letter-spacing:.08em; margin-bottom: 16px; }
  .mc-cmp-row { display: flex; gap: 10px; margin-bottom: 14px; }
  .mc-cmp-row input {
    flex: 1; background: #17171b; border: 1px solid rgba(255,255,255,.12);
    border-radius: 4px; padding: 10px 12px; color: #fff; font-family: var(--pp); font-size: .55rem;
  }
  .mc-cmp-result { display: none; margin-top: 12px; }
  .mc-cmp-result.show { display: block; }
  .mc-cmp-line {
    display: flex; justify-content: space-between; align-items: baseline;
    font-family: var(--pp); font-size: .55rem; color: rgba(255,255,255,.6);
    padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.06); letter-spacing: .05em;
  }
  .mc-cmp-line b { color: #fff; font-variant-numeric: tabular-nums; }
  .mc-cmp-diff { color: var(--red); font-weight: 700; }
  .mc-cmp-actions { display: flex; gap: 10px; margin-top: 18px; }

  /* ── Hero canlı küre ── */
  .hero-orb-canvas {
    position: absolute; inset: 0; width: 100%; height: 100%;
    z-index: 0; opacity: .9; pointer-events: none;
    mask-image: radial-gradient(circle at 62% 50%, #000 40%, transparent 78%);
    -webkit-mask-image: radial-gradient(circle at 62% 50%, #000 40%, transparent 78%);
  }
  .db-card--hero .db-label,
  .db-card--hero .db-value,
  .db-card--hero .db-value-age,
  .db-card--hero .db-rate { position: relative; z-index: 1; }

  /* ── Tools / Explore card ── */
  .db-card--tools {
    grid-area: thanks;
    background: #0c0c0e;
    border-color: rgba(255,255,255,.06);
    display: flex; flex-direction: column; justify-content: flex-start;
  }
  .db-fact__val {
    font-family: var(--sf); font-size: clamp(.95rem, 1.6vw, 1.55rem);
    font-weight: 700; letter-spacing: -.02em; color: #fff;
    font-variant-numeric: tabular-nums; flex: 1; display: flex; align-items: center;
  }
  .db-fact__sub {
    font-family: var(--pp); font-size: .42rem;
    color: rgba(255,255,255,.5); letter-spacing: .02em;
    margin-top: 6px; line-height: 1.5;
  }

  /* ── HUD BAR ── */
  #mcHud {
    position: fixed; bottom: 0; left: 0; right: 0;
    height: var(--hud);
    background: rgba(8,8,8,.98); backdrop-filter: blur(16px);
    border-top: 1px solid rgba(255,255,255,.08);
    display: none; align-items: stretch;
    z-index: 7000;
  }
  #mcHud.visible { display: flex; }

  .hud-brand {
    font-family: var(--sf); font-size: .88rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    color: #fff;
    display: flex; align-items: center; gap: 10px;
    padding: 0 18px;
    border-right: 1px solid var(--border);
    flex-shrink: 0; white-space: nowrap;
  }
  .hud-brand em { color: var(--red); font-style: normal; }

  /* Pulsing live dot */
  @keyframes hudDotPulse {
    0%,100% { transform: scale(1);   box-shadow: 0 0 0   0 rgba(233,32,56,.6); }
    50%      { transform: scale(1.3); box-shadow: 0 0 0 6px rgba(233,32,56,0); }
  }
  .hud-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--red);
    animation: hudDotPulse 1.05s ease-in-out infinite;
    flex-shrink: 0;
  }

  /* Seconds tick micro display */
  @keyframes tickFlip {
    0%   { opacity: 0; transform: translateY(5px); }
    15%  { opacity: 1; transform: translateY(0);   }
    85%  { opacity: 1; transform: translateY(0);   }
    100% { opacity: 0; transform: translateY(-5px); }
  }
  .hud-tick {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 0 16px; border-right: 1px solid var(--border); flex-shrink: 0;
    min-width: 84px;
  }
  .hud-tick__label {
    font-family: var(--pp); font-size: .22rem; letter-spacing: .28em;
    text-transform: uppercase; color: rgba(255,255,255,.2); line-height: 1; margin-bottom: 2px;
    white-space: nowrap;
  }
  .hud-tick__val {
    font-family: var(--sf); font-size: .9rem; color: rgba(233,32,56,.8);
    font-variant-numeric: tabular-nums; line-height: 1;
  }
  .hud-tick__val.flip { animation: tickFlip .6s ease; }

  .hud-counters { display: flex; flex: 1; align-items: stretch; }
  .hud-item {
    display: flex; flex-direction: column; justify-content: center;
    padding: 0 14px;
    border-right: 1px solid var(--border);
    min-width: 0;
  }
  .hud-item__lbl {
    font-family: var(--pp); font-size: .26rem; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(255,255,255,.2); line-height: 1; margin-bottom: 2px; white-space: nowrap;
  }
  .hud-item__val {
    font-family: var(--sf); font-size: 1rem; font-weight: 700;
    letter-spacing: -.01em; color: #fff; font-variant-numeric: tabular-nums; line-height: 1;
  }
  .hud-item--hb { flex: 1; min-width: 180px; border-right: 1px solid var(--border); }
  #hudHeartCanvas { width: 100%; height: 100%; display: block; }

  .hud-actions { display: flex; align-items: center; gap: 10px; padding: 0 16px; flex-shrink: 0; }
  .hud-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: 0 17px; height: 41px;
    font-family: var(--pp); font-size: .432rem; letter-spacing: .18em; text-transform: uppercase;
    font-weight: 600; border-radius: 4px; white-space: nowrap;
    transition: color .2s, background .2s, border-color .2s;
  }
  .hud-btn--save {
    color: var(--red); background: rgba(233,32,56,.1);
    border: 1px solid rgba(233,32,56,.4);
  }
  .hud-btn--save:hover { color: #fff; background: var(--red); border-color: var(--red); }
  .hud-btn--reset {
    color: rgba(255,255,255,.4); background: transparent;
    border: 1px solid rgba(255,255,255,.12);
  }
  .hud-btn--reset:hover { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); }
  .hud-btn--act {
    color: rgba(255,255,255,.62); background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
  }
  .hud-btn--act:hover { color: #fff; background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.26); }
  .hud-btn i { font-size: .46rem; }
  #mcHud .hud-btn { border-radius: 4px !important; }
  .inlab-hud__info-btn,
  .inlab-hud__home-btn,
  .inlab-hud .inlab-hud__info-btn,
  .inlab-hud .inlab-hud__home-btn { border-radius: 4px !important; }

  @media(max-width:900px) {
    .hud-item:nth-child(n+5) { display: none; }
    #mcMain { overflow-y: auto; overflow-x: hidden; }
    .db-grid {
      height: auto; min-height: 100%;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: auto auto auto auto;
      grid-template-areas:
        "greet  hero   hb"
        "thanks hero   br"
        "slp    wtr    bl"
        "facts  facts  facts";
    }
    .db-facts { grid-template-columns: repeat(3, 1fr); }
  }
  @media(max-width:640px) {
    .db-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: none;
      grid-auto-rows: auto;
      grid-template-areas: none;
    }
    .db-card--hero, .db-card--greet, .db-card--tools, .db-facts { grid-area: auto; grid-column: 1 / -1; }
    .db-card--hb, .db-card--br, .db-card--bl,
    .db-card--slp, .db-card--wtr, .db-card--stp { grid-area: auto; }
    .db-card--wtr { grid-column: 1 / -1; }
    .db-card--greet { order: -2; }
    .db-card--hero { order: -1; }
    .db-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hud-item:nth-child(n+3) { display: none; }
    .hud-brand { display: none; }
    .hud-counters, .hud-item--hb { min-width: 0; }
    .hud-actions { padding: 0 10px; gap: 8px; }
  }
  @media(max-width:420px) {
    .hud-item--hb { display: none; }
  }

  /* ── TOPBAR entry ── */
  .inlab-topbar {
    animation: topbarDrop .5s ease .3s both;
  }
  @keyframes topbarDrop {
    from { opacity: 0; transform: translateY(-100%); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* ── PARTICLES ── */
  .mc-particle {
    position: fixed; pointer-events: none; z-index: 1;
    border-radius: 50%; background: rgba(233,32,56,.45);
    animation: particleFade 3.5s ease forwards;
  }
  @keyframes particleFade {
    0%   { opacity: .6; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(.1); }
  }