:root{--topic:#6950d5;--topic-wash:#eee8ff;--text-scale:1}.app-nav{align-items:center}.nav-tabs{flex-wrap:nowrap;overflow-x:auto;max-width:calc(100% - 145px);scrollbar-width:thin}.nav-tabs button{white-space:nowrap;flex-shrink:0}.home-shortcuts{display:flex;flex-wrap:wrap;gap:12px;margin:10px 0 30px}.theme-sunrise{--topic:#a75f25;--topic-wash:#fff0d9}.theme-waves{--topic:#287e94;--topic-wash:#e0f1f6}.theme-desk{--topic:#6552a4;--topic-wash:#eee9fa}.theme-garden{--topic:#41764a;--topic-wash:#e5f0dc}.theme-harbour{--topic:#386f8b;--topic-wash:#e4edf5}.theme-open{--topic:#456d92;--topic-wash:#e8f1f7}.theme-studio{--topic:#97634d;--topic-wash:#f6e9de}.theme-shapes{--topic:#895c8e;--topic-wash:#f2e7f3}.theme-workshop{--topic:#527c68;--topic-wash:#e5f0e9}.theme-space{--topic:#77704a;--topic-wash:#f2efdf}.topic-card{border-top:4px solid var(--topic)}.topic-card .topic-icon{font-size:34px;color:var(--topic)}.topic-card .secondary{color:var(--topic);background:var(--topic-wash)}.count-line{display:flex;gap:18px;align-items:center;margin:15px 0}.count-line>b{font-size:42px;letter-spacing:-2px;line-height:1.2;color:var(--topic)}.count-line>b small{font-size:22px;font-weight:400}.count-line>span{font-size:12px;line-height:1.6}.count-line>span small{font-size:10px;color:var(--muted)}.ten-dots{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}.ten-dots i{height:10px;border-radius:4px;background:#e4e1e7}.ten-dots .frequent{background:var(--topic)}.ten-dots .sometimes{background:var(--topic-wash);border:1px solid var(--topic)}.ten-dots .unknown{background:repeating-linear-gradient(45deg,#e0dce8,#e0dce8 2px,transparent 2px,transparent 5px);border:1px solid #cbc4d4}.topic-page,.room-page,.games-page{max-width:940px;margin:35px auto 60px}.topic-hero{padding:36px;background:var(--topic-wash);border-radius:26px;margin:15px 0 26px;position:relative;overflow:hidden}.topic-hero:after{content:'';position:absolute;width:160px;height:160px;border:24px solid var(--topic);opacity:.07;border-radius:50%;right:-70px;top:-30px}.topic-hero .topic-icon{font-size:44px;color:var(--topic);display:block;margin-bottom:16px}.topic-hero h1{font-size:45px;letter-spacing:-1.5px;max-width:650px}.topic-hero p{max-width:680px}.topic-tabs{display:flex;gap:8px;overflow:auto;margin:24px 0}.topic-tabs button{border:1px solid var(--line);padding:13px 17px;border-radius:12px;white-space:nowrap;background:white;color:var(--ink);font-size:13px}.topic-tabs button[aria-pressed=true]{background:var(--topic);color:white;border-color:var(--topic)}.topic-question{max-width:720px;margin:auto}.topic-page .primary{background:var(--topic)}.topic-page .section-dot{color:var(--topic)}.advice-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.resource-list{display:grid;gap:12px;margin:25px 0}.resource-list a{display:flex;align-items:center;justify-content:space-between;gap:20px;border:1px solid var(--line);border-radius:12px;padding:20px;text-decoration:none;color:var(--topic);font-size:14px}.resource-list a span{font-size:11px;white-space:nowrap}.plain-themes [class*='theme-']{--topic:var(--purple);--topic-wash:#eeeaf7}.plain-themes .topic-hero:after{display:none}.room-page h1,.games-page h1{font-size:52px;letter-spacing:-2px}.pal-room{height:420px;border-radius:28px;position:relative;overflow:hidden;border:1px solid #d8ccbd;background:linear-gradient(#e5d4c1 0 72%,#c59a78 72%);box-shadow:inset 0 -6px 0 #a6754f20}.pal-room:after{content:'';position:absolute;top:70%;width:100%;height:10px;background:#ae8363;z-index:0}.scene-night{background:linear-gradient(#34304f 0 72%,#776281 72%)}.scene-forest{background:linear-gradient(#c4dbc3 0 72%,#a6b77b 72%)}.scene-beach{background:linear-gradient(#bee4e9 0 72%,#e1c79d 72%)}.scene-space{background:radial-gradient(circle at 20% 20%,#ffffff 1px,transparent 2px),radial-gradient(circle at 80% 30%,#fff 1px,transparent 2px),linear-gradient(#302d53 0 72%,#766f9d 72%);background-size:70px 70px,110px 110px,auto}.scene-candy{background:linear-gradient(#f0cfdb 0 72%,#d7add2 72%)}.room-window{position:absolute;top:38px;left:45px;width:135px;height:140px;background:linear-gradient(#a6d9ee,#eff5d0);border:9px solid #fcf4e6;border-radius:65px 65px 4px 4px;box-shadow:0 5px 0 #00000012}.room-window:after{content:'';position:absolute;left:50%;width:7px;height:100%;background:#fcf4e6}.room-window:before{content:'';position:absolute;top:50%;height:7px;width:100%;background:#fcf4e6}.scene-night .room-window,.scene-space .room-window{background:radial-gradient(circle at 65% 25%,#f4df9c 0 16px,transparent 17px),#554d82}.room-shelf{position:absolute;right:50px;top:138px;width:150px;height:12px;background:#ad7a54;border-radius:3px}.room-shelf span{position:absolute;bottom:10px;left:45px;font-size:55px}.room-rug{position:absolute;width:270px;height:85px;left:calc(50% - 135px);bottom:35px;border:8px solid #ffffff55;border-radius:50%;background:#b4a1d4;z-index:1}.rug-mint{background:#97bfa8}.rug-peach{background:#e0a78c}.rug-sky{background:#93bcd3}.room-pal{position:absolute;width:200px;left:calc(50% - 100px);bottom:48px;border:0;background:none;z-index:2;cursor:pointer}.room-prop{border:0;background:transparent;position:absolute;bottom:45px;font-size:75px;z-index:3;min-height:90px;min-width:90px}.room-prop.left{left:9%}.room-prop.right{right:9%}.room-caption{position:absolute;bottom:12px;left:0;width:100%;text-align:center;font-size:9px;letter-spacing:2px;color:#392f45;z-index:3}.floor-tiles:before{content:'';position:absolute;top:72%;height:28%;width:100%;background:repeating-linear-gradient(90deg,transparent,transparent 59px,#ffffff44 60px),repeating-linear-gradient(0deg,transparent,transparent 29px,#ffffff44 30px);z-index:1}.floor-soft:before{content:'';position:absolute;top:72%;height:28%;width:100%;background:#f0dfed88;z-index:1}.room-controls{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}.prop-picker{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.prop-picker button{border:1px solid var(--line);border-radius:12px;background:white;color:var(--ink);padding:10px 5px;font-size:10px}.prop-picker button span{display:block;font-size:27px;margin-bottom:5px}.prop-picker button[aria-pressed=true]{border-color:var(--purple);background:#efe9ff}.game-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}.game-card{background:white;border:1px solid var(--line);border-radius:24px;padding:28px;text-align:left;color:var(--ink);box-shadow:0 7px 0 #eeebe4}.game-card>span{font-size:43px;color:var(--purple)}.game-card h3{font-size:23px;letter-spacing:-.6px}.game-card p{font-size:14px}.game-card b{font-size:13px;color:var(--purple)}.game-toolbar{display:flex;gap:20px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:17px 20px;background:#ebe6f6;border-radius:16px;margin:20px 0;font-size:13px}.game-toolbar .secondary{padding:10px 14px;min-height:40px;font-size:12px}.memory-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px auto;max-width:680px}.memory-card{aspect-ratio:1.15;border:1px solid #d5c9ec;background:#e6ddf8;border-radius:18px;font-size:43px;color:var(--purple);box-shadow:0 5px 0 #d7cbea;min-height:75px}.memory-card.matched{background:#e2edce;border-color:#bed595;box-shadow:none;opacity:.8}.star-field{height:390px;position:relative;overflow:hidden;border-radius:25px;background:radial-gradient(circle at 25% 25%,#bca5db 1px,transparent 2px),linear-gradient(#3d315f,#695a8e);background-size:45px 60px,auto}.catch-star{position:absolute;background:none;border:0;color:#ffe896;font-size:65px;min-width:75px;min-height:75px;z-index:2}.star-pal{position:absolute;width:115px;right:5px;bottom:4px}.garden-bubbles{display:grid;grid-template-columns:repeat(6,1fr);gap:15px;padding:30px;background:#eee6f5;border-radius:24px}.garden-bubble{border:2px solid #ffffffbb;background:radial-gradient(circle at 30% 25%,#ffffffcc,var(--bubble-colour));aspect-ratio:1;min-height:45px;border-radius:50%;font-size:27px;color:#67537f;box-shadow:0 4px 0 #a38bb522}.garden-bubble.popped{background:transparent;border-color:transparent;box-shadow:none;opacity:.4}#doodle{width:100%;height:auto;border:1px solid var(--line);border-radius:20px;background:#fffdf8;touch-action:none}.link-button{display:inline-flex;align-items:center;text-decoration:none}.room-controls .result-card{margin:0}.no-pal-motion .catch-star{transition:none}.no-pal-motion .pal-room *{animation:none!important}body[data-theme=dark]{--ink:#eee9f6;--muted:#c0b8ce;--paper:#211d2b;--line:#4e445e;background:var(--paper);color:var(--ink)}body[data-theme=dark] .card,body[data-theme=dark] .result-card,body[data-theme=dark] .option,body[data-theme=dark] .game-card,body[data-theme=dark] .cadence-card,body[data-theme=dark] .plan-bar,body[data-theme=dark] .topic-tabs button,body[data-theme=dark] .choice-row button,body[data-theme=dark] .input,body[data-theme=dark] textarea,body[data-theme=dark] .prop-picker button,body[data-theme=dark] dialog{background:#2e273b;color:var(--ink)}body[data-theme=dark] .topic-hero,body[data-theme=dark] .topic-card{--topic-wash:#342b42}body[data-theme=dark] [class*='theme-']{--topic:#d0b7f0}body[data-theme=dark] .secondary,body[data-theme=dark] .game-toolbar,body[data-theme=dark] .tracking-invite,body[data-theme=dark] .empty-history,body[data-theme=dark] .scale-key,body[data-theme=dark] .note-card{background:#40334f;color:#e0cef8}body[data-theme=dark] .option.selected{background:#493759;border-color:#d2b6fa}body[data-theme=dark] .notice{background:#453823;color:#f5dcb1;border-color:#665132}body[data-theme=dark] .buddy-dock,body[data-theme=dark] .pal-encouragement{background:#352d44;color:#efe7f9}body[data-theme=dark] .pal-encouragement:after{background:#352d44}body[data-theme=dark] .pal-encouragement p{color:var(--ink)}body[data-theme=dark] .brand{color:#eee9f6}body[data-theme=dark] .tracking-table{background:#2e273b}body[data-theme=dark] .trend-bars{background:#2e273b}body[data-theme=dark] .result-top,body[data-theme=dark] .trend-summary{background:#34452f;color:#e0ebd5}body[data-theme=dark] .result-top p{color:#d2dec7}body[data-theme=dark] .chip{background:#443450;color:#e4d1f5}body[data-theme=dark] .art{background:#40334f}body[data-theme=dark] .pal-tabbar{background:#40334f}body[data-theme=dark] .pal-tabbar button{color:#d4c6e5}body[data-theme=dark] .pal-tabbar button[aria-pressed=true]{background:#5e4677;color:white}body[data-theme=dark] .profile-list button,body[data-theme=dark] .history-list button{background:#2e273b;color:var(--ink)}body[data-textsize=large]{--text-scale:1.12}body[data-textsize=larger]{--text-scale:1.25}body[data-textsize=large] p,body[data-textsize=larger] p,body[data-textsize=large] .option,body[data-textsize=larger] .option{font-size:calc(16px*var(--text-scale))}body[data-textsize=large] .tiny,body[data-textsize=larger] .tiny{font-size:calc(12px*var(--text-scale))}@media(max-width:700px){.nav-tabs{max-width:calc(100% - 94px)}.nav-tabs button{font-size:12px;padding:11px}.topic-page,.room-page,.games-page{margin-top:25px}.topic-hero{padding:26px 23px}.topic-hero h1{font-size:34px}.topic-tabs button{font-size:12px;padding:12px}.advice-grid,.room-controls,.game-grid{grid-template-columns:1fr}.room-page h1,.games-page h1{font-size:40px}.pal-room{height:340px}.room-window{left:20px;top:35px;width:95px;height:110px}.room-shelf{right:22px;width:100px;top:120px}.room-shelf span{left:30px;font-size:40px}.room-pal{width:160px;left:calc(50% - 80px);bottom:40px}.room-rug{width:210px;left:calc(50% - 105px);height:65px}.room-prop{font-size:50px;bottom:40px;min-width:60px;min-height:65px}.room-prop.left{left:3%}.room-prop.right{right:3%}.room-caption{font-size:8px;letter-spacing:1px}.memory-grid{gap:9px}.memory-card{font-size:30px;min-height:65px;border-radius:13px}.garden-bubbles{gap:11px;padding:20px;grid-template-columns:repeat(5,1fr)}.star-field{height:350px}.resource-list a{align-items:flex-start;flex-direction:column;gap:8px}.count-line>b{font-size:38px}.game-toolbar{gap:12px;padding:15px}.game-card{padding:24px}}@media print{.topic-tabs,.room-page,.games-page,.home-shortcuts,.topic-question{display:none!important}}
body[data-theme=dark] .primary,body[data-theme=dark] .topic-page .primary{background:#7252ad;color:#fff}body[data-theme=dark] .nav-tabs button:hover,body[data-theme=dark] .nav-tabs button[aria-current]{background:#49365d;color:#e0ccf9}.support-word{font-size:27px!important;letter-spacing:-1px!important}

/* Google Sign-in and Google Workspace UI */
.gsi-material-button {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -webkit-appearance: none;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid #747775;
  -webkit-border-radius: 20px;
  border-radius: 20px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #1f1f1f;
  cursor: pointer;
  font-family: 'Roboto', arial, sans-serif;
  font-size: 14px;
  height: 40px;
  letter-spacing: 0.25px;
  outline: none;
  overflow: hidden;
  padding: 0 16px;
  position: relative;
  text-align: center;
  transition: background-color .218s, border-color .218s, box-shadow .218s;
  vertical-align: middle;
  white-space: nowrap;
  width: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.gsi-material-button:hover {
  background-color: #f8fafd;
  box-shadow: 0 1px 3px rgba(60,64,67,0.3);
}
.gsi-material-button-icon {
  height: 20px;
  min-width: 20px;
  width: 20px;
  display: flex;
  align-items: center;
}
.gsi-material-button-contents {
  font-family: 'Roboto', arial, sans-serif;
  font-weight: 500;
  color: #1f1f1f;
}
.drive-section {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}
.drive-file-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0;
}
.drive-file-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper, #fff);
  font-size: 13px;
}
.drive-file-item .file-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.drive-file-item .file-name {
  font-weight: 600;
}
.drive-file-item .file-sub {
  font-size: 11px;
  color: var(--muted);
}
.drive-file-item .file-actions {
  display: flex;
  gap: 6px;
}
.drive-file-item .file-actions button {
  font-size: 11px;
  padding: 4px 8px;
}


/* ==========================================================================
   SPROUT SANCTUARY & REANIMATED RIGS — ULTRA-LIVELY CHARACTERS
   ========================================================================== */

@keyframes sproutBodyBreath {
  0%, 100% {
    transform: translateY(0) scale(1, 1);
  }
  30% {
    transform: translateY(3px) scale(1.04, 0.96);
  }
  65% {
    transform: translateY(-8px) scale(0.965, 1.035);
  }
  85% {
    transform: translateY(-2px) scale(1.01, 0.99);
  }
}

@keyframes sproutShadowSync {
  0%, 100% { transform: scale(1); opacity: 0.65; }
  30% { transform: scale(1.12); opacity: 0.78; }
  65% { transform: scale(0.82); opacity: 0.35; }
}

@keyframes sproutStemSway {
  0%, 100% { transform: rotate(0deg); }
  32% { transform: rotate(-7deg); }
  68% { transform: rotate(8deg); }
}

@keyframes sproutLeafLeft {
  0%, 100% { transform: rotate(0deg); }
  35% { transform: rotate(-18deg) scale(1.1); }
  72% { transform: rotate(12deg) scale(0.92); }
}

@keyframes sproutLeafRight {
  0%, 100% { transform: rotate(0deg); }
  38% { transform: rotate(20deg) scale(1.12); }
  70% { transform: rotate(-14deg) scale(0.9); }
}

@keyframes sproutArmWaveL {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-22deg) translateY(-2px); }
}

