/* =====================================================================
   DERM to DOOR — Patient portal
   Design: Figma "Derm To Door", page "Patient Portal" (desktop frames 1440x840, Inter Tight):
     header 75px, sidebar 322px (32px gutters, 258px items), content from x=322 with a 32px right gutter.
   Home modules, My consults, the plan-ready page and checkout carry the content and statuses of the
   "Unified patient portal" frames; the plan/checkout/consult list keep that frame's own styling under .u.
   ===================================================================== */

:root {
  --font: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --page: #F7F2EE;
  --card: #F3E6E0;
  --pink: #E4C7BB;
  --b0: #754D3A;   /* Color/0 */
  --b1: #9C6E5A;   /* Color/1 */
  --b2: #BA8D79;   /* Color/2 */
  --b3: #CDA99A;   /* Color/3 */
  --line: rgba(186, 141, 121, 0.4);
  --ink: #000;
  --ink-80: rgba(0, 0, 0, .8);
  --ink-70: rgba(0, 0, 0, .7);
  --ink-60: rgba(0, 0, 0, .6);
  --ink-50: rgba(0, 0, 0, .5);
  --ink-40: rgba(0, 0, 0, .4);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--page); color: #000; font: 400 16px/1.2 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, input, textarea, select { font-family: inherit; }
