:root {
  color-scheme: light;
  --ink: #263a2c;
  --muted: #758076;
  --cream: #f5f3ed;
  --paper: #fffefa;
  --line: #e6e5dc;
  --green: #2f5b3e;
  --green-dark: #23462f;
  --lime: #dce8b8;
  --orange: #e9a160;
  --shadow: 0 18px 50px rgba(34, 52, 39, .07);
  --soft: #e7edd8;
  --soft-2: #e8eedb;
  --soft-text: #6c7d5d;
  --faint: #92978d;
  --nav: #69756a;
  --topbar-bg: rgba(255,254,250,.88);
  --input-bg: #fff;
  --input-line: #dedfd5;
  --hair: #eeede6;
  --btn-line: #ccd5c9;
  --btn-hover: #f0f3eb;
  --notice-bg: #e9f0dd;
  --pill-bg: #f0f3e7;
  --pill-ink: #687a52;
  --warn-bg: #f3eddf;
  --warn-ink: #786443;
  --err-bg: #f9eae5;
  --err-ink: #914e3e;
  --ok-bg: #e6efdf;
  --ok-ink: #4c7549;
  --pending-bg: #f6efdb;
  --pending-ink: #8b7134;
  --rej-bg: #f8e9e4;
  --rej-ink: #9c5545;
  --neutral-bg: #eff0e9;
  --neutral-ink: #697264;
  --code-bg: #e4e9dc;
  --note-bg: #f1f3eb;
  --on-accent: #fff;
  --circle: rgba(255,255,255,.35);
  --circle-2: rgba(206,220,176,.45);
  --focus: #77906d;
  font-family: "Segoe UI", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--cream); color: var(--ink); min-height: 100vh; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.topbar { height: 78px; padding: 0 max(calc((100vw - 1200px) / 2), 5vw); display: flex; align-items: center; gap: 48px; background: rgba(255,254,250,.88); border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; gap: 11px; align-items: center; font-weight: 700; letter-spacing: -.04em; font-size: 19px; white-space: nowrap; }