@keyframes sproutArmWaveR {
  0%, 100% { transform: rotate(0deg); }
  45% { transform: rotate(28deg) translateY(-6px); }
}

@keyframes sproutFranticWave {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(50deg) translateY(-10px); }
}

@keyframes sproutFootTapL {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px) scale(1.06); }
}

@keyframes sproutFootTapR {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px) scale(1.06); }
}

@keyframes palEyeBlink {
  0%, 88%, 94%, 100% { transform: scaleY(1); }
  90% { transform: scaleY(0.08); }
  92% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

@keyframes sproutJoyHop {
  0% { transform: translateY(0) scale(1, 1); }
  18% { transform: translateY(9px) scale(1.24, 0.76); }
  45% { transform: translateY(-38px) scale(0.84, 1.2); }
  68% { transform: translateY(-5px) scale(1.12, 0.9); }
  85% { transform: translateY(2px) scale(0.96, 1.04); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes sproutWiggleDance {
  0%, 100% { transform: rotate(0deg) scale(1); }
  15% { transform: rotate(-15deg) scale(1.08) translateY(-9px); }
  30% { transform: rotate(15deg) scale(1.08) translateY(-9px); }
  45% { transform: rotate(-12deg) scale(1.04) translateY(-5px); }
  60% { transform: rotate(12deg) scale(1.04) translateY(-5px); }
  75% { transform: rotate(-5deg) translateY(-2px); }
  90% { transform: rotate(5deg) translateY(-2px); }
}

@keyframes palChibiHop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  35% { transform: translateY(-12px) scale(0.94, 1.06); }
  60% { transform: translateY(0) scale(1.08, 0.94); }
}

@keyframes palSpiritFloat {
  0%, 100% { transform: translateY(0px) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(2deg); }
}

@keyframes palHeartFloat {
  0% { opacity: 0; transform: translateY(0) scale(0.5); }
  25% { opacity: 1; transform: translateY(-22px) scale(1.3); }
  100% { opacity: 0; transform: translateY(-55px) scale(0.85); }
}

@keyframes boxBreathePulse {
  0%, 100% { transform: scale(1); }
  25% { transform: scale(1.4); }
  50% { transform: scale(1.4); }
  75% { transform: scale(1); }
}

/* Base Rig Animations */
.pal-svg:not(.still) {
  animation: sproutBodyBreath 3.2s ease-in-out infinite !important;
  transform-origin: 120px 200px;
}

.pal-svg:not(.still) .pal-ground-shadow {
  animation: sproutShadowSync 3.2s ease-in-out infinite;
  transform-origin: 120px 208px;
}

.pal-svg:not(.still) .pal-stem-curve {
  animation: sproutStemSway 3.2s ease-in-out infinite;
  transform-origin: 120px 44px;
}

.pal-svg:not(.still) .pal-leaf-left {
  animation: sproutLeafLeft 2.4s ease-in-out infinite;
  transform-origin: 121px 22px;
}

.pal-svg:not(.still) .pal-leaf-right {
  animation: sproutLeafRight 2.8s ease-in-out infinite;
  transform-origin: 122px 20px;
}

.pal-svg:not(.still) .pal-arm-l {
  animation: sproutArmWaveL 2.2s ease-in-out infinite;
  transform-origin: 44px 136px;
}

.pal-svg:not(.still) .pal-arm-r {
  animation: sproutArmWaveR 1.8s ease-in-out infinite;
  transform-origin: 196px 136px;
}

.pal-svg:not(.still) .pal-foot-l {
  animation: sproutFootTapL 3.2s ease-in-out infinite;
  transform-origin: 94px 196px;
}

.pal-svg:not(.still) .pal-foot-r {
  animation: sproutFootTapR 3.2s ease-in-out infinite 0.35s;
  transform-origin: 146px 196px;
}

.pal-svg:not(.still) .pal-eye-blink {
  animation: palEyeBlink 3.8s infinite;
  transform-origin: 120px 100px;
}

.pal-svg:not(.still) .pal-sparkle {
  animation: sproutGlowPulse 2s ease-in-out infinite;
}

/* Hover Reactions: Sprouty perks up and waves happily! */
button:hover .pal-svg:not(.still) .pal-arm-r,
.pal-svg:hover:not(.still) .pal-arm-r {
  animation: sproutFranticWave 0.5s ease-in-out infinite !important;
}

button:hover .pal-svg:not(.still) .pal-leaf-left,
button:hover .pal-svg:not(.still) .pal-leaf-right {
  animation-duration: 1.2s !important;
}

/* Interactive States */
.pal-svg.bounced,
.bounced .pal-svg {
  animation: sproutJoyHop 0.85s cubic-bezier(0.28, 0.84, 0.42, 1) !important;
}

.pal-svg.dancing,
.dancing .pal-svg {
  animation: sproutWiggleDance 2s ease-in-out infinite !important;
}

.pal-svg.rig-chibi:not(.still) {
  animation: palChibiHop 2.4s ease-in-out infinite !important;
}

.pal-svg.rig-spirit:not(.still) {
  animation: palSpiritFloat 3.8s ease-in-out infinite !important;
}

/* Pet interaction sparkle / heart overlay */
.pal-pet-heart {
  position: absolute;
  pointer-events: none;
  font-size: 26px;
  animation: palHeartFloat 1.2s ease-out forwards;
  z-index: 99;
}

/* ==========================================================================
   UI OVERHAUL THEMES
   ========================================================================== */

/* Theme 1: 🌱 Botanical Calm (Soft sage, linen cards, living sprout) */
body[data-uistyle="botanical"] {
  --paper: #f2f7f3;
  --ink: #1c3026;
  --muted: #4d6658;
  --purple: #2b7751;
  --lime: #bfe8cb;
  --line: #cde0d2;
  background: radial-gradient(circle at 12% 10%, rgba(167, 232, 189, 0.4), transparent 45%),
              radial-gradient(circle at 88% 25%, rgba(191, 232, 203, 0.3), transparent 50%),
              var(--paper);
}
body[data-uistyle="botanical"][data-theme="dark"] {
  --paper: #121e18;
  --ink: #e8f4ec;
  --muted: #99b8a6;
  --purple: #62d695;
  --lime: #244432;
  --line: #274032;
}
body[data-uistyle="botanical"] .card,
body[data-uistyle="botanical"] .result-card,
body[data-uistyle="botanical"] .cadence-card,
body[data-uistyle="botanical"] .game-card {
  border-radius: 26px;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px -8px rgba(28, 48, 38, 0.07);
}
body[data-uistyle="botanical"] .primary,
body[data-uistyle="botanical"] .secondary {
  border-radius: 999px;
}

/* Theme 2: 🎮 Cozy Pocket Bento (Tactile modular cards, playful pills) */
body[data-uistyle="bento"] {
  --paper: #fffaf2;
  --ink: #221c38;
  --muted: #645a7c;
  --purple: #7937e8;
  --lime: #fde047;
  --line: #221c38;
}
body[data-uistyle="bento"][data-theme="dark"] {
  --paper: #181329;
  --ink: #faf5ff;
  --muted: #c3b5fc;
  --purple: #a688fa;
  --lime: #ca8a04;
  --line: #715ea8;
}
body[data-uistyle="bento"] .card,
body[data-uistyle="bento"] .result-card,
body[data-uistyle="bento"] .cadence-card,
body[data-uistyle="bento"] .game-card,
body[data-uistyle="bento"] .tracking-invite {
  border: 2.5px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 6px 0 var(--line);
}
body[data-uistyle="bento"] .primary,
body[data-uistyle="bento"] .secondary,
body[data-uistyle="bento"] .option {
  border: 2px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--line);
  font-weight: 800;
}
body[data-uistyle="bento"] .primary:active,
body[data-uistyle="bento"] .secondary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--line);
}

