/*
 * ══════════════════════════════════════════════════════════════
 *  Ma Bulle Féminine — Design "Nacre & Soie" v4
 *  Typographie : Cormorant Garamond + DM Sans
 *  Esthétique : luxe féminin éditorial · nacre · soie · botanique
 *  Responsive : SMA · TAB · Desktop
 * ══════════════════════════════════════════════════════════════
 */

/* ── 0. Google Fonts ──────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&display=swap');

/* ── 1. Variables étendues ────────────────────────────────────── */
:root {
  --nacre-shine: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,230,242,.6) 40%, rgba(248,220,255,.5) 80%, rgba(255,255,255,.9) 100%);
  --nacre-border: rgba(255,220,235,.55);
  --silk-shadow: 0 4px 24px rgba(255,107,156,.12), 0 1px 3px rgba(0,0,0,.06);
  --lift-shadow: 0 12px 40px rgba(255,107,156,.20), 0 2px 8px rgba(0,0,0,.08);
  --font-display: 'Cormorant Garamond', 'Georgia', serif;
  --font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
  --dur: .24s;
  --ease-spring: cubic-bezier(.34,1.4,.64,1);
  --ease-out: cubic-bezier(.22,1,.36,1);
  --accent-rgb: 255,107,156;
}
body.theme-lavande { --nacre-border:rgba(200,170,255,.50); --accent-rgb:168,85,247; }
body.theme-pivoine  { --nacre-border:rgba(255,160,190,.50); --accent-rgb:255,75,136; }
body.theme-satin    { --nacre-border:rgba(255,200,220,.48); --accent-rgb:255,122,162; }

/* ── 2. Font globale ─────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
}

/* ── 3. Fond — mesh organique animé ─────────────────────────── */
@keyframes meshDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(24px,-30px) scale(1.10)} }
@keyframes meshDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 40%{transform:translate(-18px,22px) scale(1.07)} }
@keyframes meshDrift3 { 0%,100%{transform:translate(0,0)} 60%{transform:translate(12px,-14px)} }

body::before, body::after {
  content:""; position:fixed; border-radius:50%; pointer-events:none; z-index:0;
}
body::before {
  width: min(560px, 55vw); height: min(560px, 55vw);
  top:-15%; left:-8%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.18) 0%, transparent 70%);
  animation: meshDrift1 14s ease-in-out infinite;
}
body::after {
  width: min(420px, 40vw); height: min(420px, 40vw);
  bottom:0%; right:-6%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.13) 0%, transparent 70%);
  animation: meshDrift2 18s ease-in-out infinite;
}

/* Troisième orbe central */
.app::before {
  content:""; position:fixed; border-radius:50%; pointer-events:none; z-index:0;
  width:min(300px,30vw); height:min(300px,30vw);
  top:40%; left:50%; transform:translateX(-50%);
  background: radial-gradient(circle, rgba(var(--accent-rgb),.06) 0%, transparent 70%);
  animation: meshDrift3 22s ease-in-out infinite;
}
.app { position:relative; z-index:1; }

/* ── 4. Header — barre éditoriale ──────────────────────────── */
.app-header {
  background: var(--nacre-shine);
  border: 1px solid var(--nacre-border);
  border-radius: 20px;
  padding: 14px 20px 16px;
  box-shadow: var(--silk-shadow);
  position: relative;
  overflow: hidden;
  margin-bottom: 6px;
}
/* Trait diagonal décoratif */
.app-header::before {
  content:"";
  position:absolute; top:0; right:0;
  width:120px; height:100%;
  background: linear-gradient(135deg, transparent 0%, rgba(var(--accent-rgb),.07) 100%);
  clip-path: polygon(40% 0%, 100% 0%, 100% 100%, 0% 100%);
  pointer-events:none;
}
/* Ligne brillante haute */
.app-header::after {
  content:"";
  position:absolute; top:0; left:16px; right:16px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(var(--accent-rgb),.3), rgba(255,255,255,.9), transparent);
}

