:root{--bg:#f0f2f5;--card:#fff;--text:#050505;--muted:#65676b;--line:#dadde1;--primary:#1877f2;--primary2:#166fe5;--shadow:0 1px 2px rgba(0,0,0,0.1);--radius:8px}
*{box-sizing:border-box}
html,body{margin:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit;text-decoration:none}

/* Landing page styles */
.wrap{max-width:480px;margin:0 auto;padding:24px 20px;min-height:100vh;display:flex;flex-direction:column;background:#fff}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}

/* Header - centered layout */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.top-centered{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:32px;text-align:center;padding-top:40px}
.logo-large{width:144px;height:auto}
.brand-sub{color:var(--muted);font-size:15px;font-weight:500;letter-spacing:0.5px}
.brand-free{color:var(--primary);font-size:13px;font-weight:600;margin-top:4px}

/* Brand elements */
.brand{display:flex;align-items:center;gap:10px}
.logo{width:44px;height:44px;border-radius:12px}
.logo-sm{width:34px;height:34px;border-radius:10px}
.brand-title{font-weight:950;font-size:16px}

/* Actions/buttons */
.actions{display:flex;gap:10px;margin-top:8px}
.btn{border:none;background:#e4e6eb;padding:10px 16px;border-radius:6px;font-weight:600;font-size:15px;cursor:pointer;transition:background 0.2s}
.btn:hover{background:#d8dadf}
.btn.primary{background:var(--primary);color:#fff}
.btn.primary:hover{background:var(--primary2)}

/* Hero section */
.hero{text-align:center;flex:1}
.hero h1{margin:0 0 12px 0;font-size:24px;line-height:1.3;font-weight:800}
.hero p{color:var(--muted);margin:0 0 20px 0;line-height:1.5;font-size:16px}
.note{margin-top:16px;color:var(--muted);font-size:13px;padding:12px;background:var(--bg);border-radius:12px}

/* Footer */
.footer{padding:20px;color:var(--muted);font-size:12px;text-align:center;margin-top:auto;display:flex;flex-direction:column;gap:8px;align-items:center}
.footer-link{color:var(--primary);text-decoration:none;font-size:13px}.footer-link:hover{text-decoration:underline}
.footer-instagram{display:inline-flex;opacity:0.8;transition:opacity 0.2s,transform 0.2s}.footer-instagram:hover{opacity:1;transform:scale(1.1)}
.visitor-stats{font-size:14px;font-weight:500;color:var(--text);opacity:0.8}
.visitor-stats .live-number{font-family:'SF Mono',Monaco,'Cascadia Code',monospace;font-weight:700;color:var(--primary);letter-spacing:0.5px}

/* App shell styles */
.app{max-width:500px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column}
body.has-sidebar .app{max-width:680px}
.appbar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,0.1);position:sticky;top:0;z-index:50}
.appbar-left{display:flex;align-items:center;gap:8px;flex:1;min-width:0;overflow:hidden}
.appbar-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
.app-title{font-weight:700;font-size:18px;color:var(--primary);white-space:nowrap}
.app-sub{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.chip{background:#e4e6eb;border:none;padding:8px 12px;border-radius:20px;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.chip:hover{background:#d8dadf}
.content{padding:16px;display:flex;flex-direction:column;gap:16px;padding-bottom:90px}

/* Forms */
label{display:block;font-weight:600;font-size:13px;margin:8px 0 6px;color:var(--muted)}
input,textarea{width:100%;border:1px solid var(--line);border-radius:6px;padding:12px;font-size:15px;background:#f0f2f5}
input:focus,textarea:focus{outline:none;border-color:var(--primary);background:#fff}
textarea{resize:vertical;min-height:100px}
.sep{border:none;border-top:1px solid var(--line);margin:12px 0}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.h2{font-weight:700;font-size:17px}
.muted{color:var(--muted);font-size:13px}

/* Grid layout */
.grid2{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.grid2{grid-template-columns:1fr 1fr}}

/* Boxes and lists */
.box{border-radius:8px;padding:16px;background:#fff;box-shadow:var(--shadow)}
.box-title{font-weight:600;margin-bottom:12px;font-size:15px}
.list{display:flex;flex-direction:column;gap:8px}
.item{border-radius:8px;padding:12px;background:#fff;display:flex;justify-content:space-between;gap:10px;align-items:flex-start;box-shadow:var(--shadow)}
.item .t{font-weight:600}
.item .s{color:var(--muted);font-size:13px;margin-top:2px}
.badge{font-size:12px;font-weight:600;padding:4px 8px;border-radius:4px;background:rgba(24,119,242,0.1);color:var(--primary)}
.badge.gray{background:#e4e6eb;color:var(--muted)}
.item.selected{outline:2px solid var(--primary)}

/* Bottom nav */
.bottom{position:fixed;left:0;right:0;bottom:0;background:#fff;box-shadow:0 -1px 2px rgba(0,0,0,0.1);display:flex;padding:6px 8px;padding-bottom:max(6px, env(safe-area-inset-bottom))}
.navbtn{flex:1;border:none;background:transparent;padding:8px 4px;border-radius:8px;font-weight:600;cursor:pointer;font-size:12px;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px}
.navbtn svg{width:24px;height:24px}
.navbtn.active{color:var(--primary);background:rgba(24,119,242,0.1)}
.navbtn.primary-nav{color:#00a884;font-weight:700}
.navbtn.primary-nav.active{background:rgba(0,168,132,0.15);color:#00a884}

/* Toast */
.toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#323232;color:#fff;padding:12px 20px;border-radius:8px;display:none;max-width:90vw;z-index:9999;font-size:14px}

/* Responsive adjustments for larger screens */
@media(min-width:600px){
  .wrap{max-width:560px;padding:40px 24px}
  .top-centered{padding-top:60px;gap:20px}
  .logo-large{width:168px}
  .brand-sub{font-size:17px}
  .hero h1{font-size:28px}
  .hero p{font-size:17px}
  .btn{padding:16px 36px;font-size:17px}
}

/* Motivation card styles */
.motivation-card{background:#fff;box-shadow:var(--shadow);border-radius:var(--radius);text-align:center;padding:16px}
.motivation-text{font-size:15px;line-height:1.5;font-weight:500;margin-bottom:8px;color:var(--text)}
.principle-text{font-size:13px;color:var(--muted);font-style:italic}

/* Calendar styles */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:12px}
.calendar-day{border:1px solid var(--line);border-radius:10px;padding:8px 4px;text-align:center;cursor:pointer;min-height:60px;background:#fff}
.calendar-day:hover{background:var(--bg)}
.calendar-day.today{border-color:var(--primary);border-width:2px}
.calendar-day.selected{background:var(--primary);color:#fff}
.calendar-day .day-num{font-weight:700;font-size:14px}
.calendar-day .day-name{font-size:10px;color:var(--muted);margin-bottom:4px}
.calendar-day.selected .day-name{color:#fff;opacity:0.8}
.calendar-day .day-count{font-size:11px;margin-top:4px;color:var(--primary)}
.calendar-day.selected .day-count{color:#fff}

/* Live Coach chat styles */
/* WhatsApp-style Coach Chat */
.coach-card{display:flex;flex-direction:column;height:calc(100vh - 120px);max-height:800px;background:#0b141a;border-radius:0;box-shadow:none;padding:0;position:relative}
.coach-header{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#1f2c34;border-bottom:1px solid #2a3942}
.coach-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#00a884,#25d366);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px}
.coach-info{flex:1}
.coach-name{font-weight:600;color:#e9edef;font-size:16px}
.coach-status{font-size:12px;color:#8696a0}
.chat-messages{flex:1;overflow-y:auto;padding:12px 16px;display:flex;flex-direction:column;gap:2px;min-height:200px;background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");background-color:#0b141a}
.chat-date-separator{text-align:center;margin:12px 0}
.chat-date-separator span{background:#1f2c34;color:#8696a0;padding:5px 12px;border-radius:8px;font-size:12px}
.chat-message{max-width:75%;padding:6px 8px 4px;border-radius:8px;font-size:14.5px;line-height:1.35;word-wrap:break-word;position:relative;margin-bottom:2px}
.chat-message.user{align-self:flex-end;background:#005c4b;color:#e9edef;border-radius:8px 0 8px 8px;margin-left:auto}
.chat-message.assistant{align-self:flex-start;background:#1f2c34;color:#e9edef;border-radius:0 8px 8px 8px}
.chat-message .msg-text{display:block;margin-bottom:2px}
.chat-message .msg-time{font-size:11px;color:#8696a0;display:flex;justify-content:flex-end;gap:4px;margin-top:2px}
.chat-message.user .msg-time{color:rgba(255,255,255,0.6)}
/* Message images */
.msg-images{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:6px}
.msg-image{max-width:200px;max-height:200px;border-radius:8px;object-fit:cover;cursor:pointer}
.msg-image:hover{opacity:0.9}
/* Attachment preview */
.attachment-preview{display:flex;gap:8px;padding:8px 12px;background:#1f2c34;border-top:1px solid #2a3942;flex-wrap:wrap}
.attachment-item{position:relative;width:60px;height:60px}
.attachment-item img{width:100%;height:100%;object-fit:cover;border-radius:6px}
.attachment-remove{position:absolute;top:-6px;right:-6px;width:20px;height:20px;border-radius:50%;background:#dc2626;color:#fff;border:none;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
.chat-composer{display:flex;gap:8px;padding:10px 16px;background:#1f2c34;align-items:flex-end}
.chat-composer-actions{display:flex;gap:4px}
.chat-composer-btn{width:40px;height:40px;border:none;background:transparent;color:#8696a0;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:color 0.2s}
.chat-composer-btn:hover{color:#00a884}
.chat-composer-input{flex:1;display:flex;align-items:center;background:#2a3942;border-radius:8px;padding:0 12px}
.chat-composer-input textarea{flex:1;min-height:40px;max-height:120px;resize:none;background:transparent;border:none;color:#e9edef;padding:10px 0;font-size:15px;line-height:1.4}
.chat-composer-input textarea::placeholder{color:#8696a0}
.chat-composer-input textarea:focus{outline:none}
.chat-send-btn{width:40px;height:40px;border:none;background:#00a884;color:#fff;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background 0.2s}
.chat-send-btn:hover{background:#00c896}
.chat-typing{padding:8px 12px;border-radius:8px;background:#1f2c34;align-self:flex-start;color:#8696a0;font-style:italic;font-size:13px}
.chat-actions{align-self:flex-start;margin-top:4px;margin-left:0}
.action-badge{display:flex;flex-direction:column;gap:4px;padding:8px 12px;background:#0d3b29;border-radius:8px;border-left:3px solid #00a884;font-size:13px}
.action-item{color:#4ade80;display:block}
.chat-empty{text-align:center;padding:60px 20px;color:#8696a0}
.chat-empty-title{font-size:18px;font-weight:500;margin-bottom:12px;color:#e9edef}
.quick-prompts{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:20px}
.quick-prompt{border:1px solid #2a3942;background:#1f2c34;color:#e9edef;padding:10px 16px;border-radius:20px;font-size:14px;cursor:pointer;transition:all 0.2s}
.quick-prompt:hover{background:#2a3942;border-color:#00a884}
/* Emoji Picker */
.emoji-picker{position:absolute;bottom:70px;left:16px;background:#1f2c34;border:1px solid #2a3942;border-radius:12px;padding:12px;display:none;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,0.3)}
.emoji-picker.show{display:block}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
.emoji-btn{width:32px;height:32px;border:none;background:transparent;font-size:20px;cursor:pointer;border-radius:6px;transition:background 0.2s}
.emoji-btn:hover{background:#2a3942}
/* Attachment preview */
.attachment-preview{display:flex;gap:8px;padding:8px 16px;background:#1f2c34;flex-wrap:wrap}
.attachment-item{position:relative;width:60px;height:60px;border-radius:8px;overflow:hidden}
.attachment-item img{width:100%;height:100%;object-fit:cover}
.attachment-remove{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:#ef4444;color:#fff;border:none;border-radius:50%;font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:center}

/* Safe area for iPhone notch/home indicator */
@supports(padding: max(0px)) {
  .wrap{padding-bottom:max(24px, env(safe-area-inset-bottom))}
  .bottom{padding-bottom:max(12px, env(safe-area-inset-bottom))}
}
/* Appbar and sidebar safe areas only when sidebar is shown (logged in state) */
@supports(padding: max(0px)) {
  body.has-sidebar .appbar{padding-top:max(10px, env(safe-area-inset-top))}
  body.has-sidebar .sidebar-header{padding-top:max(12px, env(safe-area-inset-top))}
  body.has-sidebar .sidebar-toggle{top:max(8px, calc(env(safe-area-inset-top) + 4px))}
}

/* Landing page - new positioning styles */
.brand-title{font-weight:950;font-size:28px;color:var(--text)}
.brand-tagline{font-size:18px;color:var(--primary);font-weight:600;letter-spacing:0.3px}
.hero-sub{font-size:15px;color:var(--muted);margin-top:8px}

/* Pillars section */
/* Section Titles */
.section-title{text-align:center;font-size:22px;font-weight:800;margin:0 0 20px 0;color:var(--text)}

/* Benefits Section */
.benefits-section{margin:32px 0}
.benefits-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:500px){.benefits-grid{grid-template-columns:1fr 1fr}}
@media(min-width:768px){.benefits-grid{grid-template-columns:1fr 1fr 1fr}}
.benefit-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;transition:all 0.2s}
.benefit-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.benefit-icon{width:56px;height:56px;margin:0 auto 12px;background:linear-gradient(135deg,#eef2ff,#e0e7ff);border-radius:50%;display:flex;align-items:center;justify-content:center;color:#4f46e5}
.benefit-card h3{margin:0 0 8px 0;font-size:16px;font-weight:700}
.benefit-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}

/* Pillars */
.pillars{display:flex;flex-direction:column;gap:12px;margin:24px 0}
.pillar-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;gap:12px;align-items:flex-start}
.pillar-icon{font-weight:950;font-size:18px;color:var(--primary);min-width:32px}
.pillar-card h3{margin:0 0 6px 0;font-size:15px;font-weight:700}
.pillar-card p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}

/* Results Section */
.results-section{text-align:center;margin:24px 0;background:linear-gradient(135deg,#1a1a2e,#2d2d4a);color:#fff}
.results-section h2{margin:0 0 16px 0;font-size:20px;font-weight:800}
.results-question{font-size:24px;font-weight:900;color:#a5b4fc;margin:0 0 16px 0;font-style:italic}
.results-section p{color:rgba(255,255,255,0.8);margin:0 0 20px 0;line-height:1.5}

/* CTA section */
.cta-section{text-align:center;margin:24px 0}
.cta-section h2{margin:0 0 12px 0;font-size:20px;font-weight:800}
.cta-section p{color:var(--muted);margin:0 0 20px 0;line-height:1.5}

/* Trust section */
.trust-section{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;padding:24px;color:var(--muted);font-size:13px;background:var(--bg);border-radius:var(--radius);margin:24px 0}

/* Student FREE Section */
.student-section{text-align:center;margin:24px 0;padding:24px;background:linear-gradient(135deg,#ecfdf5 0%,#d1fae5 100%);border:2px solid #10b981;position:relative;overflow:visible}
.student-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:6px 20px;border-radius:16px;font-size:13px;font-weight:800;letter-spacing:0.5px;box-shadow:0 2px 8px rgba(16,185,129,0.3)}
.student-title{margin:20px 0 8px 0;font-size:22px;font-weight:800;color:#047857}
.student-desc{margin:0 0 20px 0;font-size:15px;color:#065f46;line-height:1.5}
.student-btn{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,#10b981,#059669);border:none}
.student-btn:hover{background:linear-gradient(135deg,#059669,#047857)}
.student-form{margin-top:20px}
.student-form input{margin-bottom:12px}
.student-submit-btn{width:100%;background:linear-gradient(135deg,#10b981,#059669)}
.student-submit-btn:hover{background:linear-gradient(135deg,#059669,#047857)}
.student-result{margin-top:20px;padding:16px;background:#fff;border-radius:8px}
.student-success{display:flex;align-items:center;justify-content:center;gap:8px;color:#059669;font-weight:600;margin-bottom:12px}
.student-success svg{stroke:#059669}
.student-instructions{color:#065f46;font-size:14px;margin:0}
.student-error{margin-top:12px;padding:12px;background:#fee2e2;color:#dc2626;border-radius:8px;font-size:14px}
.student-note{margin-top:20px;padding:16px;background:rgba(255,255,255,0.7);border-radius:8px;font-size:13px;color:#065f46;line-height:1.5;text-align:left}
.student-note strong{color:#047857}

/* Country Checker */
.country-checker{text-align:center;margin:24px 0;padding:24px}
.country-title{margin:0 0 8px 0;font-size:18px;font-weight:700;color:var(--text)}
.country-desc{margin:0 0 20px 0;font-size:14px;color:var(--muted);line-height:1.5}
.country-select-wrapper{margin-bottom:16px}
.country-select{width:100%;max-width:320px;padding:12px 16px;border:1px solid var(--line);border-radius:6px;font-size:15px;background:#f0f2f5;cursor:pointer}
.country-select:focus{outline:none;border-color:var(--primary);background:#fff}
.country-result{margin-top:20px;padding:16px;background:#fff5f5;border-radius:8px;border:1px solid #ffcdd2}
.country-result-icon{color:#e53935;margin-bottom:8px}
.country-result-text{margin:0 0 8px 0;font-size:15px;font-weight:600;color:#c62828}
.country-result-sub{margin:0;font-size:13px;color:var(--muted)}
.trust-item{display:flex;align-items:center;gap:8px}
.trust-item svg{color:var(--primary);flex-shrink:0}

/* Contact section */
.contact-section{text-align:center;padding:32px 20px;margin:24px 0;background:#f0f2f5;border-radius:var(--radius)}
.contact-section h3{margin:0 0 8px;font-size:20px;font-weight:800;color:var(--text)}
.contact-section p{margin:0 0 20px;color:var(--muted);font-size:14px}
.contact-btn{display:inline-flex;align-items:center;gap:8px;background:#fff;border:2px solid var(--primary);color:var(--primary);padding:14px 24px}
.contact-btn:hover{background:var(--primary);color:#fff}
.contact-btn svg{flex-shrink:0}

/* Stats Section */
.stats-section{display:flex;justify-content:space-around;gap:16px;padding:24px 16px;margin:24px 0;background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.stat-item{text-align:center}
.stat-number{font-size:28px;font-weight:800;color:var(--primary)}
.stat-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-top:4px}

/* Testimonials Section */
.testimonials-section{margin:32px 0}
.testimonials-grid{display:flex;flex-direction:column;gap:16px}
.testimonial-card{background:#fff;border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border-left:4px solid var(--primary)}
.testimonial-content{margin-bottom:16px}
.testimonial-content p{margin:0;font-size:14px;line-height:1.6;color:var(--text);font-style:italic}
.testimonial-author{display:flex;flex-direction:column;gap:2px}
.testimonial-name{font-weight:700;font-size:14px;color:var(--text)}
.testimonial-role{font-size:12px;color:var(--muted)}

/* FAQ Section */
.faq-section{margin:32px 0}
.faq-item{background:#fff;border-radius:var(--radius);padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow)}
.faq-question{margin:0 0 8px 0;font-size:15px;font-weight:700;color:var(--text)}
.faq-answer{margin:0;font-size:14px;color:var(--muted);line-height:1.6}

/* Intelligence UI styles */
.insight-card{background:#fff;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.insight-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.insight-label{font-size:12px;text-transform:uppercase;letter-spacing:0.5px;color:var(--muted)}
.insight-value{font-size:24px;font-weight:700;color:var(--primary)}
.insight-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:12px}
.insight-stat{text-align:center;padding:12px;background:#f0f2f5;border-radius:8px}
.insight-stat-label{font-size:11px;color:var(--muted);margin-bottom:4px}
.insight-stat-value{font-size:18px;font-weight:600;color:var(--text)}

/* Signal badges */
.signal-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700}
.signal-badge.signal{background:#dcfce7;color:#166534}
.signal-badge.uncertain{background:#fef9c3;color:#854d0e}
.signal-badge.noise{background:#fee2e2;color:#991b1b}

/* Entry card */
.entry-card{border-radius:var(--radius);padding:16px;margin-bottom:12px;background:#fff;box-shadow:var(--shadow)}
.entry-date{font-size:12px;color:var(--muted);margin-bottom:8px}
.entry-content{margin-bottom:12px}
.entry-section{margin-bottom:10px}
.entry-section-label{font-size:11px;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:4px}
.entry-insight{background:#f0f2f5;border-radius:8px;padding:12px;margin-top:12px}
.entry-insight p{margin:0;font-size:14px;line-height:1.5}

/* Decision memory */
.decision-item{border-left:3px solid var(--primary);padding-left:12px;margin-bottom:12px}
.decision-title{font-weight:700;margin-bottom:4px}
.decision-context{font-size:13px;color:var(--muted)}
.decision-emotional{font-size:12px;color:var(--primary);margin-top:4px}

/* Report card */
.report-card{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:12px;box-shadow:var(--shadow)}
.report-period{font-size:12px;color:var(--muted);margin-bottom:4px}
.report-title{font-size:17px;font-weight:600;margin-bottom:12px;color:var(--text)}
.report-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.report-metric{text-align:center;background:#f0f2f5;padding:12px;border-radius:8px}
.report-metric-value{font-size:22px;font-weight:700;color:var(--primary)}
.report-metric-label{font-size:11px;color:var(--muted)}
.report-summary{margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;line-height:1.6;color:var(--text)}

/* Pricing cards */
.pricing-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-bottom:16px}
@media(min-width:500px){.pricing-grid{grid-template-columns:1fr 1fr}}
.pricing-card{border:2px solid var(--line);border-radius:var(--radius);padding:20px;text-align:center;position:relative;background:#fff;transition:all 0.2s}
.pricing-card.featured{border-color:var(--primary);background:linear-gradient(180deg,#f0f5ff,#fff)}
.pricing-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pricing-badge{position:absolute;top:-10px;right:12px;background:var(--primary);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px}
.pricing-name{font-weight:700;font-size:14px;color:var(--muted);margin-bottom:8px}
.pricing-price{font-size:32px;font-weight:900;margin-bottom:12px}
.pricing-period{font-size:14px;font-weight:400;color:var(--muted)}
.pricing-features{text-align:left;margin-bottom:16px}
.pricing-features div{padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.pricing-features div:last-child{border-bottom:none}
.selected-plan{background:var(--bg);border-radius:12px;padding:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Trust/Privacy Banner */
.trust-banner{background:linear-gradient(90deg,#f0fdf4,#ecfdf5);border:1px solid #86efac;border-radius:12px;padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12px;color:#166534;margin-bottom:4px}
.trust-icon{width:16px;height:16px;flex-shrink:0}

/* Trial Indicator - subtle, non-intrusive */
.trial-indicator{background:linear-gradient(90deg,#fef9c3,#fef08a);border:1px solid #fbbf24;border-radius:8px;padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:12px;color:#92400e;margin-bottom:8px;flex-wrap:wrap}
.trial-indicator svg{flex-shrink:0;opacity:0.7}
.trial-upgrade-btn{background:rgba(146,64,14,0.15);border:none;color:#92400e;font-size:11px;font-weight:600;padding:4px 10px;border-radius:4px;cursor:pointer;margin-left:auto}
.trial-upgrade-btn:hover{background:rgba(146,64,14,0.25)}

/* Guided Form */
.guided-form{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.form-field{display:flex;flex-direction:column;gap:4px}
.field-label{font-weight:700;font-size:14px;color:var(--text)}
.field-hint{font-weight:400;font-size:12px;color:var(--muted)}
.guided-form textarea{min-height:auto;resize:none;padding:10px 12px;font-size:14px}
.toggle-detail-btn{background:none;border:none;color:var(--primary);font-size:13px;font-weight:500;cursor:pointer;padding:4px 0;text-align:left;margin-top:4px}
.toggle-detail-btn:hover{text-decoration:underline}

/* Micro-feedback */
.feedback-card{background:linear-gradient(135deg,#f0f9ff,#e0f2fe);border:1px solid #7dd3fc;border-radius:var(--radius);padding:16px;margin-top:12px;animation:fadeIn 0.3s ease}

/* Achievements & Goals - Playful Design */
.achievements-section{margin-bottom:16px}
.streak-card{display:flex;align-items:center;gap:16px;background:#fff;border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.streak-flame{color:var(--primary)}
.streak-info{display:flex;flex-direction:column}
.streak-count{font-size:32px;font-weight:700;line-height:1;color:var(--primary)}
.streak-label{font-size:12px;color:var(--muted);font-weight:500}
.streak-message{flex:1;text-align:right;font-size:13px;color:var(--muted);font-weight:500}

.motivation-banner{display:flex;align-items:center;gap:12px;background:#fff;border-radius:8px;padding:12px 16px;margin-top:12px;box-shadow:var(--shadow)}
.motivation-icon{color:var(--primary)}
.motivation-text{flex:1;font-size:14px;font-weight:500;color:var(--text)}

.badges-row{display:flex;gap:8px;margin-top:12px;overflow-x:auto;padding:4px 0}
.badge-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 10px;border-radius:12px;background:#fff;border:2px solid var(--line);min-width:70px;transition:all 0.3s ease}
.badge-item span{font-size:10px;font-weight:700;color:var(--muted);text-align:center}
.badge-item svg{color:var(--muted);opacity:0.4}
.badge-item.locked{filter:grayscale(100%);opacity:0.5}
.badge-item.unlocked{background:linear-gradient(135deg,#fef3c7,#fde68a);border-color:#f59e0b;animation:badgeUnlock 0.5s ease}
.badge-item.unlocked svg{color:#f59e0b;opacity:1}
.badge-item.unlocked span{color:#92400e}
@keyframes badgeUnlock{0%{transform:scale(0.8)}50%{transform:scale(1.1)}100%{transform:scale(1)}}

.goals-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px;margin-top:12px}
.goals-header{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:12px;color:var(--primary)}
.goal-item{margin-bottom:10px}
.goal-item:last-child{margin-bottom:0}
.goal-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.goal-name{font-size:13px;color:var(--text)}
.goal-progress{font-size:12px;font-weight:700;color:var(--primary)}
.goal-bar{height:8px;background:#e2e8f0;border-radius:999px;overflow:hidden}
.goal-fill{height:100%;background:linear-gradient(90deg,#2563eb,#3b82f6);border-radius:999px;transition:width 0.5s ease}
.goal-fill.logic{background:linear-gradient(90deg,#16a34a,#22c55e)}
.goal-fill.signal{background:linear-gradient(90deg,#8b5cf6,#a78bfa)}
.goal-fill.complete{background:linear-gradient(90deg,#10b981,#34d399)}
/* Today Header - Immediate guidance */
.today-header{background:#fff;border-radius:var(--radius);padding:16px;margin-bottom:12px;text-align:center;box-shadow:var(--shadow)}
.today-greeting{font-size:22px;font-weight:700;margin-bottom:4px;color:var(--text)}
.today-date{font-size:14px;color:var(--muted);margin-bottom:8px}
.today-focus{font-size:13px;background:#f0f2f5;padding:8px 12px;border-radius:8px;display:inline-block;color:var(--primary)}

/* Coach Prompt - Guides users to use Coach for input */
.coach-prompt{display:flex;align-items:center;gap:12px;padding:16px;background:linear-gradient(135deg,#005c4b22 0%,#00a88433 100%);border:1px dashed #005c4b;border-radius:12px;cursor:pointer;transition:all .2s}
.coach-prompt:hover{background:linear-gradient(135deg,#005c4b33 0%,#00a88444 100%);transform:translateY(-1px)}
.coach-prompt svg{flex-shrink:0;color:#00a884}
.coach-prompt span{color:var(--text);font-size:14px}

/* Compact Date Nav */
.date-nav.compact{padding:8px;gap:6px;margin-bottom:8px}
.date-nav.compact .chip{padding:8px 12px;font-size:13px}
.nav-arrow{min-width:36px;text-align:center}
.today-btn{background:var(--primary);color:#fff;border-color:transparent}

/* Compact AI Advisor */
.ai-advisor.compact{padding:12px;margin-bottom:12px}
.ai-advisor.compact .advisor-header{margin-bottom:8px}
.ai-advisor.compact .advisor-content{font-size:13px}

/* Recent Memory Section */
.memory-section{margin-top:12px;padding:16px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius)}
.memory-header{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:12px;color:var(--muted)}
.recent-timeline{}
.timeline-item{padding:10px 12px;background:var(--bg);border-radius:10px;margin-bottom:8px}
.timeline-item:last-child{margin-bottom:0}
.timeline-date{font-size:11px;font-weight:700;color:var(--primary);margin-bottom:4px}
.timeline-text{font-size:13px;color:var(--text);line-height:1.4}

/* More Menu */
.navbtn.more{min-width:48px;display:flex;align-items:center;justify-content:center}
.more-menu{position:fixed;bottom:70px;right:12px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 20px rgba(0,0,0,0.15);overflow:hidden;z-index:1000}
.more-item{display:block;width:100%;padding:14px 20px;text-align:left;background:none;border:none;font-size:15px;font-weight:600;cursor:pointer;border-bottom:1px solid var(--line)}
.more-item:last-child{border-bottom:none}
.more-item:hover{background:var(--bg)}

.feedback-title{font-weight:700;font-size:15px;color:#0c4a6e;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.feedback-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.feedback-stat{text-align:center;padding:10px;background:#fff;border-radius:12px;border:1px solid #bae6fd}
.feedback-stat-value{font-size:20px;font-weight:800;color:#0369a1}
.feedback-stat-label{font-size:11px;color:#0c4a6e;margin-top:4px}
.feedback-tag{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:600;margin-right:6px;margin-bottom:6px}
.feedback-tag.fear{background:#fef2f2;color:#b91c1c}
.feedback-tag.logic{background:#f0fdf4;color:#15803d}
.feedback-tag.bias{background:#fef3c7;color:#b45309}
@keyframes fadeIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* Diary / Calendar Styles */
.date-nav{display:flex;align-items:center;gap:8px;margin:12px 0;padding:10px;background:var(--bg);border-radius:12px}
.date-display{flex:1;text-align:center;font-weight:700;font-size:15px}
.add-appointment{background:var(--bg);border-radius:12px;padding:14px;margin:12px 0}
.add-appointment input[type="text"]{width:100%;margin-bottom:10px}
.apt-row{display:flex;gap:8px;align-items:center}
.apt-row input[type="time"]{flex:1}
.apt-row select{flex:1;padding:10px 12px;border-radius:var(--radius);border:1px solid var(--line);font-size:14px}
.appointments-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.apt-item{display:flex;align-items:center;gap:12px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:all 0.2s}
.apt-item:hover{box-shadow:var(--shadow)}
.apt-item.completed{opacity:0.6;text-decoration:line-through}
.apt-item.high{border-left:4px solid #dc2626}
.apt-item.medium{border-left:4px solid #f59e0b}
.apt-item.low{border-left:4px solid #22c55e}
.apt-checkbox{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.apt-checkbox.checked{background:var(--primary);border-color:var(--primary)}
.apt-checkbox.checked::after{content:'';width:8px;height:8px;background:#fff;border-radius:50%}
.apt-content{flex:1;min-width:0}
.apt-title{font-weight:600;font-size:14px}
.apt-meta{font-size:12px;color:var(--muted);margin-top:2px;display:flex;gap:10px;flex-wrap:wrap}
.apt-time{display:flex;align-items:center;gap:4px}
.apt-actions{display:flex;gap:6px}
.apt-ai{background:#eef2ff;color:#4f46e5;font-size:11px;padding:4px 8px;border-radius:6px;margin-top:6px}
/* AI Advisor Panel */
.ai-advisor{background:#fff;border-radius:8px;padding:16px;margin:12px 0;box-shadow:var(--shadow)}
.advisor-header{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:12px;color:var(--text)}
.advisor-header svg{color:var(--primary)}
.advisor-refresh{margin-left:auto;background:#e4e6eb;border:none;padding:6px;border-radius:50%}
.advisor-refresh:hover{background:#d8dadf}
.advisor-content{font-size:14px;line-height:1.6;color:var(--text);margin-bottom:12px}
.advisor-loading{display:flex;align-items:center;gap:10px;color:var(--muted)}
.loading-pulse{width:12px;height:12px;background:var(--primary);border-radius:50%;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.5;transform:scale(0.8)}}
.advisor-alerts{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.advisor-alert{background:#fff0f0;border:1px solid #fecaca;border-radius:8px;padding:10px 12px;font-size:13px;display:flex;align-items:center;gap:8px;color:#dc2626}
.advisor-alert::before{content:'';width:6px;height:6px;border-radius:50%;background:#ef4444;flex-shrink:0}
.advisor-tips{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.advisor-tip{background:#f0f2f5;border-radius:8px;padding:10px 12px;font-size:13px;display:flex;align-items:flex-start;gap:8px}
.advisor-tip::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:5px}
.advisor-focus{background:rgba(24,119,242,0.1);border-radius:8px;padding:12px;font-size:14px;font-weight:600;text-align:center;color:var(--primary)}
.advisor-stats{display:flex;gap:12px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.advisor-stat{display:flex;flex-direction:column;align-items:center;flex:1;min-width:60px}
.advisor-stat-value{font-size:20px;font-weight:700;color:var(--primary)}
.advisor-stat-label{font-size:11px;color:var(--muted);text-transform:uppercase}

.ai-suggestions{background:#fff;border-radius:8px;padding:16px;margin:12px 0;box-shadow:var(--shadow)}
.ai-header{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--primary);margin-bottom:10px}
.ai-analysis{font-size:14px;line-height:1.5;margin-bottom:12px;color:var(--text)}
.ai-recommendations{display:flex;flex-direction:column;gap:6px}
.ai-rec{background:#f0f2f5;padding:10px 12px;border-radius:8px;font-size:13px;display:flex;align-items:center;gap:8px}
.ai-rec::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--primary);flex-shrink:0}

/* View Toggle Row - Day vs 30 Days */
.view-toggle-row{display:flex;gap:8px;margin-bottom:12px;padding:4px;background:var(--bg);border-radius:12px}
.view-toggle{flex:1;text-align:center;padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;transition:all 0.2s}
.view-toggle.active{background:var(--primary);color:#fff}
.view-toggle:not(.active){background:transparent;color:var(--text)}
.view-toggle:not(.active):hover{background:rgba(0,0,0,0.05)}

/* Upcoming View */
.upcoming-header{font-weight:700;font-size:16px;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.upcoming-date-group{margin-bottom:16px}
.upcoming-date-header{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--bg);border-radius:10px;margin-bottom:8px;font-weight:600;font-size:14px}
.upcoming-date-header.today{background:linear-gradient(135deg,#dbeafe 0%,#bfdbfe 100%);color:#1e40af}
.upcoming-date-header.tomorrow{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);color:#b45309}
.upcoming-date-label{color:var(--text)}
.upcoming-date-header.today .upcoming-date-label{color:#1e40af}
.upcoming-date-header.tomorrow .upcoming-date-label{color:#b45309}
.upcoming-date-count{background:rgba(0,0,0,0.1);padding:2px 8px;border-radius:10px;font-size:12px}
.appointments-list.upcoming{max-height:60vh;overflow-y:auto}

/* Language Selector */
.lang-selector-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn 0.2s ease}
.lang-selector-modal{background:#fff;border-radius:16px;padding:24px;max-width:360px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,0.2)}
.lang-selector-modal h3{margin:0 0 16px 0;font-size:18px;font-weight:700;text-align:center}
.lang-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.lang-option{padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all 0.2s;text-align:center}
.lang-option:hover{background:#f1f5f9;border-color:#cbd5e1}
.lang-option.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.lang-close{width:100%}

/* Trial Section Styles */
.trial-section{text-align:center;background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);border:2px solid #0ea5e9;position:relative;overflow:visible}
.trial-badge{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f97316 0%,#ea580c 100%);color:#fff;font-size:11px;font-weight:800;padding:6px 16px;border-radius:999px;letter-spacing:0.5px}
.trial-title{color:#0369a1;font-size:22px;font-weight:800;margin:16px 0 8px}
.trial-desc{color:#64748b;font-size:14px;margin-bottom:20px}
.trial-form{display:flex;flex-direction:column;gap:12px}
.trial-form .form-row{display:flex;gap:12px}
.trial-form .form-row input{flex:1}
.trial-form input{padding:14px 16px;border:1px solid #cbd5e1;border-radius:12px;font-size:15px}
.trial-form input:focus{outline:none;border-color:#0ea5e9;box-shadow:0 0 0 3px rgba(14,165,233,0.1)}
.trial-btn{width:100%;padding:16px;font-size:16px;border-radius:12px}
.trial-result{display:flex;flex-direction:column;gap:16px;align-items:center}
.trial-success{display:flex;align-items:center;gap:8px;color:#059669;font-weight:600}
.trial-success svg{color:#059669}
.trial-code-box{background:#fff;border:2px dashed #0ea5e9;border-radius:12px;padding:16px 24px;display:flex;flex-direction:column;gap:4px}
.trial-code-label{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:1px}
.trial-code-value{font-size:28px;font-weight:900;color:#0369a1;letter-spacing:4px;font-family:ui-monospace,monospace}
.trial-instructions{font-size:13px;color:#64748b}
.trial-error{background:#fef2f2;border:1px solid #fecaca;border-radius:10px;padding:12px;color:#dc2626;font-size:14px}

/* Trial login in app */
.trial-login-section{margin-top:12px;padding-top:16px;border-top:1px solid var(--line)}
.trial-login-title{font-size:13px;color:var(--muted);margin-bottom:10px;text-align:center}
.trial-login-row{display:flex;gap:8px}
.trial-login-row input{flex:1;text-transform:uppercase;letter-spacing:2px;font-family:ui-monospace,monospace;font-weight:700}

/* Daily Metrics Check-in */
.metrics-section{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 16px;margin-bottom:8px}
.metrics-header{display:flex;align-items:center;gap:10px;cursor:pointer;font-weight:700;font-size:14px}
.metrics-header svg{color:var(--primary)}
.metrics-toggle{margin-left:auto;font-size:18px;font-weight:700;color:var(--muted);width:24px;text-align:center}
.metrics-panel{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.metrics-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:16px}
@media(min-width:600px){.metrics-grid{grid-template-columns:repeat(3,1fr)}}
.metric-input{display:flex;flex-direction:column;gap:4px}
.metric-input label{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px}
.metric-input input[type="number"]{padding:10px 12px;font-size:15px;border-radius:10px;width:100%}
.metric-input input[type="range"]{width:100%;height:6px;border-radius:3px;-webkit-appearance:none;appearance:none;background:#e2e8f0;cursor:pointer}
.metric-input input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer}
.range-value{font-size:18px;font-weight:800;color:var(--primary);text-align:center}
.metrics-more-toggle{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;margin:8px 0;padding:8px 0;border-top:1px dashed var(--line)}
.metrics-more-toggle:hover{color:var(--primary)}
.metrics-more-toggle span:last-child{margin-left:auto;font-weight:700}

/* Routine Planner */
.routine-period{margin-bottom:16px}
.period-header{font-weight:800;font-size:14px;color:var(--primary);text-transform:uppercase;letter-spacing:0.5px;padding:8px 0;border-bottom:2px solid var(--primary);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.routine-items{display:flex;flex-direction:column;gap:8px}
.routine-item{display:flex;align-items:flex-start;gap:12px;background:#f8fafc;border:1px solid var(--line);border-radius:12px;padding:12px;transition:all 0.2s}
.routine-item:hover{background:#f1f5f9;border-color:#cbd5e1}
.routine-time{font-weight:800;color:var(--primary);min-width:50px;font-size:14px}
.routine-content{flex:1}
.routine-title{font-weight:700;font-size:14px;margin-bottom:2px}
.routine-desc{font-size:12px;color:var(--muted);line-height:1.4}
.routine-schedule{font-size:11px;color:var(--muted);margin-top:4px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.schedule-dates{opacity:0.8}
.schedule-status{padding:2px 6px;border-radius:4px;font-weight:600}
.schedule-status.active{background:#dcfce7;color:#16a34a}
.schedule-status.upcoming{background:#dbeafe;color:#2563eb}
.schedule-status.ended{background:#f3f4f6;color:var(--muted)}
.form-hint{font-size:11px;margin-top:4px}
.routine-actions{display:flex;gap:4px}
.routine-actions button{border:none;background:transparent;cursor:pointer;padding:6px;border-radius:6px;color:var(--muted);transition:all 0.2s}
.routine-actions button:hover{background:#e2e8f0;color:var(--text)}
.routine-actions button.delete:hover{background:#fee2e2;color:#dc2626}

/* Appointments in Routine View */
.routine-item.appointment-in-routine{background:linear-gradient(135deg,#eff6ff,#dbeafe);border-color:#93c5fd}
.routine-item.appointment-in-routine:hover{background:linear-gradient(135deg,#dbeafe,#bfdbfe)}
.routine-item.appointment-in-routine.completed{opacity:0.6}
.routine-item.appointment-in-routine.completed .routine-title{text-decoration:line-through}
.appointment-tag{background:#3b82f6;color:#fff;font-size:10px;padding:2px 8px;border-radius:10px;font-weight:600}
.priority-badge{font-size:10px;padding:2px 6px;border-radius:4px;font-weight:600;margin-left:6px}
.priority-badge.high{background:#fecaca;color:#dc2626}
.priority-badge.medium{background:#fef3c7;color:#d97706}
.priority-badge.low{background:#d1fae5;color:#059669}

/* Modal */
.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px}
.modal-content{background:#fff;border-radius:16px;padding:24px;max-width:400px;width:100%;max-height:80vh;overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,0.2)}
.modal-content h3{margin:0 0 20px 0;font-weight:800}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:15px}
.form-group select{background:#fff;cursor:pointer}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}

/* Unified Today View */
.today-hero{text-align:center;padding:24px 0 16px}
.today-greeting{font-size:28px;font-weight:800;color:var(--text)}
.today-date{font-size:14px;color:var(--muted);margin-top:4px}

.quick-capture-card{background:linear-gradient(135deg,#f8fafc,#eef2ff);border:1px solid var(--line);border-radius:16px;padding:16px;margin-bottom:16px}
.quick-capture-input{display:flex;gap:10px}
.quick-capture-input input{flex:1;border:none;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,0.06);border-radius:12px;padding:14px 16px;font-size:16px}
.quick-capture-btn{min-width:50px;padding:14px;border-radius:12px;display:flex;align-items:center;justify-content:center}
.quick-capture-hint{font-size:12px;color:var(--muted);text-align:center;margin-top:10px}

.section-title{font-weight:800;font-size:14px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:10px}

.guidance-section{margin-bottom:16px}
.guidance-list{display:flex;flex-direction:column;gap:8px}
.guidance-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;transition:all 0.2s}
.guidance-item:hover{background:#f8fafc;border-color:#cbd5e1}
.guidance-item.high{border-left:4px solid #ef4444}
.guidance-item.medium{border-left:4px solid #f59e0b}
.guidance-item.low{border-left:4px solid #10b981}
.guidance-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.guidance-icon.action{background:#dbeafe;color:#2563eb}
.guidance-icon.reminder{background:#fef3c7;color:#d97706}
.guidance-icon.insight{background:#ede9fe;color:#7c3aed}
.guidance-icon.tip{background:#d1fae5;color:#059669}
.guidance-text{flex:1;font-size:14px;font-weight:500}

.timeline-section{margin-bottom:16px}
.timeline-list{display:flex;flex-direction:column;gap:8px}
.timeline-item{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.timeline-time{font-weight:800;color:var(--primary);min-width:50px;font-size:13px}
.timeline-content{flex:1}
.timeline-title{font-weight:600;font-size:14px}
.timeline-type{font-size:11px;color:var(--muted);text-transform:uppercase}
.timeline-item.completed{opacity:0.6;text-decoration:line-through}
.timeline-item.appointment{border-left:3px solid var(--primary)}
.timeline-item.routine{border-left:3px solid #10b981}

.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:16px}
.stat-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 8px;text-align:center;cursor:pointer;transition:all 0.2s}
.stat-card:hover{background:#f8fafc;border-color:#cbd5e1}
.stat-value{font-size:22px;font-weight:800;color:var(--primary)}
.stat-label{font-size:11px;color:var(--muted);text-transform:uppercase;margin-top:2px}

.insights-preview{margin-bottom:16px}
.insights-preview-list{display:flex;flex-direction:column;gap:8px}
.insight-preview-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.insight-preview-date{font-size:11px;color:var(--muted);margin-bottom:4px}
.insight-preview-text{font-size:13px;line-height:1.5}
.insight-signal{display:inline-block;padding:2px 8px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;margin-right:6px}
.insight-signal.signal{background:#d1fae5;color:#059669}
.insight-signal.uncertain{background:#fef3c7;color:#d97706}
.insight-signal.noise{background:#fee2e2;color:#dc2626}

.quick-actions{display:flex;gap:8px;justify-content:center;padding-bottom:20px}
.quick-action-btn{display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 18px;cursor:pointer;transition:all 0.2s;font-size:12px;font-weight:600;color:var(--muted);min-width:90px}
.quick-action-btn:hover{background:#f8fafc;border-color:#cbd5e1;color:var(--text)}
.quick-action-btn svg{color:var(--primary)}

/* Loading state */
.loading-pulse{animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}

/* Pricing Section */
.pricing-section{margin:32px 0;padding:24px 0}
.pricing-subtitle{text-align:center;color:var(--muted);margin-bottom:24px;font-size:15px}
.pricing-grid{display:grid;gap:16px}
@media(min-width:600px){.pricing-grid{grid-template-columns:repeat(2,1fr)}}
.pricing-card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);position:relative;border:1px solid var(--line)}
.pricing-card.featured{border:2px solid var(--primary)}
.pricing-card.government{background:linear-gradient(135deg,#f0f9ff 0%,#e0f2fe 100%);grid-column:1/-1}
.gov-subtitle{text-align:center;font-size:14px;color:#0369a1;margin-bottom:20px;font-style:italic}
.gov-section{margin-bottom:20px;padding:16px;background:rgba(255,255,255,0.7);border-radius:8px}
.gov-section h4{margin:0 0 12px 0;font-size:15px;font-weight:700;color:#0c4a6e;display:flex;align-items:center;gap:8px}
.gov-section h4::before{content:'';width:4px;height:16px;background:var(--primary);border-radius:2px}
.gov-section .pricing-features{margin-bottom:0}
.gov-section .pricing-features li{font-size:13px;padding:6px 0}
.gov-note{text-align:center;font-size:12px;color:var(--muted);margin-bottom:16px;padding:12px;background:rgba(255,255,255,0.5);border-radius:6px}
.pricing-badge{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;padding:4px 12px;border-radius:12px;font-size:11px;font-weight:700}
.pricing-header{text-align:center;margin-bottom:16px}
.pricing-header h3{margin:0 0 12px 0;font-size:18px;font-weight:700}
.pricing-price{display:flex;align-items:baseline;justify-content:center;gap:2px}
.price-amount{font-size:36px;font-weight:800;color:var(--primary)}
.price-currency{font-size:16px;font-weight:600;color:var(--muted)}
.price-period{font-size:14px;color:var(--muted)}
.pricing-users{text-align:center;font-size:13px;color:var(--muted);margin-bottom:12px;font-weight:500}
.pricing-features{list-style:none;padding:0;margin:0 0 16px 0}
.pricing-features li{padding:8px 0;font-size:14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px}
.pricing-features li:last-child{border-bottom:none}
.pricing-features li::before{content:'';width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/contain no-repeat}
.pricing-btn{width:100%;text-align:center;display:block}

/* Left Sidebar Styles - Facebook Style */
.sidebar{position:fixed;left:0;top:0;bottom:0;width:280px;background:#fff;display:none;flex-direction:column;z-index:100;box-shadow:1px 0 2px rgba(0,0,0,0.1)}
body.has-sidebar .sidebar{display:flex !important}
.sidebar-header{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line)}
.sidebar-logo{width:40px;height:40px;border-radius:50%}
.sidebar-brand{font-weight:700;font-size:20px;color:var(--primary)}
.sidebar-nav{flex:1;padding:8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.sidebar-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;border:none;background:transparent;cursor:pointer;font-size:15px;font-weight:500;color:var(--text);text-align:left;width:100%;transition:background 0.15s}
.sidebar-item:hover{background:#f0f2f5}
.sidebar-item.active{background:rgba(24,119,242,0.1);color:var(--primary)}
.sidebar-item.active svg{stroke:var(--primary)}
.sidebar-item svg{flex-shrink:0;color:var(--muted)}
.sidebar-item.primary-nav{font-weight:700;color:#00a884}
.sidebar-item.primary-nav svg{stroke:#00a884}
.sidebar-item.primary-nav.active{background:rgba(0,168,132,0.15);color:#00a884}
.sidebar-section-label{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;padding:8px 12px 4px;letter-spacing:0.5px}
.sidebar-divider{height:1px;background:var(--line);margin:8px}
.sidebar-footer{border-top:1px solid var(--line);padding:12px;padding-bottom:max(12px, env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.language-selector{width:100%}
.lang-dropdown{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--bg);font-size:14px;color:var(--text);cursor:pointer;-webkit-appearance:none;appearance:none}
.lang-dropdown:focus{outline:none;border-color:var(--primary)}
.sidebar-user-row{display:flex;align-items:center;gap:10px;padding:8px;background:var(--bg);border-radius:10px;overflow:hidden}
.sidebar-user{flex:1;min-width:0;overflow:hidden}
.sidebar-user-name{font-weight:600;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-user-email{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-logout{width:40px;height:40px;min-width:40px;border-radius:10px;border:none;background:#fee2e2;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#dc2626;transition:all 0.15s;flex-shrink:0}
.sidebar-logout:hover,.sidebar-logout:active{background:#fecaca;color:#b91c1c;transform:scale(0.96)}

/* Sidebar toggle for mobile */
.sidebar-toggle{position:fixed;top:8px;left:8px;z-index:101;width:40px;height:40px;border-radius:50%;border:none;background:#fff;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.sidebar-toggle:hover{background:#f0f2f5}

/* App layout with sidebar - Desktop */
@media(min-width:769px){
  body.has-sidebar .app{margin-left:280px;max-width:none}
  body.has-sidebar .appbar{display:none}
  body.has-sidebar .content{padding:24px;padding-bottom:24px}
  .sidebar-toggle{display:none !important}
  body.has-sidebar #bottomNav{display:none !important}
}

/* Responsive: Mobile sidebar and bottom nav */
@media(max-width:768px){
  body.has-sidebar .sidebar{display:flex;transform:translateX(-100%);transition:transform 0.25s ease;width:85vw;max-width:300px}
  body.has-sidebar .sidebar.open{transform:translateX(0);box-shadow:4px 0 20px rgba(0,0,0,0.15)}
  body.has-sidebar .app{margin-left:0}
  body.has-sidebar .appbar{display:flex;padding-left:52px}
  body.has-sidebar .sidebar-toggle{display:flex}
  .sidebar-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:99;opacity:0;visibility:hidden;transition:all 0.25s}
  .sidebar-overlay.visible{opacity:1;visibility:visible}
  
  /* Mobile appbar improvements */
  .appbar{padding:8px 10px}
  .appbar-left{gap:6px}
  .logo-sm{width:30px;height:30px}
  .app-title{font-size:16px}
  .app-sub{font-size:11px;max-width:120px}
  .chip{padding:6px 10px;font-size:12px}
  
  /* Mobile sidebar improvements */
  .sidebar-nav{padding:6px}
  .sidebar-item{padding:12px;font-size:14px;gap:10px;min-height:44px}
  .sidebar-footer{padding:10px;gap:8px}
  .sidebar-user-row{padding:10px}
  .sidebar-logout{width:44px;height:44px;min-width:44px}
  
  /* Coach card mobile improvements */
  .coach-card{height:calc(100vh - 100px);max-height:none}
  .chat-composer{padding:8px 12px;padding-bottom:max(8px, env(safe-area-inset-bottom))}
  .chat-composer-input textarea{min-height:44px;font-size:16px}
  .chat-send-btn{width:44px;height:44px}
}

/* Small phones (iPhone SE, etc.) */
@media(max-width:375px){
  .appbar{padding:6px 8px}
  .logo-sm{width:28px;height:28px}
  .app-title{font-size:15px}
  .app-sub{max-width:100px;font-size:10px}
  .chip{padding:5px 8px;font-size:11px}
  body.has-sidebar .appbar{padding-left:46px}
  .sidebar-toggle{width:36px;height:36px;top:6px;left:6px}
}

/* ============ SUBSCRIPTION MANAGEMENT ============ */
.subscription-status-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
.subscription-plan-badge{display:inline-block;padding:6px 16px;border-radius:20px;font-weight:700;font-size:14px;margin-bottom:16px}
.subscription-plan-badge.active{background:linear-gradient(135deg,#22c55e 0%,#16a34a 100%);color:#fff}
.subscription-plan-badge.trial{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:#fff}
.subscription-plan-badge.expired{background:#ef4444;color:#fff}
.subscription-plan-badge.none{background:#94a3b8;color:#fff}

.subscription-time-remaining{margin-bottom:16px}
.time-label{font-size:13px;color:var(--muted);margin-bottom:4px}
.time-display{font-size:28px;font-weight:800;color:var(--primary)}
.time-display.warning{color:#f59e0b}
.time-display.expired{color:#ef4444;font-size:18px}

.subscription-end-date{font-size:14px;color:var(--muted)}
.subscription-end-date span:last-child{font-weight:600;color:var(--text)}

.renewal-section{border-top:1px solid var(--line);padding-top:20px}
.h3{font-weight:700;font-size:16px;margin-bottom:8px}

.renewal-form{margin-top:16px}
.form-group{margin-bottom:16px}
.form-group label{margin-bottom:8px;display:block;color:var(--text)}
.renewal-select{width:100%;padding:12px;border:1px solid var(--line);border-radius:8px;font-size:15px;background:var(--card);color:var(--text);cursor:pointer}
.renewal-select:focus{outline:none;border-color:var(--primary)}

.renewal-preview{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px;margin-bottom:16px}
.preview-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);color:var(--text);gap:8px;flex-wrap:wrap}
.preview-row:last-child{border-bottom:none}
.preview-row.total{font-weight:700;font-size:16px;margin-top:8px;padding-top:12px;border-top:2px solid var(--line)}
.preview-row .highlight{color:var(--primary);font-weight:700}

/* ============ WEEKLY REFLECTION & PAST SELF ============ */
.reflection-section,.past-self-section{margin:16px 0}
.reflection-card,.past-self-card{background:linear-gradient(135deg,rgba(24,119,242,0.08) 0%,rgba(24,119,242,0.03) 100%);border:1px solid rgba(24,119,242,0.15);border-radius:12px;padding:20px}
.reflection-text,.past-self-text{font-size:15px;line-height:1.6;color:var(--text);margin:0;font-style:italic}
.section-title{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px;margin-bottom:12px;color:var(--text)}
.info-tooltip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--line);color:var(--muted);font-size:11px;font-weight:600;cursor:help}
.info-tooltip:hover{background:var(--primary);color:#fff}

/* Trial Indicator */
.trial-indicator{background:linear-gradient(135deg,#f59e0b 0%,#d97706 100%);color:#fff;padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.trial-indicator svg{width:14px;height:14px}

/* Empty States */
.empty-state{text-align:center;padding:24px;color:var(--muted);background:var(--bg);border-radius:12px}
.empty-state p{margin:0;font-size:14px;line-height:1.5}

/* Metric Explanations */
.metric-explain{font-size:12px;color:var(--muted);margin-top:4px}
.signal-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:12px;font-size:12px;font-weight:600}
.signal-badge.signal{background:rgba(34,197,94,0.15);color:#16a34a}
.signal-badge.noise{background:rgba(156,163,175,0.15);color:#6b7280}
.signal-badge.uncertain{background:rgba(245,158,11,0.15);color:#d97706}

/* Dark mode for new features */
@media(prefers-color-scheme:dark){
  .reflection-card,.past-self-card{background:linear-gradient(135deg,rgba(24,119,242,0.12) 0%,rgba(24,119,242,0.05) 100%);border-color:rgba(24,119,242,0.25)}
  .empty-state{background:rgba(255,255,255,0.05)}
}
.dark .reflection-card,.dark .past-self-card{background:linear-gradient(135deg,rgba(24,119,242,0.12) 0%,rgba(24,119,242,0.05) 100%);border-color:rgba(24,119,242,0.25)}
.dark .empty-state{background:rgba(255,255,255,0.05)}

/* ============ GAMIFICATION & SOCIAL ============ */

/* Level & Points Header */
.gamification-header{background:linear-gradient(135deg,var(--primary) 0%,#1565c0 100%);color:#fff;padding:20px}
.gamification-level-row{display:flex;align-items:center;gap:20px;margin-bottom:16px}
.level-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;width:70px;height:70px;background:rgba(255,255,255,0.2);border-radius:50%;flex-shrink:0}
.level-number{font-size:28px;font-weight:800;line-height:1}
.level-label{font-size:11px;font-weight:600;text-transform:uppercase;opacity:0.9}
.points-info{flex:1}
.points-total{font-size:32px;font-weight:800;line-height:1.1}
.points-label{font-size:12px;font-weight:600;text-transform:uppercase;opacity:0.8;margin-bottom:8px}
.level-progress-bar{height:8px;background:rgba(255,255,255,0.25);border-radius:4px;overflow:hidden}
.level-progress-fill{height:100%;background:#fff;border-radius:4px;transition:width 0.5s ease}
.next-level-info{font-size:12px;opacity:0.8;margin-top:4px}
.stats-row{display:flex;justify-content:space-around;gap:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.2)}
.stat-item{text-align:center}
.stat-value{font-size:22px;font-weight:700}
.stat-label{font-size:11px;text-transform:uppercase;opacity:0.8}

/* Badges Grid */
.badges-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:12px}
.badge-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:16px 12px;border-radius:12px;background:var(--bg);border:2px solid var(--line);transition:all 0.3s ease}
.badge-card.earned{background:linear-gradient(135deg,#fef3c7 0%,#fde68a 100%);border-color:#f59e0b}
.badge-card.locked{opacity:0.5;filter:grayscale(1)}
.badge-icon{width:40px;height:40px;margin-bottom:8px;color:var(--muted)}
.badge-card.earned .badge-icon{color:#f59e0b}
.badge-name{font-weight:700;font-size:12px;color:var(--text);margin-bottom:4px}
.badge-desc{font-size:10px;color:var(--muted);line-height:1.3}
.badge-card.earned .badge-name{color:#92400e}
.badge-card.earned .badge-desc{color:#b45309}

/* Leaderboard */
.leaderboard-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;background:var(--bg);margin-bottom:8px;transition:background 0.2s}
.leaderboard-item.is-me{background:linear-gradient(135deg,rgba(24,119,242,0.1) 0%,rgba(24,119,242,0.05) 100%);border:1px solid rgba(24,119,242,0.2)}
.rank-badge{width:32px;height:32px;border-radius:50%;background:var(--line);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14px;color:var(--text);flex-shrink:0}
.rank-badge.rank-1{background:linear-gradient(135deg,#fbbf24 0%,#f59e0b 100%);color:#fff}
.rank-badge.rank-2{background:linear-gradient(135deg,#9ca3af 0%,#6b7280 100%);color:#fff}
.rank-badge.rank-3{background:linear-gradient(135deg,#d97706 0%,#b45309 100%);color:#fff}
.leaderboard-info{flex:1;min-width:0}
.leaderboard-name{font-weight:600;font-size:15px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.leaderboard-stats{font-size:12px;color:var(--muted)}
.leaderboard-points{font-weight:700;font-size:16px;color:var(--primary);flex-shrink:0}

/* Connections */
.connection-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:10px;background:var(--bg);margin-bottom:8px}
.connection-avatar{width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0}
.connection-info{flex:1;min-width:0}
.connection-name{font-weight:600;font-size:15px;color:var(--text)}
.connection-meta{font-size:12px;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap}
.connection-type{background:var(--line);padding:2px 8px;border-radius:10px;font-size:11px}
.btn-icon{background:none;border:none;padding:8px;cursor:pointer;color:var(--muted);border-radius:50%;transition:all 0.2s}
.btn-icon:hover{background:rgba(0,0,0,0.1);color:var(--text)}

/* Connection Requests */
.connection-request-item{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:10px;background:linear-gradient(135deg,rgba(34,197,94,0.1) 0%,rgba(34,197,94,0.05) 100%);border:1px solid rgba(34,197,94,0.2);margin-bottom:8px}
.request-info{flex:1}
.request-from{font-weight:600;font-size:15px;color:var(--text)}
.badge-sm{font-size:11px;padding:2px 8px;border-radius:10px;background:var(--line);margin-left:8px}
.request-message{font-size:13px;margin-top:4px}
.request-actions{display:flex;gap:8px}

/* Dark mode for gamification */
@media(prefers-color-scheme:dark){
  .gamification-header{background:linear-gradient(135deg,#1565c0 0%,#0d47a1 100%)}
  .badge-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}
  .badge-card.earned{background:linear-gradient(135deg,rgba(245,158,11,0.2) 0%,rgba(245,158,11,0.1) 100%);border-color:rgba(245,158,11,0.4)}
  .leaderboard-item,.connection-item{background:rgba(255,255,255,0.05)}
  .connection-request-item{background:linear-gradient(135deg,rgba(34,197,94,0.15) 0%,rgba(34,197,94,0.08) 100%)}
}
.dark .gamification-header{background:linear-gradient(135deg,#1565c0 0%,#0d47a1 100%)}
.dark .badge-card{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}
.dark .badge-card.earned{background:linear-gradient(135deg,rgba(245,158,11,0.2) 0%,rgba(245,158,11,0.1) 100%);border-color:rgba(245,158,11,0.4)}
.dark .leaderboard-item,.dark .connection-item{background:rgba(255,255,255,0.05)}
.dark .connection-request-item{background:linear-gradient(135deg,rgba(34,197,94,0.15) 0%,rgba(34,197,94,0.08) 100%)}

/* Mobile Gamification/Social Styles */
@media(max-width:768px){
  .gamification-header{padding:16px}
  .gamification-level-row{flex-direction:column;align-items:stretch;gap:16px;text-align:center}
  .level-badge{width:60px;height:60px;margin:0 auto}
  .level-number{font-size:24px}
  .points-info{text-align:center}
  .points-total{font-size:28px}
  .stats-row{flex-wrap:wrap;justify-content:center;gap:16px}
  .stat-item{min-width:60px}
  .stat-value{font-size:18px}
  .badges-grid{grid-template-columns:repeat(auto-fill,minmax(85px,1fr));gap:8px}
  .badge-card{padding:12px 8px}
  .badge-icon{width:32px;height:32px}
  .badge-name{font-size:11px}
  .badge-desc{font-size:9px}
  .leaderboard-item{padding:10px 12px;gap:10px}
  .rank-badge{width:28px;height:28px;font-size:12px}
  .leaderboard-name{font-size:14px}
  .leaderboard-points{font-size:14px}
  .connection-item{padding:10px 12px;gap:10px}
  .connection-avatar{width:36px;height:36px;font-size:16px}
  .connection-name{font-size:14px}
}
@media(max-width:375px){
  .gamification-header{padding:12px}
  .level-badge{width:50px;height:50px}
  .level-number{font-size:20px}
  .level-label{font-size:10px}
  .points-total{font-size:24px}
  .stat-value{font-size:16px}
  .stat-label{font-size:10px}
  .badges-grid{grid-template-columns:repeat(3,1fr)}
}

/* Back to Home Link */
.back-to-home{display:inline-flex;align-items:center;gap:6px;color:var(--primary);font-size:14px;font-weight:500;text-decoration:none;margin-bottom:12px;transition:opacity 0.2s}
.back-to-home:hover{opacity:0.8}

/* Security Section */
.security-section{margin:32px 0;padding:32px 20px;background:linear-gradient(135deg,#0c3d6e 0%,#1565c0 50%,#1877f2 100%);border-radius:16px;text-align:center;color:#fff}
.security-header{margin-bottom:28px}
.security-shield{width:80px;height:80px;background:rgba(255,255,255,0.15);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;color:#60a5fa}
.security-section .section-title{color:#fff;margin:0 0 8px;font-size:26px;font-weight:800;text-align:center;justify-content:center}
.security-subtitle{color:rgba(255,255,255,0.85);font-size:15px;margin:0}
.security-badges{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:24px}
.security-badge{background:rgba(255,255,255,0.1);border-radius:12px;padding:20px 16px;text-align:center;border:1px solid rgba(255,255,255,0.15);transition:transform 0.2s,background 0.2s}
.security-badge:hover{background:rgba(255,255,255,0.15);transform:translateY(-2px)}
.security-badge-icon{width:56px;height:56px;background:rgba(96,165,250,0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:#93c5fd}
.security-badge h4{margin:0 0 6px;font-size:14px;font-weight:700;color:#fff}
.security-badge p{margin:0;font-size:12px;color:rgba(255,255,255,0.75);line-height:1.4}
.security-promise{background:rgba(255,255,255,0.12);border-radius:12px;padding:20px;display:flex;align-items:flex-start;gap:16px;text-align:left;margin-bottom:20px;border:1px solid rgba(96,165,250,0.3)}
.promise-icon{width:44px;height:44px;background:#3b82f6;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff}
.promise-content h4{margin:0 0 6px;font-size:15px;font-weight:700;color:#fff}
.promise-content p{margin:0;font-size:13px;color:rgba(255,255,255,0.85);line-height:1.5}
.security-learn-more{display:inline-flex;align-items:center;gap:8px;color:#93c5fd;font-size:14px;font-weight:600;text-decoration:none;padding:12px 24px;background:rgba(255,255,255,0.1);border-radius:8px;transition:background 0.2s}
.security-learn-more:hover{background:rgba(255,255,255,0.2)}
@media(min-width:600px){
  .security-badges{grid-template-columns:repeat(3,1fr)}
  .security-section .section-title{font-size:30px}
  .security-section{padding:40px 32px}
}