/* Profile, purchases and service cards. Loaded after shared screen styles. */
#profile { gap: 20px; }
#profile .profile-hero { padding: 18px 18px 8px; gap: 4px; border-radius: 26px; }
#profile .profile-hero h1 { margin: 0; font-size: 30px; line-height: 34px; letter-spacing: -.03em; }
.profile-messengers-line { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; align-self: flex-start; max-width: 100%; min-height: 44px; margin: 6px 0 0 -6px; padding: 0 6px; border: 0; border-radius: 14px; background: transparent; color: var(--ink); font: inherit; font-size: 11.5px; line-height: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.profile-messengers-line > svg { flex: none; }
.profile-messenger-marks { display: flex; flex: none; align-items: center; gap: 4px; }
.profile-messenger-marks:empty { display: none; }
.profile-messenger-mark { position: relative; display: grid; place-items: center; width: 22px; height: 22px; box-sizing: border-box; border-radius: 7px; font-size: 10.5px; line-height: 1; font-weight: 800; }
.profile-messenger-mark.is-filled { background: var(--card); }
.profile-messenger-mark.is-outlined { border: 1.5px solid currentColor; }
.profile-messenger-mark.is-free { border: 1.5px dashed rgba(21,23,26,.45); font-size: 13px; }
.profile-messenger-warning { position: absolute; top: -5px; right: -5px; display: grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; background: var(--ink); color: var(--accent); font-size: 9px; }
.profile-messengers-line:focus-visible, .messenger-switch:focus-visible { outline: 3px solid var(--ok); outline-offset: 2px; }
#profile .profile-hero .blob, .package-hero .blob { top: -46px; right: -38px; width: 140px; height: 140px; }
#profile .profile-hero .ring { top: auto; bottom: -18px; right: 92px; width: 44px; height: 44px; border-width: 2px; }
#profile .quota { padding: 0; gap: 10px; background: transparent; }
.quota-card { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 18px; border-radius: 24px; background: #fff; }
#profile .quota-amount { display: grid; grid-template-columns: max-content minmax(0,1fr); grid-template-rows: 28px auto; column-gap: 10px; row-gap: 6px; margin: 0; align-items: end; }
#profile #quota-count { grid-column: 1; grid-row: 1 / 3; }
#profile #quota-label { grid-column: 2; grid-row: 2; }
#profile .quota-buy { position: relative; grid-column: 2; grid-row: 1; justify-self: start; align-self: start; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: var(--accent); font-size: 11px; line-height: 16px; }
#profile .quota-buy::after { content: ''; position: absolute; inset: -8px 0; border-radius: inherit; }
#profile .month-bars { gap: 3px; }
#profile .month-bars i { height: 8px; border-radius: 4px; }
#profile .month-bars i.bonus { border-width: 1.5px; }
#profile .month-legend { margin-top: -6px; font-size: 12px; line-height: 16px; font-weight: 600; }
#profile .month-now { padding: 12px; border-radius: 16px; gap: 12px; }
#profile .month-now .round-ico { width: 36px; height: 36px; background: var(--accent); }
.quota-return { display: grid; grid-template-columns: 25px minmax(0,1fr); align-items: center; gap: 12px; margin-top: 2px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 17px; background: var(--bg); }
.quota-return-icon { display: grid; place-items: center; width: 25px; height: 25px; color: var(--ok); }
.quota-return-icon svg { display: block; width: 100%; height: 100%; }
.quota-return-copy { min-width: 0; }
.quota-return-copy strong { display: block; color: var(--ink); font-size: 14px; line-height: 19px; font-weight: 800; }
.quota-return-copy > span, .quota-return-copy > time { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 17px; }
#profile .rules-toggle { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0; font-size: 15px; font-weight: 700; text-align: left; }
#profile .rules-toggle::after { content: ''; width: 8px; height: 8px; border-top: 2px solid var(--muted); border-right: 2px solid var(--muted); transform: rotate(45deg); margin-right: 4px; }
#profile .rules-toggle[aria-expanded=true]::after { transform: rotate(135deg); }
#profile #month-rules { margin: -6px 0 0; padding-left: 18px; font-size: 13px; line-height: 18px; color: #3e444a; }
#month-rules li + li { margin-top: 6px; }
#profile .invite-banner { position: relative; isolation: isolate; overflow: hidden; }
#profile .invite-banner::before { content: ''; position: absolute; z-index: -1; top: -26px; right: 40px; width: 64px; height: 64px; border: 2px solid rgba(255,255,255,.95); border-radius: 50%; }
.profile-help { display: grid; gap: 10px; }
/* Trainys service-card geometry with the product's yellow and mint palette. */
.mini-profile-services { font-family: "Aptos", "Trebuchet MS", "Segoe UI", sans-serif; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); gap: 10px; --service-line: var(--line); --service-ink: var(--ink); }
.mini-profile-services > .mini-feedback-entry-card { min-width: 0; width: 100%; }
.mini-profile-services .mini-profile-service-card { position: relative; display: flex; width: 100%; min-height: 148px; box-sizing: border-box; flex-direction: column; align-items: stretch; justify-content: space-between; gap: 16px; overflow: hidden; margin: 0; border: 1px solid var(--service-line); border-radius: 22px; padding: 13px; color: var(--service-ink); box-shadow: 0 4px 12px rgba(21,23,26,.05); font: inherit; text-align: left; cursor: pointer; }
.mini-profile-service-card-receipts { background: var(--card); }
.mini-profile-services .mini-profile-service-card-feedback { border-bottom-left-radius: 8px; background: var(--ok-soft); }
.mini-profile-services .mini-profile-service-card:focus-visible { outline: 3px solid var(--ok); outline-offset: 3px; }
.mini-feedback-entry span, .mini-feedback-entry small, .mini-feedback-entry strong, .mini-feedback-entry em { display: block; min-width: 0; }
.mini-profile-service-topline { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; }
.mini-profile-service-card-receipts .mini-profile-service-topline { padding-bottom: 11px; border-bottom: 1px dashed var(--service-line); }
.mini-profile-service-icon { display: grid !important; width: 38px; height: 38px; flex: 0 0 auto; place-items: center; border-radius: 12px; color: var(--ink); background: var(--accent); }
.mini-profile-service-card-feedback .mini-profile-service-icon { color: var(--ok-deep); background: var(--mint); }
.mini-profile-service-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mini-profile-services .mini-profile-service-copy small { color: var(--ok-deep); font-size: 11px; font-weight: 950; text-transform: uppercase; }
.mini-profile-services .mini-profile-service-copy strong { margin-top: 3px; color: var(--service-ink); font-size: clamp(17px,5vw,20px); font-weight: 950; line-height: .98; }
.mini-profile-services .mini-profile-service-copy em { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.2; font-style: normal; font-weight: 850; }
.mini-profile-services .mini-profile-service-arrow { display: grid; width: 30px; height: 30px; min-height: 30px; box-sizing: border-box; flex: 0 0 auto; place-items: center; border: 1px solid var(--service-line); border-radius: 50%; padding: 0; color: var(--service-ink); background: var(--card); }
.mini-profile-service-card-feedback .mini-profile-service-arrow { border-color: var(--accent-edge); color: var(--ink); background: var(--accent); }
.mini-profile-service-arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.profile-support-sheet { align-items: stretch; text-align: left; }
.profile-support-sheet .grab, .invite-sheet .grab, .month-extra-sheet .grab { align-self: center; }
.messengers { display: grid; gap: 10px; }
.messengers-actions { display: grid; gap: 8px; }
.messengers-label { margin: 0; font-size: 15px; line-height: 21px; font-weight: 700; }
.messengers .note { margin: 0; }
.profile-account { display: grid; gap: 8px; }
.profile-account .messenger { width: 100%; margin-top: 0; background: var(--bg); }
.profile-account .messenger .sub { font-size: 12px; }
.profile-account .marks .mark { width: 36px; height: 36px; border-radius: 11px; }
.messenger-page { display: grid; align-content: start; gap: 12px; min-height: 100%; box-sizing: border-box; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)); }
.messenger-page-header { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 10px; align-items: start; padding: 8px 0 14px; }
.messenger-page-header .back { width: 44px; min-height: 44px; padding: 0; background: var(--card); }
.messenger-page-header h1 { margin: 2px 0 4px; font-size: 28px; line-height: 32px; letter-spacing: -.025em; }
.messenger-page-header p, .messenger-panel-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 20px; }
.messenger-status { margin: 0; color: var(--ink); font-size: 13px; line-height: 19px; }
.messenger-status:empty { display: none; }
.messenger-cards { display: grid; gap: 12px; }
.messenger-ticket { overflow: hidden; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.messenger-ticket-head { display: flex; align-items: center; gap: 12px; padding: 16px; }
.messenger-ticket-head > strong { min-width: 0; flex: 1; font-size: 17px; line-height: 23px; }
.messenger-provider-mark { display: grid; flex: none; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--accent); color: var(--ink); font-size: 12px; font-weight: 800; }
.messenger-provider-mark.is-max { background: var(--ink); color: var(--card); }
.messenger-provider-mark.is-free { border: 1px dashed var(--muted); background: transparent; color: var(--muted); }
.messenger-chip { flex: none; padding: 4px 8px; border-radius: 8px; background: var(--bg); color: var(--muted); font-size: 11px; line-height: 15px; font-weight: 700; }
.messenger-ticket-switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 2px 16px; border-top: 1px dashed var(--line); font-size: 14px; font-weight: 700; }
.messenger-switch { display: grid; place-items: center; flex: none; width: 48px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: transparent; cursor: pointer; }
.messenger-switch-track { position: relative; display: block; width: 44px; height: 26px; border-radius: 999px; background: var(--accent); }
.messenger-switch-knob { position: absolute; top: 3px; left: 21px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.messenger-switch-knob svg { width: 11px; height: 11px; }
.messenger-switch.is-off .messenger-switch-track, .messenger-switch.is-locked .messenger-switch-track { background: var(--line); }
.messenger-switch.is-off .messenger-switch-knob { left: 3px; }
.messenger-switch.is-locked { cursor: default; }
.messenger-switch:disabled { opacity: .55; cursor: wait; }
.messenger-ticket.is-muted { background: var(--bg); }
.messenger-delivery-notice { padding: 0 16px 16px; font-size: 14px; line-height: 20px; }
.messenger-delivery-notice p { margin: 4px 0 0; color: var(--muted); }
.messenger-bot-link { display: inline-flex; align-items: center; min-height: 44px; margin: 0 16px 8px; color: var(--ink); font-size: 14px; font-weight: 700; text-underline-offset: 3px; }
.messenger-delivery-notice .messenger-bot-link { margin: 8px 0 0; }
.messenger-link-section { padding: 16px; border: 1px dashed var(--line); border-radius: 22px; }
.profile-support-sheet h1 { padding-right: 38px; }
.profile-support-sheet #support-note { max-width: none; }
.profile-route { position: fixed; inset: 0 auto 0 50%; z-index: 8; width: min(100%,var(--shell)); overflow-y: auto; transform: translateX(-50%); background: var(--bg); }
.profile-route[hidden] { display: none; }
.receipts-page { min-height: 100%; padding: 12px 16px calc(28px + env(safe-area-inset-bottom)); }
.profile-route-header { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0,1fr) 44px; align-items: center; gap: 12px; padding: 18px; border-radius: 26px; background: var(--accent); }
.profile-route-header .blob { top: -46px; right: -20px; width: 128px; height: 128px; }
.profile-route-header .ring { top: auto; right: 60px; bottom: -28px; width: 48px; height: 48px; border-radius: 50%; }
.profile-route-header h1 { margin: 0; font-size: 26px; line-height: 32px; letter-spacing: -.02em; }
.profile-route-header .back { background: #fff; }
.receipts-caption { margin: 4px 0 0; font-size: 13px; line-height: 18px; }
.profile-route-empty { margin-top: 20px; }
.receipts-empty-art { display: block; width: 188px; max-width: 100%; height: auto; margin: 8px 0 18px; }
.receipts-demo { margin: 12px 0 0; color: var(--muted); font-size: 11px; line-height: 16px; }
.support-form { display: flex; flex-direction: column; gap: 8px; }
.support-form textarea, .admin-field { width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; font-size: 15px; }
.support-threads, .receipts-list { display: flex; flex-direction: column; gap: 8px; }
.support-threads { margin-top: 8px; }
.support-thread, .receipt-card { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 18px; background: #fff; }
.support-thread p, .receipt-card p { margin: 0; font-size: 14px; line-height: 19px; }
.support-thread small, .receipt-card small { color: var(--muted); font-size: 12px; font-weight: 700; }
.receipts-list { margin-top: 16px; }
.receipt-card a { color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
.invite-sheet { gap: 14px; }
.invite-sheet h1 { font-size: 28px; line-height: 32px; letter-spacing: -.03em; }
.invite-sheet .kicker { color: var(--muted); margin-top: 4px; margin-bottom: -10px; }
.invite-sheet .sheet-close, .month-extra-sheet .sheet-close, .profile-support-sheet .sheet-close { top: 26px; right: 20px; background: var(--bg); }
.invite-gifts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.invite-gift { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 2px; padding: 14px; border-radius: 22px; }
.invite-gift > span { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.invite-gift strong { font-size: 24px; line-height: 30px; font-weight: 800; color: var(--ink); }
.invite-gift small { font-size: 13px; line-height: 17px; font-weight: 600; }
.invite-gift-friend { background: #d7f5e3; color: #17603c; }
.invite-gift-friend::before { content: ''; position: absolute; z-index: -1; right: -22px; bottom: -22px; width: 70px; height: 70px; border: 2px solid rgba(255,255,255,.9); border-radius: 50%; }
.invite-gift-you { background: var(--accent); }
.invite-gift-you::before { content: ''; position: absolute; z-index: -1; right: -26px; top: -26px; width: 76px; height: 76px; border-radius: 50%; background: #bdefd0; }
.invite-sheet .rules { border: 0; border-radius: 16px; background: var(--bg); }
.invite-sheet .rules button { font-weight: 700; }
.invite-sheet .invite-link { padding: 12px 14px; gap: 2px; border: 1.5px dashed var(--line); border-radius: 16px; background: #fff; }
.invite-sheet .invite-link small { font-size: 12px; letter-spacing: normal; font-weight: 600; text-transform: none; }
.invite-sheet .invite-link b { font-size: 15px; font-weight: 800; }
.invite-friends { display: grid; gap: 6px; }
.invite-friends h2 { margin: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
.invite-sheet .invite-person { grid-template-columns: 36px minmax(0,1fr) auto; padding: 8px 0; border: 0; border-radius: 0; min-height: 44px; }
.invite-sheet .invite-person + .invite-person { border-top: 1px solid #edeeea; }
.invite-sheet .invite-person i { width: 36px; height: 36px; background: #d7f5e3; color: #17603c; font-size: 15px; }
.invite-sheet .invite-person i.pending { border: 1.5px dashed #c9ccc5; background: transparent; color: var(--muted); }
.invite-sheet .invite-person b { font-size: 15px; }
.invite-sheet .invite-person span { max-width: 130px; color: #1b6e46; font-size: 13px; }
.invite-sheet .invite-person:has(i.pending) span { color: var(--muted); font-weight: 600; }
.invite-sheet .invite-empty { padding: 8px 0; border: 0; font-size: 13px; line-height: 19px; text-align: left; }
#package-sheet { background: var(--bg); align-items: stretch; }
.package-page { display: flex; flex-direction: column; width: 100%; height: 100dvh; overflow-y: auto; }
.package-page-header { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 12px 16px 0; flex: none; }
.package-page-header .back { background: #fff; }
.package-page-content { display: flex; flex-direction: column; flex: 1; gap: 16px; padding: 12px 16px calc(24px + env(safe-area-inset-bottom)); }
.package-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 28px; background: var(--accent); }
.package-hero .ring { top: auto; bottom: -20px; right: 70px; width: 52px; height: 52px; border-width: 2px; }
.package-hero h1 { max-width: 12ch; margin: 0; font-size: 30px; line-height: 32px; letter-spacing: -.03em; font-weight: 800; }
.package-hero .package-lead { margin: 4px 0 0; font-size: 15px; line-height: 20px; font-weight: 600; }
#package-ladder { padding-top: 14px; }
#package-ladder button { justify-content: space-between; align-items: center; min-height: 0; height: calc(154px + var(--step)*36px); padding: 16px 8px 12px; border: 2px solid #fff; border-radius: 22px; gap: 8px; }
#package-ladder button[aria-checked=true] { background: var(--accent); border-color: #e3b62a; }
#package-ladder .best { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; height: 24px; margin: 0; padding: 0 10px; border-radius: 12px; background: #1f9d5c; color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; text-transform: none; letter-spacing: normal; }
.package-option-top, .package-option-bottom { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.package-option-bottom { gap: 4px; }
#package-ladder .n { font-size: 36px; line-height: 38px; letter-spacing: -.03em; }
#package-ladder .noun { color: var(--ink); font-size: 13px; font-weight: 700; }
#package-ladder .per { color: var(--muted); font-size: 12px; font-weight: 600; }
.package-ticket-cut { align-self: stretch; margin: 0 -8px; border-top: 2px dashed rgba(21,23,26,.16); }
#package-ladder .price { font-size: 19px; font-weight: 800; white-space: nowrap; }
#package-ladder .save { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: #d7f5e3; color: #17603c; font-size: 11px; font-weight: 800; }
.package-balance { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 22px; background: #fff; }
.package-balance strong { font-size: 14px; font-weight: 800; }
#package-remaining { margin: 0; font-size: 13px; line-height: 18px; color: var(--muted); }
#package-balance-bars { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 5px; }
#package-balance-bars i { height: 10px; border-radius: 5px; background: #edeeea; }
#package-balance-bars i.on { background: var(--accent); box-shadow: inset 0 0 0 1.5px #e3b62a; }
.package-payment { display: flex; flex-direction: column; gap: 4px; margin-top: auto; padding-top: 4px; }
.package-payment .action { width: 100%; box-shadow: 0 10px 24px rgba(21,23,26,.12); }
.package-payment .package-note { margin: 4px 0; text-align: center; font-size: 11px; line-height: 15px; color: var(--muted); }
.package-payment .quiet { font-size: 14px; font-weight: 700; color: var(--muted); }
.month-extra-sheet { gap: 16px; align-items: stretch; text-align: left; }
.month-extra-sheet h1 { padding-right: 36px; }
.month-extra-sheet .kicker { padding-top: 4px; padding-right: 44px; margin-bottom: -12px; color: var(--muted); }
.month-extra-sheet p { max-width: none; color: var(--ink); }
.month-extra-scale { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; border-radius: 22px; background: var(--bg); }
.month-extra-scale > div { display: grid; gap: 6px; }
.month-extra-ten { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 3px; }
.month-extra-ten i { height: 22px; border: 1.5px dashed #b9bdb5; border-radius: 5px; }
.month-extra-ten i.used { border: 0; background: var(--accent); box-shadow: inset 0 0 0 1.5px #e3b62a; }
.month-extra-ten i.new { border: 0; background: #1f9d5c; }
.month-extra-scale span { font-size: 12px; font-weight: 700; color: var(--muted); }
.month-extra-scale b { color: var(--ink); }
.month-extra-scale > div:last-child b { color: #17603c; }
.month-extra-sheet #month-extra-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 20px; background: #d7f5e3; color: #17603c; font-variant-numeric: tabular-nums; }
.month-extra-balance-label { font-size: 14px; line-height: 20px; font-weight: 700; }
.month-extra-transition { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 20px; line-height: 26px; font-weight: 800; }
.month-extra-transition s { color: #5a8f70; }
.month-extra-transition strong { color: var(--ink); font-weight: 800; }
.month-extra-transition svg { flex: none; stroke-width: 2.4; }
@media (max-width: 350px) { .mini-profile-services { gap: 8px; } .mini-profile-services .mini-profile-service-card { min-height: 140px; gap: 12px; padding: 11px; } .mini-profile-services .mini-profile-service-copy strong { font-size: 17px; } #package-ladder .best { padding: 0 7px; font-size: 10px; } }