/* Titre avec typo éditoriale */
.app-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-main);
}
.app-title span.logo {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.15) 0%, rgba(var(--accent-rgb),.30) 100%);
  border: 1px solid rgba(var(--accent-rgb),.25);
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.25), inset 0 1px 0 rgba(255,255,255,.8);
  display:flex; align-items:center; justify-content:center;
  font-size: 18px;
  position:relative; overflow:hidden;
}
.app-title span.logo::after {
  content:"";
  position:absolute; top:15%; left:15%; width:28%; height:18%;
  background:rgba(255,255,255,.55); border-radius:999px; transform:rotate(-20deg);
}

.app-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--text-soft);
  opacity: .85;
}
.app-greeting {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-main);
}

/* ── 5. Profile button ─────────────────────────────────────── */
.profile-btn {
  border-radius: 14px;
  border: 1px solid var(--nacre-border);
  padding: 8px 14px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-flex; align-items:center; gap:7px;
  background: rgba(255,255,255,.72);
  color: var(--text-soft);
  box-shadow: var(--silk-shadow);
  cursor: pointer;
  position: relative; overflow:hidden;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), background var(--dur);
}
.profile-btn::before {
  content:"";
  position:absolute; top:0; left:0; right:0; height:50%;
  background:linear-gradient(180deg,rgba(255,255,255,.40) 0%,transparent 100%);
  border-radius:14px 14px 0 0; pointer-events:none;
}
.profile-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--lift-shadow);
  background: rgba(255,255,255,.88);
}
.profile-btn.discreet {
  background: rgba(30,15,35,.90);
  border-color: rgba(255,255,255,.15);
  color: #fce8f6;
  box-shadow: 0 4px 18px rgba(0,0,0,.35);
}
.profile-btn.discreet::before { opacity:.18; }

/* ── 6. Cards ─────────────────────────────────────────────── */
.card {
  background: var(--nacre-shine);
  border: 1px solid var(--nacre-border);
  border-radius: 20px;
  box-shadow: var(--silk-shadow);
  padding: 18px 20px 20px;
  position: relative; overflow:hidden;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out);
}
/* Accent bar gauche coloré */
.card::before {
  content:"";
  position:absolute; left:0; top:20%; bottom:20%;
  width: 3px; border-radius: 0 2px 2px 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb),.0) 0%, rgba(var(--accent-rgb),.55) 50%, rgba(var(--accent-rgb),.0) 100%);
}
/* Shimmer haute */
.card::after {
  content:"";
  position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.85), rgba(var(--accent-rgb),.2), rgba(255,255,255,.85), transparent);
}

.card-lite {
  background: rgba(255,255,255,.60);
  border: 1px solid var(--nacre-border);
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),.08);
}

.content-title {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--text-main);
  margin-bottom: 8px;
}
.content-text {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-soft);
}
.today-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
}
.today-date {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-soft);
  opacity: .8;
}

/* ── 7. Chips — organique pill avec shimmer ────────────────── */
@keyframes chipIn { from{opacity:0;transform:scale(.9) translateY(4px)} to{opacity:1;transform:scale(1) translateY(0)} }
@keyframes shimmerSlide {
  0%{transform:translateX(-200%)} 100%{transform:translateX(400%)}
}

.chip {
  padding: 8px 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--nacre-border);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  display: inline-flex; align-items:center; gap:7px;
  color: var(--text-soft);
  cursor: pointer;
  position: relative; overflow:hidden;
  box-shadow: var(--silk-shadow);
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease-out), background var(--dur);
}
/* Shimmer au hover */
.chip::before {
  content:"";
  position:absolute; top:0; left:-40%; width:25%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-20deg);
  transition: none;
}
.chip:hover::before {
  animation: shimmerSlide .5s ease forwards;
}
.chip:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: var(--lift-shadow);
  background: rgba(255,255,255,.92);
  border-color: rgba(var(--accent-rgb),.30);
}
.chip:active { transform: translateY(0) scale(.97); }
.chip span.emoji { font-size: 16px; }