/* Theme 3: ✨ Aurora Glass (Translucent frosted glass, subtle glowing gradients) */
body[data-uistyle="aurora"] {
  --paper: #f4f2fc;
  --ink: #18152c;
  --muted: #595477;
  --purple: #6242f3;
  --lime: #c4b5fd;
  --line: rgba(98, 66, 243, 0.22);
  background: radial-gradient(circle at 85% 10%, rgba(56, 189, 248, 0.18), transparent 45%),
              radial-gradient(circle at 15% 25%, rgba(139, 92, 246, 0.2), transparent 50%),
              var(--paper);
}
body[data-uistyle="aurora"][data-theme="dark"] {
  --paper: #0e0c1b;
  --ink: #f4f1ff;
  --muted: #a49dc6;
  --purple: #8b5cf6;
  --lime: #2e235d;
  --line: rgba(167, 139, 250, 0.26);
}
body[data-uistyle="aurora"] .card,
body[data-uistyle="aurora"] .result-card,
body[data-uistyle="aurora"] .cadence-card,
body[data-uistyle="aurora"] .game-card {
  backdrop-filter: blur(16px);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 14px 34px -10px rgba(98, 66, 243, 0.15);
}

/* Theme 4: 🌑 Midnight OLED (Ultra deep dark mode, crisp high contrast) */
body[data-uistyle="midnight"] {
  --paper: #08060e;
  --ink: #f6f3fc;
  --muted: #9c93b6;
  --purple: #a855f7;
  --lime: #38bdf8;
  --line: #29243d;
  background: #08060e;
}
body[data-uistyle="midnight"] .card,
body[data-uistyle="midnight"] .result-card,
body[data-uistyle="midnight"] .cadence-card,
body[data-uistyle="midnight"] .game-card {
  background: #120e21;
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
}
body[data-uistyle="midnight"] .primary {
  background: #a855f7;
  color: #ffffff;
}

