@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,500;1,600;1,700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --bg:        #FBF5EE;
  --bg2:       #F5EDE3;
  --surface:   #FFFFFF;
  --surface2:  #F8F2EB;
  --border:    rgba(0,0,0,0.08);
  --border2:   rgba(0,0,0,0.12);
  --orange:    #C96B2E;
  --orange-light: #E8A870;
  --orange-bg: rgba(201,107,46,0.08);
  --orange-glow: rgba(201,107,46,0.18);
  --text:      #2D2A26;
  --text2:     #3D3832;
  --muted:     #8A8078;
  --muted2:    #B8AFA6;
  --green:     #5A9A6E;
  --red:       #C45B5B;
  --r-sm:      8px;
  --r-md:      12px;
  --r-lg:      16px;
  --r-xl:      24px;
  --nav-h:     64px;
  --bottom-h:  72px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-tap-highlight-color:transparent; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5 { font-family:'Playfair Display',serif; line-height:1.2; letter-spacing:-0.01em; color:var(--text); }
h1 { font-size:clamp(2rem,5vw,3rem); font-weight:700; }
h2 { font-size:clamp(1.4rem,3vw,2rem); font-weight:700; }
h3 { font-size:1.15rem; font-weight:600; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; font-family:'DM Sans',sans-serif; }
input,textarea,select { font-family:'DM Sans',sans-serif; }

/* LOGO */
.nav-logo { display:flex; align-items:center; gap:8px; font-family:'Playfair Display',serif; font-size:1.25rem; font-weight:800; color:var(--text); }
.nav-logo svg { width:26px; height:26px; color:var(--orange); }
.nav-logo .ally { color:var(--orange); }

/* LANG SWITCH */
.lang-switch{position:fixed;bottom:20px;right:20px;z-index:999;display:flex;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,0.08)}
.lang-switch button{padding:8px 14px;border:none;background:none;font-family:'DM Sans',sans-serif;font-size:0.75rem;font-weight:600;cursor:pointer;color:var(--muted);transition:all .15s}
.lang-switch button.active{background:var(--orange);color:#fff}
.lang-switch button:hover:not(.active){color:var(--text)}
@media(max-width:600px){.lang-switch{bottom:80px}}

::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--muted2); border-radius:99px; }

/* NAV */
.topnav {
  position:sticky; top:0; z-index:200;
  height:var(--nav-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 2rem;
  background:rgba(251,245,238,0.92);
  backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.nav-logo {
  font-family:'Playfair Display',serif; font-size:1.4rem; font-weight:700;
  color:var(--text); display:flex; align-items:center; gap:8px;
}
.nav-logo-icon {
  width:32px; height:32px; border-radius:50%; background:var(--orange);
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:0.9rem;
}
.nav-center { display:flex; align-items:center; gap:24px; position:absolute; left:50%; transform:translateX(-50%); }
.nav-actions { display:flex; align-items:center; gap:16px; }
.nav-link { color:var(--muted); font-size:0.9rem; font-weight:500; transition:color 0.2s; }
.nav-link:hover { color:var(--text); }
.nav-icon-btn {
  width:40px; height:40px; border-radius:50%;
  background:var(--surface2); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  color:var(--muted); transition:all 0.2s;
}
.nav-icon-btn:hover { background:var(--surface); color:var(--text); border-color:var(--border2); }

/* BOTTOM NAV */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:200;
  height:var(--bottom-h);
  display:flex; align-items:center; justify-content:space-around;
  background:rgba(251,245,238,0.96);
  backdrop-filter:blur(24px);
  border-top:1px solid var(--border);
  padding:0 1rem;
  padding-bottom:env(safe-area-inset-bottom);
}
.bnav-item {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:8px 14px; border-radius:var(--r-md);
  color:var(--muted); font-size:0.68rem; font-weight:600;
  transition:all 0.2s; border:none; background:none;
  font-family:'DM Sans',sans-serif; text-decoration:none;
}
.bnav-item.active { color:var(--orange); }

/* BUTTONS */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:'DM Sans',sans-serif; font-weight:600; font-size:0.85rem;
  border:none; border-radius:var(--r-md); cursor:pointer;
  transition:all 0.22s; text-decoration:none; white-space:nowrap;
  padding:12px 24px; letter-spacing:0.02em;
}
.btn-primary {
  background:var(--orange); color:#fff;
  text-transform:uppercase; font-size:0.78rem; font-weight:700; letter-spacing:0.08em;
}
.btn-primary:hover { background:#B55E28; transform:translateY(-1px); box-shadow:0 4px 16px var(--orange-glow); }
.btn-primary:active { transform:translateY(0); }
.btn-outline {
  background:transparent; border:1.5px solid var(--text);
  color:var(--text); text-transform:uppercase; font-size:0.78rem; font-weight:700; letter-spacing:0.08em;
}
.btn-outline:hover { background:var(--text); color:#fff; }
.btn-ghost { background:transparent; border:1.5px solid var(--border2); color:var(--text); }
.btn-ghost:hover { background:var(--surface2); }
.btn-dark { background:var(--text); color:#fff; }
.btn-dark:hover { background:var(--text2); }
.btn-sm { padding:8px 18px; font-size:0.78rem; }
.btn-lg { padding:14px 32px; font-size:0.85rem; }
.btn-icon { width:44px; height:44px; padding:0; border-radius:50%; }
.btn-login { border:1.5px solid var(--orange); color:var(--orange); background:transparent; border-radius:var(--r-xl); }
.btn-login:hover { background:var(--orange); color:#fff; }

/* CHIPS */
.chip {
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 16px; border-radius:99px;
  font-size:0.8rem; font-weight:500;
  border:1.5px solid var(--border2);
  background:var(--surface); color:var(--muted);
  cursor:pointer; transition:all 0.18s; white-space:nowrap;
}
.chip:hover { border-color:var(--orange); color:var(--text); }
.chip.active { background:var(--orange); border-color:var(--orange); color:#fff; }

/* CARDS */
.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,0.04); }
.jcard { border-radius:var(--r-lg); overflow:hidden; position:relative; display:block; text-decoration:none; color:inherit; transition:transform 0.25s; background:var(--surface); box-shadow:0 2px 12px rgba(0,0,0,0.05); }
.jcard:hover { transform:translateY(-4px); box-shadow:0 8px 24px rgba(0,0,0,0.08); }
.jcard-cover { position:relative; overflow:hidden; }
.jcard-cover img { width:100%; height:100%; object-fit:cover; }
.jcard-body { padding:1rem 1.25rem 1.25rem; }

/* FORMS */
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:1rem; }
.field label { font-size:0.75rem; font-weight:600; color:var(--muted); }
.field input, .field textarea, .field select {
  background:var(--surface); border:1px solid var(--border2); border-radius:var(--r-md);
  color:var(--text); font-size:0.95rem; padding:12px 16px;
  transition:border-color 0.2s, box-shadow 0.2s; outline:none; width:100%;
}
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--orange); box-shadow:0 0 0 3px var(--orange-glow); }
.field textarea { resize:vertical; min-height:100px; }
.field input::placeholder { color:var(--muted2); }

