:root {
  /* primary mint teal */
  --primary:        #19c8b9;
  --primary-hover:  #3dd4c6;
  --primary-active: #11a89b;
  --primary-bg:     #e6f9f6;

  /* warm-brown text */
  --text:           #794f27;   /* headings / sidebar */
  --text-body:      #725d42;   /* in-component body */
  --text-secondary: #9f927d;
  --text-muted:     #8a7b66;
  --text-disabled:  #c4b89e;

  /* parchment background */
  --bg:             #f8f8f0;
  --bg-content:     rgb(247, 243, 223);   /* card / modal / table inside */
  --bg-disabled:    #f0ece2;

  /* borders */
  --border:         #c4b89e;
  --border-hover:   #a89878;
  --border-strong:  #9f927d;

  /* status */
  --success:        #6fba2c;
  --success-active: #5a9e1e;
  --warning:        #f5c31c;
  --warning-active: #dba90e;
  --error:          #e05a5a;
  --error-active:   #c94444;

  /* game-special */
  --focus-yellow:   #ffcc00;   /* Input/Switch/Checkbox focus — NOT blue */
  --focus-yellow-d: #e0b800;
  --focus-yellow-radio: #f5c31c;  /* Radio uses warmer yellow */

  /* 3D shadow taupe */
  --shadow-btn:     #bdaea0;
  --shadow-input:   #d4c9b4;
  --shadow-switch:  #5a9e1e;

  /* radii */
  --r-sm:   12px;
  --r-base: 18px;
  --r-lg:   24px;
  --r-pill: 50px;

  /* motion */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --d-fast:   0.15s;
  --d-base:   0.25s;
  --d-slow:   0.35s;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', 'Noto Sans SC', -apple-system, 'PingFang SC', sans-serif;
  background-color: var(--bg);
  color: var(--text-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

* {
  box-sizing: border-box;
}

/* Page Layout */
.page-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 20px;
}

.content-wrapper {
  max-width: 600px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.footer-decor {
  width: 100%;
  height: 60px;
  margin-top: auto;
  opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.footer-decor svg {
  width: 100%;
  max-width: 800px;
  height: auto;
}

/* Button Component */
.ai-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--d-base) var(--ease);
  font-family: inherit;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border-width: 2px;
  border-style: solid;
  user-select: none;
}

.ai-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

/* Sizes */
.ai-btn-small { height: 32px; padding: 0 16px; font-size: 12px; border-radius: 16px; }
.ai-btn-middle { height: 45px; padding: 0 20px; font-size: 14px; border-radius: 50px; }
.ai-btn-large { height: 48px; padding: 0 32px; font-size: 16px; border-radius: 24px; }

/* Types */
.ai-btn-primary {
  color: var(--text);
  background-color: var(--bg);
  border-color: var(--bg);
  box-shadow: 0 5px 0 0 var(--shadow-btn);
}
.ai-btn-primary:not([disabled]):hover {
  box-shadow: 0 6px 0 0 var(--shadow-btn);
  transform: translateY(-1px);
}
.ai-btn-primary:not([disabled]):active {
  box-shadow: 0 1px 0 0 var(--shadow-btn);
  transform: translateY(2px);
}
.ai-btn-primary:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.ai-btn-default {
  background-color: var(--bg);
  border-color: var(--border-strong);
  color: var(--text-body);
  box-shadow: 0 2px 4px 0 rgba(61, 52, 40, 0.06);
}
.ai-btn-default:not([disabled]):hover {
  color: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 3px 10px 0 rgba(61, 52, 40, 0.10);
  transform: translateY(-1px);
}
.ai-btn-default:not([disabled]):active {
  color: var(--primary-active);
  border-color: var(--primary-active);
  transform: translateY(0);
  box-shadow: 0 2px 4px 0 rgba(61, 52, 40, 0.06);
}

.ai-btn-danger {
  color: #fff;
  background-color: var(--bg);
  border-color: var(--bg);
  box-shadow: 0 5px 0 0 var(--error-active);
}
.ai-btn-danger:not([disabled]):hover {
  box-shadow: 0 6px 0 0 var(--error-active);
  transform: translateY(-1px);
}
.ai-btn-danger:not([disabled]):active {
  box-shadow: 0 1px 0 0 var(--error-active);
  transform: translateY(2px);
}

.ai-btn-block {
  display: flex;
  width: 100%;
}

/* Card Component */
.ai-card {
  border-radius: 20px;
  padding: 16px 24px;
  color: var(--text-body);
  font-weight: 500;
  transition: transform 0.3s var(--ease);
}
.ai-card-hoverable:hover {
  transform: translateY(-2px);
}

.ai-card-pattern-none {
  background: var(--bg-content);
}

/* Custom pattern "app-teal" */
.ai-card-pattern-app-teal {
  background:
    radial-gradient(circle, rgba(130, 213, 187, 0.18) 1.5px, transparent 1.5px) 0 0/28px 28px,
    radial-gradient(circle, rgba(130, 213, 187, 0.12) 1px, transparent 1px) 7px 7px/14px 14px,
    #e8f9f4;
  border: 1.5px solid #82d5bb;
  color: #186048;
}

/* Custom pattern "app-yellow" */
.ai-card-pattern-app-yellow {
  background:
    radial-gradient(circle, rgba(247, 205, 103, 0.18) 1.5px, transparent 1.5px) 0 0/28px 28px,
    radial-gradient(circle, rgba(247, 205, 103, 0.12) 1px, transparent 1px) 7px 7px/14px 14px,
    #fdf8e8;
  border: 1.5px solid #f7cd67;
  color: #725d42;
}

/* Custom pattern "warm-peach-pink" */
.ai-card-pattern-warm-peach-pink {
  background:
    radial-gradient(circle, rgba(225, 140, 111, 0.18) 1.5px, transparent 1.5px) 0 0/28px 28px,
    radial-gradient(circle, rgba(225, 140, 111, 0.12) 1px, transparent 1px) 7px 7px/14px 14px,
    #faede9;
  border: 1.5px solid #e18c6f;
  color: #6a2a10;
}


/* Title Ribbon Component */
.ai-title {
  display: inline-flex;
  position: relative;
  height: 2em;
  padding: 0 1.6em;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0.08em 0.12em rgba(0,0,0,0.05));
  margin: 10px 0;
  align-self: center;
}
.ai-title-size-small { font-size: 14px; }
.ai-title-size-middle { font-size: 20px; }
.ai-title-size-large { font-size: 24px; }