/* ==========================================================================
   STYLE SWITCHER BAR & SANCTUARY BENTO
   ========================================================================== */

.style-switcher-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin: 6px 0 16px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(105, 80, 213, 0.05);
  font-size: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.style-switcher-bar::-webkit-scrollbar {
  display: none;
}
.style-switcher-bar .style-label {
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.style-switcher-pills {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.style-switcher-pills::-webkit-scrollbar {
  display: none;
}
.style-switcher-pills button {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: transform 0.15s, background-color 0.15s, border-color 0.15s;
}
.style-switcher-pills button:hover {
  transform: translateY(-1px);
}
.style-switcher-pills button[aria-pressed="true"] {
  background: var(--purple);
  color: #ffffff;
  border-color: var(--purple);
}

/* Sprout Sanctuary Hero Banner */
.sanctuary-hero {
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 22px;
  margin: 10px 0 24px;
  background: linear-gradient(135deg, rgba(105, 80, 213, 0.08), rgba(65, 118, 74, 0.08));
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: 22px;
  position: relative;
  overflow: hidden;
}
@media (max-width: 650px) {
  .sanctuary-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
}
.sanctuary-pal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.sanctuary-pal-btn {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 0;
  width: 130px;
  height: 125px;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sanctuary-pal-btn:hover {
  transform: scale(1.06);
}
.sanctuary-pal-btn:active {
  transform: scale(0.94);
}
.sanctuary-pet-hint {
  font-size: 11px;
  color: var(--muted);
  margin-top: 4px;
  font-weight: 600;
}
.sanctuary-speech {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sanctuary-bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 14px 18px;
  position: relative;
  box-shadow: 0 4px 16px -4px rgba(0,0,0,0.06);
}
.sanctuary-bubble h2 {
  font-size: 18px;
  margin: 0 0 4px;
  color: var(--ink);
}
.sanctuary-bubble p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.45;
}
.sanctuary-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.sanctuary-actions button {
  font-size: 12px;
  padding: 8px 14px;
}

/* Box Breathing Modal Card */
.box-breathe-wrap {
  text-align: center;
  padding: 20px 10px;
}
.box-breathe-circle {
  width: 140px;
  height: 140px;
  margin: 20px auto;
  border-radius: 50%;
  border: 4px solid var(--purple);
  background: radial-gradient(circle, rgba(105, 80, 213, 0.2), transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--purple);
  transition: transform 3.8s ease-in-out;
}
.box-breathe-circle.inhale {
  transform: scale(1.45);
}
.box-breathe-circle.exhale {
  transform: scale(0.9);
}

/* Zen Sand Garden Modal */
.zen-garden-wrap {
  text-align: center;
  padding: 10px 4px;
}
.zen-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 12px 0;
}
.zen-toolbar button {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  transition: all 0.15s ease;
}
.zen-toolbar button[aria-pressed="true"] {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.zen-stage-container {
  display: flex;
  justify-content: center;
  margin: 12px auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  border: 2px solid var(--line);
  max-width: 600px;
}
#zen-canvas {
  touch-action: none;
  cursor: crosshair;
  background: #ecdcc3;
  width: 100%;
  height: auto;
  display: block;
}

/* UI Prototype Grid in Display Settings */
.ui-styles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
.ui-style-card {
  text-align: left;
  padding: 16px;
  border-radius: 16px;
  border: 2px solid var(--line);
  background: var(--paper);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ui-style-card:hover {
  transform: translateY(-2px);
  border-color: var(--purple);
}
.ui-style-card[aria-pressed="true"] {
  border-color: var(--purple);
  background: rgba(105, 80, 213, 0.08);
  box-shadow: 0 0 0 2px var(--purple);
}
.ui-style-card h4 {
  margin: 0;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.ui-style-card p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.45;
}
.ui-style-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink);
  flex-shrink: 0;
  white-space: nowrap;
}

