:root {
  --bg: #f3f4f2;
  --panel: #ffffff;
  --ink: #171a1c;
  --muted: #70767a;
  --line: #d9ddda;
  --green: #176b4d;
  --coral: #c75b42;
  --gold: #b8872c;
  --blue: #416a83;
  --danger: #a83d35;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--bg); font-family: "Microsoft YaHei", "Noto Sans CJK SC", Arial, sans-serif; letter-spacing: 0; }
button, input, select, textarea { font: inherit; letter-spacing: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }

.topbar { position: sticky; top: 0; z-index: 20; min-height: 68px; display: flex; align-items: center; gap: 28px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(10px); }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 36px; height: 36px; color: #fff; background: var(--ink); font: 700 20px/1 Georgia, serif; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; }
.brand small { margin-top: 2px; color: var(--muted); font: 10px/1.2 Georgia, serif; }
.main-nav { display: flex; align-self: stretch; }
.main-nav a { position: relative; display: grid; place-items: center; min-width: 68px; padding: 0 12px; color: #53595c; text-decoration: none; font-size: 13px; font-weight: 700; }
.main-nav a.active { color: var(--green); }
.main-nav a.active::after { content: ""; position: absolute; right: 12px; bottom: 0; left: 12px; height: 3px; background: var(--green); }
.account-brief { margin-left: auto; display: flex; align-items: center; gap: 12px; padding: 0; border: 0; color: var(--ink); background: transparent; text-decoration: none; font-size: 12px; }
.account-brief span { color: var(--muted); }
.account-brief strong { padding: 7px 10px; color: var(--green); background: #ecf5f0; }
.account-brief:hover strong { color: #fff; background: var(--green); }

main { min-height: calc(100vh - 68px); }
.view { display: none; max-width: 1240px; margin: 0 auto; padding: 34px 28px 56px; }
.view.active { display: block; }
.home-view { padding-top: 26px; }
.home-hero { position: relative; min-height: 420px; overflow: hidden; display: flex; align-items: center; padding: 58px 64px; color: var(--ink); background: #dfe8e2; }
.home-hero::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 6px; background: var(--green); }
.hero-copy { position: relative; z-index: 4; max-width: 470px; }
.hero-copy h1 { font: 700 62px/1 Georgia, serif; }
.hero-subtitle { margin: 16px 0 0; color: #4e5752; font-size: 18px; }
.hero-actions { display: flex; gap: 9px; margin-top: 30px; }
.hero-showcase { position: absolute; z-index: 1; inset: 0 0 0 38%; pointer-events: none; }
.hero-sheet { position: absolute; width: 230px; height: 310px; padding: 30px 26px; border: 1px solid rgba(25,30,27,.12); background: #fffdf6; box-shadow: 14px 18px 0 rgba(28,36,31,.1); }
.hero-sheet small, .hero-sheet strong, .hero-sheet span { display: block; }
.hero-sheet small { padding-bottom: 12px; border-bottom: 2px solid currentColor; font: 700 9px/1 Georgia, serif; }
.hero-sheet strong { margin-top: 50px; color: #202426; font-size: 23px; line-height: 1.4; }
.hero-sheet span { position: absolute; right: 26px; bottom: 24px; left: 26px; color: #777d79; font-size: 10px; }
.sheet-back { top: 52px; right: 42px; color: var(--gold); transform: rotate(7deg); }
.sheet-middle { top: 30px; right: 220px; color: var(--coral); transform: rotate(-5deg); }
.sheet-front { top: 74px; right: 116px; z-index: 2; color: var(--green); transform: rotate(1deg); }
.home-strip { display: grid; grid-template-columns: repeat(3, 1fr); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); background: #fff; }
.home-strip a { display: grid; grid-template-columns: 30px 1fr; gap: 3px 13px; min-height: 92px; align-content: center; padding: 18px 22px; border-right: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.home-strip a:last-child { border-right: 0; }
.home-strip a:hover strong { color: var(--green); }
.home-strip span { grid-row: 1 / 3; align-self: center; color: var(--green); font: 700 12px/1 Georgia, serif; }
.home-strip strong { font-size: 14px; }
.home-strip small { color: var(--muted); font-size: 10px; }
.home-strip b { color: inherit; }
.home-featured { padding-top: 42px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 18px; }
.section-heading h2 { font-size: 24px; }
.section-heading a { color: var(--green); font-size: 11px; font-weight: 800; }
.home-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.home-featured-item { min-width: 0; overflow: hidden; padding: 0; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; text-align: left; }
.home-featured-item:hover { border-color: #aeb8b1; box-shadow: 0 9px 24px rgba(27,33,29,.08); }
.home-featured-item .template-art { height: 220px; }
.home-featured-item .mini-page { transform: scale(.84); transform-origin: center top; }
.home-featured-item > div:last-child { padding: 15px 17px 17px; }
.home-featured-item > div:last-child span { color: var(--green); font-size: 9px; font-weight: 800; }
.home-featured-item h3 { margin: 6px 0 4px; font-size: 15px; }
.home-featured-item p { margin: 0; color: var(--muted); font-size: 10px; }
.page-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 30px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.page-head.compact { align-items: center; }
.eyebrow { margin: 0 0 7px; color: var(--green); font: 700 11px/1.2 Georgia, serif; text-transform: uppercase; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; max-width: 700px; font-size: 34px; line-height: 1.2; }
h2 { margin: 0; font-size: 17px; }
.page-description { margin: 9px 0 0; color: var(--muted); font-size: 12px; }
.catalog-tools { display: grid; justify-items: end; gap: 10px; }
.catalog-summary { color: var(--muted); font-size: 10px; }
.filters { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); background: #fff; }
.filter { min-height: 32px; padding: 0 12px; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-weight: 700; }
.filter.active { color: #fff; background: var(--ink); }

.merch-head { align-items: center; }
.coming-badge { padding: 8px 12px; border: 1px solid #d7c79e; color: #735c20; background: #fff9e8; font-size: 11px; font-weight: 800; white-space: nowrap; }
.merch-feature { min-height: 350px; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.2fr); overflow: hidden; color: #f7f4ed; background: #222725; }
.merch-feature-copy { align-self: center; padding: 48px; }
.merch-series { color: #b8c9bf; font: 700 10px/1.2 Georgia, serif; }
.merch-feature h2 { margin-top: 18px; font-size: 30px; line-height: 1.3; }
.merch-feature p { max-width: 430px; margin: 14px 0 24px; color: #cbd1cd; font-size: 13px; line-height: 1.8; }
.merch-notes { display: flex; flex-wrap: wrap; gap: 8px; }
.merch-notes span { padding: 6px 8px; border: 1px solid #59615d; color: #e7eae7; font-size: 10px; }
.merch-display { position: relative; min-height: 350px; overflow: hidden; background: #cddbd3; }
.merch-display::before { content: ""; position: absolute; right: -60px; bottom: -80px; width: 310px; height: 310px; border-radius: 50%; background: #b65c45; }
.merch-pouch { position: absolute; top: 64px; left: 13%; width: 210px; height: 238px; padding: 54px 35px; color: #23322b; background: #f3ead4; box-shadow: 16px 18px 0 rgba(34,39,37,.14); transform: rotate(-5deg); }
.merch-pouch::before { content: ""; position: absolute; top: -32px; left: 32px; width: 9px; height: 70px; border: 3px solid #846b40; border-bottom: 0; border-radius: 12px 12px 0 0; box-shadow: 128px 0 0 -3px #f3ead4, 128px 0 0 0 #846b40; }
.merch-pouch i { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 22px; border-radius: 50%; color: #fff; background: var(--green); font: 700 36px/1 Georgia, serif; }
.merch-pouch strong { display: block; text-align: center; font: 700 11px/1 Georgia, serif; }
.merch-charm { position: absolute; top: 44px; right: 15%; width: 120px; height: 150px; display: grid; place-items: center; border: 9px solid rgba(255,255,255,.75); border-radius: 38% 38% 46% 46%; color: #fff; background: var(--green); box-shadow: 8px 12px 0 rgba(34,39,37,.15); transform: rotate(9deg); }
.merch-charm i { position: absolute; top: -39px; width: 24px; height: 34px; border: 5px solid #bf8e34; border-radius: 50%; }
.merch-charm b { font: 700 48px/1 Georgia, serif; }
.merch-stickers { position: absolute; right: 9%; bottom: 36px; display: flex; gap: 10px; transform: rotate(-8deg); }
.merch-stickers i { display: block; width: 70px; height: 70px; border: 7px solid #fff; border-radius: 50%; background: var(--coral); box-shadow: 5px 7px 0 rgba(34,39,37,.13); }
.merch-stickers i:nth-child(2) { background: var(--gold); }
.merch-stickers i:nth-child(3) { background: var(--blue); }
.merch-catalog { padding-top: 42px; }
.merch-catalog .section-heading > span { color: var(--muted); font-size: 10px; }
.merch-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.merch-card { overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.merch-art { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; background: #e4ebe6; }
.merch-art-sticker { grid-template-columns: repeat(3, 68px); gap: 10px; }
.merch-art-sticker span { display: grid; place-items: center; width: 68px; height: 68px; border: 7px solid #fff; border-radius: 50%; color: #fff; background: var(--green); box-shadow: 5px 7px 0 rgba(31,39,34,.12); font: 700 27px/1 Georgia, serif; transform: rotate(-8deg); }
.merch-art-sticker span:nth-child(2) { background: var(--coral); transform: translateY(-20px) rotate(7deg); }
.merch-art-sticker span:nth-child(3) { background: var(--gold); transform: rotate(12deg); }
.merch-art-charm { background: #e7dfd0; }
.merch-art-charm span { position: relative; display: grid; place-items: center; width: 112px; height: 135px; border: 8px solid rgba(255,255,255,.85); border-radius: 38% 38% 46% 46%; color: #fff; background: var(--coral); box-shadow: 8px 10px 0 rgba(31,39,34,.12); font: 700 42px/1 Georgia, serif; transform: rotate(6deg); }
.merch-art-charm i { position: absolute; top: -34px; width: 22px; height: 30px; border: 5px solid #987323; border-radius: 50%; }
.merch-art-bag { background: #dce3e7; }
.merch-art-bag span { position: relative; width: 142px; height: 154px; padding: 45px 28px; color: #203128; background: #f3ead4; box-shadow: 10px 12px 0 rgba(31,39,34,.12); font: 700 17px/1.3 Georgia, serif; text-align: center; transform: rotate(-4deg); }
.merch-art-bag span::before { content: ""; position: absolute; top: 20px; left: calc(50% - 34px); width: 62px; height: 62px; border: 5px solid #806b46; border-bottom: 0; border-radius: 36px 36px 0 0; }
.merch-card-copy { padding: 18px; }
.merch-card-copy small { color: var(--green); font-size: 9px; font-weight: 800; }
.merch-card-copy h3 { margin: 7px 0 8px; font-size: 17px; }
.merch-card-copy p { min-height: 40px; margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.7; }
.product-visual { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; background: #e4ebe6; }
.product-visual::before { content: ""; width: 118px; height: 142px; border: 8px solid rgba(255,255,255,.82); border-radius: 38% 38% 46% 46%; box-shadow: 9px 11px 0 rgba(31,39,34,.12); transform: rotate(5deg); }
.product-visual::after { content: "J"; position: absolute; color: #fff; font: 700 44px/1 Georgia, serif; }
.product-visual[data-tone="green"] { background: #dce9e1; }
.product-visual[data-tone="green"]::before { background: var(--green); }
.product-visual[data-tone="coral"] { background: #efe1da; }
.product-visual[data-tone="coral"]::before { background: var(--coral); }
.product-visual[data-tone="gold"] { background: #eee7d6; }
.product-visual[data-tone="gold"]::before { background: var(--gold); }
.product-visual[data-tone="blue"] { background: #dfe7eb; }
.product-visual[data-tone="blue"]::before { background: var(--blue); }
.product-stock { color: var(--muted); font-size: 10px; }
.product-price-row { min-height: 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.product-price-row strong { color: var(--coral); font-size: 17px; }

.template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.template-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.template-card:hover { transform: translateY(-3px); border-color: #bbc2bd; box-shadow: 0 12px 28px rgba(30,36,32,.09); }
.template-index { position: absolute; top: 13px; left: 14px; z-index: 3; display: grid; place-items: center; width: 28px; height: 28px; color: rgba(255,255,255,.92); background: rgba(20,24,22,.72); font: 700 10px/1 Georgia, serif; }
.template-art { position: relative; height: 260px; overflow: hidden; padding: 27px; background: #e9ebe7; }
.template-art::before { content: ""; position: absolute; inset: 0; opacity: .18; background-image: radial-gradient(#70756f .6px, transparent .6px); background-size: 6px 6px; }
.art-shadow { position: absolute; top: 40px; left: 50%; width: 150px; height: 198px; transform: translateX(-42%); background: rgba(24,29,26,.1); }
.mini-page { position: relative; z-index: 2; width: 150px; height: 202px; margin: 0 auto; padding: 18px 15px; border: 1px solid rgba(0,0,0,.1); background: #fffdf7; }
.mini-kicker { padding-bottom: 8px; border-bottom: 2px solid currentColor; font: 700 8px/1 Georgia, serif; text-transform: uppercase; }
.mini-page strong { display: block; margin-top: 22px; color: #202426; font-size: 16px; line-height: 1.4; }
.mini-page span { display: block; margin-top: 10px; color: #6f7476; font: italic 9px/1.55 Georgia, serif; }
.mini-page i { display: block; width: 32px; height: 2px; margin-top: 14px; background: currentColor; }
.mini-number { position: absolute; top: 14px; right: 14px; color: currentColor; font: 700 19px/1 Georgia, serif; }
.mini-page[data-template="editorial-reading"] strong { margin-top: 30px; font-family: SimSun, "Songti SC", serif; font-size: 17px; }
.mini-page[data-template="quote-illustration"] { padding-top: 106px; }
.mini-page[data-template="quote-illustration"] strong { margin-top: 0; font-family: SimSun, "Songti SC", serif; font-size: 17px; }
.mini-scene { position: absolute; top: 0; right: 0; left: 0; height: 92px; overflow: hidden; background: #cadad5; }
.mini-scene b { position: absolute; display: block; border-radius: 50%; background: rgba(255,255,255,.72); }
.mini-scene b:nth-child(1) { width: 60px; height: 60px; right: 9px; top: 9px; }
.mini-scene b:nth-child(2) { width: 92px; height: 42px; left: -14px; bottom: -8px; border-radius: 50% 50% 0 0; background: #6f917d; }
.mini-scene b:nth-child(3) { width: 34px; height: 54px; left: 58px; bottom: -9px; border-radius: 18px 18px 0 0; background: #344d42; }
.art-format { position: absolute; right: 13px; bottom: 10px; z-index: 2; color: rgba(34,39,36,.55); font: 700 8px/1 Georgia, serif; }
.template-art[data-tone="green"] { color: var(--green); background: #dfeae3; }
.template-art[data-tone="coral"] { color: var(--coral); background: #f1e2dc; }
.template-art[data-tone="gold"] { color: #876216; background: #eee7d5; }
.template-art[data-tone="blue"] { color: var(--blue); background: #dfe7eb; }
.template-copy { padding: 18px; }
.card-labels { min-height: 22px; display: flex; align-items: center; gap: 7px; margin-bottom: 8px; color: var(--muted); font-size: 9px; font-weight: 700; }
.card-labels > span:first-child { text-transform: uppercase; }
.owned-label { padding: 3px 6px; color: var(--green); background: #eaf5ee; }
.template-copy header { display: flex; justify-content: space-between; gap: 12px; }
.template-copy h2 { line-height: 1.35; }
.price { color: var(--coral); font-weight: 800; white-space: nowrap; }
.template-copy p { min-height: 42px; margin: 9px 0 14px; color: var(--muted); font-size: 12px; line-height: 1.65; }
.card-meta, .dialog-facts { display: flex; flex-wrap: wrap; gap: 7px; }
.card-meta span, .dialog-facts span { padding: 5px 7px; background: #f1f2f0; color: #646a6d; font-size: 10px; }
.card-actions { display: flex; gap: 8px; margin-top: 16px; }

.button { min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 4px; font-weight: 800; font-size: 12px; }
.button.primary { color: #fff; background: var(--ink); }
.button.primary:hover { background: #303538; }
.button.secondary { border-color: #cdd2ce; color: var(--ink); background: #fff; }
.button.secondary:hover { border-color: var(--green); color: var(--green); }
.button.danger { border-color: #efd1ce; color: var(--danger); background: #fff8f7; }
.button:disabled { opacity: .45; cursor: not-allowed; }
.wide { width: 100%; }

.balance-badge { min-width: 110px; padding: 10px 14px; border-left: 3px solid var(--green); background: #fff; }
.balance-badge span, .balance-badge strong { display: block; }
.balance-badge span { color: var(--muted); font-size: 10px; }
.balance-badge strong { margin-top: 3px; font-size: 20px; }
.studio-layout { display: grid; grid-template-columns: 390px minmax(0, 1fr); min-height: 620px; border: 1px solid var(--line); background: #fff; }
.editor-panel { padding: 24px; border-right: 1px solid var(--line); }
label { display: block; margin: 14px 0 7px; color: #555b5e; font-size: 11px; font-weight: 800; }
input, select, textarea { width: 100%; border: 1px solid #ccd1ce; border-radius: 4px; outline: none; color: var(--ink); background: #fff; }
input, select { height: 40px; padding: 0 10px; }
textarea { padding: 11px; resize: vertical; line-height: 1.65; }
input:focus, select:focus, textarea:focus { border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,107,77,.1); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.studio-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 20px; }
.status { margin-top: 12px; padding: 10px 11px; color: var(--muted); background: #f3f4f2; font-size: 11px; line-height: 1.55; }
.status.error { color: var(--danger); background: #fff0ee; }
.status.success { color: var(--green); background: #edf7f1; }
.preview-panel { min-width: 0; display: grid; place-items: center; align-content: center; gap: 12px; padding: 28px; background: #e5e8e5; }
#previewCanvas { display: block; width: min(100%, 420px); height: auto; aspect-ratio: 3 / 4; background: #fff; box-shadow: 0 8px 28px rgba(27,32,30,.16); }
.preview-meta { width: min(100%, 420px); display: flex; justify-content: space-between; color: var(--muted); font-size: 11px; }

.wallet-grid { display: grid; grid-template-columns: 240px 360px minmax(0, 1fr); gap: 18px; align-items: start; }
.wallet-summary, .recharge-panel, .ledger-panel, .admin-login, .master-balance-panel { border: 1px solid var(--line); background: #fff; }
.wallet-summary { min-height: 180px; padding: 24px; border-top: 4px solid var(--green); }
.wallet-summary p { margin: 0; color: var(--muted); font-size: 12px; }
.wallet-summary strong { display: block; margin: 18px 0 10px; font-size: 34px; }
.wallet-summary small { color: var(--muted); }
.recharge-panel, .ledger-panel { padding: 20px; }
.amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.amount-option { min-height: 36px; border: 1px solid var(--line); background: #fff; font-size: 12px; font-weight: 800; }
.amount-option.active { border-color: var(--green); color: var(--green); background: #eff7f2; }
.payment-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.payment-methods label { margin: 0; }
.payment-methods input { position: absolute; opacity: 0; pointer-events: none; }
.payment-methods span { display: grid; place-items: center; min-height: 38px; border: 1px solid var(--line); }
.payment-methods input:checked + span { border-color: var(--green); color: var(--green); background: #eff7f2; }
.qr-placeholder { display: grid; place-items: center; aspect-ratio: 1; max-width: 168px; margin: 16px auto; border: 1px dashed #b8bfba; color: var(--muted); background: #f7f8f6; font-size: 11px; }
.record-list { margin-top: 14px; }
.record-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid #eceeec; }
.record-item:last-child { border-bottom: 0; }
.record-item strong { font-size: 12px; }
.record-item span, .record-item small { color: var(--muted); font-size: 10px; }
.record-item .credit { color: var(--green); }
.record-item .debit { color: var(--coral); }
.empty { padding: 26px 0; color: var(--muted); font-size: 12px; text-align: center; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); background: #fff; }
table { width: 100%; border-collapse: collapse; min-width: 680px; }
th, td { padding: 13px 14px; border-bottom: 1px solid #eceeec; text-align: left; font-size: 11px; }
th { color: var(--muted); background: #f7f8f6; }
.status-pill { display: inline-block; padding: 4px 7px; color: #735c20; background: #fff5d8; font-size: 10px; font-weight: 800; }
.status-pill.confirmed { color: var(--green); background: #edf7f1; }
.status-pill.rejected { color: var(--danger); background: #fff0ee; }
.admin-login { max-width: 420px; padding: 24px; border: 1px solid var(--line); background: #fff; }
.admin-login h2 { margin-bottom: 18px; }
.admin-login .button { width: 100%; margin-top: 20px; }
.admin-content { display: grid; gap: 18px; }
.admin-metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.admin-metrics section { padding: 18px; border: 1px solid var(--line); background: #fff; }
.admin-metrics span, .admin-metrics strong { display: block; }
.admin-metrics span { color: var(--muted); font-size: 10px; }
.admin-metrics strong { margin-top: 8px; font-size: 24px; }
.master-balance-panel { padding: 16px 18px; }
.master-balance-panel label { margin-top: 0; }
.master-balance-panel div { display: flex; gap: 8px; max-width: 340px; }
.product-admin-panel { padding: 22px; border: 1px solid var(--line); background: #fff; }
.product-form { margin-bottom: 20px; padding: 18px; border: 1px solid var(--line); background: #f8f9f7; }
.product-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.product-image-note { display: grid; gap: 4px; margin-top: 14px; padding: 12px; border-left: 3px solid var(--gold); background: #fff9e8; }
.product-image-note strong { font-size: 11px; }
.product-image-note span { color: var(--muted); font-size: 10px; line-height: 1.6; }
.product-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.account-layout { display: grid; grid-template-columns: minmax(280px, 1.4fr) repeat(2, minmax(180px, 1fr)); gap: 14px; }
.profile-panel, .account-stat, .account-orders { border: 1px solid var(--line); background: #fff; }
.profile-panel { display: flex; align-items: center; gap: 16px; min-height: 150px; padding: 24px; }
.profile-initial { display: grid; place-items: center; width: 58px; height: 58px; color: #fff; background: var(--green); font: 700 26px/1 Georgia, serif; }
.profile-panel h2 { font-size: 20px; }
.profile-panel p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.account-stat { min-height: 150px; display: grid; align-content: center; justify-items: start; padding: 22px; }
.account-stat > span { color: var(--muted); font-size: 10px; }
.account-stat > strong { margin: 7px 0 16px; font-size: 28px; }
.account-orders { margin-top: 18px; padding: 22px; }
.auth-dialog { width: min(440px, calc(100vw - 28px)); }
.auth-brand { display: flex; align-items: center; gap: 10px; padding: 24px 24px 18px; border-bottom: 1px solid var(--line); }
.auth-brand strong, .auth-brand small { display: block; }
.auth-brand small { margin-left: auto; color: var(--muted); font-size: 10px; }
.auth-body { padding: 22px 24px 24px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 18px; border: 1px solid var(--line); }
.auth-tabs button { min-height: 38px; border: 0; background: #fff; color: var(--muted); font-size: 12px; font-weight: 800; }
.auth-tabs button.active { color: #fff; background: var(--ink); }
.auth-body .button { margin-top: 18px; }
.demo-credentials { margin: 14px 0 0; color: #8a8f8b; font-size: 10px; text-align: center; }

dialog { width: min(820px, calc(100vw - 30px)); padding: 0; border: 0; border-radius: 6px; color: var(--ink); background: #fff; box-shadow: 0 18px 60px rgba(0,0,0,.28); }
dialog::backdrop { background: rgba(17,20,19,.52); }
.dialog-close { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 34px; border: 0; border-radius: 50%; color: #fff; background: rgba(0,0,0,.7); font-size: 22px; }
.dialog-preview { min-height: 280px; display: grid; place-items: center; background: #e5e8e5; }
.dialog-preview .mini-page { transform: scale(1.22); }
.dialog-body { padding: 24px; }
.dialog-body > p:not(.eyebrow) { color: var(--muted); line-height: 1.7; }
.dialog-facts { margin: 18px 0; }
.purchase-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.toast { position: fixed; left: 50%; bottom: 22px; z-index: 50; transform: translate(-50%, 14px); max-width: calc(100vw - 30px); padding: 10px 14px; border-radius: 4px; color: #fff; background: #171a1c; font-size: 12px; opacity: 0; pointer-events: none; transition: .18s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1000px) {
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-grid { grid-template-columns: 220px minmax(0, 1fr); }
  .ledger-panel { grid-column: 1 / -1; }
  .hero-showcase { left: 45%; opacity: .84; }
  .merch-feature { grid-template-columns: .9fr 1.1fr; }
  .merch-feature-copy { padding: 34px; }
  .merch-charm { right: 8%; }
}

@media (max-width: 1180px) and (min-width: 761px) {
  .template-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .template-art { height: 286px; padding-top: 35px; }
  .mini-page { width: 165px; height: 220px; }
  .art-shadow { width: 165px; height: 216px; }
}

@media (max-width: 760px) {
  .topbar { min-height: 62px; padding: 0 12px; gap: 8px; }
  .brand small, .account-brief > span { display: none; }
  .main-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; height: 58px; justify-content: space-around; border-top: 1px solid var(--line); background: #fff; }
  .main-nav a { flex: 1; min-width: 0; padding: 0 4px; font-size: 11px; }
  .main-nav a.active::after { top: 0; bottom: auto; }
  .account-brief { margin-left: auto; }
  .view { padding: 24px 14px 84px; }
  .home-view { padding-top: 14px; }
  .home-hero { min-height: 460px; align-items: flex-end; padding: 36px 24px; }
  .home-hero::before { content: ""; position: absolute; inset: 0; z-index: 3; background: rgba(223,232,226,.72); }
  .hero-copy h1 { font-size: 46px; }
  .hero-subtitle { font-size: 16px; }
  .hero-showcase { inset: 0; opacity: .62; }
  .sheet-back { top: 38px; right: -50px; }
  .sheet-middle { top: 8px; right: 112px; }
  .sheet-front { top: 48px; right: 28px; }
  .home-strip { grid-template-columns: 1fr; }
  .home-strip a { min-height: 74px; border-right: 0; border-bottom: 1px solid var(--line); }
  .home-strip a:last-child { border-bottom: 0; }
  .home-featured-grid { grid-template-columns: 1fr; }
  .merch-feature { grid-template-columns: 1fr; }
  .merch-feature-copy { padding: 30px 24px; }
  .merch-display { min-height: 320px; }
  .merch-pouch { left: 8%; }
  .merch-grid { grid-template-columns: 1fr; }
  .page-head { display: grid; align-items: start; }
  .catalog-tools { justify-items: start; width: 100%; }
  h1 { font-size: 24px; }
  .filters { overflow-x: auto; width: 100%; }
  .template-grid { grid-template-columns: 1fr; }
  .template-art { height: 220px; }
  .studio-layout { grid-template-columns: 1fr; }
  .editor-panel { border-right: 0; border-bottom: 1px solid var(--line); }
  .preview-panel { padding: 18px; }
  .wallet-grid { grid-template-columns: 1fr; }
  .ledger-panel { grid-column: auto; }
  .admin-metrics { grid-template-columns: 1fr; }
  .account-layout { grid-template-columns: 1fr; }
  .product-form-grid { grid-template-columns: 1fr; }
  .product-form-actions .button { flex: 1; }
}