* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'DM Sans', Arial, sans-serif; background: #f7f4ef; color: #2c2825; }
.hidden { display: none !important; }
.btn { padding: 10px 20px; border-radius: 10px; border: none; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px; transition: all 0.2s; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn-primary { background: #2d6a4f; color: white; }
.btn-gold { background: #c9a84c; color: white; }
.btn-pro { background: #1a3a5c; color: white; }
.btn-outline-white { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.7); }
.btn-ghost { background: #f0ece4; color: #8a7f78; border: 1px solid #ddd6cc; }
.btn-danger { background: transparent; color: #c0392b; border: 1.5px solid #e8b4b0; }
.btn-outline { background: transparent; color: #2d6a4f; border: 2px solid #2d6a4f; }
.w100 { width: 100%; padding: 12px; font-size: 15px; }
.hero { background: linear-gradient(150deg, #1a4a2e 0%, #2d6a4f 100%); padding: 60px 20px 70px; text-align: center; }
.hero-content { max-width: 600px; margin: 0 auto; }
.hero h1 { font-family: 'Playfair Display', Georgia, serif; color: white; font-size: clamp(32px,7vw,52px); font-weight: 700; margin-bottom: 8px; }
.tagline { color: #a7f3d0; font-size: 13px; letter-spacing: 0.1em; margin-bottom: 16px; }
.hero-desc { color: rgba(255,255,255,0.85); font-size: 15px; line-height: 1.7; max-width: 480px; margin: 0 auto 32px; }
.hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.hero-btns .btn { font-size: 14px; padding: 12px 24px; }
.login-link { color: rgba(255,255,255,0.6); font-size: 13px; cursor: pointer; text-decoration: underline; }
.offers-section { max-width: 800px; margin: 0 auto; padding: 40px 20px 60px; }
.tabs-wrap { display: flex; justify-content: center; margin-bottom: 32px; }
.tabs { display: flex; background: #e8e2d8; border-radius: 12px; padding: 4px; }
.tab { flex: 1; padding: 10px 20px; border: none; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 600; font-size: 14px; background: transparent; color: #8a7f78; transition: all 0.2s; }
.tab.active { background: white; color: #1a4a2e; box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.offer-header { text-align: center; margin-bottom: 24px; }
.offer-header h2 { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 26px; font-weight: 600; margin-bottom: 8px; }
.offer-header p { color: #8a7f78; font-size: 15px; max-width: 460px; margin: 0 auto; }
.offer-box { background: white; border-radius: 14px; padding: 22px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); margin-bottom: 24px; border: 2px solid #e8e2d8; }
.offer-box h3 { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 16px; margin-bottom: 16px; }
.pro-box { border-color: rgba(37,99,235,0.2); }
.feature { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0ece4; }
.feature.no-border { border-bottom: none; }
.fi { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.feature b { display: block; color: #2c2825; font-size: 14px; margin-bottom: 3px; }
.feature p { color: #8a7f78; font-size: 13px; line-height: 1.5; margin: 0; }
.price-row { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.price-card { flex: 1; min-width: 180px; background: white; border-radius: 14px; padding: 22px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.07); border: 2px solid #e8e2d8; position: relative; }
.price-card.dark { background: #1a4a2e; border-color: #1a4a2e; }
.price-card.pro-price { border-color: rgba(37,99,235,0.2); background: #e8f0f8; }
.price-card.pro-price-dark { background: #1a3a5c; border-color: #1a3a5c; }
.price-card .btn { width: 100%; margin-top: 12px; }
.badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: #c9a84c; color: white; font-size: 10px; font-weight: 700; padding: 3px 12px; border-radius: 20px; white-space: nowrap; }
.price-num { font-family: 'Playfair Display', Georgia, serif; font-size: 30px; font-weight: 700; color: #1a4a2e; }
.price-per { color: #8a7f78; font-size: 13px; margin-bottom: 4px; }
.price-note { color: #2d6a4f; font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.trial-note { text-align: center; color: #8a7f78; font-size: 13px; }
.auth-page { min-height: 100vh; background: #f7f4ef; display: flex; align-items: center; justify-content: center; padding: 20px; }
.auth-wrap { width: 100%; max-width: 420px; }
.auth-head { text-align: center; margin-bottom: 24px; }
.auth-head h1 { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.auth-head p { color: #8a7f78; font-size: 14px; }
.auth-card { background: white; border-radius: 14px; padding: 28px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); margin-bottom: 14px; }
.auth-card h2 { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 19px; font-weight: 600; margin-bottom: 18px; }
.err { background: #fdf0ee; border: 1px solid #e8b4b0; border-radius: 10px; padding: 10px 14px; color: #c0392b; font-size: 13px; margin-bottom: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 600; color: #2c2825; margin-bottom: 5px; }
.field input, .field select, .field textarea { width: 100%; padding: 10px 13px; border-radius: 10px; border: 1.5px solid #ddd6cc; font-family: inherit; font-size: 14px; color: #2c2825; background: #fdfbf8; outline: none; transition: border-color 0.2s; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: #2d6a4f; }
.field textarea { resize: vertical; }
.field-row { display: flex; gap: 12px; }
.field-row .field { flex: 1; }
.trial-banner { background: #d8f3dc; color: #1a4a2e; border-radius: 10px; padding: 10px 14px; font-size: 13px; font-weight: 500; margin-bottom: 14px; }
.pro-trial { background: #e8f0f8; color: #1a3a5c; }
.switch-link { text-align: center; color: #8a7f78; font-size: 13px; margin-top: 14px; }
.switch-link a { color: #2d6a4f; font-weight: 600; cursor: pointer; }
.back { text-align: center; color: #8a7f78; font-size: 13px; cursor: pointer; }
.app-page { min-height: 100vh; background: #f7f4ef; display: flex; flex-direction: column; }
.topbar { background: linear-gradient(135deg, #1a4a2e, #2d6a4f); padding: 13px 18px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }
.pro-tb { background: linear-gradient(135deg, #1a3a5c, #1e4a8a); }
.admin-tb { background: linear-gradient(135deg, #78350f, #92400e); }
.tb-left { display: flex; gap: 10px; align-items: center; }
.tb-title { font-family: 'Playfair Display', Georgia, serif; color: white; font-size: 17px; font-weight: 600; }
.tb-sub { color: #a7f3d0; font-size: 11px; }
.tb-user { color: #a7f3d0; font-size: 13px; }
.botnav { background: white; border-bottom: 1px solid #ddd6cc; display: flex; position: sticky; top: 52px; z-index: 99; }
.pro-botnav .nb.active { color: #1a3a5c; border-bottom-color: #1a3a5c; }
.admin-botnav .nb.active { color: #92400e; border-bottom-color: #92400e; }
.nb { flex: 1; padding: 10px 4px; border: none; background: transparent; color: #8a7f78; font-size: 11px; font-family: inherit; font-weight: 400; border-bottom: 3px solid transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.nb span:first-child { font-size: 17px; }
.nb.active { color: #2d6a4f; font-weight: 700; border-bottom-color: #2d6a4f; }
.appcontent { flex: 1; max-width: 900px; margin: 0 auto; width: 100%; padding: 18px 14px 60px; }
.card { background: white; border-radius: 14px; padding: 18px 20px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); margin-bottom: 12px; }
.card-click { cursor: pointer; transition: all 0.2s; }
.card-click:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.1); }
.card-title { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 16px; font-weight: 600; }
.section-title { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.section-sub { color: #8a7f78; font-size: 13px; margin-bottom: 16px; }
.section-h { font-family: 'Playfair Display', Georgia, serif; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; margin: 2px; }
.tag-sage { background: rgba(45,106,79,0.12); color: #2d6a4f; }
.tag-muted { background: rgba(138,127,120,0.12); color: #8a7f78; }
.tag-plante { background: rgba(45,106,79,0.12); color: #2d6a4f; }
.tag-he { background: rgba(124,58,237,0.12); color: #7c3aed; }
.tag-complement { background: rgba(3,105,161,0.12); color: #0369a1; }
.tag-naturo { background: rgba(45,106,79,0.12); color: #2d6a4f; }
.tag-aroma { background: rgba(124,58,237,0.12); color: #7c3aed; }
.tag-phyto { background: rgba(3,105,161,0.12); color: #0369a1; }
.tag-pro { background: rgba(26,58,92,0.12); color: #1a3a5c; }
.tag-warn { background: #fdf4ec; color: #a0522d; }
.tag-success { background: #d8f3dc; color: #1a4a2e; }
.tag-danger { background: #fdf0ee; color: #c0392b; }
.tag-gold { background: rgba(201,168,76,0.15); color: #c9a84c; }
.tag-admin { background: rgba(146,64,14,0.12); color: #92400e; }
.alert-pro { background: #fdf4ec; border-left: 3px solid #e8a87c; padding: 8px 12px; border-radius: 0 8px 8px 0; margin-bottom: 4px; font-size: 13px; }
.alert-red { background: #c0392b; border-radius: 8px; padding: 10px 14px; color: white; font-size: 12px; font-weight: 700; margin-top: 10px; }
.info-pro { background: #e8f0f8; border-radius: 10px; padding: 10px 14px; color: #1a3a5c; font-size: 13px; }
.dosage-box { background: #e8f0f8; border-radius: 12px; padding: 14px 16px; margin-bottom: 14px; border: 1px solid rgba(37,99,235,0.15); }
.dosage-box h4 { font-family: 'Playfair Display', Georgia, serif; color: #1a3a5c; font-size: 14px; margin-bottom: 8px; }
.dosage-box p { color: #2c2825; font-size: 14px; line-height: 1.7; }
.vig-item { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 10px; cursor: pointer; margin-bottom: 3px; }
.vig-item:hover { background: #fdf4ec; }
.vig-item.checked { background: #fdf4ec; }
.vig-cb { width: 20px; height: 20px; border-radius: 5px; border: 2px solid #ddd6cc; background: white; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.vig-cb.checked { background: #e8a87c; border-color: #e8a87c; }
.vig-cb.checked::after { content: '\2713'; color: white; font-size: 12px; font-weight: bold; }
.vig-label { font-size: 14px; color: #2c2825; }
.vig-label.checked { color: #92400e; font-weight: 600; }
.vig-emoji { font-size: 16px; }
.vig-alert-box { background: #fdf4ec; border: 2px solid #e8a87c; border-radius: 12px; padding: 14px; margin-top: 14px; }
.vig-alert-item { background: white; padding: 8px 12px; border-radius: 8px; margin-bottom: 6px; border-left: 3px solid #e8a87c; }
.vig-alert-item b { color: #92400e; font-size: 13px; display: block; }
.vig-alert-item p { color: #7c2d12; font-size: 12px; margin: 3px 0 0; line-height: 1.5; }
.search-bar { width: 100%; padding: 11px 14px; border-radius: 12px; border: 1.5px solid #ddd6cc; font-family: inherit; font-size: 14px; color: #2c2825; background: white; outline: none; margin-bottom: 14px; }
.filter-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.filter-btn { padding: 6px 14px; border-radius: 20px; border: 1.5px solid #ddd6cc; background: white; color: #8a7f78; font-size: 13px; font-family: inherit; font-weight: 600; cursor: pointer; }
.filter-btn.active { background: #2d6a4f; color: white; border-color: #2d6a4f; }
.filter-btn.active-pro { background: #1a3a5c; color: white; border-color: #1a3a5c; }
.filter-btn.active-admin { background: #92400e; color: white; border-color: #92400e; }
.count-label { color: #8a7f78; font-size: 12px; margin-bottom: 10px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px,1fr)); gap: 8px; margin-bottom: 20px; }
.cat-btn { background: white; border: 1.5px solid #ddd6cc; border-radius: 10px; padding: 10px 14px; cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 600; text-align: left; color: #2c2825; }
.cat-btn.active { background: #2d6a4f; color: white; border-color: #2d6a4f; }
.sympt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.sympt-chip { background: white; color: #2d6a4f; border: 1.5px solid #2d6a4f; border-radius: 20px; padding: 7px 16px; cursor: pointer; font-size: 13px; font-family: inherit; font-weight: 600; }
.sympt-chip:hover { background: #2d6a4f; color: white; }
.back-btn { display: inline-block; padding: 7px 14px; background: #f0ece4; border: 1px solid #ddd6cc; border-radius: 10px; cursor: pointer; font-size: 13px; color: #8a7f78; font-family: inherit; font-weight: 600; margin-bottom: 14px; }
.detail-hero { display: flex; gap: 12px; align-items: center; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px solid #ddd6cc; }
.detail-emoji { font-size: 32px; }
.detail-name { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.info-row { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #f5f0e8; }
.info-row:last-child { border-bottom: none; }
.info-label { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 13px; font-weight: 600; display: block; margin-bottom: 3px; }
.info-val { color: #2c2825; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }
.source-note { background: #f5f0e8; padding: 10px 14px; border-radius: 10px; color: #8a7f78; font-size: 12px; margin-top: 8px; }
.prat-card { display: flex; gap: 12px; align-items: flex-start; }
.prat-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.plan-badge { padding: 4px 14px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.plan-public { background: #d8f3dc; color: #1a4a2e; }
.plan-pro { background: #e8f0f8; color: #1a3a5c; }
.plan-choice { border: 2px solid #ddd6cc; border-radius: 12px; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.plan-choice.pro-dark { background: #1a3a5c; border-color: #1a3a5c; }
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.modal-box { background: white; border-radius: 16px; padding: 28px; max-width: 380px; width: 100%; box-shadow: 0 20px 60px rgba(0,0,0,0.25); text-align: center; }
.modal-box h3 { font-family: 'Playfair Display', Georgia, serif; color: #1a4a2e; font-size: 18px; margin-bottom: 8px; }
.modal-box p { color: #8a7f78; font-size: 14px; line-height: 1.6; }
.warn-block { background: #fdf4ec; border: 1px solid #e8a87c; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; color: #a0522d; font-size: 13px; font-weight: 600; }
.empty-state { text-align: center; padding: 48px 20px; }
.empty-icon { font-size: 48px; margin-bottom: 12px; }
.empty-text { color: #8a7f78; margin-bottom: 16px; }
select { width: 100%; padding: 10px 13px; border-radius: 10px; border: 1.5px solid #ddd6cc; font-family: inherit; font-size: 14px; color: #2c2825; background: #fdfbf8; outline: none; margin-bottom: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; margin-bottom: 20px; }
.stat-card { background: white; border-radius: 14px; padding: 18px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.stat-num { font-family: 'Playfair Display', Georgia, serif; font-size: 32px; font-weight: 700; }
.stat-label { color: #8a7f78; font-size: 12px; margin-top: 4px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th { background: #f5f0e8; padding: 10px 12px; text-align: left; font-weight: 600; color: #2c2825; border-bottom: 2px solid #ddd6cc; }
.admin-table td { padding: 10px 12px; border-bottom: 1px solid #f0ece4; vertical-align: middle; }
.admin-table tr:hover td { background: #fdfbf8; }
.admin-row-actions { display: flex; gap: 6px; }
.backup-big-btn { background: linear-gradient(135deg, #78350f, #92400e); color: white; border: none; border-radius: 14px; padding: 20px 24px; cursor: pointer; font-family: inherit; font-size: 16px; font-weight: 700; width: 100%; margin-bottom: 12px; transition: all 0.2s; }
.backup-big-btn:hover { filter: brightness(1.1); transform: translateY(-2px); }