/* Sanctuary Ribbon & Bubble */
.daily-sanctuary-wrap {
  margin-bottom: 20px;
}
.sanctuary-bubble {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  display: inline-block;
  max-width: 100%;
}
.sanctuary-bubble em {
  font-style: normal;
  color: var(--purple);
  font-weight: 600;
}


/* ==========================================================================
   GROUPED 4-TAB NAVIGATION & SUBNAV PILLS
   ========================================================================== */

.app-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  position: relative;
}

.nav-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  overflow-x: visible;
}

.grouped-nav-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
}

.nav-dropdown-wrap {
  position: relative;
  display: inline-block;
}

.nav-dropdown-wrap .dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 11px;
  font-size: 13px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--muted);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}

.nav-dropdown-wrap .dropdown-toggle:hover {
  border-color: var(--purple);
  color: var(--purple);
}

.nav-caret {
  font-size: 9px;
  transition: transform 0.2s ease;
  opacity: 0.7;
}

.nav-dropdown-wrap.active-group .dropdown-toggle,
.grouped-nav-bar .nav-tab.active {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 200px;
  max-width: calc(100vw - 24px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 6px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.32);
  z-index: 9999;
  flex-direction: column;
  gap: 3px;
}

/* Right-align dropdowns on right side so they never overflow mobile screen */
.nav-dropdown-wrap:nth-child(n+3) .nav-dropdown-menu {
  left: auto;
  right: 0;
}

.nav-dropdown-menu.open {
  display: flex;
  animation: dropdownPop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (hover: hover) {
  .nav-dropdown-wrap:hover .nav-dropdown-menu {
    display: flex;
  }
}

@keyframes dropdownPop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.nav-dropdown-menu button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease;
}

.nav-dropdown-menu button:hover,
.nav-dropdown-menu button:focus-visible {
  background: rgba(105, 80, 213, 0.1);
  color: var(--purple);
}

