html.app-gate{background:#0a0a0f}
html.app-gate body{visibility:hidden;overflow:hidden;position:fixed;width:100%;height:100%}
html.app-gate #authModal{visibility:visible}
#authModal.active{background:#0a0a0f}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
select,select option{background:#151520;color:#f1f5f9}
:root{--bg:#0a0a0f;--card:#151520;--card2:#1e1e2d;--primary:#22c55e;--accent:#14b8a6;--purple:#a855f7;--blue:#3b82f6;--text:#f1f5f9;--dim:#94a3b8;--danger:#ef4444;--warning:#f59e0b;--gold:#fbbf24;--cat-flower:#22c55e;--cat-concentrate:#fbbf24;--cat-edible:#ec4899;--cat-cart:#3b82f6;--cat-preroll:#f97316;--cat-moonrock:#a78bfa;--cat-caviar:#f43f5e;--cat-kief:#d4a574}
html{overflow:hidden;height:100%;overscroll-behavior-y:contain;color-scheme:dark}
body{font-family:'SF Pro Display',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);height:100%;overflow:hidden;overscroll-behavior-y:contain}
.header{background:var(--card);padding:12px 16px;padding-top:max(12px,env(safe-area-inset-top,12px));display:flex;align-items:center;justify-content:space-between;border-bottom:none;position:fixed;top:0;left:0;right:0;z-index:100}
.logo{display:flex;align-items:center;gap:10px}
.logo .icon{font-size:28px}
.logo .text{font-size:20px;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.header-actions{display:flex;gap:4px;flex-shrink:0}
.header-btn{background:var(--card2);border:none;color:var(--text);width:36px;height:36px;border-radius:10px;font-size:16px;cursor:pointer;transition:transform 0.15s;flex-shrink:0}
.header-btn:hover{transform:scale(1.1)}
@media(max-width:420px){.header-btn{width:32px;height:32px;font-size:14px;border-radius:8px}.header-actions{gap:3px}.logo .text{font-size:17px}.header-btn.header-add{font-size:18px}}
.header-btn.header-add{background:var(--primary);color:#000;font-weight:bold;font-size:22px;box-shadow:0 2px 8px rgba(34,197,94,0.4)}
.header-btn.header-log{background:linear-gradient(135deg,#ff6b35,#f59e0b);color:#fff;box-shadow:0 2px 8px rgba(255,107,53,0.4)}

/* Tabs */
.tabs{display:flex;background:var(--card);border-bottom:1px solid rgba(255,255,255,0.05);border-top:1px solid var(--card);position:fixed;top:calc(44px + max(12px,env(safe-area-inset-top,12px)));left:0;right:0;z-index:99}
.tab{flex:1;padding:12px 2px;text-align:center;font-size:10px;color:var(--dim);cursor:pointer;border-bottom:2px solid transparent;transition:all 0.2s}
.tab.active{color:var(--primary);border-bottom-color:var(--primary)}
.tab .icon{font-size:20px;display:block;margin-bottom:4px}

/* Views */
.view{display:none;padding:20px}
.view.active{display:block;position:fixed;top:calc(114px + max(12px,env(safe-area-inset-top,12px)));left:0;right:0;bottom:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;padding-bottom:calc(80px + env(safe-area-inset-bottom,0px))}

/* Stats Cards */
.stats-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}
.stat-card{background:var(--card);border-radius:12px;padding:14px;text-align:center}
.stat-card .value{font-size:24px;font-weight:700;color:var(--primary)}
.stat-card .label{font-size:10px;color:var(--dim);margin-top:2px;text-transform:uppercase}

/* Quick Pick Section */
.section-title{font-size:13px;color:var(--dim);text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.section-title::before{content:'';width:4px;height:14px;background:var(--primary);border-radius:2px}

.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:24px}
.mood-btn{background:var(--card);border:2px solid transparent;border-radius:20px;padding:8px 10px;display:flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;transition:all 0.2s}
.mood-btn.active{border-color:var(--primary);background:rgba(34,197,94,0.1)}
.mood-btn .emoji{font-size:18px;line-height:1}
.mood-btn .label{font-size:12px;font-weight:500}

/* Recommendation Card */
.reco-card{background:linear-gradient(135deg,rgba(34,197,94,0.15),var(--card));border:1px solid rgba(34,197,94,0.3);border-radius:16px;padding:18px;margin-bottom:16px}
.reco-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.reco-label{font-size:11px;color:var(--primary);text-transform:uppercase;letter-spacing:1px}
.reco-match{background:var(--primary);color:var(--bg);padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600}
.reco-name{font-size:20px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:8px}
.reco-type{font-size:10px;padding:3px 8px;border-radius:4px;font-weight:600}
.type-sativa{background:color-mix(in srgb,var(--accent) 20%,transparent);color:var(--accent)}
.type-indica{background:color-mix(in srgb,var(--purple) 20%,transparent);color:var(--purple)}
.type-hybrid{background:color-mix(in srgb,var(--primary) 20%,transparent);color:var(--primary)}
.type-sativa-dominant{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.type-indica-dominant{background:color-mix(in srgb,var(--purple) 15%,transparent);color:var(--purple)}
.type-edible{background:rgba(59,130,246,0.2);color:var(--blue)}
.reco-cat{font-size:12px;color:var(--dim);margin-bottom:8px}
.reco-effects{font-size:11px;color:var(--accent)}
.reco-actions{display:flex;gap:8px;margin-top:12px}
.reco-btn{flex:1;padding:10px;border:none;border-radius:10px;font-size:13px;font-weight:500;cursor:pointer}
.reco-btn.primary{background:var(--primary);color:var(--bg)}
.reco-btn.secondary{background:var(--card2);color:var(--text)}

/* Stash Section */
.category-tabs{display:flex;gap:8px;margin-bottom:16px;overflow-x:auto;padding-bottom:4px}
.category-tabs::-webkit-scrollbar{display:none}
.cat-tab{padding:8px 14px;background:var(--card);border:1px solid rgba(255,255,255,0.08);border-radius:20px;font-size:12px;white-space:nowrap;cursor:pointer}
.cat-tab.active{background:var(--primary);color:var(--bg);border-color:var(--primary)}

.stash-item{background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px;display:flex;flex-direction:column;gap:10px}
.stash-main{display:flex;gap:12px;flex:1;cursor:pointer;align-items:center}
.stash-item .icon{width:48px;height:48px;background:var(--card2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.stash-item .info{flex:1;min-width:0}
.stash-item .name{font-size:15px;font-weight:600;margin-bottom:2px;line-height:1.3;display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.stash-item .meta{font-size:11px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stash-item .badge{font-size:9px;padding:2px 6px;border-radius:4px}
.stash-item .thc-badge{font-size:9px;padding:2px 6px;border-radius:4px;background:rgba(34,197,94,0.2);color:var(--primary)}
.stash-stats{display:flex;gap:6px;margin-top:4px;flex-wrap:wrap}
.stat-box{font-size:10px;padding:3px 8px;border-radius:6px;background:var(--card2);color:var(--dim);display:inline-flex;align-items:center;gap:3px;font-weight:500}
.stat-box.qty-active{background:rgba(34,197,94,0.15);color:var(--primary)}
.stat-box.qty-low{background:rgba(255,107,53,0.15);color:#ff6b35}
.stash-actions{display:flex;gap:8px;justify-content:flex-end}
.stash-action-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--card2);background:var(--card2);color:var(--dim);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s}
.stash-action-btn:hover{background:var(--primary);color:white;border-color:var(--primary)}
.stash-action-btn.restock{background:rgba(34,197,94,0.2);border-color:var(--primary);color:var(--primary)}
.stash-action-btn.restock:hover{background:var(--primary);color:white}
.stash-item .fav{color:var(--gold)}
@media(min-width:500px){.stash-item{flex-direction:row;align-items:center}.stash-actions{justify-content:flex-start}}
@media(max-width:400px){.compare-inputs{grid-template-columns:1fr}}

/* Journal */
.journal-entry{background:var(--card);border-radius:14px;padding:14px;margin-bottom:10px}
.journal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px}
.journal-date{font-size:11px;color:var(--dim)}
.journal-mood{font-size:20px}
.journal-strain{font-size:15px;font-weight:600;margin-bottom:4px;display:flex;align-items:center;gap:6px}
.journal-details{display:flex;gap:12px;font-size:11px;color:var(--dim);margin-bottom:8px}
.journal-notes{font-size:12px;color:var(--accent);font-style:italic}
.journal-rating{display:flex;gap:2px;margin-top:8px}
.journal-rating .star{font-size:16px;color:var(--card2)}
.journal-rating .star.on{color:var(--gold)}

/* Add Button */


/* Modals */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.9);display:none;align-items:flex-end;justify-content:center;z-index:200;backdrop-filter:blur(8px)}
.modal-overlay.active{display:flex}
.modal{background:linear-gradient(180deg,var(--card) 0%,#0d1117 100%);border-radius:24px 24px 0 0;width:100%;max-width:500px;max-height:95vh;overflow-y:auto;padding:0;border-top:2px solid var(--primary);box-shadow:0 -10px 60px rgba(34,197,94,0.15),0 -2px 20px rgba(0,0,0,0.5)}
.modal::-webkit-scrollbar{width:8px}
.modal::-webkit-scrollbar-track{background:var(--card);border-radius:0 24px 0 0}
.modal::-webkit-scrollbar-thumb{background:var(--primary);border-radius:4px}
.modal::-webkit-scrollbar-thumb:hover{background:var(--accent)}
.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;padding-top:max(20px,env(safe-area-inset-top,20px));padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,0.1);position:sticky;top:0;background:var(--card);z-index:10;border-radius:24px 24px 0 0}
.modal-header h3{font-size:18px;background:linear-gradient(135deg,var(--primary),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:0}
.modal-content{padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.modal-close{background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.1);color:var(--text);width:32px;height:32px;border-radius:10px;font-size:20px;cursor:pointer;transition:all 0.2s}
.modal-close:hover{background:rgba(255,107,53,0.2);border-color:var(--accent);color:var(--accent)}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;color:var(--dim);margin-bottom:6px}
.form-input{width:100%;background:var(--bg);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px;color:var(--text);font-size:15px;box-sizing:border-box}
.form-input:focus{outline:none;border-color:var(--primary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
select.form-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%239ca3af' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
textarea.form-input{min-height:80px;resize:vertical;font-family:inherit}
.picker-tap{padding:10px;text-align:center;cursor:pointer;font-size:14px}
.picker-grid{display:flex;flex-wrap:wrap;gap:6px}
.picker-grid .pp{padding:12px 0;background:var(--bg);border:1px solid rgba(255,255,255,0.15);border-radius:8px;font-size:14px;cursor:pointer;color:var(--text);text-align:center;flex:1 0 calc(25% - 5px);min-width:0}
.picker-grid-days .pp{flex:1 0 calc(14.28% - 6px)}
.picker-grid .pp.active{background:var(--primary);color:var(--bg);border-color:var(--primary)}
.strain-dropdown,.cat-dropdown{position:relative;width:100%}
.strain-dropdown-trigger{width:100%;background:var(--bg);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:12px;color:var(--text);font-size:15px;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;justify-content:space-between}
.strain-dropdown-trigger:focus{outline:none;border-color:var(--primary)}
.strain-dropdown-trigger svg{flex-shrink:0}
.strain-dropdown-trigger .dd-arrow{width:12px;height:12px;fill:var(--dim);flex-shrink:0;transition:transform 0.2s}
.strain-dropdown.open .dd-arrow,.cat-dropdown.open .dd-arrow{transform:rotate(180deg)}
.strain-dropdown-menu{display:none;position:absolute;top:100%;left:0;right:0;margin-top:4px;background:var(--card);border:1px solid rgba(255,255,255,0.12);border-radius:10px;max-height:260px;overflow-y:auto;z-index:1000;box-shadow:0 8px 24px rgba(0,0,0,0.4)}
.strain-dropdown.open .strain-dropdown-menu,.cat-dropdown.open .strain-dropdown-menu{display:block}
.strain-dd-option{padding:10px 12px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:14px;color:var(--text);transition:background 0.15s}
.strain-dd-option:hover{background:rgba(255,255,255,0.06)}
.strain-dd-option.selected{background:rgba(var(--primary-rgb),0.15)}
.strain-dd-option svg{flex-shrink:0}
.strain-dd-option .dd-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.strain-dd-option .dd-empty{color:var(--dim);font-size:11px;margin-left:4px}
.btn{width:100%;padding:14px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;margin-top:8px}
.btn-primary{background:var(--primary);color:var(--bg)}
.btn-secondary{background:var(--card2);color:var(--text)}
.btn-danger{background:var(--danger);color:white}
.btn-danger{background:rgba(239,68,68,0.15);color:var(--danger)}

/* Rating Input */
.rating-input{display:flex;gap:8px;justify-content:center;padding:10px 0}
.rating-input .star{font-size:32px;cursor:pointer;color:var(--card2);transition:color 0.2s}
.rating-input .star.on{color:var(--gold)}

/* Mood Selector in Modal */
.mood-select{display:flex;gap:8px;flex-wrap:wrap}
.mood-option{padding:10px 16px;background:var(--bg);border:1px solid rgba(255,255,255,0.1);border-radius:20px;font-size:13px;cursor:pointer}
.mood-option.active{background:var(--primary);color:var(--bg);border-color:var(--primary)}

/* Import Section */
.import-area{border:2px dashed rgba(255,255,255,0.15);border-radius:12px;padding:30px;text-align:center;cursor:pointer}
.import-area:hover{border-color:var(--primary)}
.import-area .icon{font-size:40px;margin-bottom:8px}
.import-area p{color:var(--dim);font-size:13px}

/* Empty State */
.empty-state{text-align:center;padding:40px 20px;color:var(--dim)}
.empty-state .emoji{font-size:48px;margin-bottom:12px}
.empty-state h3{color:var(--text);margin-bottom:6px}

/* Onboarding Wizard */
.onboard-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:350;display:none;align-items:center;justify-content:center;padding:20px}
.onboard-overlay.active{display:flex}
.onboard-container{background:var(--card);border-radius:20px;max-width:420px;width:100%;padding:32px 24px 24px;position:relative;max-height:90vh;overflow-y:auto}
.onboard-card{display:none;text-align:center;animation:onboardFade 0.3s ease}
.onboard-card.active{display:block}
@keyframes onboardFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
.onboard-card h2{font-size:22px;font-weight:700;margin:0 0 8px;color:var(--text)}
.onboard-card h3{font-size:18px;font-weight:600;margin:0 0 8px;color:var(--text)}
.onboard-card p{font-size:14px;color:var(--dim);margin:0 0 20px}
.onboard-card .ob-btn{display:block;width:100%;padding:14px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;margin-bottom:10px;transition:opacity 0.2s}
.onboard-card .ob-btn-primary{background:var(--primary);color:#000}
.onboard-card .ob-btn-primary:hover{opacity:0.9}
.onboard-card .ob-skip{display:block;background:none;border:none;color:var(--dim);font-size:13px;cursor:pointer;margin:8px auto 0;padding:8px}
.onboard-card .ob-skip:hover{color:var(--text)}
.onboard-input{width:100%;padding:12px 14px;border:1px solid var(--card2);border-radius:10px;background:var(--bg);color:var(--text);font-size:15px;margin-bottom:10px;box-sizing:border-box}
.onboard-input:focus{outline:none;border-color:var(--primary)}
.onboard-select{width:100%;padding:12px 14px;border:1px solid var(--card2);border-radius:10px;background:var(--bg);color:var(--text);font-size:14px;margin-bottom:16px;box-sizing:border-box;-webkit-appearance:none}
.onboard-vibe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:20px}
.onboard-vibe-pill{padding:8px 10px;border-radius:20px;background:var(--card2);border:2px solid transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all 0.2s}
.onboard-vibe-pill .ob-vibe-emoji{font-size:18px;line-height:1}
.onboard-vibe-pill .ob-vibe-name{font-size:12px;color:var(--dim);font-weight:500}
.onboard-vibe-pill.selected{border-color:var(--primary);background:rgba(34,197,94,0.1)}
.onboard-vibe-pill.selected .ob-vibe-name{color:var(--primary)}
.onboard-actions{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.onboard-dots{display:flex;justify-content:center;gap:6px;margin-top:16px}
.onboard-dot{width:8px;height:8px;border-radius:50%;background:var(--card2);transition:background 0.2s}
.onboard-dot.active{background:var(--primary)}
.onboard-strain-result{margin:10px 0;padding:12px;border-radius:10px;background:var(--card2);text-align:left;font-size:13px;color:var(--dim)}
.onboard-strain-result:empty{display:none}
.ob-mode-btn{flex:1;padding:10px;background:var(--bg);border:1px solid var(--card2);border-radius:10px;color:var(--dim);font-size:13px;font-weight:600;cursor:pointer;transition:all 0.2s}
.ob-mode-btn.active{background:rgba(34,197,94,0.15);border-color:var(--primary);color:var(--primary)}

/* Toast */
.toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:var(--card2);color:var(--text);padding:12px 24px;border-radius:10px;font-size:14px;z-index:400;opacity:0;transition:opacity 0.3s;pointer-events:none}
.toast.show{opacity:1}

/* Insights */
.insight-card{background:var(--card);border-radius:14px;padding:16px;margin-bottom:12px;overflow:hidden}
.insight-card h4{font-size:14px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.insight-bar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.insight-bar .label{font-size:12px;min-width:100px;white-space:nowrap}
.insight-bar .bar{flex:1;height:8px;background:var(--card2);border-radius:4px;overflow:hidden}
.insight-bar .fill{height:100%;background:var(--primary);border-radius:4px}
.insight-bar .value{font-size:12px;color:var(--dim);width:30px;text-align:right}

/* Time picker */
.time-pills{display:flex;gap:8px;flex-wrap:wrap}
.time-pill{padding:8px 14px;background:var(--bg);border:1px solid rgba(255,255,255,0.15);border-radius:8px;font-size:12px;cursor:pointer;color:var(--text)}
.time-pill.active{background:var(--primary);color:var(--bg);border-color:var(--primary)}

/* AI Strain Lookup */
.ai-lookup-btn{background:var(--accent);color:var(--bg);border:none;padding:10px 14px;border-radius:10px;font-size:16px;cursor:pointer;flex-shrink:0}
.ai-lookup-btn:hover{filter:brightness(1.1)}
.ai-lookup-btn:disabled{opacity:0.5;cursor:not-allowed}
.effects-display{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.effect-tag{background:var(--card2);padding:6px 12px;border-radius:16px;font-size:11px;display:flex;align-items:center;gap:4px}
.effect-tag.positive{border:1px solid var(--primary);color:var(--primary)}
.effect-tag.negative{border:1px solid var(--warning);color:var(--warning)}
.medical-tag{background:rgba(168,85,247,0.15);padding:5px 10px;border-radius:12px;font-size:10px;color:var(--purple)}
/* Spinner */
.spinner{width:40px;height:40px;border:3px solid var(--card2);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
/* Suggestions */
.suggestions-list{display:flex;flex-direction:column;gap:8px}
.suggestion-btn{background:var(--card2);border:1px solid var(--card2);padding:12px 16px;border-radius:10px;color:var(--text);font-size:14px;text-align:left;cursor:pointer;transition:all 0.2s}
.suggestion-btn:hover{background:var(--primary);color:var(--bg);border-color:var(--primary)}
/* Strain Result */
.strain-result{background:var(--card2);border-radius:12px;padding:16px;margin-bottom:16px}
.strain-result h4{margin:0 0 8px 0;display:flex;align-items:center;gap:10px}
.strain-result .meta{font-size:12px;color:var(--dim)}
.effect-tag.negative{border-color:var(--warning);color:var(--warning)}
/* Detail View Styles */
.detail-stat{background:var(--card2);border-radius:12px;padding:14px 8px;text-align:center}
.detail-stat .val{font-size:20px;font-weight:700;color:var(--primary)}
.detail-stat .lbl{font-size:11px;color:var(--dim);margin-top:4px}
.detail-section{margin-bottom:16px}
.detail-section .section-title{font-size:13px;font-weight:600;margin-bottom:8px;color:var(--text)}
.detail-section .tags-wrap{display:flex;flex-wrap:wrap;gap:6px}
.detail-section .detail-text{color:var(--dim);font-size:13px;line-height:1.5}
.detail-tag{padding:6px 12px;border-radius:16px;font-size:11px}
.detail-tag.effect{background:rgba(34,197,94,0.15);color:var(--primary);border:1px solid rgba(34,197,94,0.3)}
.detail-tag.medical{background:rgba(168,85,247,0.15);color:#a855f7;border:1px solid rgba(168,85,247,0.3)}
.detail-tag.negative{background:rgba(239,68,68,0.15);color:#ef4444;border:1px solid rgba(239,68,68,0.3)}
/* Recipe Wizard */
.recipe-diff-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:20px}
.recipe-diff-card{background:var(--card);border:2px solid var(--card2);border-radius:14px;padding:20px;text-align:center;cursor:pointer;transition:all 0.2s}
.recipe-diff-card:hover,.recipe-diff-card.active{border-color:var(--primary);background:rgba(34,197,94,0.05)}
.recipe-diff-card .diff-icon{font-size:36px;margin-bottom:8px}
.recipe-diff-card .diff-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.recipe-diff-card .diff-desc{font-size:11px;color:var(--dim);line-height:1.4}
.recipe-type-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.recipe-type-pill{padding:10px 16px;border-radius:20px;background:var(--card);border:1px solid var(--card2);color:var(--text);font-size:12px;cursor:pointer;transition:all 0.2s}
.recipe-type-pill:hover,.recipe-type-pill.active{border-color:var(--primary);color:var(--primary);background:rgba(34,197,94,0.1)}
.recipe-strain-card{background:var(--card);border:1px solid var(--card2);border-radius:10px;padding:12px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:all 0.2s;margin-bottom:8px}
.recipe-strain-card:hover,.recipe-strain-card.selected{border-color:var(--primary);background:rgba(34,197,94,0.05)}
.recipe-strain-card .strain-info{display:flex;flex-direction:column;gap:2px}
.recipe-strain-card .strain-name{font-size:13px;font-weight:600;color:var(--text)}
.recipe-strain-card .strain-meta{font-size:11px;color:var(--dim)}
.recipe-strain-card .strain-thc{font-size:13px;font-weight:700;color:var(--primary)}
.dosage-calc{background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:12px;padding:16px;margin:16px 0}
.dosage-calc .calc-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.dosage-calc .calc-row:last-child{margin-bottom:0}
.dosage-calc .calc-label{font-size:12px;color:var(--dim)}
.dosage-calc .calc-value{font-size:14px;font-weight:700;color:var(--primary)}
.dosage-calc input[type=number]{background:var(--card2);border:1px solid rgba(255,255,255,0.2);border-radius:8px;padding:10px;color:var(--text);font-size:16px;font-weight:600;width:80px;text-align:center;-webkit-appearance:none;appearance:none}
.dosage-calc input[type=range]{background:var(--card2);border:1px solid var(--card2);border-radius:8px;padding:8px;color:var(--text);font-size:14px;width:80px;text-align:center}
.dosage-calc input[type=range]{width:100%;margin-top:4px;-webkit-appearance:none;height:6px;border-radius:3px;background:var(--card2);outline:none}
.dosage-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--primary);cursor:pointer}
.recipe-result{background:var(--card);border-radius:14px;padding:20px;margin-top:16px}
.recipe-result h3{margin:0 0 4px 0;font-size:18px;color:var(--text)}
.recipe-meta{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.recipe-meta-tag{padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600}
.recipe-meta-tag.time{background:rgba(59,130,246,0.15);color:#3b82f6}
.recipe-meta-tag.servings{background:rgba(168,85,247,0.15);color:#a855f7}
.recipe-meta-tag.dosage{background:rgba(34,197,94,0.15);color:var(--primary)}
.recipe-meta-tag.difficulty-easy{background:rgba(34,197,94,0.15);color:var(--primary)}
.recipe-meta-tag.difficulty-medium{background:rgba(251,191,36,0.15);color:#fbbf24}
.recipe-meta-tag.difficulty-hard{background:rgba(239,68,68,0.15);color:#ef4444}
.recipe-section{margin-bottom:16px}
.recipe-section-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:8px;display:flex;align-items:center;gap:6px}
.recipe-ingredient{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:13px;border-bottom:1px solid rgba(255,255,255,0.03)}
.recipe-ingredient input[type=checkbox]{accent-color:var(--primary)}
.recipe-ingredient .amt{color:var(--primary);font-weight:600;min-width:70px}
.recipe-ingredient .itm{color:var(--text)}
.recipe-ingredient .nt{color:var(--dim);font-size:11px;font-style:italic}
.recipe-step{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,0.03)}
.recipe-step .step-num{background:var(--primary);color:#000;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:2px}
.recipe-step .step-text{font-size:13px;color:var(--text);line-height:1.5}
.infusion-section{background:rgba(251,191,36,0.08);border:1px solid rgba(251,191,36,0.2);border-radius:12px;padding:16px;margin-bottom:16px}
.infusion-step{padding:10px 0;border-bottom:1px solid rgba(251,191,36,0.1)}
.infusion-step:last-child{border:none}
.infusion-step .inf-title{font-size:13px;font-weight:700;color:#fbbf24;margin-bottom:4px}
.infusion-step .inf-detail{font-size:12px;color:var(--text);line-height:1.5;margin-bottom:6px}
.infusion-step .inf-meta{display:flex;gap:12px}
.infusion-step .inf-tag{font-size:11px;padding:3px 8px;border-radius:8px;background:rgba(251,191,36,0.12);color:#fbbf24}
.infusion-step .inf-tip{font-size:11px;color:var(--dim);font-style:italic;margin-top:6px}
.recipe-tips{list-style:none;padding:0;margin:0}
.recipe-tips li{padding:6px 0;font-size:12px;color:var(--dim);display:flex;align-items:flex-start;gap:8px}
.recipe-tips li::before{content:'💡';flex-shrink:0}
.saved-recipe-card{background:var(--card);border:1px solid var(--card2);border-radius:12px;padding:14px;margin-bottom:10px;cursor:pointer;transition:all 0.2s}
.saved-recipe-card:hover{border-color:var(--primary)}
.saved-recipe-card .sr-header{display:flex;justify-content:space-between;align-items:center}
.saved-recipe-card .sr-title{font-size:14px;font-weight:600;color:var(--text)}
.saved-recipe-card .sr-meta{font-size:11px;color:var(--dim);margin-top:4px}
.recipe-wizard-back{font-size:12px;color:var(--dim);cursor:pointer;margin-bottom:16px;display:inline-block}
.recipe-wizard-back:hover{color:var(--primary)}
@media(max-width:400px){.recipe-diff-grid{grid-template-columns:1fr}}
.dim{color:var(--dim)}
.ai-result{background:var(--card2);border-radius:12px;padding:16px;margin-bottom:12px}
.ai-result h4{font-size:16px;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.ai-result .meta{font-size:12px;color:var(--dim);margin-bottom:10px}
.ai-result .desc{font-size:13px;color:var(--text);margin-bottom:12px;line-height:1.5}

/* Batch Import */
.batch-tabs{display:flex;gap:8px;margin-bottom:16px}
.batch-tab{flex:1;padding:10px;background:var(--bg);border:1px solid rgba(255,255,255,0.1);border-radius:8px;color:var(--dim);font-size:13px;cursor:pointer;text-align:center}
.batch-tab.active{background:var(--primary);color:var(--bg);border-color:var(--primary)}
.progress-bar{height:8px;background:var(--card2);border-radius:4px;overflow:hidden}
.progress-fill{height:100%;background:var(--primary);width:0%;transition:width 0.3s}
.batch-result{background:var(--card2);border-radius:8px;padding:10px;margin-top:8px;font-size:12px}
.batch-result.success{border-left:3px solid var(--primary)}
.batch-result.error{border-left:3px solid var(--danger)}

/* Calendar Heatmap */
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;overflow:hidden;max-width:100%}
.calendar-day{padding:8px 2px;border-radius:8px;font-size:10px;display:flex;flex-direction:column;align-items:center;background:var(--card2);cursor:pointer;transition:all 0.15s;position:relative;min-height:50px;overflow:hidden;min-width:0}
.calendar-day:hover{background:var(--card);transform:translateY(-2px)}
.calendar-day .day-num{font-weight:600;font-size:13px;color:var(--text)}
.calendar-day .day-info{display:flex;flex-direction:column;align-items:center;margin-top:1px;gap:0}
.calendar-day .day-sessions{font-size:9px;color:var(--primary);font-weight:700;line-height:1.2}
.calendar-day .day-grams{font-size:8px;color:var(--dim);line-height:1.2}
.calendar-day.has-sessions{border-bottom:3px solid var(--primary)}
.calendar-day.level-2{border-bottom:3px solid #22c55e}
.calendar-day.level-3{border-bottom:3px solid #16a34a}
.calendar-day.level-4{border-bottom:3px solid #15803d;background:rgba(34,197,94,0.1)}
.calendar-day.today{border:2px solid var(--accent);box-shadow:0 0 10px rgba(255,107,53,0.3)}
.calendar-day.today .day-num{color:var(--accent)}
.calendar-day.future{opacity:0.4;cursor:default}
.calendar-day.future:hover{transform:none;background:var(--card2)}
.calendar-day.empty{background:transparent;cursor:default}
.calendar-day.empty:hover{transform:none}
.calendar-header{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:4px;font-size:10px;color:var(--dim);text-align:center}

/* Achievements */
.achievement{display:flex;align-items:center;gap:12px;padding:12px;background:var(--card2);border-radius:10px;margin-bottom:8px}
.achievement.locked{opacity:0.5}
.achievement.unlocked{border:1px solid var(--gold)33;background:linear-gradient(135deg,var(--card2) 0%,var(--gold)11 100%)}
.achievement-icon{font-size:28px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:var(--card);border-radius:10px}
.achievement.unlocked .achievement-icon{background:var(--gold)22}
.achievement-info{flex:1}
.achievement-name{font-weight:600;font-size:13px;margin-bottom:2px}
.achievement-desc{font-size:11px;color:var(--dim)}
.achievement-date{font-size:10px;color:var(--gold);margin-top:4px}

/* Level Progress */
.level-card{background:linear-gradient(135deg,var(--card) 0%,var(--purple)22 100%);border-radius:14px;padding:16px;margin-bottom:16px;border:1px solid var(--purple)44}
.level-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.level-badge{font-size:36px}
.level-info h3{margin:0;font-size:18px;color:var(--purple)}
.level-info span{font-size:12px;color:var(--dim)}
.level-progress{height:12px;background:var(--card2);border-radius:6px;overflow:hidden;margin-bottom:8px}
.level-progress-fill{height:100%;background:linear-gradient(90deg,var(--purple),var(--accent));transition:width 0.5s}
.level-stats{display:flex;justify-content:space-between;font-size:11px;color:var(--dim)}

/* Strain Comparison */
.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.compare-card{background:var(--card2);border-radius:10px;padding:12px}
.compare-card h4{margin:0 0 8px 0;font-size:13px;display:flex;align-items:center;gap:6px}
.compare-stat{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid rgba(255,255,255,0.05);font-size:12px}
.compare-stat:last-child{border:none}
.compare-winner{color:var(--primary);font-weight:600}

/* T-Break */
.tbreak-card{background:linear-gradient(135deg,var(--card) 0%,var(--accent)15 100%);border-radius:14px;padding:16px;border:1px solid var(--accent)33}
.tbreak-countdown{font-size:32px;font-weight:700;text-align:center;color:var(--accent);margin:16px 0}
.tbreak-progress{height:16px;background:var(--card2);border-radius:8px;overflow:hidden;margin-bottom:12px}
.tbreak-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--primary));transition:width 0.5s}

/* Streak */
.streak-display{display:flex;align-items:center;justify-content:center;gap:8px;font-size:24px;font-weight:700;color:var(--gold);margin:12px 0}
.streak-flames{display:flex;gap:2px}

/* Roulette */
.roulette-wheel{width:200px;height:200px;margin:20px auto;border-radius:50%;border:4px solid var(--primary);display:flex;align-items:center;justify-content:center;font-size:48px;background:var(--card2);position:relative;overflow:hidden}
.roulette-wheel.spinning{animation:spin 0.5s ease-out}
@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(720deg)}}
.roulette-result{text-align:center;margin-top:16px}
/* Cloud Sync UI */
.cloud-dot{width:8px;height:8px;border-radius:50%;background:#666}
.cloud-dot.online{background:var(--primary)}
.cloud-dot.offline{background:#f59e0b}
.cloud-dot.syncing{background:var(--primary);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.auth-form{display:flex;flex-direction:column;gap:12px}
.auth-form input{padding:12px;border-radius:8px;border:1px solid var(--card2);background:var(--card);color:var(--text);font-size:14px}
.auth-form input:focus{outline:none;border-color:var(--primary)}
.auth-form button{padding:12px;border-radius:8px;border:none;background:var(--primary);color:#000;font-weight:600;cursor:pointer}
.auth-form button:disabled{opacity:0.5;cursor:not-allowed}
.auth-tabs{display:flex;gap:0;margin-bottom:16px}
.auth-tab{flex:1;padding:10px;text-align:center;cursor:pointer;border-bottom:2px solid var(--card2);color:var(--dim)}
.auth-tab.active{border-color:var(--primary);color:var(--primary)}
#authGate{display:none;flex-direction:column;position:fixed;inset:0;background:#0a0a0f;z-index:9999;overflow-y:auto;-webkit-overflow-scrolling:touch}
.auth-error{padding:10px;background:#fee2e2;color:#dc2626;border-radius:8px;font-size:12px;display:none}
.account-section{padding:16px 0;border-bottom:1px solid var(--card2)}
.account-section:last-child{border:none}
.account-label{font-size:12px;color:var(--dim);margin-bottom:4px}
.account-value{font-size:14px;color:var(--text)}
.dankpass-qr{text-align:center;padding:20px}
.dankpass-qr img{max-width:200px;border-radius:12px;background:#fff;padding:10px}
.dankpass-timer{font-size:12px;color:var(--dim);margin-top:8px}
.sync-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;border-radius:8px;border:1px solid var(--primary);background:transparent;color:var(--primary);font-weight:600;cursor:pointer;margin-top:12px}
.sync-btn:hover{background:var(--primary);color:#000}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:500px){.plan-grid{grid-template-columns:1fr}}
.plan-card{background:var(--card);border:2px solid var(--card2);border-radius:12px;padding:16px;cursor:pointer;transition:all 0.2s;display:flex;flex-direction:column}
.plan-card:hover{border-color:var(--primary)}
.plan-card.highlighted{border-color:var(--primary);background:rgba(34,197,94,0.05)}
.plan-card .plan-price{font-size:24px;font-weight:700;color:var(--text);margin:8px 0 4px}
.plan-card .plan-period{font-size:12px;color:var(--dim)}
.plan-card .plan-name{font-size:16px;font-weight:600;color:var(--text)}
.plan-card .plan-features{list-style:none;padding:0;margin:12px 0;flex:1}
.plan-card .plan-features li{font-size:12px;color:var(--dim);padding:4px 0;display:flex;align-items:center;gap:6px}
.plan-card .plan-features li::before{content:'✓';color:var(--primary);font-weight:700;font-size:11px}
.plan-card .plan-btn{padding:10px;border-radius:8px;border:none;font-weight:600;cursor:pointer;text-align:center;font-size:13px;width:100%;margin-top:auto}
.plan-card .plan-btn.primary{background:var(--primary);color:#000}
.plan-card .plan-btn.secondary{background:var(--card2);color:var(--text)}
.plan-back{font-size:12px;color:var(--dim);cursor:pointer;margin-bottom:12px;display:inline-block}
.plan-back:hover{color:var(--primary)}
#stripeCheckoutModal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.85);z-index:9999;display:none;align-items:center;justify-content:center;padding:20px}
#stripeCheckoutModal.active{display:flex}
#stripeCheckoutModal .checkout-wrap{width:100%;max-width:500px;position:relative}
#stripeCheckoutModal .checkout-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
#stripeCheckoutModal .checkout-header h3{color:var(--text);font-size:16px;margin:0}
#stripeCheckoutModal .checkout-close{background:none;border:none;color:var(--dim);font-size:20px;cursor:pointer;padding:4px 8px}
#stripeCheckoutModal .checkout-close:hover{color:var(--text)}
#stripeCheckoutModal #checkoutContainer{min-height:300px}
#installBanner{display:none;position:fixed;bottom:20px;left:50%;transform:translateX(-50%);width:calc(100% - 32px);max-width:400px;background:var(--card,#1a1a2e);border:1px solid var(--primary,#22c55e);border-radius:16px;padding:16px;z-index:9000;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
#installBanner.show{display:block}
#installBanner .ib-row{display:flex;align-items:center;gap:12px}
#installBanner .ib-icon{width:48px;height:48px;border-radius:12px}
#installBanner .ib-text{flex:1}
#installBanner .ib-title{font-size:15px;font-weight:600;color:var(--text,#e0e0e0);margin-bottom:2px}
#installBanner .ib-sub{font-size:12px;color:var(--dim,#888)}
#installBanner .ib-btns{display:flex;gap:8px;margin-top:12px}
#installBanner .ib-btn{flex:1;padding:10px;border-radius:10px;font-size:14px;font-weight:600;border:none;cursor:pointer}
#installBanner .ib-install{background:var(--primary,#22c55e);color:#000}
#installBanner .ib-dismiss{background:var(--card2,#252540);color:var(--dim,#888)}

/* ===== Auth Gate — Mobile-Friendly Login ===== */
html.app-gate .header,html.app-gate .tabs,html.app-gate .view{display:none!important}
html.app-gate #authModal.active{background:#0a0a0f;align-items:stretch;overflow:hidden;backdrop-filter:none;-webkit-backdrop-filter:none;z-index:99999}
html.app-gate #authModal .modal{border-radius:0;max-height:none;overflow:hidden;width:100%;max-width:480px;margin:0 auto;border-top:none;box-shadow:none;background:#0a0a0f;display:flex;flex-direction:column}
html.app-gate #authWelcome{flex-shrink:0}
html.app-gate #authContent{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0 20px max(20px,env(safe-area-inset-bottom,20px))}
html.app-gate .auth-tabs{flex-shrink:0}
html.app-gate #loginForm{flex-shrink:0}
html.app-gate #registerForm{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
html.app-gate #planSelection{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
html.app-gate .modal-header{display:none}
html.app-gate #authWelcome{padding:20px 20px 8px!important}
html.app-gate #authWelcome img{width:56px!important;height:56px!important;margin-bottom:6px!important}
html.app-gate #authWelcome h2{font-size:18px!important;margin-bottom:2px!important}
html.app-gate #authWelcome p{font-size:11px!important}
html.app-gate .auth-tabs{margin-bottom:12px}
html.app-gate .auth-form{gap:8px}
html.app-gate .auth-form input,html.app-gate .auth-form select{font-size:16px;padding:12px}
html.app-gate .auth-form button{font-size:16px;padding:12px}
@media(min-width:600px){
html.app-gate #authModal .modal{max-width:440px;border-radius:20px;margin-top:40px;margin-bottom:40px;background:linear-gradient(180deg,var(--card) 0%,#0d1117 100%);border-top:2px solid var(--primary);box-shadow:0 10px 60px rgba(34,197,94,0.15),0 2px 20px rgba(0,0,0,0.5)}
}

/* Lookup Sub-tabs */
.lookup-tabs{display:flex;gap:4px;margin-bottom:16px;background:var(--card);border-radius:12px;padding:4px}
.lookup-tab{flex:1;padding:8px 4px;text-align:center;font-size:10px;font-weight:600;color:var(--dim);background:transparent;border:none;border-radius:10px;cursor:pointer;transition:all 0.2s;font-family:inherit;display:flex;flex-direction:column;align-items:center;gap:3px}
.lookup-tab svg{opacity:0.8;transition:all 0.2s}
.lookup-tab[data-tab="vibe"] svg{stroke:#f59e0b}
.lookup-tab[data-tab="dispo"] svg{stroke:#a855f7}
.lookup-tab[data-tab="lookup"] svg{stroke:#3b82f6}
.lookup-tab[data-tab="compare"] svg{stroke:#14b8a6}
.lookup-tab[data-tab="clubs"] svg{stroke:#ec4899}
.lookup-tab:hover{color:var(--text);background:rgba(255,255,255,0.04)}
.lookup-tab:hover svg{opacity:1}
.lookup-tab.active{color:var(--text);background:rgba(34,197,94,0.12);border:1px solid rgba(34,197,94,0.25)}
.lookup-tab:not(.active){border:1px solid transparent}
.lookup-tab.active svg{opacity:1}
@media(max-width:420px){.lookup-tab{font-size:9px;padding:7px 2px}}
.lookup-panel{display:none}
.lookup-panel.active{display:block}

/* Vibe Strain Finder */
.vibe-picker-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media(max-width:420px){.vibe-picker-grid{grid-template-columns:repeat(3,1fr);gap:6px}}
.vibe-pill{background:var(--card2);border:2px solid transparent;border-radius:20px;padding:8px 6px;display:flex;align-items:center;justify-content:center;gap:5px;cursor:pointer;transition:all 0.2s;font-family:inherit;color:var(--text)}
.vibe-pill:hover{border-color:rgba(34,197,94,0.3);background:rgba(34,197,94,0.05)}
.vibe-pill.active{border-color:var(--primary);background:rgba(34,197,94,0.12);box-shadow:0 0 12px rgba(34,197,94,0.2)}
.vibe-pill-emoji{font-size:16px;line-height:1}
.vibe-pill-label{font-size:11px;font-weight:500}

/* Vibe Strain Result Cards */
.vibe-strain-card{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px;margin-bottom:10px}
.vibe-strain-header{display:flex;justify-content:space-between;align-items:flex-start}
.vibe-strain-name{font-size:15px;font-weight:600;color:var(--text)}
.vibe-match-badge{background:var(--primary);color:var(--bg);padding:3px 10px;border-radius:10px;font-size:12px;font-weight:700;white-space:nowrap}
.vibe-strain-effects{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.vibe-effect-tag{font-size:10px;padding:3px 8px;background:rgba(255,255,255,0.06);border-radius:8px;color:var(--dim)}
.vibe-strain-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.vibe-find-btn,.vibe-link-btn{flex:1;min-width:0;font-size:12px;padding:8px 10px;border-radius:10px;cursor:pointer;border:none;font-family:inherit;font-weight:500;text-align:center}

/* Dispensary Cards */
.dispo-card{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px;margin-bottom:10px}
.dispo-header{display:flex;justify-content:space-between;align-items:flex-start}
.dispo-name{font-size:14px;font-weight:600;color:var(--text)}
.dispo-distance{font-size:12px;color:var(--accent);font-weight:600;white-space:nowrap}
.dispo-address{font-size:12px;color:var(--dim);margin-top:2px}
.dispo-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.dispo-btn{font-size:11px;padding:6px 10px;border-radius:8px;text-decoration:none;cursor:pointer;border:none;font-family:inherit;font-weight:500;display:inline-block;text-align:center}
.purchased-at-picker{display:flex;align-items:center;justify-content:space-between;background:var(--card);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:10px 14px;cursor:pointer;font-size:13px;color:var(--text);transition:border-color 0.2s}
.purchased-at-picker:hover{border-color:var(--accent)}
.purchased-at-picker.has-value{border-color:var(--primary)}
.purchased-at-picker.has-value .purchased-at-clear{display:inline-flex}
.purchased-at-clear{display:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:rgba(255,255,255,0.1);color:var(--dim);font-size:14px;cursor:pointer;margin-left:8px;border:none;padding:0;line-height:1}
.purchased-at-clear:hover{background:rgba(255,255,255,0.2);color:var(--text)}
.dispo-picker-dropdown{background:var(--card);border:1px solid rgba(255,255,255,0.1);border-radius:10px;margin-top:6px;max-height:200px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.dispo-picker-option{padding:10px 14px;cursor:pointer;font-size:13px;color:var(--text);border-bottom:1px solid rgba(255,255,255,0.04);display:flex;align-items:center;gap:8px;transition:background 0.15s}
.dispo-picker-option:last-child{border-bottom:none}
.dispo-picker-option:hover,.dispo-picker-option:active{background:rgba(255,255,255,0.06)}
.dispo-picker-option.selected{background:rgba(var(--primary-rgb,0,209,178),0.1)}
.dispo-picker-option .dispo-pick-name{font-weight:500}
.dispo-picker-option .dispo-pick-dist{font-size:11px;color:var(--dim);margin-left:auto;white-space:nowrap}
.dispo-picker-manual{padding:8px 14px}
.dispo-picker-manual input{width:100%;background:var(--bg);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:8px 10px;font-size:13px;color:var(--text);font-family:inherit;outline:none}
.dispo-picker-manual input::placeholder{color:var(--dim)}
.dispo-picker-manual input:focus{border-color:var(--accent)}
/* Social Club Finder */
.club-type-filters{display:flex;gap:6px;flex-wrap:wrap}
.club-type-pill{background:var(--card2);border:1px solid rgba(255,255,255,0.08);border-radius:16px;padding:6px 12px;font-size:11px;font-weight:500;cursor:pointer;transition:all 0.2s;font-family:inherit;color:var(--dim)}
.club-type-pill:hover{border-color:rgba(236,72,153,0.3);color:var(--text)}
.club-type-pill.active{border-color:#ec4899;color:#ec4899;background:rgba(236,72,153,0.1)}
.club-card{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:14px;margin-bottom:10px;border-left:3px solid #ec4899}
.club-header{display:flex;justify-content:space-between;align-items:flex-start}
.club-name{font-size:14px;font-weight:600;color:var(--text)}
.club-distance{font-size:12px;color:#ec4899;font-weight:600;white-space:nowrap}
.club-location{font-size:12px;color:var(--dim);margin-top:2px}
.club-meta{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.club-type-badge{font-size:10px;padding:3px 8px;border-radius:8px;font-weight:600;background:rgba(236,72,153,0.15);color:#ec4899}
.club-consumption-tag{font-size:10px;padding:3px 8px;background:rgba(255,255,255,0.06);border-radius:8px;color:var(--dim)}
.club-membership-badge{font-size:10px;padding:3px 8px;border-radius:8px;background:rgba(251,191,36,0.15);color:#fbbf24;font-weight:500}
.club-hours{font-size:11px;color:var(--dim);margin-top:4px}
.club-description{font-size:11px;color:var(--dim);margin-top:6px;font-style:italic;line-height:1.4}
.club-actions{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.club-btn{font-size:11px;padding:6px 10px;border-radius:8px;text-decoration:none;cursor:pointer;border:none;font-family:inherit;font-weight:500;display:inline-block;text-align:center}
.club-submit-card{background:var(--card);border:1px solid rgba(236,72,153,0.2);border-radius:12px;padding:16px;margin-top:16px;text-align:center}
.club-submit-card p{font-size:13px;color:var(--dim);margin-bottom:10px}