/* Access pages: login, signup, checkout, support tickets */
.acc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; max-width: 1100px; margin-inline: auto; }
.acc-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); font-weight: 700; color: var(--ink-2); background: var(--glass); border: 1px solid var(--line); }
.acc-back:hover { color: var(--accent); }
.acc-wrap { position: relative; padding: 16px 16px 48px; display: grid; justify-items: center; }
.acc-wrap::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(50% 50% at 85% 10%, rgba(192,90,214,.28), transparent 70%), radial-gradient(50% 50% at 10% 90%, rgba(248,141,90,.22), transparent 70%); }
.acc-card { width: min(100%, 460px); padding: clamp(20px, 4vw, 32px); }
.acc-card.is-wide { width: min(100%, 680px); }
.acc-head { display: grid; gap: 8px; justify-items: start; margin-bottom: 22px; }
.acc-head h1 { font-size: clamp(24px, 5vw, 32px); font-weight: 900; line-height: 1.3; }
.acc-head p { color: var(--muted); }
.acc-bottom { text-align: center; margin-top: 18px; color: var(--muted); }
.acc-bottom a { color: var(--accent); font-weight: 800; }
.acc-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; padding: 12px 14px; border-radius: var(--r-md); background: var(--info-bg); color: var(--ink-2); font-size: 14px; line-height: 1.8; }
.acc-note .svg-icon { flex: none; margin-top: 4px; color: var(--info); }
.acc-section { font-size: 13px; font-weight: 800; color: var(--accent); margin: 8px 0 12px; display: flex; align-items: center; gap: 8px; }
.acc-section::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.acc-hint { font-size: 12.5px; color: var(--muted); }
.acc-field-err { color: var(--bad); font-size: 13px; font-weight: 700; }
.acc-form .field label { display: block; }
.acc-form [hidden] { display: none !important; }
.acc-form input, .acc-form select, .acc-form textarea { width: 100%; }
.acc-honey { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* order */
.acc-order { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); margin-bottom: 20px; overflow: hidden; }
.acc-order-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.acc-order-row b { font-weight: 800; }
.acc-order-row small { display: block; color: var(--muted); font-weight: 500; margin-top: 2px; }
.acc-order-row del { color: var(--muted); font-size: 13px; margin-inline-end: 6px; }
.acc-order-price { white-space: nowrap; text-align: end; font-weight: 800; }
.acc-order-total { display: flex; justify-content: space-between; padding: 16px; font-weight: 900; font-size: 18px; background: var(--accent-soft); }
.acc-steps { display: grid; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; counter-reset: s; }
.acc-steps li { counter-increment: s; display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--ink-2); }
.acc-steps li::before { content: counter(s); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 800; font-size: 13px; flex: none; }
.acc-done { text-align: center; display: grid; justify-items: center; gap: 14px; }
.acc-done .icon-tile { width: 68px; height: 68px; border-radius: 22px; }
.acc-done .acc-order, .acc-done .acc-note { text-align: start; width: 100%; }

/* support */
.sup-wrap { max-width: 1000px; margin-inline: auto; padding: 24px 16px 56px; display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sup-wrap.is-new { grid-template-columns: 1fr 1.1fr; align-items: start; } }
.sup-intro { display: grid; gap: 14px; justify-items: start; }
.sup-intro h1 { font-size: clamp(30px, 6vw, 48px); font-weight: 900; line-height: 1.2; }
.sup-intro p { color: var(--muted); font-size: 16px; }
.sup-guest { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.sup-guest .sup-full, .sup-guest .acc-hint { grid-column: 1 / -1; }
@media (max-width: 520px) { .sup-guest { grid-template-columns: 1fr; } }
.ticket-status { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--r-pill); font-weight: 800; font-size: 13px; background: var(--info-bg); color: var(--info); white-space: nowrap; }
.ticket-status.status-open { background: var(--ok-bg); color: var(--ok); }
.ticket-status.status-waiting { background: var(--warn-bg); color: var(--warn); }
.ticket-status.status-closed { background: var(--surface-2); color: var(--muted); border: 1px solid var(--line); }
.sup-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.sup-top h1 { font-size: clamp(22px, 4.5vw, 30px); font-weight: 900; }
.sup-top p { color: var(--muted); font-size: 14px; }
.sup-status-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sup-status-form select { min-height: 44px; border-radius: var(--r-md); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: 0 12px; }
.sup-chat { display: grid; grid-template-rows: auto 1fr auto; overflow: hidden; padding: 0; }
.sup-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.sup-toolbar small { display: block; color: var(--muted); }
.sup-toolbar .sup-ref { margin-inline-start: auto; color: var(--muted); font-weight: 700; }
.sup-live { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.support-messages { display: grid; gap: 14px; align-content: start; padding: 16px; min-height: 280px; max-height: min(60vh, 560px); overflow-y: auto; background: var(--surface-2); }
.support-message { display: flex; gap: 10px; align-items: flex-end; max-width: 88%; }
.support-message.from-customer { align-self: flex-start; }
.support-message.from-staff { margin-inline-start: auto; flex-direction: row-reverse; }
.support-message-avatar { width: 34px; height: 34px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--grad-primary); color: #fff; font-weight: 800; font-size: 14px; }
.from-staff .support-message-avatar { background: var(--grad-hot); }
.support-message-content { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 10px 14px; min-width: 0; }
.from-staff .support-message-content { background: var(--accent-soft); }
.support-message-meta { display: flex; gap: 10px; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-bottom: 4px; }
.support-message-meta b { color: var(--ink); }
.support-message-content p { overflow-wrap: anywhere; line-height: 1.9; }
.support-empty { text-align: center; color: var(--muted); padding: 40px 12px; }
.sup-reply { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; padding: 14px 16px; border-top: 1px solid var(--line); }
.sup-reply textarea { width: 100%; min-height: 48px; max-height: 160px; border: 1.5px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink); padding: 10px 14px; font: inherit; }
.sup-reply textarea:focus { outline: none; border-color: var(--c-4); box-shadow: 0 0 0 4px rgba(192,90,214,.2); }
.sup-send { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #fff; background: var(--grad-primary); cursor: pointer; }
.sup-reply .acc-hint { grid-column: 1 / -1; }
.sup-closed { padding: 16px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }
.sup-list { display: grid; gap: 12px; }
.sup-row { display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); transition: transform .2s, border-color .2s; }
.sup-row:hover { transform: translateY(-2px); border-color: var(--c-4); }
.sup-row-main { display: grid; gap: 2px; min-width: 0; }
.sup-row-main small, .sup-row-main span { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 560px) { .sup-row { grid-template-columns: 1fr auto; } .sup-row > .badge { grid-column: 1 / -1; justify-self: start; order: -1; } }
@media (prefers-reduced-motion: reduce) { .sup-row { transition: none; } .sup-row:hover { transform: none; } }
.acc-form .form-grid { align-items: start; }
@media (max-width: 560px) { .acc-form .form-grid { grid-template-columns: 1fr; } }