.profile-button {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 12px;
  color: var(--muted);
  background: var(--paper);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.profile-button:hover {
  border-color: var(--purple);
  color: var(--purple);
}

@media (max-width: 680px) {
  .app-nav {
    gap: 4px;
    padding: 8px 0;
    overflow: visible;
  }
  .nav-tabs {
    overflow: visible;
    max-width: 100%;
  }
  .grouped-nav-bar {
    gap: 4px;
    overflow: visible;
  }
  .nav-dropdown-wrap .dropdown-toggle {
    padding: 6px 8px;
    font-size: 11.5px;
    gap: 3px;
  }
  .profile-button {
    padding: 6px 8px;
    font-size: 11.5px;
    max-width: 95px;
  }
}

/* ==========================================================================
   SPROUTY'S THERAPY SANCTUARY & OFFICE STAGE
   ========================================================================== */

.pal-office-stage {
  border-radius: 24px;
  padding: 18px 18px 16px;
  margin-bottom: 24px;
  position: relative;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.pal-office-scene {
  position: relative;
  width: 100%;
  height: 340px;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, #eae5f1 0%, #ede7f3 68%, #d5beaa 68%, #c5a78d 70%, #ab8b71 100%);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.08);
}

body[data-theme=dark] .pal-office-scene {
  background: linear-gradient(180deg, #2b2438 0%, #322b42 68%, #4a3729 68%, #3e2e22 70%, #2f2219 100%);
  border-color: rgba(255, 255, 255, 0.08);
}

.office-window {
  position: absolute;
  top: 24px;
  left: 28px;
  width: 80px;
  height: 105px;
  background: linear-gradient(180deg, #c5e4f7 0%, #eff7fa 100%);
  border: 5px solid #ffffff;
  border-radius: 40px 40px 4px 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 1;
}

body[data-theme=dark] .office-window {
  background: linear-gradient(180deg, #23344a 0%, #3a4b60 100%);
  border-color: #584a6b;
}

.office-window i:nth-child(1) {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #ffffff;
  transform: translateX(-50%);
}

.office-window i:nth-child(2) {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  background: #ffffff;
  transform: translateY(-50%);
}

body[data-theme=dark] .office-window i {
  background: #584a6b;
}

.office-framed-art {
  position: absolute;
  top: 28px;
  right: 130px;
  width: 44px;
  height: 54px;
  background: #fdfaf6;
  border: 4px solid #8d5b4c;
  border-radius: 6px;
  display: grid;
  place-items: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  font-size: 18px;
  z-index: 1;
}

body[data-theme=dark] .office-framed-art {
  background: #392f49;
  border-color: #6d463b;
}

.office-rug {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 360px;
  max-width: 88%;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #eedbf8 0%, #dcbeef 60%, #c4a1de 100%);
  border: 3px dashed rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06);
  z-index: 1;
  pointer-events: none;
}

body[data-theme=dark] .office-rug {
  background: radial-gradient(ellipse at center, #4d3a66 0%, #402f54 60%, #2f2140 100%);
  border-color: rgba(255, 255, 255, 0.15);
}

.office-prop-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  display: block;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.office-prop-btn:hover {
  transform: translateY(-3px) scale(1.02);
  filter: drop-shadow(0 4px 8px rgba(105, 80, 213, 0.25));
}

.office-prop-btn:focus-visible {
  outline: 2px solid var(--purple);
  border-radius: 8px;
}

.office-scene-bookshelf {
  position: absolute;
  left: 125px;
  bottom: 45px;
  width: 82px;
  z-index: 2;
}

.scene-bookshelf-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.14));
}

.office-scene-lamp {
  position: absolute;
  left: 215px;
  bottom: 42px;
  width: 60px;
  z-index: 4;
}

.scene-lamp-svg {
  width: 100%;
  height: auto;
  display: block;
}

.lamp-ambient-beam {
  pointer-events: none;
}

.office-scene-couch {
  position: absolute;
  left: calc(50% - 130px);
  bottom: 35px;
  width: 165px;
  z-index: 2;
}

.scene-couch-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.16));
}

.office-scene-pal {
  position: absolute;
  left: calc(50% - 15px);
  bottom: 40px;
  width: 110px;
  z-index: 5;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  outline: none;
  transition: transform 0.18s ease;
}

.office-scene-pal:hover {
  transform: translateY(-4px) scale(1.04);
}

.office-scene-pal svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.14));
}

.office-scene-table {
  position: absolute;
  right: 25px;
  bottom: 36px;
  width: 95px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scene-table-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.12));
}

.tabletop-cluster {
  position: absolute;
  top: -12px;
  display: flex;
  gap: 3px;
  justify-content: center;
  z-index: 4;
}

.table-item-btn {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 3px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease;
  backdrop-filter: blur(2px);
}

.table-item-btn:hover {
  transform: translateY(-2px) scale(1.1);
  border-color: var(--purple);
}

body[data-theme=dark] .table-item-btn {
  background: rgba(45, 38, 59, 0.9);
  border-color: rgba(255, 255, 255, 0.16);
}

.table-item-svg {
  width: 20px;
  height: 18px;
  display: block;
}

@keyframes steamDrift {
  0% { transform: translateY(0) scaleX(1); opacity: 0.8; }
  50% { transform: translateY(-3px) scaleX(1.15); opacity: 0.9; }
  100% { transform: translateY(-7px) scaleX(1); opacity: 0; }
}

.steam-wisp {
  animation: steamDrift 2.2s ease-in-out infinite;
}

.steam-2 {
  animation-delay: 1.1s;
}

.office-actions-bar {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  text-align: center;
}

.office-actions-bar .actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

@media (max-width: 640px) {
  .pal-office-scene {
    height: 290px;
  }
  .office-window {
    left: 12px;
    top: 14px;
    width: 60px;
    height: 80px;
    border-width: 4px;
  }
  .office-framed-art {
    right: 80px;
    top: 16px;
    width: 36px;
    height: 44px;
    font-size: 15px;
    border-width: 3px;
  }
  .office-rug {
    width: 290px;
    height: 75px;
    bottom: 14px;
  }
  .office-scene-bookshelf {
    left: 8px;
    bottom: 35px;
    width: 62px;
  }
  .office-scene-lamp {
    left: 74px;
    bottom: 34px;
    width: 48px;
  }
  .office-scene-couch {
    left: calc(50% - 95px);
    bottom: 28px;
    width: 125px;
  }
  .office-scene-pal {
    left: calc(50% - 10px);
    bottom: 32px;
    width: 85px;
  }
  .office-scene-table {
    right: 8px;
    bottom: 28px;
    width: 76px;
  }
  .tabletop-cluster {
    top: -10px;
    gap: 2px;
  }
  .table-item-btn {
    padding: 2px 3px;
  }
  .table-item-svg {
    width: 16px;
    height: 15px;
  }
}

/* ==========================================================================
   SPROUT'S ROOM SIDE-SCROLLING CAROUSEL & PINNED STAGE
   ========================================================================== */

.room-header-compact {
  text-align: center;
  margin-bottom: 12px;
}

.room-header-compact h1 {
  font-size: 34px;
  letter-spacing: -1.2px;
  margin: 4px 0 0;
}

.pal-room-sticky-stage {
  position: relative;
  margin-bottom: 14px;
}

@media (max-width: 700px) {
  .pal-room-sticky-stage {
    position: sticky;
    top: 56px;
    z-index: 15;
    background: var(--paper);
    padding: 4px 0 8px;
  }
  .pal-room {
    height: 270px !important;
  }
}

.room-nav-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 8px;
  margin-bottom: 6px;
  justify-content: center;
}

.room-nav-pills::-webkit-scrollbar {
  display: none;
}