h1, h2, h3, h4, h5, p { margin: 0; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 43px; padding: 12px 24px;
  border-radius: 100px; border: 0; font: 500 16px/1.2 var(--font); white-space: nowrap; cursor: pointer; text-decoration: none;
  transition: background .15s, opacity .15s, color .15s;
}
.btn-light { background: #fff; color: #000; }
.btn-light:hover { background: #FBF7F4; }
.btn-brown { background: var(--b0); color: #fff; }
.btn-brown:hover { background: #65412F; }
.btn-dark { background: #000; color: #fff; }
.btn-dark:hover { background: #222; }
.btn-sm { height: 33px; padding: 8px 16px; font-size: 14px; }
.btn-md { height: 45px; padding: 14px 32px; font-size: 14px; }
.btn-lg { height: 55px; padding: 18px 20px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-pause { background: rgba(228, 107, 5, .3); color: #000; height: 41px; font-size: 14px; }
.btn-cancel { background: #BB0A0A; color: #fff; height: 41px; font-size: 14px; }
.btn[disabled], .btn.is-disabled { opacity: .45; pointer-events: none; }
.link { background: none; border: 0; padding: 0; cursor: pointer; font: 500 14px/1.2 var(--font); color: var(--b0); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Pills (Figma: 21px, 11px Medium, 0.3px border) ---------- */
.pill { display: inline-flex; align-items: center; height: 21px; padding: 4px 12px; border-radius: 100px; font: 500 11px/1.2 var(--font); white-space: nowrap; border: .3px solid transparent; }
.pill-ready { background: #D8F3DA; color: #457847; border-color: #457847; }
.pill-order { background: #FFEAB8; color: #CB8808; border-color: #CB8808; }
.pill-later { background: #EDE7E3; color: #6F6862; border-color: #6F6862; }
.pill-shipping { background: #E2ECF7; color: #2F5D8E; border-color: #2F5D8E; }
.pill-cancel { background: #F3DCD8; color: #BB0A0A; border-color: #BB0A0A; }
.pill-chip { background: #fff; color: var(--b1); border-color: var(--b1); }

/* ---------- Fields (floating label on a 0.5px brown outline) ---------- */
.field { position: relative; }
.field-label { position: absolute; top: -7px; left: 12px; padding: 0 4px; background: var(--card); font: 400 12px/14px var(--font); color: var(--b1); pointer-events: none; }
.input {
  display: block; width: 100%; height: 49px; padding: 16px; border-radius: 12px; border: .5px solid var(--b2);
  background: rgba(255, 255, 255, .1); font: 400 14px/17px var(--font); color: var(--b0); outline: none;
}
.input::placeholder { color: var(--b3); }
.input:focus { border-color: var(--b0); }
textarea.input { height: 80px; resize: vertical; }
select.input { appearance: none; background: rgba(255,255,255,.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23754D3A' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center; }
.input-sm { height: 44px; padding: 12px 16px; }
.form-msg { font: 400 14px/18px var(--font); padding: 10px 14px; border-radius: 10px; }
.form-msg.ok { background: #D8F3DA; color: #457847; }
.form-msg.err { background: #F3DCD8; color: #BB0A0A; }

/* ---------- Shell ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50; height: 75px; padding: 16px 32px; background: var(--page);
  border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between;
}
.logo { display: inline-flex; color: #000; text-decoration: none; }
.logo .logo-svg { width: 209px; height: auto; }
.topbar-actions { display: flex; gap: 8px; }
.layout { display: grid; grid-template-columns: 322px minmax(0, 1fr); overflow-x: clip; }
html, body { overflow-x: clip; }
.sidebar {
  position: sticky; top: 75px; align-self: start; height: calc(100vh - 75px); min-height: 560px; padding: 24px 32px;
  display: flex; flex-direction: column; justify-content: space-between;
}
.nav { display: flex; flex-direction: column; }
.nav-title { font: 400 14px/1.2 var(--font); color: var(--b1); text-transform: uppercase; margin-bottom: 16px; }
.nav-item {
  display: flex; align-items: center; gap: 8px; width: 258px; height: 44px; padding: 12px 8px; border-radius: 8px;
  color: rgba(0, 0, 0, .5); text-decoration: none; font: 400 16px/1.2 var(--font); background: none; border: 0; cursor: pointer;
}
.nav-item img { width: 20px; height: 20px; flex: none; }
.nav-item .count { opacity: .8; }
.nav-item:hover { background: rgba(243, 230, 224, .5); }
.nav-item.active { background: var(--card); color: var(--b0); font-weight: 500; }
.nav-foot { border-top: 1px solid rgba(186, 141, 121, .2); padding-top: 16px; }
.nav-foot .nav-item { height: 20px; padding: 0; color: #000; font-weight: 500; }
.nav-foot .nav-item:hover { background: none; opacity: .7; }
.main { min-width: 0; padding: 24px 32px 24px 0; }
.main-home { padding-top: 16px; }
.tabs { display: none; }

/* ---------- Page headings ---------- */
.page-title { font: 500 28px/1.2 var(--font); padding-bottom: 23px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.page-title.gap32 { margin-bottom: 32px; }
.page-title.has-pill { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.h18 { font: 500 18px/1.2 var(--font); }
.h16 { font: 500 16px/1.2 var(--font); }
.rule { height: 0; border: 0; border-top: 1px solid var(--line); margin: 0; }
.back { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1.2 var(--font); color: rgba(0,0,0,.6); text-decoration: none; margin-bottom: 33px; }
.back img { width: 16px; height: 16px; }
.empty { background: var(--card); border-radius: 12px; padding: 40px 24px; text-align: center; color: var(--ink-60); font: 400 14px/1.4 var(--font); }
.empty .btn { margin-top: 16px; }

/* ---------- Home (Patient Portal styling, Unified modules) ---------- */
.home { display: flex; flex-direction: column; gap: 24px; }
.hero {
  position: relative; min-height: 220px; border-radius: 16px; overflow: hidden; background: var(--b1) right center / cover no-repeat;
  display: flex; align-items: flex-start; padding: 58px 43px 36px;
}
.hero-text { width: 520px; max-width: 58%; display: flex; flex-direction: column; gap: 8px; }
.hero-hi { font: italic 400 20px/1.2 var(--serif); color: var(--page); }
.hero h1 { font: 500 28px/1.3 var(--font); color: #fff; margin-top: -4px; }
.hero h1 span { background: #704531; border-radius: 100px; padding: 0 10px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero p { font: 400 14px/1.2 var(--font); color: rgba(255, 255, 255, .6); max-width: 380px; }

.box { background: var(--card); border-radius: 12px; }
.consult-box { padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.box-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.consult-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.meta-col { display: flex; flex-direction: column; gap: 12px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 14px; font: 400 12px/1.2 var(--font); color: var(--b1); }
.meta-row b { font-weight: 500; }
.meta-col .rule { border-color: var(--line); }

.steps { display: flex; flex-direction: column; gap: 20px; }
.step { display: flex; align-items: flex-start; gap: 12px; font: 400 16px/1.2 var(--font); color: var(--b2); }
.step img { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.step.done { color: var(--b2); }
.step.current { color: #000; font-weight: 500; }
.step .tip { width: 14px; height: 14px; flex: none; opacity: .6; cursor: help; margin-top: 2px; }
.step-icon { width: 18px; height: 18px; flex: none; border-radius: 50%; border: 2px solid var(--b3); margin-top: 1px; }
.step.current .step-icon { background: var(--b1); border-color: var(--b1); }
.chip-row { display: flex; align-items: center; gap: 12px; }

.home-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.home-col { display: flex; flex-direction: column; gap: 24px; justify-content: space-between; }
.home-col + .home-col { gap: 12px; justify-content: flex-start; }
.col-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 15px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.col-head.no-rule { border: 0; padding: 0; }
.rx-card { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.rx-thumbs { display: flex; gap: 8px; }
.rx-thumb { width: 80px; height: 80px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.rx-thumb img { max-width: 80%; max-height: 88%; object-fit: contain; }
.rx-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rx-actions .btns { display: flex; gap: 12px; }
.orders-empty { padding: 32px 24px; text-align: center; font: 400 14px/1.2 var(--font); color: var(--ink-60); }
.orders-empty .btn { margin-top: 16px; }

.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { position: relative; height: 179px; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #F3E6E0 0%, #E4C7BB 100%) center / cover no-repeat; text-decoration: none; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; }
.tile > img { width: 24px; height: 24px; }
.tile span { font: 400 14px/1.2 var(--font); color: var(--b0); width: 100px; }
.tile:hover { filter: brightness(1.02); }

.profile-row { display: flex; align-items: center; gap: 16px; padding: 20px; border: 1px solid var(--pink); border-radius: 12px; text-decoration: none; color: #000; }
.profile-row .ico { width: 44px; height: 44px; border-radius: 8px; background: rgba(157, 111, 91, .1); display: flex; align-items: center; justify-content: center; flex: none; }
.profile-row .ico img { width: 20px; height: 20px; }
.profile-row .txt { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.profile-row strong { font: 500 18px/1.2 var(--font); color: var(--b0); }
.profile-row span { font: 400 14px/1.2 var(--font); color: var(--ink-60); }
.profile-row .arrow { width: 21px; height: 21px; }

/* Timeline (Home "Your current progress": 12px markers, 2px rail, current step card 416px) */
.ptl { list-style: none; margin: 0; padding: 0; position: relative; display: flex; flex-direction: column; gap: 20px; }
.ptl li { position: relative; display: flex; align-items: flex-start; gap: 12px; font: 400 16px/1.2 var(--font); color: var(--b2); }
.ptl-done img { width: 18px; height: 18px; flex: none; }
.ptl-done span { padding-top: 0; }
.ptl-current i, .ptl-next i { width: 12px; height: 12px; border-radius: 50%; flex: none; margin-top: 3px; position: relative; z-index: 1; }
.ptl-current i { background: var(--b1); }
.ptl-next i { border: 2px solid var(--b3); background: var(--page); }
.ptl-current, .ptl-next { padding-left: 0; }
.ptl-current ~ li::before, .ptl-current::after {
  content: ''; position: absolute; left: 5px; width: 2px; background: linear-gradient(180deg, var(--b1), var(--b3));
}
.ptl-current::after { top: 15px; bottom: -20px; }
.ptl-current ~ li::before { top: -20px; height: 20px; background: var(--b3); }
.ptl-current ~ li:not(:last-child)::after { content: ''; position: absolute; left: 5px; top: 15px; bottom: -20px; width: 2px; background: var(--b3); }
.ptl-card { width: 420px; max-width: 100%; margin-left: 0; background: var(--card); border-radius: 8px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.ptl-card strong { font: 500 16px/1.2 var(--font); color: #000; }
.ptl-card p { font: 400 14px/1.2 var(--font); color: var(--ink-60); }
.consult-box .ptl-card { background: #fff; }
.consult-box .ptl-next i { background: var(--card); }
.ptl li:last-child.ptl-current::after { display: none; }

/* ---------- My doctor's consult (frame "My doctor consult") ---------- */
.doc-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.doc-id { display: flex; align-items: center; gap: 20px; }
.doc-photo { position: relative; width: 68px; height: 68px; border-radius: 8px; background: var(--pink); overflow: hidden; flex: none; }
.doc-photo img { position: absolute; width: 104%; max-width: none; left: -2%; top: 4%; }
.doc-id strong { display: block; font: 500 18px/1.2 var(--font); }
.doc-id span { display: block; margin-top: 4px; font: 400 14px/1.2 var(--font); color: var(--b1); }
.icon-btn { width: 48px; height: 48px; border-radius: 100px; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn img { width: 20px; height: 20px; }
.consult-detail { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; align-items: start; }
.consult-copy { display: flex; flex-direction: column; gap: 32px; }
.consult-copy h2 { font: 500 20px/1.3 var(--font); margin-bottom: 16px; }
.consult-copy p { font: 400 16px/1.2 var(--font); color: var(--ink-70); }
.consult-copy p + p { margin-top: 19px; }
.consult-date { font: 400 14px/1.2 var(--font); color: var(--b0); }
.consult-images { display: flex; justify-content: flex-end; gap: 16px; min-width: 0; }
.consult-images .shot { position: relative; flex: 0 1 291px; min-width: 0; height: 300px; border-radius: 12px; overflow: hidden; }
.consult-images .shot img { width: 100%; height: 100%; object-fit: cover; }
.consult-images .shot::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .15); }
/* ---------- My consults ---------- */
.u .consult-list { display: flex; flex-direction: column; gap: 16px; }
.u .consult-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 32px; border-radius: 20px;
  background: var(--card); text-decoration: none; color: #000;
}
.u .consult-row:hover { background: #F4EEE9; }
.u .consult-row.is-ended { cursor: default; }
.u .consult-main { display: flex; align-items: center; gap: 80px; min-width: 0; }
.u .consult-who { display: flex; align-items: center; gap: 20px; width: 217px; flex: none; }
.u .doc-thumb {
  flex: none; width: 64px; height: 64px; border-radius: 8px; background: var(--grad-doctor);
  overflow: hidden; position: relative;
}
.u .doc-thumb img { position: absolute; width: 111%; height: auto; left: -6%; top: 4%; }
.u .consult-who strong { font: 600 18px/24px var(--font); width: 133px; }
.u .consult-meta { display: flex; gap: 32px; }
.u .meta { display: flex; flex-direction: column; gap: 6px; }
.u .meta .k { font: 400 14px/20px var(--font); color: var(--ink-50); white-space: nowrap; }
.u .meta .v { font: 500 16px/24px var(--font); color: var(--ink-80); white-space: nowrap; }
.u .meta .v.strong { font-weight: 600; color: #000; }
.u .meta .pill { margin-top: 2px; }
.u .chev-brown { width: 20px; height: 20px; flex: none; }

/* ---------- Consult page (in review / ended) + plan ---------- */
.u .panel { background: var(--card); border-radius: 20px; padding: 48px; }
.u .panel-stack { display: flex; flex-direction: column; gap: 40px; }
.u .consult-head { display: flex; flex-direction: column; gap: 24px; }
.u .consult-head .back { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.u .title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.u .doctor-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.u .doctor-id { display: flex; align-items: center; gap: 24px; }
.u .doc-photo { position: relative; flex: none; width: 100px; height: 100px; border-radius: 20px; overflow: hidden; background: var(--grad-doctor); }
.u .doc-photo img { position: absolute; width: 112%; height: auto; left: -6%; top: 4%; }
.u .doctor-id small { display: block; font: 400 12px/18px var(--font); }
.u .doctor-id strong { display: block; font: 600 18px/24px var(--font); margin-top: 4px; }
.u .assessment { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.u .assessment-text { width: 500px; display: flex; flex-direction: column; gap: 24px; }
.u .assessment-text h3 { font: 600 16px/24px var(--font); margin-bottom: -12px; }
.u .assessment-text .copy { display: flex; flex-direction: column; gap: 20px; font: 400 14px/20px var(--font); color: var(--ink-80); }
.u .assessment-text .date { font: 500 14px/20px var(--font); color: var(--ink-80); }
.u .assessment-photo { position: relative; width: 394px; height: 240px; border-radius: 20px; overflow: hidden; flex: none; }
.u .assessment-photo img { width: 100%; height: 100%; object-fit: cover; }
.u .assessment-photo::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .15); }
.u .consult-photos { display: flex; gap: 16px; }
.u .consult-photos .assessment-photo { width: 291px; height: 300px; }

.u .plan { display: flex; flex-direction: column; gap: 16px; }
.u .cond-card { background: #fff; border-radius: 20px; padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.u .cond-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.u .rx-note { display: inline-flex; align-items: center; gap: 6px; font: 600 13px/20px var(--font); color: var(--brown-rx); }
.u .rx-note img { width: 20px; height: 20px; }
.u .cond-include { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.u .check { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.u .check input { position: absolute; opacity: 0; pointer-events: none; }
.u .check-box {
  flex: none; width: 26px; height: 26px; border-radius: 6px; border: 1px solid var(--rule); background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.u .check-box svg { width: 14px; height: 14px; opacity: 0; }
.u input:checked + .check-box { background: #000; border-color: #000; }
.u input:checked + .check-box svg { opacity: 1; }
.u .check-text strong { display: block; font: 600 16px/22px var(--font); }
.u .check-text small { display: block; margin-top: 4px; font: 500 12px/16px var(--font); letter-spacing: -.01em; color: var(--ink-70); }
.u .status-col { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.u .status-col > span:first-child { font: 600 12px/20px var(--font); color: var(--ink-50); text-transform: uppercase; }
.u .plan-select h4 { font: 600 16px/22px var(--font); margin-bottom: 8px; }
.u .options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.u .option {
  position: relative; min-height: 128px; padding: 16px; border-radius: 12px; border: 1px solid #E4C7BB;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px; cursor: pointer; background: #fff;
}
.u .option input { position: absolute; opacity: 0; pointer-events: none; }
.u .option.is-selected { background: linear-gradient(90deg, rgba(173, 131, 113, .38) 0%, rgba(239, 201, 180, .38) 100%), #F3E6E0; }
.u .option-head { display: flex; align-items: center; justify-content: space-between; height: 22px; }
.u .option-head strong { font: 600 14px/16px var(--font); color: #211F1C; }
.u .option-tick {
  width: 22px; height: 22px; border-radius: 6px; border: 1px solid #D1D5DB; background: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.u .option-tick svg { width: 12px; height: 12px; opacity: 0; }
.u .option.is-selected .option-tick { background: #000; border-color: #000; }
.u .option.is-selected .option-tick svg { opacity: 1; }
.u .option ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.u .option li { display: flex; align-items: center; gap: 8px; font: 500 12px/16px var(--font); color: var(--ink-80); }
.u .option li img { width: 16px; height: 16px; flex: none; }
.u .option li em { font-style: italic; }
.u .option-price { display: flex; align-items: center; gap: 8px; }
.u .option-price .big { font: 600 20px/24px var(--font); letter-spacing: -.02em; color: var(--ink-80); }
.u .option-price .per { font: 500 12px/14px var(--font); letter-spacing: -.01em; color: var(--ink-60); margin-left: -4px; }
.u .savings { padding: 3px 8px; border-radius: 100px; background: linear-gradient(90deg, #68A44B 0%, #2E9332 100%); color: #fff; font: 400 11px/13px var(--font); letter-spacing: -.01em; }
.u .billed { margin-left: auto; font: 600 11px/16px var(--font); letter-spacing: -.01em; color: var(--brown-deep); }

.u .routine { background: var(--card); border-radius: 12px; padding: 20px; }
.u .routine summary { list-style: none; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font: 600 16px/20px var(--font); color: #211F1C; }
.u .routine summary::-webkit-details-marker { display: none; }
.u .routine-count { display: inline-flex; align-items: center; gap: 12px; font: 600 12px/20px var(--font); color: var(--ink-50); text-transform: uppercase; }
.u .routine-count img { width: 20px; height: 20px; transition: transform .2s; }
.u .routine:not([open]) .routine-count img { transform: rotate(180deg); }
.u .routine-body { display: flex; gap: 64px; margin-top: 20px; }
.u .routine-left { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; min-height: 250px; }
.u .routine-items { display: flex; flex-direction: column; gap: 16px; }
.u .bottle-time { display: flex; align-items: center; gap: 6px; font: 600 13px/15px var(--font); color: var(--brown-am); margin-bottom: 10px; }
.u .bottle-time img { width: 20px; height: 20px; }
.u .bottle strong { display: block; font: 600 14px/16px var(--font); color: #211F1C; margin-bottom: 4px; }
.u .bottle p { font: 400 12px/16px var(--font); color: var(--ink-80); }
.u .bottle ol { margin: 6px 0 0; padding-left: 18px; font: 400 12px/16px var(--font); color: var(--ink-80); }
.u .ingredients { font: 500 12px/16px var(--font); letter-spacing: -.01em; color: var(--brown-dark); }
.u .routine-art { width: 280px; height: 250px; flex: none; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.u .routine-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.u .cond-card.is-excluded .options { opacity: .55; }

.u .recommends { border-radius: 20px; padding: 24px; background: linear-gradient(180deg, rgba(173, 131, 113, .45) 0%, rgba(239, 201, 180, .45) 100%), #F3E6E0; display: flex; flex-direction: column; gap: 16px; }
.u .recommends-head { display: flex; gap: 12px; align-items: center; }
.u .recommends-head img { width: 24px; height: 24px; flex: none; }
.u .recommends-head strong { display: block; font: 600 16px/24px var(--font); }
.u .recommends-head p { font: 400 12px/18px var(--font); color: var(--ink-80); margin-top: 2px; }
.u .recommends h5 { font: 600 13px/18px var(--font); color: var(--brown-deep); margin-top: 4px; }
.u .products { display: flex; flex-direction: column; gap: 12px; }
.u .product { display: flex; align-items: center; justify-content: space-between; gap: 14px; cursor: pointer; }
.u .product-left { display: flex; align-items: center; gap: 20px; width: 594px; min-width: 0; }
.u .product-img { width: 80px; height: 80px; flex: none; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.u .product-img img { max-width: 86%; max-height: 92%; object-fit: contain; }
.u .product-text { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.u .product-text a { font: 600 16px/20px var(--font); color: #211F1C; text-decoration: underline; text-underline-offset: 2px; }
.u .product-text small { font: 400 12px/16px var(--font); color: var(--ink-80); }
.u .product-price { font: 600 16px/24px var(--font); width: 120px; text-align: left; }
.u .product input { position: absolute; opacity: 0; pointer-events: none; }

.u .summary { display: flex; flex-direction: column; gap: 16px; }
.u .summary-lines { display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--rule); }
.u .summary-line { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 24px; }
.u .summary-line strong { display: block; font: 600 16px/22px var(--font); }
.u .summary-line small { display: block; font: 500 12px/16px var(--font); letter-spacing: -.01em; color: var(--ink-70); margin-top: 2px; }
.u .summary-line .amt { font: 600 16px/24px var(--font); }
.u .summary-line .amt.light { font-weight: 500; }
.u .summary-due { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--rule); font: 600 16px/22px var(--font); }
.u .summary-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.u .note { display: flex; gap: 8px; align-items: flex-start; font: 500 12px/16px var(--font); letter-spacing: -.01em; color: var(--brown-dark); max-width: 515px; }
.u .note img { width: 16px; height: 16px; flex: none; }
.u .btn-order { padding: 12px 32px; }

/* ---------- Checkout (Your order) ---------- */
.u .checkout { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; }
.u .checkout-main { width: 600px; display: flex; flex-direction: column; gap: 32px; }
.u .checkout-top { display: flex; flex-direction: column; gap: 20px; }
.u .checkout-top .back { padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.u .order-title { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.u .order-title h1 { font: 600 20px/24px var(--font); }
.u .order-title p { margin-top: 6px; font: 500 12px/16px var(--font); letter-spacing: -.01em; color: var(--ink-70); }
.u .order-box { background: #fff; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.u .order-box h3 { font: 600 16px/24px var(--font); }
.u .order-line { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.u .order-line-left { display: flex; align-items: center; gap: 12px; }
.u .thumb64 { width: 64px; height: 64px; flex: none; border-radius: 8px; background: #fff; border: .8px solid rgba(173, 131, 113, .12); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.u .thumb64 img { max-width: 80%; max-height: 92%; object-fit: contain; }
.u .order-line strong { display: block; font: 600 14px/16px var(--font); color: #211F1C; }
.u .order-line .tags { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.u .tag-sub { padding: 4px 6px; border-radius: 4px; background: #7A5747; color: #FAF5F5; font: 600 10px/12px var(--font); text-transform: uppercase; }
.u .tag-one { padding: 3.5px 6px; border-radius: 4px; border: .5px solid var(--brown-am); color: #906548; font: 600 10px/12px var(--font); letter-spacing: .04em; text-transform: uppercase; }
.u .order-line .desc { font: 500 12px/14px var(--font); letter-spacing: -.02em; color: var(--ink-60); }
.u .order-line .amt { font: 600 14px/20px var(--font); }
.u .acct { display: flex; flex-direction: column; gap: 12px; }
.u .acct-section { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.u .acct-section:last-child { border-bottom: 0; padding-bottom: 0; }
.u .acct-head { display: flex; justify-content: space-between; align-items: center; }
.u .acct-head h3 { font: 600 16px/24px var(--font); }
.u .acct-view { font: 400 13px/15px var(--font); color: var(--ink-60); display: flex; flex-direction: column; gap: 4px; }
.u .acct-view .strong { font-weight: 500; }
.u .acct-view .missing { color: var(--brown-dark); }
.u .acct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 8px; }
.u .acct-form .full { grid-column: 1 / -1; }
.u .acct-form .actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }
.u .acct-hint { font: 500 12px/16px var(--font); color: var(--ink-60); }
.u .saved-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-radius: 12px; background: #fff; }
.u .saved-card strong { display: block; font: 600 14px/20px var(--font); }
.u .saved-card span { font: 400 12px/16px var(--font); color: var(--ink-60); }
.u .saved-card .btns { display: flex; gap: 8px; }
.saved-card strong { display: block; font: 500 14px/1.2 var(--font); color: var(--b0); }
.saved-card span { display: block; margin-top: 4px; font: 400 12px/1.2 var(--font); color: var(--b1); }
.saved-card .pill { margin: 0; }
.u .card-element { padding: 16px 20px; border: 1px solid #000; border-radius: 100px; background: #fff; }
.u .verify { background: #fff; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.u .verify-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.u .verify p { font: 400 13px/18px var(--font); color: var(--ink-70); }
.u .order-summary { width: 328px; flex: none; border-radius: 20px; padding: 24px; background: rgba(208, 160, 137, .2); display: flex; flex-direction: column; gap: 36px; }
.u .order-summary .lines { display: flex; flex-direction: column; gap: 12px; }
.u .order-summary .label { font: 600 12px/20px var(--font); color: var(--ink-50); text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.u .os-line { display: flex; justify-content: space-between; gap: 16px; font: 600 14px/20px var(--font); }
.u .os-line .light { font-weight: 500; }
.u .os-due { padding-top: 12px; border-top: 1px solid var(--rule); }
.u .os-renew { font: 400 13px/20px var(--font); color: var(--brown-dark); }
.u .os-foot { display: flex; flex-direction: column; gap: 20px; }
.u .os-foot p { font: 500 11px/14px var(--font); letter-spacing: -.01em; color: var(--brown-dark); }
.u .os-foot p em { font-style: italic; }


/* ---------- Message your doctor (frame "Message your doctor") ---------- */
.chat { height: calc(100vh - 75px - 48px); min-height: 560px; border-radius: 20px; background: var(--card); overflow: hidden; display: flex; flex-direction: column; }
.chat-head { flex: none; height: 100px; padding: 16px 20px; display: flex; align-items: center; gap: 20px; background: var(--b1); box-shadow: 0 4px 30px rgba(66, 49, 35, .08); position: relative; z-index: 1; }
.chat-head .doc-photo { background: var(--card); }
.chat-head strong { display: block; font: 500 18px/1.2 var(--font); color: #fff; }
.chat-head span { display: block; margin-top: 2px; font: 400 14px/1.2 var(--font); color: var(--pink); }
.chat-body { flex: 1; overflow-y: auto; padding: 24px 32px; display: flex; flex-direction: column; gap: 20px; }
.chat-body > :first-child { margin-top: auto; }
.msg { display: flex; }
.msg-me { justify-content: flex-end; }
.bubble { max-width: 522px; padding: 16px; font: 400 16px/1.2 var(--font); color: rgba(0, 0, 0, .7); white-space: pre-wrap; word-wrap: break-word; }
.msg-me .bubble { background: #fff; border-radius: 16px 16px 0 16px; }
.msg.is-sending { opacity: .55; }
.msg.is-sending .bubble::after { content: "Sending…"; display: block; margin-top: 6px; font-size: 11px; color: var(--b1); }
.msg-doc .bubble { background: var(--page); border-radius: 0 16px 16px 16px; }
.bubble img, .bubble video { max-width: 260px; border-radius: 12px; }
.bubble a { color: var(--b0); }
.chat-sep { display: flex; align-items: center; gap: 16px; font: 400 14px/1.2 var(--font); color: var(--b2); white-space: nowrap; }
.chat-sep::before, .chat-sep::after { content: ''; flex: 1; height: 1px; background: rgba(186, 141, 121, .5); }
.composer { flex: none; height: 140px; padding: 24px 20px; background: #fff; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.composer-left { flex: 1; align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; }
.composer textarea { border: 0; outline: none; resize: none; background: transparent; font: 400 16px/1.2 var(--font); width: 100%; height: 40px; }
.composer textarea::placeholder { color: var(--ink-40); }
.composer-tools { display: flex; align-items: center; gap: 12px; position: relative; }
.tool { background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; }
.tool img { width: 24px; height: 24px; }
.tool-plus img { width: 32px; height: 32px; }
.send-btn { width: 40px; height: 40px; border-radius: 100px; background: #000; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.send-btn img { width: 16px; height: 16px; }
.send-btn[disabled] { opacity: .4; }
.emoji-panel { position: absolute; bottom: 44px; left: 40px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 8px; display: grid; grid-template-columns: repeat(8, 28px); gap: 4px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.emoji-panel button { border: 0; background: none; font-size: 20px; cursor: pointer; }

/* ---------- Support (frame "Support") ---------- */
.support-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 514px; border-radius: 20px; overflow: hidden; background: var(--b0); }
.support-form { padding: 64px 48px; display: flex; flex-direction: column; gap: 32px; color: #fff; }
.support-form h1 { font: 500 24px/1.2 var(--font); }
.support-form .lead { margin-top: 8px; font: 400 14px/1.2 var(--font); color: rgba(255, 255, 255, .6); }
.support-fields { display: flex; flex-direction: column; gap: 20px; }
.support-fields .field-label { background: var(--b0); color: var(--b3); }
.support-fields .input { border-color: var(--b3); background: transparent; color: #fff; }
.support-fields .input::placeholder { color: var(--b1); }
.support-photo { background: center / cover no-repeat; }
.support-contact { margin-top: 16px; background: var(--b1); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.contact-item { display: flex; align-items: center; gap: 16px; color: #fff; text-decoration: none; }
.contact-item .contact-icon { width: 40px; height: 40px; border-radius: 6px; background: rgba(186, 141, 121, .5); display: flex; align-items: center; justify-content: center; flex: none; }
.contact-icon img { display: block; width: 20px; height: 20px; }
.contact-item div span { display: block; font: 400 14px/1.2 var(--font); color: var(--pink); }
.contact-item strong { display: block; margin-top: 4px; font: 500 16px/1.2 var(--font); }
.contact-rule { height: 1px; background: rgba(186, 141, 121, .5); }

/* ---------- My progress (frame "My progress") ---------- */
.ptimeline { list-style: none; margin: 0; padding: 0; }
.pentry { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 32px; position: relative; padding-bottom: 48px; }
.pentry::before { content: ''; position: absolute; left: 40px; top: 56px; bottom: 0; width: 1px; background: var(--b2); opacity: .5; }
.pentry:last-child::before { display: none; }
.ptag { width: 80px; height: 44px; border-radius: 12px; background: var(--card); display: flex; align-items: center; justify-content: center; font: 500 12px/1.2 var(--font); color: var(--b1); }
.pbody { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.pdetail { display: grid; grid-template-columns: minmax(0, 466px) 347px; justify-content: space-between; gap: 20px; }
.pdetail-text { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 205px; }
.pdetail-text h3 { font: 500 18px/1.2 var(--font); margin-bottom: 8px; }
.pdetail-text p { font: 400 16px/1.2 var(--font); color: var(--ink-70); }
.pdate { font: 400 12px/1.2 var(--font); color: var(--b0); }
.pmedia { position: relative; width: 347px; height: 205px; border-radius: 12px; overflow: hidden; background: #000; }
.pmedia img, .pmedia video { width: 100%; height: 100%; object-fit: cover; }
.pnote { padding: 16px; border-radius: 12px; background: var(--card); font: 400 14px/1.2 var(--font); color: var(--ink-70); }
.doc-note { background: var(--card); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.doc-note-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.doc-note-head .who { display: flex; align-items: center; gap: 12px; }
.doc-note-head .doc-photo { width: 40px; height: 40px; }
.doc-note-head strong { font: 500 16px/1.2 var(--font); }
.doc-note-head .when { font: 400 12px/1.2 var(--font); color: var(--b0); }
.doc-note p { font: 400 16px/1.2 var(--font); color: var(--ink-70); }
.checkin { background: var(--pink); border: 1px solid var(--b2); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 24px; }
.checkin-head { display: flex; flex-direction: column; gap: 8px; }
.checkin-head .date { font: 400 12px/1.2 var(--font); color: var(--b0); }
.checkin-head h3 { font: 500 18px/1.2 var(--font); }
.checkin .field-label { background: var(--pink); }
.checkin .input { height: 80px; border-color: var(--b2); }
.checkin-fields { display: flex; flex-direction: column; gap: 16px; }
.checkin.is-locked { opacity: .5; border: 0; }
.locked-head { display: flex; justify-content: space-between; align-items: center; }
.lock-tag { display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 2px 8px 4px; border-radius: 100px; background: #000; color: #fff; font: 400 12px/1.2 var(--font); }
.locked-head .date { font: 400 12px/1.2 var(--font); color: var(--b0); }
.uploads { display: flex; gap: 20px; }
.upload { display: inline-flex; align-items: center; gap: 4px; font: 400 12px/1.2 var(--font); cursor: pointer; }
.upload img { width: 12px; height: 12px; }
.upload.is-done span { color: #457847; }
.order-picker { height: 36px; padding: 6px 36px 6px 16px; border-radius: 100px; border: .5px solid var(--b2); font: 500 14px/1.2 var(--font); color: var(--b0); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23754D3A' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 14px center; appearance: none; }
.title-flex { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.title-flex .page-title { flex: 1; }
.title-flex form { padding-top: 0; }

/* ---------- Lists: Subscriptions + Order history ---------- */
.list { display: flex; flex-direction: column; }
.list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: #000; }
.list-row:first-child { padding-top: 0; }
.list-row:last-child { border-bottom: 0; }
.list-row .arrow { width: 24px; height: 24px; flex: none; }
.list-label { display: block; font: 400 12px/1.2 var(--font); letter-spacing: -.01em; text-transform: uppercase; color: var(--b1); margin-bottom: 8px; }
.list-value { display: block; font: 500 14px/1.2 var(--font); color: var(--ink-80); }
.order-main { display: flex; align-items: center; gap: 300px; }
.order-name { width: 180px; }
.order-name strong { display: block; font: 500 18px/1.2 var(--font); }
.order-meta { display: flex; align-items: flex-end; gap: 56px; }
.sub-main { display: flex; align-items: center; gap: 56px; }
.sub-product { display: flex; align-items: center; gap: 16px; width: 384px; }
.thumb { width: 80px; height: 80px; flex: none; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.thumb img { max-width: 80%; max-height: 88%; object-fit: contain; }
.sub-product strong { display: block; font: 500 16px/1.2 var(--font); }
.sub-product small { display: block; margin-top: 4px; width: 184px; font: 400 12px/1.2 var(--font); color: var(--ink-60); }
.sub-col { width: 56px; }
.sub-col.wide { width: 88px; }
.list-value.strong { color: #000; }

/* ---------- Order + subscription detail ---------- */
.kv { display: flex; flex-direction: column; }
.kv-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font: 400 14px/1.2 var(--font); color: var(--b1); }
.kv-row:first-child { padding-top: 0; }
.kv-row b { font-weight: 500; }
.detail-top { display: grid; grid-template-columns: minmax(0, 511px) minmax(0, 511px); justify-content: space-between; gap: 48px; margin-bottom: 48px; }
.pay-title { font: 500 16px/1.2 var(--font); margin: 24px 0 12px; }
.card-line { display: flex; align-items: center; gap: 8px; font: 400 11px/1.2 var(--font); color: var(--b1); }
.card-line img { width: 46px; height: 32px; border-radius: 3px; object-fit: cover; }
.info-box { background: var(--card); border-radius: 12px; padding: 20px 24px; display: flex; flex-direction: column; gap: 24px; align-self: start; }
.info-row { display: grid; grid-template-columns: minmax(0, 296px) minmax(0, 1fr); gap: 16px; font: 500 14px/1.2 var(--font); }
.info-row + .info-row { border-top: 1px solid var(--line); padding-top: 24px; }
.info-row .v { display: flex; flex-direction: column; gap: 4px; min-width: 0; overflow-wrap: anywhere; color: var(--b0); }
.info-row .v small { font: 400 12px/1.2 var(--font); color: var(--b1); }
.info-row .v.gap8 { gap: 8px; }
.pline { display: grid; grid-template-columns: 80px 184px 1fr 56px 80px 1fr 80px; align-items: center; column-gap: 16px; margin-bottom: 48px; }
.pline + .pline { margin-top: -24px; }
.pline strong { display: block; font: 500 16px/1.2 var(--font); }
.pline small { display: block; margin-top: 4px; font: 400 12px/1.2 var(--font); color: var(--ink-60); }
.pline .end { text-align: right; padding-right: 8px; }
.totals { background: var(--card); border-radius: 12px; padding: 20px 8px 8px; display: flex; flex-direction: column; gap: 20px; }
.t-row { display: flex; justify-content: space-between; padding: 0 12px; font: 500 14px/1.2 var(--font); }
.t-row + .t-row { border-top: 1px solid var(--line); padding-top: 20px; }
.t-row .free { font-weight: 400; text-transform: uppercase; }
.t-total { background: #fff; border-radius: 12px; padding: 16px 12px; display: flex; justify-content: space-between; font: 500 16px/1.2 var(--font); }
.t-total span:last-child { color: var(--b1); }
.detail-actions { display: flex; justify-content: flex-end; margin-top: 12px; }

.sub-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 378px); gap: 64px; }
.repeats { margin: 16px 0 32px; font: 400 14px/1.2 var(--font); color: var(--ink-70); }
.items-box { background: #fff; border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 38px; }
.items-head { display: flex; justify-content: space-between; font: 500 16px/1.2 var(--font); }
.items-head .link { font-size: 16px; color: var(--b1); }
.items-line { display: flex; justify-content: space-between; font: 400 14px/1.2 var(--font); }
.items-line em { font-style: normal; color: var(--ink-50); margin-left: 4px; }
.items-line b { font-weight: 500; }
.schedule-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 19px; }
.side-panel { background: var(--card); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; align-self: start; }
.side-sec { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.side-sec:last-child { border-bottom: 0; }
.side-head { display: flex; justify-content: space-between; align-items: center; font: 500 16px/1.2 var(--font); }
.side-head .link { color: var(--b1); }
.side-strong { font: 500 16px/1.2 var(--font); color: var(--b0); }
.side-text { font: 400 14px/1.2 var(--font); color: var(--b1); }
.side-actions { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Profile (frame "Profile") ---------- */
.profile { display: flex; flex-direction: column; gap: 20px; }
.pcard { background: var(--card); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; gap: 32px; }
.pcard-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.pcard-head h2 { font: 500 18px/1.2 var(--font); }
.personal { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 40px; }
.personal .vrule { background: var(--line); }
.pstack { display: flex; flex-direction: column; gap: 12px; }
.prow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.prow-action { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; }
.phint { font: 400 12px/1.2 var(--font); color: var(--b1); }
.profile-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.profile-bottom .pcard { gap: 20px; min-height: 364px; }
.address-view strong { display: block; font: 500 16px/1.2 var(--font); color: var(--b0); }
.address-view p { margin-top: 4px; font: 400 14px/1.2 var(--font); color: var(--b1); }
.saved-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.saved-card .btns { display: flex; gap: 8px; }
.card-element { padding: 15px 16px; border: .5px solid var(--b2); border-radius: 12px; background: #fff; }
.acct-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.acct-form .full { grid-column: 1 / -1; }
.acct-form .actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 8px; }

/* ---------- Log in (frames "log in" / "log in - 2") ---------- */
.auth { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: var(--page); }
.auth-photo { position: relative; background: center / cover no-repeat; padding: 31px 32px; }
.auth-photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(299.6deg, rgba(165, 109, 85, 0) 50.6%, rgba(63, 28, 13, .5) 101.8%); }
.auth-photo .logo { position: relative; color: #fff; }
.auth-side { display: flex; align-items: center; justify-content: center; padding: 64px 140px; }
.auth-form { width: 440px; display: flex; flex-direction: column; }
.auth-back { display: inline-flex; align-items: center; gap: 8px; font: 400 14px/17px var(--font); color: #000; text-decoration: none; margin-bottom: 44px; }
.auth-form h1 { font: 400 40px/1.15 var(--font); letter-spacing: -.02em; }
.auth-form .lead { margin-top: 8px; font: 400 16px/1.2 var(--font); color: rgba(0, 0, 0, .6); }
.auth-fields { margin-top: 40px; display: flex; flex-direction: column; gap: 24px; }
.afield { position: relative; }
.afield input { width: 100%; height: 49px; padding: 16px; border-radius: 12px; border: .5px solid var(--b2); background: rgba(255, 255, 255, .1); font: 400 14px/17px var(--font); color: var(--b0); outline: none; }
.afield input::placeholder { color: var(--b3); }
.afield label { position: absolute; top: -7px; left: 12px; padding: 0 4px; background: var(--page); font: 400 12px/14px var(--font); color: var(--b1); }
.auth-btn { margin-top: 32px; height: 55px; border-radius: 100px; border: 0; background: #000; color: #fff; font: 500 16px/19px var(--font); cursor: pointer; }
.auth-btn[disabled] { opacity: .5; }
.auth-foot { margin-top: 16px; text-align: center; font: 400 16px/19px var(--font); }
.auth-foot a { color: var(--b0); margin-left: 8px; text-underline-offset: 3px; }
.auth-error { margin-top: 12px; font: 400 14px/18px var(--font); color: #BB0A0A; }
.otp { margin-top: 40px; display: flex; gap: 9px; }
.otp input { width: 67px; height: 64px; border-radius: 12px; border: 0; background: #F1E6E2; text-align: center; font: 400 18px/22px var(--font); color: var(--b0); outline: none; }
.otp input:focus { border: 1px solid var(--b3); background: #F7ECE8; }
.otp input.filled { background: #E9CDC1; }
.otp-timer { margin-top: 20px; font: 400 16px/19px var(--font); color: var(--b0); }
.otp-resend { margin-top: 4px; background: none; border: 0; padding: 0; font: 400 16px/19px var(--font); color: var(--b3); cursor: pointer; text-align: left; }
.otp-resend:not([disabled]) { color: var(--b0); text-decoration: underline; }

/* =====================================================================
   Unified components (My consults, plan ready, checkout): Raleway + their own pills/buttons.
   ===================================================================== */
.u {
  --font: 'Raleway', -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Rosarivo', Georgia, serif;
  --ink: #000;
  --rule: rgba(0, 0, 0, .12);
  --card: #F9F6F4;
  --brown: #9C6E5A;
  --brown-dark: #855D4C;
  --brown-deep: #704938;
  --brown-link: #804226;
  --brown-rx: #8E6859;
  --brown-am: #AD8371;
  --grad-doctor: linear-gradient(180deg, #996B56 0%, #EAC3B1 100%);
  font-family: var(--font);
}
.u .btn { height: 44px; padding: 12px 20px; gap: 8px; border: 1px solid #000; font: 600 14px/20px var(--font); }
.u .btn-dark { background: #000; color: #fff; }
.u .btn-outline { background: #fff; color: #000; }
.u .btn-outline:hover { background: #000; color: #fff; }
.u .btn-sm { height: 36px; padding: 8px 16px; }
.u .btn-md { height: 36px; padding: 8px 24px; }
.u .pill { height: 22px; padding: 4px 12px; border-radius: 999px; font: 600 12px/14px var(--font); letter-spacing: .04em; text-transform: uppercase; border: .5px solid transparent; }
.u .pill-ready { background: #DDEEE2; color: #285C3A; border-color: rgba(40, 92, 58, .3); }
.u .pill-order { background: #FEECD0; color: #79490E; border-color: rgba(121, 73, 14, .3); }
.u .pill-later { background: #E8E5E2; color: #5A544E; border-color: rgba(90, 84, 78, .3); }
.u .input { height: 48px; padding: 12px 20px; border-radius: 100px; border: 1px solid #000; background: #fff; color: #000; font: 400 14px/20px var(--font); }
.u .input::placeholder { color: rgba(0, 0, 0, .4); }
.u .card-element { border: 1px solid #000; border-radius: 100px; padding: 14px 20px; }
.u .rule { border-top-color: rgba(0, 0, 0, .12); }
.u .link { font: 500 14px/24px var(--font); color: #000; }
.u .h20 { font: 600 20px/24px var(--font); }
.u .h16 { font: 600 16px/24px var(--font); }
.u .h18 { font: 600 18px/24px var(--font); }
.u .page-title { font: 600 20px/24px var(--font); border: 0; padding: 0; margin-bottom: 16px; }
.u .form-msg { font-family: var(--font); }
.u .back { font: 600 16px/24px var(--font); color: #000; margin: 0; gap: 4px; }
.u .back svg { width: 16px; height: 16px; }
.u .empty { background: var(--card); border-radius: 20px; }
.u .doc-photo { width: 100px; height: 100px; border-radius: 20px; background: var(--grad-doctor); }
.u .doc-photo img { width: 112%; left: -6%; }
.u .doc-thumb { flex: none; width: 64px; height: 64px; border-radius: 8px; background: var(--grad-doctor); overflow: hidden; position: relative; }
.u .doc-thumb img { position: absolute; width: 111%; max-width: none; left: -6%; top: 4%; }
.u .panel { background: var(--card); border-radius: 20px; padding: 48px; }
.u .panel-stack { display: flex; flex-direction: column; gap: 40px; }
.u .consult-head { display: flex; flex-direction: column; gap: 24px; }
.u .consult-head .back { padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.u .title-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.u .doctor-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.u .doctor-id { display: flex; align-items: center; gap: 24px; }
.u .doctor-id small { display: block; font: 400 12px/18px var(--font); }
.u .doctor-id strong { display: block; font: 600 18px/24px var(--font); margin-top: 4px; }
.u .assessment { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.u .assessment-text { width: 500px; display: flex; flex-direction: column; gap: 24px; }
.u .assessment-text h3 { font: 600 16px/24px var(--font); margin-bottom: -12px; }
.u .assessment-text .copy { display: flex; flex-direction: column; gap: 20px; font: 400 14px/20px var(--font); color: rgba(0,0,0,.8); }
.u .assessment-text .date { font: 500 14px/20px var(--font); color: rgba(0,0,0,.8); }
.u .assessment-photo { position: relative; width: 394px; height: 240px; border-radius: 20px; overflow: hidden; flex: none; }
.u .assessment-photo img { width: 100%; height: 100%; object-fit: cover; }
.u .assessment-photo::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .15); }
.u .chev-brown { width: 20px; height: 20px; flex: none; }
.u .note { display: flex; gap: 8px; align-items: flex-start; font: 500 12px/16px var(--font); letter-spacing: -.01em; color: var(--brown-dark); max-width: 515px; }
.u .note img { width: 16px; height: 16px; flex: none; }
.u .acct-form { margin-top: 8px; }
.u .saved-card { padding: 12px 16px; border-radius: 12px; background: #fff; }
.u .saved-card strong { display: block; font: 600 14px/20px var(--font); }
.u .saved-card span { font: 400 12px/16px var(--font); color: rgba(0,0,0,.6); }

/* =====================================================================
   Tablet / mobile (Patient Portal mobile frames, 375 wide)
   ===================================================================== */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 260px minmax(0, 1fr); }
  .sidebar { padding: 24px 20px; }
  .nav-item { width: 220px; }
  .main { padding-right: 24px; }
  .consult-grid, .meta-grid, .home-grid, .detail-top, .sub-detail, .consult-detail, .personal, .profile-bottom { grid-template-columns: minmax(0, 1fr); }
  .ptl-card { width: auto; }
  .personal .vrule { display: none; }
  .order-main { gap: 48px; }
  .sub-main { gap: 24px; }
  .pdetail { grid-template-columns: 1fr; }
  .pmedia { width: 100%; }
  .u .assessment, .u .checkout { flex-direction: column; }
  .u .assessment-text, .u .checkout-main, .u .order-summary, .u .assessment-photo { width: 100%; }
  .u .consult-main { gap: 32px; flex-wrap: wrap; }
}

@media (max-width: 900px) {
  .topbar { position: static; height: auto; flex-direction: column; gap: 20px; padding: 16px 20px; border-bottom: 0; }
  .logo .logo-svg { width: 155px; }
  .topbar-actions { width: 100%; gap: 8px; }
  .topbar-actions .btn { flex: 1 1 0; min-width: 0; height: 32px; padding: 8px 12px; font: 500 13px/1.2 var(--font); }
  .layout { display: block; }
  .sidebar { display: none; }
  .tabs { display: flex; position: sticky; top: 0; z-index: 40; background: var(--page); overflow-x: auto; border-top: 1px solid rgba(186, 141, 121, .4); border-bottom: 1px solid rgba(186, 141, 121, .4); scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; height: 48px; padding: 0 16px; display: flex; align-items: center; font: 400 14px/1.2 var(--font); color: rgba(0, 0, 0, .5); text-decoration: none; white-space: nowrap; background: none; border: 0; cursor: pointer; }
  .tab.active { background: #F3E6E0; color: var(--b0); font-weight: 500; box-shadow: inset 0 -1px 0 #9C6E5A; }
  .main, .main-home { padding: 24px 20px 40px; }
  .main-home { padding-top: 0; }
  .main-home .hero { margin: 0 -20px; border-radius: 0; min-height: 200px; padding: 40px 20px 28px; background-position: 70% center; }
  .hero-text { max-width: 70%; }
  .hero-text { width: 100%; }
  .hero p { width: 240px; }

  .page-title { font-size: 24px; padding-bottom: 16px; margin-bottom: 20px; }
  .consult-box, .rx-card { padding: 20px; }
  .rx-actions { flex-direction: column; align-items: stretch; }
  .rx-actions .btns .btn { flex: 1; height: 45px; }
  .tiles { gap: 12px; }
  .tile { height: 160px; padding: 16px; }

  .doc-card { margin-bottom: 20px; }
  .consult-images { justify-content: flex-start; }
  .consult-images .shot { flex: 1 1 0; max-width: 291px; height: 200px; }

  .chat { height: calc(100vh - 230px); border-radius: 16px; }
  .chat-head { height: 84px; }
  .chat-body { padding: 16px; }
  .bubble { max-width: 85%; font-size: 14px; }
  .composer { height: 120px; padding: 16px; }

  .support-hero { grid-template-columns: 1fr; }
  .support-form { padding: 40px 24px; }
  .support-photo { min-height: 260px; }

  .pentry { grid-template-columns: 1fr; gap: 12px; padding-bottom: 32px; }
  .pentry::before { display: none; }
  .ptag { width: auto; height: 32px; padding: 0 12px; justify-self: start; }

  .list-row { align-items: flex-start; flex-wrap: wrap; }
  .list-row .link { white-space: normal; }
  .order-main, .sub-main { flex-direction: column; align-items: flex-start; gap: 16px; }
  .order-meta { gap: 24px; flex-wrap: wrap; }
  .sub-product { width: auto; }
  .pline { grid-template-columns: 64px 1fr 1fr 1fr; row-gap: 12px; }
  .pline > :nth-child(2) { grid-column: 2 / -1; }
  .pline > :nth-child(3), .pline > :nth-child(6) { display: none; }
  .info-row { grid-template-columns: 110px 1fr; }
  .side-panel { min-height: 0; }
  .pcard { padding: 24px 20px; }
  .prow, .prow-action, .acct-form { grid-template-columns: 1fr; }

  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth-photo { min-height: 260px; }
  .auth-side { padding: 32px 20px; }
  .auth-form { width: 100%; }
  .auth-form h1 { font-size: 32px; }
  .otp input { width: auto; flex: 1; min-width: 0; height: 56px; }

  .u .panel { padding: 24px 20px; }
  .u .consult-row { padding: 20px; align-items: flex-start; }
  .u .consult-main { flex-direction: column; align-items: flex-start; gap: 16px; }
  .u .consult-meta { flex-wrap: wrap; gap: 16px 24px; }
  .u .doctor-row { flex-direction: column; align-items: flex-start; }
  .u .cond-card { padding: 16px; }
  .u .cond-head, .u .cond-include { flex-direction: column; align-items: flex-start; gap: 12px; }
  .u .options { grid-template-columns: 1fr; }
  .u .routine-body { flex-direction: column; gap: 20px; }
  .u .routine-art { width: 100%; }
  .u .product-left { width: auto; gap: 12px; }
  .u .product-img { width: 64px; height: 64px; }
  .u .product-price { width: auto; }
  .u .summary-foot { flex-direction: column; align-items: stretch; }
  .u .order-summary { padding: 20px; }
  .u .order-line { gap: 12px; }
  .u .order-line-left { min-width: 0; }
  .u .order-line .tags { flex-wrap: wrap; }
}

/* Button loader (PP.loading): spinner over the label, same size, no clicks while busy */
@keyframes pp-spin { to { transform: rotate(360deg); } }
.is-loading { position: relative; color: transparent !important; pointer-events: none; opacity: 1 !important; }
.is-loading > * { visibility: hidden; }
.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid var(--spin, #fff); border-right-color: transparent; border-radius: 50%; animation: pp-spin .7s linear infinite;
}
.btn-light, .btn-pause, .u .btn-outline, .link, .otp-resend { --spin: #000; }
.btn-dark, .btn-brown, .btn-cancel, .u .btn-dark, .send-btn, .auth-btn { --spin: #fff; }
.link.is-loading { display: inline-block; min-width: 40px; min-height: 18px; }
.tool, .nav-item, .tab { --spin: var(--b0); }
.tool.is-loading { min-width: 24px; min-height: 24px; }

/* =====================================================================
   Figma mobile frames (375 wide): per-page sizes
   ===================================================================== */
@media (max-width: 900px) {
  /* My doctor's consult (frame "consult"): no page title, label above the name, 160x148 photos */
  .consult-title { display: none; }
  .consult-title.has-pill { display: flex; font-size: 18px; padding-bottom: 16px; margin-bottom: 20px; }
  .doc-card { padding: 0 0 20px; margin-bottom: 20px; border-bottom-color: rgba(186, 141, 121, .2); }
  .doc-id { gap: 16px; }
  .doc-id > div { display: flex; flex-direction: column-reverse; gap: 4px; }
  .doc-photo { width: 64px; height: 64px; background: #E4C7BB; }
  .doc-id strong { font-size: 18px; }
  .doc-id span { margin-top: 0; font-size: 12px; }
  .consult-detail { gap: 24px; }
  .consult-copy { gap: 16px; }
  .consult-copy h2 { font-size: 16px; line-height: 1.2; margin-bottom: 8px; }
  .consult-copy p { font-size: 14px; }
  .consult-copy p + p { margin-top: 17px; }
  .consult-date { font-size: 11px; }
  .consult-images { gap: 8px; }
  .consult-images .shot { max-width: none; height: 148px; }

  /* My consults (Unified "Mobile" consult list) */
  .u .consult-row { position: relative; padding: 20px; }
  .u .consult-main { gap: 24px; width: 100%; }
  .u .consult-who { gap: 16px; width: auto; }
  .u .consult-who strong { font-size: 16px; line-height: 20px; }
  .u .consult-meta { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 16px 0; width: 100%; }
  .u .meta { gap: 4px; }
  .u .meta .k { font-size: 12px; line-height: 18px; }
  .u .meta .v { font-size: 14px; line-height: 20px; }
  .u .meta .pill { margin-top: 4px; height: 20px; padding: 4px 8px; font-size: 10px; line-height: 12px; }
  .u .chev-brown { position: absolute; top: 42px; right: 20px; }
}
@media (max-width: 900px) {
  /* Plan ready (Unified "Mobile — My consult — State B"): no panel, content on the page */
  .u .panel { background: transparent; padding: 0; border-radius: 0; }
  .u .panel-stack { gap: 40px; }
  .u .consult-head { gap: 20px; }
  .u .consult-head .back { padding-bottom: 20px; font: 600 13px/18px var(--font); }
  .u .title-row { padding-bottom: 20px; }
  .u .title-row .h20 { font-size: 18px; line-height: 1.2; }
  .u .doctor-row { gap: 16px; align-items: stretch; }
  .u .doctor-id { gap: 24px; }
  .u .doc-photo { width: 80px; height: 80px; border-radius: 20px; }
  .u .doctor-row .btn { width: 100%; height: 44px; justify-content: center; }
  .u .assessment { gap: 24px; }
  .u .assessment-text { gap: 24px; }
  .u .assessment-photo, .u .consult-photos .assessment-photo { width: 100%; height: 190px; }
  .u .plan > .h20, .u .summary > .h20 { font-size: 18px; line-height: 24px; }

  .u .cond-card { padding: 20px 16px; border-radius: 16px; gap: 20px; }
  .u .cond-head { gap: 2px; }
  .u .cond-head .h16 { font-size: 16px; line-height: 24px; }
  .u .rx-note { font-size: 11px; line-height: 16px; }
  .u .rx-note img { width: 18px; height: 18px; }
  .u .cond-include { align-items: stretch; gap: 16px; }
  .u .check-text strong { font-size: 14px; line-height: 20px; }
  .u .check-text small { margin-top: 2px; font-size: 10px; line-height: 13px; }
  .u .status-col { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
  .u .status-col > span:first-child { font-size: 10px; line-height: 16px; }
  .u .plan-select h4 { font-size: 14px; line-height: 20px; }
  .u .option { min-height: 0; border-radius: 8px; }
  .u .option-price { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; column-gap: 4px; row-gap: 2px; }
  .u .option-price .big { font-size: 16px; line-height: 24px; }
  .u .option-price .per { margin-left: 0; }
  .u .option-price .savings { grid-column: 1 / 3; grid-row: 2; justify-self: start; }
  .u .option-price .billed { grid-column: 3; grid-row: 2; justify-self: end; }

  .u .routine { padding: 16px; }
  .u .routine summary { font-size: 14px; }
  .u .routine-count { gap: 8px; font-size: 11px; }
  .u .routine-body { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 12px 16px; align-items: end; }
  .u .routine-left { display: contents; }
  .u .routine-items { grid-column: 1 / -1; }
  .u .ingredients { font-size: 10px; line-height: 13px; }
  .u .routine-art { width: 116px; height: 104px; border-radius: 8px; }

  /* Dr. Lily also recommends: photo, text with the price under it, checkbox on the right */
  .u .recommends { padding: 20px 16px; border-radius: 16px; gap: 20px; }
  .u .recommends-head p { font-size: 11px; line-height: 14px; }
  .u .product { display: grid; grid-template-columns: minmax(0, 1fr) 26px; column-gap: 12px; align-items: start; }
  .u .product-left { grid-column: 1; grid-row: 1; align-items: flex-start; gap: 16px; width: auto; }
  .u .product-img { width: 80px; height: 80px; }
  .u .product-text { gap: 8px; }
  .u .product-text a { font-size: 14px; line-height: 20px; }
  .u .product-text small { font-size: 11px; line-height: 14px; }
  .u .product-price { grid-column: 1; grid-row: 2; width: auto; padding-left: 96px; font-size: 14px; line-height: 24px; }
  .u .product .check-box { grid-column: 2; grid-row: 1 / 3; align-self: center; }
  .u .note { font-size: 11px; line-height: 15px; }
  .u .btn-order { width: 100%; justify-content: center; }
}
@media (max-width: 900px) {
  .u .meta .pill { align-self: flex-start; }
  .u .recommends-head { padding-bottom: 20px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
  .u .products { gap: 20px; }
  .u .product + .product { padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .08); }
  .u .product .check-box { grid-row: 2; }
}
@media (max-width: 900px) {
  /* Checkout: each price under its item, a rule between items */
  .u .order-line { flex-direction: column; align-items: flex-start; gap: 8px; }
  .u .order-line .amt { padding-left: 76px; }
  .u .order-line + .order-line { padding-top: 12px; border-top: 1px solid var(--rule); }

  /* Message your doctor (frame "chat"): edge to edge under the tabs, composer pinned at the bottom */
  .chat { margin: -24px -20px -40px; height: calc(100vh - 150px); height: calc(100dvh - 150px); min-height: 480px; border-radius: 0; background: var(--page); }
  .chat-head { height: 60px; padding: 8px 20px; gap: 12px; }
  .chat-head .doc-photo { width: 44px; height: 44px; }
  .chat-head strong { font-size: 16px; }
  .chat-head span { font-size: 12px; }
  .chat-body { padding: 20px 12px; gap: 20px; }
  .bubble { max-width: 295px; font-size: 14px; }
  .msg-doc .bubble { background: var(--card); }
  .chat-sep { font-size: 11px; padding: 0 8px; }
  .composer { height: 140px; padding: 24px 20px; }
  .composer textarea { font-size: 14px; }
}
@media (max-width: 900px) {
  /* My progress (frame "progress"): no page title, 22px tags, 14px copy, 180px media, rules between check-ins */
  .progress-title .page-title { display: none; }
  .progress-title { margin-bottom: 0; }
  .pentry { gap: 16px; padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
  .pentry:last-child { border-bottom: 0; margin-bottom: 0; }
  .ptag { height: 22px; padding: 0 12px; border-radius: 100px; font-size: 12px; }
  .pbody { gap: 20px; }
  .pdetail { gap: 24px; }
  .pdetail-text { min-height: 0; gap: 16px; }
  .pdetail-text h3 { font-size: 16px; margin-bottom: 8px; }
  .pdetail-text p { font-size: 14px; }
  .pdate { font-size: 11px; }
  .pmedia { height: 180px; }
  .doc-note { padding: 16px; gap: 12px; border-radius: 12px; }
  .doc-note-head .doc-photo { width: 32px; height: 32px; border-radius: 6px; }
  .doc-note-head strong { font-size: 14px; }
  .doc-note-head .when { font-size: 11px; }
  .doc-note p { font-size: 14px; }
}
@media (max-width: 900px) {
  /* Patient Portal mobile frames have no page title under the tabs (the active tab names the page) */
  .page-title:not(.u .page-title) { display: none; }

  /* Subscriptions / Order history lists (frames "subscription", "Mobile" order history) */
  .list-row, .list-row:first-child, .list-row:last-child { display: block; position: relative; padding: 0 0 12px; border-bottom: 1px solid var(--line); }
  .list-row + .list-row { margin-top: 32px; }
  .list-row .arrow { position: absolute; right: 0; width: 16px; height: 16px; }
  .list-label { font-size: 11px; letter-spacing: -.01em; margin-bottom: 8px; }
  .list-value { font-size: 12px; }

  .sub-main { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; column-gap: 20px; row-gap: 12px; }
  .sub-product { grid-column: 1 / -1; width: auto; padding: 0 32px 8px 0; border-bottom: 1px solid var(--line); }
  .sub-product small { width: auto; }
  .sub-col, .sub-col.wide { width: auto; }
  .sub-main .pill { justify-self: end; }
  .list-row:has(.sub-main) .arrow { top: 32px; }
  .list-row .link { display: inline-block; margin-top: 12px; font: 500 14px/1.2 var(--font); color: var(--b0); }

  .order-main { display: block; width: 100%; }
  .order-name { width: auto; padding: 0 32px 8px 0; border-bottom: 1px solid var(--line); }
  .order-name strong { font-size: 16px; }
  .order-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; }
  .list-row:has(.order-main) .arrow { top: 17px; }
}
.m-only { display: none; }
@media (max-width: 900px) {
  /* Order / subscription detail (frames "Mobile" order detail, "Order history" subscription detail) */
  .m-only { display: block; }
  .detail-title { font: 500 18px/1.2 var(--font); margin: -9px 0 20px; }
  .back { margin-bottom: 24px; }
  .kv-row { font-size: 12px; }
  .repeats { margin: 12px 0 32px; font-size: 12px; }
  .items-head { font-size: 16px; }
  .items-head .link { font-size: 14px; }
  .items-line { font-size: 14px; }
  .schedule-head { margin-bottom: 24px; }
  .schedule-head .h18 { font-size: 18px; }
  .schedule-head .btn { height: 32px; padding: 8px 16px; font-size: 13px; }
  .side-panel { padding: 20px 16px; border-radius: 12px; }
  .side-head { font-size: 14px; }
  .side-strong { font-size: 14px; }
  .side-text { font-size: 12px; }
  .pay-title { margin: 24px 0 16px; }
  .info-box { padding: 20px 16px; }
  .info-row { grid-template-columns: 116px minmax(0, 1fr); gap: 12px; }

  .pline { grid-template-columns: 80px 61px minmax(0, 1fr) auto; column-gap: 0; row-gap: 16px; padding-bottom: 12px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
  .pline + .pline { margin-top: 0; }
  .pline > :nth-child(1) { grid-column: 1; grid-row: 1; }
  .pline > :nth-child(2) { grid-column: 2 / -1; grid-row: 1; align-self: center; padding-left: 16px; }
  .pline > :nth-child(4) { grid-column: 3; grid-row: 2; }
  .pline > :nth-child(5) { grid-column: 1 / 3; grid-row: 2; }
  .pline > :nth-child(7) { grid-column: 4; grid-row: 2; text-align: right; padding-right: 0; }
  .detail-actions .btn { width: 100%; justify-content: center; }

  /* Profile (frame "Mobile" profile): names side by side, addresses before payment */
  .pcard { padding: 20px 16px; gap: 20px; }
  .pcard-head h2 { font-size: 18px; }
  .prow { grid-template-columns: 1fr 1fr; }
  .profile-bottom { display: flex; flex-direction: column; gap: 20px; }
  .profile-bottom .pcard { min-height: 0; }
  .profile-bottom [data-section="address"] { order: -1; }
}
@media (max-width: 900px) {
  /* Support (frame "Mobile" support): photo on top, brown form edge to edge, contact box inside the brown */
  .support-hero { margin: -24px -20px 0; border-radius: 0; min-height: 0; }
  .support-photo { order: -1; min-height: 200px; }
  .support-form { padding: 40px 24px 24px; gap: 24px; }
  .support-form h1 { font-size: 20px; }
  .support-form .lead { font-size: 12px; }
  .support-fields { gap: 20px; }
  .support-contact-wrap { margin: 0 -20px -40px; padding: 8px 24px 32px; background: var(--b0); }
  .support-contact { margin-top: 0; padding: 16px; }

  /* Log in / code (frames "log in -1", "log in -2"): 344px photo with the logo centred at its foot */
  .auth { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
  .auth-photo { flex: none; min-height: 344px; padding: 0 0 24px; border-radius: 0 0 24px 24px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
  .auth-photo .logo .logo-svg { width: 184px; }
  .auth-side { flex: 1; display: flex; align-items: stretch; justify-content: flex-start; padding: 44px 24px 24px; }
  .auth-form { width: 100%; }
  .auth-form h1 { font-size: 36px; font-weight: 400; letter-spacing: -.01em; }
  .auth-form .lead { font-size: 14px; color: rgba(0, 0, 0, .7); }
  .auth-fields { margin-top: 40px; gap: 24px; }
  .auth-btn { margin-top: auto; }
  .auth-fields + .auth-btn, .auth-error + .auth-btn { margin-top: 40px; }
  .auth-foot { font-size: 14px; }
  .otp { margin-top: 40px; gap: 8px; }
  .otp input { flex: 1 1 0; width: auto; max-width: 48px; height: 48px; border-radius: 12px; background: rgba(157, 111, 91, .1); }
  .otp input.filled { background: #E4C7BB; }
  .otp-timer { margin-top: 20px; }
  .auth-back { order: 10; margin: auto 0 0; padding-top: 40px; font-size: 12px; color: rgba(0, 0, 0, .6); }
}
@media (max-width: 900px) {
  /* Home (Patient Portal mobile frame "1") */
  .main-home .hero { min-height: 200px; padding: 50px 24px 24px; align-items: flex-start; }
  .hero-text { gap: 4px; }
  .hero-hi { font-size: 20px; }
  .hero h1 { font-size: 18px; line-height: 1.2; margin-top: 0; }
  .hero h1 span { padding: 0 8px; }
  .hero p { width: 204px; margin-top: 4px; font-size: 12px; }
  .home { gap: 32px; }
  .home-grid, .home-col, .home-col + .home-col { gap: 32px; }
  .col-head { padding-bottom: 16px; margin-bottom: 16px; }
  .col-head .h18, .box-head .h18 { font-size: 18px; }
  .ptl { gap: 16px; }
  .ptl li { font-size: 14px; }
  .ptl-card { padding: 16px; gap: 8px; }
  .ptl-card strong { font-size: 14px; }
  .ptl-card p { font-size: 12px; }
  .ptl-current::after { bottom: -16px; }
  .ptl-current ~ li::before { top: -16px; height: 16px; }
  .ptl-current ~ li:not(:last-child)::after { bottom: -16px; }
  .profile-row { padding: 12px 16px; gap: 16px; }
  .profile-row .ico { width: 32px; height: 32px; }
  .profile-row .ico img { width: 16px; height: 16px; }
  .profile-row strong { font-size: 14px; }
  .profile-row span { font-size: 12px; }
  .rx-card { padding: 20px 16px; gap: 24px; }
  .rx-actions { gap: 12px; }
  .tiles { gap: 8px; }
  .tile { height: 196px; padding: 12px 8px; justify-content: flex-start; align-items: center; gap: 4px; text-align: center; background-position: center bottom; }
  .tile > img { width: 20px; height: 20px; }
  .tile span { width: auto; max-width: 140px; }
}
@media (max-width: 900px) {
  /* Consult in review keeps its title row so the status badge shows (Dermtodoor consultReviewHtml) */
  .page-title.consult-title.has-pill { display: flex; }
}

/* Home banner artwork: Dermtodoor's images per state, pinned right at full height; the left edge colour fills the rest.
   The artwork is light, so the banner text is dark (as on Dermtodoor). */
.hero.hero-review { background: url(../images/patient/banner/homeBannerReview.jpg) right center / auto 100% no-repeat, linear-gradient(180deg, #ECD7C8 0%, #EAD7C8 25%, #E8D8CA 50%, #EADCCF 75%, #EEE4D7 100%); }
.hero.hero-ready { background: url(../images/patient/banner/homeBannerReady.jpg) right center / auto 100% no-repeat, linear-gradient(180deg, #DECFC2 0%, #DCD0C4 25%, #DED6CA 50%, #E2DDD3 75%, #E7E4DC 100%); }
.hero.hero-default { background: url(../images/patient/banner/homeBannerDefault.jpg) right center / auto 100% no-repeat, #EACABB; }
.hero.hero-review .hero-hi, .hero.hero-ready .hero-hi, .hero.hero-default .hero-hi { color: #000; }
.hero.hero-review h1, .hero.hero-ready h1, .hero.hero-default h1 { color: #000; }
.hero.hero-review h1 span, .hero.hero-ready h1 span, .hero.hero-default h1 span { color: #fff; }
.hero.hero-review p, .hero.hero-ready p, .hero.hero-default p { color: rgba(0, 0, 0, .8); }
@media (max-width: 900px) {
  .main-home .hero.hero-review { background-size: auto 62%, auto; background-position: right -20px bottom, 0 0; }
  .main-home .hero.hero-ready { background-size: auto 60%, auto; background-position: right -28px center, 0 0; }
  .main-home .hero.hero-default { background-size: auto 100%, auto; background-position: right -110px center, 0 0; }
}
@media (max-width: 900px) {
  /* Keep the text clear of the artwork (Dermtodoor mobile banner widths). */
  .main-home .hero.hero-review .hero-text { max-width: 52%; }
  .main-home .hero.hero-ready .hero-text, .main-home .hero.hero-default .hero-text { max-width: 56%; }
  .main-home .hero.hero-review p, .main-home .hero.hero-ready p, .main-home .hero.hero-default p { width: auto; }
}

/* =====================================================================
   Figma "Unified patient portal" (Patient Portal page, Oct 2026 update)
   ===================================================================== */
.btn-outline-dark { background: transparent; color: #000; border: .5px solid #000; }
.btn-outline-dark:hover { background: rgba(0, 0, 0, .04); }
.btn-outline-dark { --spin: #000; }

/* Badges: title case, 11px, 3/8/5/8, border at 30% */
.pill { height: 21px; padding: 3px 8px 5px; font: 500 11px/1.2 var(--font); text-transform: capitalize; border-width: .5px; border-style: solid; }
.pill-order { background: #FFEAB8; color: #916000; border-color: rgba(145, 96, 0, .3); }
.pill-ready { background: #D8F3DA; color: #427644; border-color: rgba(66, 118, 68, .3); }
.pill-later { border-color: rgba(111, 104, 98, .3); }
.pill-shipping { border-color: rgba(47, 93, 142, .3); }
.pill-cancel { border-color: rgba(187, 10, 10, .3); }
.pill-chip { height: 22px; padding: 4px 8px; border-radius: 2px; background: #fff; color: var(--b1); border-color: rgba(186, 141, 121, .5); font-size: 12px; text-transform: uppercase; }

/* Home: banner + Active consultation in one bordered card */
.home { gap: 32px; }
.home-card { border: 1px solid #CDA99A; border-radius: 16px; overflow: hidden; background: var(--page); }
.home-card .hero { border-radius: 0; min-height: 279px; padding: 56px 40px; align-items: center; }
.home-card .hero-text { width: 372px; max-width: 46%; gap: 0; }
.home-card .hero-hi { font: italic 400 20px/1.2 var(--serif); color: #754D3A !important; }
.home-card .hero h1 { margin: 8px 0 0; font: 500 28px/1.2 var(--font); color: #000; }
.home-card .hero p { margin-top: 16px; max-width: none; font: 400 14px/1.2 var(--font); color: #754D3A !important; }
.consult-panel { padding: 32px 40px 40px; display: flex; flex-direction: column; gap: 20px; }
.consult-panel .box-head { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.consult-panel .btn-sm { height: 41px; padding: 12px 18px; }
.consult-panel .consult-grid { grid-template-columns: minmax(0, 444fr) minmax(0, 498fr); gap: 64px; }
.consult-panel .ptl-card { width: 420px; max-width: 100%; }
.consult-panel .ptl { padding-top: 4px; }
.consult-side { padding: 4px 0 0 64px; border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; }
.pill-active { background: #DCE8F5; color: #28629E; border-color: rgba(40, 98, 158, .3); }
/* Reminder under the order details (Figma "Contextual cards #1") */
.reminder { display: flex; gap: 16px; align-items: flex-start; padding: 12px 20px 12px 12px; border: 1px solid #E3D6CF; border-radius: 12px; }
.reminder-days { flex: none; width: 72px; height: 92px; border-radius: 8px; background: #FFEAB8; color: #916000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.reminder-days strong { font: italic 400 36px/1.2 var(--serif); letter-spacing: -.01em; }
.reminder-days span { font: 400 12px/1.2 var(--font); }
.reminder-img { flex: none; width: 96px; height: 96px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.reminder-img img { max-width: 70%; max-height: 92%; object-fit: contain; }
.reminder-text { display: flex; flex-direction: column; gap: 6px; padding-top: 4px; min-width: 0; }
.reminder-text strong { font: 500 16px/1.2 var(--font); color: #000; }
.reminder-text strong em { font-style: normal; font-weight: 400; color: var(--ink-60); font-size: 14px; }
.reminder-text p { font: 400 14px/1.2 var(--font); color: rgba(0, 0, 0, .6); }
.reminder-text .link { margin-top: 10px; font: 500 14px/1.2 var(--font); color: #754D3A; text-decoration: underline; }

/* Recent orders card */
.rx-card { padding: 28px 20px 20px; }
.rx-card .rx-actions { padding-top: 20px; border-top: 1px solid var(--line); }
.col-head .link { font: 500 14px/1.2 var(--font); color: #000; text-decoration: underline; }
.tile { height: 200px; }

@media (max-width: 900px) {
  .home-card { border-radius: 12px; }
  .main-home .home-card .hero { margin: 0; border-radius: 0; min-height: 224px; padding: 24px 20px; }
  .home-card .hero-text { max-width: 56%; }
  .home-card .hero h1 { font-size: 20px; }
  .home-card .hero p { margin-top: 12px; font-size: 12px; }
  .consult-panel { padding: 20px; }
  .consult-panel .consult-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .consult-side { padding: 24px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .reminder-text p { font-size: 12px; }
  .main-home { padding-top: 20px; }
}

/* My consults (Figma "My consults" / mobile "mobile" consult list) */
.consult-rows { display: flex; flex-direction: column; }
.crow {
  display: grid; grid-template-columns: 68px 252px 166px 150px 150px minmax(0, 1fr) 24px;
  grid-template-areas: "photo title c1 c2 c3 pill arrow"; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: #000;
}
.crow:first-child { padding-top: 8px; }
.crow:hover .crow-title { color: var(--b0); }
.crow-photo { grid-area: photo; position: relative; width: 68px; height: 68px; border-radius: 8px; background: #E4C7BB; overflow: hidden; }
.crow-photo img { position: absolute; width: 104%; max-width: none; left: -2%; top: 4%; }
.crow-title { grid-area: title; padding-left: 20px; max-width: 152px; font: 500 18px/1.2 var(--font); }
.crow-c1 { grid-area: c1; } .crow-c2 { grid-area: c2; } .crow-c3 { grid-area: c3; }
.crow-meta { display: flex; flex-direction: column; gap: 8px; }
.crow-meta .k { font: 400 12px/1.2 var(--font); letter-spacing: -.01em; text-transform: uppercase; color: var(--b1); }
.crow-meta .v { font: 500 14px/1.2 var(--font); color: rgba(0, 0, 0, .8); }
.crow-pill { grid-area: pill; }
.crow-arrow { grid-area: arrow; width: 24px; height: 24px; }

@media (max-width: 1180px) {
  .crow { grid-template-columns: 68px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) 24px; grid-template-areas: "photo title title pill arrow" "c1 c1 c2 c3 c3"; row-gap: 16px; }
}
@media (max-width: 900px) {
  .crow, .crow:first-child { grid-template-columns: 88px 41px 112px minmax(0, 1fr) 24px; grid-template-areas: "photo title title title arrow" "photo pill pill pill arrow" "c1 c1 c2 c3 c3"; row-gap: 8px; padding: 0 0 24px; margin-bottom: 24px; }
  .crow-photo { grid-row: 1 / 3; }
  .crow-title { padding-left: 0; max-width: none; font-size: 16px; align-self: end; grid-column: 2 / 5; }
  .crow-pill { grid-column: 2 / 5; align-self: start; }
  .crow-arrow { grid-row: 1 / 3; align-self: center; }
  .crow-meta { margin-top: 16px; }
  .crow-meta .k { font-size: 11px; }
  .crow-meta .v { font-size: 12px; color: #000; }
}

/* Plan ready page (Figma "My doctor consult", Patient Portal style) */
.pill.keep-case { text-transform: none; }
.pplan .page-title { font-size: 24px; }
.pplan .doc-card { margin-bottom: 32px; }
.pplan-assessment { grid-template-columns: minmax(0, 550px) minmax(0, 440px); justify-content: space-between; margin-bottom: 48px; }
.pplan-assessment .consult-images .shot { flex: 0 1 440px; height: 320px; }
.pplan-section { margin-top: 48px; display: flex; flex-direction: column; gap: 16px; }
.pplan-assessment + .pplan-section, .form-msg + .pplan-section { margin-top: 0; }
.pplan-h { display: flex; align-items: center; gap: 8px; font: 500 20px/1.2 var(--font); }
.pplan-h img { width: 20px; height: 20px; }

.pcond { border: 1px solid #CDA99A; border-radius: 16px; padding: 28px 24px; display: flex; flex-direction: column; gap: 28px; }
.pcond-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 28px; margin-bottom: -4px; border-bottom: 1px solid var(--line); }
.pcond-head h3 { font: 500 16px/1.2 var(--font); }
.pcond-rx { display: inline-flex; align-items: center; gap: 6px; font: 500 12px/1.2 var(--font); color: #754D3A; }
.pcond-rx img { width: 18px; height: 18px; }
.pcond-include { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-bottom: 28px; margin-bottom: -4px; border-bottom: 1px solid var(--line); }
.pcheck { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.pcheck input, .popt input, .prec input { position: absolute; opacity: 0; pointer-events: none; }
.pbox { flex: none; width: 26px; height: 26px; border-radius: 4px; border: 1px solid #9C6E5A; background: transparent; display: inline-flex; align-items: center; justify-content: center; }
.pbox svg { width: 14px; height: 14px; opacity: 0; }
input:checked + .pbox, .popt.is-selected .pbox { background: #754D3A; border-color: #754D3A; }
input:checked + .pbox svg, .popt.is-selected .pbox svg { opacity: 1; }
.pcheck-text strong { display: block; font: 500 16px/1.2 var(--font); }
.pcheck-text small { display: block; margin-top: 4px; font: 400 12px/1.2 var(--font); color: rgba(0, 0, 0, .8); }
.pselect h4 { font: 500 16px/1.2 var(--font); margin-bottom: 12px; }
.poptions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.popt { position: relative; display: flex; flex-direction: column; gap: 20px; padding: 16px; border: 1px solid #E4C7BB; border-radius: 12px; cursor: pointer; min-height: 148px; }
.popt.is-selected { background: #F3E6E0; }
.popt-head { display: flex; justify-content: space-between; align-items: center; }
.popt-head strong { font: 500 16px/1.2 var(--font); }
.popt-list { display: flex; flex-direction: column; gap: 4px; margin-top: -8px; }
.popt-list span { display: flex; align-items: center; gap: 8px; font: 500 12px/1.2 var(--font); color: #9C6E5A; }
.popt-list svg { width: 16px; height: 16px; flex: none; }
.popt-price { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.popt-price .big { font: 500 20px/1.2 var(--font); color: #754D3A; }
.popt-price .big small { font: 400 14px/1.2 var(--font); color: #754D3A; opacity: .7; }
.popt-price .savings { padding: 4px 6px; border-radius: 4px; background: linear-gradient(90deg, #68A44B 0%, #2E9332 100%); color: #fff; font: 400 11px/1.2 var(--font); }
.popt-price .billed { margin-left: auto; font: 400 11px/1.2 var(--font); color: #704938; }
.proutine { background: #fff; border-radius: 12px; padding: 20px; }
.proutine summary { list-style: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font: 500 16px/1.2 var(--font); }
.proutine summary::-webkit-details-marker { display: none; }
.proutine-count { display: inline-flex; align-items: center; gap: 12px; font: 400 12px/1.2 var(--font); text-transform: uppercase; color: rgba(0, 0, 0, .5); }
.proutine-count i { position: relative; width: 14px; height: 14px; }
.proutine-count i::before, .proutine-count i::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 1.5px; background: #9C6E5A; transition: transform .2s; }
.proutine-count i::after { transform: rotate(90deg); }
.proutine[open] .proutine-count i::before { transform: rotate(45deg); }
.proutine[open] .proutine-count i::after { transform: rotate(135deg); }
.proutine-body { display: flex; justify-content: space-between; gap: 64px; margin-top: 20px; }
.proutine-left { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.pbottle + .pbottle { padding-top: 20px; border-top: 1px solid var(--line); }
.pbottle-time { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font: 500 14px/1.2 var(--font); color: #9C6E5A; }
.pbottle-time img { width: 20px; height: 20px; }
.pbottle strong { display: block; font: 500 16px/1.2 var(--font); margin-bottom: 4px; }
.pbottle p, .pbottle ol { font: 400 12px/1.2 var(--font); color: rgba(0, 0, 0, .8); }
.pbottle ol { margin: 6px 0 0; padding-left: 18px; }
.pingredients { margin-top: auto; font: 500 12px/1.2 var(--font); color: #9C6E5A; }
.proutine-art { flex: none; width: 280px; height: 250px; border-radius: 12px; background: #fff; display: flex; align-items: center; justify-content: center; }
.proutine-art img { max-width: 100%; max-height: 100%; object-fit: contain; }

.precs-head p { margin-top: 8px; font: 400 12px/1.2 var(--font); color: rgba(0, 0, 0, .8); }
.precs-for { font: 500 14px/1.2 var(--font); color: #754D3A; }
.prec { display: grid; grid-template-columns: 96px minmax(0, 434px) minmax(0, 1fr) auto; align-items: center; column-gap: 20px; padding: 8px 32px 8px 8px; border-radius: 12px; background: linear-gradient(90deg, #F3E6E0 0%, #E9CFC3 100%); cursor: pointer; }
.prec-img { width: 96px; height: 96px; border-radius: 8px; background: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prec-img img { max-width: 86%; max-height: 92%; object-fit: contain; }
.prec-text { display: flex; flex-direction: column; gap: 12px; }
.prec-text a { font: 500 16px/1.2 var(--font); color: #754D3A; text-decoration: underline; text-underline-offset: 2px; }
.prec-text small { font: 400 12px/1.2 var(--font); color: rgba(0, 0, 0, .8); }
.prec-price { justify-self: center; display: flex; flex-direction: column; gap: 8px; }
.prec-price .k { font: 400 12px/1.2 var(--font); letter-spacing: -.01em; text-transform: uppercase; color: #9C6E5A; }
.prec-price b { font: 500 14px/1.2 var(--font); }
.prec-add { display: flex; align-items: center; gap: 12px; font: 400 14px/1.2 var(--font); color: #9C6E5A; }
.prec.is-added .prec-add { font-weight: 500; color: #754D3A; }

.psummary-lines { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.psummary-line { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.psummary-line strong { display: block; font: 500 16px/1.2 var(--font); }
.psummary-line small { display: block; margin-top: 2px; font: 400 12px/1.2 var(--font); color: #9C6E5A; }
.psummary-line .amt { font: 500 16px/1.2 var(--font); }
.psummary-line .amt.free { font: 400 14px/1.2 var(--font); text-transform: uppercase; }
.psummary-due { display: flex; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--line); font: 500 16px/1.2 var(--font); color: #754D3A; }
.psummary-due span:last-child { font-weight: 600; }
.psummary-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.psum-note { display: flex; gap: 8px; align-items: flex-start; max-width: 400px; font: 500 12px/1.2 var(--font); color: #754D3A; }
.psum-note img { width: 16px; height: 16px; flex: none; }

@media (max-width: 900px) {
  .pplan .page-title.has-pill { display: flex; font-size: 18px; }
  .pplan-assessment { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-bottom: 32px; }
  .pplan-assessment .consult-images .shot { flex: 1 1 auto; height: 190px; }
  .pplan-section { margin-top: 40px; }
  .pplan-h { font-size: 18px; }
  .pcond { padding: 20px 16px; gap: 20px; }
  .pcond-head { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 20px; }
  .pcond-include { padding-bottom: 20px; }
  .pcheck-text strong { font-size: 14px; }
  .pcheck-text small { font-size: 10px; }
  .poptions { grid-template-columns: 1fr; }
  .popt { min-height: 0; }
  .popt-price { flex-wrap: wrap; }
  .proutine { padding: 16px; }
  .proutine-body { flex-direction: column; gap: 16px; }
  .proutine-art { width: 100%; height: 200px; }
  .prec { grid-template-columns: 80px minmax(0, 1fr) 26px; grid-template-areas: "img text add" "img price add"; padding: 8px 16px 8px 8px; row-gap: 8px; column-gap: 12px; }
  .prec-img { grid-area: img; width: 80px; height: 80px; align-self: start; }
  .prec-text { grid-area: text; gap: 6px; }
  .prec-text a { font-size: 14px; }
  .prec-price { grid-area: price; justify-self: start; flex-direction: row; align-items: center; }
  .prec-add { grid-area: add; }
  .prec-add [data-add-label] { display: none; }
  .psummary-foot { flex-direction: column; align-items: stretch; }
  .psummary-foot .btn { width: 100%; height: 45px; }
}

/* Checkout (Figma "Pending order — Complete your order (desktop)"): Patient Portal type and layout */
.u.pco { --font: 'Inter Tight', 'Inter', -apple-system, 'Segoe UI', sans-serif; --rule: rgba(186, 141, 121, .4); }
.u.pco .panel { background: transparent; padding: 0; border-radius: 0; }
.u.pco .checkout { gap: 64px; align-items: stretch; }
.u.pco .checkout-main { width: 582px; flex: none; gap: 24px; }
.u.pco .checkout-top { gap: 16px; }
.u.pco .checkout-top .back { margin: 0; padding: 0 0 32px; border-bottom: 1px solid var(--rule); font: 400 12px/1.2 var(--font); color: rgba(0, 0, 0, .6); gap: 8px; }
.u.pco .checkout-top .back img { width: 16px; height: 16px; }
.u.pco .order-title { padding-top: 40px; }
.u.pco .order-title h1 { font: 500 20px/1.2 var(--font); }
.u.pco .order-title p { margin-top: 6px; font: 500 12px/1.2 var(--font); color: #9C6E5A; letter-spacing: 0; }
.u.pco .pill { height: 21px; padding: 3px 8px 5px; font: 500 11px/1.2 var(--font); letter-spacing: 0; }
.u.pco .order-box { background: transparent; padding: 0; gap: 8px; }
.u.pco .order-line { padding: 8px 24px 8px 8px; border: 1px solid #E4C7BB; border-radius: 12px; }
.u.pco .order-line-left { gap: 20px; }
.u.pco .thumb64 { width: 96px; height: 96px; border-radius: 12px; border: 0; background: #fff; }
.u.pco .order-line strong { font: 500 14px/1.2 var(--font); color: #000; }
.u.pco .order-line .tags { margin-top: 6px; }
.u.pco .tag-sub { padding: 4px 6px; border-radius: 4px; background: #9C6E5A; color: #FAF5F5; font: 500 11px/1.2 var(--font); letter-spacing: .02em; }
.u.pco .tag-one { padding: 4px 6px; border-radius: 4px; border: 1px solid rgba(156, 110, 90, .5); color: #9C6E5A; font: 500 11px/1.2 var(--font); letter-spacing: .02em; }
.u.pco .order-line .desc { font: 400 12px/1.2 var(--font); letter-spacing: 0; color: #9C6E5A; }
.u.pco .order-line .amt { font: 500 14px/1.2 var(--font); }
.u.pco .note { padding-left: 24px; font: 500 12px/1.2 var(--font); color: #754D3A; letter-spacing: 0; max-width: none; }
.u.pco .note b { font-weight: 500; }
.u.pco .acct { gap: 16px; padding-top: 32px; border-top: 1px solid var(--rule); }
.u.pco .acct-section { gap: 8px; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.u.pco .acct-head h3 { font: 500 14px/1.2 var(--font); }
.u.pco .acct-head .link { font: 500 14px/1.2 var(--font); color: #754D3A; text-decoration: underline; }
.u.pco .acct-view { font: 400 12px/1.2 var(--font); color: #9C6E5A; gap: 4px; }
.u.pco .acct-view .strong, .u.pco .acct-view > span:first-child { font: 500 14px/1.2 var(--font); color: #754D3A; }
.u.pco .order-summary { margin-top: 48px; width: 440px; flex: none; min-height: 713px; border-radius: 16px; padding: 24px; background: #F3E6E0; gap: 32px; justify-content: space-between; }
.u.pco .order-summary .label { font: 400 11px/1.2 var(--font); letter-spacing: -.01em; color: #9C6E5A; padding-bottom: 16px; border-bottom: 1px solid var(--rule); }
.u.pco .os-line { font: 500 16px/1.2 var(--font); color: #000; }
.u.pco .os-line .light { font: 400 14px/1.2 var(--font); text-transform: uppercase; }
.u.pco .os-due { padding-top: 20px; border-top: 1px solid var(--rule); color: #754D3A; }
.u.pco .os-due span:last-child { font-weight: 600; }
.u.pco .os-renew { font: 400 12px/1.2 var(--font); color: #754D3A; padding-top: 16px; border-top: 1px solid var(--rule); }
.u.pco .os-foot { gap: 16px; }
.u.pco .os-foot .btn { height: 41px; font: 500 14px/1.2 var(--font); }
.u.pco .os-foot p { font: 400 12px/1.2 var(--font); color: #754D3A; text-align: center; }

@media (max-width: 1180px) {
  .u.pco .checkout { flex-direction: column; gap: 32px; }
  .u.pco .checkout-main, .u.pco .order-summary { width: 100%; }
  .u.pco .order-summary { min-height: 0; margin-top: 0; }
}
@media (max-width: 900px) {
  .u.pco .checkout-top .back { padding-bottom: 20px; }
  .u.pco .order-title { padding-top: 20px; }
  .u.pco .order-line { padding: 8px 12px 8px 8px; }
  .u.pco .thumb64 { width: 72px; height: 72px; }
  .u.pco .order-line .amt { padding-left: 92px; }
  .u.pco .note { padding-left: 0; }
}

/* My progress check-ins (Figma "My progress"): Locked tag on the right of the date, Submit beside the upload links */
.checkin-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.checkin-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.checkin-submit { height: 41px; padding: 12px 18px; }
.checkin.is-locked .checkin-submit { background: #000; }
@media (max-width: 900px) {
  .checkin-actions { flex-direction: column; align-items: flex-start; gap: 24px; }
  .checkin-submit { width: auto; height: 41px; }
}

/* Profile: compact update buttons (Figma "Profile"); full width on phones */
.pbtn-fit { align-self: flex-start; width: auto; padding: 12px 16px; height: 41px; }
@media (max-width: 900px) { .pbtn-fit { align-self: flex-start; width: auto; height: 41px; } .prow-action .btn { justify-self: start; width: auto; height: 41px; padding: 12px 16px; } .support-form { padding-left: 20px; padding-right: 20px; } .support-form .lead { font-size: 14px; } }
.support-form .lead + .lead { margin-top: 16px; }
.support-form .lead a { color: #fff; text-decoration: none; }
.support-form .lead a b { font-weight: 600; }
.support-form .lead { color: #E4C7BB; }

/* Figma mobile Home (unified "Mobile" 54:14611) */
@media (max-width: 900px) {
  .main-home { padding-top: 0; }
  .home-card { overflow: visible; border-top: 0; border-radius: 0 0 12px 12px; }
  .main-home .home-card .hero { margin: 0 -21px; min-height: 226px; padding: 40px 20px; }
  .home-card .hero-text, .main-home .hero.hero-review .hero-text, .main-home .hero.hero-ready .hero-text, .main-home .hero.hero-default .hero-text { width: 205px; max-width: 56%; }
  .home-card .hero-hi { font-size: 18px; }
  .home-card .hero h1 { margin-top: 8px; font-size: 18px; }
  .home-card .hero p { margin-top: 16px; font-size: 12px; }
  .consult-panel { padding: 24px 16px; }
  .consult-panel .ptl-card strong { font-size: 14px; }
  .consult-panel .ptl-card p { font-size: 12px; }
  .tile { align-items: flex-start; justify-content: flex-start; text-align: left; padding: 20px; gap: 12px; }
  .tile span { max-width: 124px; }
}
@media (max-width: 900px) {
  .home-grid { display: flex; flex-direction: column; gap: 32px; }
  .home-grid .home-col { display: contents; }
  .home-grid .tiles { order: 9; margin-top: -16px; }
  .home-grid .profile-row { order: 10; margin-top: -24px; }
  .meta-grid { gap: 12px; }
  .meta-grid .meta-col + .meta-col { padding-top: 12px; border-top: 1px solid var(--line); }
}

/* Figma mobile plan (unified "mobile" 54:8153) */
@media (max-width: 900px) {
  .pplan .back { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
  .pplan .doc-card { border-bottom: 0; padding-bottom: 0; margin-bottom: 24px; }
  .pcheck-text strong { font-size: 16px; }
  .pcheck-text small { font-size: 12px; }
  .proutine-body { display: grid; grid-template-columns: minmax(0, 1fr) 116px; gap: 16px; align-items: end; }
  .proutine-left { display: contents; }
  .proutine-left .pbottle { grid-column: 1 / -1; }
  .pingredients { grid-column: 1; }
  .proutine-art { grid-column: 2; width: 116px; height: 130px; }
  .prec { grid-template-columns: 88px minmax(0, 1fr) 26px; grid-template-areas: "img text text" "img price add"; padding: 12px; column-gap: 16px; row-gap: 12px; }
  .prec-img { width: 88px; height: 88px; }
  .prec-text a { font-size: 16px; }
  .prec-price { flex-direction: column; align-items: flex-start; gap: 4px; }
  .prec-price b { font-size: 16px; }
  .prec-add { align-self: end; }
}
@media (max-width: 900px) {
  .u.pco .order-line { padding: 12px; }
  .u.pco .order-line-left { gap: 16px; align-items: flex-start; }
  .u.pco .thumb64 { width: 88px; height: 88px; }
  .u.pco .order-line .amt { padding-left: 104px; margin-top: -4px; }
}

/* Home, no orders yet (Figma "Home - Consult (no order)") */
.home-col:has(.orders-empty) > section { display: flex; flex-direction: column; flex: 1; }
.orders-empty { flex: 1; min-height: 258px; display: flex; align-items: center; justify-content: center; padding: 20px 16px; border: .5px solid #CDA99A; border-radius: 12px; background: transparent; text-align: center; }
.orders-empty p { font: 500 14px/1.2 var(--font); color: #9C6E5A; }
@media (max-width: 900px) { .orders-empty { min-height: 0; padding: 20px 16px; } }

/* Home without an active consultation (Figma "Home - Only Condition Flow (order)"): banner on its own, dark photo, light text */
.home-card.is-solo { border: 0; border-radius: 16px; }
.home-card.is-solo .hero { min-height: 244px; padding: 64px 40px; }
.home-card .hero.hero-default { background: linear-gradient(90deg, rgba(156, 110, 90, .92) 0%, rgba(156, 110, 90, .55) 45%, rgba(156, 110, 90, 0) 75%), url(../images/patient/pp-hero.jpg) right center / cover no-repeat, #9C6E5A; }
.home-card .hero.hero-default .hero-hi { color: #E4C7BB !important; }
.home-card .hero.hero-default h1 { color: #fff; }
.home-card .hero.hero-default p { color: #F7F2EE !important; }
@media (max-width: 900px) {
  .home-card.is-solo { border-radius: 0; }
  .main-home .home-card.is-solo .hero { min-height: 224px; padding: 40px 20px; background-position: 0 0, 70% center, 0 0; }
}
@media (max-width: 900px) {
  .tiles-centered .tile { align-items: center; text-align: center; padding: 16px 12px; gap: 8px; }
  .tiles-centered .tile span { max-width: 130px; }
}