/* ============================================
 FORCE VIEWPORT – Kill all overflow
 ============================================ */
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}

/* ============================================
 VARIABLES
 ============================================ */
:root {
--bg: #0a0a1a;
--accent: #6c5ce7;
--accent-light: #a29bfe;
--success: #00e676;
--success-dim: rgba(0, 230, 118, 0.15);
--success-glow: rgba(0, 230, 118, 0.4);
--fail: #ff5252;
--fail-dim: rgba(255, 82, 82, 0.15);
--cheat: #ffd740;
--cheat-dim: rgba(255, 215, 64, 0.15);
--cheat-glow: rgba(255, 215, 64, 0.35);
--text: #f0f0f0;
--radius: 20px;
--radius-sm: 14px;
--font: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
 RESET
 ============================================ */
*, *::before, *::after {
margin: 0; padding: 0; box-sizing: border-box;
}

html {
font-size: 16px;
-webkit-font-smoothing: antialiased;
}

body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
min-height: 100vh;
min-height: 100dvh;
-webkit-tap-highlight-color: transparent;
font-size: 16px;
position: relative;
}

/* ============================================
 GLOBAL UTILITY
 ============================================ */
.hidden {
display: none !important;
}

/* ============================================
 BACKGROUND BLOBS – Contained!
 ============================================ */
.bg-blobs {
position: fixed;
top: 0; left: 0;
width: 100vw;
height: 100vh;
z-index: 0;
overflow: hidden;   /* KEY: blobs can't escape */
pointer-events: none;
}

.blob {
position: absolute; border-radius: 50%;
filter: blur(100px); opacity: 0.35;
animation: float 20s ease-in-out infinite;
}
.blob-1 { width: 300px; height: 300px; background: var(--accent); top: -80px; left: -80px; }
.blob-2 { width: 280px; height: 280px; background: #00b894; bottom: -40px; right: -60px; }
.blob-3 { width: 200px; height: 200px; background: #e17055; top: 40%; left: 50%; animation-delay: -14s; }

@keyframes float {
0%, 100% { transform: translate(0, 0) scale(1); }
33% { transform: translate(20px, -30px) scale(1.05); }
66% { transform: translate(-15px, 15px) scale(0.95); }
}

/* ============================================
 LAYOUT
 ============================================ */
#app {
position: relative;
z-index: 1;
width: 100%;
max-width: 480px;
margin: 0 auto;
padding: 0 16px;
overflow-x: hidden;  /* Safety net */
}

.pull-refresh {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 10px);
left: 50%;
z-index: 40;
display: flex;
align-items: center;
gap: 8px;
min-height: 38px;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(16, 22, 42, 0.88);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
backdrop-filter: blur(24px);
-webkit-backdrop-filter: blur(24px);
color: rgba(255, 255, 255, 0.78);
font-size: 0.78rem;
font-weight: 800;
pointer-events: none;
opacity: 0;
transform: translate(-50%, -72px);
transition: opacity 0.18s var(--ease), transform 0.18s var(--ease);
}
.pull-refresh.visible {
opacity: 1;
}
.pull-refresh.ready {
color: #fff;
border-color: rgba(0, 230, 118, 0.35);
background: rgba(22, 55, 42, 0.9);
}
.pull-refresh.loading .pull-refresh-icon {
animation: pull-refresh-spin 0.8s linear infinite;
}
.pull-refresh-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
font-size: 1rem;
line-height: 1;
}
@keyframes pull-refresh-spin {
to { transform: rotate(360deg); }
}

.screen { display: none; }
.screen.active { display: block; width: 100%; }

.dashboard-content {
width: 100%;
padding-bottom: 32px;
}

.dashboard-content > .motivation-bar {
display: none;
}

/* ============================================
 GLASS CARD
 ============================================ */
.glass-card {
background: rgba(22, 33, 62, 0.6);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
padding: 24px;
margin-bottom: 16px;
width: 100%;
}

/* ============================================
 LOGIN
 ============================================ */
.login-wrapper {
display: flex; flex-direction: column; align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
text-align: center;
gap: 4px; width: 100%;
}

