/* Base Reset */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }

/* Theme Tokens (dark-first) */
:root{
  /* Surfaces */
  --bg-0: #0a0f13;      /* page base */
  --bg-1: #0f1419;      /* appbar gradient end */
  --card: #1a2127;      /* card base */
  --card-soft: #141a20; /* subtle bottom tint */
  --stroke: #2a3239;    /* thin borders */

  /* Text */
  --txt: #e7edf3;
  --txt-dim: #9aa6b2;
  --txt-mute: #6b7785;

  /* Accent  */
  --accent-strong: #e96d88;

  /* Effects */
  --radius-lg: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.40);
}

@media (prefers-color-scheme: light){
  :root{
    --bg-0:#f6f8fb; --bg-1:#e9eef5;
    --card:#ffffff; --card-soft:#f3f6f9; --stroke:#dfe6ee;
    --txt:#0f1419; --txt-dim:#475264; --txt-mute:#6b7686;
    --shadow: 0 6px 16px rgba(15,20,25,.08);
  }
}

/* App Bar (visual only) */
.appbar{
  position: sticky; top: 0; z-index: 1;
  height: 64px;
  background: linear-gradient(180deg, var(--bg-1), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.03);
  backdrop-filter: blur(6px);
}

/* Page Background */
body{
  background:
    radial-gradient(1200px 500px at 50% -220px, #2a3a46 0%, rgba(42,58,70,0) 60%),
    var(--bg-0);
  color: var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased;
}
.page{
  min-height: calc(100vh - 64px);
  display: grid;
  place-items: center;
  padding: 24px;
}

/* WIP Card */
.wip-card{
  width: min(720px, 100%);
  background: linear-gradient(180deg, var(--card), var(--card-soft));
  border: 1px solid var(--stroke);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: clamp(20px, 4vw, 36px);
  text-align: center;
}

.wip-top{
  display: flex; justify-content: center; margin-bottom: 10px;
}
.wip-mark{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 2px rgba(233,109,136,.18) inset;
}

.wip-title{
  margin: 6px 0 6px;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw + 12px, 32px);
  letter-spacing: .01em;
}
.wip-sub{
  margin: 0 0 14px;
  color: var(--txt-dim);
  font-size: clamp(14px, .6vw + 12px, 18px);
}

/* Progress (subtle, low-contrast) */
.wip-progress{
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #0e141a;
  border: 1px solid #24303a;
  margin: 10px auto 10px;
}
.wip-bar{
  width: 38%;
  height: 100%;
  background: linear-gradient(90deg, #586a79, #9aa6b2);
  animation: wip-slide 2.8s ease-in-out infinite;
}
@keyframes wip-slide{
  0%{ transform: translateX(-120%); }
  50%{ transform: translateX(12%); }
  100%{ transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce){
  .wip-bar{ animation: none; width: 45%; transform: none; }
}

.wip-note{
  margin: 10px 0 0;
  color: var(--txt-mute);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Small screens */
@media (max-width: 560px){
  .page{ padding: 16px; }
}