.brand-mark { width: 31px; height: 31px; background: var(--green); color: #fff; display: inline-grid; place-items: center; border-radius: 50% 50% 50% 8px; font-family: "Playfair Display", serif; font-size: 17px; }
.nav-links { display: flex; gap: 27px; align-items: center; height: 100%; color: #69756a; font-size: 13px; flex: 1; }
.nav-links a:hover, .link-button:hover { color: var(--green); }
.account { display: flex; gap: 17px; align-items: center; font-size: 12px; }
.account { margin-left: auto; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lang-switch a { padding: 4px 10px; font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--muted); }
.lang-switch a:hover { color: var(--green); }
.lang-switch a[aria-current] { background: var(--green); color: #fff; }
.account-name { font-weight: 600; }
.account form { margin: 0; }
.link-button { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 12px; }
.page-shell { max-width: 1200px; margin: 0 auto; padding: 54px 32px 88px; min-height: calc(100vh - 135px); }
.footer { max-width: 1200px; padding: 22px 32px 34px; margin: auto; color: #92978d; font-size: 11px; border-top: 1px solid var(--line); }
.notice { margin: -20px 0 27px; padding: 13px 17px; border-radius: 10px; background: #e9f0dd; color: var(--green-dark); font-size: 13px; }
.eyebrow { color: #8b947f; text-transform: uppercase; letter-spacing: .14em; font-size: 10px; line-height: 1.6; font-weight: 700; margin: 0 0 11px; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -.035em; }
h1 { font-size: clamp(36px, 5vw, 56px); line-height: 1.08; margin-bottom: 13px; }
h2 { font-size: 25px; line-height: 1.18; }
.lead { color: var(--muted); font-size: 15px; margin: 0; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; margin-bottom: 37px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 44px; padding: 0 19px; border-radius: 8px; border: 1px solid transparent; font-size: 12px; font-weight: 700; cursor: pointer; transition: transform .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); }
.button-primary { background: var(--green); color: white; }
.button-primary:hover { background: var(--green-dark); }
.button-secondary { background: transparent; color: var(--green); border-color: #ccd5c9; }
.button-secondary:hover { background: #f0f3eb; }
.button-quiet { color: #8c594f; border-color: #ead9d4; background: transparent; }
.button-small { min-height: 34px; padding: 0 12px; font-size: 11px; }
.button-wide { width: 100%; min-height: 49px; justify-content: space-between; padding: 0 17px; }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.stat-card { min-height: 180px; padding: 23px 24px; display: flex; flex-direction: column; align-items: flex-start; background: var(--paper); border: 1px solid var(--line); border-radius: 13px; box-shadow: 0 6px 20px rgba(34,52,39,.025); }
.stat-icon { color: var(--green); font-size: 21px; margin-bottom: 10px; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-card strong { font-family: Georgia, "Times New Roman", serif; font-size: 35px; font-weight: 500; margin: 4px 0 13px; }
.stat-card a, .text-link { color: var(--green); font-size: 11px; font-weight: 700; margin-top: auto; }
.welcome-panel { margin-top: 26px; border-radius: 14px; padding: 31px 35px; background: #e7edd8; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.welcome-panel h2 { margin-bottom: 8px; }
.welcome-panel p:not(.eyebrow) { color: #718071; font-size: 13px; margin-bottom: 0; }
.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.product-card { border: 1px solid var(--line); border-radius: 13px; background: var(--paper); padding: 21px; min-height: 253px; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.product-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.product-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.product-icon { width: 40px; height: 40px; border-radius: 12px 12px 12px 3px; display: grid; place-items: center; color: var(--green); background: #e8eedb; font-size: 22px; }
.pill { color: #687a52; background: #f0f3e7; border-radius: 99px; padding: 7px 10px; font-size: 9px; }
.supplier-label { font-size: 9px; color: #92978d; letter-spacing: .1em; margin-bottom: 7px; text-transform: uppercase; }
.product-card h2 { font-size: 22px; margin-bottom: 9px; }
.product-description { color: var(--muted); font-size: 12px; line-height: 1.65; }
.product-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 12px; border-top: 1px solid #eeede6; }
.product-card-bottom strong { font-size: 14px; }
.product-card-bottom small { color: var(--muted); font-size: 10px; }
.round-link { display: grid; place-items: center; width: 32px; height: 32px; background: var(--green); color: white; border-radius: 50%; font-size: 16px; }
.empty-state { text-align: center; max-width: 470px; margin: 90px auto; }
.empty-icon { color: #8a9d68; font-size: 35px; }
.empty-state h2 { margin: 15px 0 10px; }
.empty-state p { color: var(--muted); font-size: 13px; line-height: 1.6; margin-bottom: 22px; }
.back-link { display: inline-block; margin-bottom: 24px; color: #798477; font-size: 12px; }
.detail-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(35px, 7vw, 95px); align-items: start; }
.detail-art { min-height: 490px; border-radius: 16px; background: #e7edd8; position: relative; overflow: hidden; display: grid; place-items: center; }
.detail-art::before, .detail-art::after { content: ""; position: absolute; border-radius: 50%; background: rgba(255,255,255,.35); }
.detail-art::before { width: 340px; height: 340px; left: -100px; top: -90px; }
.detail-art::after { width: 290px; height: 290px; right: -100px; bottom: -70px; background: rgba(206,220,176,.45); }
.detail-flower { z-index: 1; font-size: 140px; color: var(--green); font-family: serif; }
.detail-origin { position: absolute; z-index: 2; bottom: 23px; left: 23px; font-size: 9px; font-weight: 700; letter-spacing: .16em; line-height: 1.6; color: #6c7d5d; }
.detail-copy { padding-top: 14px; }
.detail-copy h1 { font-size: clamp(40px, 5vw, 60px); }
.detail-description { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 17px 0 25px; }
.detail-facts { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid var(--line); padding: 17px 0; gap: 12px; }
.detail-facts div { display: flex; flex-direction: column; gap: 6px; }
.detail-facts span { color: var(--muted); font-size: 10px; }
.detail-facts strong { font-size: 11px; }
.preorder-note { background: #f3eddf; padding: 12px 14px; font-size: 11px; line-height: 1.6; color: #786443; border-radius: 8px; margin: 16px 0 0; }
.pricing-box { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; margin-top: 20px; padding: 17px 18px; }
.pricing-box .eyebrow { margin-bottom: 8px; }
.price-large { font-size: 26px; font-weight: 700; margin: 0; }
.price-large small { font-size: 11px; font-weight: 400; color: var(--muted); }
.pricing-explainer { font-size: 11px; color: var(--muted); margin: 0 0 8px; }
.tier-list { list-style: none; padding: 0; margin: 0; }
.tier-list li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-top: 1px solid #f0efe9; font-size: 11px; }
.tier-list li span { color: var(--muted); }
.order-form { display: flex; align-items: flex-end; gap: 11px; margin: 18px 0 9px; }
.order-form label { flex: 1; font-size: 11px; font-weight: 600; }
.order-form input { display: block; width: 100%; margin-top: 7px; }
.muted { color: var(--muted); }
.small { font-size: 11px; line-height: 1.6; }
.owner-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.owner-actions form { margin: 0; }
.form-page { max-width: 760px; margin: auto; }
.form-intro { margin-bottom: 28px; }
.form-intro p:not(.eyebrow) { color: var(--muted); font-size: 13px; }
.listing-form, .panel { padding: clamp(20px,4vw,36px); border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.form-section + .form-section { border-top: 1px solid var(--line); padding-top: 26px; margin-top: 27px; }
.form-section h2 { font-size: 20px; margin-bottom: 20px; }
label { display: block; font-size: 11px; font-weight: 600; margin-bottom: 17px; }
input, textarea, select { display: block; width: 100%; border: 1px solid #dedfd5; border-radius: 7px; background: #fff; padding: 12px 13px; margin-top: 7px; color: var(--ink); outline: none; font-size: 12px; }
input:focus, textarea:focus, select:focus { border-color: #77906d; box-shadow: 0 0 0 3px rgba(93,127,81,.1); }
textarea { resize: vertical; line-height: 1.6; }
.label-hint { float: right; color: #9a9e94; font-weight: 400; font-size: 10px; }
.field-help { display: block; color: var(--muted); font-size: 10px; line-height: 1.55; margin-top: 7px; font-weight: 400; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.checkbox-row { display: flex; gap: 11px; align-items: flex-start; }
.checkbox-row input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--green); }
.checkbox-row span { display: flex; flex-direction: column; gap: 5px; }
.checkbox-row small { font-size: 10px; line-height: 1.5; color: var(--muted); font-weight: 400; }
.example-note { padding: 13px 15px; background: #f1f3eb; border-radius: 8px; color: #657160; font-size: 10px; line-height: 1.7; }
code { color: var(--green-dark); background: #e4e9dc; padding: 2px 4px; border-radius: 3px; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 23px; }
.form-error { background: #f9eae5; color: #914e3e; border-radius: 8px; padding: 12px 14px; margin: 0 0 18px; font-size: 11px; line-height: 1.5; }
.orders-list { display: grid; gap: 14px; }
.order-card { background: var(--paper); border: 1px solid var(--line); border-radius: 12px; padding: 22px 24px; }
.order-head { display: flex; justify-content: space-between; gap: 18px; }
.order-head .eyebrow { font-size: 9px; margin-bottom: 7px; }
.order-head h2 { font-size: 21px; margin-bottom: 5px; }
.order-head .muted { font-size: 11px; margin-bottom: 0; }
.order-total { font-size: 17px; white-space: nowrap; }
.order-statuses { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0 10px; }
.status { display: inline-block; border-radius: 99px; padding: 6px 10px; font-size: 9px; font-weight: 700; text-transform: capitalize; background: #eff0e9; color: #697264; }
.status-accepted, .status-completed, .status-payment-paid { background: #e6efdf; color: #4c7549; }
.status-pending, .status-payment-customer_reported { background: #f6efdb; color: #8b7134; }
.status-rejected { background: #f8e9e4; color: #9c5545; }
.order-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.order-actions form { margin: 0; }
.order-timeline { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 14px; font-size: 10px; }
.order-timeline summary { color: #758076; cursor: pointer; }
.order-timeline ul { list-style: none; margin: 10px 0 0; padding: 0; }
.order-timeline li { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; color: #626c61; line-height: 1.5; }
.order-timeline time { color: #9a9d94; white-space: nowrap; }
.invite-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; }
.panel h2, .invite-created h2 { font-size: 24px; margin-bottom: 22px; }
.panel .button { margin-bottom: 12px; }
.invite-created { background: #e7edd8; border-radius: 13px; padding: 29px; }
.invite-created .eyebrow { color: #73835d; }
.invite-created p:not(.eyebrow) { color: #697660; font-size: 12px; line-height: 1.7; }
.success-mark { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--green); color: white; margin-bottom: 18px; }
.invite-url { font-size: 11px; background: rgba(255,255,255,.72); margin: 16px 0 10px; }
.section-block { margin-top: 45px; }
.section-title { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 17px; }
.section-title h2 { font-size: 24px; margin: 0; }
.section-title .eyebrow { margin-bottom: 7px; }
.table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 11px; }
table { width: 100%; border-collapse: collapse; text-align: left; font-size: 11px; }
th, td { padding: 13px 16px; border-bottom: 1px solid #efeee8; }
th { color: #92978d; text-transform: uppercase; letter-spacing: .08em; font-size: 9px; font-weight: 600; }
tbody tr:last-child td { border-bottom: 0; }
.auth-wrap { max-width: 1000px; min-height: 565px; margin: 8px auto 0; display: grid; grid-template-columns: 1fr .85fr; border-radius: 16px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); }
.auth-art { position: relative; overflow: hidden; padding: 55px 45px; background: #e7edd8; display: flex; flex-direction: column; justify-content: center; }
.auth-art::before { content: ""; position: absolute; width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(47,91,62,.13); right: -150px; bottom: -160px; box-shadow: 0 0 0 28px rgba(47,91,62,.025), 0 0 0 60px rgba(47,91,62,.025); }
.auth-art h1 { position: relative; z-index: 1; font-size: clamp(42px,5.3vw,64px); }
.auth-art > p:not(.eyebrow) { position: relative; z-index: 1; color: #6f7d67; font-size: 13px; line-height: 1.8; max-width: 320px; }
.auth-art .eyebrow { color: #75825f; }
.art-stamp { position: absolute; z-index: 1; bottom: 32px; right: 38px; width: 76px; height: 76px; border: 1px solid rgba(47,91,62,.42); border-radius: 50%; display: grid; place-content: center; text-align: center; transform: rotate(12deg); color: #6b8059; font-size: 8px; line-height: 1.5; letter-spacing: .12em; }
.auth-card { padding: 55px 42px; align-self: center; }
.auth-card h2 { font-size: 32px; margin-bottom: 26px; }
.stack-form label { margin-bottom: 18px; }
.auth-card .small { margin-top: 21px; }
.register-wrap { margin-top: 0; }
.error-state { margin-top: 70px; }
.error-state .button { margin-top: 5px; }
[hidden] { display: none !important; }

/* Themes: colour variables per theme, then rules that use them */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #e6ebe4; --muted: #9aa79c; --cream: #131817; --paper: #1b2220; --line: #2d3834;
  --green: #5fa876; --green-dark: #7cc293; --lime: #2d3b2f; --orange: #e9a160;
  --shadow: 0 18px 50px rgba(0,0,0,.4);
  --soft: #243029; --soft-2: #26332b; --soft-text: #a3b59a; --faint: #7f8b82; --nav: #a1ada4;
  --topbar-bg: rgba(27,34,32,.92); --input-bg: #131817; --input-line: #34413c; --hair: #262f2c;
  --btn-line: #3b4a43; --btn-hover: #243029; --notice-bg: #25362b;
  --pill-bg: #26332b; --pill-ink: #a3c28f; --warn-bg: #3a3322; --warn-ink: #dcc48e;
  --err-bg: #3b2622; --err-ink: #eba597; --ok-bg: #233829; --ok-ink: #8fcf9a;
  --pending-bg: #3a3322; --pending-ink: #dcc48e; --rej-bg: #3b2622; --rej-ink: #eba597;
  --neutral-bg: #28312e; --neutral-ink: #a1ada4; --code-bg: #28352d; --note-bg: #212b26;
  --on-accent: #0e1a12; --circle: rgba(255,255,255,.05); --circle-2: rgba(95,168,118,.12); --focus: #5fa876;
}
:root[data-theme="latvian"] {
  --ink: #3a1a1d; --muted: #85666a; --cream: #f8f1ee; --paper: #fffdfc; --line: #ecdad7;
  --green: #9e3039; --green-dark: #7a1f27; --lime: #f0d4d4; --orange: #c99a4b;
  --shadow: 0 18px 50px rgba(110,30,40,.09);
  --soft: #f3dede; --soft-2: #f1d9d9; --soft-text: #8c5a5f; --faint: #a58c8f; --nav: #7d5f63;
  --topbar-bg: rgba(255,253,252,.92); --input-bg: #fff; --input-line: #e3cdca; --hair: #f2e5e3;
  --btn-line: #dfc3c1; --btn-hover: #f8eaea; --notice-bg: #f4e0e0;
  --pill-bg: #f6e6e4; --pill-ink: #8f3a41; --code-bg: #f1dcdb; --note-bg: #f8ecea;
  --circle: rgba(255,255,255,.45); --circle-2: rgba(158,48,57,.13); --focus: #9e3039;
}
:root[data-theme="brown"] {
  --ink: #3b2a1f; --muted: #837060; --cream: #f4ede3; --paper: #fffaf3; --line: #e6d9c6;
  --green: #7b4f2e; --green-dark: #5e3a1f; --lime: #e6d4b8; --orange: #d39a4f;
  --shadow: 0 18px 50px rgba(80,50,25,.09);
  --soft: #eadbc6; --soft-2: #ecdfca; --soft-text: #85684a; --faint: #a5927d; --nav: #7d6a58;
  --topbar-bg: rgba(255,250,243,.92); --input-bg: #fffdf9; --input-line: #dccbb3; --hair: #efe4d4;
  --btn-line: #d6c3a8; --btn-hover: #f3e8d7; --notice-bg: #efe1ca;
  --pill-bg: #f1e5d1; --pill-ink: #86603a; --code-bg: #ead9c0; --note-bg: #f4eadb;
  --circle: rgba(255,255,255,.4); --circle-2: rgba(123,79,46,.14); --focus: #7b4f2e;
}

.topbar { background: var(--topbar-bg); }
.nav-links { color: var(--nav); }
.footer, .supplier-label, th { color: var(--faint); }
.brand-mark, .button-primary, .round-link, .success-mark, .lang-switch a[aria-current] { color: var(--on-accent); }
.notice { background: var(--notice-bg); }
.eyebrow, .detail-origin, .auth-art .eyebrow, .invite-created .eyebrow, .empty-icon, .art-stamp { color: var(--soft-text); }
.back-link, .order-timeline summary { color: var(--muted); }
.button-secondary { border-color: var(--btn-line); }
.button-secondary:hover { background: var(--btn-hover); }
.welcome-panel, .invite-created, .auth-art { background: var(--soft); }
.welcome-panel p:not(.eyebrow), .invite-created p:not(.eyebrow), .auth-art > p:not(.eyebrow) { color: var(--soft-text); }
.product-icon { background: var(--soft-2); }
.pill { background: var(--pill-bg); color: var(--pill-ink); }
.product-card-bottom { border-top-color: var(--hair); }
.tier-list li { border-top-color: var(--hair); }
th, td { border-bottom-color: var(--hair); }
.detail-art { background: var(--soft); }
.detail-art::before { background: var(--circle); }
.detail-art::after { background: var(--circle-2); }
.preorder-note { background: var(--warn-bg); color: var(--warn-ink); }
input, textarea, select { background: var(--input-bg); border-color: var(--input-line); }
input:focus, textarea:focus, select:focus { border-color: var(--focus); }
.label-hint { color: var(--faint); }
.example-note { background: var(--note-bg); color: var(--muted); }
code { background: var(--code-bg); }
.form-error { background: var(--err-bg); color: var(--err-ink); }
.status { background: var(--neutral-bg); color: var(--neutral-ink); }
.status-accepted, .status-completed, .status-payment-paid { background: var(--ok-bg); color: var(--ok-ink); }
.status-pending, .status-payment-customer_reported { background: var(--pending-bg); color: var(--pending-ink); }
.status-rejected { background: var(--rej-bg); color: var(--rej-ink); }
.order-timeline li { color: var(--muted); }
.order-timeline time { color: var(--faint); }
.invite-url { background: var(--input-bg); }

.theme-switch { display: flex; gap: 7px; align-items: center; }
.theme-dot { width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line); box-shadow: inset 0 0 0 2px var(--paper); }
.theme-dot[aria-current] { outline: 2px solid var(--green); outline-offset: 2px; }

.product-icon.toned { background: color-mix(in srgb, var(--tone) 28%, var(--paper)); }
.detail-art.toned { background: color-mix(in srgb, var(--tone) 26%, var(--paper)); }
.detail-art.toned::after { background: color-mix(in srgb, var(--tone) 24%, transparent); }
.color-input { height: 46px; padding: 4px; cursor: pointer; }
.color-input:disabled { opacity: .4; cursor: not-allowed; }
.icon-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-mark .icon-img { width: 75%; height: 75%; }
.product-icon .icon-img { width: 75%; height: 75%; }
.detail-flower .icon-img { width: 140px; height: 140px; }
.upload-box { margin-top: 18px; }
.upload-box h2 { font-size: 20px; margin-bottom: 8px; }
.icon-preview { width: 64px; height: 64px; object-fit: contain; display: block; margin: 12px 0; border: 1px solid var(--line); border-radius: 10px; padding: 6px; }

@media (max-width: 800px) {
  .topbar { height: auto; min-height: 68px; padding: 14px 22px; flex-wrap: wrap; gap: 16px; }
  .nav-links { order: 3; overflow-x: auto; height: auto; flex-basis: 100%; gap: 22px; padding-bottom: 3px; }
  .account { margin-left: auto; }
  .page-shell { padding: 38px 22px 65px; }
  .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .detail-grid { grid-template-columns: .8fr 1.2fr; gap: 28px; }
  .detail-art { min-height: 390px; }
  .auth-wrap { grid-template-columns: .9fr 1fr; }
  .auth-art, .auth-card { padding: 38px 28px; }
}
@media (max-width: 580px) {
  .page-heading { align-items: flex-start; flex-direction: column; }
  .stats-grid, .product-grid, .invite-layout { grid-template-columns: 1fr; }
  .stat-card { min-height: 150px; }
  .welcome-panel { align-items: flex-start; flex-direction: column; padding: 25px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-art { min-height: 240px; }
  .detail-flower { font-size: 94px; }
  .detail-facts { grid-template-columns: 1fr 1fr 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 0; }
  .order-form { align-items: stretch; flex-direction: column; }
  .auth-wrap { display: block; }
  .auth-art { min-height: 270px; padding: 33px 28px; }
  .auth-art h1 { font-size: 44px; }
  .auth-card { padding: 33px 26px; }
  .order-card { padding: 18px; }
  .order-timeline li { flex-direction: column; gap: 3px; }
  .page-shell { padding-inline: 17px; }
}