.room-nav-pill {
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.room-nav-pill[aria-pressed=true],
.room-nav-pill.active {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}

.room-controls {
  display: flex !important;
  flex-direction: row !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 16px !important;
  padding: 4px 4px 14px !important;
  margin-top: 4px !important;
  scrollbar-width: thin;
}

.room-controls .result-card,
.room-panel-card {
  flex: 0 0 min(90vw, 380px) !important;
  scroll-snap-align: start;
  margin: 0 !important;
  box-sizing: border-box;
}

.scene-choice-row {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  scrollbar-width: thin;
  padding-bottom: 6px;
}

.scene-choice-row button {
  flex-shrink: 0;
  white-space: nowrap;
}

.prop-picker {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-rows: repeat(2, 62px) !important;
  overflow-x: auto !important;
  scrollbar-width: thin;
  gap: 8px !important;
  padding-bottom: 6px;
  max-width: 100%;
}

.prop-picker button {
  width: 62px !important;
  height: 62px !important;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px !important;
  font-size: 10px !important;
  line-height: 1.1;
  border-radius: 12px;
}

.prop-picker button span {
  font-size: 22px !important;
  margin-bottom: 2px !important;
}

.room-page .actions {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 8px !important;
  padding: 6px 4px 10px !important;
  scrollbar-width: thin;
}

.room-page .actions button {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  scroll-snap-align: start;
}

/* ==========================================================================
   FLOATING BUDDY DOCK & SAFE SCREEN CLEARANCE
   ========================================================================== */

.buddy-dock {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 100;
  width: 96px;
  min-height: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.15);
  padding: 0 8px 10px;
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.buddy-dock:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
}

@media (max-width: 680px) {
  .buddy-dock {
    width: 56px;
    height: 56px;
    min-height: 56px;
    bottom: 14px;
    right: 14px;
    padding: 4px;
    border-radius: 50%;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
  .buddy-dock .pal-svg {
    height: 44px;
    width: 44px;
    margin: 0;
  }
  .buddy-dock > span {
    display: none;
  }
}

main,
.result,
.topic-page,
.tidbits-page,
.pal-main-page,
.room-page,
.games-page {
  padding-bottom: 96px;
}

.card.topic-question {
  padding-bottom: 32px;
  margin-bottom: 40px;
}

.card.topic-question .nav {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .card.topic-question .nav button.primary {
    flex: 1;
    min-height: 48px;
    font-size: 15px;
  }
}

/* ==========================================================================
   CODEX PET SANCTUARY ON HOME
   ========================================================================== */

.codex-pet-sanctuary {
  margin-bottom: 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.sanctuary-top-row {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

.sanctuary-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 170px;
}

.sanctuary-pet-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  position: relative;
  outline: none;
}

.sanctuary-pet-btn svg {
  width: 150px;
  height: 140px;
  display: block;
}

.pal-speech-bubble {
  background: rgba(105, 80, 213, 0.08);
  border: 1px solid rgba(105, 80, 213, 0.2);
  border-radius: 14px;
  padding: 10px 14px;
  margin-top: 10px;
  max-width: 250px;
  position: relative;
  cursor: pointer;
  text-align: center;
  transition: transform 0.15s ease;
}

.pal-speech-bubble:hover {
  transform: translateY(-2px);
}

.pal-speech-bubble .bubble-sparkle {
  position: absolute;
  top: -8px;
  right: -6px;
  font-size: 12px;
}

.pal-speech-bubble p {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ink);
  font-weight: 500;
}

.sanctuary-info-wrap {
  flex: 1;
  min-width: 260px;
}

.pal-subline {
  margin: 8px 0 16px;
  font-size: 14px;
  color: var(--muted);
  line-height: 1.45;
}

.sanctuary-action-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ==========================================================================
   PAL MAIN PAGE & MULTI-TURN AI CHAT
   ========================================================================== */

.pal-main-page {
  max-width: 820px;
  margin: 0 auto;
}

.pal-main-hero {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  padding: 24px;
  margin-bottom: 24px;
}

.pal-main-rig {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 170px;
}

.pal-rig-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  outline: none;
}

.pal-rig-button svg {
  width: 160px;
  height: 150px;
  display: block;
}

.pal-main-details {
  flex: 1;
  min-width: 260px;
}

.pal-main-sub {
  margin: 8px 0 12px;
  color: var(--muted);
  font-size: 14px;
}

.pal-hero-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pal-badge {
  background: rgba(105, 80, 213, 0.1);
  color: var(--purple);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}

.pal-chat-container {
  padding: 24px;
  margin-bottom: 24px;
}

.pal-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 14px;
}

.chat-chips-bar {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.chat-chip {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
}

.chat-chip:hover {
  border-color: var(--purple);
  color: var(--purple);
  transform: translateY(-1px);
}

.pal-chat-stream {
  max-height: 420px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  background: rgba(0,0,0,0.02);
  border-radius: 14px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
}

body[data-theme="dark"] .pal-chat-stream {
  background: rgba(255,255,255,0.03);
}

.chat-msg {
  display: flex;
  gap: 10px;
  max-width: 86%;
}

.chat-msg.user-msg {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-msg.sprout-msg {
  align-self: flex-start;
}

.msg-avatar svg {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(105, 80, 213, 0.1);
  padding: 2px;
}

.msg-bubble {
  border-radius: 16px;
  padding: 10px 14px;
  line-height: 1.45;
  font-size: 14px;
}

.user-msg .msg-bubble {
  background: var(--purple) !important;
  color: #ffffff !important;
  border-bottom-right-radius: 3px;
  padding: 12px 16px;
  box-shadow: 0 4px 14px rgba(105, 80, 213, 0.22);
}

.sprout-msg .msg-bubble {
  border-radius: 16px;
  border-bottom-left-radius: 3px;
  padding: 12px 16px;
  line-height: 1.5;
  font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* Light / Standard theme Sprout bubble */
body:not([data-theme="dark"]):not([data-uistyle="midnight"]) .sprout-msg .msg-bubble {
  background: #ffffff !important;
  border: 1px solid #ded5eb !important;
  color: #241c38 !important;
}
body:not([data-theme="dark"]):not([data-uistyle="midnight"]) .sprout-msg .msg-sender b {
  color: var(--purple) !important;
}
body:not([data-theme="dark"]):not([data-uistyle="midnight"]) .sprout-msg .msg-text {
  color: #241c38 !important;
}

/* Dark & Midnight OLED Sprout bubble */
body[data-theme="dark"] .sprout-msg .msg-bubble,
body[data-uistyle="midnight"] .sprout-msg .msg-bubble {
  background: #1c152e !important;
  border: 1px solid #3d2f5a !important;
  color: #f7f4fc !important;
}
body[data-theme="dark"] .sprout-msg .msg-sender b,
body[data-uistyle="midnight"] .sprout-msg .msg-sender b {
  color: #c4adff !important;
}
body[data-theme="dark"] .sprout-msg .msg-text,
body[data-uistyle="midnight"] .sprout-msg .msg-text {
  color: #f7f4fc !important;
}

/* AI Modal chat & Note cards */
#pal-ai-reply .note-card {
  border-radius: 16px !important;
  padding: 14px 18px !important;
  margin-top: 10px !important;
}
body:not([data-theme="dark"]):not([data-uistyle="midnight"]) #pal-ai-reply .note-card {
  background: #f7f3fd !important;
  border: 1px solid #ddd2ef !important;
  color: #241c38 !important;
}
body[data-theme="dark"] #pal-ai-reply .note-card,
body[data-uistyle="midnight"] #pal-ai-reply .note-card {
  background: #1c152e !important;
  border: 1px solid #3d2f5a !important;
  color: #f7f4fc !important;
}

