* { box-sizing: border-box; }
body { min-height: 100vh; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
input, select, textarea { color: #18181b; }
.app-shell { background: radial-gradient(circle at top left, rgba(220, 38, 38, .20), transparent 34rem), #09090b; }
.panel { border: 1px solid rgba(255,255,255,.10); background: rgba(24,24,27,.82); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border-radius: .5rem; padding: .65rem .95rem; font-weight: 700; transition: .16s ease; }
.btn-primary { background: #dc2626; color: white; }
.btn-primary:hover { background: #b91c1c; }
.btn-soft { background: rgba(255,255,255,.08); color: white; }
.btn-soft:hover { background: rgba(255,255,255,.14); }
.field { width: 100%; border-radius: .5rem; border: 1px solid #d4d4d8; padding: .7rem .8rem; outline: none; }
.field:focus { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.22); }
.badge { border-radius: 999px; border: 1px solid rgba(255,255,255,.14); padding: .18rem .55rem; font-size: .76rem; font-weight: 800; text-transform: uppercase; }

.store-nav-brand { display: flex; align-items: center; gap: 12px; }
.store-nav-brand img { width: 48px; height: 48px; border-radius: 14px; object-fit: cover; object-position: center; }
.store-nav-brand strong, .store-nav-brand small { display: block; }
.store-nav-brand strong { color: #fff; font-size: 18px; font-weight: 950; line-height: 1.05; }
.store-nav-brand small { color: #a1a1aa; font-size: 12px; font-weight: 800; }
.store-page { display: grid; gap: 28px; }
.store-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); align-items: center; gap: 26px; overflow: hidden; min-height: 520px; border: 1px solid rgba(168, 85, 247, .30); border-radius: 24px; background: linear-gradient(135deg, rgba(10, 10, 18, .98), rgba(37, 18, 62, .95)); padding: clamp(26px, 5vw, 62px); box-shadow: 0 24px 70px rgba(0, 0, 0, .30); }
.store-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 72% 42%, rgba(168, 85, 247, .38), transparent 26rem), radial-gradient(circle at 8% 12%, rgba(220, 38, 38, .24), transparent 22rem); pointer-events: none; }
.store-hero-copy, .store-hero-logo { position: relative; z-index: 1; }
.store-eyebrow { display: inline-flex; width: fit-content; border: 1px solid rgba(216, 180, 254, .28); border-radius: 999px; background: rgba(168, 85, 247, .13); padding: 7px 12px; color: #d8b4fe; font-size: 11px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.store-hero h1 { max-width: 760px; margin: 18px 0 14px; color: #fff; font-size: clamp(46px, 8vw, 92px); font-weight: 950; line-height: .9; }
.store-hero p { max-width: 680px; color: #d4d4d8; font-size: clamp(16px, 2vw, 20px); font-weight: 650; line-height: 1.55; }
.store-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.store-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; padding: 13px 18px; font-size: 14px; font-weight: 950; transition: .16s ease; }
.store-btn.primary { background: #8b5cf6; color: #fff; box-shadow: 0 16px 34px rgba(139, 92, 246, .30); }
.store-btn.primary:hover { background: #7c3aed; }
.store-btn.secondary { border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color: #fff; }
.store-btn.secondary:hover { background: rgba(255,255,255,.14); }
.store-btn.compact { padding: 10px 14px; }
.store-trust { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.store-trust span { border: 1px solid rgba(255,255,255,.11); border-radius: 999px; background: rgba(255,255,255,.06); padding: 8px 12px; color: #e4e4e7; font-size: 12px; font-weight: 900; }
.store-hero-logo { justify-self: center; width: min(460px, 100%); }
.store-hero-logo img { width: 100%; border-radius: 28px; object-fit: cover; box-shadow: 0 30px 80px rgba(0, 0, 0, .42); }
.store-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.store-stats article, .store-how article, .store-catalog, .store-empty { border: 1px solid rgba(255,255,255,.10); border-radius: 16px; background: rgba(24,24,27,.78); }
.store-stats article { padding: 20px; }
.store-stats small { color: #a1a1aa; font-size: 11px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.store-stats strong { display: block; margin-top: 8px; color: #fff; font-size: 28px; font-weight: 950; }
.store-how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.store-how article { display: flex; gap: 14px; padding: 20px; }
.store-how span { display: grid; flex: 0 0 auto; width: 38px; height: 38px; place-items: center; border-radius: 12px; background: #8b5cf6; color: #fff; font-weight: 950; }
.store-how strong { color: #fff; font-size: 15px; font-weight: 950; }
.store-how p { margin-top: 5px; color: #a1a1aa; font-size: 13px; line-height: 1.45; }
.store-catalog { padding: clamp(18px, 3vw, 28px); }
.store-section-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.store-section-head h2 { margin-top: 10px; color: #fff; font-size: clamp(28px, 4vw, 44px); font-weight: 950; line-height: 1; }
.store-filters { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) 200px; gap: 12px; margin-bottom: 22px; }
.store-field { width: 100%; border: 1px solid rgba(255,255,255,.11); border-radius: 10px; background: #fff; padding: 13px 14px; color: #18181b; font-weight: 800; outline: none; }
.store-field:focus { border-color: #a855f7; box-shadow: 0 0 0 3px rgba(168, 85, 247, .24); }
.store-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.store-card { overflow: hidden; border: 1px solid rgba(255,255,255,.11); border-radius: 18px; background: #111118; box-shadow: 0 18px 40px rgba(0,0,0,.18); }
.store-card-media { position: relative; aspect-ratio: 16 / 10; background: #09090b; }
.store-card-media img { width: 100%; height: 100%; object-fit: cover; }
.store-card-media span { position: absolute; left: 14px; top: 14px; border-radius: 999px; background: rgba(9,9,11,.82); padding: 7px 10px; color: #fff; font-size: 11px; font-weight: 950; text-transform: uppercase; }
.store-card-body { display: grid; gap: 12px; padding: 18px; }
.store-card h3 { color: #fff; font-size: 18px; font-weight: 950; line-height: 1.15; }
.store-card p { min-height: 42px; color: #a1a1aa; font-size: 13px; line-height: 1.45; }
.store-card-meta, .store-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.store-card-meta span { color: #d4d4d8; font-size: 12px; font-weight: 850; }
.store-card-bottom strong { color: #c084fc; font-size: 24px; font-weight: 950; }
.store-card-bottom button { border-radius: 9px; background: #8b5cf6; padding: 10px 13px; color: #fff; font-size: 13px; font-weight: 950; }
.store-empty { display: grid; justify-items: center; gap: 12px; padding: 34px; text-align: center; }
.store-empty img { width: 150px; border-radius: 22px; }
.store-empty h3 { color: #fff; font-size: 24px; font-weight: 950; }
.store-empty p { color: #a1a1aa; font-weight: 750; }

.shop-main { min-height: 100vh; background: #f7f8fb; color: #06122a; }
.shop-container { width: min(1180px, calc(100% - 32px)); margin: 0 auto; }
.shop-top-strip { background: #8f5cff; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .02em; }
.shop-top-strip .shop-container { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; }
.shop-top-strip strong { text-align: center; text-transform: uppercase; }
.shop-header { background: #080b18; color: #fff; }
.shop-header-inner { display: grid; grid-template-columns: 250px minmax(260px, 1fr) 330px; align-items: center; gap: 26px; min-height: 122px; }
.shop-logo { display: flex; align-items: center; gap: 14px; color: #fff; text-align: left; }
.shop-logo img { width: 72px; height: 72px; border-radius: 18px; object-fit: cover; box-shadow: 0 14px 34px rgba(168,85,247,.28); }
.shop-logo strong, .shop-logo small { display: block; }
.shop-logo strong { font-size: 34px; font-weight: 950; line-height: .9; letter-spacing: .02em; }
.shop-logo small { color: #c4b5fd; font-size: 14px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; }
.shop-search { display: flex; height: 48px; overflow: hidden; border-radius: 999px; background: #fff; box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.shop-search input { flex: 1; min-width: 0; border: 0; padding: 0 22px; color: #111827; font-size: 14px; font-weight: 800; outline: none; }
.shop-search button { width: 58px; color: #64748b; font-size: 27px; font-weight: 900; }
.shop-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.shop-actions button { display: grid; justify-items: center; gap: 7px; color: #fff; font-size: 11px; font-weight: 950; text-transform: uppercase; }
.shop-actions span { display: grid; width: 31px; height: 31px; place-items: center; border: 2px solid #a78bfa; border-radius: 9px; color: #ddd6fe; font-size: 16px; }
.shop-nav { background: #151027; border-top: 1px solid rgba(255,255,255,.08); border-bottom: 1px solid rgba(255,255,255,.08); }
.shop-nav .shop-container { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 3vw, 38px); min-height: 42px; overflow-x: auto; }
.shop-nav button { flex: 0 0 auto; color: #fff; font-size: 12px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.shop-hero { position: relative; display: grid; min-height: 625px; overflow: hidden; background: radial-gradient(circle at 16% 15%, #a78bfa 0 8%, transparent 8.5%), radial-gradient(circle at 92% 14%, #7c3aed 0 8%, transparent 8.5%), linear-gradient(120deg, #5b21b6 0%, #0a0d1d 42%, #111827 62%, #7c3aed 100%); }
.shop-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 9% 72%, rgba(255,255,255,.14) 0 10%, transparent 10.5%), radial-gradient(circle at 88% 70%, rgba(255,255,255,.16) 0 17%, transparent 17.5%); }
.shop-hero-center { position: relative; z-index: 2; align-self: center; justify-self: center; display: grid; justify-items: center; width: min(780px, calc(100% - 48px)); border-radius: 52% 48% 50% 50% / 40% 42% 58% 60%; background: #fff; padding: 78px 42px; text-align: center; box-shadow: 0 24px 80px rgba(0,0,0,.20); }
.shop-hero-center img { width: 118px; height: 118px; border-radius: 28px; object-fit: cover; margin-bottom: 22px; }
.shop-hero-center h1 { color: #5b21b6; font-size: clamp(48px, 7vw, 92px); font-weight: 950; line-height: .9; text-transform: uppercase; }
.shop-hero-center p { max-width: 650px; margin-top: 18px; color: #8b5cf6; font-size: clamp(18px, 2.4vw, 27px); font-weight: 800; line-height: 1.25; }
.shop-hero-cta { margin-top: 34px; border-radius: 999px; background: #6d28d9; padding: 15px 34px; color: #fff; font-size: 22px; font-weight: 950; text-transform: uppercase; box-shadow: 0 16px 32px rgba(109,40,217,.28); }
.shop-hero-art { position: absolute; z-index: 1; overflow: hidden; width: 330px; height: 330px; border-radius: 50%; background: #fff; box-shadow: 0 20px 60px rgba(0,0,0,.20); }
.shop-hero-art img { width: 100%; height: 100%; object-fit: cover; }
.shop-hero-art.left { left: 7%; top: 80px; }
.shop-hero-art.right { right: 7%; bottom: 105px; border-radius: 28% 52% 38% 48%; width: 420px; height: 310px; }
.shop-arrow { position: absolute; z-index: 3; top: 50%; left: 32px; display: grid; width: 50px; height: 50px; place-items: center; border-radius: 50%; background: #fff; color: #111827; font-size: 32px; box-shadow: 0 10px 30px rgba(0,0,0,.16); }
.shop-arrow.right { left: auto; right: 32px; }
.shop-collection { padding: 82px 0 96px; }
.shop-title-row { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 44px; }
.shop-title-row span { display: inline-flex; align-items: center; gap: 14px; color: #7c3aed; font-size: 12px; font-weight: 950; letter-spacing: .34em; text-transform: uppercase; }
.shop-title-row span::before { content: ""; width: 42px; height: 1px; background: #7c3aed; }
.shop-title-row h2 { margin-top: 16px; color: #06122a; font-size: clamp(34px, 5vw, 48px); font-weight: 950; line-height: .95; text-transform: uppercase; }
.shop-tabs { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)); width: min(520px, 100%); border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; padding: 5px; box-shadow: 0 4px 12px rgba(15,23,42,.08); }
.shop-tabs button { border-radius: 10px; padding: 11px 10px; color: #8a99b8; font-size: 10px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.shop-tabs button.active { background: #6d28d9; color: #fff; }
.shop-filter-line { display: grid; grid-template-columns: 1fr 220px; gap: 12px; margin-bottom: 34px; }
.shop-filter-line input, .shop-filter-line select { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; padding: 14px 16px; color: #111827; font-weight: 800; outline: none; }
.shop-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.shop-product { position: relative; min-width: 0; }
.shop-product-image { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.22; overflow: hidden; border: 1px solid #e8edf5; border-radius: 34px; background: #f1f5f9; }
.shop-product-image img { width: 100%; height: 100%; object-fit: cover; }
.shop-product.placeholder .shop-product-image img { width: 58%; height: 58%; opacity: .08; object-fit: contain; filter: grayscale(1); }
.shop-product-image button { position: absolute; right: 14px; bottom: 14px; display: grid; width: 32px; height: 32px; place-items: center; border-radius: 9px; background: #ede9fe; color: #6d28d9; font-size: 20px; }
.shop-product small { display: block; margin-top: 24px; color: #7c3aed; font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.shop-product h3 { margin-top: 12px; color: #06122a; font-size: 16px; font-weight: 950; line-height: 1.25; text-transform: uppercase; }
.shop-product strong { display: block; margin-top: 14px; color: #06122a; font-size: 23px; font-weight: 950; }
.shop-buy { margin-top: 14px; border-radius: 999px; background: #111827; padding: 10px 18px; color: #fff; font-size: 12px; font-weight: 950; text-transform: uppercase; }
.shop-footer { background: #8f5cff; color: #fff; padding: 70px 0 28px; }
.shop-footer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 54px; }
.shop-footer h3 { margin-bottom: 28px; font-size: 22px; font-weight: 950; font-style: italic; text-transform: uppercase; }
.shop-footer a, .shop-footer p { display: block; margin-bottom: 16px; color: #fff; font-size: 14px; font-weight: 850; line-height: 1.45; }
.shop-social { display: flex; gap: 14px; }
.shop-social span { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 14px; background: #fff; color: #8f5cff; font-weight: 950; box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.shop-footer-bottom { margin-top: 54px; border-top: 1px solid rgba(255,255,255,.25); padding-top: 28px; font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
.auth-page, .seller-page { display: grid; gap: 24px; }
.auth-page { grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); align-items: stretch; }
.auth-visual, .auth-card, .seller-hero, .seller-form { border: 1px solid rgba(255,255,255,.11); border-radius: 22px; background: rgba(24,24,27,.82); box-shadow: 0 22px 60px rgba(0,0,0,.24); }
.auth-visual { position: relative; overflow: hidden; min-height: 560px; padding: clamp(28px, 5vw, 56px); }
.auth-visual::before, .seller-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 22% 12%, rgba(168,85,247,.30), transparent 24rem), radial-gradient(circle at 84% 42%, rgba(220,38,38,.16), transparent 22rem); pointer-events: none; }
.auth-visual > *, .seller-hero > * { position: relative; z-index: 1; }
.auth-visual img { width: min(300px, 70%); margin-bottom: 28px; border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.32); }
.auth-visual h1, .seller-hero h1 { max-width: 680px; margin: 16px 0 14px; color: #fff; font-size: clamp(38px, 6vw, 70px); font-weight: 950; line-height: .95; }
.auth-visual p, .seller-hero p { max-width: 640px; color: #d4d4d8; font-size: 16px; font-weight: 700; line-height: 1.6; }
.auth-visual .store-btn { margin-top: 26px; }
.auth-card { align-self: center; padding: clamp(24px, 4vw, 38px); }
.auth-card h2, .seller-form h2 { margin-top: 16px; color: #fff; font-size: 30px; font-weight: 950; }
.auth-card p { margin: 8px 0 22px; color: #a1a1aa; font-size: 14px; font-weight: 750; line-height: 1.5; }
.auth-fields { display: grid; gap: 12px; margin-bottom: 16px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 16px; }
.auth-links button { color: #d8b4fe; font-size: 13px; font-weight: 900; }
.seller-page { grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr); align-items: start; }
.seller-hero { position: sticky; top: 24px; overflow: hidden; padding: clamp(28px, 5vw, 52px); }
.seller-hero img { width: min(360px, 90%); margin-top: 30px; border-radius: 28px; box-shadow: 0 24px 70px rgba(0,0,0,.34); }
.seller-benefits { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.seller-benefits span { border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(255,255,255,.07); padding: 8px 12px; color: #e4e4e7; font-size: 12px; font-weight: 900; }
.seller-form { padding: clamp(22px, 4vw, 34px); }
.seller-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.seller-form-grid textarea { min-height: 130px; grid-column: 1 / -1; resize: vertical; }
.account-page { min-height: 100vh; background: #f7f8fb; color: #06122a; }
.account-login-wrap { display: grid; min-height: 670px; place-items: center; padding: 64px 16px; }
.account-login-card { width: min(372px, 100%); border-radius: 34px; background: #fff; padding: 40px; text-align: center; box-shadow: 0 28px 70px rgba(15, 23, 42, .14); }
.account-login-icon { display: grid; width: 66px; height: 66px; margin: 0 auto 24px; place-items: center; border-radius: 20px; background: #ede9fe; color: #6d28d9; font-size: 28px; font-weight: 950; }
.account-login-card h1 { color: #06122a; font-size: 30px; font-weight: 950; line-height: .95; text-transform: uppercase; }
.account-fields { display: grid; gap: 18px; margin: 34px 0 20px; text-align: left; }
.account-fields label, .seller-panel-form label { display: grid; gap: 7px; }
.account-fields span { color: #94a3b8; font-size: 11px; font-weight: 950; letter-spacing: .16em; text-transform: uppercase; }
.account-fields input { border: 0; border-radius: 13px; background: #eef4ff; padding: 17px 20px; color: #06122a; font-weight: 850; outline: none; }
.account-primary { border-radius: 13px; background: #111827; padding: 16px 22px; color: #fff; font-size: 13px; font-weight: 950; text-transform: uppercase; box-shadow: 0 16px 30px rgba(17,24,39,.18); }
.account-login-card p { margin-top: 14px; color: #8a99b8; font-size: 11px; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.account-login-card p button { color: #7c3aed; }
.compact-footer { padding-top: 70px; }
.seller-register-wrap { display: grid; grid-template-columns: minmax(0, .92fr) minmax(420px, .88fr); gap: 28px; padding: 72px 0; }
.seller-register-hero, .seller-register-card { border-radius: 34px; background: #fff; box-shadow: 0 24px 60px rgba(15,23,42,.10); }
.seller-register-hero { min-height: 500px; padding: clamp(30px, 4vw, 54px); background: radial-gradient(circle at 20% 20%, rgba(139,92,246,.22), transparent 19rem), #111827; color: #fff; }
.seller-register-hero h1 { margin: 18px 0; font-size: clamp(34px, 4.5vw, 58px); font-weight: 950; line-height: .96; text-transform: uppercase; }
.seller-register-hero p { color: #ddd6fe; font-size: 17px; font-weight: 750; line-height: 1.6; }
.seller-register-card { align-self: start; padding: 36px; text-align: center; }
.seller-register-card h2 { margin-bottom: 24px; color: #06122a; font-size: 30px; font-weight: 950; text-transform: uppercase; }
.seller-register-card p { margin-top: 14px; color: #7c3aed; font-size: 12px; font-weight: 950; text-transform: uppercase; }
.account-dashboard { padding: 72px 0 86px; }
.account-hero-card { display: flex; align-items: center; gap: 24px; width: min(960px, 100%); margin: 0 auto; border-radius: 34px; background: linear-gradient(135deg, #111827, #6d28d9); padding: 40px; color: #fff; box-shadow: 0 24px 70px rgba(17,24,39,.18); }
.account-avatar { display: grid; width: 82px; height: 82px; place-items: center; border: 1px solid rgba(255,255,255,.26); border-radius: 26px; background: rgba(255,255,255,.12); font-size: 34px; font-weight: 950; }
.account-hero-card span { color: #ddd6fe; font-size: 11px; font-weight: 950; letter-spacing: .2em; text-transform: uppercase; }
.account-hero-card h1 { margin-top: 5px; font-size: clamp(32px, 5vw, 48px); font-weight: 950; line-height: .95; text-transform: uppercase; }
.account-hero-card p { margin-top: 8px; color: #f5f3ff; font-weight: 800; }
.account-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(760px, 100%); margin: 28px auto 54px; }
.account-tabs button { border: 1px solid #e2e8f0; border-radius: 14px; background: #fff; padding: 17px 18px; color: #8a99b8; font-size: 11px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 14px rgba(15,23,42,.08); }
.account-tabs button.active { background: #111827; color: #fff; border-color: #111827; }
.account-content-card { width: min(960px, 100%); margin: 0 auto; border: 1px solid #e2e8f0; border-radius: 34px; background: #fff; padding: clamp(24px, 4vw, 42px); box-shadow: 0 18px 50px rgba(15,23,42,.08); }
.account-card-head h2 { color: #06122a; font-size: 26px; font-weight: 950; text-transform: uppercase; }
.account-card-head p { margin-top: 5px; color: #8a99b8; font-size: 12px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.account-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 28px 0; }
.account-metrics article { border-radius: 18px; background: #f8fafc; padding: 18px; }
.account-metrics small { color: #8a99b8; font-size: 11px; font-weight: 950; text-transform: uppercase; }
.account-metrics strong { display: block; margin-top: 8px; color: #06122a; font-size: 22px; font-weight: 950; }
.account-list { display: grid; gap: 12px; margin-top: 24px; }
.account-list h3, .account-forms h3, .seller-panel-form h3 { color: #06122a; font-size: 18px; font-weight: 950; text-transform: uppercase; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #e8edf5; border-radius: 16px; padding: 15px; }
.account-row strong, .account-row span { display: block; }
.account-row span { margin-top: 4px; color: #64748b; font-size: 12px; font-weight: 850; }
.account-row button { border-radius: 10px; background: #6d28d9; padding: 10px 12px; color: #fff; font-size: 12px; font-weight: 950; }
.account-forms, .seller-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.account-forms form, .seller-panel-form { display: grid; gap: 12px; border: 1px solid #e8edf5; border-radius: 18px; background: #f8fafc; padding: 18px; }
.seller-dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.seller-dashboard-grid .account-list { margin-top: 0; }

.admin-page { min-height: 100vh; background: #f3f6fb; color: #0f172a; }
.admin-loading { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: #f3f6fb; }
.admin-loading-card { display: grid; justify-items: center; gap: 14px; width: min(420px, 100%); border: 1px solid #dbe3ef; border-radius: 28px; background: #fff; padding: 34px; color: #0f172a; text-align: center; box-shadow: 0 18px 35px rgba(15, 23, 42, .08); }
.admin-loading-card h1 { font-size: 28px; font-weight: 950; }
.admin-loading-card p { color: #64748b; font-size: 14px; font-weight: 800; }
.admin-shell { display: grid; min-height: 100vh; grid-template-columns: 268px 1fr; }
.admin-sidebar { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 12px; background: #050a1a; padding: 28px 15px; color: #94a3b8; }
.admin-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; padding: 0 14px; color: #fff; }
.admin-brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 14px; background: #7c3aed; font-weight: 900; }
.admin-brand strong, .admin-brand small { display: block; }
.admin-brand small { color: #91a0b8; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.admin-nav { display: flex; width: 100%; align-items: center; gap: 12px; border-radius: 10px; padding: 12px 15px; color: #9aabc7; font-size: 14px; font-weight: 800; text-align: left; transition: .16s ease; }
.admin-nav span { width: 18px; color: #7ea0d4; font-size: 18px; }
.admin-nav:hover, .admin-nav.active { background: #160d3d; color: #fff; }
.admin-nav.active span { color: #8b5cf6; }
.admin-sidebar-footer { margin-top: auto; display: grid; gap: 8px; }
.admin-content { min-width: 0; padding: 40px clamp(22px, 4vw, 56px); }
.admin-hero { display: flex; align-items: center; gap: 22px; min-height: 104px; border: 1px solid #dbe3ef; border-radius: 34px; background: #fff; padding: 26px 32px; box-shadow: 0 18px 35px rgba(15, 23, 42, .08); }
.admin-hero-icon { display: grid; flex: 0 0 auto; width: 58px; height: 58px; place-items: center; border-radius: 21px; background: #111827; color: #fff; font-size: 30px; }
.admin-kicker { color: #94a3b8; font-size: 11px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
.admin-hero h1 { margin: 3px 0 4px; color: #111827; font-size: clamp(24px, 3vw, 31px); font-weight: 950; line-height: 1.05; }
.admin-hero span { color: #64748b; font-size: 13px; font-weight: 800; }
.admin-hero-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; }
.admin-btn { border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 900; }
.admin-btn.ghost { border: 1px solid #dbe3ef; background: #fff; color: #334155; }
.admin-btn.primary { background: #7c3aed; color: #fff; box-shadow: 0 10px 20px rgba(124, 58, 237, .24); }
.admin-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; margin-top: 28px; }
.admin-card { border: 1px solid #dbe3ef; border-radius: 12px; background: #fff; box-shadow: 0 4px 9px rgba(15, 23, 42, .08); }
.metric { min-height: 178px; padding: 22px 24px; }
.metric-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 24px; }
.metric-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 15px; font-size: 25px; font-weight: 900; }
.metric-icon.blue { background: #eef8ff; color: #0284c7; }
.metric-icon.purple { background: #eef0ff; color: #6366f1; }
.metric-icon.green { background: #e7fbf6; color: #00bfa6; }
.metric-icon.rose { background: #fff1f3; color: #ff2d64; }
.metric-delta { border-radius: 999px; padding: 6px 11px; font-size: 11px; font-weight: 950; }
.metric-delta.good { background: #dcfce7; color: #059669; }
.metric-delta.bad { background: #ffe4e6; color: #f43f5e; }
.metric small, .admin-card-head p { color: #94a3b8; font-size: 11px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.metric strong { display: block; margin-top: 10px; color: #06122a; font-size: 30px; font-weight: 950; font-style: italic; line-height: 1; }
.admin-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(360px, 1fr); gap: 28px; margin-top: 30px; }
.admin-grid.bottom { grid-template-columns: 1fr 1fr; }
.admin-section { margin-top: 30px; }
.admin-metrics.compact { margin-top: 0; }
.admin-table-card, .admin-flow, .admin-list { padding: 32px 26px; }
.admin-card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.admin-card-head h2 { color: #06122a; font-size: 20px; font-weight: 950; line-height: 1.05; }
.admin-pill { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 5px 10px; font-size: 10px; font-weight: 950; text-transform: uppercase; white-space: nowrap; }
.admin-pill.online { background: #dcfce7; color: #008c63; }
.admin-pill.warn { background: #fff7db; color: #b7791f; }
.admin-pill.danger { background: #ffe4e6; color: #e11d48; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.admin-table th { background: #f8fafc; color: #94a3b8; font-size: 11px; font-weight: 950; letter-spacing: .1em; padding: 18px 16px; text-align: left; text-transform: uppercase; }
.admin-table td { border-top: 1px solid #edf2f7; padding: 18px 16px; color: #08203f; font-size: 13px; font-weight: 900; }
.admin-product { display: flex; align-items: center; gap: 14px; }
.admin-product > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 12px; background: #f1f5f9; color: #8aa2c2; font-size: 22px; }
.admin-product small, .flow-item small, .admin-row small { display: block; margin-top: 4px; color: #64748b; font-size: 11px; font-weight: 800; }
.admin-mini { border-radius: 8px; background: #f1f5f9; color: #334155; padding: 7px 10px; font-size: 12px; font-weight: 950; }
.admin-flow { min-height: 470px; }
.flow-list { display: grid; gap: 24px; }
.flow-item { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; }
.flow-item strong, .admin-row strong { color: #0f2442; font-size: 13px; font-weight: 950; }
.admin-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 14px; border-top: 1px solid #edf2f7; padding: 15px 0; }
.admin-empty { padding: 18px 0; color: #64748b; font-size: 13px; font-weight: 800; }
.settings-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.settings-grid div { border: 1px solid #edf2f7; border-radius: 12px; background: #f8fafc; padding: 18px; }
.settings-grid small { display: block; color: #94a3b8; font-size: 11px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.settings-grid strong { display: block; margin-top: 8px; color: #06122a; font-size: 15px; font-weight: 950; }
.settings-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.settings-form label { display: grid; gap: 8px; }
.settings-form small { color: #94a3b8; font-size: 11px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.settings-toggle { grid-column: 1 / -1; display: flex !important; align-items: center; gap: 10px; border: 1px solid #edf2f7; border-radius: 12px; background: #f8fafc; padding: 14px 16px; color: #0f2442; font-size: 13px; font-weight: 900; }
.settings-toggle input { width: 18px; height: 18px; }
.admin-modal-backdrop { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(3, 7, 18, .62); padding: 18px; }
.admin-modal { width: min(560px, 100%); border: 1px solid #dbe3ef; border-radius: 18px; background: #fff; padding: 24px; box-shadow: 0 24px 70px rgba(2, 6, 23, .24); }
.admin-form-grid { display: grid; gap: 12px; margin-bottom: 18px; }
.mobile-tabbar { display: none; }

@media (max-width: 1180px) {
  .shop-header-inner { grid-template-columns: 1fr; padding: 22px 0; }
  .shop-actions { width: min(420px, 100%); }
  .shop-hero-art { opacity: .28; }
  .shop-title-row { align-items: stretch; flex-direction: column; }
  .shop-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .shop-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .store-hero { grid-template-columns: 1fr; }
  .store-hero-logo { width: min(360px, 100%); }
  .store-stats, .store-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .auth-page, .seller-page { grid-template-columns: 1fr; }
  .seller-register-wrap { grid-template-columns: 1fr; }
  .account-tabs, .account-metrics, .account-forms, .seller-dashboard-grid { grid-template-columns: 1fr; }
  .seller-hero { position: relative; top: auto; }
  .admin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid, .admin-grid.bottom { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .settings-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  body { padding-bottom: 78px; }
  .shop-main { padding-bottom: 78px; }
  .shop-container { width: min(100% - 24px, 1180px); }
  .shop-top-strip .shop-container { justify-content: center; text-align: center; }
  .shop-top-strip span { display: none; }
  .shop-logo img { width: 58px; height: 58px; }
  .shop-logo strong { font-size: 26px; }
  .shop-header-inner { gap: 16px; }
  .shop-actions { display: none; }
  .shop-actions strong { font-size: 9px; }
  .shop-nav .shop-container { justify-content: flex-start; }
  .shop-hero { min-height: 560px; }
  .shop-hero-center { width: calc(100% - 28px); border-radius: 28px; padding: 42px 22px; }
  .shop-hero-center h1 { font-size: 44px; }
  .shop-hero-center p { font-size: 17px; }
  .shop-hero-art { display: none; }
  .shop-arrow { display: none; }
  .shop-tabs, .shop-filter-line, .shop-products, .shop-footer-grid { grid-template-columns: 1fr; }
  .shop-footer { padding-bottom: 100px; }
  .shop-collection { padding: 54px 0; }
  .store-nav-brand img { width: 40px; height: 40px; }
  .store-nav-brand small { display: none; }
  .store-hero { min-height: auto; border-radius: 18px; padding: 24px; }
  .store-hero h1 { font-size: 46px; }
  .store-hero-actions, .store-section-head { align-items: stretch; flex-direction: column; }
  .store-stats, .store-how, .store-grid, .store-filters { grid-template-columns: 1fr; }
  .store-card-bottom { align-items: flex-start; flex-direction: column; }
  .store-card-bottom button { width: 100%; }
  .auth-visual { min-height: auto; }
  .seller-form-grid { grid-template-columns: 1fr; }
  .account-login-card, .seller-register-card { padding: 26px; }
  .account-hero-card { align-items: flex-start; flex-direction: column; padding: 28px; }
  .account-row { align-items: flex-start; flex-direction: column; }
  .account-row button { width: 100%; }
  .admin-shell { grid-template-columns: 1fr; }
  .admin-sidebar { position: relative; height: auto; }
  .admin-content { padding: 22px 14px; }
  .admin-hero { align-items: flex-start; border-radius: 20px; flex-direction: column; }
  .admin-hero-actions { margin-left: 0; }
  .admin-metrics { grid-template-columns: 1fr; }
  .admin-row { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .settings-form { grid-template-columns: 1fr; }
  .mobile-tabbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(8,11,24,.94); padding: 8px; box-shadow: 0 20px 50px rgba(0,0,0,.34); backdrop-filter: blur(14px); }
  .mobile-tabbar:has(button:nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mobile-tabbar button { display: grid; justify-items: center; gap: 3px; border-radius: 16px; padding: 8px 4px; color: #c4b5fd; font-size: 10px; font-weight: 950; text-transform: uppercase; }
  .mobile-tabbar button span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 10px; background: rgba(255,255,255,.07); font-size: 14px; }
  .mobile-tabbar button.active { background: #7c3aed; color: #fff; }
  .mobile-tabbar button.active span { background: rgba(255,255,255,.18); }
}