:root{
--bg-deep: #141726;
--bg-panel: #1E2238;
--bg-panel-2: #262B45;
--green: #8B9DC9;
--green-dim: #6B7BA8;
--copper: #C9A876;
--rose: #E8B4B8;
--text-warm: #F5F1E8;
--text-muted: #9098B0;
--line: rgba(245,241,232,0.10);
--header-bg: rgba(20,23,38,0.88);
}
.feature-card[data-panel], .feature-card[data-action]{ cursor:pointer; transition:transform .15s ease, border-color .15s ease; }
.feature-card[data-panel]:hover, .feature-card[data-action]:hover{ transform: translateY(-3px); border-color: var(--green-dim); }
a.feature-card{ display:block; text-decoration:none; color:inherit; cursor:pointer; transition:transform .15s ease, border-color .15s ease; }
a.feature-card:hover{ transform: translateY(-3px); border-color: var(--green-dim); }
#motivation-modal .motivation-quote{ font-size:19px; line-height:1.5; margin:18px 0; font-style:italic; }
#motivation-modal .motivation-btn{
background: var(--green); color:#fff; border:none; border-radius:10px; padding:10px 18px;
font-size:14px; cursor:pointer; font-family:inherit;
}
/* ---- Habit time-block groups ---- */
.habit-group{ margin-bottom:18px; }
.habit-group-title{ font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color: var(--text-muted); margin: 18px 0 8px; }
.habit-group:first-child .habit-group-title{ margin-top:0; }
.dash-item-stability{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.dash-item-stability .stab-track{ flex:1; max-width:120px; height:6px; border-radius:4px; background: rgba(127,160,184,0.18); overflow:hidden; }
.dash-item-stability .stab-fill{ height:100%; border-radius:4px; background: linear-gradient(90deg, var(--green-dim), var(--green)); }
.dash-item-stability .stab-num{ font-size:11px; color: var(--text-muted); white-space:nowrap; }
.habit-goal-chip{ display:inline-block; font-size:11px; color: var(--green); background: rgba(127,160,184,0.14); border-radius:20px; padding:2px 9px; margin-top:5px; }
.habit-select-row{ display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.habit-select-row select{
flex:1; min-width:140px; background: var(--bg-panel-2); color: var(--text-warm); border:1px solid var(--line);
border-radius:10px; padding:9px 10px; font-size:13px; font-family:inherit;
}
.goal-linked-progress{ font-size:11.5px; color: var(--green); margin-top:5px; }
/* ---- AI Coach card ---- */
.ai-coach-card{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.ai-coach-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; flex-wrap:wrap; }
.ai-coach-head h4{ font-size:15px; color: var(--text-warm); margin:0; display:flex; align-items:center; gap:6px; }
.ai-coach-badge{ font-size:10px; font-weight:700; letter-spacing:.03em; background: var(--green); color:#fff; padding:2px 8px; border-radius:20px; }
.ai-coach-box{ background: var(--bg-panel-2); border-radius:14px; padding:16px; position:relative; }
.ai-coach-box.locked{ overflow:hidden; }
.ai-coach-box.locked .ai-coach-text{ filter: blur(5px); user-select:none; }
.ai-coach-lock-overlay{
position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:10px; text-align:center; padding:16px; background: rgba(18,22,27,0.35);
}
.ai-coach-lock-overlay button{
background: var(--green); color:#fff; border:none; border-radius:10px; padding:9px 16px; font-size:13px;
font-weight:600; cursor:pointer; font-family:inherit;
}
.ai-coach-text{ font-size:14px; line-height:1.6; color: var(--text-warm); white-space:pre-wrap; }
.ai-coach-meta{ font-size:11px; color: var(--text-muted); margin-top:10px; }
#ai-coach-timeline{ margin-top:14px; }
#ai-coach-timeline summary{ font-size:12px; color: var(--text-muted); cursor:pointer; user-select:none; }
#ai-coach-timeline summary:hover{ color: var(--green); }
.ai-timeline-item{ padding:10px 0; border-top:1px solid var(--line); }
.ai-timeline-item:first-child{ border-top:none; padding-top:8px; }
.ai-timeline-date{ font-size:10.5px; color: var(--text-muted); margin-bottom:3px; }
.ai-timeline-text{ font-size:13px; line-height:1.5; color: var(--text-warm); }
.ai-chat{ margin-top:16px; background: var(--bg-panel-2); border-radius:14px; padding:14px 16px; }
.ai-chat-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.ai-chat-head h5{ margin:0; font-size:14px; color: var(--text-warm); }
.ai-chat-usage{ font-size:11px; color: var(--text-muted); }
.ai-chat-log{ display:flex; flex-direction:column; gap:8px; max-height:320px; overflow-y:auto; margin-bottom:10px; }
.ai-chat-empty{ font-size:12.5px; color: var(--text-muted); line-height:1.5; }
.ai-chat-msg{ max-width:88%; padding:9px 12px; border-radius:12px; font-size:13.5px; line-height:1.55; white-space:pre-wrap; word-wrap:break-word; }
.ai-chat-msg.user{ align-self:flex-end; background: var(--green); color:#fff; border-bottom-right-radius:4px; }
.ai-chat-msg.coach{ align-self:flex-start; background: rgba(255,255,255,.06); color: var(--text-warm); border-bottom-left-radius:4px; }
.ai-chat-msg.pending{ opacity:.65; font-style:italic; }
.ai-chat-msg.err{ color:#ffb4a8; }
.ai-chat-form{ display:flex; gap:8px; align-items:flex-end; }
.ai-chat-form textarea{ flex:1; resize:none; min-height:44px; max-height:120px; padding:10px 12px; border-radius:10px; border:1px solid var(--line); background: var(--bg-deep); color: var(--text-warm); font:inherit; font-size:14px; }
.ai-chat-form button{ padding:10px 16px; border-radius:10px; border:0; background: var(--green); color:#fff; font-weight:600; cursor:pointer; min-height:44px; }
.ai-chat-form button:disabled{ opacity:.5; cursor:default; }
.ai-chat-lock{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:13px; color: var(--text-warm); padding:10px 12px; border:1px dashed var(--line); border-radius:10px; }
.ai-chat-lock button{ padding:8px 14px; border-radius:10px; border:0; background: var(--green); color:#fff; font-weight:600; cursor:pointer; }
/* ---- Reports card ---- */
.report-card{ margin-top:22px; padding-top:20px; border-top:1px solid var(--line); }
.report-tabs{ display:flex; gap:6px; }
.report-tab{
background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-muted);
border-radius:20px; padding:6px 13px; font-size:12px; cursor:pointer; font-family:inherit;
}
.report-tab.active{ color:#fff; background: var(--green); border-color: var(--green); }
.report-box{ background: var(--bg-panel-2); border-radius:14px; padding:16px; margin-top:12px; }
.report-row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; font-size:13.5px; }
.report-row + .report-row{ border-top:1px solid var(--line); }
.report-locked{ text-align:center; padding:14px 6px; }
.report-locked-text{ font-size:13px; color: var(--text-muted); margin-bottom:12px; }
.report-locked-btn{
padding:9px 20px; border-radius:8px; border:none; background: var(--amber, #e8b84b); color:#0A140E;
font-weight:700; font-size:13px; cursor:pointer; font-family:inherit;
}
.report-row .report-label{ color: var(--text-muted); }
.report-row .report-value{ color: var(--text-warm); font-weight:600; }
.report-pdf-lock{ font-size:12px; color: var(--text-muted); text-align:center; margin-top:8px; }
.report-pdf-lock a{ color: var(--green); cursor:pointer; text-decoration:underline; }
/* ---- Referral card ---- */
.referral-card{ margin-bottom:18px; }
.referral-desc{ font-size:12.5px; color: var(--text-muted); margin: 2px 0 10px; }
.referral-link-row{ display:flex; gap:8px; }
.referral-link-row input{
flex:1; min-width:0; background: var(--bg-panel-2); color: var(--text-warm); border:1px solid var(--line);
border-radius:10px; padding:9px 10px; font-size:12.5px; font-family: 'IBM Plex Mono', monospace;
}
.referral-link-row button{
background: var(--green); color:#fff; border:none; border-radius:10px; padding:9px 16px;
font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.referral-stats{ font-size:12.5px; color: var(--text-muted); margin-top:10px; }
.referral-stats strong{ color: var(--text-warm); }
.group-member-row{ display:flex; align-items:center; gap:10px; padding:9px 0; }
.group-member-row + .group-member-row{ border-top:1px solid var(--line); }
.group-member-name{ flex:1; font-size:13.5px; color: var(--text-warm); }
.group-member-pct-track{ width:70px; height:6px; border-radius:4px; background: rgba(127,160,184,0.18); overflow:hidden; }
.group-member-pct-fill{ height:100%; border-radius:4px; background: linear-gradient(90deg, var(--green-dim), var(--green)); }
.group-member-pct-num{ font-size:11.5px; color: var(--text-muted); width:34px; text-align:right; }
/* ---- Program day tracker (inside learn-modal) ---- */
.program-tracker{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); }
.program-progress-track{ height:8px; border-radius:5px; background: rgba(127,160,184,0.18); overflow:hidden; margin-bottom:14px; }
.program-progress-fill{ height:100%; border-radius:5px; background: linear-gradient(90deg, var(--green-dim), var(--green)); transition: width .3s ease; }
.program-day-row{ display:flex; align-items:flex-start; gap:10px; padding:10px 0; }
.program-day-row + .program-day-row{ border-top:1px solid var(--line); }
.program-day-row input[type="checkbox"]{ margin-top:3px; width:18px; height:18px; accent-color: var(--green); flex-shrink:0; }
.program-day-title{ font-size:13.5px; font-weight:600; color: var(--text-warm); }
.program-day-title.done{ text-decoration: line-through; color: var(--text-muted); }
.program-day-task{ font-size:12.5px; color: var(--text-muted); margin-top:2px; }
.program-login-note{ font-size:12.5px; color: var(--text-muted); text-align:center; padding:10px 0; }
.ai-coach-refresh-btn{
background:none; border:1px solid var(--line); color: var(--text-warm); border-radius:10px; padding:8px 14px;
font-size:12.5px; cursor:pointer; font-family:inherit;
}
.ai-coach-refresh-btn:disabled{ opacity:.5; cursor:default; }
.ai-coach-voice-btn{
flex-shrink:0; background: var(--bg-panel); border:1px solid var(--line);
border-radius:50%; width:32px; height:32px; font-size:14px; cursor:pointer; display:flex;
align-items:center; justify-content:center; color: var(--text-warm);
}
.ai-coach-voice-btn.speaking{ background: var(--green); border-color: var(--green); }
.ai-coach-voice-btn:disabled{ opacity:.4; cursor:default; }
.monthly-stats-box{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.monthly-stats-box h4{ font-size:15px; margin-bottom:12px; color: var(--text-warm); }
.monthly-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(90px,1fr)); gap:10px; }
.monthly-cell{ background: var(--bg-panel-2); border-radius:10px; padding:12px; text-align:center; }
.monthly-cell .num{ font-size:20px; font-weight:700; color: var(--green); }
.monthly-cell .lbl{ font-size:11px; color: var(--text-muted); margin-top:4px; }
.monthly-chart-wrap{ margin-bottom:18px; }
#monthly-chart-svg{ width:100%; height:120px; display:block; overflow:visible; }
.monthly-chart-legend{ display:flex; gap:16px; margin-top:8px; font-size:11px; color: var(--text-muted); }
.monthly-chart-legend span{ display:inline-flex; align-items:center; gap:5px; }
.monthly-chart-legend .dot{ width:8px; height:8px; border-radius:50%; display:inline-block; }
.xp-box{ background: var(--bg-panel-2); border-radius:14px; padding:16px; margin-top:16px; margin-bottom:20px; }
.xp-box-top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.xp-level{ font-size:15px; font-weight:700; color: var(--text-warm); }
.xp-num{ font-size:13px; color: var(--text-muted); }
.xp-bar-track{ height:10px; border-radius:6px; background: rgba(127,160,184,0.15); overflow:hidden; }
.xp-bar-fill{ height:100%; background: linear-gradient(90deg, var(--green-dim), var(--green)); border-radius:6px; transition: width .4s ease; }
.xp-next{ font-size:11px; color: var(--text-muted); margin-top:6px; }
#watch-ad-btn{ background: var(--bg-panel); border:1px solid var(--line); color: var(--text-warm); }
.pricing{ padding: 70px 0; }
.pricing .section-title{ text-align:center; font-size:28px; margin-bottom:8px; }
.pricing .section-sub{ text-align:center; color: var(--text-muted); margin-bottom:36px; }
.pricing-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:22px; max-width:980px; margin:0 auto; }
.price-card{ background: var(--bg-panel); border:1px solid var(--line); border-radius:16px; padding:26px 22px; position:relative; display:flex; flex-direction:column; }
.price-card.featured{ border-color: var(--green); transform: scale(1.03); }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background: var(--green); color:#fff; font-size:11px; padding:4px 12px; border-radius:20px; white-space:nowrap; }
.price-name{ font-size:16px; font-weight:700; color: var(--text-warm); margin-bottom:6px; }
.price-amount{ font-size:30px; font-weight:800; color: var(--text-warm); margin-bottom:18px; }
.price-original{ font-size:16px; font-weight:600; color: var(--text-muted); text-decoration: line-through; margin-left:8px; }
.price-free-note{ display:block; font-size:12px; font-weight:500; color: var(--green); text-decoration:none; margin-top:4px; }
.price-amount span{ font-size:13px; font-weight:400; color: var(--text-muted); }
.price-list{ list-style:none; padding:0; margin:0 0 22px 0; flex:1; }
.price-list li{ font-size:13.5px; color: var(--text-muted); padding:7px 0; padding-left:20px; position:relative; }
.price-list li::before{ content:'✓'; position:absolute; left:0; color: var(--green); font-weight:700; }
.price-btn{ background: var(--green); color:#fff; border:none; border-radius:10px; padding:12px; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; }
.online-dot{
width:8px; height:8px; border-radius:50%; background:#5FD87A; flex-shrink:0;
box-shadow: 0 0 0 0 rgba(95,216,122,0.6);
animation: onlinePulse 2s infinite;
}
@keyframes onlinePulse{
0%{ box-shadow: 0 0 0 0 rgba(95,216,122,0.55); }
70%{ box-shadow: 0 0 0 7px rgba(95,216,122,0); }
100%{ box-shadow: 0 0 0 0 rgba(95,216,122,0); }
}
.member-online-status{ font-size:12px; margin-top:4px; color:var(--text-muted); display:flex; align-items:center; gap:6px; }
.member-online-status .online-dot{ width:7px; height:7px; }
.price-card:not(.featured) .price-btn{ background: var(--bg-panel-2); color: var(--text-warm); border:1px solid var(--line); }
.price-btn.current{ opacity:.6; cursor:default; }
.price-pay-buttons{ display:flex; flex-direction:column; gap:8px; }
.price-btn-alt{ background: var(--bg-panel-2); color: var(--text-warm); border:1px solid var(--line); }
.price-btn-alt:disabled{ opacity:.5; cursor:not-allowed; }
.price-note{ text-align:center; color: var(--text-muted); font-size:12.5px; margin-top:22px; max-width:560px; margin-left:auto; margin-right:auto; }
.price-success-banner{
max-width:560px; margin:28px auto 0; background: linear-gradient(160deg, var(--bg-panel), var(--bg-panel-2));
border:1px solid var(--amber, #e8b84b); border-radius:18px; padding:32px 28px; text-align:center;
animation: priceSuccessPop .4s ease;
}
@keyframes priceSuccessPop{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.price-success-icon{ font-size:38px; margin-bottom:8px; }
.price-success-title{ font-size:22px; font-weight:700; color: var(--text-warm); margin-bottom:6px; }
.price-success-sub{ font-size:14px; color: var(--text-muted); margin-bottom:18px; }
.price-success-list{ list-style:none; padding:0; margin:0 0 22px; text-align:left; display:inline-block; }
.price-success-list li{ font-size:14px; color: var(--text-warm); padding:7px 0; display:flex; align-items:flex-start; gap:8px; }
.price-success-list li::before{ content:'✓'; color: var(--green); font-weight:700; flex-shrink:0; }
.price-success-cta{
padding:12px 28px; border-radius:10px; border:none; background: var(--green); color:#0A140E;
font-weight:700; font-size:14.5px; cursor:pointer; font-family:inherit;
}
/* ===== GARTAL VIDEO LIBRARY ===== */
.videolib-section{ padding: 90px 0; border-top: 1px solid var(--line); }
.videolib-section .section-title{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size: clamp(32px, 5vw, 52px); margin: 8px 0 14px; }
.videolib-section .section-sub{ color: var(--text-muted); max-width:560px; margin-bottom: 28px; font-size:16px; line-height:1.6; }
.videolib-search{ position:relative; max-width:420px; margin-bottom:20px; }
.videolib-search input{
width:100%; background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-warm);
border-radius:12px; padding:11px 14px 11px 38px; font-size:14px; font-family:inherit;
}
.videolib-search input::placeholder{ color: var(--text-muted); }
.videolib-search svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); width:16px; height:16px; color: var(--text-muted); pointer-events:none; }
.videolib-tabs{ display:flex; gap:8px; overflow-x:auto; margin-bottom:16px; padding-bottom:4px; }
.videolib-tab{
background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-muted);
padding:8px 14px; border-radius:20px; font-size:13px; white-space:nowrap; cursor:pointer; font-family:inherit;
flex-shrink:0; transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.videolib-tab.active{
background: var(--green); color:#fff; border-color: var(--green);
box-shadow: 0 0 0 3px rgba(127,160,184,0.35), 0 0 26px rgba(127,160,184,0.8);
}
.videolib-filters{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:26px; }
.videolib-filters select{
background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-warm);
border-radius:20px; padding:7px 12px; font-size:12.5px; font-family:inherit; cursor:pointer;
}
.videolib-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:20px; }
.video-card{
background: var(--bg-panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
cursor:pointer; transition: transform .18s ease, border-color .18s ease;
display:flex; flex-direction:column;
}
.video-card:hover{ border-color: var(--green-dim); transform: translateY(-4px); }
.video-card-cover{ position:relative; width:100%; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--bg-panel-2), var(--bg-deep)); display:flex; align-items:center; justify-content:center; overflow:hidden; }
.video-card-cover img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.video-card-play{
position:relative; z-index:1; width:42px; height:42px; border-radius:50%; background: rgba(255,255,255,0.92);
display:flex; align-items:center; justify-content:center; transition: transform .15s ease;
}
.video-card:hover .video-card-play{ transform: scale(1.08); }
.video-card-play svg{ width:16px; height:16px; margin-left:2px; }
.video-card-badge{ position:absolute; top:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background: rgba(20,23,38,0.72); color:#fff; padding:3px 8px; border-radius:20px; backdrop-filter: blur(2px); }
.video-card-level{ position:absolute; top:8px; right:8px; font-size:10px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; background: var(--copper); color:#241B2B; padding:3px 8px; border-radius:20px; }
.video-card-early{
position:absolute; bottom:8px; left:8px; font-size:10px; font-weight:700; letter-spacing:.02em;
background: var(--amber, #e8b84b); color:#141726; padding:3px 9px; border-radius:20px;
}
.video-card-save{
position:absolute; bottom:8px; right:8px; width:26px; height:26px; border-radius:50%; border:none; cursor:pointer;
background: rgba(18,22,27,0.6); display:flex; align-items:center; justify-content:center; transition: background .15s ease;
}
.video-card-save:hover{ background: rgba(18,22,27,0.85); }
.video-card-save svg{ width:13px; height:13px; }
.video-card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
.video-card-title{ font-size:14.5px; font-weight:700; color: var(--text-warm); line-height:1.35; }
.video-card-meta{ display:flex; align-items:center; gap:12px; font-size:12px; color: var(--text-muted); }
.video-card-meta span{ display:flex; align-items:center; gap:4px; }
.video-card-progress-track{ height:5px; border-radius:4px; background: rgba(127,160,184,0.18); overflow:hidden; margin-top:2px; position:relative; }
.video-card-progress-fill{ height:100%; border-radius:4px; background: linear-gradient(90deg, var(--green-dim), var(--green)); transition: width .3s ease; }
.video-lock{ font-size:10.5px; background: var(--copper); color:#1B2126; padding:2px 7px; border-radius:10px; font-weight:700; white-space:nowrap; }
.video-modal-tag{ font-size:12px; color: var(--green); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.video-modal-player{ width:100%; aspect-ratio:16/9; border-radius:12px; background:#000; margin:14px 0; overflow:hidden; }
.video-modal-player iframe{ width:100%; height:100%; display:block; }
.video-modal-meta{ display:flex; gap:14px; font-size:12.5px; color: var(--text-muted); margin-bottom:10px; }
.video-modal-watchlater{
display:inline-flex; align-items:center; gap:6px; background: var(--bg-panel-2); border:1px solid var(--line);
color: var(--text-warm); border-radius:20px; padding:8px 14px; font-size:13px; cursor:pointer; font-family:inherit; margin-top:6px;
}
.video-modal-watchlater.active{ background: var(--green); border-color: var(--green); color:#fff; }
.learn-section{ padding: 90px 0; border-top: 1px solid var(--line); }
.public-library-section{ padding: 90px 0; border-top: 1px solid var(--line); }
.public-library-cols{ display:grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap:40px; margin-top:20px; }
.public-library-col-title{ font-size:17px; font-weight:700; color: var(--text-warm); margin-bottom:14px; }
.public-library-list{ list-style:none; padding:0; margin:0; }
.public-library-list li{
padding:14px 0; border-bottom:1px solid var(--line); font-size:14.5px; color: var(--text-warm);
}
.public-library-list li strong{ display:block; margin-bottom:2px; }
.public-library-list li span{ color: var(--text-muted); font-size:13px; }
.learn-section .section-title{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size: clamp(32px, 5vw, 52px); margin: 8px 0 14px; }
.learn-section .section-sub{ color: var(--text-muted); max-width:560px; margin-bottom: 36px; font-size:16px; line-height:1.6; }
.learn-tabs{ display:flex; gap:8px; overflow-x:auto; margin-bottom:24px; padding-bottom:4px; }
.learn-tab{
background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-muted);
padding:8px 14px; border-radius:20px; font-size:13px; white-space:nowrap; cursor:pointer; font-family:inherit;
flex-shrink:0; transition: box-shadow .3s ease, background .3s ease, border-color .3s ease;
}
.learn-tab.active{
background: var(--green); color:#fff; border-color: var(--green);
box-shadow: 0 0 0 3px rgba(127,160,184,0.35), 0 0 26px rgba(127,160,184,0.8);
}
.friend-tab{
background: var(--bg-panel-2); border:1px solid var(--line); color: var(--text-muted);
padding:8px 14px; border-radius:20px; font-size:13px; white-space:nowrap; cursor:pointer; font-family:inherit;
}
.friend-tab.active{ background: var(--green); color:#fff; border-color: var(--green); }
.learn-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(230px,1fr)); gap:20px; }
.learn-card{
background: var(--bg-panel); border:1px solid var(--line); border-radius:16px; overflow:hidden;
cursor:pointer; transition: transform .18s ease, border-color .18s ease;
display:flex; flex-direction:column;
}
.learn-card:hover{ border-color: var(--green-dim); transform: translateY(-4px); }
.learn-card-cover{ width:100%; aspect-ratio: 16/10; display:block; object-fit: cover; }
.learn-card-body{ padding:16px 16px 18px; }
.learn-card-title{ font-size:14.5px; font-weight:700; color: var(--text-warm); margin-bottom:6px; display:flex; align-items:center; gap:6px; line-height:1.3; }
.learn-card-summary{ font-size:13px; color: var(--text-muted); line-height:1.5; }
.learn-lock{ font-size:10.5px; background: var(--copper); color:#1B2126; padding:2px 7px; border-radius:10px; font-weight:700; white-space:nowrap; }
.learn-modal-tag{ font-size:12px; color: var(--green); font-weight:700; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.member-head{ display:flex; align-items:center; gap:14px; }
.member-name{ font-size:17px; font-weight:700; color: var(--text-warm); }
.member-level{ font-size:12.5px; color: var(--text-muted); margin-top:2px; }
.member-social{ display:flex; gap:10px; margin-top:14px; flex-wrap:wrap; }
.member-social a{
display:flex; align-items:center; gap:6px; font-size:12.5px; color: var(--text-warm);
background: var(--bg-panel-2); border:1px solid var(--line); border-radius:20px; padding:6px 12px; text-decoration:none;
}
.star-picker{ font-size:26px; letter-spacing:4px; color: var(--line); cursor:pointer; margin-bottom:10px; }
.star-picker span.filled{ color: #E0B23C; }
.review-row{ background: var(--bg-panel-2); border-radius:12px; padding:12px; margin-bottom:8px; }
.review-row .rr-top{ display:flex; justify-content:space-between; font-size:13px; font-weight:600; color: var(--text-warm); }
.review-row .rr-stars{ color:#E0B23C; font-size:12px; }
.review-row .rr-text{ font-size:13px; color: var(--text-muted); margin-top:4px; }
.req-badge{ background:#D98484; color:#fff; border-radius:10px; padding:1px 7px; font-size:10.5px; margin-left:4px; }
.friend-row{ display:flex; align-items:center; justify-content:space-between; background: var(--bg-panel-2); border-radius:12px; padding:10px 14px; margin-bottom:8px; }
.friend-row .fr-name{ font-size:14px; color: var(--text-warm); font-weight:600; }
.friend-row-actions{ display:flex; gap:8px; }
.friend-row-actions button{
border:none; border-radius:8px; padding:7px 12px; font-size:12.5px; cursor:pointer; font-family:inherit;
}
.fr-accept{ background: var(--green); color:#fff; }
.fr-decline{ background: var(--bg-panel); color: var(--text-muted); border:1px solid var(--line) !important; }
.fr-msg{ background: var(--bg-panel); color: var(--text-warm); border:1px solid var(--line) !important; }
.chat-modal-box{ display:flex; flex-direction:column; height:min(70vh, 560px); }
#chat-messages{ flex:1; overflow-y:auto; margin:12px 0; display:flex; flex-direction:column; gap:8px; }
.chat-bubble{ max-width:75%; padding:9px 13px; border-radius:14px; font-size:13.5px; line-height:1.4; }
.chat-bubble.mine{ align-self:flex-end; background: var(--green); color:#fff; border-bottom-right-radius:4px; }
.chat-bubble.theirs{ align-self:flex-start; background: var(--bg-panel-2); color: var(--text-warm); border-bottom-left-radius:4px; }
.chat-input-row{ display:flex; gap:8px; }
.chat-input-row #chat-send-btn{ width:auto; padding:10px 16px; }
*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
background: var(--bg-deep);
color: var(--text-warm);
font-family: 'IBM Plex Sans', sans-serif;
overflow-x:hidden;
}
::selection{ background: var(--green); color: var(--bg-deep); }
a{ color:inherit; }
.wrap{ max-width: 1080px; margin: 0 auto; padding: 0 32px; }
/* ---------- NAV ---------- */
header{
position: fixed; top:0; left:0; right:0; z-index: 50;
background: transparent;
padding: 18px 0;
}
.nav{
max-width:1080px; margin:0 auto; padding:0 32px;
display:flex; align-items:center; justify-content:space-between;
flex-wrap: wrap; gap: 14px; min-height: 44px;
}
.brand{
display:flex; align-items:center; gap:10px;
font-family:'Big Shoulders Display', sans-serif;
font-weight:900; font-size: 24px; letter-spacing: 0.06em;
}
.brand-text{
background: linear-gradient(100deg, var(--text-warm) 0%, var(--text-warm) 45%, var(--green) 70%, var(--copper) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.brand span{ color: inherit; }
.brand-badge{
width:34px; height:34px; border-radius:10px; flex-shrink:0;
background: radial-gradient(circle at 32% 28%, #2A323C 0%, #171C22 55%, #0F1216 100%);
display:flex; align-items:center; justify-content:center;
box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.brand-badge svg{ width:20px; height:20px; }
.nav-right{ display:flex; align-items:center; gap:20px; flex-wrap: wrap; }
.lang-dropdown{ flex-shrink:0; }
.nav-cta{ flex-shrink:0; white-space:nowrap; }
@media (max-width: 480px){
.nav{ padding: 0 20px; }
.nav-right{ width:100%; justify-content: space-between; gap:10px; }
.nav-cta{ padding: 8px 14px; font-size: 11px; }
.lang-current{ padding: 6px 10px; font-size: 10px; }
}
@media (max-width: 380px){
header{ padding-bottom: 56px; }
}
.lang-switch{ display:flex; gap:6px; }
.lang-btn{
font-family:'IBM Plex Mono', monospace;
font-size: 11px; letter-spacing:0.05em;
color: var(--text-muted);
background:none; border:1px solid var(--line);
padding: 6px 10px; border-radius: 999px; cursor:pointer;
transition: all .2s ease;
}
.lang-btn:hover{ border-color: var(--green); color: var(--text-warm); }
.lang-btn.active{ background: var(--green); border-color: var(--green); color: var(--bg-deep); font-weight:600; }
.lang-dropdown{ position: relative; }
.lang-current{
display:flex; align-items:center; gap:6px;
font-family:'IBM Plex Mono', monospace; font-size: 11px; letter-spacing:0.05em;
color: var(--text-warm); background:none; border:1px solid var(--line);
padding: 7px 12px; border-radius: 999px; cursor:pointer;
}
.lang-current:hover{ border-color: var(--green); }
.lang-current svg{ width:12px; height:12px; transition: transform .2s ease; }
.lang-dropdown.open .lang-current svg{ transform: rotate(180deg); }
.lang-menu{
position:absolute; top: calc(100% + 8px); left:0; z-index:60;
background: var(--bg-panel); border:1px solid var(--line); border-radius:10px;
padding:6px; min-width:140px;
opacity:0; visibility:hidden; transform: translateY(-6px);
transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.lang-dropdown.open .lang-menu{ opacity:1; visibility:visible; transform: translateY(0); }
.lang-menu-item{
display:block; width:100%; text-align:left; font-family:'IBM Plex Sans',sans-serif;
font-size:13px; color:var(--text-muted); background:none; border:none;
padding:9px 12px; border-radius:6px; cursor:pointer;
}
.lang-menu-item:hover{ background: var(--bg-deep); color: var(--text-warm); }
.lang-menu-item.active{ color: var(--green); font-weight:600; }
body.auth-pending #nav-auth-btn,
body.auth-pending #nav-menu-wrap{ visibility:hidden; }
.nav-cta{
font-family:'IBM Plex Mono', monospace;
font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
border: 1px solid var(--line); padding: 9px 18px; border-radius: 999px;
text-decoration:none; color: var(--text-warm);
transition: border-color .25s ease, background .25s ease;
white-space:nowrap;
}
.nav-cta:hover{ border-color: var(--green); background: rgba(127,160,184,0.08); box-shadow: 0 0 24px rgba(127,160,184,0.65); }
button.nav-cta{ font-family: inherit; cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; outline: none; }
button.store-btn{ font-family: inherit; cursor: pointer; background: transparent; -webkit-appearance: none; appearance: none; outline: none; }
button.nav-cta:focus-visible, button.store-btn:focus-visible{
outline: 2px solid var(--green); outline-offset: 2px;
}
/* ---------- HERO ---------- */
.hero{
min-height: clamp(620px, 100svh, 880px); position: relative;
display:flex; flex-direction:column; justify-content:center;
padding-top: 140px; padding-bottom: 80px;
/* This hero is a fixed cinematic dark scene (video + flight animation) by design,
so we pin a dark palette here regardless of the rest of the site. */
--bg-deep: #141726; --bg-panel: #1E2238; --bg-panel-2: #262B45;
--green: #8B9DC9; --green-dim: #6B7BA8; --copper: #C9A876;
--text-warm: #F5F1E8; --text-muted: #9098B0; --line: rgba(245,241,232,0.10);
color: var(--text-warm);
background:
radial-gradient(ellipse 900px 500px at 50% 0%, rgba(139,157,201,0.12), transparent 60%),
linear-gradient(180deg, #0E1020 0%, #10132A 55%, #141726 100%);
}
.hero-overlay{
position:absolute; inset:0; z-index:1; pointer-events:none;
background:
radial-gradient(ellipse 900px 500px at 50% 0%, rgba(127,160,184,0.10), transparent 60%),
linear-gradient(180deg, rgba(18,22,27,0.55) 0%, rgba(18,22,27,0.75) 55%, rgba(18,22,27,0.92) 100%);
}
.hero-flight{ position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.hero-flight svg{ width:100%; height:100%; }
.hero-video{
position:absolute; inset:0; width:100%; height:100%;
object-fit: cover; z-index:0; opacity: 0.55;
}
.flight-path{
fill:none; stroke: var(--green); stroke-width: 1.4; opacity: 0.4;
stroke-dasharray: 1400; stroke-dashoffset: 1400;
animation: draw 2.6s cubic-bezier(.4,0,.2,1) 0.3s forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }
.eagle-mark{
transform-origin: center;
offset-path: path("M -20 620 C 140 560, 260 420, 340 300 C 420 180, 520 90, 680 40");
animation: fly 2.6s cubic-bezier(.4,0,.2,1) 0.3s forwards, flap 0.7s ease-in-out infinite;
opacity: 0;
}
@keyframes fly{
0%{ offset-distance: 0%; opacity: 0; }
5%{ opacity: 0.9; }
100%{ offset-distance: 100%; opacity: 0.9; }
}
@keyframes flap{
0%,100%{ transform: scaleY(1) rotate(0deg); }
50%{ transform: scaleY(0.82) rotate(-4deg); }
}
.hero-content{ position:relative; z-index:2; }
.eyebrow{
font-family:'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.22em;
text-transform: uppercase; color: var(--green); margin-bottom: 22px;
display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:''; width: 28px; height:1px; background: var(--green); }
h1{
font-family:'Big Shoulders Display', sans-serif; font-weight: 900;
font-size: clamp(48px, 8.5vw, 108px); line-height: 0.94; letter-spacing: -0.01em;
max-width: 900px; text-wrap: balance;
}
h1 em{ font-style: normal; color: var(--green); }
.hero-sub{ margin-top: 28px; max-width: 540px; font-size: 18px; line-height: 1.6; color: var(--text-muted); }
.hero-actions{ margin-top: 42px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.btn-primary{
background: var(--green); color: #0A140E; font-weight: 600; padding: 15px 30px;
border-radius: 999px; text-decoration:none; font-size: 15px;
transition: transform .25s ease, box-shadow .25s ease;
}
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 34px rgba(127,160,184,0.45); }
.btn-primary:active{ transform: translateY(0) scale(0.98); }
.btn-ghost{
font-size: 14px; color: var(--text-muted); text-decoration: none;
border-bottom: 1px solid var(--line); padding-bottom: 2px;
transition: color .25s ease, border-color .25s ease;
}
.btn-ghost:hover{ color: var(--text-warm); border-color: var(--text-warm); }
.altitude{ position:absolute; right: 32px; top: 150px; bottom: 90px; width: 1px; background: var(--line); z-index:1; display:none; pointer-events:none; }
@media(min-width:900px){ .altitude{ display:block; } }
.altitude span{
position:absolute; right: 12px; font-family:'IBM Plex Mono', monospace; font-size: 11px;
color: var(--text-muted); letter-spacing: 0.05em; white-space:nowrap; transform: translateY(-50%);
}
/* ---------- STATS STRIP ---------- */
.stats{ border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stats-row{ display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat{ padding: 40px 32px; border-left: 1px solid var(--line); }
.stat:first-child{ border-left:none; }
@media (max-width: 640px){
.stat{ border-left:none; border-top: 1px solid var(--line); }
.stat:first-child{ border-top:none; }
}
.stat-num{ font-family:'Big Shoulders Display', sans-serif; font-weight: 900; font-size: clamp(32px, 4vw, 48px); color: var(--green); line-height: 1; }
.stat-label{ margin-top: 10px; font-size: 13px; color: var(--text-muted); line-height: 1.5; max-width: 180px; }
/* ---------- THESIS ---------- */
.thesis{ padding: 140px 0 100px; border-top: 1px solid var(--line); }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.thesis p{
font-family:'IBM Plex Sans', sans-serif; font-style: italic; font-weight: 400;
font-size: clamp(24px, 3.4vw, 38px); line-height: 1.45; max-width: 760px; color: var(--text-warm);
}
@media (min-width: 1200px){
.thesis p{ font-size: 46px; max-width: 920px; line-height: 1.4; }
}
@media (min-width: 1600px){
.thesis p{ font-size: 52px; max-width: 1000px; }
}
.thesis p em{ font-style:italic; color: var(--green); }
.thesis-attr{
margin-top: 28px; font-family:'IBM Plex Mono', monospace; font-size: 12px;
letter-spacing: 0.1em; text-transform:uppercase; color: var(--text-muted);
}
/* ---------- DAILY TASK ---------- */
.daily{ padding: 60px 0 140px; }
.daily-head{ max-width: 620px; margin-bottom: 48px; }
.daily-head .eyebrow{ color: var(--copper); }
.daily-head .eyebrow::before{ background: var(--copper); }
.daily-head h2{
font-family:'Big Shoulders Display', sans-serif; font-weight: 700;
font-size: clamp(34px, 5vw, 54px); line-height: 1.05;
}
.daily-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 760px){ .daily-grid{ grid-template-columns: 1fr; } }
.daily-card{ background: var(--bg-panel); padding: 40px; }
.daily-tag{
font-family:'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: 0.12em;
text-transform: uppercase; color: var(--copper); margin-bottom: 16px;
}
.daily-tag.g{ color: var(--green); }
.daily-text{ font-size: 19px; line-height: 1.55; color: var(--text-warm); }
/* ---------- DESTINY MATRIX SPOTLIGHT ---------- */
.matrix-spotlight{ padding: 90px 0 100px; border-top: 1px solid var(--line); background: var(--bg-panel); }
.matrix-spotlight .daily-head{ margin-bottom: 20px; }
.matrix-spotlight .daily-head .eyebrow{ color: var(--copper); }
.matrix-spotlight .daily-head .eyebrow::before{ background: var(--copper); }
.matrix-spotlight .daily-head h2{
font-family:'Big Shoulders Display', sans-serif; font-weight: 700;
font-size: clamp(34px, 5vw, 54px); line-height: 1.05;
}
.matrix-spotlight p{ max-width: 680px; font-size: 17px; line-height: 1.7; color: var(--text-muted); margin-bottom: 32px; }
.matrix-spotlight .btn-primary{ display:inline-block; }
/* ---------- ABOUT US ---------- */
.about-us{ padding: 60px 0 140px; border-top: 1px solid var(--line); }
.about-us .daily-head{ margin-bottom: 32px; }
.about-us .daily-head h2{ font-family:'Big Shoulders Display', sans-serif; font-weight: 700; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; }
.about-mission{ max-width: 760px; font-size: 17px; line-height: 1.7; color: var(--text-muted); margin-bottom: 20px; }
.about-mission:last-of-type{ margin-bottom: 56px; }
.about-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (max-width: 760px){ .about-grid{ grid-template-columns: 1fr; } }
.about-card{ background: var(--bg-panel); padding: 32px; display:flex; flex-direction:column; justify-content:center; gap:8px; }
.about-card-num{ font-family:'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 32px; color: var(--green); line-height: 1; }
.about-card-label{ font-size: 13px; color: var(--text-muted); line-height: 1.5; }
.about-contact-link{ font-size: 14.5px; color: var(--text-warm); text-decoration:none; border-bottom: 1px solid var(--line); padding-bottom: 2px; width:fit-content; transition: color .25s ease, border-color .25s ease; }
.about-contact-link:hover{ color: var(--green); border-color: var(--green); }
/* ---------- STAGES ---------- */
.stages{ padding: 60px 0 140px; position: relative; }
.stages-head{ max-width: 620px; margin-bottom: 80px; }
.stages-head .eyebrow{ color: var(--copper); }
.stages-head .eyebrow::before{ background: var(--copper); }
.stages-head h2{ font-family:'Big Shoulders Display', sans-serif; font-weight: 700; font-size: clamp(34px, 5vw, 54px); line-height: 1.05; }
.stage-line{ position: relative; padding-left: 40px; border-left: 1px solid var(--line); }
.stage{ position: relative; padding: 0 0 90px 40px; opacity: 0.3; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.stage.in-view{ opacity: 1; transform: translateY(0); }
.stage:last-child{ padding-bottom: 0; }
.stage::before{
content:''; position:absolute; left: -44px; top: 4px; width: 9px; height:9px; border-radius: 50%;
background: var(--green); box-shadow: 0 0 0 5px var(--bg-deep), 0 0 0 6px var(--line);
}
.stage-tag{ font-family:'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); margin-bottom: 12px; }
.stage h3{ font-family:'Big Shoulders Display', sans-serif; font-weight: 700; font-size: clamp(28px, 4vw, 42px); margin-bottom: 14px; }
.stage p{ max-width: 520px; color: var(--text-muted); font-size: 16px; line-height: 1.65; }
/* ---------- FEATURES ---------- */
.features{ padding: 60px 0 140px; border-top: 1px solid var(--line); position: relative; overflow: hidden; }
.features-head{ display:flex; justify-content:space-between; align-items:flex-end; gap: 40px; flex-wrap: wrap; margin-bottom: 64px; position: relative; z-index: 2; }
.features-head h2{ font-family:'Big Shoulders Display', sans-serif; font-weight: 700; font-size: clamp(34px, 5vw, 54px); max-width: 520px; line-height: 1.05; }
.features-head p{ color: var(--text-muted); max-width: 320px; font-size: 15px; line-height: 1.6; }
.feature-grid{ position: relative; z-index: 2; display:grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature-card{ position: relative; background: var(--bg-deep); padding: 34px 28px; transition: background .3s ease, box-shadow .3s ease, transform .3s ease; }
.feature-card:hover{ background: var(--bg-panel); box-shadow: 0 0 0 1px rgba(127,160,184,0.5), 0 0 40px rgba(127,160,184,0.45); transform: translateY(-2px); }
.feature-card-highlight{
grid-column: 1 / -1;
display:flex; align-items:center; gap:24px;
background:
linear-gradient(120deg, rgba(127,160,184,0.10), transparent 60%),
var(--bg-deep);
}
.feature-card-highlight .feature-icon-badge{ margin-bottom:0; flex-shrink:0; }
.feature-card-highlight-text{ flex:1; min-width:0; }
.feature-card-highlight-text h4{ margin-bottom: 4px; }
.feature-card-highlight-text p{ margin:0; }
.feature-card-highlight-arrow{ width:22px; height:22px; color:var(--text-muted); flex-shrink:0; transition: transform .3s ease, color .3s ease; }
.feature-card-highlight:hover .feature-card-highlight-arrow{ transform: translateX(6px); color: var(--green); }
@media (max-width: 640px){
.feature-card-highlight{ flex-wrap:wrap; }
.feature-card-highlight-arrow{ display:none; }
}
.feature-icon-badge{
width:46px; height:46px; margin-bottom:26px; margin-top:4px;
display:flex; align-items:center; justify-content:center;
background: linear-gradient(135deg, rgba(127,160,184,0.20), rgba(154,166,174,0.07));
border: 1px solid var(--line);
border-radius: 11px;
transform: rotate(45deg);
transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.feature-card:hover .feature-icon-badge{
background: linear-gradient(135deg, rgba(127,160,184,0.36), rgba(154,166,174,0.14));
border-color: var(--green-dim);
transform: rotate(45deg) translateY(-3px);
box-shadow: 0 6px 18px rgba(127,160,184,0.25);
}
.feature-icon{ width: 22px; height:22px; margin-bottom: 0; color: var(--green); transform: rotate(-45deg); transition: filter .3s ease; }
.feature-card:hover .feature-icon{ filter: drop-shadow(0 0 12px rgba(127,160,184,0.95)); }
.feature-card h4{ font-family:'IBM Plex Sans', sans-serif; font-weight: 600; font-size: 17px; margin-bottom: 10px; }
.feature-card p{ color: var(--text-muted); font-size: 14px; line-height: 1.6; }
/* --- eagle watermark: large faint silhouette behind the grid --- */
.features-watermark{
position:absolute; top:-8%; right:-6%; width:min(620px, 60vw); height:min(620px, 60vw);
color: var(--green); opacity: 0.05; pointer-events:none; z-index: 0;
}
.features-watermark svg{ width:100%; height:100%; }
/* --- eagle that flies across the section once, on scroll into view --- */
.features-flight{ position:absolute; top:0; left:0; width:100%; height:260px; pointer-events:none; z-index: 1; }
.features-flight svg{ width:100%; height:100%; }
.features-flight-path{
fill:none; stroke: var(--green); stroke-width: 1.2; opacity: 0.3;
stroke-dasharray: 1300; stroke-dashoffset: 1300;
}
.features-eagle{
transform-origin: center; opacity: 0;
offset-path: path("M -30 230 C 220 40, 560 260, 990 10");
}
.features.in-view .features-flight-path{ animation: draw 2.4s cubic-bezier(.4,0,.2,1) .1s forwards; }
.features.in-view .features-eagle{
animation: fly 2.4s cubic-bezier(.4,0,.2,1) .1s forwards, flap 0.65s ease-in-out infinite;
}
/* --- small feather that appears on card hover --- */
.card-feather{
position:absolute; top:18px; right:20px; width:20px; height:20px; z-index:1;
color: var(--green); opacity:0; transform: translate(8px,-8px) rotate(-20deg);
transition: opacity .35s ease, transform .35s ease; pointer-events:none;
}
.feature-card:hover .card-feather{ opacity: 0.85; transform: translate(0,0) rotate(0deg); }
/* ---------- TESTIMONIAL ---------- */
.testimonial{ padding: 40px 0 140px; }
.testimonial-card{ border: 1px solid var(--line); border-radius: 4px; padding: 56px; position: relative; background: var(--bg-panel); }
.testimonial-card::before{
content:'"'; position:absolute; top: 20px; left: 32px;
font-family:'Big Shoulders Display', sans-serif; font-size: 120px; font-weight: 900;
color: var(--green); opacity: 0.15; line-height:1;
}
.testimonial-card p{ position: relative; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.55; max-width: 640px; color: var(--text-warm); }
.testimonial-who{ margin-top: 28px; display:flex; align-items:center; gap:14px; }
.testimonial-avatar{ width: 38px; height:38px; border-radius: 50%; background: linear-gradient(135deg, var(--green), var(--copper)); flex-shrink:0; }
.testimonial-who-text{ font-family:'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }
.testimonial-who-text strong{ color: var(--text-warm); display:block; font-size: 13px; margin-bottom: 2px; }
@media (max-width: 640px){ .testimonial-card{ padding: 40px 28px; } }
.testimonial h2{ font-size: clamp(24px,3vw,34px); color: var(--text-warm); margin: 10px 0 28px; }
.testimonials-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap:20px; margin-bottom:36px; }
.testimonial-mini-card{ border:1px solid var(--line); border-radius:14px; padding:22px; background: var(--bg-panel); }
.testimonial-mini-stars{ color: var(--amber, #e8b84b); font-size:14px; letter-spacing:2px; margin-bottom:10px; }
.testimonial-mini-text{ font-size:14.5px; line-height:1.55; color: var(--text-warm); margin-bottom:14px; }
.testimonial-mini-who{ font-size:12px; color: var(--text-muted); font-family:'IBM Plex Mono', monospace; }
.testimonials-empty{ text-align:center; color: var(--text-muted); font-size:13.5px; padding:20px; margin-bottom:36px; }
.testimonial-form-card{ max-width:520px; margin:0 auto; border:1px solid var(--line); border-radius:16px; padding:26px; background: var(--bg-panel-2); }
.testimonial-form-title{ font-size:15px; font-weight:700; color: var(--text-warm); margin-bottom:14px; }
.testimonial-stars{ display:flex; gap:6px; margin-bottom:14px; }
.star-btn{ background:none; border:none; font-size:26px; color: var(--line); cursor:pointer; padding:0; line-height:1; transition: color .15s ease; }
.star-btn.active{ color: var(--amber, #e8b84b); }
.testimonial-textarea{
width:100%; min-height:80px; background: var(--bg-deep); border:1px solid var(--line); border-radius:10px;
padding:12px; color: var(--text-warm); font-family:inherit; font-size:14px; resize:vertical; margin-bottom:12px;
}
.testimonial-submit-btn{
padding:11px 22px; border-radius:9px; border:none; background: var(--green); color:#0A140E;
font-weight:700; font-size:14px; cursor:pointer; font-family:inherit;
}
.testimonial-submit-btn:disabled{ opacity:0.5; cursor:not-allowed; }
.testimonial-form-msg{ font-size:12.5px; margin-top:10px; }
.testimonial-login-note, .testimonial-pending-note{ font-size:12.5px; color: var(--text-muted); margin-top:10px; }
/* ---------- CTA ---------- */
.cta{ padding: 120px 0 100px; text-align:center; position: relative; background: radial-gradient(ellipse 700px 400px at 50% 100%, rgba(127,160,184,0.10), transparent 65%); }
.cta h2{ font-family:'Big Shoulders Display', sans-serif; font-weight: 900; font-size: clamp(40px, 7vw, 84px); line-height: 0.95; max-width: 700px; margin: 0 auto 28px; }
.cta h2 em{ font-style:normal; color: var(--green); }
.cta p{ color: var(--text-muted); max-width: 420px; margin: 0 auto 40px; font-size: 16px; line-height: 1.6; }
.cta-buttons{ display:flex; gap: 18px; justify-content:center; flex-wrap:wrap; }
.store-btn{
display:flex; align-items:center; gap:10px; border: 1px solid var(--line); padding: 13px 24px;
border-radius: 12px; text-decoration:none; color: var(--text-warm); font-size: 14px;
transition: border-color .25s ease, transform .25s ease;
}
.store-btn:hover{ border-color: var(--green); transform: translateY(-2px); }
.store-btn svg{ width:20px; height:20px; }
.install-note{
margin-top: 18px; font-size: 13px; color: var(--text-muted);
}
/* ---------- INSTALL MODAL ---------- */
.install-modal-backdrop{
position: fixed; inset: 0; z-index: 200;
background: rgba(8,10,13,0.72);
display: none;
align-items: center; justify-content: center;
padding: 24px;
}
.install-modal-backdrop.open{ display: flex; }
.install-modal{
background: var(--bg-panel);
border: 1px solid var(--line);
border-radius: 16px;
max-width: 380px;
width: 100%;
max-height: calc(100vh - 48px);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 32px 28px;
position: relative;
}
.install-modal h3{
font-family:'Big Shoulders Display', sans-serif;
font-weight: 700; font-size: 26px; margin-bottom: 16px;
}
.install-modal ol{
padding-left: 20px; color: var(--text-warm); font-size: 15px; line-height: 1.8;
}
.install-modal .icon-inline{
display:inline-flex; vertical-align:middle; width:18px; height:18px;
margin: 0 3px; color: var(--green);
}
.install-modal-close{
position:absolute; top: 16px; right: 16px;
width: 32px; height:32px; border-radius:50%;
border: 1px solid var(--line); background:none; color: var(--text-muted);
cursor:pointer; font-size:16px; line-height:1;
display:flex; align-items:center; justify-content:center;
}
.install-modal-close:hover{ color: var(--text-warm); border-color: var(--green); }
/* ---------- AUTH MODAL ---------- */
.auth-tabs{ display:flex; gap:8px; margin-bottom:22px; }
.auth-tab{
flex:1; text-align:center; padding:10px; border-radius:8px;
background:none; border:1px solid var(--line); color:var(--text-muted);
font-family:inherit; cursor:pointer; font-size:14px;
}
.auth-tab.active{ background: var(--green); border-color: var(--green); color:#0A140E; font-weight:600; }
.auth-field{
width:100%; padding:12px 14px; margin-bottom:12px;
background: var(--bg-deep); border:1px solid var(--line); border-radius:8px;
color: var(--text-warm); font-family:inherit; font-size:15px;
}
.auth-field:focus{ outline:none; border-color: var(--green); }
.auth-field::placeholder, .dash-journal-text::placeholder{ color: var(--text-muted); opacity: 1; }
.auth-submit{
width:100%; padding:13px; border-radius:8px; border:none;
background: var(--green); color:#0A140E; font-weight:600; font-size:15px;
cursor:pointer; font-family:inherit; margin-top:4px;
}
.auth-error{ color:#D98484; font-size:13px; margin-top:10px; min-height:16px; }
.google-btn{
width:100%; display:flex; align-items:center; justify-content:center; gap:10px;
background:#FFFFFF; color:#3C4043; border:1px solid #dadce0; border-radius:8px;
padding:12px; font-family:inherit; font-size:14px; font-weight:600; cursor:pointer;
margin-top:18px; transition: box-shadow .15s ease;
}
.google-btn:hover{ box-shadow: 0 1px 6px rgba(0,0,0,0.2); }
.auth-divider{
display:flex; align-items:center; gap:12px; margin:18px 0;
color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:0.05em;
}
.auth-divider::before, .auth-divider::after{ content:''; flex:1; height:1px; background:var(--line); }
/* ---------- DASHBOARD ---------- */
.dash-view{
position:fixed; inset:0; z-index:150;
background:
radial-gradient(ellipse 700px 500px at 20% 0%, rgba(127,160,184,0.08), transparent 60%),
var(--bg-deep);
display:none; overflow-y:auto;
}
.dash-view.open{ display:block; }
.dash-header{
display:flex; align-items:center; justify-content:space-between;
padding: 18px 24px; border-bottom:1px solid var(--line);
position:sticky; top:0; background: var(--header-bg); backdrop-filter: blur(4px); z-index:5;
min-height: 72px; box-sizing: border-box;
}
.dash-brand{
font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:20px; letter-spacing:0.05em;
background: linear-gradient(100deg, var(--text-warm) 0%, var(--text-warm) 45%, var(--green) 70%, var(--copper) 100%);
-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.dash-close{
width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:none;
color:var(--text-muted); cursor:pointer; font-size:15px; display:flex; align-items:center; justify-content:center;
}
.dash-close:hover{ color:var(--text-warm); border-color:var(--green); }
.dash-menu-btn{
width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:none;
color:var(--text-muted); cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.dash-menu-btn:hover{ color:var(--text-warm); border-color:var(--green); }
.dash-menu-btn svg{ width:18px; height:18px; }
.nav-menu-avatar-btn{ background:none; border:none; padding:0; cursor:pointer; display:flex; align-items:center; gap:9px; }
#nav-menu-avatar{ width:34px; height:34px; font-size:14px; }
.nav-menu-nickname{
font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size:13.5px;
color: var(--text-warm); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#nav-menu-dropdown{ left:0; right:auto; }
.dash-menu-wrap{ position:relative; }
.dash-menu-dropdown{
position:absolute; top:calc(100% + 8px); right:0; left:auto; min-width:190px;
background: var(--bg-panel); border:1px solid var(--line); border-radius:12px;
box-shadow: 0 10px 32px rgba(0,0,0,0.45); padding:6px; z-index:20;
display:none; flex-direction:column;
}
.dash-menu-dropdown.open{ display:flex; }
.dash-menu-item{
display:flex; align-items:center; gap:10px; width:100%; background:none; border:none;
padding:10px 12px; border-radius:8px; color:var(--text-muted); font-size:14px; font-family:inherit;
cursor:pointer; text-align:left; transition: background .15s ease, color .15s ease;
}
.dash-menu-item:hover{ background: var(--bg-panel-2); color:var(--text-warm); }
.dash-menu-item svg{ width:18px; height:18px; flex-shrink:0; }
.dash-menu-item.danger{ color:#c98080; }
.dash-menu-item.danger:hover{ color:#e79a9a; }
.dash-content{ max-width:640px; margin:0 auto; padding: 28px 24px 110px; }
.dash-panel{ display:none; }
.dash-panel.active{ display:block; }
/* Overview */
.dash-hello{ margin-bottom:26px; }
.dash-hello-eyebrow{
font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase;
color: var(--green); margin-bottom:8px;
}
.dash-hello h2{ font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:28px; }
.dash-quote{
border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-bottom:24px;
background: var(--bg-panel); font-size:14px; color:var(--text-muted); font-style:italic; line-height:1.6;
}
.weather-widget{
display:flex; align-items:center; gap:10px; background: var(--bg-panel-2); border:1px solid var(--line);
border-radius:12px; padding:10px 14px; margin-bottom:16px; font-size:13.5px; color: var(--text-warm);
}
.weather-widget-icon{ font-size:22px; line-height:1; }
.weather-widget-temp{ font-weight:700; font-size:16px; }
.weather-widget-desc{ color: var(--text-muted); }
.weather-widget-city{ margin-left:auto; color: var(--text-muted); font-size:12px; }
.weather-widget-retry{
margin-left:auto; background: var(--green); color:#0A140E; border:none; border-radius:8px;
padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.dash-stats-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:12px; margin-bottom:8px; }
.dash-stat-card{
border:1px solid var(--line); border-radius:12px; padding:18px; background: var(--bg-panel);
}
.dash-stat-num{ font-family:'Big Shoulders Display', sans-serif; font-weight:900; font-size:32px; color:var(--green); line-height:1; }
.dash-stat-label{ font-size:12px; color:var(--text-muted); margin-top:6px; }
.dash-section-title{
font-family:'Big Shoulders Display', sans-serif; font-weight:700; font-size:18px;
margin: 28px 0 14px;
}
/* Shared panel bits */
.dash-add-row{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
.dash-add-row input{ flex:1; min-width:0; }
.dash-add-row select{
min-width:0; background: var(--bg-panel-2); color: var(--text-warm); border:1px solid var(--line);
border-radius:8px; padding:12px 10px; font-size:14px; font-family:inherit; flex:1;
}
.dash-add-row .auth-field{ margin-bottom:0; }
@media (max-width: 640px){
.dash-add-row{ flex-direction:column; }
.dash-add-row input, .dash-add-row select, .dash-add-row .dash-add-btn{ width:100%; }
}
.dash-add-btn{
padding: 0 18px; border-radius:8px; border:none; background: var(--green);
color:#0A140E; font-weight:600; cursor:pointer; font-family:inherit;
transition: transform .15s ease, box-shadow .3s ease;
}
.dash-add-btn:hover{ box-shadow: 0 0 26px rgba(127,160,184,0.85); }
.dash-add-btn:active{ transform: scale(0.97); }
.dash-item{
display:flex; align-items:center; gap:12px;
padding: 14px 16px; border:1px solid var(--line); border-radius:10px; margin-bottom:10px;
background: var(--bg-panel);
}
.dash-item input[type="checkbox"]{ width:20px; height:20px; accent-color: var(--green); flex-shrink:0; }
.dash-item-body{ flex:1; min-width:0; }
.dash-item-title{ font-size:15px; color: var(--text-warm); }
.dash-item-title.done{ text-decoration:line-through; color: var(--text-muted); }
.dash-item-meta{ font-size:12px; color: var(--text-muted); margin-top:2px; }
.dash-item-del{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; padding:4px; flex-shrink:0; }
.dash-item-cal{ font-size:15px; padding:4px; flex-shrink:0; text-decoration:none; opacity:.75; align-self:flex-start; }
.dash-item-cal:hover{ opacity:1; }
.dash-item-del:hover{ color:#D98484; }
.dash-empty{ color:var(--text-muted); font-size:14px; text-align:center; padding:36px 0; }
.dash-journal-text{
width:100%; min-height:120px; padding:14px; background:var(--bg-deep);
border:1px solid var(--line); border-radius:10px; color:var(--text-warm);
font-family:inherit; font-size:15px; resize:vertical; margin-bottom:12px;
}
.dash-journal-text:focus{ outline:none; border-color:var(--green); }
.journal-card{
border:1px solid var(--line); border-radius:16px; padding:22px; background: var(--bg-panel);
margin-bottom:22px;
}
.journal-mood-emoji{ font-size:44px; text-align:center; margin:6px 0 14px; transition: transform .15s ease; }
.dash-empty-icon{ font-size:30px; display:block; margin-bottom:10px; opacity:0.6; }
.preset-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.preset-chip{
font-family:inherit; font-size:13px; padding:7px 14px; border-radius:999px;
border:1px solid var(--line); background:none; color:var(--text-muted); cursor:pointer;
transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.preset-chip:hover{ border-color:var(--green); color:var(--text-warm); box-shadow: 0 0 18px rgba(127,160,184,0.6); }
.area-chip.active{ background:var(--green); color:#fff; border-color:var(--green); box-shadow: 0 0 0 3px rgba(127,160,184,0.35), 0 0 24px rgba(127,160,184,0.75); }
.learn-area-chip{
font-family:inherit; font-size:12.5px; padding:6px 12px; border-radius:999px;
border:1px solid var(--line); background:none; color:var(--text-muted); cursor:pointer; white-space:nowrap;
transition: border-color .25s ease, color .25s ease, box-shadow .25s ease, background .25s ease;
}
.learn-area-chip:hover{ border-color:var(--green); color:var(--text-warm); box-shadow: 0 0 18px rgba(127,160,184,0.6); }
.learn-area-chip.active{ background:var(--green); color:#fff; border-color:var(--green); box-shadow: 0 0 0 3px rgba(127,160,184,0.35), 0 0 24px rgba(127,160,184,0.75); }
.learn-area-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; overflow-x:auto; }
/* ---------- SUBTAB BARS (group panels under the 3 bottom-nav pillars) ---------- */
/* Deliberately NOT pill/chip-shaped like .preset-chip / .learn-area-chip —
those are content filters; this is page navigation, so it uses an
underline-tab language instead, to read as a different kind of control
at a glance. */
.subtab-bar{
display:none; gap:4px; margin:0 0 24px; overflow-x:auto;
border-bottom:1px solid var(--line);
}
.subtab-pill{
font-family:inherit; font-size:13.5px; font-weight:600; padding:11px 4px 10px;
margin-right:22px; border:none; border-bottom:2.5px solid transparent;
background:none; color:var(--text-muted); cursor:pointer; white-space:nowrap;
transition: color .2s ease, border-color .2s ease;
}
.subtab-pill:hover{ color:var(--text-warm); }
.subtab-pill.active{ color:var(--green); border-bottom-color:var(--green); }
/* ---------- BOOKS / RADIO / DREAMS / PODCASTS ---------- */
.dash-back-btn{
background:none; border:none; color:var(--text-muted); font-family:inherit; font-size:13px;
cursor:pointer; padding:0; margin-bottom:6px; display:flex; align-items:center; gap:6px;
}
.dash-back-btn:hover{ color:var(--text-warm); }
.content-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; margin-top:12px; }
.book-card{
background:var(--bg-panel-2); border:1px solid var(--line); border-radius:12px; padding:16px;
display:flex; flex-direction:column; gap:8px; transition: box-shadow .3s ease, transform .3s ease;
}
.book-card:hover{ box-shadow:0 0 28px rgba(127,160,184,0.55); transform:translateY(-2px); }
.book-card-icon{ font-size:26px; }
.book-card-title{ font-size:13.5px; font-weight:600; color:var(--text-warm); line-height:1.35; }
.book-card-desc{ font-size:12.5px; line-height:1.5; color:var(--text-muted); }
.book-card-author{ font-size:12px; color:var(--text-muted); }
.book-card-actions{ display:flex; gap:8px; margin-top:auto; padding-top:6px; }
.book-card-actions a, .book-card-actions button{
flex:1; text-align:center; font-family:inherit; font-size:12px; padding:7px 8px; border-radius:7px;
border:1px solid var(--line); background:none; color:var(--text-muted); cursor:pointer; text-decoration:none;
transition: border-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.book-card-actions a:hover, .book-card-actions button:hover{ border-color:var(--green); color:var(--text-warm); box-shadow:0 0 16px rgba(127,160,184,0.6); }
.radio-card{
background:var(--bg-panel-2); border:1px solid var(--line); border-radius:12px; padding:18px 14px;
display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; font-family:inherit;
color:var(--text-warm); font-size:13px; font-weight:600; transition: box-shadow .3s ease, border-color .3s ease, transform .2s ease;
}
.radio-card:hover{ border-color:var(--green); box-shadow:0 0 26px rgba(127,160,184,0.6); transform:translateY(-2px); }
.radio-card.active{ border-color:var(--green); box-shadow:0 0 0 3px rgba(127,160,184,0.35), 0 0 30px rgba(127,160,184,0.8); }
.radio-card-icon{ font-size:28px; }
.dream-item{
border-bottom:1px solid var(--line); padding:12px 2px; cursor:pointer;
}
.dream-item-term{ font-size:14.5px; font-weight:600; color:var(--text-warm); display:flex; align-items:center; justify-content:space-between; }
.dream-item-meaning{ font-size:13px; color:var(--text-muted); line-height:1.55; margin-top:6px; display:none; }
.dream-item.open .dream-item-meaning{ display:block; }
.dream-item.open .dream-item-term{ color:var(--green); }
.podcast-item{
display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:12px;
padding:14px; margin-bottom:10px; transition: box-shadow .3s ease;
}
.podcast-item:hover{ box-shadow:0 0 24px rgba(127,160,184,0.45); }
.podcast-item-icon{ font-size:24px; flex-shrink:0; }
.podcast-item-title{ font-size:13.5px; font-weight:600; color:var(--text-warm); }
.live-badge{
font-size:9.5px; font-weight:700; letter-spacing:.03em; color:#e08a8a;
background: rgba(224,138,138,0.12); border:1px solid rgba(224,138,138,0.3);
border-radius:20px; padding:1px 7px; margin-left:6px; white-space:nowrap;
font-family:'IBM Plex Mono', monospace; vertical-align:middle;
}
.podcast-item-desc{ font-size:12px; color:var(--text-muted); margin-top:2px; }
.podcast-item audio{ width:100%; margin-top:8px; }
.podcast-listen-link{ display:inline-block; margin-top:8px; font-size:12.5px; font-weight:600; color:var(--green); text-decoration:none; }
.podcast-listen-link:hover{ text-decoration:underline; }
.quit-item{
border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:12px;
background: var(--bg-panel, rgba(255,255,255,0.02));
}
.quit-item-name{ font-size:15px; font-weight:700; color:var(--text-warm); display:flex; align-items:center; justify-content:space-between; }
.quit-item-delete{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; padding:2px 6px; }
.quit-item-delete:hover{ color:#D98484; }
.quit-item-stats{ display:flex; gap:18px; margin-top:10px; flex-wrap:wrap; }
.quit-item-stat{ display:flex; flex-direction:column; }
.quit-item-stat-value{ font-size:19px; font-weight:700; color:var(--green); font-family:'IBM Plex Mono', monospace; }
.quit-item-stat-label{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.planner-item{
display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-left:3px solid var(--line);
border-radius:10px; padding:12px 14px; margin-bottom:8px;
}
.planner-item.priority-high{ border-left-color:#D98484; }
.planner-item.priority-medium{ border-left-color:#e8b84b; }
.planner-item.priority-low{ border-left-color:#7fa0b8; }
.planner-item.overdue{ background: rgba(217,132,132,0.08); }
.planner-item.done{ opacity:0.5; }
.planner-item.done .planner-item-title{ text-decoration:line-through; }
.planner-item-check{ width:20px; height:20px; flex-shrink:0; cursor:pointer; accent-color: var(--green); }
.planner-item-body{ flex:1; min-width:0; }
.planner-item-title{ font-size:14px; font-weight:600; color:var(--text-warm); }
.planner-item-meta{ font-size:11.5px; color:var(--text-muted); margin-top:3px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.planner-badge{
font-size:10px; font-weight:700; letter-spacing:.02em; border-radius:20px; padding:1px 8px;
font-family:'IBM Plex Mono', monospace;
}
.planner-badge-overdue{ color:#D98484; background: rgba(217,132,132,0.14); border:1px solid rgba(217,132,132,0.35); }
.planner-badge-priority{ color:#e8b84b; background: rgba(232,184,75,0.14); border:1px solid rgba(232,184,75,0.35); }
.planner-item-delete{ background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:16px; padding:2px 6px; flex-shrink:0; }
.planner-item-delete:hover{ color:#D98484; }
.podcast-item-lang{ font-size:11px; font-weight:500; color:var(--text-muted); }
.radio-float{
position:fixed; right:16px; bottom:76px; z-index:160;
background:var(--header-bg); border:1px solid var(--line); border-radius:14px;
padding:10px 12px; display:flex; align-items:center; gap:10px;
box-shadow:0 0 32px rgba(127,160,184,0.6); backdrop-filter:blur(6px);
max-width:min(88vw, 300px);
}
.radio-float-icon{ font-size:20px; filter:drop-shadow(0 0 10px rgba(127,160,184,0.95)); }
.radio-float-info{ display:flex; flex-direction:column; min-width:0; }
.radio-float-label{ font-size:9.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; }
.radio-float-name{ font-size:12.5px; font-weight:600; color:var(--text-warm); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.radio-float-btn{
background:none; border:1px solid var(--line); border-radius:50%; width:28px; height:28px;
color:var(--text-warm); cursor:pointer; flex-shrink:0; font-size:12px; line-height:1;
display:flex; align-items:center; justify-content:center; transition: border-color .25s ease, box-shadow .25s ease;
}
.radio-float-btn:hover{ border-color:var(--green); box-shadow:0 0 18px rgba(127,160,184,0.75); }
@media (max-width: 640px){ .radio-float{ bottom:84px; right:10px; } }
.day-scale{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.day-scale-btn{
width:34px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--bg-deep);
color:var(--text-muted); font-family:inherit; font-size:14px; cursor:pointer;
}
.day-scale-btn.active{ background:var(--green); border-color:var(--green); color:#0A140E; font-weight:700; }
.lb-row{
display:flex; align-items:center; gap:12px; padding:12px 14px;
border:1px solid var(--line); border-radius:10px; margin-bottom:8px; background:var(--bg-panel);
}
.lb-rank{
font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:18px; color:var(--copper);
width:24px; text-align:center; flex-shrink:0;
}
.lb-name{ flex:1; font-size:14px; color:var(--text-warm); }
.lb-streak{ font-size:13px; color:var(--green); font-weight:600; }
.terms-body{ font-size:14px; line-height:1.7; color:var(--text-muted); max-height:50vh; overflow-y:auto; padding-right:6px; }
.terms-body h4{ color:var(--text-warm); font-size:15px; margin:14px 0 6px; }
.terms-body h4:first-child{ margin-top:0; }
/* Profile panel — eagle/feather themed redesign */
.profile-card{
position:relative; overflow:hidden;
border:1px solid var(--line); border-radius:18px; padding:26px 22px; margin-bottom:20px;
display:flex; align-items:center; gap:18px;
background:
radial-gradient(120% 140% at 100% 0%, rgba(127,160,184,0.16), transparent 60%),
linear-gradient(135deg, var(--bg-panel-2), var(--bg-panel) 70%);
}
.profile-card::before{
content:''; position:absolute; right:-30px; top:-40px; width:180px; height:180px;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity: 0.10; transform: rotate(8deg); pointer-events:none;
}
.profile-avatar{
position:relative; z-index:1;
width:58px; height:58px; border-radius:50%; flex-shrink:0;
background: linear-gradient(135deg, var(--green), var(--copper));
background-size: cover; background-position: center;
display:flex; align-items:center; justify-content:center;
font-family:'Big Shoulders Display',sans-serif; font-weight:900; font-size:22px; color:#0A140E;
box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 5px var(--green-dim);
transition: box-shadow .3s ease;
}
.profile-avatar.avatar-premium{
box-shadow: 0 0 0 3px var(--bg-deep), 0 0 0 5px #E8B84B, 0 0 16px rgba(232,184,75,0.55);
}
.profile-avatar-upload-wrap{ position:relative; flex-shrink:0; }
.avatar-edit-btn{
position:absolute; top:-2px; right:-2px; z-index:3;
width:22px; height:22px; border-radius:50%; border:1.5px solid var(--bg-deep);
background: var(--bg-panel-2); color: var(--text-warm); cursor:pointer;
display:flex; align-items:center; justify-content:center;
}
.avatar-edit-btn:hover{ background: var(--green); color:#0A140E; }
.avatar-edit-btn svg{ width:11px; height:11px; }
.profile-avatar-lvl{
position:absolute; z-index:2; bottom:-4px; right:-4px;
background: var(--bg-deep); color: var(--green); border:1.5px solid var(--green-dim);
font-size:10px; font-weight:800; border-radius:999px; padding:1px 6px;
display:flex; align-items:center; gap:2px; font-family:'IBM Plex Mono',monospace;
}
.profile-email{ font-size:15px; color:var(--text-warm); word-break:break-all; position:relative; z-index:1; }
.profile-since{ font-size:12px; color:var(--text-muted); margin-top:4px; position:relative; z-index:1; }
#panel-profile .dash-section-title{ display:flex; align-items:center; gap:8px; }
#panel-profile .dash-section-title::before{
content:''; width:16px; height:16px; flex-shrink:0;
background: url("data:image/svg+xml;utf8,") no-repeat center / contain;
opacity:0.85;
}
.profile-action{
position:relative;
width:100%; text-align:left; padding:13px 16px 13px 52px; margin-bottom:10px;
border:1px solid var(--line); border-radius:12px; background:var(--bg-panel);
color:var(--text-warm); font-family:inherit; font-size:14px; cursor:pointer;
display:flex; align-items:center; justify-content:space-between;
transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.profile-action:hover{ border-color:var(--green); transform: translateX(2px); background: var(--bg-panel-2); }
.profile-action::before{
content:''; position:absolute; left:14px; top:50%; transform:translateY(-50%);
width:22px; height:22px; border-radius:7px;
background: linear-gradient(135deg, var(--green-dim), var(--green));
-webkit-mask-repeat:no-repeat; -webkit-mask-position:center; -webkit-mask-size:60%;
mask-repeat:no-repeat; mask-position:center; mask-size:60%;
}
.profile-action.danger{ color:#D98484; }
.profile-action.danger:hover{ border-color:#D98484; }
.profile-action.danger::before{ background: linear-gradient(135deg, #D98484, #B85C5C); }
#profile-leaderboard-btn::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
#profile-friends-btn::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
#profile-feedback-btn::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
#profile-terms-btn::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
#profile-reset-btn::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
#profile-logout-btn::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
#profile-delete-btn::before{ -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); }
.profile-msg{ font-size:13px; color:var(--green); margin-top:6px; min-height:16px; white-space:pre-line; word-break:break-word; }
/* Rating widget */
.rate-card{
border:1px solid var(--line); border-radius:14px; padding:22px; background:var(--bg-panel);
}
.rate-stars{ display:flex; gap:8px; margin: 12px 0 16px; }
.rate-star{
font-size:30px; background:none; border:none; cursor:pointer; color: var(--line); line-height:1; padding:0;
transition: color .15s ease, transform .15s ease;
}
.rate-star.filled{ color: var(--copper); }
.rate-star:hover{ transform: scale(1.15); }
.rate-submit{
width:100%; padding:13px; border-radius:8px; border:none; margin-top:12px;
background: var(--green); color:#0A140E; font-weight:600; cursor:pointer; font-family:inherit;
}
.pinfo-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pinfo-grid .auth-field{ margin-bottom:10px; }
.pinfo-full{ grid-column: 1 / -1; }
.pinfo-label{ font-size:11px; color:var(--text-muted); margin: 2px 0 4px; text-transform:uppercase; letter-spacing:0.06em; }
/* Bottom nav */
.dash-bottomnav{
position:fixed; left:0; right:0; bottom:0; z-index:10;
display:flex; justify-content:space-around;
background: var(--header-bg); backdrop-filter: blur(4px);
border-top:1px solid var(--line);
padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
}
.bn-item{
background:none; border:none; cursor:pointer; font-family:inherit;
display:flex; flex-direction:column; align-items:center; gap:4px;
color: var(--text-muted); font-size:10.5px; padding:6px 8px; flex:1; max-width:88px;
position:relative;
}
.bn-item svg{ width:22px; height:22px; transition: filter .3s ease, transform .3s ease; }
.bn-item.active{ color: var(--green); }
.bn-item.active svg{
filter: drop-shadow(0 0 8px rgba(127,160,184,1)) drop-shadow(0 0 22px rgba(127,160,184,0.85));
transform: translateY(-1px);
}
.bn-item.active span{ text-shadow: 0 0 16px rgba(127,160,184,0.9); }
.bn-item.active::before{
content:''; position:absolute; top:-4px; left:50%; transform:translateX(-50%);
width:34px; height:34px; border-radius:50%;
background: radial-gradient(circle, rgba(127,160,184,0.5) 0%, rgba(127,160,184,0) 72%);
pointer-events:none; z-index:-1;
}
footer{ border-top: 1px solid var(--line); padding: 36px 0; }
.footer-brand{
display:flex; align-items:center; gap:10px; margin-bottom: 32px;
font-family:'Big Shoulders Display', sans-serif;
font-weight:900; font-size: 26px; letter-spacing: 0.06em;
}
.footer-brand svg{ width:24px; height:24px; flex-shrink:0; }
.footer-brand-badge{
width:40px; height:40px; border-radius:12px; flex-shrink:0;
background: radial-gradient(circle at 32% 28%, #2A323C 0%, #171C22 55%, #0F1216 100%);
display:flex; align-items:center; justify-content:center;
box-shadow: 0 4px 14px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
}
.footer-brand-badge svg{ width:24px; height:24px; }
.footer-brand-text{
background: linear-gradient(100deg, var(--text-warm) 0%, var(--text-warm) 45%, var(--green) 70%, var(--copper) 100%);
-webkit-background-clip: text; background-clip: text;
-webkit-text-fill-color: transparent; color: transparent;
}
.footer-brand-text span{ color: inherit; }
.footer-row{ display:flex; justify-content:space-between; align-items:center; flex-wrap: wrap; gap:16px; font-family:'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-muted); letter-spacing: 0.04em; }
.footer-cols{ display:grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 32px; padding-bottom: 36px; margin-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer-col h5{ font-family:'IBM Plex Sans', sans-serif; font-weight:600; font-size: 12.5px; color: var(--text-warm); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 16px; }
.footer-col a, .footer-col .footer-link-btn{
display:block; background:none; border:none; padding:0; text-align:left; width:100%;
font-family:inherit; cursor:pointer; color: var(--text-muted); font-size: 13.5px;
text-decoration:none; margin-bottom: 11px; transition: color .2s ease;
}
.footer-col a:hover, .footer-col .footer-link-btn:hover{ color: var(--green); }
/* --- floating help button --- */
.help-float-btn{
position: fixed; right: 18px; bottom: 18px; z-index: 45;
width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer;
background: var(--green); color: var(--bg-deep);
display:flex; align-items:center; justify-content:center;
box-shadow: 0 4px 22px rgba(127,160,184,0.55);
transition: transform .25s ease, box-shadow .25s ease;
}
.help-float-btn:hover{ transform: translateY(-3px); box-shadow: 0 6px 30px rgba(127,160,184,0.85); }
.help-float-btn svg{ width: 24px; height: 24px; }
@media (max-width: 640px){ .help-float-btn{ right: 12px; bottom: 12px; width: 46px; height: 46px; } }
.social-row{ display:flex; align-items:center; gap:14px; }
.social-link{
width: 34px; height:34px; border-radius: 50%;
border: 1px solid var(--line);
display:flex; align-items:center; justify-content:center;
color: var(--text-muted);
transition: border-color .2s ease, color .2s ease, transform .2s ease;
}
.social-link svg{ width:16px; height:16px; }
.social-link:hover{ border-color: var(--green); color: var(--text-warm); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce){
*{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
.flight-path{ stroke-dashoffset: 0; }
.eagle-mark{ opacity: 0.9; offset-distance: 100%; }
}
:focus-visible{ outline: 2px solid var(--green); outline-offset: 3px; }
/* ---------- NOTIFICATION BANNER ---------- */
.notif-banner{
position: fixed; left:16px; right:16px; bottom:16px; z-index: 190;
background: var(--bg-panel); border:1px solid var(--line); border-radius:14px;
padding: 16px 18px; display:none; align-items:center; gap:14px;
max-width: 420px; margin: 0 auto;
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.notif-banner.show{ display:flex; }
.notif-banner-text{ flex:1; font-size:13px; color: var(--text-muted); line-height:1.5; }
.notif-banner-actions{ display:flex; flex-direction:column; gap:6px; flex-shrink:0; }
.notif-enable-btn{
background: var(--green); color:#0A140E; border:none; border-radius:8px;
padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; white-space:nowrap;
}
.notif-dismiss-btn{
background:none; border:none; color:var(--text-muted); font-size:11px; cursor:pointer; font-family:inherit;
}
.global-error-banner{
position: fixed; top:0; left:0; right:0; z-index:999;
background:#5A1F1F; color:#fff; font-size:12px; font-family:'IBM Plex Mono',monospace;
padding:10px 14px; display:none; word-break:break-word; max-height:35vh; overflow-y:auto;
}
.global-error-banner.show{ display:block; }
.skip-link{
position: absolute; left: -9999px; top: 0; z-index: 1000;
background: var(--green); color:#0A140E; padding: 12px 20px;
border-radius: 0 0 8px 0; font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600;
text-decoration:none;
}
.skip-link:focus{ left: 0; }
/* ---------- AMBIENT BACKGROUND ---------- */
.ambient{
position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events:none;
}
.ambient span{
position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.18;
will-change: transform;
}
.ambient .b1{
width: 480px; height: 480px; background: var(--green);
top: -10%; left: -10%;
animation: drift1 26s ease-in-out infinite alternate;
}
.ambient .b2{
width: 380px; height: 380px; background: var(--copper);
bottom: -10%; right: -8%;
animation: drift2 32s ease-in-out infinite alternate;
}
.ambient .b3{
width: 320px; height: 320px; background: var(--green-dim);
top: 40%; left: 60%;
animation: drift3 22s ease-in-out infinite alternate;
}
@keyframes drift1{
0%{ transform: translate(0,0) scale(1); }
100%{ transform: translate(120px,80px) scale(1.15); }
}
@keyframes drift2{
0%{ transform: translate(0,0) scale(1); }
100%{ transform: translate(-100px,-60px) scale(1.1); }
}
@keyframes drift3{
0%{ transform: translate(0,0) scale(1); }
100%{ transform: translate(-80px,100px) scale(0.9); }
}
@media (prefers-reduced-motion: reduce){
.ambient span{ animation: none !important; }
}
body:has(.dash-view.open) .ambient span{ animation-play-state: paused; }
[data-i18n], [data-i18n-html]{ }
/* ---------- RESPONSIVE PASS: mobile & tablet ---------- */
@media (max-width: 760px){
.wrap{ padding: 0 24px; }
.hero{ padding-top: 160px; padding-bottom: 60px; }
.thesis{ padding: 90px 0 70px; }
.daily{ padding: 40px 0 90px; }
.stages{ padding: 40px 0 90px; }
.features{ padding: 40px 0 90px; }
.testimonial{ padding: 20px 0 90px; }
.cta{ padding: 90px 0 70px; }
.stages-head{ margin-bottom: 56px; }
.features-head{ margin-bottom: 44px; }
.stage{ padding-bottom: 64px; }
.daily-card{ padding: 28px; }
.testimonial-card{ padding: 36px 24px; }
.testimonial-card::before{ font-size: 90px; top: 10px; left: 20px; }
}
@media (max-width: 420px){
.hero-actions{ gap: 16px; }
.cta-buttons{ gap: 12px; }
.store-btn{ padding: 11px 18px; font-size: 13px; }
}
/* ---------- RESPONSIVE PASS: laptop / large desktop ---------- */
@media (min-width: 1440px){
.wrap{ max-width: 1200px; }
.nav{ max-width: 1200px; }
}
/* CTA hierarchy */
.hero-actions .btn-primary{ min-height:54px; padding:0 30px; font-size:17px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.hero-actions .btn-ghost{ border-color:transparent; background:transparent; font-size:14px; text-decoration:underline; text-underline-offset:4px; }
@media (max-width:480px){ .hero-actions .btn-primary{ width:100%; } }
.early-pill{ display:inline-block; margin:0 0 18px; padding:6px 14px; border-radius:20px; background:rgba(201,168,118,.15); color:var(--copper); font-size:13px; font-weight:600; }
.proof{ text-align:center; padding:8px 0 24px; }
.proof-stages{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0 20px; }
.proof-stage{ background:var(--bg-panel); border:1px solid var(--line); border-radius:14px; padding:14px 8px; font-size:13px; color:var(--text-muted); }
.proof-stage.done,.proof-stage.now{ border-color:var(--copper); color:var(--text-warm); }
a.bn-item{ text-decoration:none; }
.bn-item{ max-width:76px; padding:6px 2px; }
a.feature-card{ text-decoration:none; color:inherit; display:block; }
/* ================= UX PASS: dashboard readability ================= */
.dash-view{
--bg-panel:#252B47; --bg-panel-2:#2F3658; --text-muted:#B8BED3;
--line:rgba(245,241,232,.16); --ok:#7FD1A6; --fire:#FFB26B; --info:#8B9DC9; --gold:#E3C48E;
}
.dash-view .dash-section-title{ font-size:20px; line-height:1.3; }
.dash-view .dash-panel-intro{ font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0 0 14px; }
.dash-view .preset-hint{ font-size:13px; color:var(--text-muted); margin:6px 0 10px; }
.dash-view .auth-field{ min-height:48px; font-size:16px; }
.dash-view .dash-stat-card{ position:relative; }
.dash-view .dash-stat-label{ font-size:13px; line-height:1.35; color:var(--text-muted); padding-right:28px; }
.stat-ico{ position:absolute; top:12px; right:12px; width:20px; height:20px; opacity:.9; }
.dash-stat-card:nth-child(1) .stat-ico{ color:var(--info); }
.dash-stat-card:nth-child(2) .stat-ico{ color:var(--fire); }
.dash-stat-card:nth-child(3) .stat-ico{ color:var(--gold); }
.dash-stat-card:nth-child(4) .stat-ico{ color:var(--ok); }
.monthly-chart-wrap{ position:relative; }
.chart-empty{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
text-align:center; padding:0 16px; font-size:13.5px; line-height:1.5; color:var(--text-muted);
pointer-events:none;
}
.chart-empty[hidden]{ display:none; }
/* profile form */
.pinfo-fld{ display:block; margin:0; }
.pinfo-grid .auth-field{ margin:0; width:100%; }
.pinfo-grid{ gap:14px 12px; }
.fld-label{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--text-muted); margin:0 0 6px; }
.soc-ico{
display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
border-radius:6px; font-style:normal; font-size:11px; font-weight:700; color:#fff; background:var(--info);
}
.soc-fb{ background:#1877F2; } .soc-ig{ background:#C13584; } .soc-tt{ background:#25F4EE; color:#111; } .soc-in{ background:#0A66C2; }
.pinfo-fld input[inputmode="url"]{ text-overflow:ellipsis; }
/* chips: flat, no glow */
.preset-chip{ min-height:40px; font-size:14px; padding:8px 14px; box-shadow:none !important; text-shadow:none !important; }
.preset-chip:hover{ box-shadow:none !important; background:var(--bg-panel-2); }
.preset-chip.added{ opacity:.6; cursor:default; }
.preset-chip.added::after{ content:' ✓'; color:var(--ok); }
.area-chip.active{ box-shadow:none !important; text-shadow:none !important; border-color:var(--copper); background:rgba(200,133,88,.16); }
/* habit list */
.habit-group-title{ display:flex; align-items:center; gap:10px; font-size:13px; letter-spacing:.06em; color:var(--text-muted); margin:22px 0 10px; }
.habit-group-title::after{ content:''; flex:1; height:1px; background:var(--line); }
.dash-item{ margin-bottom:14px; gap:10px; }
.dash-item-del, .dash-item-cal{ min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.dash-item input[type="checkbox"]{ width:28px; height:28px; min-width:28px; }
.stab-track{ min-height:48px; }
.stab-track *{ font-size:13px; }
.ai-coach-text{ font-size:15.5px; line-height:1.75; white-space:pre-line; }
/* bottom nav */
.dash-bottomnav{ padding:6px 4px calc(10px + env(safe-area-inset-bottom)); }
.bn-item{ max-width:none; min-height:56px; font-size:11.5px; white-space:nowrap; justify-content:center; }
.bn-item svg{ width:26px; height:26px; }
.bn-item.active{ color:#fff; }
.bn-item.active svg{ filter:none; transform:none; }
.bn-item.active span{ text-shadow:none; }
.bn-item.active::before{ top:-7px; width:32px; height:3px; border-radius:3px; background:var(--copper); }
.dash-content{ padding-bottom:110px; }