/* Chip anglais — discret bleu-nacré */
.chip-english {
  background: linear-gradient(135deg, rgba(230,240,255,.80) 0%, rgba(240,232,255,.72) 100%);
  border-color: rgba(160,190,240,.50);
  color: #3a5ca8;
}
.chip-english:hover {
  background: linear-gradient(135deg, rgba(220,235,255,.92) 0%, rgba(235,225,255,.88) 100%);
  border-color: rgba(140,170,220,.65);
  color: #2a4c98;
}
.chip-english .emoji::after {
  content:"";
  display:inline-block; width:5px; height:5px; border-radius:50%;
  background: linear-gradient(135deg,#4a90e2,#7b2ff7);
  vertical-align:super; margin-left:1px; opacity:.7;
}

/* ── 8. Summary blocks ──────────────────────────────────────── */
.summary-block {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--nacre-border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-top: 14px;
  box-shadow: 0 3px 14px rgba(var(--accent-rgb),.07);
  position: relative; overflow:hidden;
}
.summary-title {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-soft);
  opacity: .75;
  margin-bottom: 10px;
}

/* ── 9. Bottom navigation ───────────────────────────────────── */
.bottom-nav {
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid var(--nacre-border);
  border-radius: 18px;
  box-shadow: 0 -2px 0 rgba(255,255,255,.6) inset,
              0 20px 50px rgba(0,0,0,.12),
              0 0 0 1px rgba(255,255,255,.4);
  padding: 10px 14px;
  gap: 6px;
}

.nav-btn {
  border-radius: 12px;
  padding: 9px 12px;
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  display: flex; align-items:center; justify-content:center; gap:5px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer; border: none;
  transition: transform var(--dur) var(--ease-spring),
              background var(--dur), box-shadow var(--dur);
  position: relative;
}
.nav-btn:hover {
  background: rgba(var(--accent-rgb),.10);
  transform: translateY(-2px);
}
.nav-btn.active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.18) 0%, rgba(var(--accent-rgb),.08) 100%);
  color: var(--accent-strong);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.18) inset;
  border: 1px solid rgba(var(--accent-rgb),.20);
}
.nav-btn.sos {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 6px 20px rgba(var(--accent-rgb),.45);
}
.nav-btn.sos:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(var(--accent-rgb),.55); }

/* Jeux — mauve distingué */
.nav-btn.games, .nav-btn[data-action="games"] {
  background: linear-gradient(135deg, rgba(124,58,237,.12) 0%, rgba(124,58,237,.06) 100%);
  border: 1px solid rgba(124,58,237,.20);
  color: #6d28d9;
  font-weight: 700;
}
.nav-btn.games:hover, .nav-btn[data-action="games"]:hover {
  background: linear-gradient(135deg, rgba(124,58,237,.18) 0%, rgba(124,58,237,.10) 100%);
  border-color: rgba(124,58,237,.35);
  transform: translateY(-2px);
}
.nav-btn.games.active, .nav-btn[data-action="games"].active {
  background: linear-gradient(135deg, rgba(124,58,237,.22) 0%, rgba(124,58,237,.12) 100%);
  border-color: rgba(124,58,237,.40);
  color: #5b21b6;
}

/* ── 10. Mini calendar ──────────────────────────────────────── */
.mini-calendar {
  background: rgba(255,255,255,.55);
  border: 1px solid var(--nacre-border);
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(var(--accent-rgb),.07);
}

/* ── 11. Cycle chip ─────────────────────────────────────────── */
.cycle-chip {
  font-family: var(--font-display);
  font-style: italic;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(var(--accent-rgb),.20);
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),.12);
}

/* ── 12. Boutons actions ────────────────────────────────────── */
.btn-small {
  border-radius: 12px;
  border: 1px solid var(--nacre-border);
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  position: relative; overflow:hidden;
  transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur);
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
  color: #fff;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 6px 18px rgba(var(--accent-rgb),.38);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(var(--accent-rgb),.50); }
