/* Base: cores e temas, fontes, menu lateral, barra do topo, conta */

  :root{
    --sidebar-bg: #4a1524;
    --sidebar-active: #6d2340;
    --sidebar-text: #e9dcc9;
    --sidebar-text-dim: #b8926a;
    --sidebar-text-bright: #ffffff;
    --bg: #f7f1e7;
    --card-bg: #ffffff;
    --border: #e8ded0;
    --text-dark: #2c1b20;
    --text-muted: #8a7768;
    --dot-blue: #b8863a;
    --tag-bg: #f3e6d2;
    --tag-text: #8a6a2f;
    --green-bg: #e9f2e6;
    --green-text: #4a7a3d;
    --gray-pill-bg: #f1eae0;
    --gray-pill-text: #8a7768;
    --whatsapp: #25d366;
    --pink: #7a2440;
    --pink-light: #f2e2e6;
    --yellow: #c99a3f;
    --block-red: #b5543a;
    --gold: #a9762f;
    --gold-dark: #8a5f22;
    --gold-light: #f6ead2;
    --radius: 14px;
  }

  /* ================= TEMAS DE COR =================
     O padrão (:root acima) é Bordô com Dourado. Cada tema troca só as variáveis de cor. */
  html[data-tema="azul"]{
    --sidebar-bg: #14284a; --sidebar-active: #243f6e; --sidebar-text: #e4e2d8; --sidebar-text-dim: #c29a5e; --sidebar-text-bright:#ffffff;
    --bg: #f4f2ec; --border: #e1ddd3; --text-dark: #1b2436; --text-muted: #767c89;
    --dot-blue: #b8863a; --tag-bg: #efe6d4; --tag-text: #7f6330; --gray-pill-bg: #ecebe6; --gray-pill-text: #767c89;
    --pink: #1f3d6b; --pink-light: #e2e8f2; --yellow: #c99a3f; --block-red: #b5543a;
    --gold: #a9762f; --gold-dark: #8a5f22; --gold-light: #f4ead6;
  }
  html[data-tema="verde"]{
    --sidebar-bg: #1d3a2b; --sidebar-active: #2e5540; --sidebar-text: #e7e4d4; --sidebar-text-dim: #c29a5e; --sidebar-text-bright:#ffffff;
    --bg: #f4f2e9; --border: #e2ddcf; --text-dark: #1c2a21; --text-muted: #77796c;
    --dot-blue: #b8863a; --tag-bg: #efe7d2; --tag-text: #7f6330; --gray-pill-bg: #edebe3; --gray-pill-text: #77796c;
    --pink: #2c5a41; --pink-light: #e1ede5; --yellow: #c99a3f; --block-red: #b5543a;
    --gold: #a9762f; --gold-dark: #8a5f22; --gold-light: #f4ead6;
  }
  html[data-tema="terracota"]{
    --sidebar-bg: #5a3326; --sidebar-active: #7a4a38; --sidebar-text: #f4e7d9; --sidebar-text-dim: #d4ab78; --sidebar-text-bright:#ffffff;
    --bg: #f8f2ea; --border: #eadfd1; --text-dark: #2f211b; --text-muted: #8a7768;
    --dot-blue: #b8863a; --tag-bg: #f3e6d2; --tag-text: #8a6a2f; --gray-pill-bg: #f1eae0; --gray-pill-text: #8a7768;
    --pink: #8e4f38; --pink-light: #f4e5dc; --yellow: #c99a3f; --block-red: #b5543a;
    --gold: #a9762f; --gold-dark: #8a5f22; --gold-light: #f6ead2;
  }

  /* Seletor de tema (Configurações) */
  .tema-opcoes{ display:flex; flex-wrap:nowrap; gap:10px; margin:6px 0 4px 0; }
  .tema-opcao{ background:none; border:none; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; flex:1 1 0; min-width:0; font-family:inherit; }
  .tema-bola{
    position:relative; width:64px; height:64px; border-radius:50%; overflow:hidden; display:grid;
    grid-template-rows:1fr 1fr; grid-template-columns:1fr 1fr; box-shadow:0 0 0 1px rgba(0,0,0,.08);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .tema-bola span:first-child{ grid-column:1 / 3; }
  .tema-opcao:hover .tema-bola{ transform:scale(1.05); }
  .tema-opcao:focus-visible .tema-bola{ box-shadow:0 0 0 3px var(--gold); }
  .tema-opcao.ativo .tema-bola{ box-shadow:0 0 0 3px var(--card-bg), 0 0 0 5px var(--text-dark); }
  .tema-check{
    position:absolute; top:-4px; right:-4px; width:22px; height:22px; border-radius:50%; background: var(--text-dark); color:#fff;
    display:none; align-items:center; justify-content:center; box-shadow:0 0 0 2px var(--card-bg);
  }
  .tema-opcao.ativo .tema-check{ display:flex; }
  .tema-bola-wrap{ position:relative; }
  .tema-nome{ font-size:12px; font-weight:700; color: var(--text-dark); text-align:center; line-height:1.25; }

  *{ box-sizing: border-box; }

  body{
    margin:0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
  }

  .app{ display:flex; min-height:100vh; }

  /* ---------- SIDEBAR ---------- */
  .sidebar{
    width:270px; flex-shrink:0; background: var(--sidebar-bg); color: var(--sidebar-text);
    display:flex; flex-direction:column; padding: 20px 14px; position: relative;
  }
  .brand{ display:flex; align-items:center; gap:10px; padding: 4px 8px 20px 8px; }
  .brand-logo{
    width:34px; height:34px; border-radius:50%;
    background: conic-gradient(from 200deg, var(--gold), var(--sidebar-bg) 60%, var(--gold));
    flex-shrink:0;
  }
  .brand-name{ font-family:'Playfair Display', serif; font-size:16.5px; font-weight:700; color: var(--sidebar-text-bright); letter-spacing: -0.2px; }

  .collapse-btn{
    position:absolute; top: 26px; right: -12px; width:24px; height:24px; border-radius:50%;
    background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center;
    cursor:pointer; color: var(--sidebar-bg); box-shadow: 0 1px 3px rgba(0,0,0,.12);
  }

  .nav-section-label{
    font-size:11px; font-weight:700; letter-spacing: .08em; color: var(--sidebar-text-dim);
    text-transform: uppercase; margin: 18px 10px 8px 10px;
  }

  .nav-item{
    display:flex; align-items:center; gap:12px; padding: 11px 12px; border-radius: 10px;
    font-size:14.5px; font-weight:600; color: var(--sidebar-text); cursor:pointer;
    text-decoration:none; margin-bottom: 2px; transition: background .15s ease, color .15s ease;
  }
  .nav-item svg{ flex-shrink:0; opacity:.85; }
  .nav-item:hover{ background: rgba(255,255,255,.06); color: var(--sidebar-text-bright); }
  .nav-item.active{ background: var(--sidebar-active); color: var(--sidebar-text-bright); }
  .nav-item.active svg{ opacity:1; }
  .nav-item.active.accent-pink{ color: #e3c081; }
  .nav-item .lock-icon{ margin-left:auto; opacity:.55; }
  .nav-soon-badge{
    margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
    padding:2px 7px; border-radius:10px; background:rgba(255,255,255,.14); color:rgba(255,255,255,.8); white-space:nowrap;
  }
  .nav-item.locked{ cursor:not-allowed; }

  .sidebar-spacer{ flex:1; }

  .profile-label{
    font-size:11px; font-weight:700; letter-spacing: .08em; color: var(--sidebar-text-dim);
    text-transform: uppercase; margin: 4px 10px 8px 10px;
  }
  .profile-row{ display:flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 10px; cursor:pointer; }
  .profile-row:hover{ background: rgba(255,255,255,.06); }

  .profile-dropdown{
    display:none; position:absolute; bottom:calc(100% + 6px); left:0; right:0; background:#fff;
    border-radius:10px; box-shadow: 0 6px 20px rgba(0,0,0,.18); overflow:hidden; z-index:20;
  }
  .profile-dropdown.open{ display:block; }
  .profile-dropdown-item{
    display:flex; align-items:center; gap:10px; width:100%; padding:11px 14px; background:none; border:none;
    font-size:13.5px; font-weight:600; color:#c9463a; cursor:pointer; text-align:left; font-family:inherit;
  }
  .profile-dropdown-item:hover{ background:#fbe9e4; }
  .avatar{
    width:30px; height:30px; border-radius:50%; background: var(--sidebar-active);
    display:flex; align-items:center; justify-content:center; color: var(--sidebar-text); flex-shrink:0;
  }
  .profile-name{ font-size:14.5px; font-weight:600; color: var(--sidebar-text-bright); }

  .routine-card{
    margin: 10px 4px; padding: 12px 14px; border-radius: 12px;
    background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
    display:flex; align-items:center; gap:10px; font-size: 13.5px; font-weight:600;
    color: var(--sidebar-text); cursor:pointer;
  }

  /* ---------- MAIN SHELL ---------- */
  .main{ flex:1; display:flex; flex-direction:column; min-width:0; }

  .topbar{
    display:flex; align-items:center; justify-content:space-between; gap: 20px;
    padding: 18px 36px; background:#fff; border-bottom: 1px solid var(--border);
  }
  .page-title{ font-family:'Playfair Display', serif; font-size: 28px; font-weight: 700; letter-spacing: -0.2px; margin:0; }
  .page-subtitle{ font-size:14.5px; color: var(--text-muted); margin: 4px 0 0 0; }

  .topbar-right{ display:flex; align-items:center; gap:14px; flex-shrink:0; }

  .topbar-search{
    display:flex; align-items:center; gap:8px; background: var(--bg); border:1px solid var(--border);
    border-radius:10px; padding: 9px 14px; width:230px; color: var(--text-muted);
  }
  .topbar-search input{ border:none; outline:none; background:transparent; font-size:14px; width:100%; font-family:inherit; color: var(--text-dark); }
  .topbar-search svg{ flex-shrink:0; opacity:.7; }

  .bell-btn{
    width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:#fff;
    display:flex; align-items:center; justify-content:center; color: var(--sidebar-bg); cursor:pointer; flex-shrink:0;
  }
  .bell-btn:hover{ background:#f7f8f9; }

  .topbar-avatar{
    width:38px; height:38px; border-radius:50%; background: var(--pink-light); color: var(--pink);
    display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; flex-shrink:0;
  }

  .view{ display:none; }
  .view.active{ display:block; }

  /* ================= CONTA (avatar no topo) ================= */
  .conta-wrap{ position:relative; }
  button.topbar-avatar{ border:none; cursor:pointer; font-family:inherit; }
  button.topbar-avatar:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
  .conta-menu{ display:none; position:absolute; right:0; top:calc(100% + 8px); min-width:200px; background:#fff; border:1px solid var(--border);
    border-radius:12px; box-shadow:0 10px 30px rgba(20,25,28,.14); padding:8px; z-index:1500; }
  .conta-menu.open{ display:block; }
  .conta-nome{ font-size:12.5px; color:var(--text-muted); padding:6px 10px 8px; border-bottom:1px solid var(--border); margin-bottom:6px; }
  .conta-item{ display:flex; align-items:center; gap:10px; width:100%; background:none; border:none; padding:10px; border-radius:8px;
    font-family:inherit; font-size:14px; font-weight:600; color:var(--text-dark); cursor:pointer; text-align:left; }
  .conta-item:hover{ background:#f7f8f9; }

  /* ---------- Ícone oficial do Skin Expert Pro (substitui a bolinha dourada) ---------- */
  .brand-logo, .auth-logo .brand-logo, .public-header .brand-logo, .legal-marca .brand-logo{
    background: url(../img/icone-192.png) center / cover no-repeat !important;
    border-radius: 24% !important;
  }