/* ======================================================
   ARCANA — Component Library
   ====================================================== */

/* --- Buttons --- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);border-radius:var(--radius-sm);font-weight:var(--fw-semibold);font-size:var(--fs-small);letter-spacing:var(--ls-wide);transition:all var(--transition-default);white-space:nowrap;position:relative;overflow:hidden;line-height:1.4}
.btn::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.1),transparent);opacity:0;transition:opacity var(--transition-default)}
.btn:hover::after{opacity:1}
.btn:active{transform:scale(0.97)}

.btn--primary{background:var(--gradient-gold);color:var(--text-inverse);box-shadow:0 4px 16px rgba(212,168,83,0.3)}
.btn--primary:hover{box-shadow:0 6px 24px rgba(212,168,83,0.5);transform:translateY(-1px)}

.btn--secondary{background:var(--glass-bg);color:var(--text-primary);border:1px solid var(--glass-border);backdrop-filter:blur(var(--glass-blur))}
.btn--secondary:hover{background:var(--bg-surface-hover);border-color:var(--accent-gold-dim)}

.btn--ghost{background:transparent;color:var(--accent-gold)}
.btn--ghost:hover{background:var(--bg-surface)}

.btn--outline{background:transparent;border:1px solid var(--accent-gold-dim);color:var(--accent-gold)}
.btn--outline:hover{background:rgba(212,168,83,0.1);border-color:var(--accent-gold)}

.btn--purple{background:var(--gradient-mystical);color:white;box-shadow:0 4px 16px rgba(139,92,246,0.3)}
.btn--purple:hover{box-shadow:0 6px 24px rgba(139,92,246,0.5);transform:translateY(-1px)}

.btn--danger{background:var(--danger);color:white}
.btn--danger:hover{background:#dc2626}

.btn--lg{padding:var(--space-4) var(--space-8);font-size:var(--fs-body);border-radius:var(--radius-md)}
.btn--sm{padding:var(--space-2) var(--space-4);font-size:var(--fs-caption)}
.btn--block{width:100%}
.btn--icon{width:44px;height:44px;padding:0;border-radius:var(--radius-full)}
.btn--icon.btn--sm{width:36px;height:36px}

.btn:disabled,.btn--disabled{opacity:0.5;pointer-events:none;cursor:not-allowed}

/* --- Glass Card --- */
.card{background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:var(--space-6);transition:all var(--transition-default);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(212,168,83,0.3),transparent)}
.card:hover{border-color:var(--accent-gold-dim);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.card--interactive{cursor:pointer}
.card--interactive:hover{box-shadow:var(--shadow-glow-gold)}
.card--flat{backdrop-filter:none;background:var(--bg-surface);border-color:rgba(255,255,255,0.05)}
.card--no-hover:hover{transform:none;box-shadow:none}
.card--purple{border-color:var(--glass-border-purple)}
.card--purple::before{background:linear-gradient(90deg,transparent,rgba(139,92,246,0.3),transparent)}
.card--purple:hover{border-color:var(--accent-purple-dim);box-shadow:var(--shadow-glow-purple)}

.card__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.card__title{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
.card__body{color:var(--text-secondary);line-height:var(--lh-relaxed)}
.card__footer{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--glass-border);display:flex;align-items:center;justify-content:space-between}
.card__image{width:100%;border-radius:var(--radius-sm);margin-bottom:var(--space-4);aspect-ratio:16/9;object-fit:cover;background:var(--bg-tertiary)}

/* --- Tarot Card Component --- */
.tarot-card{width:140px;height:240px;perspective:1000px;cursor:pointer;flex-shrink:0}
.tarot-card__inner{position:relative;width:100%;height:100%;transition:transform 0.6s ease-in-out;transform-style:preserve-3d;border-radius:var(--radius-md)}
.tarot-card--flipped .tarot-card__inner{transform:rotateY(180deg)}
.tarot-card__face{position:absolute;width:100%;height:100%;backface-visibility:hidden;border-radius:var(--radius-md);overflow:hidden;border:2px solid var(--accent-gold-dim);box-shadow:var(--shadow-md)}
.tarot-card__front{background:var(--bg-secondary);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-3)}
.tarot-card__front-art{width:100%;flex:1;background:var(--gradient-celestial);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:3rem;margin-bottom:var(--space-2)}
.tarot-card__front-name{font-family:var(--font-heading);font-size:var(--fs-caption);color:var(--accent-gold);text-align:center;letter-spacing:var(--ls-wide)}
.tarot-card__back{background:var(--gradient-celestial);transform:rotateY(180deg);display:flex;align-items:center;justify-content:center}
.tarot-card__back-pattern{width:80%;height:80%;border:1px solid var(--accent-gold-dim);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,rgba(212,168,83,0.1),transparent)}
.tarot-card__back-pattern::after{content:'✦';font-size:2rem;color:var(--accent-gold);animation:float 3s ease-in-out infinite}
.tarot-card:hover .tarot-card__inner{transform:translateY(-5px)}
.tarot-card--flipped:hover .tarot-card__inner{transform:rotateY(180deg) translateY(-5px)}
.tarot-card--sm{width:100px;height:170px}
.tarot-card--lg{width:180px;height:310px}
.tarot-card--reversed .tarot-card__front{transform:rotate(180deg)}