/* AVATARS */
.av { border-radius:50%; object-fit:cover; display:flex; align-items:center; justify-content:center; font-family:'Playfair Display',serif; font-weight:700; overflow:hidden; flex-shrink:0; }
.av-xs { width:28px; height:28px; font-size:0.65rem; }
.av-sm { width:36px; height:36px; font-size:0.78rem; }
.av-md { width:48px; height:48px; font-size:1rem; }
.av-lg { width:64px; height:64px; font-size:1.3rem; }
.av-xl { width:88px; height:88px; font-size:1.8rem; }

/* BADGES */
.badge { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:99px; font-size:0.72rem; font-weight:600; }
.badge-orange { background:var(--orange); color:#fff; }
.badge-green { background:rgba(90,154,110,0.12); color:var(--green); border:1px solid rgba(90,154,110,0.25); }
.badge-dim { background:var(--surface2); color:var(--muted); border:1px solid var(--border); }

/* PROGRESS */
.progress { width:100%; height:4px; background:var(--bg2); border-radius:99px; overflow:hidden; }
.progress-fill { height:100%; background:var(--orange); border-radius:99px; transition:width 0.6s cubic-bezier(0.34,1.56,0.64,1); }
.progress-blue .progress-fill { background:#4A7FB5; }
.progress-red .progress-fill { background:#C45B5B; }
.progress-green .progress-fill { background:var(--green); }

/* STATS */
.stat-pill { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); padding:1rem 1.25rem; box-shadow:0 1px 4px rgba(0,0,0,0.04); }
.stat-val { font-family:'Playfair Display',serif; font-size:1.6rem; font-weight:700; color:var(--text); }
.stat-label { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted); margin-top:2px; }

/* TOGGLE */
.toggle { position:relative; width:48px; height:26px; flex-shrink:0; }
.toggle input { display:none; }
.toggle-track { width:48px; height:26px; border-radius:99px; background:var(--muted2); cursor:pointer; transition:background 0.2s; position:relative; }
.toggle-thumb { position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; transition:transform 0.22s cubic-bezier(0.34,1.56,0.64,1); box-shadow:0 2px 6px rgba(0,0,0,0.15); }
.toggle input:checked + .toggle-track { background:var(--orange); }
.toggle input:checked + .toggle-track .toggle-thumb { transform:translateX(22px); }

/* LAYOUT */
.page-wrap { padding:1.5rem; max-width:820px; margin:0 auto; padding-bottom:calc(var(--bottom-h) + 2rem); }
.section-eyebrow { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.12em; color:var(--orange); margin-bottom:6px; }
.chip-row { display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
.chip-row::-webkit-scrollbar { display:none; }
.divider { border:none; border-top:1px solid var(--border); margin:1.5rem 0; }
.press { transition:transform 0.12s; }
.press:active { transform:scale(0.97); }
.text-muted { color:var(--muted); }
.text-orange { color:var(--orange); }
.text-sm { font-size:0.85rem; }
.text-xs { font-size:0.75rem; }
.fw-600 { font-weight:600; }
.fw-700 { font-weight:700; }
.w-full { width:100%; }

/* ANIMATIONS */
@keyframes fadeUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
.anim-1 { animation:fadeUp 0.5s ease both; }
.anim-2 { animation:fadeUp 0.5s 0.1s ease both; }
.anim-3 { animation:fadeUp 0.5s 0.2s ease both; }
.anim-4 { animation:fadeUp 0.5s 0.3s ease both; }
.anim-5 { animation:fadeUp 0.5s 0.4s ease both; }