.card, .metric-card, .stat-card, .task-card, .profile-hero, .profile-measures article { border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow-sm); }
.card { padding: 24px; border-radius: var(--radius-lg); }
.section-heading { margin: 34px 0 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.section-heading h2 { margin: 0; font-size: 24px; }
.section-counter, .success-chip, .soon-chip, .plan-badge { display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px; font-size: 11px; font-weight: 800; }
.section-counter { padding: 7px 12px; color: var(--primary); background: var(--primary-soft); }
.success-chip { padding: 7px 11px; color: var(--success); background: var(--success-soft); }
.soon-chip { padding: 7px 11px; color: var(--text-secondary); background: #efedf4; }
.metric-label { display: block; color: var(--text-muted); font-size: 10px; font-weight: 850; letter-spacing: .11em; }
.card-heading { margin-bottom: 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.card-heading h2 { margin: 4px 0 0; font-size: 21px; }

.primary-button, .secondary-button { min-height: 52px; border-radius: 15px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.primary-button { width: 100%; border: 0; color: #fff; background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)); box-shadow: 0 11px 24px rgba(var(--primary-rgb), .22); }
.primary-button:hover { transform: translateY(-1px); box-shadow: 0 15px 30px rgba(var(--primary-rgb), .28); }
.primary-button:active { transform: translateY(1px); }
.secondary-button { border: 1px solid var(--border-strong); color: var(--primary); background: var(--surface); }
.secondary-button.compact { min-height: 42px; padding: 0 16px; }
.text-button, .demo-button { border: 0; background: transparent; font-weight: 750; }
.text-button { color: var(--text-secondary); }
.demo-button { color: var(--primary); }
.icon-button, .close-button { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); font-size: 24px; }
.close-button { width: 40px; height: 40px; border-radius: 13px; font-size: 25px; font-weight: 300; }

.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field > span, .choice-field legend { padding-left: 2px; color: #565164; font-size: 12px; font-weight: 750; }
.field > span small { color: var(--text-muted); font-weight: 500; }
.field input, .field select, .field textarea, .chat-form input { width: 100%; outline: none; border: 1px solid var(--border-strong); border-radius: 15px; color: var(--text-primary); background: var(--surface); transition: border-color .18s ease, box-shadow .18s ease; }
.field input, .field select { height: 52px; padding: 0 15px; }
.password-control{position:relative;display:block;width:100%}.password-control input{padding-right:52px}.password-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:40px;height:40px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent;color:var(--primary);cursor:pointer}.password-toggle:hover,.password-toggle:focus-visible{background:var(--primary-soft)}.password-toggle .app-icon{width:21px;height:21px}
.field textarea { min-height: 72px; padding: 13px 15px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .chat-form input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 4px var(--primary-soft); }
.field input::placeholder, .field textarea::placeholder, .chat-form input::placeholder { color: #a6a1b2; }
.form-row, .form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
.form-grid .full, .field.full { grid-column: 1 / -1; }
.choice-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.choice-field legend { margin-bottom: 9px; }

.filter-tabs { padding: 4px; display: flex; border-radius: 12px; background: #f2f0f7; }
.filter-tabs button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 9px; color: var(--text-secondary); background: transparent; font-size: 11px; font-weight: 800; }
.filter-tabs button.active { color: var(--primary); background: #fff; box-shadow: 0 3px 10px rgba(46,37,84,.08); }

.modal-layer { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 18px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(24, 20, 37, .57); backdrop-filter: blur(5px); }
.bottom-sheet { width: min(100%, 540px); max-height: calc(100dvh - 32px); overflow: auto; position: relative; z-index: 1; padding: 28px; border-radius: 30px; background: var(--surface); box-shadow: 0 30px 80px rgba(21,16,46,.25); animation: modal-in .25s ease both; }
.sheet-handle { display: none; width: 42px; height: 4px; margin: -13px auto 20px; border-radius: 99px; background: var(--border-strong); }
.modal-heading { margin-bottom: 24px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-heading > div, .modal-heading > div > div { min-width: 0; }
.modal-heading > div { display: flex; align-items: center; gap: 12px; }
.modal-heading h2 { margin: 2px 0 0; overflow-wrap: anywhere; font-size: 25px; }
.modal-icon { width: 45px; height: 45px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 20px; font-weight: 800; }
.bottom-sheet form { display: flex; flex-direction: column; gap: 20px; }
.preference-sheet { width: min(100%, 680px); }
.preference-block { padding: 17px; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-soft); }
.preference-block legend { padding: 0 6px; color: #565164; font-size: 12px; font-weight: 800; }
.preference-block legend small { color: var(--text-muted); font-weight: 500; }
.option-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.option-card-grid.two-col { grid-template-columns: repeat(2, 1fr); }
.option-card-grid label { min-width: 0; cursor: pointer; }
.option-card-grid input { position: absolute; opacity: 0; pointer-events: none; }
.option-card-grid span { min-height: 46px; padding: 8px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 13px; color: var(--text-secondary); background: #fff; text-align: center; font-size: 11px; font-weight: 800; transition: .18s ease; }
.option-card-grid input:checked + span { color: var(--primary); border-color: var(--primary-light); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(101,73,223,.08); }
.option-card-grid input:focus-visible + span { outline: 3px solid rgba(101,73,223,.3); outline-offset: 2px; }
.week-options { grid-template-columns: repeat(7, 1fr); }
.week-options span { min-height: 42px; padding-inline: 3px; }
.meal-time-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.switch-row { min-height: 68px; padding: 12px 15px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border: 1px solid var(--border); border-radius: 17px; background: #fff; cursor: pointer; }
.switch-row > span { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.switch-row b { font-size: 12px; }
.switch-row small { color: var(--text-muted); font-size: 9px; line-height: 1.4; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch-row i { width: 46px; height: 26px; flex: 0 0 auto; position: relative; border-radius: 999px; background: #cbc6d5; transition: .2s ease; }
.switch-row i::after { content: ""; width: 20px; height: 20px; position: absolute; left: 3px; top: 3px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(33,27,51,.2); transition: .2s ease; }
.switch-row input:checked + i { background: var(--primary); }
.switch-row input:checked + i::after { transform: translateX(20px); }
.switch-row input:focus-visible + i { outline: 3px solid rgba(101,73,223,.3); outline-offset: 2px; }
.reminder-block { display: grid; gap: 10px; }
.reminder-block h3 { margin: 4px 0 7px; font-size: 19px; }
.mood-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mood-options button { min-height: 72px; padding: 8px 4px; border: 1px solid var(--border); border-radius: 14px; background: #fff; color: var(--text-secondary); font-size: 10px; font-weight: 700; }
.mood-options span { display: block; margin-bottom: 5px; font-size: 24px; }
.mood-options button.selected, .energy-options button.selected { border-color: var(--primary-light); color: var(--primary); background: var(--primary-soft); }
.energy-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.energy-options button { height: 45px; border: 1px solid var(--border); border-radius: 13px; color: var(--text-secondary); background: #fff; font-weight: 800; }
.scale-labels { margin-top: 6px; display: flex; justify-content: space-between; color: var(--text-muted); font-size: 10px; }

.toast { position: fixed; z-index: 100; left: 50%; bottom: calc(var(--nav-height) + 30px); transform: translateX(-50%); min-width: min(360px, calc(100% - 32px)); padding: 12px 18px; display: flex; align-items: center; gap: 11px; border-radius: 16px; color: #fff; background: #24202e; box-shadow: 0 16px 40px rgba(19,16,26,.28); animation: toast-in .24s ease both; }
.toast span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--success); font-size: 12px; font-weight: 900; }
.toast p { margin: 0; color: #fff; font-size: 13px; font-weight: 700; }
.app-update { position: fixed; z-index: 120; left: 12px; right: 12px; bottom: max(18px, env(safe-area-inset-bottom)); width: min(420px, calc(100% - 24px)); margin-inline: auto; padding: 18px; display: grid; gap: 14px; border: 1px solid rgba(var(--primary-rgb),.18); border-radius: 20px; background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 22px 60px rgba(32,22,75,.24); backdrop-filter: blur(18px); animation: app-update-in .24s ease both; }
.app-update strong { display: block; margin-bottom: 4px; color: var(--text-primary); font-size: 15px; }
.app-update p { margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.45; }
.app-update-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.app-update-actions .primary-button { width: auto; min-height: 42px; padding: 0 18px; }
.app-update-actions .text-button { min-height: 42px; padding: 0 12px; }
@keyframes app-update-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.app-update { z-index: 240; }
.toast { z-index: 250; }

button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(101,73,223,.3); outline-offset: 2px; }

.recommendation-view { min-height: 100dvh; padding: 28px 20px; overflow: auto; background: radial-gradient(circle at 50% -10%, #e9e2ff 0, transparent 38rem), var(--background); }
.recommendation-shell { width: min(100%, 980px); margin: auto; }
.recommendation-header { min-height: 72px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--border); border-radius: 22px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-sm); }
.recommendation-intro { max-width: 620px; margin: 46px 0 24px; }
.recommendation-intro h1 { margin: 6px 0 10px; font-size: clamp(34px, 6vw, 58px); line-height: 1; }
.recommendation-intro p:last-child { margin: 0; }
.recommendation-cards { display: grid; grid-template-columns: repeat(3, 1fr); align-items: stretch; gap: 14px; }
.recommendation-card { min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 24px; color: var(--text-primary); background: #fff; text-align: left; box-shadow: var(--shadow-sm); transition: .2s ease; }
.recommendation-card:hover { transform: translateY(-2px); }
.recommendation-card.selected { border-color: var(--primary); box-shadow: 0 18px 42px rgba(94,66,211,.18), inset 0 0 0 2px var(--primary-soft); }
.recommendation-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recommendation-rank { color: var(--primary); font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.recommendation-score { color: var(--primary); font-size: 25px; }
.recommendation-card h2 { margin: 20px 0 8px; font-size: 23px; }
.recommendation-card > p { min-height: 45px; margin: 0; font-size: 11px; }
.recommendation-meta { margin: 18px 0; display: flex; flex-wrap: wrap; gap: 6px; }
.recommendation-meta span { padding: 6px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 9px; font-weight: 800; }
.recommendation-card ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; color: var(--text-secondary); font-size: 10px; }
.recommendation-loading, .recommendation-empty { grid-column: 1 / -1; min-height: 240px; padding: 24px; display: grid; place-content: center; gap: 7px; border: 1px dashed var(--border-strong); border-radius: 24px; background: rgba(255,255,255,.7); text-align: center; }
.recommendation-empty p { margin: 0; }
.recommendation-actions { max-width: 560px; margin: 24px auto 0; display: grid; grid-template-columns: .65fr 1fr; gap: 10px; }

.xp-chip, .premium-badge, .difficulty-chip { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 10px; font-weight: 850; white-space: nowrap; }
.xp-chip { padding: 7px 11px; color: var(--primary); background: var(--primary-soft); }
.premium-badge { padding: 5px 8px; color: #9a6719; background: var(--warning-soft); }
.difficulty-chip { padding: 6px 9px; color: var(--success); background: var(--success-soft); }
.message-content { min-width: 0; }
.message-actions { margin-top: 7px; display: flex; flex-wrap: wrap; gap: 6px; }
.message-actions button { min-height: 32px; padding: 0 10px; border: 1px solid var(--primary-light); border-radius: 10px; color: var(--primary); background: #fff; font-size: 9px; font-weight: 800; }
.message-actions .ignore-action { color: var(--text-muted); border-color: var(--border); }

.secondary-view { min-height: 100dvh; position: fixed; z-index: 45; inset: 0; overflow: auto; background: radial-gradient(circle at 50% -10%, #efebff 0, transparent 28rem), var(--background); animation: screen-in .25s ease both; }
.secondary-view-header { width: min(calc(100% - 32px), var(--content-width)); min-height: 78px; margin: 14px auto 0; padding: 10px 12px; display: grid; grid-template-columns: 50px 1fr 50px; align-items: center; gap: 14px; position: sticky; top: 10px; z-index: 2; border: 1px solid rgba(229,225,238,.9); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: var(--shadow-sm); backdrop-filter: blur(18px); }
.secondary-view-header h1 { margin: 0; font-size: 24px; }
.secondary-view-header .eyebrow { margin-bottom: 2px; }
.secondary-view-content { width: min(calc(100% - 32px), var(--content-width)); margin: 28px auto calc(var(--nav-height) + 42px); }
.secondary-intro { margin-bottom: 22px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.secondary-intro h2 { margin: 0 0 5px; font-size: 28px; }
.secondary-intro p { margin: 0; font-size: 12px; }
.view-actions { display: flex; gap: 9px; }

.segmented-filters { margin-bottom: 16px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; }
.segmented-filters::-webkit-scrollbar { display: none; }
.segmented-filters button { min-height: 39px; padding: 0 14px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 999px; color: var(--text-secondary); background: #fff; font-size: 10px; font-weight: 800; }
.segmented-filters button.active { color: #fff; border-color: var(--primary); background: var(--primary); }
.search-field { margin-bottom: 15px; position: relative; }
.search-field span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-field input { width: 100%; height: 52px; padding: 0 16px 0 43px; border: 1px solid var(--border-strong); border-radius: 16px; outline: none; background: #fff; }
.search-field input:focus { border-color: var(--primary-light); box-shadow: 0 0 0 4px var(--primary-soft); }
.empty-state { min-height: 260px; padding: 30px; display: grid; place-content: center; text-align: center; border: 1px dashed var(--border-strong); border-radius: 24px; background: rgba(255,255,255,.55); }
.empty-state > span { margin-bottom: 8px; color: var(--primary); font-size: 35px; }
.empty-state h3 { margin-bottom: 4px; }
.empty-state p { margin: 0; font-size: 11px; }