/* --- Inputs --- */
.input-group{display:flex;flex-direction:column;gap:var(--space-2)}
.input-group__label{font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--text-secondary)}
.input{width:100%;padding:var(--space-3) var(--space-4);background:var(--bg-surface);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:var(--fs-body);transition:all var(--transition-default)}
.input:focus{border-color:var(--accent-gold);box-shadow:0 0 0 3px var(--accent-gold-dim);background:var(--bg-surface-hover)}
.input::placeholder{color:var(--text-muted)}
.input--lg{padding:var(--space-4) var(--space-5);font-size:1.05rem}
.textarea{min-height:120px;resize:vertical;line-height:var(--lh-relaxed)}
.input-icon-wrapper{position:relative}
.input-icon-wrapper .input{padding-left:var(--space-10)}
.input-icon-wrapper .input-icon{position:absolute;left:var(--space-4);top:50%;transform:translateY(-50%);color:var(--text-muted);font-size:1.1rem}

.search-box{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--glass-bg);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--glass-border);border-radius:var(--radius-full);transition:all var(--transition-default)}
.search-box:focus-within{border-color:var(--accent-gold);box-shadow:0 0 0 3px var(--accent-gold-dim)}
.search-box__icon{color:var(--text-muted);font-size:1.1rem;flex-shrink:0}
.search-box__input{flex:1;background:none;border:none;color:var(--text-primary);font-size:var(--fs-small)}
.search-box__input::placeholder{color:var(--text-muted)}

/* --- Sidebar Navigation (Desktop) --- */
.sidebar{display:flex;flex-direction:column;height:100%;background:var(--glass-bg-heavy);backdrop-filter:blur(var(--glass-blur));border-right:1px solid var(--glass-border);padding:var(--space-6) 0;overflow-y:auto}
.sidebar__brand{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-6);margin-bottom:var(--space-8)}
.sidebar__brand-icon{font-size:1.8rem;color:var(--accent-gold);animation:float 4s ease-in-out infinite}
.sidebar__brand-name{font-family:var(--font-display);font-size:1.1rem;color:var(--accent-gold);letter-spacing:var(--ls-wider)}
.sidebar__nav{flex:1;display:flex;flex-direction:column;gap:var(--space-1);padding:0 var(--space-3)}
.sidebar__link{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:var(--fs-small);font-weight:var(--fw-medium);transition:all var(--transition-default);text-decoration:none}
.sidebar__link:hover{color:var(--text-primary);background:var(--bg-surface)}
.sidebar__link--active{color:var(--accent-gold);background:rgba(212,168,83,0.1);border:1px solid var(--accent-gold-dim)}
.sidebar__link-icon{font-size:1.2rem;width:24px;text-align:center}
.sidebar__section{padding:var(--space-4) var(--space-6) var(--space-2);font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:var(--ls-widest);text-transform:uppercase;color:var(--text-muted)}
.sidebar__footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--glass-border);margin-top:auto}
.sidebar__user{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--transition-default)}
.sidebar__user:hover{background:var(--bg-surface)}
.sidebar__avatar{width:40px;height:40px;border-radius:var(--radius-full);background:var(--gradient-mystical);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-small);flex-shrink:0}
.sidebar__user-name{font-size:var(--fs-small);font-weight:var(--fw-medium)}
.sidebar__user-plan{font-size:var(--fs-caption);color:var(--accent-gold)}