.ai-title-text {
  font-weight: 900;
  padding-top: 0.11em;
  z-index: 4;
  color: var(--rt);
  position: relative;
}

.ai-title-back {
  position: absolute;
  z-index: 1;
  width: 1.7em;
  height: 1.7em;
  bottom: -0.4em;
  background-color: var(--rb);
}
.ai-title-back-left {
  left: 0;
  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 30% 50%, 0% 0%);
}
.ai-title-back-right {
  right: 0;
  clip-path: polygon(0% 0%, 100% 0%, 70% 50%, 100% 100%, 0% 100%);
}

.ai-title-fold {
  position: absolute;
  z-index: 2;
  top: calc(100% - 0.04em);
  border-style: solid;
  width: 0;
  height: 0;
}
.ai-title-fold-left {
  left: 0;
  border-width: 0 0.95em 0.45em 0;
  border-color: transparent var(--rk) transparent transparent;
}
.ai-title-fold-right {
  right: 0;
  border-width: 0 0 0.45em 0.95em;
  border-color: transparent transparent transparent var(--rk);
}

.ai-title-front {
  position: absolute;
  inset: 0 0.1em;
  border-radius: 0.2em;
  background-color: var(--rf);
  transform: perspective(11.5em) rotateX(3deg);
  box-shadow: inset 0 -0.06em 0 rgba(0,0,0,0.05);
  z-index: 3;
}

/* Title colors */
.ai-title-color-app-teal { --rf: #82d5bb; --rb: #40a880; --rk: #186048; --rt: #fff; }
.ai-title-color-warm-peach-pink { --rf: #e18c6f; --rb: #b85a30; --rk: #6a2a10; --rt: #fff; }


/* Result Container */
.test-result-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 16px;
  font-size: 16px;
  font-weight: 700;
}

.test-result-box svg {
  width: 24px;
  height: 24px;
}

/* Custom UI Tweaks for Animal Crossing vibe */
.card-inner-dashed {
  border: 2px dashed rgba(159, 146, 125, 0.4);
  border-radius: 12px;
  padding: 24px;
  background-color: transparent;
}

.floating-leaf {
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 4px 6px rgba(121, 79, 39, 0.15));
}

@keyframes float {
  0% { transform: translateY(0px) rotate(-25deg); }
  50% { transform: translateY(-8px) rotate(-15deg); }
  100% { transform: translateY(0px) rotate(-25deg); }
}

/* Spinner */
.spinner {
  animation: rotate 1s linear infinite;
}
@keyframes rotate {
  100% { transform: rotate(360deg); }
}

.svg-icon {
  fill: currentColor;
  display: inline-block;
  vertical-align: middle;
}