:root {
    --paper: #f6f0e5;
    --paper-deep: #eee3d2;
    --surface: #fffdf8;
    --surface-strong: #ffffff;
    --ink: #27333a;
    --muted: #706e68;
    --line: #ded4c5;
    --line-soft: #ebe3d7;
    --bordeaux: #8e1b22;
    --bordeaux-dark: #6f1117;
    --coral: #e4572e;
    --petrol: #14747f;
    --petrol-dark: #0d5b64;
    --berry: #8a2b76;
    --green: #4e7757;
    --shadow: 0 14px 40px rgba(55, 40, 27, .09);
    --shadow-small: 0 5px 18px rgba(55, 40, 27, .08);
    --radius: 18px;
    --radius-small: 11px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { min-height: 100%; background: var(--paper); }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 8% 5%, rgba(228, 87, 46, .06), transparent 23rem),
        radial-gradient(circle at 92% 12%, rgba(20, 116, 127, .055), transparent 28rem),
        linear-gradient(120deg, rgba(255,255,255,.27), transparent 35%),
        var(--paper);
    line-height: 1.52;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .2;
    background-image:
        repeating-linear-gradient(0deg, rgba(95,72,48,.025) 0, rgba(95,72,48,.025) 1px, transparent 1px, transparent 4px),
        repeating-linear-gradient(90deg, rgba(255,255,255,.13) 0, rgba(255,255,255,.13) 1px, transparent 1px, transparent 6px);
    z-index: 1000;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { color: inherit; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { letter-spacing: -.025em; }
h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.06; }
h2, h3 { line-height: 1.18; }

.muted { color: var(--muted); }
.eyebrow {
    display: inline-block;
    color: var(--bordeaux);
    font-size: .74rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: .8rem;
}

.paper-card {
    background: rgba(255, 253, 248, .94);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-small);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .78rem;
    min-width: max-content;
}
.brand__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50% 50% 46% 54% / 54% 47% 53% 46%;
    background: var(--bordeaux);
    color: #fff8ee;
    font: 700 1.3rem Georgia, serif;
    transform: rotate(-4deg);
    box-shadow: inset 0 0 0 3px rgba(255,255,255,.14);
}
.brand > span:last-child { display: grid; line-height: 1.05; }
.brand strong { font-family: Georgia, serif; font-size: 1.2rem; color: var(--bordeaux-dark); }
.brand small { margin-top: .22rem; color: var(--muted); font-size: .67rem; letter-spacing: .07em; text-transform: uppercase; }
.brand--large .brand__mark { width: 50px; height: 50px; font-size: 1.7rem; }
.brand--large strong { font-size: 1.55rem; }
.brand--large small { font-size: .72rem; }