/* --- Bottom Tab Bar (Mobile) --- */
.bottombar{display:flex;align-items:center;justify-content:space-around;height:var(--bottombar-height);background:var(--glass-bg-heavy);backdrop-filter:blur(var(--glass-blur));-webkit-backdrop-filter:blur(var(--glass-blur));border-top:1px solid var(--glass-border);padding-bottom:env(safe-area-inset-bottom,0px)}
.bottombar__item{display:flex;flex-direction:column;align-items:center;gap:2px;padding:var(--space-2);color:var(--text-muted);font-size:var(--fs-caption);text-decoration:none;transition:color var(--transition-default);min-width:56px}
.bottombar__item:hover,.bottombar__item--active{color:var(--accent-gold)}
.bottombar__item--active{position:relative}
.bottombar__item--active::after{content:'';position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:24px;height:2px;background:var(--accent-gold);border-radius:var(--radius-full)}
.bottombar__icon{font-size:1.4rem;line-height:1}
.bottombar__label{font-size:10px;font-weight:var(--fw-medium)}

/* --- Top Bar --- */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4);height:var(--topbar-height);position:sticky;top:0;z-index:var(--z-sticky);background:rgba(10,10,26,0.8);backdrop-filter:blur(var(--glass-blur))}
.topbar__left,.topbar__right{display:flex;align-items:center;gap:var(--space-3)}
.topbar__title{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
.topbar__back{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-secondary);transition:all var(--transition-default);font-size:1.2rem;cursor:pointer}
.topbar__back:hover{background:var(--bg-surface);color:var(--text-primary)}

/* --- Modal --- */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.6);backdrop-filter:blur(8px);z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:var(--space-4);opacity:0;pointer-events:none;transition:opacity var(--transition-default)}
.modal-overlay--active{opacity:1;pointer-events:all}
.modal{background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-8);max-width:480px;width:100%;max-height:90vh;overflow-y:auto;transform:scale(0.9) translateY(20px);transition:transform var(--transition-bounce);position:relative}
.modal-overlay--active .modal{transform:scale(1) translateY(0)}
.modal__close{position:absolute;top:var(--space-4);right:var(--space-4);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);cursor:pointer;transition:all var(--transition-default)}
.modal__close:hover{background:var(--bg-surface);color:var(--text-primary)}
.modal__title{font-family:var(--font-heading);font-size:var(--fs-h2);margin-bottom:var(--space-4)}
.modal__body{color:var(--text-secondary);margin-bottom:var(--space-6)}
.modal__actions{display:flex;gap:var(--space-3);justify-content:flex-end}

/* --- Toast --- */
.toast-container{position:fixed;top:var(--space-6);right:var(--space-6);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--space-3);pointer-events:none}
.toast{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-4) var(--space-5);background:var(--bg-secondary);border:1px solid var(--glass-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);pointer-events:all;animation:fadeInDown .3s var(--ease-default) both;min-width:280px}
.toast--success{border-color:rgba(16,185,129,0.3)}
.toast--success .toast__icon{color:var(--success)}
.toast--warning{border-color:rgba(245,158,11,0.3)}
.toast--warning .toast__icon{color:var(--warning)}
.toast--error{border-color:rgba(239,68,68,0.3)}
.toast--error .toast__icon{color:var(--danger)}
.toast__icon{font-size:1.2rem;flex-shrink:0}
.toast__message{font-size:var(--fs-small);flex:1}
.toast__close{cursor:pointer;color:var(--text-muted);font-size:1.1rem;padding:var(--space-1)}
@media(max-width:768px){.toast-container{top:auto;bottom:calc(var(--bottombar-height) + var(--space-4));right:var(--space-4);left:var(--space-4)}.toast{min-width:auto}}

/* --- Badge / Tag --- */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:2px var(--space-3);border-radius:var(--radius-full);font-size:var(--fs-caption);font-weight:var(--fw-semibold);letter-spacing:var(--ls-wide)}
.badge--gold{background:rgba(212,168,83,0.15);color:var(--accent-gold);border:1px solid var(--accent-gold-dim)}
.badge--purple{background:rgba(139,92,246,0.15);color:var(--accent-purple-light);border:1px solid var(--accent-purple-dim)}
.badge--blue{background:rgba(59,130,246,0.15);color:var(--accent-blue-light);border:1px solid rgba(59,130,246,0.3)}
.badge--success{background:rgba(16,185,129,0.15);color:var(--success)}
.badge--premium{background:var(--gradient-gold);color:var(--text-inverse);border:none}

.tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--fs-caption);background:var(--bg-surface);border:1px solid rgba(255,255,255,0.05);cursor:pointer;transition:all var(--transition-default)}
.tag:hover{background:var(--bg-surface-hover);border-color:var(--accent-gold-dim)}
.tag--active{background:rgba(212,168,83,0.15);border-color:var(--accent-gold-dim);color:var(--accent-gold)}

/* --- Avatar --- */
.avatar{width:48px;height:48px;border-radius:var(--radius-full);overflow:hidden;display:flex;align-items:center;justify-content:center;background:var(--gradient-mystical);font-weight:var(--fw-bold);font-size:var(--fs-body);flex-shrink:0;border:2px solid var(--glass-border)}
.avatar--sm{width:32px;height:32px;font-size:var(--fs-caption)}
.avatar--lg{width:64px;height:64px;font-size:var(--fs-h3)}
.avatar--xl{width:96px;height:96px;font-size:var(--fs-h1);border-width:3px}
.avatar--gold{border-color:var(--accent-gold-dim)}
.avatar img{width:100%;height:100%;object-fit:cover}

/* --- Progress --- */
.progress{width:100%;height:6px;background:var(--bg-surface);border-radius:var(--radius-full);overflow:hidden}
.progress__bar{height:100%;background:var(--gradient-gold);border-radius:var(--radius-full);transition:width 0.5s var(--ease-default)}
.progress--purple .progress__bar{background:var(--gradient-mystical)}

/* --- Tabs --- */
.tabs{display:flex;gap:var(--space-1);padding:var(--space-1);background:var(--bg-surface);border-radius:var(--radius-sm);overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs__item{padding:var(--space-2) var(--space-4);border-radius:var(--radius-sm);font-size:var(--fs-small);font-weight:var(--fw-medium);color:var(--text-secondary);cursor:pointer;transition:all var(--transition-default);white-space:nowrap;text-align:center;flex:1}
.tabs__item:hover{color:var(--text-primary)}
.tabs__item--active{background:var(--glass-bg);color:var(--accent-gold);border:1px solid var(--glass-border)}

/* --- Stat Card --- */
.stat{display:flex;flex-direction:column;align-items:center;padding:var(--space-4);text-align:center}
.stat__value{font-family:var(--font-heading);font-size:var(--fs-h2);font-weight:var(--fw-bold);color:var(--accent-gold);line-height:1}
.stat__label{font-size:var(--fs-caption);color:var(--text-secondary);margin-top:var(--space-1)}

/* --- Empty State --- */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-16) var(--space-8);text-align:center}
.empty-state__icon{font-size:4rem;margin-bottom:var(--space-6);opacity:0.4}
.empty-state__title{font-family:var(--font-heading);font-size:var(--fs-h3);margin-bottom:var(--space-2)}
.empty-state__text{color:var(--text-secondary);max-width:320px;margin-bottom:var(--space-6)}

/* --- Toggle --- */
.toggle{position:relative;width:48px;height:26px;cursor:pointer}
.toggle input{display:none}
.toggle__track{position:absolute;inset:0;background:var(--bg-tertiary);border-radius:var(--radius-full);border:1px solid var(--glass-border);transition:all var(--transition-default)}
.toggle__thumb{position:absolute;top:3px;left:3px;width:20px;height:20px;background:var(--text-secondary);border-radius:var(--radius-full);transition:all var(--transition-bounce)}
.toggle input:checked ~ .toggle__track{background:var(--accent-purple-dim);border-color:var(--accent-purple)}
.toggle input:checked ~ .toggle__thumb{left:25px;background:var(--accent-purple)}

/* --- Chip/Filter Row --- */
.chip-row{display:flex;gap:var(--space-2);overflow-x:auto;padding:var(--space-2) 0;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chip-row::-webkit-scrollbar{display:none}
.chip{padding:var(--space-2) var(--space-4);border-radius:var(--radius-full);font-size:var(--fs-caption);font-weight:var(--fw-medium);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-secondary);cursor:pointer;white-space:nowrap;transition:all var(--transition-default)}
.chip:hover{border-color:var(--accent-gold-dim);color:var(--text-primary)}
.chip--active{background:rgba(212,168,83,0.15);border-color:var(--accent-gold);color:var(--accent-gold)}

/* --- Loading Spinner --- */
.spinner{width:40px;height:40px;border:3px solid var(--glass-border);border-top-color:var(--accent-gold);border-radius:var(--radius-full);animation:spin 0.8s linear infinite}
.spinner--sm{width:24px;height:24px;border-width:2px}
.spinner--lg{width:56px;height:56px;border-width:4px}