.btn-ghost {
  background: rgba(255,255,255,.70);
  color: var(--text-soft);
  box-shadow: var(--silk-shadow);
}
.btn-ghost:hover { transform: translateY(-2px); background: rgba(255,255,255,.90); }

/* ── 13. Drawers & Modals ──────────────────────────────────── */
.drawer {
  background: linear-gradient(160deg, rgba(255,252,255,.96) 0%, rgba(255,245,252,.92) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border-left: 1px solid var(--nacre-border);
  box-shadow: -12px 0 48px rgba(0,0,0,.10);
}
.modal {
  background: linear-gradient(150deg, rgba(255,252,255,.96) 0%, rgba(255,245,252,.92) 100%);
  backdrop-filter: blur(28px) saturate(1.6);
  -webkit-backdrop-filter: blur(28px) saturate(1.6);
  border: 1px solid var(--nacre-border);
  border-radius: 24px;
  box-shadow: 0 32px 80px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.85);
}
.modal-header {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--text-main);
}
.modal-backdrop {
  background: rgba(20,8,30,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── 14. Jeux Modal — table de jeu luxueuse ────────────────── */
.mb-modal__backdrop { background: rgba(15,5,25,.22); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); }
.mb-modal__panel {
  background: var(--nacre-shine);
  border: 1px solid var(--nacre-border);
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(0,0,0,.18), 0 0 0 1px rgba(255,255,255,.5), inset 0 1px 0 rgba(255,255,255,.85);
  position:relative; overflow:hidden;
}
.mb-modal__panel::before {
  content:""; position:absolute; top:0; left:12px; right:12px; height:1px;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.88),rgba(var(--accent-rgb),.25),rgba(255,255,255,.88),transparent);
}
.mb-modal__panel::after {
  content:""; position:absolute; top:-60px; right:-40px;
  width:200px; height:200px; border-radius:50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb),.12) 0%, transparent 70%);
  pointer-events:none;
}
.mb-modal__head {
  background: rgba(255,255,255,.40);
  border-bottom: 1px solid rgba(var(--nacre-border),.8);
  backdrop-filter: blur(10px);
  position:relative; z-index:2;
}
.mb-modal__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--text-main);
}
.mb-title-ic {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.15), rgba(255,255,255,.8));
  border: 1px solid rgba(var(--accent-rgb),.20);
  box-shadow: 0 3px 10px rgba(var(--accent-rgb),.15);
}
.mb-tabs {
  background: rgba(255,255,255,.35);
  border-bottom: 1px solid rgba(var(--nacre-border),.7);
  padding: 10px 16px; gap:8px; display:flex; flex-wrap:wrap;
  position:relative; z-index:2;
}
.mb-tab {
  border-radius: 10px;
  padding: 8px 16px;
  border: 1px solid var(--nacre-border);
  background: rgba(255,255,255,.65);
  color: var(--text-soft);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(var(--accent-rgb),.07);
  transition: transform var(--dur) var(--ease-spring), background var(--dur), box-shadow var(--dur);
}
.mb-tab:hover { transform:translateY(-2px); background:rgba(255,255,255,.85); }
.mb-tab.is-active {
  background: linear-gradient(135deg, rgba(var(--accent-rgb),.18) 0%, rgba(255,255,255,.85) 100%);
  border-color: rgba(var(--accent-rgb),.28);
  color: var(--accent-strong);
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(var(--accent-rgb),.18);
  transform: translateY(-1px);
}
.mb-card {
  background: rgba(255,255,255,.68);
  border: 1px solid var(--nacre-border);
  border-radius: 18px;
  padding: 16px;
  box-shadow: 0 4px 16px rgba(var(--accent-rgb),.08);
  position:relative; overflow:hidden;
}
.mb-card::before {
  content:""; position:absolute; left:0; top:15%; bottom:15%;
  width:3px; border-radius:0 2px 2px 0;
  background: linear-gradient(180deg, transparent, rgba(var(--accent-rgb),.40), transparent);
}
.mb-toast {
  background: rgba(255,252,255,.94);
  border: 1px solid var(--nacre-border);
  border-radius: 14px;
  backdrop-filter: blur(16px);
  box-shadow: 0 16px 44px rgba(0,0,0,.12);
  font-family: var(--font-body);
  font-weight: 700;
}

