:root { --ink: #15231f; --muted: #66736f; --line: #dce5e1; --brand: #0b6e69; --accent: #ef8a44; --paper: #ffffff; --wash: #f4f8f6; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.site-header { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.header-inner, main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.header-inner { min-height: 72px; display: flex; align-items: center; gap: 36px; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 19px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.brand img { width: 34px; height: 34px; object-fit: contain; }
nav { display: flex; gap: 26px; margin-right: auto; } nav a { color: var(--muted); text-decoration: none; font-size: 14px; }
.header-actions { display: flex; align-items: center; gap: 12px; }.icon-button, .cart-button { min-height: 38px; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); padding: 0 13px; }.cart-button b { color: var(--brand); margin-left: 5px; }
.hero { min-height: 470px; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 64px; border-bottom: 1px solid var(--line); }.eyebrow { margin: 0 0 12px; color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: 1.4px; }.hero h1 { max-width: 620px; margin: 0; font-size: 47px; line-height: 1.18; letter-spacing: 0; }.hero-text { max-width: 500px; margin: 22px 0 28px; color: var(--muted); font-size: 17px; line-height: 1.7; }.primary-action, .secondary-action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; border-radius: 5px; padding: 0 18px; background: var(--brand); color: #fff; text-decoration: none; font-weight: 700; }.hero-media { position: relative; min-height: 300px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #dceee8; }.hero-media img { width: min(78%, 390px); max-height: 280px; object-fit: contain; mix-blend-mode: multiply; }.live-note { position: absolute; left: 20px; bottom: 18px; padding: 10px 12px; background: rgba(255,255,255,.92); font-size: 13px; }.live-note span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.store-toolbar { display: flex; gap: 24px; align-items: end; justify-content: space-between; padding: 58px 0 26px; }.store-toolbar h2, .live-band h2 { margin: 0; font-size: 29px; }.search-form { display: flex; width: min(100%, 400px); border: 1px solid var(--line); }.search-form input { width: 100%; min-width: 0; border: 0; padding: 12px; outline: none; }.search-form button { border: 0; background: var(--ink); color: #fff; padding: 0 18px; }
.activity-band { padding: 54px 0 12px; border-bottom: 1px solid var(--line); }.activity-heading { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 24px; }.activity-heading h2 { margin: 0; font-size: 29px; }.activity-filters { display: flex; flex-wrap: wrap; gap: 8px; }.activity-filters button { min-height: 34px; padding: 0 11px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); font-size: 13px; }.activity-filters button.active { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 700; }.activity-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-bottom: 46px; }.activity-card { min-width: 0; display: grid; grid-template-rows: 150px 1fr; border: 1px solid var(--line); background: #fff; }.activity-card img { width: 100%; height: 150px; object-fit: cover; background: var(--wash); }.activity-card-copy { display: grid; gap: 9px; padding: 14px; }.activity-card-copy p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }.activity-card-copy h3 { min-height: 42px; margin: 0; font-size: 16px; line-height: 1.35; }.activity-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; }.activity-card-bottom strong { color: #bd4a1c; }.activity-card-bottom button { min-height: 34px; padding: 0 10px; font-size: 13px; }
.catalog-layout { display: grid; grid-template-columns: 190px 1fr; gap: 30px; padding-bottom: 64px; }.category-panel { border-top: 2px solid var(--ink); padding-top: 14px; }.category-panel > p { font-weight: 800; margin: 0 0 12px; }.category-list { display: grid; gap: 3px; }.category-list button { text-align: left; border: 0; background: transparent; color: var(--muted); padding: 9px 10px; border-radius: 4px; }.category-list button.active, .category-list button:hover { background: #e7f2ee; color: var(--brand); font-weight: 700; }.product-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.product-card { min-width: 0; border: 1px solid var(--line); background: #fff; }.product-image { width: 100%; height: 190px; display: block; object-fit: cover; background: var(--wash); }.product-info { padding: 15px; }.product-label { margin: 0 0 7px; color: var(--brand); font-size: 12px; }.product-info h3 { height: 44px; overflow: hidden; margin: 0; font-size: 16px; line-height: 1.35; }.product-summary { min-height: 42px; overflow: hidden; margin: 10px 0 15px; color: var(--muted); font-size: 13px; line-height: 1.6; }.product-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.product-bottom strong { color: #bd4a1c; }.add-cart { border: 1px solid var(--brand); border-radius: 4px; background: #fff; color: var(--brand); padding: 7px 9px; font-size: 13px; }.store-message { padding: 28px; border: 1px dashed var(--line); color: var(--muted); margin-bottom: 18px; }.secondary-action { background: #fff; border: 1px solid var(--brand); color: var(--brand); }.catalog-content > .secondary-action { margin-top: 22px; }
.live-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 42px; background: #15231f; color: #fff; }.live-band .eyebrow { color: #8bd4c4; }.live-band p:not(.eyebrow) { color: #d1ded9; }.live-band .secondary-action { color: #fff; border-color: #8bd4c4; background: transparent; white-space: nowrap; }.service-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 52px 0; }.service-band article { display: grid; gap: 8px; }.service-band strong { font-size: 16px; }.service-band span { color: var(--muted); line-height: 1.6; font-size: 14px; }
.drawer { width: min(430px, 100vw); max-width: 100vw; height: 100%; margin: 0 0 0 auto; border: 0; padding: 22px; box-shadow: -10px 0 30px rgba(0,0,0,.12); }.drawer::backdrop, .account-dialog::backdrop { background: rgba(15, 25, 22, .42); }.drawer-head, .cart-footer { display: flex; align-items: center; justify-content: space-between; gap: 15px; }.drawer-head h2 { margin: 0; }.cart-items { display: grid; gap: 15px; margin: 28px 0; color: var(--muted); }.cart-item { display: grid; grid-template-columns: 58px 1fr auto; gap: 10px; align-items: center; }.cart-item img { width: 58px; height: 58px; object-fit: cover; background: var(--wash); }.cart-item div { display: grid; gap: 5px; }.cart-item span { color: var(--muted); font-size: 13px; }.cart-item button { border: 0; color: #a13c27; background: transparent; }.cart-footer { position: absolute; inset: auto 22px 22px; }.account-dialog { width: min(460px, calc(100% - 32px)); border: 0; border-radius: 6px; padding: 34px; box-shadow: 0 15px 45px rgba(0,0,0,.18); }.account-dialog h2 { margin: 0 0 14px; }.account-dialog p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }.close-dialog { position: absolute; top: 14px; right: 14px; }.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 760px) { .header-inner, main { width: min(100% - 28px, 1180px); }.header-inner { gap: 12px; }.brand span, nav, #accountButton { display: none; }.hero { grid-template-columns: 1fr; gap: 26px; padding: 52px 0; }.hero h1 { font-size: 34px; }.hero-media { min-height: 190px; }.activity-heading, .store-toolbar, .live-band { align-items: flex-start; flex-direction: column; }.activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.activity-card { grid-template-rows: 120px 1fr; }.activity-card img { height: 120px; }.search-form { width: 100%; }.catalog-layout { grid-template-columns: 1fr; }.category-list { grid-template-columns: repeat(3, 1fr); }.category-list button { text-align: center; }.product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.product-image { height: 135px; }.product-info { padding: 11px; }.product-summary { display: none; }.product-info h3 { height: 43px; font-size: 14px; }.product-bottom { align-items: start; flex-direction: column; }.service-band { grid-template-columns: 1fr; gap: 28px; }.live-band { padding: 28px; } }

.product-image, .product-info h3 { cursor: pointer; }
.drawer::backdrop, .account-dialog::backdrop, .product-dialog::backdrop, .orders-dialog::backdrop { background: rgba(15, 25, 22, .42); }
.login-form { display: grid; gap: 14px; margin-top: 22px; }
.login-form label { display: grid; gap: 7px; color: var(--muted); font-size: 13px; }
.login-form input, .login-form select, .login-form textarea { border: 1px solid var(--line); border-radius: 4px; padding: 11px; color: var(--ink); background: #fff; resize: vertical; }
.account-status { margin-top: 16px; color: var(--muted); line-height: 1.6; }
.account-actions { display: flex; gap: 12px; align-items: center; margin-top: 20px; }
.text-button { border: 0; color: #a13c27; background: transparent; }
.product-dialog, .orders-dialog { width: min(560px, calc(100% - 32px)); border: 0; border-radius: 6px; padding: 34px; box-shadow: 0 15px 45px rgba(0,0,0,.18); }
.product-dialog { grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.activity-meta { font-size: 13px; }.activity-dialog .detail-actions { margin-top: 3px; }
.product-dialog > img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--wash); }
.detail-copy { display: grid; gap: 13px; }.detail-copy h2 { margin: 0; font-size: 25px; }.detail-copy strong { color: #bd4a1c; font-size: 23px; }.detail-copy p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.6; }.detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }.detail-actions button { flex: 1 1 120px; }
.sku-options { display: flex; flex-wrap: wrap; gap: 8px; }.sku-options .secondary-action { min-height: 34px; padding: 0 10px; font-size: 13px; }.sku-options .secondary-action.active { color: #fff; background: var(--brand); }
.orders-list { display: grid; gap: 12px; margin-top: 22px; color: var(--muted); }.order-row { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line); padding: 13px 0; }.order-row strong { color: var(--ink); }
.cart-item { grid-template-columns: 18px 58px 1fr auto; }.cart-actions { display: flex !important; align-items: center; gap: 7px; }.cart-actions .cart-add, .cart-actions .cart-sub { width: 24px; height: 24px; border: 1px solid var(--line); color: var(--ink); }.cart-actions b { min-width: 14px; text-align: center; }
.checkout-section { border-top: 1px solid var(--line); padding: 16px 0; }.checkout-section h3 { margin: 0 0 10px; font-size: 15px; }.checkout-address, .checkout-item { color: var(--muted); font-size: 14px; line-height: 1.6; }.checkout-items { display: grid; gap: 8px; }.checkout-footer { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }.checkout-footer strong { color: #bd4a1c; font-size: 20px; }
.checkout-heading { display: flex; justify-content: space-between; align-items: start; }.checkout-heading .text-button { font-size: 13px; }
.checkout-heading .text-button:disabled { color: var(--muted); cursor: not-allowed; }
.delivery-modes { display: flex; gap: 8px; flex-wrap: wrap; }.delivery-modes button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--muted); }.delivery-modes button.active { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 700; }
.pickup-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }.pickup-contact label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }.pickup-contact input { min-width: 0; border: 1px solid var(--line); border-radius: 4px; padding: 10px; color: var(--ink); }
.points-toggle { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14px; }.points-toggle span { color: var(--muted); font-size: 13px; }.points-toggle input { accent-color: var(--brand); }
.coupon-dialog { width: min(520px, calc(100% - 32px)); }.coupon-row { align-items: center; }.coupon-row > div { display: grid; gap: 5px; }.coupon-row span { color: var(--muted); font-size: 13px; }.coupon-row .secondary-action { min-height: 36px; padding: 0 12px; }.coupon-clear { width: 100%; margin-top: 22px; }
.payment-methods { display: grid; gap: 12px; margin-top: 22px; }.payment-methods button { width: 100%; }.payment-amount { margin: 0 0 4px; color: #bd4a1c; font-size: 20px; font-weight: 800; }
.express-row > div { display: grid; gap: 5px; }.express-row span { color: var(--muted); font-size: 13px; }.qrcode-dialog { width: min(440px, calc(100% - 32px)); }.qrcode-dialog > img { display: block; width: min(100%, 360px); aspect-ratio: 1; margin: 20px auto 0; object-fit: contain; }
.favorite-row > div:first-child { display: grid; gap: 5px; }.favorite-row span { color: var(--muted); font-size: 13px; }.favorite-row > div:last-child { display: flex; align-items: center; gap: 9px; }.favorite-row .secondary-action { min-height: 34px; padding: 0 11px; }
.inline-action { margin: -2px 0 6px; justify-self: start; }
.comment-items { display: grid; gap: 16px; }.comment-item { display: grid; gap: 9px; border-bottom: 1px solid var(--line); padding-bottom: 16px; }.comment-item strong { color: var(--ink); }.comment-item select, .comment-item textarea { border: 1px solid var(--line); border-radius: 4px; padding: 10px; background: #fff; resize: vertical; }
.product-comment-row > div { display: grid; gap: 5px; }.product-comment-row span { color: var(--muted); font-size: 13px; line-height: 1.5; }
.wallet-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }.wallet-summary strong { padding: 13px 10px; background: var(--wash); color: var(--brand); font-size: 14px; text-align: center; }
@media (max-width: 760px) { .wallet-summary { grid-template-columns: 1fr; } }
.region-selects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.region-selects select { min-width: 0; border: 1px solid var(--line); padding: 10px 6px; background: #fff; }
.address-actions { display: flex; align-items: center; gap: 8px; }.address-actions button { border: 0; background: transparent; color: var(--brand); font-size: 13px; }.address-actions .address-delete { color: #a13c27; }
@media (max-width: 760px) { .product-dialog { grid-template-columns: 1fr; padding: 24px; }.product-dialog > img { max-height: 220px; }.account-dialog, .orders-dialog { padding: 28px 20px; }.pickup-contact { grid-template-columns: 1fr; } }

/* Desktop account center and the pale blue-violet storefront treatment. */
:root { --ink: #222749; --muted: #717795; --line: #e1e4f3; --brand: #6677d6; --accent: #a36fd4; --paper: #fcfcff; --wash: #f4f5ff; --lavender: #eef0ff; }
body { background: var(--paper); }
.site-header { border-bottom-color: #e7e9f5; box-shadow: 0 4px 18px rgba(76, 88, 157, .05); }
.brand { color: #31375c; }.brand img { width: 38px; height: 38px; border-radius: 10px; box-shadow: 0 4px 12px rgba(78, 78, 160, .18); }
nav a:hover, nav a:focus-visible { color: var(--brand); }
#primaryNav a { border-radius: 5px; padding: 8px 10px; font-weight: 700; transition: background .18s ease, color .18s ease; }
#primaryNav a.active { background: #e7eaff; color: #5868c8; }
.avatar-button { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid #dfe2f3; border-radius: 20px; padding: 3px 11px 3px 4px; background: #fff; color: #34395d; }
.avatar-button span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: linear-gradient(135deg, #9aa7ee, #7a65c7); color: #fff; font-size: 13px; font-weight: 800; }.avatar-button b { font-size: 13px; }
.primary-action { background: linear-gradient(135deg, #7385de, #8b6fd1); box-shadow: 0 8px 18px rgba(104, 112, 205, .2); }.secondary-action { background: #fff; color: #5b65ba; border: 1px solid #dfe2f5; }
.hero { min-height: 500px; }.hero h1 { color: #272d53; }.eyebrow { color: #6d79d2; }.hero-media { border-radius: 8px; background: linear-gradient(135deg, #edf0ff, #f8f4ff); }.live-note { color: #4b527c; border: 1px solid #e3e5f6; }.live-note span { background: #9a79d8; }
.activity-band { background: linear-gradient(180deg, rgba(239, 241, 255, .72), rgba(252, 252, 255, 0)); }.service-band article { border-color: #e2e4f2; background: #fff; }.service-band article strong { color: #5966bd; }

.account-page { min-height: calc(100vh - 73px); padding: 42px 20px 64px; background: linear-gradient(135deg, #f6f7ff 0%, #fbfaff 53%, #f3f0ff 100%); }
.account-page-shell { width: min(1180px, 100%); min-height: 650px; display: grid; grid-template-columns: 248px minmax(0, 1fr); margin: 0 auto; overflow: hidden; border: 1px solid #e1e4f4; border-radius: 8px; background: #fff; box-shadow: 0 20px 55px rgba(72, 79, 145, .12); }
.account-sidebar { display: flex; flex-direction: column; padding: 24px 16px; background: linear-gradient(180deg, #f2f3ff, #fafaff); border-right: 1px solid #e1e4f4; }
.account-back, .account-logout, .account-nav button { width: 100%; border: 0; background: transparent; color: #636a8d; text-align: left; }
.account-back { padding: 8px 10px 22px; color: #6677d6; font-size: 13px; }.account-back::before { content: '← '; }
.account-profile { display: flex; gap: 10px; align-items: center; padding: 12px 10px 22px; border-bottom: 1px solid #e0e3f3; }.account-profile > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: linear-gradient(135deg, #9aa7ee, #7966ca); color: #fff; font-weight: 800; }.account-profile div { min-width: 0; display: grid; gap: 4px; }.account-profile strong { color: #30365e; font-size: 14px; }.account-profile small { overflow: hidden; color: #858aa5; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.account-nav { display: grid; gap: 4px; padding-top: 18px; }.account-nav button { min-height: 42px; padding: 0 12px; border-radius: 5px; font-size: 14px; }.account-nav button:hover, .account-nav button.active { background: #e2e6ff; color: #5364c2; font-weight: 700; }.account-logout { margin-top: auto; padding: 13px 12px 0; color: #9a6470; font-size: 13px; }
main.account-main { width: auto; margin: 0; padding: 42px 46px; }.account-main-head { display: flex; justify-content: space-between; gap: 24px; align-items: end; padding-bottom: 28px; border-bottom: 1px solid #eceef7; }.account-main-head h1 { margin: 0; color: #2d3359; font-size: 28px; }.account-main-head p:last-child { margin: 0; color: #858aa5; font-size: 13px; }
.account-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 28px 0; }.account-overview article { display: grid; gap: 12px; min-height: 150px; padding: 20px; border: 1px solid #e4e6f4; border-radius: 7px; background: linear-gradient(145deg, #fff, #f5f6ff); }.account-overview span { color: #8187a3; font-size: 13px; }.account-overview strong { color: #5868c8; font-size: 26px; }.account-overview button { justify-self: start; border: 0; background: transparent; color: #7a6dc9; padding: 0; font-size: 13px; }
.account-quick { display: flex; justify-content: space-between; gap: 20px; padding: 24px; border: 1px solid #e4e6f4; border-radius: 7px; background: #fcfcff; }.account-quick h2 { margin: 0 0 7px; font-size: 18px; color: #343a62; }.account-quick p { margin: 0; color: #858aa5; font-size: 13px; }.account-quick-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }.account-quick-actions button { border: 1px solid #dde1f5; border-radius: 5px; background: #fff; color: #5e69bd; padding: 9px 12px; font-size: 13px; }
.account-dialog { width: min(440px, calc(100% - 32px)); padding: 34px; border: 1px solid #e1e4f4; border-radius: 8px; background: #fff; box-shadow: 0 24px 64px rgba(70, 77, 145, .2); }.account-dialog::backdrop { background: rgba(35, 40, 75, .42); backdrop-filter: blur(4px); }.account-dialog .close-dialog { top: 18px; right: 18px; display: grid; width: 36px; min-height: 36px; height: 36px; place-items: center; padding: 0; border: 0; border-radius: 7px; background: #f2f4ff; color: #6877c8; font-size: 0; box-shadow: none; }.account-dialog .close-dialog::after { content: '×'; font-size: 27px; font-weight: 400; line-height: .8; transform: translateY(-1px); }.account-dialog .close-dialog:hover { background: #e4e8ff; color: #4e5fb9; transform: none; }.account-dialog .close-dialog:focus-visible { outline: 3px solid rgba(107, 125, 222, .24); outline-offset: 2px; }.account-dialog h2 { margin: 0 0 10px; color: #2d3359; font-size: 27px; }.account-dialog .login-form { gap: 16px; margin-top: 24px; }.account-dialog .login-form label { gap: 8px; color: #606789; font-size: 14px; font-weight: 700; }.account-dialog .login-form input { min-height: 46px; border-color: #dfe3f3; border-radius: 5px; padding: 11px 12px; }.account-dialog .login-form input:focus { border-color: #7887dc; box-shadow: 0 0 0 3px rgba(120, 135, 220, .14); outline: 0; }.account-dialog .primary-action { width: 100%; margin-top: 4px; }.account-dialog .account-status { min-height: 20px; margin-top: 14px; font-size: 13px; }
.sms-code-field, .captcha-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }.account-dialog .sms-code-field input, .account-dialog .captcha-field input { min-width: 0; }.sms-code-field .secondary-action { min-height: 46px; padding: 0 11px; white-space: nowrap; }.captcha-image-button { width: 132px; min-height: 46px; overflow: hidden; border: 1px solid #dce2f5; border-radius: 5px; background: #f8f9ff; padding: 0; }.captcha-image-button img { display: block; width: 100%; height: 44px; object-fit: cover; }.login-options { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; color: #7c83a2; font-size: 13px; }.login-options p { margin: 0; }.login-options .text-button { padding: 0; color: #5d6fd0; font-weight: 700; }.login-options > .text-button { white-space: nowrap; }
#passwordLoginField[hidden], #captchaField[hidden], #smsLoginField[hidden] { display: none !important; }
#loginForm[data-login-mode="password"] #smsLoginField, #loginForm[data-login-mode="sms"] #passwordLoginField, #loginForm[data-login-mode="sms"] #captchaField, #loginForm[data-login-mode="register"] #captchaField { display: none !important; }
.sms-slider-dialog { width: min(400px, calc(100% - 32px)); padding: 30px; border: 1px solid #e1e4f4; border-radius: 12px; background: #fff; box-shadow: 0 24px 64px rgba(70, 77, 145, .24); }.sms-slider-dialog::backdrop { background: rgba(35, 40, 75, .42); backdrop-filter: blur(4px); }.sms-slider-dialog .close-dialog { position: absolute; top: 16px; right: 16px; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 8px; background: #f2f4ff; color: #6877c8; font-size: 0; }.sms-slider-dialog .close-dialog::after { content: '×'; font-size: 28px; line-height: 1; }.sms-slider-dialog h2 { margin: 0; color: #2d3359; font-size: 24px; }.sms-slider-dialog > p:not(.eyebrow) { margin: 10px 0 20px; color: #7d84a2; font-size: 14px; line-height: 1.6; }.sms-slider-puzzle { position: relative; overflow: hidden; border-radius: 8px; background: #eef1ff; }.sms-slider-puzzle > img:first-child { display: block; width: 100%; height: 100%; }.sms-slider-puzzle > img:last-child { position: absolute; top: 35%; left: 0; height: auto; box-shadow: 0 2px 8px rgba(22, 29, 72, .35); }.sms-slider-track { position: relative; height: 46px; margin-top: 16px; overflow: hidden; border: 1px solid #dce1f4; border-radius: 7px; background: #f5f6ff; color: #7c83a2; line-height: 44px; text-align: center; user-select: none; }.sms-slider-track > span { position: absolute; inset: 0 auto 0 0; width: 0; background: #dce8ff; }.sms-slider-track b { position: relative; z-index: 1; font-size: 13px; }.sms-slider-track button { position: absolute; z-index: 2; top: 2px; left: 2px; width: 40px; height: 40px; border: 0; border-radius: 6px; background: linear-gradient(135deg, #7186df, #8f71d2); color: #fff; font-size: 28px; line-height: 1; box-shadow: 0 4px 10px rgba(92, 102, 192, .26); touch-action: none; transition: none !important; will-change: transform; }.sms-slider-track.passed > span { width: 100% !important; background: #d7f3e5; }.sms-slider-track.passed b { color: #31815a; }.sms-slider-refresh { display: block; margin: 12px auto 0; color: #5d6fd0; }
@media (max-width: 760px) { .account-page { padding: 0; }.account-page-shell { grid-template-columns: 1fr; border-radius: 0; border-width: 0; }.account-sidebar { border-right: 0; border-bottom: 1px solid #e1e4f4; }.account-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }.account-logout { margin-top: 14px; }.account-main { padding: 28px 20px !important; }.account-main-head, .account-quick { align-items: start; flex-direction: column; }.account-overview { grid-template-columns: 1fr; } }

/* Blue-violet gradient refinement for the desktop storefront. */
:root { --ink: #202642; --muted: #727a99; --line: #e4e7f5; --brand: #6678dc; --accent: #a277df; --paper: #fafbff; --wash: #f2f4ff; --deep: #313a75; --brand-gradient: linear-gradient(120deg, #5b8ee9 0%, #7377df 48%, #a46fd5 100%); }
body { background: #fafbff; }
button, a, input { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, transform .18s ease; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid rgba(107, 125, 222, .24); outline-offset: 2px; }
.site-header { background: rgba(255, 255, 255, .88); border-bottom-color: rgba(211, 216, 241, .85); box-shadow: 0 6px 24px rgba(73, 84, 154, .07); }
.header-inner { min-height: 76px; }.brand { font-size: 20px; }.brand img { box-shadow: 0 7px 18px rgba(92, 94, 187, .2); }
nav { gap: 30px; } nav a { position: relative; padding: 28px 0; color: #69718e; font-weight: 600; } #primaryNav a::after { display: none; } #primaryNav a:hover, #primaryNav a:focus-visible { background: #f0f2ff; color: #5868c8; outline: 0; }
.cart-button { border-color: #dfe3f6; border-radius: 7px; color: #3d466f; font-weight: 700; }.cart-button:hover { border-color: #b9c1ec; background: #f6f7ff; }.cart-button b { color: #6a74d7; }
.avatar-button { border-color: #d9def5; background: linear-gradient(120deg, #fff, #f6f5ff); box-shadow: 0 4px 12px rgba(83, 93, 171, .06); }.avatar-button:hover { border-color: #b9c3ef; box-shadow: 0 7px 18px rgba(83, 93, 171, .13); }
.hero { min-height: 520px; gap: 74px; border-bottom: 0; }.hero-copy { position: relative; z-index: 1; }.hero h1 { max-width: 590px; color: #252c56; font-size: 48px; line-height: 1.16; }.hero-text { max-width: 470px; color: #737c9c; font-size: 16px; }.eyebrow { color: #6979d8; letter-spacing: 1.7px; }
.primary-action { border-radius: 7px; background: var(--brand-gradient); box-shadow: 0 10px 22px rgba(96, 105, 205, .25); }.primary-action:hover { box-shadow: 0 14px 28px rgba(96, 105, 205, .32); transform: translateY(-1px); }
.secondary-action { border-color: #d7dcf3; border-radius: 7px; color: #5769c3; }.secondary-action:hover { border-color: #acb7ec; background: #f5f6ff; }
.hero-media { min-height: 332px; border: 1px solid rgba(210, 216, 246, .84); border-radius: 8px; background: var(--brand-gradient); box-shadow: 0 22px 48px rgba(88, 98, 185, .22); }.hero-media::before { position: absolute; inset: 1px; content: ''; border-radius: 7px; background: linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); }.hero-media img { position: relative; z-index: 1; width: min(76%, 380px); filter: hue-rotate(158deg) saturate(.82) brightness(1.08); mix-blend-mode: screen; opacity: .96; }.live-note { z-index: 2; left: 18px; bottom: 18px; border: 1px solid rgba(255, 255, 255, .43); border-radius: 5px; background: rgba(255, 255, 255, .9); box-shadow: 0 9px 20px rgba(55, 61, 132, .14); }.live-note span { background: #8179e4; }
.activity-band { border-bottom: 0; background: linear-gradient(180deg, #f3f5ff 0%, #fafbff 77%); }.activity-heading h2, .store-toolbar h2 { color: #2a315c; }.activity-filters button { border-color: #dfe3f4; border-radius: 6px; background: rgba(255, 255, 255, .86); }.activity-filters button:hover { border-color: #bfc7ef; color: #596bd0; }.activity-filters button.active { border-color: transparent; background: var(--brand-gradient); box-shadow: 0 6px 14px rgba(96, 105, 205, .2); }
.activity-grid { gap: 18px; }.activity-card, .product-card { overflow: hidden; border-color: #e4e7f4; border-radius: 8px; box-shadow: 0 7px 19px rgba(70, 81, 148, .06); }.activity-card { grid-template-rows: 154px 1fr; }.activity-card:hover, .product-card:hover { border-color: #ccd2ee; box-shadow: 0 14px 28px rgba(70, 81, 148, .12); transform: translateY(-2px); }.activity-card img { height: 154px; background: linear-gradient(135deg, #d9e7ff, #e9ddff); }.activity-card-bottom strong, .product-bottom strong, .detail-copy strong, .checkout-footer strong, .payment-amount { color: #745ed0; }
.store-toolbar { padding-top: 64px; }.search-form { overflow: hidden; border-color: #dce1f3; border-radius: 7px; background: #fff; box-shadow: 0 6px 16px rgba(70, 81, 148, .05); }.search-form:focus-within { border-color: #aeb9ec; box-shadow: 0 0 0 3px rgba(111, 128, 221, .11); }.search-form button { background: var(--brand-gradient); font-weight: 700; }.search-form button:hover { filter: brightness(1.04); }
.catalog-layout { gap: 36px; }.category-panel { border-top-color: #7d86dc; }.category-list button { border-radius: 6px; }.category-list button.active, .category-list button:hover { background: #e9edff; color: #5869cb; }.product-grid { gap: 20px; }.product-image { background: linear-gradient(135deg, #edf2ff, #f4efff); }.product-label { color: #6677d6; font-weight: 700; }.add-cart { border-color: #cbd2f1; border-radius: 6px; color: #596acd; font-weight: 700; }.add-cart:hover { border-color: transparent; background: var(--brand-gradient); color: #fff; box-shadow: 0 6px 13px rgba(96, 105, 205, .19); }
.live-band { margin: 0 auto; border-radius: 8px; background: linear-gradient(120deg, #32437e 0%, #5058a9 49%, #7355ad 100%); box-shadow: 0 18px 34px rgba(61, 70, 148, .18); }.live-band .eyebrow { color: #d9ddff; }.live-band p:not(.eyebrow) { color: #e4e6ff; }.live-band .secondary-action { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .1); }.live-band .secondary-action:hover { background: rgba(255, 255, 255, .2); }
.service-band { gap: 18px; }.service-band article { position: relative; overflow: hidden; min-height: 116px; padding: 22px; border: 1px solid #e1e5f4; border-radius: 8px; box-shadow: 0 6px 16px rgba(72, 82, 148, .05); }.service-band article::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; content: ''; background: var(--brand-gradient); }.service-band article:hover { border-color: #cbd2ee; box-shadow: 0 12px 23px rgba(72, 82, 148, .1); }.service-band article strong { color: #4f60bd; }
.drawer, .product-dialog, .orders-dialog, .coupon-dialog, .qrcode-dialog { border: 1px solid #e0e4f4; border-radius: 8px; box-shadow: 0 22px 55px rgba(53, 61, 125, .2); }.drawer::backdrop, .account-dialog::backdrop, .product-dialog::backdrop, .orders-dialog::backdrop { background: rgba(31, 37, 79, .46); backdrop-filter: blur(4px); }.text-button { color: #7b60c5; }
.account-page { background: linear-gradient(135deg, #f0f4ff 0%, #fafaff 48%, #f5efff 100%); }.account-page-shell { border-color: #dfe4f6; box-shadow: 0 24px 58px rgba(69, 78, 154, .14); }.account-sidebar { background: linear-gradient(180deg, #eef2ff 0%, #f9f8ff 100%); }.account-nav button:hover, .account-nav button.active { background: linear-gradient(100deg, #dfe8ff, #eee2ff); color: #5264c4; }.account-overview article { background: linear-gradient(140deg, #fff 0%, #f5f6ff 62%, #f6efff 100%); }.account-quick { background: linear-gradient(100deg, #fbfcff, #f7f4ff); }.account-quick-actions button:hover { border-color: transparent; background: var(--brand-gradient); color: #fff; }
@media (max-width: 760px) { .hero { min-height: auto; }.hero-media { min-height: 230px; }.live-band { border-radius: 0; }.activity-grid, .product-grid { gap: 12px; }.service-band article { min-height: 0; } }

.activity-record-row { align-items: center; }.activity-record-row > div:last-child { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }.activity-record-row .text-button { padding: 7px 0; }

.live-viewer-dialog { width: min(1240px, calc(100% - 32px)); max-height: calc(100vh - 32px); padding: 20px; overflow: hidden; border: 1px solid #dfe4f6; border-radius: 8px; background: #fff; box-shadow: 0 28px 72px rgba(45, 53, 123, .28); }.live-viewer-dialog::backdrop { background: rgba(25, 30, 65, .56); backdrop-filter: blur(5px); }.live-viewer-dialog .drawer-head { align-items: flex-start; min-height: 44px; margin-bottom: 16px; }.live-viewer-dialog .drawer-head .eyebrow { margin-bottom: 5px; }.live-viewer-dialog .drawer-head h2 { color: #2e365f; font-size: 21px; }
.live-viewer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 16px; align-items: stretch; }.live-stage { position: relative; display: grid; aspect-ratio: 16 / 9; min-height: 0; place-items: center; overflow: hidden; border-radius: 6px; background: #11162a; }.live-stage video { z-index: 1; width: 100%; height: 100%; object-fit: contain; background: #11162a; }.live-viewer-empty { z-index: 2; max-width: 70%; color: #e7e9ff; font-size: 15px; line-height: 1.7; text-align: center; }.live-viewer-status { position: absolute; z-index: 3; bottom: 12px; left: 12px; max-width: calc(100% - 24px); padding: 7px 9px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 4px; background: rgba(13, 18, 40, .72); color: #eef0ff; font-size: 12px; }
.live-side-panel { display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; max-height: min(58vw, 620px); border: 1px solid #e2e5f4; border-radius: 6px; background: #fff; }.live-room-meta { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 14px; border-bottom: 1px solid #e7e9f5; }.live-anchor-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--brand-gradient); color: #fff; font-size: 15px; font-weight: 800; }.live-room-meta div { display: grid; min-width: 0; gap: 4px; }.live-room-meta strong { overflow: hidden; color: #323a66; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.live-room-meta span:not(.live-anchor-avatar) { color: #838aa7; font-size: 12px; }.live-room-meta button { min-height: 34px; padding: 0 10px; font-size: 12px; }
.live-stream-notice { position: absolute; right: 14px; bottom: 14px; max-width: min(420px, calc(100% - 28px)); padding: 9px 12px; border: 1px solid rgba(255, 215, 137, .68); border-radius: 5px; background: rgba(44, 39, 77, .88); color: #fff4d8; font-size: 13px; line-height: 1.5; box-shadow: 0 8px 22px rgba(22, 21, 49, .2); }
.live-panel-tabs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-bottom: 1px solid #e7e9f5; }.live-panel-tabs button { min-height: 42px; border: 0; border-bottom: 2px solid transparent; background: #fff; color: #7c83a1; font-size: 13px; font-weight: 700; }.live-panel-tabs button.active { border-bottom-color: #7181dc; color: #5969c5; }.live-side-section { min-height: 0; padding: 14px; }.live-side-section[hidden] { display: none; }.live-room-products { display: grid; gap: 8px; height: 100%; overflow: auto; }.live-product-row { display: flex; align-items: center; justify-content: space-between; min-width: 0; gap: 10px; border: 1px solid #e3e6f4; border-radius: 5px; background: #fafbff; color: #4a578c; padding: 10px; text-align: left; }.live-product-row:hover { border-color: #cfd6f1; background: #f2f4ff; }.live-product-row span { overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.live-product-row strong { flex: 0 0 auto; color: #725bd0; font-size: 13px; }
.live-comments { display: grid; grid-template-rows: minmax(112px, 1fr) auto; }.live-danmaku-list { min-height: 112px; overflow: auto; color: #69718e; font-size: 12px; line-height: 1.6; }.live-danmaku-list p { margin: 0 0 9px; }.live-danmaku-form { display: flex; gap: 7px; margin-top: 12px; }.live-danmaku-form input { min-width: 0; flex: 1; border: 1px solid #dbe0f2; border-radius: 5px; padding: 8px 9px; color: #343c65; }.live-danmaku-form button { min-height: 34px; padding: 0 10px; font-size: 12px; }
@media (max-width: 900px) { .live-viewer-dialog { overflow: auto; }.live-viewer-layout { grid-template-columns: 1fr; }.live-side-panel { max-height: 440px; }.live-stage { width: 100%; } }
@media (max-width: 760px) { .live-viewer-dialog { width: 100%; min-height: 100%; max-height: none; margin: 0; border-width: 0; border-radius: 0; padding: 20px; }.live-stage { aspect-ratio: 16 / 10; }.live-side-panel { min-height: 390px; }.live-viewer-dialog .drawer-head h2 { font-size: 19px; } }

.live-page { min-height: calc(100vh - 76px); padding: 42px 20px 68px; background: linear-gradient(150deg, #f2f5ff 0%, #fbfbff 55%, #f5efff 100%); }.live-page-inner, .site-footer-inner { width: min(1180px, 100%); margin: 0 auto; }.live-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.live-page-heading h1 { margin: 0; color: #292f58; font-size: 30px; }.live-page-heading p:not(.eyebrow) { margin: 9px 0 0; color: #7b83a1; font-size: 14px; }.live-page-actions { display: flex; align-items: center; gap: 16px; }.live-page-actions .text-button { padding: 9px 0; color: #6777ca; font-weight: 700; }.live-page .live-viewer-layout { align-items: start; }.live-page .live-viewer-layout[hidden], .live-recommendation-empty[hidden] { display: none; }.live-page .live-side-panel { max-height: none; min-height: 100%; height: 100%; }.live-recommendation-empty { display: grid; min-height: 260px; place-content: center; gap: 9px; padding: 30px; border: 1px dashed #cbd3f1; border-radius: 12px; background: rgba(255, 255, 255, .78); color: #7882a5; text-align: center; }.live-recommendation-empty strong { color: #4f5fb4; font-size: 21px; }.live-recommendation-empty p { margin: 0; font-size: 14px; }.live-room-directory { margin-top: 42px; padding-top: 28px; border-top: 1px solid #dfe4f6; }.live-directory-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }.live-directory-heading h2 { margin: 0; color: #30365f; font-size: 22px; }.live-directory-heading p:not(.eyebrow) { margin: 0; color: #7e86a5; font-size: 13px; }.live-directory-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }.live-directory-row { display: grid; min-width: 0; overflow: hidden; padding: 0; border: 1px solid #e0e4f5; border-radius: 12px; background: #fff; box-shadow: 0 10px 24px rgba(72, 84, 159, .08); color: inherit; text-align: left; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }.live-directory-row:hover, .live-directory-row:focus-visible, .live-directory-row.active { border-color: #aab6ea; box-shadow: 0 16px 30px rgba(82, 94, 183, .16); outline: 0; transform: translateY(-2px); }.live-directory-cover-wrap { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #eceffd; }.live-directory-cover { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .28s ease; }.live-directory-row:hover .live-directory-cover { transform: scale(1.035); }.live-directory-status { position: absolute; right: 12px; bottom: 10px; padding: 5px 9px; border-radius: 999px; background: rgba(26, 36, 69, .75); color: #fff; font-size: 12px; font-weight: 700; }.live-directory-copy { display: grid; min-width: 0; gap: 13px; padding: 15px 16px 16px; }.live-directory-copy > strong { overflow: hidden; color: #363d69; font-size: 16px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }.live-directory-meta { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; color: #8089a7; font-size: 13px; }.live-directory-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #eef1ff; }.live-directory-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.live-directory-viewers { color: #6676ce; font-size: 12px; font-weight: 700; }
@media (max-width: 820px) { .live-directory-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .live-page { padding: 28px 14px 46px; }.live-page-heading { align-items: start; flex-direction: column; gap: 14px; }.live-page-heading h1 { font-size: 24px; }.live-directory-heading { align-items: start; flex-direction: column; }.live-directory-list { grid-template-columns: 1fr; }.live-recommendation-empty { min-height: 200px; padding: 24px 18px; } }
.site-footer { background: #262e5e; color: #dbe0ff; }.site-footer-inner { display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 44px; padding: 48px 0 42px; }.site-footer .brand { color: #fff; }.site-footer .brand img { box-shadow: none; }.footer-brand p { max-width: 260px; margin: 16px 0 0; color: #bfc6ed; font-size: 13px; line-height: 1.7; }.site-footer h2 { margin: 5px 0 15px; color: #fff; font-size: 14px; }.site-footer section { display: grid; align-content: start; gap: 10px; }.site-footer a, .site-footer p, .footer-link { margin: 0; border: 0; background: transparent; color: #c3caed; font-size: 13px; line-height: 1.5; text-align: left; text-decoration: none; }.site-footer a:hover, .footer-link:hover { color: #fff; }.site-footer-bottom { border-top: 1px solid rgba(214, 221, 255, .16); padding: 17px 20px; color: #b6c0e8; font-size: 12px; text-align: center; }
@media (max-width: 900px) { .live-page { padding-right: 20px; padding-left: 20px; }.live-page-heading { align-items: start; flex-direction: column; }.live-page .live-viewer-layout { grid-template-columns: 1fr; }.live-page .live-side-panel { min-height: 410px; }.live-directory-list { grid-template-columns: 1fr; }.site-footer-inner { grid-template-columns: repeat(2, 1fr); gap: 30px; } }.@media (max-width: 760px) { .live-page { padding: 28px 14px 46px; }.live-page-heading h1 { font-size: 24px; }.live-page-actions { width: 100%; justify-content: space-between; }.live-directory-heading { align-items: start; flex-direction: column; }.site-footer-inner { grid-template-columns: 1fr; padding: 36px 20px; } }

/* Keep the search command stable instead of allowing the submit button to collapse. */
.search-form { display: flex; align-items: center; width: min(100%, 460px); min-width: 360px; min-height: 50px; padding: 4px; border: 1px solid #d9dff5; border-radius: 8px; background: rgba(255, 255, 255, .94); box-shadow: 0 8px 22px rgba(76, 89, 164, .08); }.search-form input { flex: 1 1 0; width: auto; min-width: 0; height: 40px; padding: 0 13px; border: 0; background: transparent; color: #343c68; font-size: 14px; }.search-form input::placeholder { color: #9aa1bb; }.search-form button { flex: 0 0 94px; min-width: 94px; min-height: 40px; padding: 0; border: 0; border-radius: 5px; background: var(--brand-gradient); color: #fff; font-size: 14px; font-weight: 800; line-height: 1; white-space: nowrap; box-shadow: 0 6px 14px rgba(98, 108, 205, .22); }.search-form:focus-within { border-color: #aeb9ec; box-shadow: 0 0 0 3px rgba(111, 128, 221, .12), 0 10px 24px rgba(76, 89, 164, .1); }.search-form button:hover { filter: brightness(1.05); box-shadow: 0 8px 17px rgba(98, 108, 205, .28); transform: translateY(-1px); }.search-form button:active { transform: translateY(0); }
@media (max-width: 760px) { .search-form { width: 100%; min-width: 0; }.search-form button { flex-basis: 84px; min-width: 84px; } }

.article-page { min-height: calc(100vh - 76px); padding: 42px 20px 68px; background: linear-gradient(150deg, #f4f6ff 0%, #fff 52%, #f7f2ff 100%); }.article-page-inner { width: min(980px, 100%); margin: 0 auto; }.article-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1px solid #e2e5f4; }.article-page-heading h1 { margin: 0; color: #2a315c; font-size: 30px; }.article-page-heading p:not(.eyebrow) { margin: 9px 0 0; color: #7c84a2; font-size: 14px; }.article-page-heading .text-button, .article-detail-page > .text-button { padding: 9px 0; color: #6172cd; font-weight: 700; }.article-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 22px 0; }.article-category-tabs button { min-height: 34px; border: 1px solid #dce1f4; border-radius: 5px; background: #fff; color: #77809e; padding: 0 12px; font-size: 13px; }.article-category-tabs button.active, .article-category-tabs button:hover { border-color: transparent; background: var(--brand-gradient); color: #fff; }.article-list { display: grid; gap: 12px; }.article-list-row { display: grid; grid-template-columns: minmax(0, 1fr) 176px; align-items: center; gap: 22px; min-height: 144px; padding: 18px; border: 1px solid #e1e4f3; border-radius: 7px; background: rgba(255, 255, 255, .9); cursor: pointer; }.article-list-row:hover { border-color: #c7cfef; box-shadow: 0 10px 24px rgba(73, 84, 155, .09); }.article-list-row > div { min-width: 0; }.article-list-row h2 { overflow: hidden; margin: 5px 0 8px; color: #323962; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }.article-row-category { margin: 0; color: #6d7bd4; font-size: 12px; font-weight: 800; }.article-row-summary { display: -webkit-box; overflow: hidden; margin: 0; color: #7d85a1; font-size: 13px; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }.article-row-meta, .article-detail-meta { margin: 11px 0 0; color: #a0a6bc; font-size: 12px; }.article-list-row img { width: 176px; height: 106px; border-radius: 5px; object-fit: cover; background: #eef1ff; }.article-detail-page { max-width: 800px; margin: 0 auto; padding: 8px 0 24px; }.article-detail-page h2 { margin: 18px 0 0; color: #2b315a; font-size: 30px; line-height: 1.35; }.article-detail-image { width: 100%; max-height: 410px; margin: 28px 0 0; border-radius: 7px; object-fit: cover; background: #eef1ff; }.article-rich-content { margin-top: 28px; color: #505975; font-size: 15px; line-height: 1.85; word-break: break-word; }.article-rich-content > :first-child { margin-top: 0; }.article-rich-content img { display: block; max-width: 100%; height: auto; margin: 18px auto; }.article-rich-content a { color: #5d70cf; }.article-rich-content h1, .article-rich-content h2, .article-rich-content h3 { color: #313860; }.article-rich-content blockquote { margin: 18px 0; padding: 12px 16px; border-left: 3px solid #a2ace8; background: #f4f6ff; color: #68718e; }
@media (max-width: 760px) { .article-page { padding: 28px 14px 46px; }.article-page-heading { align-items: start; flex-direction: column; }.article-page-heading h1, .article-detail-page h2 { font-size: 24px; }.article-list-row { grid-template-columns: minmax(0, 1fr) 96px; gap: 12px; min-height: 112px; padding: 13px; }.article-list-row img { width: 96px; height: 78px; }.article-row-summary { -webkit-line-clamp: 2; } }

.lottery-page { min-height: calc(100vh - 76px); padding: 42px 20px 68px; background: linear-gradient(145deg, #f2f6ff 0%, #fbfbff 55%, #f5efff 100%); }.lottery-page-inner { width: min(1050px, 100%); margin: 0 auto; }.lottery-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.lottery-page-heading h1 { margin: 0; color: #2b315b; font-size: 30px; }.lottery-page-heading p:not(.eyebrow) { margin: 9px 0 0; color: #7d85a3; font-size: 14px; }.lottery-page-heading .text-button { padding: 9px 0; color: #6374cf; font-weight: 700; }.lottery-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start; }.lottery-board-section { padding: 22px; border: 1px solid #dfe4f5; border-radius: 8px; background: #fff; box-shadow: 0 16px 36px rgba(73, 83, 156, .1); }.lottery-prize-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }.lottery-prize, .lottery-draw-button { display: grid; min-width: 0; aspect-ratio: 1; place-content: center; gap: 7px; padding: 10px; border: 1px solid #e2e5f5; border-radius: 6px; background: linear-gradient(145deg, #fbfcff, #f2f4ff); text-align: center; }.lottery-prize strong { overflow: hidden; color: #46518b; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }.lottery-prize span { color: #9299b3; font-size: 11px; }.lottery-prize.won { border-color: #8b82de; background: linear-gradient(135deg, #e4e9ff, #f0e4ff); box-shadow: 0 0 0 3px rgba(128, 118, 215, .16); }.lottery-draw-button { border: 0; background: var(--brand-gradient); color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 12px 24px rgba(99, 108, 204, .25); }.lottery-draw-button:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-1px); }.lottery-draw-button:disabled { cursor: not-allowed; background: #aeb6d8; box-shadow: none; }.lottery-status { min-height: 20px; margin: 16px 0 0; color: #767f9d; font-size: 13px; text-align: center; }.lottery-side-panel { display: grid; gap: 14px; }.lottery-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid #dfe4f5; border-radius: 7px; background: #dfe4f5; }.lottery-stats div { display: grid; gap: 7px; padding: 14px 9px; background: #fff; text-align: center; }.lottery-stats span { color: #8990aa; font-size: 12px; }.lottery-stats strong { overflow: hidden; color: #5a68c4; font-size: 18px; text-overflow: ellipsis; }.lottery-rule, .lottery-feed { padding: 18px; border: 1px solid #e0e4f4; border-radius: 7px; background: rgba(255, 255, 255, .9); }.lottery-rule h2, .lottery-feed h2 { margin: 0 0 12px; color: #39416c; font-size: 15px; }.lottery-rule p { margin: 0; color: #737c99; font-size: 13px; line-height: 1.75; white-space: pre-line; }.lottery-records { display: grid; gap: 9px; color: #737c99; font-size: 12px; line-height: 1.5; }.lottery-records p { margin: 0; padding-bottom: 9px; border-bottom: 1px solid #eef0f8; }.lottery-records p:last-child { padding-bottom: 0; border-bottom: 0; }.lottery-result { min-height: 86px; display: grid; place-items: center; color: #5263c2; font-size: 22px; font-weight: 800; text-align: center; }
@media (max-width: 800px) { .lottery-page { padding: 28px 14px 46px; }.lottery-page-heading { align-items: start; flex-direction: column; }.lottery-page-heading h1 { font-size: 24px; }.lottery-layout { grid-template-columns: 1fr; }.lottery-side-panel { grid-template-columns: 1fr; }.lottery-prize-grid { gap: 7px; }.lottery-board-section { padding: 14px; } }

.activity-heading-actions { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 12px; }.newcomer-entry { min-height: 34px; border: 1px solid #b6c0ec; border-radius: 5px; background: #f7f8ff; color: #5b6bc6; padding: 0 12px; font-size: 13px; font-weight: 800; }.newcomer-entry:hover { border-color: transparent; background: var(--brand-gradient); color: #fff; }.newcomer-page { min-height: calc(100vh - 76px); padding: 42px 20px 68px; background: linear-gradient(150deg, #f3f6ff 0%, #fff 53%, #faf4ff 100%); }.newcomer-page-inner { width: min(1060px, 100%); margin: 0 auto; }.newcomer-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.newcomer-page-heading h1 { margin: 0; color: #2d3562; font-size: 30px; }.newcomer-page-heading p:not(.eyebrow) { margin: 9px 0 0; color: #7983a3; font-size: 14px; }.newcomer-page-heading .text-button { padding: 9px 0; color: #6374cf; font-weight: 700; }.newcomer-hero { position: relative; display: grid; min-height: 190px; overflow: hidden; border: 1px solid #dce2f6; border-radius: 8px; background: linear-gradient(115deg, #526bd5, #8b68dc); box-shadow: 0 18px 34px rgba(82, 95, 187, .16); }.newcomer-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .38; }.newcomer-hero-copy { z-index: 1; display: grid; align-content: end; gap: 9px; padding: 30px; color: #fff; }.newcomer-hero-copy span { font-size: 12px; font-weight: 800; letter-spacing: 1px; }.newcomer-hero-copy strong { max-width: 680px; font-size: 24px; line-height: 1.35; }.newcomer-rules { margin-top: 18px; border: 1px solid #e0e4f5; border-radius: 7px; background: rgba(255, 255, 255, .9); color: #65708f; }.newcomer-rules summary { cursor: pointer; padding: 15px 18px; color: #3d4779; font-size: 14px; font-weight: 800; }.newcomer-rules p { margin: 0; padding: 0 18px 17px; color: #737d9b; font-size: 13px; line-height: 1.75; white-space: pre-line; }.newcomer-status { min-height: 20px; margin: 22px 0 14px; color: #7b84a1; font-size: 13px; }.newcomer-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.newcomer-product-card { overflow: hidden; border: 1px solid #e0e4f5; border-radius: 7px; background: rgba(255, 255, 255, .94); box-shadow: 0 12px 25px rgba(76, 88, 161, .06); }.newcomer-product-card > img { width: 100%; height: 182px; display: block; object-fit: cover; background: #eef1ff; }.newcomer-product-card > div { display: grid; gap: 10px; padding: 15px; }.newcomer-product-card p { margin: 0; color: #6c75cb; font-size: 12px; font-weight: 800; }.newcomer-product-card h2 { min-height: 44px; overflow: hidden; margin: 0; color: #333b68; font-size: 16px; line-height: 1.4; }.newcomer-price { display: flex; align-items: baseline; gap: 8px; }.newcomer-price strong { color: #5a6ed1; font-size: 20px; }.newcomer-price del { color: #a1a8bd; font-size: 12px; }.newcomer-product-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.newcomer-product-actions .primary-action, .newcomer-product-actions .secondary-action { min-height: 38px; padding: 0 8px; font-size: 13px; }
@media (max-width: 800px) { .activity-heading-actions { width: 100%; justify-content: start; }.newcomer-page { padding: 28px 14px 46px; }.newcomer-page-heading { align-items: start; flex-direction: column; }.newcomer-page-heading h1 { font-size: 24px; }.newcomer-hero { min-height: 160px; }.newcomer-hero-copy { padding: 22px; }.newcomer-hero-copy strong { font-size: 20px; }.newcomer-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }.newcomer-product-card > img { height: 132px; }.newcomer-product-card > div { gap: 8px; padding: 11px; }.newcomer-product-actions { grid-template-columns: 1fr; } }

.lottery-record-row > div:last-child { justify-self: end; }.lottery-record-row .primary-action { min-height: 34px; padding: 0 11px; font-size: 13px; }.lottery-record-status { color: #7a84a3; font-size: 13px; white-space: nowrap; }.lottery-redeem-content { display: grid; gap: 16px; margin-top: 18px; }.lottery-redeem-product { display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: center; gap: 13px; padding: 13px; border: 1px solid #e0e4f5; border-radius: 7px; background: #fafbff; }.lottery-redeem-product img { width: 74px; height: 74px; border-radius: 5px; object-fit: cover; background: #eef1ff; }.lottery-redeem-product div { display: grid; min-width: 0; gap: 6px; }.lottery-redeem-product strong { overflow: hidden; color: #39416e; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.lottery-redeem-product span, .lottery-redeem-delivery p { margin: 0; color: #7f88a5; font-size: 13px; line-height: 1.6; }.lottery-redeem-field { display: grid; gap: 7px; color: #5c6688; font-size: 13px; font-weight: 700; }.lottery-redeem-field input, .lottery-redeem-field select { width: 100%; min-height: 40px; border: 1px solid #dce2f5; border-radius: 5px; background: #fff; color: #3d466f; padding: 0 10px; }.lottery-redeem-delivery { display: grid; gap: 12px; padding: 14px; border: 1px solid #e1e5f5; border-radius: 7px; background: rgba(248, 249, 255, .78); }.lottery-redeem-actions { display: flex; justify-content: end; gap: 10px; margin-top: 20px; }.lottery-redeem-actions .primary-action, .lottery-redeem-actions .secondary-action { min-height: 40px; padding: 0 14px; }
@media (max-width: 700px) { .lottery-record-row { grid-template-columns: minmax(0, 1fr); }.lottery-record-row > div:last-child { justify-self: start; }.lottery-redeem-actions { align-items: stretch; flex-direction: column; } }

.gift-page { min-height: calc(100vh - 76px); padding: 42px 20px 68px; background: linear-gradient(150deg, #f3f6ff 0%, #fff 50%, #faf3ff 100%); }.gift-page-inner { width: min(860px, 100%); margin: 0 auto; }.gift-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.gift-page-heading h1 { margin: 0; color: #2e3662; font-size: 30px; }.gift-page-heading p:not(.eyebrow) { margin: 9px 0 0; color: #7d86a4; font-size: 14px; }.gift-page-heading .text-button { padding: 9px 0; color: #6374cf; font-weight: 700; }.gift-package-card { overflow: hidden; border: 1px solid #dde3f5; border-radius: 8px; background: #fff; box-shadow: 0 18px 38px rgba(74, 86, 161, .12); }.gift-package-status { min-height: 260px; display: grid; place-items: center; color: #7882a1; font-size: 14px; }.gift-package-hero { position: relative; min-height: 234px; display: grid; align-content: end; gap: 8px; overflow: hidden; padding: 30px; background: linear-gradient(120deg, #536cd7, #8b68d9); color: #fff; }.gift-package-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .35; }.gift-package-hero span, .gift-package-hero h2 { z-index: 1; margin: 0; }.gift-package-hero span { font-size: 12px; font-weight: 800; letter-spacing: 1px; }.gift-package-hero h2 { font-size: 31px; }.gift-package-body { display: grid; gap: 13px; padding: 28px 30px 30px; }.gift-package-body strong { color: #5b6ed1; font-size: 28px; }.gift-package-body p { margin: 0; color: #727d9c; font-size: 14px; line-height: 1.7; }.gift-package-body .gift-package-time { color: #9ba3ba; font-size: 12px; }.gift-package-body .primary-action { width: fit-content; margin-top: 6px; }.gift-checkout-content, .gift-payment-content { display: grid; gap: 12px; margin-top: 20px; }.gift-checkout-content strong, .gift-payment-content strong { color: #37406e; font-size: 18px; }.gift-checkout-content p, .gift-payment-content p { margin: 0; color: #77819e; font-size: 14px; line-height: 1.7; }.gift-payment-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }.gift-payment-content > a { width: fit-content; margin-top: 4px; }
@media (max-width: 700px) { .gift-page { padding: 28px 14px 46px; }.gift-page-heading { align-items: start; flex-direction: column; }.gift-page-heading h1 { font-size: 24px; }.gift-package-hero { min-height: 184px; padding: 22px; }.gift-package-hero h2 { font-size: 25px; }.gift-package-body { padding: 21px; }.gift-package-body .primary-action { width: 100%; }.gift-payment-actions { align-items: stretch; flex-direction: column; } }

.task-page { min-height: calc(100vh - 76px); padding: 42px 20px 68px; background: linear-gradient(150deg, #f3f6ff 0%, #fff 55%, #f8f2ff 100%); }.task-page-inner { width: min(980px, 100%); margin: 0 auto; }.task-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }.task-page-heading h1 { margin: 0; color: #2e3662; font-size: 30px; }.task-page-heading p:not(.eyebrow) { margin: 9px 0 0; color: #7c86a5; font-size: 14px; }.task-page-heading .text-button { padding: 9px 0; color: #6374cf; font-weight: 700; }.task-banner { min-height: 168px; display: grid; align-content: end; gap: 9px; overflow: hidden; padding: 26px 30px; border: 1px solid #dce2f5; border-radius: 8px; background: linear-gradient(110deg, #4b62c8, #8566d0); background-position: center; background-size: cover; box-shadow: 0 16px 34px rgba(75, 89, 173, .15); color: #fff; }.task-banner strong { font-size: 25px; }.task-banner span { font-size: 13px; opacity: .9; }.task-section { margin-top: 32px; }.task-section h2 { margin: 0 0 13px; color: #39416f; font-size: 18px; }.task-list { display: grid; gap: 11px; }.task-row { display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid #e0e4f5; border-radius: 7px; background: rgba(255, 255, 255, .92); }.task-row > img { width: 54px; height: 54px; border-radius: 6px; object-fit: cover; background: #edf0ff; }.task-row > div { display: grid; min-width: 0; gap: 4px; }.task-row strong { overflow: hidden; color: #3b4472; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }.task-row span { overflow: hidden; color: #7e87a3; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.task-row em { color: #6474ce; font-size: 12px; font-style: normal; font-weight: 800; }.task-row .primary-action, .task-row .secondary-action { min-height: 36px; min-width: 74px; padding: 0 10px; font-size: 13px; }.task-row .secondary-action:disabled { border-color: #e0e4f1; background: #f7f8fc; color: #9aa2b8; }
@media (max-width: 700px) { .task-page { padding: 28px 14px 46px; }.task-page-heading { align-items: start; flex-direction: column; }.task-page-heading h1 { font-size: 24px; }.task-banner { min-height: 142px; padding: 21px; }.task-banner strong { font-size: 21px; }.task-row { grid-template-columns: 46px minmax(0, 1fr); gap: 11px; }.task-row > img { width: 46px; height: 46px; }.task-row .primary-action, .task-row .secondary-action { grid-column: 2; justify-self: start; } }

.coupon-center-dialog { width: min(620px, calc(100% - 32px)); }.coupon-tabs { display: flex; gap: 7px; overflow-x: auto; margin-top: 22px; padding-bottom: 2px; }.coupon-tabs button { min-height: 34px; flex: 0 0 auto; border: 1px solid #dce2f5; border-radius: 5px; background: #fff; color: #77809e; padding: 0 12px; font-size: 13px; }.coupon-tabs button.active, .coupon-tabs button:hover { border-color: transparent; background: var(--brand-gradient); color: #fff; font-weight: 800; }.coupon-summary { margin: 15px 0 -4px; color: #7b84a2; font-size: 13px; }.coupon-empty { margin: 0; padding: 24px 0; color: #818aa6; line-height: 2.4; text-align: center; }.coupon-empty .secondary-action { min-height: 34px; margin-left: 8px; padding: 0 11px; font-size: 13px; }.coupon-row { min-height: 74px; }.coupon-row > div { min-width: 0; }.coupon-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.coupon-row .secondary-action:disabled { border-color: #e2e5f1; background: #f7f8fc; color: #a1a8ba; }
@media (max-width: 600px) { .coupon-center-dialog { padding: 24px 18px; }.coupon-tabs { margin-top: 18px; }.coupon-row { align-items: start; flex-direction: column; }.coupon-row .secondary-action { align-self: stretch; } }

.refund-detail-dialog { width: min(620px, calc(100% - 32px)); }.refund-detail-content { display: grid; gap: 14px; margin-top: 20px; }.refund-detail-state { display: grid; gap: 5px; padding: 15px; border: 1px solid #dfe4f6; border-radius: 7px; background: linear-gradient(115deg, #f0f3ff, #faf6ff); }.refund-detail-state strong { color: #4e61bf; font-size: 17px; }.refund-detail-state span { color: #7d86a3; font-size: 13px; }.refund-detail-product { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: center; gap: 13px; padding: 13px; border: 1px solid #e2e5f3; border-radius: 7px; }.refund-detail-product img { width: 68px; height: 68px; border-radius: 5px; object-fit: cover; background: #eef1ff; }.refund-detail-product div { display: grid; min-width: 0; gap: 5px; }.refund-detail-product strong, .refund-detail-info strong { overflow: hidden; color: #39416d; text-overflow: ellipsis; white-space: nowrap; }.refund-detail-product span { overflow: hidden; color: #7b84a0; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }.refund-detail-info { display: grid; gap: 9px; padding: 2px 0; }.refund-detail-info div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 12px; color: #7c85a1; font-size: 13px; }.refund-detail-info strong { color: #505a79; font-weight: 600; }.refund-delivery-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 15px; border: 1px solid #dfe4f4; border-radius: 7px; background: #fafbff; }.refund-delivery-form label { display: grid; gap: 6px; color: #68718f; font-size: 12px; font-weight: 700; }.refund-delivery-form select, .refund-delivery-form input { min-width: 0; min-height: 38px; border: 1px solid #dce2f5; border-radius: 5px; background: #fff; color: #404a70; padding: 0 10px; }.refund-delivery-form .primary-action, .refund-detail-actions .secondary-action { min-height: 38px; padding: 0 13px; font-size: 13px; }.refund-detail-actions { display: flex; justify-content: end; gap: 10px; margin-top: 18px; }.refund-row .secondary-action { min-height: 34px; flex: 0 0 auto; padding: 0 11px; font-size: 13px; }
@media (max-width: 620px) { .refund-detail-dialog { padding: 24px 18px; }.refund-delivery-form { grid-template-columns: 1fr; }.refund-delivery-form .primary-action { width: 100%; }.refund-row { align-items: start; flex-direction: column; }.refund-row .secondary-action { align-self: stretch; } }

.user-comments-dialog { width: min(660px, calc(100% - 32px)); }.user-comments-list { display: grid; gap: 13px; margin-top: 22px; }.user-comment-card { display: grid; gap: 11px; padding: 16px; border: 1px solid #e0e4f4; border-radius: 7px; background: linear-gradient(145deg, #fff, #fafaff); }.user-comment-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }.user-comment-card strong { color: #5768c3; font-size: 14px; }.user-comment-card span { color: #969db5; font-size: 12px; }.user-comment-card p { margin: 0; color: #515a77; font-size: 14px; line-height: 1.7; white-space: pre-wrap; }.user-comment-images { display: flex; flex-wrap: wrap; gap: 8px; }.user-comment-images img { width: 76px; height: 76px; border-radius: 5px; object-fit: cover; background: #eef1ff; }.user-comment-actions { display: flex; justify-content: end; gap: 12px; }.user-comment-actions .secondary-action { min-height: 33px; padding: 0 11px; font-size: 13px; }.user-comment-actions .text-button { color: #8a668d; font-size: 13px; }.user-comment-actions .text-button:disabled { color: #a9afc2; cursor: not-allowed; }
@media (max-width: 600px) { .user-comments-dialog { padding: 24px 18px; }.user-comment-images img { width: 64px; height: 64px; } }

.order-workbench-dialog { width: min(720px, calc(100% - 32px)); }.order-filter-tabs { display: flex; gap: 7px; overflow-x: auto; margin-top: 22px; padding-bottom: 2px; }.order-filter-tabs button { min-height: 34px; flex: 0 0 auto; border: 1px solid #dce2f5; border-radius: 5px; background: #fff; color: #77809e; padding: 0 11px; font-size: 13px; }.order-filter-tabs button.active, .order-filter-tabs button:hover { border-color: transparent; background: var(--brand-gradient); color: #fff; font-weight: 800; }.order-search-form { display: flex; gap: 8px; margin-top: 15px; }.order-search-form input { min-width: 0; flex: 1; min-height: 38px; border: 1px solid #dce2f5; border-radius: 5px; background: #fff; color: #3e486d; padding: 0 11px; }.order-search-form input:focus { border-color: #aeb9ea; outline: 0; box-shadow: 0 0 0 3px rgba(110, 125, 216, .12); }.order-search-form .secondary-action, .order-list-row .secondary-action { min-height: 38px; flex: 0 0 auto; padding: 0 13px; font-size: 13px; }.order-list-row { align-items: center; }.order-list-row > div { display: grid; min-width: 0; gap: 5px; }.order-list-row span { overflow: hidden; color: #7c85a1; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .order-workbench-dialog { padding: 24px 18px; }.order-filter-tabs { margin-top: 18px; }.order-list-row { align-items: start; flex-direction: column; }.order-list-row .secondary-action { align-self: stretch; } }

.store-page { min-height: calc(100vh - 76px); padding: 42px 20px 68px; background: linear-gradient(150deg, #f3f6ff 0%, #fff 52%, #f8f2ff 100%); }.store-page-inner { width: min(1040px, 100%); margin: 0 auto; }.store-page-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid #e1e5f4; }.store-page-heading h1 { margin: 0; color: #2e3662; font-size: 30px; }.store-page-heading p:not(.eyebrow) { margin: 9px 0 0; color: #7d86a4; font-size: 14px; }.store-page-heading .text-button { padding: 9px 0; color: #6374cf; font-weight: 700; }.store-directory-status { min-height: 90px; display: grid; place-items: center; color: #7d86a4; font-size: 14px; }.store-directory-status[hidden] { display: none; }.store-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }.store-location-card { display: grid; grid-template-columns: 68px minmax(0, 1fr); gap: 14px; padding: 18px; border: 1px solid #e0e4f5; border-radius: 8px; background: rgba(255, 255, 255, .94); box-shadow: 0 10px 24px rgba(72, 84, 159, .07); }.store-location-card > img { width: 68px; height: 68px; border-radius: 7px; object-fit: cover; background: #edf0ff; }.store-location-card > div:nth-child(2) { display: grid; align-content: center; min-width: 0; gap: 6px; }.store-location-card h2 { overflow: hidden; margin: 0; color: #35406e; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; }.store-location-card p { margin: 0; color: #77819d; font-size: 13px; line-height: 1.55; }.store-location-card .store-location-hours { color: #6575cf; font-size: 12px; font-weight: 800; }.store-location-actions { grid-column: 1 / -1; display: flex; justify-content: end; gap: 9px; margin-top: 2px; }.store-location-actions .primary-action, .store-location-actions .secondary-action { min-height: 35px; padding: 0 12px; font-size: 13px; }
@media (max-width: 700px) { .store-page { padding: 28px 14px 46px; }.store-page-heading { align-items: start; flex-direction: column; }.store-page-heading h1 { font-size: 24px; }.store-directory { grid-template-columns: 1fr; gap: 11px; }.store-location-card { padding: 14px; } }

.account-actions .text-button:disabled { color: #a4abc0; cursor: not-allowed; }

.store-toolbar-actions { display: flex; align-items: center; justify-content: end; gap: 14px; }.product-sort { display: flex; flex: 0 0 auto; gap: 3px; padding: 3px; border: 1px solid #dce2f4; border-radius: 7px; background: #f8f9ff; }.product-sort button { min-width: 50px; min-height: 34px; border: 0; border-radius: 5px; background: transparent; color: #7d86a2; padding: 0 10px; font-size: 13px; white-space: nowrap; }.product-sort button.active { background: #fff; color: #5567c3; font-weight: 800; box-shadow: 0 2px 7px rgba(79, 91, 168, .12); }.product-sort button:hover:not(.active) { color: #5f70c9; }
@media (max-width: 900px) { .store-toolbar { align-items: start; flex-direction: column; }.store-toolbar-actions { width: 100%; justify-content: space-between; } }
@media (max-width: 600px) { .store-toolbar-actions { align-items: stretch; flex-direction: column; }.product-sort { width: 100%; }.product-sort button { flex: 1; } }

.product-quantity { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px; border: 1px solid #e0e4f4; border-radius: 7px; background: #fafbff; color: #596381; font-size: 13px; font-weight: 700; }.quantity-stepper { display: grid; grid-template-columns: 32px 46px 32px; overflow: hidden; border: 1px solid #d8def2; border-radius: 5px; background: #fff; }.quantity-stepper button { min-width: 0; min-height: 30px; border: 0; background: #f5f6ff; color: #5667bf; font-size: 18px; line-height: 1; }.quantity-stepper button:hover:not(:disabled) { background: #e9edff; }.quantity-stepper button:disabled { color: #b8bfd8; cursor: not-allowed; }.quantity-stepper input { width: 46px; min-width: 0; height: 30px; border: 0; border-right: 1px solid #e0e4f4; border-left: 1px solid #e0e4f4; color: #3f4974; font-size: 13px; font-weight: 800; outline: 0; text-align: center; }.quantity-stepper input:disabled { background: #fbfbfd; color: #a0a7bf; }.product-quantity small { overflow: hidden; color: #8a92ad; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 600px) { .product-quantity { grid-template-columns: auto auto; }.product-quantity small { grid-column: 1 / -1; } }

.product-dialog:not(.activity-dialog) { width: min(720px, calc(100% - 32px)); }.product-media { display: grid; min-width: 0; gap: 10px; }.product-media > img { width: 100%; aspect-ratio: 1; border-radius: 7px; object-fit: cover; background: #eef1ff; }.product-thumbnails { display: flex; gap: 8px; overflow-x: auto; padding: 1px; }.product-thumbnails button { flex: 0 0 auto; width: 54px; height: 54px; overflow: hidden; padding: 2px; border: 1px solid #dce2f4; border-radius: 5px; background: #fff; }.product-thumbnails button.active { border-color: #6979d8; box-shadow: 0 0 0 2px rgba(105, 121, 216, .18); }.product-thumbnails button:hover:not(.active) { border-color: #b8c2ee; }.product-thumbnails img { display: block; width: 100%; height: 100%; border-radius: 3px; object-fit: cover; background: #eef1ff; }
@media (max-width: 760px) { .product-media > img { max-height: 280px; }.product-thumbnails button { width: 48px; height: 48px; } }