/* Crystal ball loader */
.crystal-loader{width:60px;height:60px;border-radius:var(--radius-full);background:radial-gradient(circle at 35% 35%,rgba(139,92,246,0.4),rgba(59,130,246,0.2),transparent);border:2px solid var(--accent-purple-dim);animation:glowPulsePurple 2s ease-in-out infinite;display:flex;align-items:center;justify-content:center;font-size:1.5rem}

/* --- Skeleton --- */
.skeleton{background:var(--bg-surface);border-radius:var(--radius-sm);position:relative;overflow:hidden}
.skeleton::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.05),transparent);animation:shimmer 1.5s infinite}
.skeleton--text{height:14px;width:80%;border-radius:var(--radius-full)}
.skeleton--title{height:20px;width:60%;border-radius:var(--radius-full)}
.skeleton--avatar{width:48px;height:48px;border-radius:var(--radius-full)}
.skeleton--card{height:200px;border-radius:var(--radius-md)}

/* --- List Item --- */
.list-item{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-sm);transition:background var(--transition-default);cursor:pointer}
.list-item:hover{background:var(--bg-surface)}
.list-item__icon{width:44px;height:44px;border-radius:var(--radius-md);background:var(--bg-surface);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.list-item__content{flex:1;min-width:0}
.list-item__title{font-weight:var(--fw-medium);font-size:var(--fs-small);margin-bottom:2px}
.list-item__subtitle{font-size:var(--fs-caption);color:var(--text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item__right{flex-shrink:0;color:var(--text-muted);font-size:var(--fs-small)}
.list-item +.list-item{border-top:1px solid rgba(255,255,255,0.03)}

/* --- Pricing Card --- */
.pricing-card{background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:var(--space-8);text-align:center;transition:all var(--transition-default);position:relative;overflow:hidden}
.pricing-card--featured{border-color:var(--accent-gold-dim);background:linear-gradient(180deg,rgba(212,168,83,0.08),var(--glass-bg))}
.pricing-card--featured::before{content:'MOST POPULAR';position:absolute;top:14px;right:-32px;transform:rotate(45deg);background:var(--gradient-gold);color:var(--text-inverse);font-size:10px;font-weight:var(--fw-bold);letter-spacing:var(--ls-widest);padding:4px 40px}
.pricing-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-xl)}
.pricing-card__name{font-family:var(--font-heading);font-size:var(--fs-h3);margin-bottom:var(--space-2)}
.pricing-card__price{font-family:var(--font-heading);font-size:var(--fs-display);color:var(--accent-gold);margin:var(--space-4) 0}
.pricing-card__price span{font-size:var(--fs-body);color:var(--text-secondary)}
.pricing-card__features{list-style:none;text-align:left;margin:var(--space-6) 0}
.pricing-card__features li{padding:var(--space-2) 0;font-size:var(--fs-small);color:var(--text-secondary);display:flex;align-items:center;gap:var(--space-2)}
.pricing-card__features li::before{content:'✦';color:var(--accent-gold);font-size:0.7rem}

/* --- Horizontal Scroll Container --- */
.hscroll{display:flex;gap:var(--space-4);overflow-x:auto;padding:var(--space-2) 0;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;scrollbar-width:none}
.hscroll::-webkit-scrollbar{display:none}
.hscroll>*{scroll-snap-align:start;flex-shrink:0}

/* --- Section Header --- */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-4)}
.section-header__title{font-family:var(--font-heading);font-size:var(--fs-h3);font-weight:var(--fw-semibold)}
.section-header__link{font-size:var(--fs-small);color:var(--accent-gold);cursor:pointer;display:flex;align-items:center;gap:var(--space-1)}

/* --- Moon Phase indicator --- */
.moon-phase{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--bg-surface);border-radius:var(--radius-full);font-size:var(--fs-caption);color:var(--text-secondary)}
.moon-phase__icon{font-size:1.2rem;animation:moonGlow 4s ease-in-out infinite}

/* --- Emotion picker --- */
.emotion-picker{display:flex;gap:var(--space-3);flex-wrap:wrap}
.emotion-picker__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-default);border:1px solid transparent;font-size:var(--fs-caption);color:var(--text-secondary)}
.emotion-picker__item:hover{background:var(--bg-surface);border-color:var(--glass-border)}
.emotion-picker__item--active{background:rgba(212,168,83,0.1);border-color:var(--accent-gold-dim);color:var(--accent-gold)}
.emotion-picker__emoji{font-size:1.5rem}