/* ── 15. Inputs ─────────────────────────────────────────────── */
.field-input {
  font-family: var(--font-body);
  background: rgba(255,255,255,.72);
  border: 1px solid var(--nacre-border);
  border-radius: 12px;
  color: var(--text-main);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb),.13);
  outline: none;
}

/* ── 16. Thèmes — déclinaisons ────────────────────────────── */
body.theme-lavande .chip:hover { background:rgba(243,232,255,.92); border-color:rgba(168,85,247,.25); }
body.theme-lavande .nav-btn.active { background:linear-gradient(135deg,rgba(168,85,247,.16),rgba(168,85,247,.07)); color:#7c3aed; border-color:rgba(168,85,247,.22); }
body.theme-lavande .btn-primary { background:linear-gradient(135deg,#a855f7,#7c3aed); box-shadow:0 6px 18px rgba(168,85,247,.38); }
body.theme-lavande .card::before { background:linear-gradient(180deg,transparent,rgba(168,85,247,.45),transparent); }
body.theme-pivoine .chip:hover { background:rgba(255,225,240,.92); border-color:rgba(255,75,136,.25); }
body.theme-pivoine .nav-btn.active { background:linear-gradient(135deg,rgba(255,75,136,.16),rgba(255,75,136,.07)); color:#db2777; border-color:rgba(255,75,136,.22); }
body.theme-satin .chip:hover { background:rgba(255,240,248,.92); }

/* ── 17. Scrollbars ─────────────────────────────────────────── */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:rgba(255,255,255,.25); border-radius:999px; }
::-webkit-scrollbar-thumb { background:rgba(var(--accent-rgb),.30); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent); }

/* ── 18. Responsive SMA / TAB ──────────────────────────────── */
@media (max-width:480px) {
  .app-header { padding:11px 14px 13px; border-radius:16px; }
  .app-title { font-size:20px; }
  .app-title span.logo { width:30px; height:30px; border-radius:10px; }
  .profile-btn span:not(.icon) { display:none; }
  .profile-btn { padding:7px 10px; border-radius:12px; }
  .card { padding:14px 14px 16px; border-radius:16px; }
  .chip { padding:7px 12px; font-size:12px; border-radius:10px; }
  .chip-english span:not(.emoji) { display:none; }
  .chip-english::after { content:"EN"; font-size:11px; font-weight:700; color:#3a5ca8; letter-spacing:.5px; }
  .bottom-nav { padding:8px 10px; gap:5px; border-radius:16px; }
  .nav-btn { padding:8px 9px; font-size:11px; border-radius:10px; }
  .nav-btn span:not(.icon) { display:none; }
  .mb-modal__panel { border-radius:22px; width:calc(100vw - 10px); }
  .mb-tab { padding:7px 11px; font-size:12px; border-radius:9px; }
  .summary-block { border-radius:14px; padding:12px 14px; }
  .modal { border-radius:20px; }
}
@media (min-width:481px) and (max-width:900px) {
  .app-header { border-radius:18px; }
  .card { border-radius:18px; }
  .chip-english span:not(.emoji) { max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bottom-nav { gap:6px; border-radius:16px; }
  .nav-btn { padding:9px 10px; font-size:11.5px; }
}
@media (min-width:901px) {
  .app-main { flex-direction:row; align-items:flex-start; gap:16px; }
  .left-card { width:310px; flex-shrink:0; }
  .content-card { flex:1; }
}