.button {
    appearance: none;
    border: 1px solid transparent;
    border-radius: 999px;
    min-height: 44px;
    padding: .72rem 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    font-weight: 750;
    font-size: .91rem;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.button:hover { transform: translateY(-1px); }
.button:focus-visible { outline: 3px solid rgba(20,116,127,.24); outline-offset: 2px; }
.button:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.button--primary { background: var(--bordeaux); color: white; box-shadow: 0 7px 18px rgba(142,27,34,.18); }
.button--primary:hover { background: var(--bordeaux-dark); box-shadow: 0 9px 22px rgba(142,27,34,.23); }
.button--secondary { background: var(--petrol); color: white; }
.button--secondary:hover { background: var(--petrol-dark); }
.button--soft { background: rgba(142,27,34,.08); color: var(--bordeaux); border-color: rgba(142,27,34,.16); }
.button--soft:hover { background: rgba(142,27,34,.13); }
.button--outline { background: rgba(255,255,255,.72); color: var(--bordeaux); border-color: rgba(142,27,34,.28); }
.button--outline:hover { background: #fff; border-color: var(--bordeaux); }
.button--ghost { background: transparent; color: var(--muted); border-color: var(--line); }
.button--whatsapp { background: #287b4b; color: white; }
.button--small { min-height: 36px; padding: .55rem .8rem; font-size: .78rem; }
.button--full { width: 100%; }

.text-link { color: var(--bordeaux); font-weight: 750; font-size: .9rem; }
.text-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.back-link { display: inline-flex; margin-bottom: 1.2rem; color: var(--muted); font-weight: 700; font-size: .9rem; }
.back-link:hover { color: var(--bordeaux); }

.toast {
    position: fixed;
    z-index: 1200;
    right: 1.4rem;
    top: 1.25rem;
    max-width: min(430px, calc(100vw - 2rem));
    padding: .85rem 1rem;
    border-radius: 12px;
    color: white;
    background: var(--ink);
    box-shadow: var(--shadow);
    animation: toast-in .25s ease both;
}
.toast--success { background: #315f42; }
.toast--error { background: var(--bordeaux); }
.toast--info { background: var(--petrol-dark); }
.toast.is-hiding { animation: toast-out .25s ease both; }
@keyframes toast-in { from { transform: translateY(-10px); opacity: 0; } }
@keyframes toast-out { to { transform: translateY(-10px); opacity: 0; } }

/* Landing */
.landing-page { display: grid; align-items: stretch; }
.landing {
    width: min(1240px, calc(100% - 40px));
    min-height: calc(100vh - 40px);
    margin: 20px auto;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(330px, .72fr);
    overflow: hidden;
    border-radius: 28px;
    border: 1px solid rgba(142,27,34,.12);
    box-shadow: 0 24px 70px rgba(62,40,25,.13);
    background: rgba(255,253,248,.74);
}
.landing__panel {
    position: relative;
    min-height: 720px;
    padding: clamp(2rem, 5vw, 4.8rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background:
        linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,250,240,.64)),
        radial-gradient(circle at 70% 18%, rgba(228,87,46,.14), transparent 16rem);
}
.landing__panel::after {
    content: "";
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 49% 51% 43% 57% / 55% 44% 56% 45%;
    border: 1px solid rgba(142,27,34,.14);
    right: -78px;
    bottom: 110px;
    transform: rotate(18deg);
}
.landing__copy { max-width: 700px; padding: 3rem 0; position: relative; z-index: 1; }
.landing__copy h1 { font-size: clamp(3rem, 6vw, 5.8rem); color: var(--bordeaux-dark); margin-bottom: 1.45rem; }
.landing__copy p { max-width: 660px; font-size: 1.13rem; color: #555552; }
.landing__steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; position: relative; z-index: 1; }
.landing__steps > div { display: flex; align-items: flex-start; gap: .75rem; padding-right: .5rem; }
.landing__steps > div > span { display: grid; place-items: center; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--petrol); color: white; font-weight: 800; font-size: .82rem; }
.landing__steps p { margin: 0; display: grid; gap: .22rem; }
.landing__steps strong { font-size: .9rem; }
.landing__steps small { color: var(--muted); line-height: 1.35; }
.landing__privacy { margin: 2rem 0 0; color: var(--muted); font-size: .78rem; }
.landing__aside {
    display: grid;
    place-items: center;
    padding: clamp(1.5rem, 4vw, 4rem);
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.12), transparent 16rem),
        linear-gradient(160deg, var(--bordeaux-dark), #531015);
}
.invitation-card { width: min(100%, 390px); padding: 2.2rem; background: rgba(255,252,245,.98); }
.invitation-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1.2rem; border-radius: 50%; color: white; background: var(--coral); font-size: 1.35rem; }
.invitation-card h2 { font-family: Georgia, serif; font-size: 1.85rem; color: var(--bordeaux-dark); }
.invitation-card > p { color: var(--muted); }
.invitation-card__admin-link { display: inline-block; margin-top: 1.4rem; }
.demo-box { margin: 1.6rem 0; padding: 1.15rem; border-radius: 14px; background: var(--paper); border: 1px dashed #cdbfae; }
.demo-box p { margin: .35rem 0 1rem; color: var(--muted); font-size: .87rem; }
.single-card-wrap, .admin-login-wrap { min-height: 100vh; padding: 2rem; display: grid; place-items: center; }
.error-card, .admin-login-card { width: min(100%, 480px); padding: 2.2rem; text-align: center; }
.error-card__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; background: rgba(142,27,34,.1); color: var(--bordeaux); font-size: 1.6rem; font-weight: 900; }
.error-card h1, .admin-login-card h1 { font-size: 2.4rem; color: var(--bordeaux-dark); }
.signin-card__status { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 1rem; border-radius: 50%; color: white; background: var(--green); font-size: 1.25rem; font-weight: 900; }
.signin-card__privacy { font-size: .72rem; }

/* Topbar */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: 72px;
    display: grid;
    grid-template-columns: 290px 1fr auto;
    align-items: center;
    padding: 0 1.5rem;
    background: rgba(255,253,248,.93);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(15px);
}
.topnav { display: flex; align-self: stretch; align-items: stretch; gap: .15rem; }
.topnav a { display: flex; align-items: center; padding: 0 1rem; color: var(--muted); font-weight: 700; font-size: .88rem; border-bottom: 3px solid transparent; }
.topnav a:hover, .topnav a.is-active { color: var(--bordeaux); border-bottom-color: var(--bordeaux); }
.topbar__person { display: flex; align-items: center; gap: .65rem; }
.topbar__person > span:not(.avatar) { display: grid; line-height: 1.1; }
.topbar__person strong { font-size: .83rem; }
.topbar__person small { color: var(--muted); font-size: .72rem; margin-top: .18rem; }
.icon-link { appearance: none; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; color: var(--muted); background: var(--paper); transform: rotate(90deg); cursor: pointer; }
.icon-link:hover { color: var(--bordeaux); background: rgba(142,27,34,.08); }
.logout-form { margin: 0; }

.avatar { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; flex: 0 0 auto; background: linear-gradient(145deg, var(--petrol), var(--berry)); color: white; font-weight: 800; border: 3px solid rgba(255,255,255,.8); box-shadow: 0 4px 13px rgba(30,50,55,.16); }
.avatar--small { width: 38px; height: 38px; font-size: .75rem; }
.avatar--large { width: 64px; height: 64px; }
.avatar--xlarge { width: 112px; height: 112px; font-size: 1.6rem; }
.avatar--table { width: 40px; height: 40px; font-size: .72rem; }
.avatar--initials { line-height: 1; }