.login-logo { font-size: 80px; margin-bottom: 8px; animation: bounce 2s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.login-title {
font-size: clamp(1.8rem, 7vw, 2.4rem);
font-weight: 800; letter-spacing: -1px; color: #fff;
}
.login-title span {
background: linear-gradient(135deg, var(--accent-light), var(--success));
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.login-sub {
color: rgba(255, 255, 255, 0.5);
font-size: clamp(0.85rem, 3.5vw, 0.95rem);
margin-bottom: 32px;
}

.login-form {
width: 100%; max-width: 300px;
display: flex; flex-direction: column; gap: 12px;
}

.input-wrapper { position: relative; width: 100%; }
.input-wrapper input {
width: 100%; background: rgba(15, 52, 96, 0.6);
border: 1.5px solid rgba(255, 255, 255, 0.1); border-radius: var(--radius-sm);
padding: 16px 20px; color: #fff; font-size: 16px;
text-align: center; outline: none;
transition: border 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.input-wrapper input:focus {
border-color: var(--accent-light);
box-shadow: 0 0 0 4px rgba(108, 92, 231, 0.15);
}
.input-wrapper input::placeholder { color: rgba(255, 255, 255, 0.3); }

/* Existing users */
.existing-users {
margin-top: 32px; width: 100%; max-width: 300px;
display: flex; flex-direction: column; gap: 8px;
}
.existing-users:empty { display: none; }
.existing-users-title {
font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1.5px;
color: rgba(255, 255, 255, 0.3); font-weight: 700; text-align: center; margin-bottom: 4px;
}
.existing-user-btn {
display: flex; align-items: center; justify-content: space-between;
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-sm); padding: 12px 16px;
color: #fff; font-size: 0.95rem; font-weight: 600;
cursor: pointer; transition: all 0.2s var(--ease); width: 100%;
}
.existing-user-btn:active { background: rgba(255, 255, 255, 0.12); }
.existing-user-btn .eu-name { display: flex; align-items: center; gap: 10px; color: #fff; }
.existing-user-btn .eu-avatar {
width: 32px; height: 32px; border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
display: flex; align-items: center; justify-content: center;
font-size: 0.8rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.existing-user-btn .eu-streak { color: var(--success); font-weight: 800; font-size: 0.9rem; }

/* ============================================
 BUTTONS
 ============================================ */
.btn {
border: none; border-radius: var(--radius-sm); padding: 16px 24px;
font-size: 1rem; font-weight: 700; cursor: pointer;
transition: all 0.25s var(--ease); width: 100%;
}

.btn-glow {
background: linear-gradient(135deg, #5a4bd1, #7c6cf0);
color: #fff;
box-shadow: 0 4px 24px rgba(108, 92, 231, 0.45);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.btn-glow:active {
transform: scale(0.96);
box-shadow: 0 2px 32px rgba(108, 92, 231, 0.6);
}

.btn-danger {
background: rgba(255, 82, 82, 0.15); color: #ff6b6b;
border: 1px solid rgba(255, 82, 82, 0.35);
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; font-weight: 700;
}
.btn-danger:active { background: var(--fail); color: #fff; }

.btn-ghost-outline {
background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(255, 255, 255, 0.15); width: 100%; font-weight: 600;
}
.btn-ghost-outline:active { background: rgba(255, 255, 255, 0.12); color: #fff; }

.btn-ghost {
background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.5); border-radius: 12px; padding: 8px 10px;
cursor: pointer; display: flex; align-items: center;
transition: all 0.2s var(--ease);
}
.btn-ghost:active { background: rgba(255, 255, 255, 0.1); color: #fff; }

.btn-nav {
background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.4); border-radius: 10px; width: 36px; height: 36px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all 0.2s var(--ease);
}
.btn-nav:active { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ============================================
 TOP BAR
 ============================================ */
.top-bar {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 0 8px; width: 100%;
}
.top-right { display: flex; gap: 8px; }
.greeting { font-size: 1.15rem; font-weight: 700; color: #fff; }

/* ============================================
 MOTIVATION BAR
 ============================================ */
.motivation-bar {
display: flex; align-items: center; gap: 12px;
padding: 14px 16px; margin-bottom: 16px;
background: rgba(108, 92, 231, 0.1);
border: 1px solid rgba(108, 92, 231, 0.2);
border-radius: var(--radius);
animation: motivation-in 0.6s var(--ease);
width: 100%;
}

@keyframes motivation-in {
from { opacity: 0; transform: translateY(-8px); }
to   { opacity: 1; transform: translateY(0); }
}

.motivation-emoji { font-size: 1.6rem; flex-shrink: 0; }
.motivation-text {
font-size: 0.88rem; font-weight: 600;
color: #e0d8ff; line-height: 1.4; font-style: italic;
}

.momentum-card {
display: flex; flex-direction: column; gap: 8px;
width: 100%; margin: -6px 0 16px;
}
.momentum-card.hidden { display: none; }
.momentum-item {
display: flex; align-items: center; gap: 10px;
padding: 11px 12px;
background: rgba(255, 255, 255, 0.055);
border: 1px solid rgba(255, 255, 255, 0.09);
border-radius: var(--radius-sm);
}
.momentum-icon {
width: 30px; height: 30px; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; font-size: 1rem; font-weight: 900;
background: rgba(255, 255, 255, 0.08); color: #fff;
}
.momentum-copy { flex: 1; min-width: 0; }
.momentum-title { font-size: 0.78rem; font-weight: 800; color: #fff; margin-bottom: 2px; }
.momentum-text { font-size: 0.72rem; line-height: 1.35; color: rgba(255, 255, 255, 0.55); }
.momentum-action,
.btn-leaderboard-nudge {
border: 1px solid rgba(0, 230, 118, 0.26);
background: rgba(0, 230, 118, 0.1);
color: var(--success);
border-radius: 7px;
padding: 7px 9px;
font-size: 0.7rem;
font-weight: 800;
cursor: pointer;
white-space: nowrap;
}
.momentum-action:disabled,
.btn-leaderboard-nudge:disabled {
opacity: 0.65; cursor: default;
}

/* ============================================
 CHEAT-DAY BANNER
 ============================================ */
.cheat-banner {
background: linear-gradient(135deg, rgba(255, 215, 64, 0.12), rgba(255, 170, 40, 0.08));
border: 1px solid rgba(255, 215, 64, 0.25);
border-radius: var(--radius);
padding: 14px 16px; margin-bottom: 16px;
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap; width: 100%;
animation: banner-in 0.4s var(--ease);
}
.cheat-banner.hidden { display: none; }
.cheat-banner-icon { font-size: 2rem; }
.cheat-banner-text { font-size: 1rem; font-weight: 700; color: var(--cheat); flex: 1; min-width: 0; }
.cheat-banner-sub {
font-size: 0.72rem; color: rgba(255, 255, 255, 0.4); width: 100%;
margin-top: -4px; padding-left: 46px;
}

@keyframes banner-in {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}

/* ============================================
 CHEAT PROGRESS
 ============================================ */
.cheat-progress { margin: 16px 0 20px; padding: 0 4px; width: 100%; }
.cheat-progress-label {
display: flex; justify-content: space-between; font-size: 0.72rem;
color: rgba(255, 255, 255, 0.35); margin-bottom: 6px; font-weight: 600;
}
.cheat-progress-bar {
height: 6px; border-radius: 3px;
background: rgba(255, 255, 255, 0.08); overflow: hidden; width: 100%;
}
.cheat-progress-fill {
height: 100%; border-radius: 3px;
background: linear-gradient(90deg, var(--cheat), #ffab40);
width: 0%; transition: width 0.8s var(--ease);
}

/* ============================================
 STREAK HERO
 ============================================ */
.streak-hero {
text-align: center;
padding: 18px 18px 16px;
width: 100%;
margin-bottom: 12px;
background: rgba(22, 33, 62, 0.46);
}

.streak-stage {
margin-bottom: 12px;
}
.streak-stage-name {
font-size: 0.78rem;
font-weight: 900;
color: rgba(255, 255, 255, 0.72);
line-height: 1.1;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.streak-stage-sub {
font-size: 0.96rem;
font-weight: 800;
color: #fff;
margin-top: 4px;
}

.streak-ring {
position: relative;
width: min(152px, 40vw); height: min(152px, 40vw);
margin: 0 auto 8px;
}
.ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255, 255, 255, 0.06); stroke-width: 6; }
.ring-fill {
fill: none; stroke: url(#ring-gradient); stroke-width: 6;
stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73;
transition: stroke-dashoffset 1s var(--ease);
}
.ring-cheat-marker {
fill: none;
stroke: var(--cheat);
stroke-width: 6;
stroke-linecap: round;
stroke-dasharray: 4 322.73;
stroke-dashoffset: 0;
opacity: 0;
filter: drop-shadow(0 0 4px rgba(255, 215, 64, 0.35));
transition: stroke-dashoffset 0.8s var(--ease), opacity 0.3s var(--ease);
}
.ring-cheat-marker.visible { opacity: 1; }

.streak-inner {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
}

.streak-num {
font-size: 3.2rem; font-weight: 900; line-height: 1;
color: var(--success);
background: linear-gradient(135deg, #00e676, #69f0ae);
-webkit-background-clip: text; -webkit-text-fill-color: transparent;
background-clip: text;
filter: drop-shadow(0 0 20px rgba(0, 230, 118, 0.3));
}

@supports not (-webkit-background-clip: text) {
.streak-num {
  color: #00e676; background: none;
  text-shadow: 0 0 30px rgba(0, 230, 118, 0.4);
}
}

.streak-unit {
font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); font-weight: 600;
text-transform: uppercase; letter-spacing: 2px; margin-top: 2px;
}
.streak-label { color: rgba(255, 255, 255, 0.45); font-size: 0.9rem; }

.stage-progress-text {
display: none;
}
.hero-level {
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
margin: 13px auto 0;
padding: 0;
max-width: 220px;
border-radius: 0;
background: transparent;
border: 0;
text-align: center;
}
.hero-level-plant {
display: inline-grid;
place-items: center;
font-size: 1.2rem;
line-height: 1;
margin-bottom: -1px;
}
.hero-level-copy {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.hero-level-name {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
font-size: 0.86rem;
font-weight: 900;
color: #fff;
line-height: 1.15;
}
.hero-level-meta {
font-size: 0.68rem;
color: rgba(255, 255, 255, 0.42);
margin-top: 2px;
}
.hero-level-bar {
height: 4px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
overflow: hidden;
margin-top: 7px;
width: min(100%, 190px);
}
.hero-level-fill {
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--success), #9cffbd);
transition: width 0.8s var(--ease);
}

.streak-stats {
display: flex; align-items: center; justify-content: center;
gap: min(20px, 5vw); width: 100%;
}
.stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.stat-val { font-size: clamp(1rem, 4vw, 1.2rem); font-weight: 800; color: #fff; }
.stat-label {
font-size: 0.7rem; color: rgba(255, 255, 255, 0.3);
text-transform: uppercase; letter-spacing: 1px; font-weight: 600;
}
.stat-divider { width: 1px; height: 28px; background: rgba(255, 255, 255, 0.08); }

.progress-stats-card {
width: 100%;
margin: 0 0 14px;
padding: 12px 14px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
}

.resource-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
width: 100%;
margin: 0 0 10px;
}
.resource-chip {
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
min-height: 52px;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.075);
background: rgba(255, 255, 255, 0.032);
}
.resource-chip > span:last-child {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
min-width: 0;
}
.resource-cheat {
border-color: rgba(255, 215, 64, 0.18);
background: rgba(255, 215, 64, 0.07);
}
.resource-freeze {
border-color: rgba(100, 200, 255, 0.18);
background: rgba(100, 200, 255, 0.07);
}

@media (max-height: 700px) and (max-width: 520px) {
.top-bar {
  padding-top: 14px;
}

.streak-hero {
  padding: 14px 16px;
  margin-bottom: 8px;
}

.streak-stage {
  margin-bottom: 8px;
}

.streak-ring {
  width: min(132px, 36vw);
  height: min(132px, 36vw);
  margin-bottom: 6px;
}

.streak-num {
  font-size: 2.7rem;
}

.hero-level {
  margin: 10px auto 0;
  padding: 0;
}

.progress-stats-card {
  display: none;
}

.resource-row {
  margin: 8px 0;
}

.resource-chip {
  min-height: 46px;
}

#btn-main-checkin,
#main-checkin-done:not(.hidden) {
  padding: 17px 20px !important;
}
}
.resource-icon {
font-size: 1.25rem;
line-height: 1;
}
.resource-chip strong {
display: inline-flex;
align-items: baseline;
gap: 3px;
font-size: 1rem;
line-height: 1;
color: #fff;
font-weight: 900;
white-space: nowrap;
}
.resource-chip small {
display: block;
margin-top: 2px;
font-size: 0.68rem;
color: rgba(255, 255, 255, 0.45);
font-weight: 700;
}
.resource-chip em {
display: inline;
margin-top: 0;
font-style: normal;
font-size: 0.58rem;
line-height: 1;
color: rgba(255, 215, 64, 0.78);
font-weight: 800;
white-space: nowrap;
}

/* ============================================
 CALENDAR
 ============================================ */
.calendar-card { padding: 18px; width: 100%; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.cal-title { font-size: 1rem; font-weight: 700; color: #fff; }

.cal-weekdays {
display: grid; grid-template-columns: repeat(7, 1fr);
text-align: center; margin-bottom: 8px;
font-size: 0.65rem; font-weight: 700;
color: rgba(255, 255, 255, 0.25); text-transform: uppercase; letter-spacing: 1px;
}

.cal-grid {
display: grid; grid-template-columns: repeat(7, 1fr);
gap: min(6px, 1.5vw); width: 100%;
}

.cal-day {
position: relative; aspect-ratio: 1;
display: flex; align-items: center; justify-content: center;
border-radius: min(12px, 2.5vw);
font-size: clamp(0.7rem, 3vw, 0.85rem);
font-weight: 600; color: rgba(255, 255, 255, 0.4);
cursor: default; transition: all 0.25s var(--ease);
user-select: none; -webkit-user-select: none;
}
.cal-day.empty { visibility: hidden; }
.cal-day.future { opacity: 0.18; }
.cal-day.past { color: rgba(255, 255, 255, 0.2); }

.cal-day.today {
color: #fff; font-weight: 800;
background: rgba(108, 92, 231, 0.2);
border: 2px solid var(--accent-light);
cursor: pointer;
animation: glow-pulse 2.5s ease-in-out infinite;
}
.cal-day.today:active { transform: scale(0.9); }

@keyframes glow-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.3); }
50% { box-shadow: 0 0 0 8px rgba(108, 92, 231, 0); }
}

.cal-day.checked {
background: var(--success); color: #0a0a1a; font-weight: 800;
border: none; animation: none; cursor: default;
box-shadow: 0 2px 12px var(--success-glow);
}
.cal-day.checked::after {
display: none;
}

.cal-day.cheat {
background: var(--cheat); color: #1a1a2e; font-weight: 800;
border: none; animation: none; cursor: default;
box-shadow: 0 2px 12px var(--cheat-glow);
}
.cal-day.cheat::after {
content: '🍫'; position: absolute; bottom: 1px; font-size: 0.5rem;
}

.cal-day.failed {
background: var(--fail-dim); color: var(--fail);
font-weight: 700; border: none; animation: none; cursor: default;
}

.cal-day.today-done {
font-weight: 800; animation: none !important; cursor: default;
}
.cal-day.today-done.checked {
background: var(--success); color: #0a0a1a;
border: 2px solid #69f0ae; box-shadow: 0 0 18px var(--success-glow);
}
.cal-day.today-done.checked::after {
content: '✓'; position: absolute; bottom: 1px;
font-size: 0.45rem; color: rgba(0, 0, 0, 0.4);
}
.cal-day.today-done.cheat {
background: var(--cheat); color: #1a1a2e;
border: 2px solid #ffe082; box-shadow: 0 0 18px var(--cheat-glow);
}
.cal-day.today-done.cheat::after {
content: '🍫'; position: absolute; bottom: 1px; font-size: 0.5rem;
}

.cal-legend {
display: flex; justify-content: center; gap: 14px;
margin-top: 14px; font-size: 0.7rem; color: rgba(255, 255, 255, 0.35);
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.dot-success { background: var(--success); }
.dot-cheat { background: var(--cheat); }
.dot-fail { background: var(--fail); }

.cal-hint {
text-align: center; font-size: 0.78rem; color: rgba(255, 255, 255, 0.3);
margin-top: 16px; transition: opacity 0.3s var(--ease);
}
.cal-hint strong { color: var(--accent-light); }
.cal-hint.hidden { opacity: 0; }

/* ============================================
 CALENDAR ANIMATIONS
 ============================================ */
@keyframes day-check-green {
0%   { transform: scale(1);    background: rgba(108, 92, 231, 0.2); color: #fff; }
25%  { transform: scale(1.45); background: var(--success); color: #0a0a1a; }
50%  { transform: scale(0.9);  background: var(--success); color: #0a0a1a; }
100% { transform: scale(1);    background: var(--success); color: #0a0a1a; }
}

@keyframes day-check-cheat {
0%   { transform: scale(1);    background: rgba(108, 92, 231, 0.2); color: #fff; }
25%  { transform: scale(1.45); background: var(--cheat); color: #1a1a2e; }
50%  { transform: scale(0.9);  background: var(--cheat); color: #1a1a2e; }
100% { transform: scale(1);    background: var(--cheat); color: #1a1a2e; }
}

.cal-day.animate-check-green {
animation: day-check-green 0.55s var(--ease) forwards !important;
border-color: var(--success) !important;
box-shadow: 0 0 20px var(--success-glow);
}

.cal-day.animate-check-cheat {
animation: day-check-cheat 0.55s var(--ease) forwards !important;
border-color: var(--cheat) !important;
box-shadow: 0 0 20px var(--cheat-glow);
}

/* ============================================
 ACHIEVEMENTS – Horizontal Scroll
 ============================================ */
.achievements-card {
padding: 20px 0 20px 20px;
background: rgba(22, 33, 62, 0.6);
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
margin-bottom: 16px; width: 100%;
}

.ach-header {
display: flex; justify-content: space-between;
align-items: center; margin-bottom: 14px; padding-right: 20px;
}
.ach-section-title { font-size: 0.95rem; font-weight: 700; color: #fff; }
.ach-counter {
font-size: 0.75rem; font-weight: 700; color: #c4b5fd;
background: rgba(108, 92, 231, 0.2); padding: 4px 10px; border-radius: 20px;
}

.achievements-grid {
display: flex; gap: 10px;
overflow-x: auto; overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px; padding-right: 20px;
scrollbar-width: none;
}
.achievements-grid::-webkit-scrollbar { display: none; }

.achievement {
flex: 0 0 min(140px, 35vw);
scroll-snap-align: start;
display: flex; flex-direction: column; align-items: center; gap: 8px;
padding: 14px 10px; border-radius: var(--radius-sm);
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.05);
text-align: center; transition: all 0.3s var(--ease);
}
.achievement.unlocked {
background: rgba(108, 92, 231, 0.12);
border-color: rgba(162, 155, 254, 0.3);
}
.achievement.locked { opacity: 0.35; }

.ach-emoji {
font-size: 1.8rem; width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
border-radius: 14px; background: rgba(255, 255, 255, 0.06); flex-shrink: 0;
}
.achievement.unlocked .ach-emoji {
background: rgba(108, 92, 231, 0.2);
box-shadow: 0 0 16px rgba(108, 92, 231, 0.25);
}

.ach-info { min-width: 0; }
.ach-title { font-size: 0.8rem; font-weight: 700; color: #e8e8e8; line-height: 1.2; }
.achievement.unlocked .ach-title { color: #fff; }
.achievement.locked .ach-title { color: rgba(255, 255, 255, 0.5); }
.ach-desc { font-size: 0.65rem; color: rgba(255, 255, 255, 0.45); margin-top: 3px; line-height: 1.3; }
.achievement.unlocked .ach-desc { color: rgba(255, 255, 255, 0.55); }

/* ============================================
 BUDDY LIST
 ============================================ */
.buddy-card { padding: 20px; width: 100%; }
.buddy-title { font-size: 0.95rem; font-weight: 700; margin-bottom: 14px; color: #fff; }
.buddy-list { display: flex; flex-direction: column; gap: 10px; width: 100%; }

.buddy-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px; background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-sm);
width: 100%;
}
.buddy-item.is-me { border-color: var(--accent); background: rgba(108, 92, 231, 0.08); }

.buddy-avatar {
width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 1.1rem; font-weight: 800;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
color: #fff; flex-shrink: 0;
}
.buddy-info { flex: 1; min-width: 0; }
.buddy-name { font-weight: 700; font-size: 0.95rem; color: #fff; }
.buddy-sub { font-size: 0.72rem; color: rgba(255, 255, 255, 0.35); margin-top: 1px; }
.buddy-streak {
font-size: 1.3rem; font-weight: 900; color: var(--success);
display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.buddy-streak .fire { font-size: 1rem; }
.buddy-cheat-badge {
font-size: 0.65rem; background: var(--cheat-dim); color: var(--cheat);
padding: 2px 7px; border-radius: 6px; font-weight: 700; margin-left: 4px;
}

/* ============================================
 MODALS
 ============================================ */
.modal-overlay {
position: fixed; inset: 0; z-index: 200;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px);
opacity: 0; pointer-events: none;
transition: opacity 0.3s var(--ease);
padding: 16px;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }

.modal-card {
background: #1c2244;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--radius); padding: 24px 20px;
width: 100%; max-width: 360px;
transform: scale(0.9) translateY(20px);
transition: transform 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.show .modal-card { transform: scale(1) translateY(0); }

.modal-title {
font-size: 1.15rem; font-weight: 800; text-align: center;
margin-bottom: 20px; color: #fff;
}
.modal-buttons { display: flex; flex-direction: column; gap: 10px; }

.modal-btn {
display: flex; flex-direction: column; align-items: center; gap: 4px;
padding: 18px 16px; border-radius: var(--radius-sm);
border: 2px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.06);
color: #fff; cursor: pointer;
transition: all 0.25s var(--ease); width: 100%;
}
.modal-btn:active { transform: scale(0.97); }

.modal-btn-clean { border-color: rgba(0, 230, 118, 0.25); }
.modal-btn-clean:active { border-color: var(--success); background: var(--success-dim); }
.modal-btn-cheat { border-color: rgba(255, 215, 64, 0.25); }
.modal-btn-cheat:active { border-color: var(--cheat); background: var(--cheat-dim); }
.modal-btn-cheat.disabled { opacity: 0.3; pointer-events: none; }

.modal-btn-icon { font-size: 1.8rem; }
.modal-btn-label { font-weight: 700; font-size: 0.95rem; color: #fff; }
.modal-btn-sub { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); }

.modal-cancel {
display: block; width: 100%; margin-top: 12px;
padding: 12px; border-radius: var(--radius-sm);
background: none; border: none; color: rgba(255, 255, 255, 0.4);
font-size: 0.9rem; font-weight: 600; cursor: pointer;
transition: color 0.2s var(--ease);
}
.modal-cancel:active { color: #fff; }

/* Settings / Confirm */
.settings-section { margin-bottom: 8px; }
.settings-heading { font-size: 0.88rem; font-weight: 700; margin-bottom: 8px; color: #ff6b6b; }
.settings-desc { font-size: 0.85rem; color: rgba(255, 255, 255, 0.6); margin-bottom: 16px; line-height: 1.5; }
.settings-desc strong { color: #ff6b6b; font-weight: 800; }
.settings-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.settings-toggle-row .settings-desc {
margin-bottom: 0;
}
.settings-switch {
position: relative;
display: inline-flex;
width: 52px;
height: 30px;
flex-shrink: 0;
}
.settings-switch input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.settings-switch span {
position: absolute;
inset: 0;
border-radius: 999px;
background: rgba(255, 255, 255, 0.12);
border: 1px solid rgba(255, 255, 255, 0.12);
transition: all 0.2s var(--ease);
}
.settings-switch span::before {
content: "";
position: absolute;
width: 22px;
height: 22px;
left: 3px;
top: 3px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.82);
transition: transform 0.2s var(--ease), background 0.2s var(--ease);
}
.settings-switch input:checked + span {
background: rgba(255, 215, 64, 0.2);
border-color: rgba(255, 215, 64, 0.42);
}
.settings-switch input:checked + span::before {
transform: translateX(22px);
background: #ffd740;
}
.settings-switch input:disabled + span {
opacity: 0.65;
}
.roast-heading {
color: #ffd740;
}
.roast-desc {
font-size: 0.8rem;
}
.settings-link {
display: inline-flex; align-items: center; justify-content: center;
width: 100%; min-height: 42px; padding: 10px 12px;
border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius-sm);
color: rgba(255, 255, 255, 0.78); text-decoration: none;
font-size: 0.9rem; font-weight: 700;
background: rgba(255, 255, 255, 0.04);
}
.settings-link:active { transform: scale(0.99); }
.settings-link + .settings-link { margin-top: 8px; }
.btn-notifications-on {
background: rgba(0, 230, 118, 0.14) !important;
border-color: rgba(0, 230, 118, 0.3) !important;
color: var(--success) !important;
}
.confirm-buttons { display: flex; flex-direction: column; gap: 8px; }

/* ============================================
 ACHIEVEMENT UNLOCK OVERLAY
 ============================================ */
.achievement-overlay {
position: fixed; inset: 0; z-index: 400;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(14px);
opacity: 0; pointer-events: none;
transition: opacity 0.4s var(--ease); padding: 20px;
}
.achievement-overlay.show { opacity: 1; pointer-events: auto; }

.achievement-popup {
position: relative; text-align: center;
background: linear-gradient(135deg, #1e2450, #1a1f3e);
border: 1px solid rgba(162, 155, 254, 0.3);
border-radius: 24px; padding: 40px 32px 32px;
max-width: 320px; width: 100%;
transform: scale(0.8) translateY(20px);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
overflow: hidden;
}
.achievement-overlay.show .achievement-popup { transform: scale(1) translateY(0); }

.ach-unlock-badge { font-size: 64px; animation: ach-badge-pop 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
@keyframes ach-badge-pop {
0%   { transform: scale(0) rotate(-30deg); }
50%  { transform: scale(1.3) rotate(5deg); }
100% { transform: scale(1) rotate(0); }
}
.ach-unlock-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 2px; color: #c4b5fd; font-weight: 700; margin-top: 12px; }
.ach-unlock-title { font-size: 1.4rem; font-weight: 900; color: #fff; margin-top: 8px; }
.ach-unlock-desc { font-size: 0.9rem; color: rgba(255, 255, 255, 0.6); margin-top: 6px; line-height: 1.4; }

.ach-unlock-shimmer {
position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
transform: skewX(-20deg);
}
.achievement-overlay.show .ach-unlock-shimmer { animation: shimmer 1.2s 0.3s ease forwards; }
@keyframes shimmer { 0% { left: -100%; } 100% { left: 150%; } }

/* ============================================
 REWARD OVERLAY
 ============================================ */
.reward-overlay {
position: fixed; inset: 0; z-index: 300;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(12px);
opacity: 0; pointer-events: none; transition: opacity 0.4s var(--ease);
}
.reward-overlay.show { opacity: 1; pointer-events: auto; }

.reward-content {
text-align: center; transform: scale(0.7);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.reward-overlay.show .reward-content { transform: scale(1); }

.reward-emoji { font-size: 80px; animation: reward-pop 0.6s ease; }
@keyframes reward-pop {
0%   { transform: scale(0) rotate(-20deg); }
60%  { transform: scale(1.3) rotate(5deg); }
100% { transform: scale(1) rotate(0); }
}
.reward-text {
font-size: 2rem; font-weight: 900; margin-top: 12px;
background: linear-gradient(135deg, var(--success), #69f0ae);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.reward-text.cheat-reward {
background: linear-gradient(135deg, var(--cheat), #ffab40);
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.reward-sub { font-size: 1rem; color: rgba(255, 255, 255, 0.6); margin-top: 4px; }

/* ============================================
 CONFETTI – Contained!
 ============================================ */
#confetti-canvas {
position: fixed;
top: 0; left: 0;
width: 100vw;    /* NOT 100% */
height: 100vh;   /* NOT 100% */
z-index: 350;
pointer-events: none;
}

/* ============================================
 SCROLLBAR & SAFE AREA
 ============================================ */
::-webkit-scrollbar { width: 0; }

@supports (padding: env(safe-area-inset-top)) {
.top-bar { padding-top: calc(env(safe-area-inset-top) + 12px); }
.dashboard-content { padding-bottom: env(safe-area-inset-bottom); }


/* ============================================
 FAIL BUTTON IN CHECKIN MODAL
 ============================================ */
.modal-btn-fail {
border-color: rgba(255, 82, 82, 0.2);
}
.modal-btn-fail:active {
border-color: var(--fail);
background: var(--fail-dim);
}

/* ============================================
 SETTINGS EXTRAS
 ============================================ */
.settings-divider {
height: 1px;
background: rgba(255, 255, 255, 0.08);
margin: 20px 0;
}

.admin-heading {
color: var(--accent-light) !important;
}

.btn-admin {
background: rgba(108, 92, 231, 0.15);
color: var(--accent-light);
border: 1px solid rgba(108, 92, 231, 0.3);
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; font-weight: 700;
}
.btn-admin:active {
background: rgba(108, 92, 231, 0.3);
}

/* ============================================
 ADMIN MODAL
 ============================================ */
.admin-card {
max-width: 380px;
}

.admin-panel.hidden {
display: none;
}

.admin-section {
margin-bottom: 20px;
}

.admin-label {
font-size: 0.9rem;
font-weight: 700;
color: #fff;
display: block;
margin-bottom: 4px;
}

.admin-hint {
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.4);
margin-bottom: 12px;
line-height: 1.4;
}

.admin-input {
width: 100%;
background: rgba(255, 255, 255, 0.06);
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 14px 16px;
color: #fff;
font-size: 16px;
outline: none;
text-align: center;
transition: border 0.2s var(--ease);
}
.admin-input:focus {
border-color: var(--accent-light);
}
.admin-input::placeholder {
color: rgba(255, 255, 255, 0.25);
}

.admin-pin-row {
display: flex;
gap: 8px;
margin-bottom: 8px;
}

.admin-pin-row .admin-input {
flex: 1;
}

.btn-admin-sm {
background: var(--accent);
color: #fff;
border: none;
border-radius: 10px;
width: 50px;
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
font-weight: 800;
cursor: pointer;
transition: all 0.2s var(--ease);
}
.btn-admin-sm:active {
transform: scale(0.95);
}

.admin-error {
font-size: 0.78rem;
color: var(--fail);
text-align: center;
min-height: 20px;
}

.admin-status {
font-size: 0.8rem;
text-align: center;
min-height: 20px;
margin-top: 8px;
color: var(--success);
}

/* Stepper */
.admin-stepper {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin-bottom: 12px;
}

.stepper-btn {
width: 44px; height: 44px;
border-radius: 12px;
border: 1.5px solid rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-size: 1.4rem;
font-weight: 700;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.2s var(--ease);
}
.stepper-btn:active {
background: rgba(255, 255, 255, 0.15);
transform: scale(0.92);
}

.stepper-value {
font-size: 2rem;
font-weight: 900;
color: var(--cheat);
min-width: 60px;
text-align: center;
}

.btn-admin-save {
background: rgba(108, 92, 231, 0.2);
color: var(--accent-light);
border: 1px solid rgba(108, 92, 231, 0.3);
width: 100%;
font-weight: 700;
padding: 12px;
font-size: 0.9rem;
}
.btn-admin-save:active {
background: rgba(108, 92, 231, 0.4);
}

.admin-pin-change {
display: flex;
flex-direction: column;
gap: 8px;
}

.admin-divider {
height: 1px;
background: rgba(255, 255, 255, 0.06);
margin: 4px 0 20px;
}

/* ============================================
 FREEZE BANNER – Always visible
 ============================================ */
.freeze-banner {
background: linear-gradient(135deg, rgba(100, 200, 255, 0.08), rgba(60, 160, 240, 0.04));
border: 1px solid rgba(100, 200, 255, 0.15);
border-radius: var(--radius);
padding: 14px 16px; margin-bottom: 16px;
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap; width: 100%;
transition: all 0.3s var(--ease);
}

.freeze-banner.has-freezes {
background: linear-gradient(135deg, rgba(100, 200, 255, 0.12), rgba(60, 160, 240, 0.08));
border-color: rgba(100, 200, 255, 0.25);
}

.freeze-banner-icon { font-size: 2rem; }

.freeze-banner.no-freezes .freeze-banner-icon { opacity: 0.4; }

.freeze-banner-text { font-size: 1rem; font-weight: 700; color: #64c8ff; flex: 1; min-width: 0; }

.freeze-banner.no-freezes .freeze-banner-text { color: rgba(100, 200, 255, 0.4); }

.freeze-banner-sub {
font-size: 0.72rem; color: rgba(255, 255, 255, 0.35); width: 100%;
margin-top: -4px; padding-left: 46px;
}

/* ============================================
 CHECKIN MODAL – Current Status Indicator
 ============================================ */
.checkin-current-status {
text-align: center;
font-size: 0.8rem;
padding: 8px 14px;
margin-bottom: 14px;
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.5);
display: none;
}

.checkin-current-status.visible {
display: block;
}

.checkin-current-status .status-badge {
display: inline-block;
font-weight: 700;
padding: 2px 8px;
border-radius: 6px;
margin-left: 4px;
}

.checkin-current-status .status-badge.status-success {
background: var(--success-dim); color: var(--success);
}
.checkin-current-status .status-badge.status-cheat {
background: var(--cheat-dim); color: var(--cheat);
}
.checkin-current-status .status-badge.status-fail {
background: var(--fail-dim); color: var(--fail);
}

/* Highlight active option in modal */
.modal-btn.current-choice {
border-color: rgba(255, 255, 255, 0.3) !important;
background: rgba(255, 255, 255, 0.08) !important;
position: relative;
}

.modal-btn.current-choice::after {
content: '← aktuell';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.35);
font-weight: 600;
}

.bonus-marker-section {
margin: 0 0 14px;
padding: 12px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.bonus-marker-title {
font-size: 0.78rem;
font-weight: 800;
color: rgba(255, 255, 255, 0.62);
text-align: center;
margin-bottom: 10px;
}
.bonus-marker-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 6px;
}
.bonus-marker-btn {
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.72);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
min-height: 58px;
font-size: 0.66rem;
font-weight: 800;
cursor: pointer;
}
.bonus-marker-btn span:first-child {
font-size: 1.15rem;
}
.bonus-marker-btn.active {
background: rgba(0, 230, 118, 0.12);
border-color: rgba(0, 230, 118, 0.4);
color: #fff;
}
.bonus-icons {
position: absolute;
left: 50%;
bottom: 2px;
transform: translateX(-50%);
display: flex;
gap: 1px;
font-size: 0.43rem;
line-height: 1;
max-width: 92%;
overflow: hidden;
z-index: 2;
}
.cal-day.has-bonus::after { display: none; }
.week-bonus-icons {
display: flex;
justify-content: center;
gap: 1px;
font-size: 0.55rem;
min-height: 10px;
line-height: 1;
}

/* Today-done clickable cursor */
.cal-day.today-done {
cursor: pointer !important;
}

.cal-day.today-done:active {
transform: scale(0.92);
}

/* ============================================
 CALENDAR – Freeze Day
 ============================================ */
.cal-day.freeze {
background: #64c8ff; color: #0a1a2e; font-weight: 800;
border: none; animation: none; cursor: default;
box-shadow: 0 2px 12px rgba(100, 200, 255, 0.35);
}
.cal-day.freeze::after {
content: '🧊'; position: absolute; bottom: 1px; font-size: 0.5rem;
}

.cal-day.today-done.freeze {
background: #64c8ff; color: #0a1a2e;
border: 2px solid #9cddff;
box-shadow: 0 0 18px rgba(100, 200, 255, 0.35);
}
.cal-day.today-done.freeze::after {
content: '🧊'; position: absolute; bottom: 1px; font-size: 0.5rem;
}

.dot-freeze { background: #64c8ff; }

/* ============================================
 FREEZE NOTIFICATION OVERLAY
 ============================================ */
.freeze-notify {
position: fixed; inset: 0; z-index: 280;
display: flex; align-items: center; justify-content: center;
background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(10px);
opacity: 0; pointer-events: none;
transition: opacity 0.4s var(--ease);
}
.freeze-notify.show { opacity: 1; pointer-events: auto; }

.freeze-notify-content {
text-align: center;
transform: scale(0.7);
transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.freeze-notify.show .freeze-notify-content { transform: scale(1); }

.freeze-notify-emoji { font-size: 72px; animation: reward-pop 0.6s ease; }
.freeze-notify-text {
font-size: 1.4rem; font-weight: 900; margin-top: 12px; color: #64c8ff;
}
.freeze-notify-sub {
font-size: 1rem; color: rgba(255, 255, 255, 0.55); margin-top: 4px;
}

/* ============================================
 TODAY ACTION HINT
 ============================================ */
.today-hint {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
margin-bottom: 8px;
background: rgba(108, 92, 231, 0.12);
border: 1px dashed rgba(108, 92, 231, 0.35);
border-radius: var(--radius);
width: 100%;
animation: hint-pulse 2s ease-in-out infinite;
}

.today-hint.hidden {
display: none;
}

@keyframes hint-pulse {
0%, 100% { border-color: rgba(108, 92, 231, 0.35); }
50% { border-color: rgba(108, 92, 231, 0.7); }
}

.today-hint-arrow {
font-size: 1.4rem;
flex-shrink: 0;
animation: hint-bounce 1.5s ease-in-out infinite;
}

@keyframes hint-bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(4px); }
}

.today-hint-text {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.65);
line-height: 1.4;
}

.today-hint-text strong {
color: var(--accent-light);
font-weight: 700;
}

/* ============================================
 IMPROVED CALENDAR HINT
 ============================================ */
.cal-hint {
text-align: center;
font-size: 0.8rem;
color: rgba(255, 255, 255, 0.4);
margin-top: 16px;
padding: 10px;
background: rgba(108, 92, 231, 0.08);
border-radius: 10px;
transition: opacity 0.3s var(--ease);
}

.cal-hint strong {
color: var(--accent-light);
}

.cal-hint.hidden {
opacity: 0;
height: 0;
padding: 0;
margin: 0;
overflow: hidden;
}

/* ============================================
 TODAY CALENDAR DAY – More prominent
 ============================================ */
.cal-day.today {
color: #fff;
font-weight: 800;
background: rgba(108, 92, 231, 0.25);
border: 2px solid var(--accent-light);
cursor: pointer;
animation: glow-pulse-strong 2s ease-in-out infinite;
position: relative;
}

@keyframes glow-pulse-strong {
0%, 100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.4); }
50% { box-shadow: 0 0 0 10px rgba(108, 92, 231, 0); }
}

/* ============================================
 LOGIN STEPS
 ============================================ */
.login-form.hidden {
display: none;
}

.login-pin-header {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
margin-bottom: 4px;
}

.login-back-btn {
background: none;
border: none;
color: var(--accent-light);
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
padding: 4px 0;
transition: color 0.2s var(--ease);
}
.login-back-btn:active {
color: #fff;
}

.login-pin-name {
font-size: 1rem;
font-weight: 700;
color: #fff;
}

.login-pin-instruction {
font-size: 0.82rem;
color: rgba(255, 255, 255, 0.45);
text-align: center;
margin-bottom: 12px;
line-height: 1.4;
}

.login-error {
font-size: 0.8rem;
color: var(--fail);
text-align: center;
min-height: 20px;
margin-top: 4px;
}

/* Quick login buttons – show PIN required hint */
.existing-user-btn .eu-lock {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.2);
margin-left: 2px;
}

/* ============================================
  PLANT CARD
  ============================================ */
.plant-card {
 padding: 0;
 overflow: hidden;
 width: 100%;
}

/* Scene */
.plant-scene {
 position: relative;
 height: 180px;
 display: flex;
 align-items: flex-end;
 justify-content: center;
 background: #1a2e1a;
 transition: background 1s var(--ease);
 overflow: hidden;
 border-radius: var(--radius) var(--radius) 0 0;
}

.plant-ground {
 position: absolute;
 bottom: 0;
 left: 0;
 right: 0;
 height: 40px;
 background: linear-gradient(180deg, #2d1f0e 0%, #3d2b14 100%);
 border-radius: 50% 50% 0 0 / 20px 20px 0 0;
}

.plant-emoji {
 font-size: 4.5rem;
 position: relative;
 z-index: 1;
 margin-bottom: 20px;
 animation: plant-sway 4s ease-in-out infinite;
 filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
 transition: font-size 0.6s var(--ease);
}

@keyframes plant-sway {
 0%, 100% { transform: rotate(-2deg); }
 50% { transform: rotate(2deg); }
}

.plant-glow {
 animation: plant-sway 4s ease-in-out infinite, plant-golden 2s ease-in-out infinite;
}

@keyframes plant-golden {
 0%, 100% { filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.4)) drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
 50% { filter: drop-shadow(0 0 30px rgba(255, 215, 0, 0.7)) drop-shadow(0 4px 12px rgba(0,0,0,0.3)); }
}

/* Sparkles for level-up */
.plant-sparkles {
 position: absolute;
 inset: 0;
 pointer-events: none;
 z-index: 2;
}

.sparkle {
 position: absolute;
 width: 6px;
 height: 6px;
 background: #ffd740;
 border-radius: 50%;
 animation: sparkle-float 1.5s ease-out forwards;
}

@keyframes sparkle-float {
 0% { opacity: 1; transform: translateY(0) scale(1); }
 100% { opacity: 0; transform: translateY(-60px) scale(0); }
}

/* Info below scene */
.plant-name {
 text-align: center;
 font-size: 1rem;
 font-weight: 700;
 color: #fff;
 padding: 14px 20px 4px;
}

.plant-xp-label {
 text-align: center;
 font-size: 0.72rem;
 font-weight: 600;
 color: rgba(255, 255, 255, 0.4);
 text-transform: uppercase;
 letter-spacing: 1px;
 padding: 0 20px;
}

.plant-progress-bar {
 height: 6px;
 border-radius: 3px;
 background: rgba(255, 255, 255, 0.08);
 margin: 8px 20px;
 overflow: hidden;
}

.plant-progress-fill {
 height: 100%;
 border-radius: 3px;
 background: linear-gradient(90deg, var(--success), #69f0ae);
 transition: width 0.8s var(--ease);
}

.plant-xp-detail {
 text-align: center;
 font-size: 0.7rem;
 color: rgba(255, 255, 255, 0.3);
 padding: 0 20px 16px;
}

/* ============================================
  LEVEL-UP OVERLAY
  ============================================ */
.levelup-overlay {
 position: fixed;
 inset: 0;
 z-index: 290;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(0, 0, 0, 0.8);
 backdrop-filter: blur(12px);
 opacity: 0;
 pointer-events: none;
 transition: opacity 0.4s var(--ease);
}

.levelup-overlay.show {
 opacity: 1;
 pointer-events: auto;
}

.levelup-content {
 text-align: center;
 transform: scale(0.7);
 transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.levelup-overlay.show .levelup-content {
 transform: scale(1);
}

.levelup-plant {
 font-size: 5rem;
 animation: levelup-bounce 0.8s ease;
}

@keyframes levelup-bounce {
 0% { transform: scale(0) rotate(-20deg); }
 50% { transform: scale(1.3) rotate(5deg); }
 70% { transform: scale(0.9) rotate(-2deg); }
 100% { transform: scale(1) rotate(0); }
}

.levelup-label {
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 2px;
 color: var(--success);
 font-weight: 700;
 margin-top: 12px;
}

.levelup-title {
 font-size: 1.6rem;
 font-weight: 900;
 color: #fff;
 margin-top: 6px;
}

.levelup-name {
 font-size: 1rem;
 color: rgba(255, 255, 255, 0.5);
 margin-top: 4px;
}

/* ============================================
  BUDDY LIST – Show Level
  ============================================ */
.buddy-level {
 font-size: 0.65rem;
 color: rgba(255, 255, 255, 0.35);
 margin-top: 1px;
}

.buddy-plant {
 font-size: 1.2rem;
 margin-right: 2px;
}

/* ============================================
  DAILY CHALLENGE CARD
  ============================================ */
.challenge-card {
 padding: 20px;
 width: 100%;
}

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

.challenge-title {
 font-size: 0.95rem;
 font-weight: 700;
 color: #fff;
}

.challenge-total {
 font-size: 0.72rem;
 font-weight: 700;
 color: #ffd740;
 background: rgba(255, 215, 64, 0.12);
 padding: 3px 10px;
 border-radius: 20px;
}

/* Challenge body */
.challenge-body {
 display: flex;
 align-items: center;
 gap: 14px;
 padding: 16px;
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid rgba(255, 255, 255, 0.08);
 border-radius: 14px;
 margin-bottom: 14px;
 transition: all 0.3s var(--ease);
}

.challenge-body.challenge-done {
 background: rgba(0, 230, 118, 0.06);
 border-color: rgba(0, 230, 118, 0.15);
}

.challenge-emoji {
 font-size: 2.2rem;
 flex-shrink: 0;
 width: 50px;
 height: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 background: rgba(255, 255, 255, 0.05);
 border-radius: 14px;
}

.challenge-done .challenge-emoji {
 background: rgba(0, 230, 118, 0.1);
}

.challenge-info {
 flex: 1;
 min-width: 0;
}

.challenge-text {
 font-size: 0.92rem;
 font-weight: 600;
 color: #fff;
 line-height: 1.3;
 margin-bottom: 6px;
}

.challenge-done .challenge-text {
 text-decoration: line-through;
 color: rgba(255, 255, 255, 0.5);
}

.challenge-meta {
 display: flex;
 gap: 10px;
 align-items: center;
}

.challenge-cat {
 font-size: 0.68rem;
 font-weight: 600;
 color: rgba(255, 255, 255, 0.3);
 text-transform: uppercase;
 letter-spacing: 0.5px;
}

.challenge-xp {
 font-size: 0.72rem;
 font-weight: 700;
 color: var(--success);
 background: rgba(0, 230, 118, 0.1);
 padding: 2px 8px;
 border-radius: 8px;
}

.challenge-done .challenge-xp {
 color: rgba(0, 230, 118, 0.4);
}

/* Complete button */
.btn-challenge {
 width: 100%;
 padding: 14px;
 border: none;
 border-radius: 12px;
 font-size: 0.95rem;
 font-weight: 700;
 cursor: pointer;
 transition: all 0.25s var(--ease);
 background: linear-gradient(135deg, rgba(255, 215, 64, 0.15), rgba(255, 170, 40, 0.1));
 border: 1px solid rgba(255, 215, 64, 0.25);
 color: #ffd740;
}

.btn-challenge:active {
 transform: scale(0.97);
 background: linear-gradient(135deg, rgba(255, 215, 64, 0.25), rgba(255, 170, 40, 0.2));
}

.btn-challenge-done {
 background: rgba(0, 230, 118, 0.08);
 border-color: rgba(0, 230, 118, 0.15);
 color: rgba(0, 230, 118, 0.5);
 cursor: default;
 pointer-events: none;
}

/* Completion animation */
@keyframes challenge-pop {
 0% { transform: scale(1); }
 30% { transform: scale(1.05); }
 60% { transform: scale(0.98); }
 100% { transform: scale(1); }
}

.challenge-card.animate-complete {
 animation: challenge-pop 0.4s var(--ease);
}

---

## `style.css` – Neue Styles am Ende anfügen

```css

/* ============================================
 INVENTORY CARD (Level + Items)
 ============================================ */
.inventory-card {
padding: 0;
overflow: hidden;
}

.inv-top {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
}

.inv-plant-scene {
width: 72px;
height: 72px;
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
overflow: hidden;
transition: background 0.5s var(--ease);
}

.inv-plant {
font-size: 2.2rem;
animation: plant-sway 4s ease-in-out infinite;
filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}

.inv-info {
flex: 1;
min-width: 0;
}

.inv-level-name {
font-size: 1rem;
font-weight: 700;
color: #fff;
}

.inv-level-num {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.4);
margin-top: 2px;
}

.inv-progress-bar {
height: 5px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.08);
margin-top: 8px;
overflow: hidden;
}

.inv-progress-fill {
height: 100%;
border-radius: 3px;
background: linear-gradient(90deg, var(--success), #69f0ae);
transition: width 0.8s var(--ease);
}

.inv-xp-detail {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.25);
margin-top: 4px;
}

.inv-xp-label {
font-size: 0.72rem;
color: var(--cheat);
font-weight: 700;
margin-top: 6px;
}

.inv-items {
display: flex;
align-items: center;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.inv-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px;
}

.inv-item-divider {
width: 1px;
height: 32px;
background: rgba(255, 255, 255, 0.06);
}

.inv-item-icon {
font-size: 1.2rem;
}

.inv-item-count {
font-size: 1.2rem;
font-weight: 900;
color: #fff;
}

.inv-item-label {
font-size: 0.65rem;
color: rgba(255, 255, 255, 0.3);
}

/* ============================================
 WEEK VIEW
 ============================================ */
.calendar-compact {
padding: 16px;
width: 100%;
}

.week-title {
font-size: 0.85rem;
font-weight: 700;
color: #fff;
margin-bottom: 12px;
}

.week-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
}

.week-day {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.03);
transition: all 0.2s var(--ease);
}

.week-day-label {
font-size: 0.6rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.25);
text-transform: uppercase;
}

.week-day-num {
font-size: 0.9rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.4);
}

.week-day-status {
font-size: 0.75rem;
min-height: 18px;
color: rgba(255, 255, 255, 0.2);
}

.week-today {
background: rgba(108, 92, 231, 0.15);
border: 1.5px solid var(--accent-light);
}
.week-today .week-day-num { color: #fff; }

.week-success { background: rgba(0, 230, 118, 0.1); }
.week-success .week-day-num { color: var(--success); }
.week-cheat { background: rgba(255, 215, 64, 0.1); }
.week-cheat .week-day-num { color: var(--cheat); }
.week-freeze { background: rgba(100, 200, 255, 0.1); }
.week-freeze .week-day-num { color: #64c8ff; }
.week-fail { background: rgba(255, 82, 82, 0.08); }
.week-fail .week-day-num { color: var(--fail); }
.week-future { opacity: 0.3; }

.btn-toggle-cal {
width: 100%;
padding: 10px;
margin-top: 12px;
border: none;
border-radius: 10px;
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.35);
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s var(--ease);
}

.btn-toggle-cal:active {
background: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.6);
}

/* ============================================
 MAIN CHECK-IN BUTTON – Override
 ============================================ */
#btn-main-checkin {
width: 100% !important;
padding: 20px 24px !important;
border-radius: 20px !important;
font-family: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
cursor: pointer !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 16px !important;
background: rgba(0, 230, 118, 0.12) !important;
color: #00e676 !important;
border: 1.5px solid rgba(0, 230, 118, 0.3) !important;
box-shadow: 0 0 24px rgba(0, 230, 118, 0.2) !important;
animation: checkin-glow 2.5s ease-in-out infinite !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
}

#btn-main-checkin:not(.hidden) {
display: flex !important;
}

#btn-main-checkin.hidden {
display: none !important;
}

#main-checkin-done:not(.hidden) {
display: flex !important;
width: 100% !important;
padding: 20px 24px !important;
border-radius: 20px !important;
font-family: 'Inter', 'SF Pro Display', system-ui, -apple-system, sans-serif !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
letter-spacing: -0.2px !important;
align-items: center !important;
justify-content: center !important;
margin-bottom: 16px !important;
background: rgba(0, 230, 118, 0.06) !important;
color: rgba(0, 230, 118, 0.35) !important;
border: 1.5px solid rgba(0, 230, 118, 0.1) !important;
box-shadow: none !important;
cursor: pointer !important;
animation: none !important;
transition: all 0.2s ease !important;
}

#main-checkin-done:active {
background: rgba(0, 230, 118, 0.1) !important;
color: rgba(0, 230, 118, 0.5) !important;
}

#main-checkin-done.hidden {
display: none !important;
}

#main-checkin-done.hidden {
display: none !important;
}

/* ============================================
 WELCOME MODAL
 ============================================ */
.welcome-card {
max-width: 380px;
padding: 32px 24px 24px;
}

.welcome-logo {
text-align: center;
font-size: 3rem;
margin-bottom: 8px;
}

.welcome-title {
text-align: center;
font-size: 1.3rem;
font-weight: 800;
color: #fff;
margin-bottom: 20px;
}

.welcome-steps {
display: flex;
flex-direction: column;
gap: 14px;
margin-bottom: 24px;
}

.welcome-step {
display: flex;
align-items: flex-start;
gap: 12px;
}

.welcome-step-icon {
font-size: 1.3rem;
flex-shrink: 0;
width: 28px;
text-align: center;
}

.welcome-step-text {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
line-height: 1.45;
}

.welcome-btn {
width: 100%;
margin-top: 4px;
}

/* ============================================
 BUDDY HEADER
 ============================================ */
.buddy-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 14px;
}

.btn-friends-manage {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
background: rgba(108, 92, 231, 0.15);
border: 1px solid rgba(108, 92, 231, 0.3);
color: var(--accent-light);
font-size: 0.75rem;
font-weight: 700;
padding: 6px 12px;
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
}

.btn-friends-manage:active {
background: rgba(108, 92, 231, 0.3);
}

.friend-request-badge {
position: absolute;
top: -8px;
right: -8px;
min-width: 20px;
height: 20px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
background: var(--success);
box-shadow: 0 0 14px rgba(0, 230, 118, 0.65);
color: #04120a;
font-size: 0.68rem;
font-weight: 900;
line-height: 1;
}

.buddy-empty {
text-align: center;
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.3);
padding: 20px;
line-height: 1.5;
}

/* ============================================
 FRIENDS MODAL
 ============================================ */
.friends-card {
max-width: 400px;
}

.friends-section {
margin-bottom: 20px;
}

.friends-label {
font-size: 0.8rem;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}

.friend-code-display {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 16px;
background: rgba(108, 92, 231, 0.1);
border: 1px solid rgba(108, 92, 231, 0.25);
border-radius: 12px;
}

.friend-code-text {
font-size: 1.2rem;
font-weight: 900;
color: var(--accent-light);
letter-spacing: 2px;
flex: 1;
font-family: monospace;
}

.btn-copy-code {
background: rgba(108, 92, 231, 0.2);
border: 1px solid rgba(108, 92, 231, 0.3);
color: var(--accent-light);
font-size: 0.75rem;
font-weight: 700;
padding: 8px 12px;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
}

.btn-copy-code:active {
background: rgba(108, 92, 231, 0.4);
}

.friends-hint {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.3);
margin-top: 6px;
}

.friend-add-row {
display: flex;
gap: 8px;
}

.friend-add-row .admin-input {
flex: 1;
text-transform: uppercase;
letter-spacing: 1px;
}

.friend-add-status {
font-size: 0.78rem;
min-height: 18px;
margin-top: 6px;
}

.friends-list {
display: flex;
flex-direction: column;
gap: 8px;
max-height: 200px;
overflow-y: auto;
}

.friend-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: 10px;
}

.friend-request-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 10px 12px;
background: rgba(0, 230, 118, 0.07);
border: 1px solid rgba(0, 230, 118, 0.16);
border-radius: 10px;
}

.friend-request-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}

.friend-request-sub {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.45);
}

.friend-request-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}

.btn-request-accept,
.btn-request-reject {
border: 0;
border-radius: 7px;
padding: 7px 8px;
font-size: 0.68rem;
font-weight: 800;
cursor: pointer;
}

.btn-request-accept {
background: rgba(0, 230, 118, 0.16);
color: var(--success);
}

.btn-request-reject {
background: rgba(255, 82, 82, 0.12);
color: rgba(255, 120, 120, 0.9);
}

.friend-item-name {
font-size: 0.9rem;
font-weight: 600;
color: #fff;
}

.friend-item-streak {
font-size: 0.8rem;
color: var(--success);
font-weight: 700;
}

.btn-remove-friend {
background: rgba(255, 82, 82, 0.1);
border: 1px solid rgba(255, 82, 82, 0.16);
border-radius: 999px;
color: rgba(255, 120, 120, 0.9);
font-size: 1rem;
line-height: 1;
cursor: pointer;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}

.btn-remove-friend:active {
color: #ff5252;
background: rgba(255, 82, 82, 0.18);
}

/* ============================================
 GOOGLE LOGIN BUTTON
 ============================================ */
.btn-google {
width: 100%;
max-width: 300px;
padding: 16px 24px;
border: 1.5px solid rgba(255, 255, 255, 0.12);
border-radius: 14px;
background: rgba(255, 255, 255, 0.06);
color: #fff;
font-family: var(--font);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
transition: all 0.25s ease;
}

.btn-google:active {
transform: scale(0.97);
background: rgba(255, 255, 255, 0.1);
}

.btn-google svg {
flex-shrink: 0;
}

.login-divider {
width: 100%;
max-width: 300px;
display: flex;
align-items: center;
gap: 12px;
margin: 14px 0;
color: rgba(255, 255, 255, 0.35);
font-size: 0.78rem;
font-weight: 700;
text-transform: uppercase;
}
.login-divider::before,
.login-divider::after {
content: '';
height: 1px;
flex: 1;
background: rgba(255, 255, 255, 0.1);
}
.email-auth-panel {
width: 100%;
max-width: 300px;
display: flex;
flex-direction: column;
gap: 12px;
}
.email-auth-tabs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
padding: 4px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
}
.email-auth-tab {
border: none;
border-radius: 10px;
padding: 10px 12px;
background: transparent;
color: rgba(255, 255, 255, 0.55);
font-size: 0.85rem;
font-weight: 800;
cursor: pointer;
}
.email-auth-tab.active {
background: rgba(255, 255, 255, 0.12);
color: #fff;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.btn-link {
border: none;
background: transparent;
color: var(--accent-light);
font-size: 0.82rem;
font-weight: 700;
padding: 4px 8px;
cursor: pointer;
}
.btn-link:active {
color: #fff;
}
.login-error.success {
color: var(--success);
}
.email-verification-panel {
width: 100%;
max-width: 300px;
margin-top: 16px;
padding: 16px;
border-radius: var(--radius-sm);
background: rgba(255, 215, 64, 0.08);
border: 1px solid rgba(255, 215, 64, 0.22);
display: flex;
flex-direction: column;
gap: 10px;
}
.email-verification-title {
color: #fff;
font-size: 0.95rem;
font-weight: 800;
}
.email-verification-text {
color: rgba(255, 255, 255, 0.65);
font-size: 0.82rem;
line-height: 1.4;
}

/* ============================================
 USER AVATAR IN TOP BAR
 ============================================ */
.user-info {
display: flex;
align-items: center;
gap: 10px;
}

.user-avatar-wrap {
width: 32px;
height: 32px;
border-radius: 50%;
flex-shrink: 0;
position: relative;
overflow: hidden;
}

.user-avatar-img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
display: none;
}

.user-avatar-img.loaded {
display: block;
}

.user-avatar-fallback {
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(135deg, var(--accent), var(--accent-light));
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 800;
color: #fff;
}

.user-avatar-img.loaded + .user-avatar-fallback {
display: none;
}

/* ============================================
 FEEDBACK MODAL
 ============================================ */
.feedback-stars {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 16px;
font-size: 2rem;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}

.feedback-stars span {
transition: all 0.15s ease;
color: rgba(255, 255, 255, 0.2);
}

.feedback-stars span.star-active {
color: #ffd740;
}

.feedback-stars span:active {
transform: scale(1.2);
}

.feedback-textarea {
width: 100%;
background: rgba(255, 255, 255, 0.06);
border: 1.5px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 14px 16px;
color: #fff;
font-family: var(--font);
font-size: 0.9rem;
resize: vertical;
min-height: 80px;
outline: none;
margin-bottom: 14px;
transition: border 0.2s ease;
}

.feedback-textarea:focus {
border-color: var(--accent-light);
}

.feedback-textarea::placeholder {
color: rgba(255, 255, 255, 0.25);
}

/* ============================================
 COFFEE / SUPPORT CARD
 ============================================ */
.coffee-card {
padding: 0;
}

.coffee-link {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 16px 20px;
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
font-size: 0.9rem;
font-weight: 600;
transition: all 0.2s ease;
border-radius: var(--radius);
}

.coffee-link:active {
background: rgba(255, 255, 255, 0.04);
color: rgba(255, 255, 255, 0.7);
}

.coffee-icon {
font-size: 1.2rem;
}

.login-logo-img {
width: 120px;
height: 120px;
border-radius: 24px;
margin-bottom: 16px;
animation: bounce 2s ease-in-out infinite;
}