/* Toast popup contrast in all themes */
#toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: #1c142b !important;
  color: #f7f3ff !important;
  border: 1px solid #4a3a6b !important;
  border-radius: 999px !important;
  padding: 12px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5) !important;
  z-index: 99999 !important;
  text-align: center !important;
  max-width: 90vw !important;
}

.msg-sender {
  font-size: 11px;
  opacity: 0.85;
  margin-bottom: 4px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.msg-text {
  white-space: pre-wrap;
}

.pal-chat-input-bar {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}

.pal-chat-input-bar textarea {
  flex: 1;
  min-height: 44px;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
}

/* ==========================================================================
   TIDBITS PAGE & NOTE CARDS
   ========================================================================== */

.tidbits-page {
  max-width: 820px;
  margin: 0 auto;
}

.quick-jot-card {
  margin: 20px 0;
  padding: 20px;
}

.quick-jot-card textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.4;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  resize: vertical;
  margin-top: 8px;
}

.tidbits-filter-bar {
  margin: 18px 0;
}

.tidbits-filter-bar input[type="search"] {
  width: 100%;
  margin-bottom: 8px;
}

.tidbits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 14px;
}

.tidbit-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

.tidbit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.tidbit-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(105, 80, 213, 0.1);
  color: var(--purple);
}

.tidbit-badge.badge-quick {
  background: rgba(46, 171, 89, 0.12);
  color: #278842;
}

.tidbit-badge.badge-journal {
  background: rgba(238, 155, 155, 0.18);
  color: #c04949;
}

.tidbit-footer {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

/* ==========================================================================
   TOPIC ROTATING DAILY GUIDES & FACTS
   ========================================================================== */

.topic-daily-card {
  border-left: 4px solid var(--purple);
  margin-bottom: 18px;
  padding: 16px 20px;
}

.topic-daily-tag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.daily-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--purple);
}

.topic-daily-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

/* ==========================================================================
   PROFILE MANAGEMENT PAGE
   ========================================================================== */

.profile-page {
  max-width: 760px;
  margin: 0 auto;
}

.profiles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.profile-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}

.profile-list-item.current-profile {
  border-color: var(--purple);
  background: rgba(105, 80, 213, 0.05);
}

.prop-picker button[aria-pressed=true] {
  background: var(--purple) !important;
  color: #ffffff !important;
  border-color: var(--purple) !important;
  box-shadow: 0 2px 8px rgba(105, 80, 213, 0.3) !important;
}

body[data-theme=dark] .prop-picker button {
  background: #2e273b;
  color: var(--ink);
  border-color: var(--line);
}

body[data-theme=dark] .table-item-btn {
  background: #2e273b;
  border-color: var(--line);
}

/* ==========================================================================
   TOPIC CATEGORY PILLS & COMPACT TABBED LAYOUTS
   ========================================================================== */

.topic-category-bar {
  margin: 16px 0 20px;
  max-width: 100%;
}

.topic-category-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding: 4px 2px 8px;
  -webkit-overflow-scrolling: touch;
}

.topic-cat-pill {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.topic-cat-pill:hover {
  border-color: var(--purple);
}

.topic-cat-pill[aria-pressed=true] {
  background: var(--purple);
  color: #ffffff;
  border-color: var(--purple);
  box-shadow: 0 2px 8px rgba(105, 80, 213, 0.3);
}

/* ==========================================================================
   RESULTS TAB BAR
   ========================================================================== */

.results-tabbar {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  margin: 20px 0 16px;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}

.results-tab-btn {
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.15s ease;
}

.results-tab-btn:hover {
  border-color: var(--purple);
}

.results-tab-btn[aria-pressed=true] {
  background: var(--purple);
  color: #ffffff;
  border-color: var(--purple);
  box-shadow: 0 2px 8px rgba(105, 80, 213, 0.25);
}

/* ==========================================================================
   ILLUSTRATED VECTOR ACCESSORIES (NO EMOJIS)
   ========================================================================== */

.hat-choice-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)) !important;
  gap: 8px !important;
  max-height: 230px !important;
  overflow-y: auto !important;
  padding: 6px 2px 10px !important;
  scrollbar-width: thin;
}

.pal-hat-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
  min-height: 64px;
}

.pal-hat-btn:hover {
  border-color: var(--purple);
}

.pal-hat-btn[aria-pressed=true] {
  background: rgba(105, 80, 213, 0.12);
  border-color: var(--purple);
  color: var(--purple);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--purple);
}

.pal-hat-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  width: 100%;
}

.pal-hat-icon-svg {
  display: block;
}

.pal-hat-btn small {
  font-size: 11px;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 68px;
}

/* ==========================================================================
   ROOM & PROPS VECTOR SVG
   ========================================================================== */

.prop-svg {
  display: block;
  margin: auto;
}

.room-shelf .prop-svg {
  position: absolute;
  bottom: 8px;
  left: 48px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.room-prop .prop-svg {
  margin: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}

.prop-picker button {
  padding: 4px !important;
}

.prop-picker button span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  width: 100% !important;
}

/* ==========================================================================
   DARK MODE ADJUSTMENTS
   ========================================================================== */

body[data-theme=dark] .topic-cat-pill {
  background: #2e273b;
  border-color: var(--line);
  color: var(--ink);
}

body[data-theme=dark] .topic-cat-pill[aria-pressed=true] {
  background: var(--purple);
  color: #ffffff;
}

body[data-theme=dark] .results-tab-btn {
  background: #2e273b;
  border-color: var(--line);
  color: var(--ink);
}

body[data-theme=dark] .results-tab-btn[aria-pressed=true] {
  background: var(--purple);
  color: #ffffff;
}

body[data-theme=dark] .pal-hat-btn {
  background: #2e273b;
  border-color: var(--line);
  color: var(--ink);
}

body[data-theme=dark] .pal-hat-btn[aria-pressed=true] {
  background: rgba(196, 173, 255, 0.2);
  border-color: var(--purple);
  color: #ffffff;
}