/* Trainer workspace */
.app-layout { min-height: calc(100vh - 72px); display: grid; grid-template-columns: 270px minmax(0, 1fr); }
.sidebar {
    position: sticky;
    top: 72px;
    align-self: start;
    height: calc(100vh - 72px);
    overflow-y: auto;
    padding: 1.5rem 1.25rem 2rem;
    background: rgba(247,241,231,.78);
    border-right: 1px solid var(--line);
}
.profile-mini { display: flex; align-items: center; gap: .8rem; padding: .2rem .25rem 1.35rem; }
.profile-mini > div { display: grid; line-height: 1.15; }
.profile-mini strong { font-family: Georgia, serif; color: var(--bordeaux-dark); font-size: 1.25rem; }
.profile-mini span { font-size: .77rem; }
.progress-card { padding: 1rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,248,.8); }
.progress-card__head { display: flex; justify-content: space-between; font-size: .82rem; }
.progress-card__head span { color: var(--petrol); font-weight: 800; }
.progress-bar { height: 7px; overflow: hidden; margin: .65rem 0 .9rem; border-radius: 999px; background: var(--paper-deep); }
.progress-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--petrol), #3c969e); }
.metric-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .35rem; }
.metric-row div { display: grid; }
.metric-row strong { font-size: 1.1rem; color: var(--ink); }
.metric-row span { color: var(--muted); font-size: .64rem; }
.step-list { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .2rem; }
.step-list li { border-radius: 10px; color: var(--muted); }
.step-list li > a { display: flex; align-items: flex-start; gap: .72rem; padding: .7rem .55rem; border-radius: inherit; }
.step-list li > a:hover { background: rgba(255,255,255,.6); }
.step-list li > a:focus-visible { outline: 3px solid rgba(20,116,127,.22); outline-offset: 2px; }
.step-list li > a > span { display: grid; place-items: center; flex: 0 0 26px; height: 26px; border-radius: 50%; border: 1px solid #cdbfae; font-size: .7rem; font-weight: 800; }
.step-list li > a > div { display: grid; gap: .08rem; }
.step-list strong { font-size: .78rem; }
.step-list small { font-size: .67rem; line-height: 1.25; }
.step-list li.is-current { color: var(--bordeaux); background: rgba(142,27,34,.06); }
.step-list li.is-current > a > span { color: white; border-color: var(--bordeaux); background: var(--bordeaux); }
.step-list li.is-done { color: var(--ink); }
.step-list li.is-done > a > span { color: white; border-color: var(--petrol); background: var(--petrol); }
.sidebar__hint { margin: .8rem .3rem 0; color: var(--muted); text-align: center; font-size: .7rem; line-height: 1.35; }
.workspace { min-width: 0; padding: 2rem clamp(1.2rem, 3vw, 3rem) 4rem; }
.workspace-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; margin-bottom: 1.55rem; }
.workspace-hero > div:first-child { max-width: 740px; }
.workspace-hero h1 { margin-bottom: .65rem; color: var(--bordeaux-dark); font-size: clamp(2.4rem, 4vw, 3.7rem); }
.workspace-hero p { margin-bottom: 0; color: var(--muted); max-width: 690px; }
.snapshot-badge { min-width: 225px; display: flex; align-items: center; gap: .7rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,253,248,.74); }
.snapshot-badge > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--petrol); background: rgba(20,116,127,.09); }
.snapshot-badge div { display: grid; line-height: 1.25; }
.snapshot-badge strong { font-size: .75rem; }
.snapshot-badge small { color: var(--muted); font-size: .64rem; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,253,248,.84); box-shadow: var(--shadow-small); }
.search-field { flex: 1 1 340px; display: flex; align-items: center; gap: .65rem; min-width: 220px; padding: 0 .8rem; border-radius: 10px; background: white; border: 1px solid var(--line-soft); }
.search-field span { color: var(--muted); font-size: 1.25rem; transform: rotate(-15deg); }
.search-field input { width: 100%; min-height: 42px; border: 0; outline: 0; background: transparent; }
.collection-field { flex: 0 1 220px; display: grid; gap: .15rem; }
.collection-field > span { color: var(--muted); font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.collection-field select { width: 100%; min-height: 42px; padding: .55rem 2rem .55rem .7rem; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--ink); background: white; }
.collection-field select:focus-visible { outline: 3px solid rgba(20,116,127,.2); border-color: var(--petrol); }
.filter-tabs { display: flex; flex-wrap: wrap; gap: .3rem; }
.filter-tabs button { appearance: none; border: 0; border-radius: 999px; padding: .58rem .8rem; background: transparent; color: var(--muted); cursor: pointer; font-weight: 750; font-size: .75rem; }
.filter-tabs button span { display: inline-grid; place-items: center; min-width: 20px; height: 20px; margin-left: .25rem; padding: 0 .3rem; border-radius: 999px; background: rgba(39,51,58,.07); font-size: .64rem; }
.filter-tabs button:hover, .filter-tabs button.is-active { color: var(--bordeaux); background: rgba(142,27,34,.08); }
.catalog-summary { display: flex; justify-content: space-between; margin: 1.25rem .15rem .8rem; }
.catalog-summary strong { font-size: .85rem; }
.catalog-summary span { color: var(--muted); font-size: .75rem; }
.product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.product-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,253,248,.93); box-shadow: 0 4px 16px rgba(55,40,27,.055); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.product-card:hover { transform: translateY(-3px); border-color: #cdbdad; box-shadow: 0 12px 28px rgba(55,40,27,.11); }
.product-card.is-known { border-color: rgba(20,116,127,.43); box-shadow: inset 0 0 0 1px rgba(20,116,127,.08), 0 6px 20px rgba(30,80,85,.08); }
.product-card[hidden] { display: none !important; }
.product-card__visual { position: relative; height: 245px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#eee5d7,#faf7f0); }
.product-card__visual::after { content: ""; position: absolute; inset: auto 0 0; height: 40px; background: linear-gradient(transparent, rgba(31,27,22,.08)); pointer-events: none; }
.product-card__visual img { width: 100%; height: 100%; object-fit: contain; padding: .65rem; filter: drop-shadow(0 7px 8px rgba(40,30,20,.12)); }
.status-pill, .review-pill { position: absolute; z-index: 2; top: .65rem; left: .65rem; padding: .35rem .55rem; border-radius: 999px; color: white; background: var(--petrol); font-size: .62rem; font-weight: 800; letter-spacing: .03em; }
.status-pill--classified { background: var(--berry); }
.review-pill { left: auto; right: .65rem; background: var(--coral); }
.review-pill--approved { background: var(--green); }
.product-card__body { min-height: 205px; padding: .85rem .9rem .9rem; display: flex; flex-direction: column; }
.category-label { color: var(--petrol); font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.product-card h2 { margin: .36rem 0 .25rem; font-family: Georgia, serif; font-size: 1rem; color: #403832; line-height: 1.22; }
.product-card__author { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.35; }
.product-card__bottom { margin-top: auto; padding-top: .8rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.price-label { color: var(--ink); font-size: .72rem; font-weight: 750; white-space: nowrap; }
.empty-state { padding: 4rem 1rem; text-align: center; color: var(--muted); }
.empty-state strong { color: var(--ink); font-size: 1.2rem; }
.catalog-more { display: grid; justify-items: center; gap: .55rem; padding: 1.5rem 0 .5rem; }
.catalog-more p { margin: 0; color: var(--muted); font-size: .75rem; }
.profile-nudge { margin-bottom: 1rem; padding: 1.15rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-color: rgba(20,116,127,.35); background: rgba(244,253,251,.94); }
.profile-nudge h2 { margin: 0 0 .25rem; color: var(--petrol-dark); font-family: Georgia, serif; }
.profile-nudge p { margin: 0; color: var(--muted); font-size: .8rem; }
.profile-nudge .eyebrow { margin-bottom: .35rem; color: var(--petrol); }
.profile-nudge > div:last-child { display: flex; flex: 0 0 auto; gap: .5rem; }

/* Forms */
.profile-workspace, .recommendation-workspace, .review-workspace, .admin-workspace { width: min(1320px, calc(100% - 40px)); margin: 0 auto; padding: 2.2rem 0 4rem; }
.profile-heading, .review-heading { margin-bottom: 1.5rem; }
.profile-heading h1, .review-heading h1 { color: var(--bordeaux-dark); font-size: clamp(2.4rem,4vw,3.7rem); margin-bottom: .55rem; }
.profile-heading p, .review-heading p { color: var(--muted); }
.profile-form { display: grid; grid-template-columns: minmax(280px,.75fr) minmax(0,1.45fr); gap: 1rem; align-items: start; }
.profile-preview-card { grid-row: span 2; padding: 1.35rem; position: sticky; top: 92px; }
.profile-preview-card h2, .form-card h2 { font-family: Georgia, serif; color: var(--bordeaux-dark); }
.helper-preview { display: flex; align-items: center; gap: 1rem; padding: 1rem; border-radius: 14px; background: var(--paper); }
.helper-preview > div { display: grid; }
.helper-preview strong { font-family: Georgia, serif; font-size: 1.25rem; color: var(--bordeaux-dark); }
.helper-preview span { color: var(--petrol); font-size: .72rem; font-weight: 750; }
.helper-preview p { margin: .5rem 0 0; color: var(--muted); font-size: .76rem; }
.upload-box { margin-top: 1rem; padding: 1rem; display: grid; border: 1px dashed #cbbbaa; border-radius: 12px; cursor: pointer; }
.upload-box:hover { border-color: var(--bordeaux); background: rgba(142,27,34,.03); }
.upload-box > span { color: var(--bordeaux); font-weight: 800; }
.upload-box small { color: var(--muted); }
.upload-box input { margin-top: .75rem; }
.form-card { padding: 1.4rem; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1rem; }
.form-grid label, .invite-form label, .login-form label { display: grid; gap: .38rem; }
.form-grid label > span, .invite-form label > span, .login-form label > span { font-size: .76rem; font-weight: 800; }
.form-grid input, .form-grid textarea, .invite-form input, .login-form input, .editor-card textarea, .recommendation-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: .78rem .85rem;
    outline: none;
    color: var(--ink);
    background: white;
}
.form-grid input:focus, .form-grid textarea:focus, .invite-form input:focus, .login-form input:focus, .editor-card textarea:focus, .recommendation-form textarea:focus { border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(20,116,127,.1); }
.form-grid small, label > small { color: var(--muted); font-size: .68rem; }
.form-grid__wide { grid-column: 1 / -1; }
.check-line { display: flex; align-items: flex-start; gap: .72rem; padding: .8rem 0; cursor: pointer; }
.check-line + .check-line { border-top: 1px solid var(--line-soft); }
.check-line input, .favorite-line input { width: 18px; height: 18px; accent-color: var(--bordeaux); margin-top: .12rem; }
.check-line > span { display: grid; gap: .12rem; }
.check-line small { color: var(--muted); font-size: .74rem; }
.form-actions { grid-column: 2; display: flex; justify-content: flex-end; gap: .6rem; padding-top: .2rem; }
.form-errors { margin-bottom: 1rem; padding: .9rem 1rem; border: 1px solid rgba(142,27,34,.25); border-radius: 12px; color: var(--bordeaux-dark); background: rgba(142,27,34,.06); }
.form-errors ul { margin-bottom: 0; }
.legal-footer { display: flex; justify-content: center; gap: 1rem; padding: 1.1rem; color: var(--muted); font-size: .78rem; }
.legal-footer a:hover { color: var(--bordeaux); text-decoration: underline; }
.withdrawal-card, .admin-danger-zone { width: min(1320px, calc(100% - 40px)); margin: 1rem auto 0; padding: 1.2rem; }
.withdrawal-card h2, .admin-danger-zone h2 { font-family: Georgia, serif; color: var(--bordeaux-dark); }
.withdrawal-card p, .admin-danger-zone p { color: var(--muted); }
.admin-action-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.original-profile { display: grid; grid-template-columns: minmax(100px,.3fr) 1fr; gap: .55rem 1rem; }
.original-profile dt { color: var(--muted); font-size: .75rem; font-weight: 800; }
.original-profile dd { margin: 0; white-space: pre-wrap; }

.recommendation-layout { display: grid; grid-template-columns: 310px minmax(0,1fr); gap: 1.2rem; align-items: start; }
.product-focus { position: sticky; top: 92px; }
.product-focus__cover { height: 390px; margin-bottom: 1rem; border-radius: 17px; overflow: hidden; display: grid; place-items: center; background: rgba(255,253,248,.85); border: 1px solid var(--line); }
.product-focus__cover img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; filter: drop-shadow(0 10px 10px rgba(50,35,25,.16)); }
.product-focus h1 { margin: .5rem 0 .35rem; color: var(--bordeaux-dark); font-size: 2rem; }
.product-focus > p { color: var(--muted); }
.focus-note { margin-top: 1.5rem; display: flex; gap: .7rem; padding: .9rem; border-radius: 12px; background: rgba(20,116,127,.07); color: #315a5e; font-size: .76rem; }
.focus-note > span { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; color: white; background: var(--petrol); font-family: Georgia,serif; font-weight: 800; }
.focus-note p { margin: 0; }
.recommendation-form { display: grid; gap: .8rem; }
.question-card { padding: 1.35rem; display: grid; grid-template-columns: 40px minmax(0,1fr); gap: 1rem; }
.question-card__number { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: white; background: var(--bordeaux); font-weight: 800; }
.question-card__content h2 { margin-bottom: .3rem; font-family: Georgia,serif; color: var(--bordeaux-dark); }
.question-card__content > p { margin-bottom: 1rem; color: var(--muted); font-size: .82rem; }
.radio-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .55rem; }
.radio-cards--two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.radio-cards label { position: relative; cursor: pointer; }
.radio-cards input { position: absolute; opacity: 0; }
.radio-cards label > span { min-height: 68px; display: flex; flex-direction: column; justify-content: center; padding: .7rem; border: 1px solid var(--line); border-radius: 11px; background: white; }
.radio-cards label:hover > span { border-color: #c5b5a5; }
.radio-cards input:checked + span { border-color: var(--petrol); box-shadow: inset 0 0 0 1px var(--petrol); background: rgba(20,116,127,.055); }
.radio-cards strong { font-size: .78rem; }
.radio-cards small { margin-top: .18rem; color: var(--muted); font-size: .66rem; line-height: 1.28; }
.chip-options { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-options label { position: relative; cursor: pointer; }
.chip-options input { position: absolute; opacity: 0; }
.chip-options span { display: inline-flex; align-items: center; min-height: 38px; padding: .52rem .78rem; border-radius: 999px; border: 1px solid var(--line); background: white; color: var(--muted); font-size: .75rem; font-weight: 700; }
.chip-options input:checked + span { color: var(--petrol-dark); border-color: var(--petrol); background: rgba(20,116,127,.08); box-shadow: inset 0 0 0 1px rgba(20,116,127,.18); }
.taxonomy-chip { position: relative; gap: .38rem; outline: 0; }
.taxonomy-chip b { display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; color: var(--petrol-dark); background: rgba(20,116,127,.12); font-size: .64rem; }
.taxonomy-chip::after {
    content: attr(data-tooltip);
    position: absolute;
    z-index: 30;
    left: 50%;
    bottom: calc(100% + 9px);
    width: min(280px, calc(100vw - 3rem));
    padding: .65rem .75rem;
    border-radius: 9px;
    color: white;
    background: var(--ink);
    box-shadow: var(--shadow-small);
    font-size: .7rem;
    font-weight: 600;
    line-height: 1.4;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 5px);
    transition: opacity .15s ease, transform .15s ease;
}
.taxonomy-chip:hover::after, .taxonomy-chip:focus::after { opacity: 1; transform: translate(-50%, 0); }
.taxonomy-chip:focus-visible { box-shadow: 0 0 0 3px rgba(20,116,127,.2); }
.taxonomy-addition { margin-top: .8rem; display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: .45rem .6rem; align-items: end; }
.taxonomy-addition label { display: grid; gap: .28rem; }
.taxonomy-addition label > span { font-size: .72rem; font-weight: 800; }
.taxonomy-addition input { width: 100%; min-height: 40px; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 9px; background: white; }
.taxonomy-addition input:focus { outline: 0; border-color: var(--petrol); box-shadow: 0 0 0 3px rgba(20,116,127,.1); }
.taxonomy-addition small { grid-column: 1 / -1; color: var(--muted); font-size: .67rem; }
.taxonomy-pending { grid-column: 1 / -1; justify-self: start; padding: .38rem .6rem; border-radius: 999px; color: var(--petrol-dark); background: rgba(20,116,127,.08); font-size: .7rem; font-weight: 750; }
.textarea-meta { margin-top: .35rem; display: flex; justify-content: space-between; color: var(--muted); font-size: .65rem; }
.favorite-line { margin-top: 1rem; display: flex; align-items: flex-start; gap: .7rem; padding: .85rem; border-radius: 12px; background: rgba(228,87,46,.07); cursor: pointer; }
.favorite-line > span { display: grid; }
.favorite-line small { color: var(--muted); font-size: .7rem; }
.sticky-actions { position: sticky; bottom: .7rem; z-index: 10; display: flex; align-items: center; gap: .6rem; padding: .85rem; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,253,248,.95); box-shadow: 0 10px 30px rgba(55,40,27,.14); backdrop-filter: blur(14px); }
.sticky-actions > div { margin-right: auto; display: grid; }
.sticky-actions strong { font-size: .78rem; }
.sticky-actions span { color: var(--muted); font-size: .67rem; }

/* Admin */
.topbar--admin .brand__mark { background: var(--petrol); }
.admin-login-card { text-align: left; }
.admin-login-card .brand { margin-bottom: 2.5rem; }
.admin-login-card h1 { margin-bottom: .5rem; }
.admin-login-card > p { color: var(--muted); }
.login-form { display: grid; gap: 1rem; margin: 1.5rem 0 1rem; }
.demo-credentials { margin-bottom: 1.2rem; padding: .65rem .8rem; border-radius: 9px; background: var(--paper); color: var(--muted); font-size: .76rem; }
.demo-credentials code { color: var(--bordeaux); font-weight: 800; }
.admin-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; }
.admin-heading h1 { margin-bottom: .45rem; color: var(--bordeaux-dark); font-size: clamp(2.4rem,4vw,3.5rem); }
.admin-heading p { margin: 0; color: var(--muted); }
.stat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .8rem; margin-bottom: .8rem; }
.stat-card { padding: 1rem 1.1rem; display: grid; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,248,.84); }
.stat-card > span { color: var(--muted); font-size: .7rem; font-weight: 750; }
.stat-card strong { margin: .2rem 0; font-family: Georgia,serif; font-size: 2rem; color: var(--bordeaux-dark); }
.stat-card small { color: var(--muted); font-size: .65rem; }
.stat-card--accent { border-color: rgba(228,87,46,.33); background: rgba(228,87,46,.065); }
.stat-card--accent strong { color: var(--coral); }
.new-invite { display: flex; gap: 1rem; padding: 1.2rem; margin: 1rem 0; border-color: rgba(40,123,75,.34); background: rgba(247,255,249,.94); }
.new-invite__icon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; color: white; background: #287b4b; font-weight: 900; }
.new-invite__body { flex: 1; min-width: 0; }
.new-invite h2 { margin-bottom: .25rem; color: #225b38; }
.new-invite p { margin-bottom: .8rem; color: var(--muted); }
.copy-row { display: flex; gap: .5rem; margin-bottom: .5rem; }
.copy-row input { min-width: 0; flex: 1; border: 1px solid var(--line); border-radius: 10px; padding: .65rem .75rem; background: white; font-size: .72rem; }
.new-invite small { color: var(--muted); }
.admin-columns { display: grid; grid-template-columns: minmax(320px,.8fr) minmax(0,1.3fr); gap: .8rem; margin-bottom: .8rem; }
.invite-builder, .review-queue, .trainer-table-card { padding: 1.15rem; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.section-heading h2 { margin: 0; font-family: Georgia,serif; color: var(--bordeaux-dark); }
.section-heading .eyebrow { margin-bottom: .3rem; }
.section-heading > span { color: var(--muted); font-size: .72rem; }
.section-icon, .queue-count { display: grid !important; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: white !important; background: var(--petrol); font-size: 1rem !important; font-weight: 800; }
.queue-count { background: var(--coral); }
.invite-builder > p { color: var(--muted); font-size: .8rem; }
.invite-form { display: grid; gap: .75rem; }
.process-note { margin-top: 1rem; display: grid; padding: .75rem; border-radius: 10px; background: var(--paper); font-size: .68rem; }
.process-note span { color: var(--muted); }
.queue-list { display: grid; gap: .35rem; }
.queue-item { display: grid; grid-template-columns: 48px minmax(0,1fr) 24px; align-items: center; gap: .7rem; padding: .55rem; border-radius: 10px; }
.queue-item:hover { background: var(--paper); }
.queue-item img { width: 48px; height: 56px; object-fit: contain; border-radius: 6px; background: var(--paper); }
.queue-item > div { min-width: 0; display: grid; }
.queue-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.queue-item span { color: var(--muted); font-size: .67rem; }
.queue-item__arrow { color: var(--bordeaux) !important; font-size: 1rem !important; }
.empty-queue { min-height: 180px; display: grid; place-items: center; align-content: center; text-align: center; }
.empty-queue > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: white; background: var(--green); }
.empty-queue p { margin: .2rem 0 0; color: var(--muted); font-size: .74rem; }
.trainer-table-card { margin-bottom: .8rem; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .74rem; }
.data-table th { padding: .65rem .7rem; text-align: left; color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.data-table td { padding: .72rem .7rem; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
.data-table tbody tr:last-child td { border-bottom: 0; }
.person-cell { display: flex; align-items: center; gap: .65rem; min-width: 210px; }
.person-cell > span { display: grid; }
.person-cell small { color: var(--muted); font-size: .64rem; }
.table-status { display: inline-flex; padding: .32rem .5rem; border-radius: 999px; color: #7a5420; background: #fff4d9; font-size: .63rem; font-weight: 750; white-space: nowrap; }
.table-status--ok { color: #315d3e; background: #e9f5ec; }
.table-status--muted { color: var(--muted); background: var(--paper); }
.table-action { appearance: none; border: 0; background: transparent; color: var(--bordeaux); font-size: .67rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.source-note { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; border: 1px dashed #c9baa9; border-radius: 12px; color: var(--muted); }
.source-note > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--petrol); background: rgba(20,116,127,.09); }
.source-note > div { display: grid; flex: 1; }
.source-note strong { color: var(--ink); font-size: .75rem; }
.source-note small { font-size: .65rem; }
.source-note code { font-size: .68rem; }

/* Review */
.review-heading { display: flex; justify-content: space-between; align-items: flex-end; }
.review-status { padding: .42rem .65rem; border-radius: 999px; color: #7a5420; background: #fff4d9; font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.review-status--approved { color: #315d3e; background: #e9f5ec; }
.review-status--rejected { color: var(--bordeaux); background: rgba(142,27,34,.08); }
.review-layout { display: grid; grid-template-columns: 280px minmax(0,1fr); gap: 1rem; align-items: start; }
.review-context { display: grid; gap: .75rem; position: sticky; top: 92px; }
.review-product-card, .review-person-card, .consent-card, .editor-card { padding: 1rem; }
.review-product-card img { height: 260px; width: 100%; object-fit: contain; margin-bottom: .8rem; border-radius: 10px; background: var(--paper); }
.review-product-card h2 { font-family: Georgia,serif; color: var(--bordeaux-dark); }
.review-product-card p { color: var(--muted); font-size: .75rem; }
.review-person-card { display: flex; align-items: center; gap: .75rem; }
.review-person-card > div { display: grid; }
.review-person-card span { color: var(--petrol); font-size: .68rem; }
.review-person-card p { margin: .35rem 0; color: var(--muted); font-size: .7rem; }
.review-person-card small { color: var(--muted); }
.consent-card h3 { margin-bottom: .5rem; }
.consent-card p { margin: .25rem 0; font-size: .72rem; }
.review-editor { display: grid; gap: .75rem; }
.editor-card h2 { font-family: Georgia,serif; color: var(--bordeaux-dark); }
.editor-card > p { color: var(--muted); font-size: .75rem; }
.editor-card blockquote { margin: 0; padding: 1rem; border-left: 3px solid var(--coral); background: var(--paper); color: #4f4741; font-family: Georgia,serif; font-size: 1.05rem; }
.review-actions { position: sticky; bottom: .7rem; z-index: 10; display: flex; justify-content: flex-end; gap: .5rem; padding: .85rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,253,248,.96); box-shadow: var(--shadow); }

@media (max-width: 1180px) {
    .product-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .topbar { grid-template-columns: 250px 1fr auto; }
    .radio-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 920px) {
    .landing { grid-template-columns: 1fr; }
    .landing__panel { min-height: auto; }
    .landing__aside { padding: 2rem; }
    .landing__steps { grid-template-columns: 1fr; }
    .topbar { grid-template-columns: auto 1fr auto; }
    .topnav { justify-content: center; }
    .topbar__person > span:not(.avatar) { display: none; }
    .app-layout { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .step-list { grid-template-columns: repeat(4,1fr); }
    .step-list li { padding: .5rem; }
    .step-list small { display: none; }
    .workspace-hero { align-items: flex-start; }
    .toolbar { align-items: stretch; flex-direction: column; }
    .search-field, .collection-field { flex: none; width: 100%; }
    .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .profile-form, .recommendation-layout, .review-layout { grid-template-columns: 1fr; }
    .profile-preview-card, .product-focus, .review-context { position: static; }
    .profile-preview-card { grid-row: auto; }
    .form-actions { grid-column: 1; }
    .product-focus { display: grid; grid-template-columns: 190px 1fr; gap: 1rem; align-items: start; }
    .product-focus__cover { height: 260px; grid-row: span 5; }
    .admin-columns { grid-template-columns: 1fr; }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
    .landing { width: calc(100% - 16px); margin: 8px auto; border-radius: 18px; }
    .landing__panel, .landing__aside { padding: 1.3rem; }
    .landing__copy { padding: 2.6rem 0; }
    .landing__copy h1 { font-size: 3rem; }
    .topbar { height: 62px; padding: 0 .75rem; grid-template-columns: 1fr auto; }
    .topbar .brand small, .topbar__person, .topnav { display: none; }
    .topbar .brand__mark { width: 34px; height: 34px; }
    .app-layout { min-height: calc(100vh - 62px); }
    .sidebar { padding: 1rem; }
    .profile-mini { display: none; }
    .step-list { grid-template-columns: repeat(4,1fr); }
    .step-list li > a { justify-content: center; padding: .5rem; }
    .step-list li > a > div { display: none; }
    .workspace, .profile-workspace, .recommendation-workspace, .review-workspace, .admin-workspace { width: 100%; padding: 1.2rem .8rem 3rem; }
    .workspace-hero, .admin-heading, .review-heading { display: block; }
    .snapshot-badge { margin-top: 1rem; }
    .workspace-hero h1, .profile-heading h1, .admin-heading h1, .review-heading h1 { font-size: 2.55rem; }
    .catalog-summary span { display: none; }
    .product-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
    .product-card__visual { height: 190px; }
    .product-card__body { min-height: 190px; padding: .7rem; }
    .product-card h2 { font-size: .9rem; }
    .product-card__bottom { align-items: stretch; flex-direction: column; }
    .price-label { display: none; }
    .button--small { width: 100%; }
    .filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .2rem; }
    .filter-tabs button { white-space: nowrap; }
    .profile-nudge { align-items: stretch; flex-direction: column; }
    .profile-nudge > div:last-child { display: grid; grid-template-columns: 1fr 1fr; }
    .taxonomy-addition { grid-template-columns: 1fr; }
    .taxonomy-addition .button { width: 100%; }
    .taxonomy-addition small, .taxonomy-pending { grid-column: 1; }
    .form-grid { grid-template-columns: 1fr; }
    .form-grid__wide { grid-column: 1; }
    .product-focus { grid-template-columns: 120px 1fr; }
    .product-focus__cover { height: 180px; }
    .radio-cards, .radio-cards--two { grid-template-columns: 1fr; }
    .question-card { grid-template-columns: 30px minmax(0,1fr); gap: .65rem; padding: .9rem; }
    .question-card__number { width: 28px; height: 28px; font-size: .7rem; }
    .sticky-actions, .review-actions { flex-wrap: wrap; }
    .sticky-actions > div { width: 100%; }
    .sticky-actions .button, .review-actions .button { flex: 1 1 calc(50% - .3rem); }
    .stat-grid { grid-template-columns: repeat(2,1fr); }
    .copy-row { flex-direction: column; }
    .source-note code { display: none; }
}

/* Read-only state after submission */
.recommendation-fields{border:0;padding:0;margin:0;min-width:0;display:contents}
.recommendation-form.is-locked .question-card{opacity:.72}
.recommendation-form.is-locked input,
.recommendation-form.is-locked textarea{cursor:not-allowed}
.locked-notice{max-width:1280px;margin:0 auto 20px;padding:15px 18px;border:1px solid rgba(20,116,127,.24);border-radius:14px;background:rgba(20,116,127,.08);display:flex;gap:12px;align-items:baseline;color:#27434a}
.locked-notice strong{white-space:nowrap;color:#14747f}
.locked-notice span{font-size:14px}
@media(max-width:720px){.locked-notice{align-items:flex-start;flex-direction:column;gap:4px}.locked-notice strong{white-space:normal}}
