/* AKBuy dark presentation layer.
   Visual direction: MengTo/Skills — dark-blue-contrasting-clean. */
:root {
  color-scheme: dark;
  --page: #050814;
  --surface: #0a1120;
  --surface-soft: #0d1729;
  --surface-warm: #111e34;
  --orange-soft: #102a50;
  --peach-soft: #193c6b;
  --lavender-soft: #1e1a3d;
  --sage-soft: #0d2e33;
  --blue-soft: #10213e;
  --ink: #f7f9fc;
  --muted: #a9b5ca;
  --line: rgba(149, 176, 217, .18);
  --line-strong: rgba(149, 176, 217, .32);
  --orange: #60a5fa;
  --orange-strong: #3b82f6;
  --orange-ink: #b9d5ff;
  --orange-fill: #2563eb;
  --sage: #41c7af;
  --lavender: #a99afb;
  --blue: #6ea8ff;
  --success: #43d39e;
  --danger: #ff7b86;
  --focus: #7cb4ff;
  --shadow-sm: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 10px 28px rgba(0, 0, 0, .22);
  --shadow-md: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 18px 42px rgba(0, 0, 0, .3);
  --shadow-lg: 0 1px 0 rgba(255, 255, 255, .055) inset, 0 30px 80px rgba(0, 0, 0, .4);
}

html { color-scheme: dark; }

body {
  background:
    radial-gradient(circle at 12% 10%, rgba(37, 99, 235, .2), transparent 30rem),
    radial-gradient(circle at 88% 86%, rgba(124, 92, 246, .12), transparent 27rem),
    linear-gradient(180deg, #050814 0%, #080d18 100%);
}

.topbar {
  background: rgba(8, 15, 28, .88);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 44px rgba(0, 0, 0, .28);
}

.topbar::after {
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, .9), transparent);
}

.header-chip,
.account.ak-login-trigger {
  background: rgba(14, 25, 44, .76);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .035) inset, 0 8px 24px rgba(0, 0, 0, .16);
}

.account:hover,
.account.ak-login-trigger:hover {
  border-color: rgba(96, 165, 250, .45);
  background: rgba(21, 40, 72, .9);
}

.account.ak-login-trigger.is-authenticated {
  border-color: rgba(67, 211, 158, .38);
  background: rgba(13, 46, 51, .9);
}

.store,
.checkout-shell,
.blog-shell,
.reader-shell {
  background:
    radial-gradient(circle at 82% 7%, rgba(37, 99, 235, .13), transparent 25rem),
    var(--surface);
  box-shadow: var(--shadow-lg);
}

.store::before,
.checkout-shell::before,
.blog-shell::before,
.reader-shell::before {
  opacity: .5;
  background-image: radial-gradient(rgba(96, 165, 250, .19) .65px, transparent .65px);
}

.store::after,
.checkout-shell::after,
.blog-shell::after {
  border-color: rgba(96, 165, 250, .42);
}

/* Shared sign-in and account dialog. */
.ak-login-dialog {
  color: var(--ink);
  background: var(--surface);
  box-shadow: 0 36px 100px rgba(0, 0, 0, .62), 0 0 0 1px rgba(96, 165, 250, .08);
}

.ak-login-dialog::backdrop { background: rgba(2, 6, 16, .76); }

.ak-login-panel {
  background:
    radial-gradient(circle at 92% 0, rgba(37, 99, 235, .2), transparent 12rem),
    var(--surface);
}

.ak-login-panel::before {
  background-image: radial-gradient(rgba(96, 165, 250, .2) .65px, transparent .65px);
}

.ak-login-close:hover { background: rgba(21, 40, 72, .8); }

.ak-login-field input {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(7, 14, 27, .88);
}

.ak-login-field input:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(124, 180, 255, .18);
}

.ak-login-submit {
  box-shadow: 0 12px 30px rgba(37, 99, 235, .3), 0 1px 0 rgba(255, 255, 255, .15) inset;
}

.ak-login-submit:hover {
  background: var(--orange-strong);
  box-shadow: 0 16px 38px rgba(37, 99, 235, .38), 0 1px 0 rgba(255, 255, 255, .16) inset;
}

.ak-logout-submit { background: var(--surface-soft); }
.ak-logout-submit:hover { background: var(--orange-soft); }

/* Blog home. */
.hero-purchase {
  background: linear-gradient(120deg, rgba(13, 23, 41, .96), rgba(16, 42, 80, .78));
  box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
}

.topic,
.topic:nth-child(2),
.topic:nth-child(3) {
  background: rgba(13, 23, 41, .8);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .16);
}

.topic:nth-child(2) { background: rgba(13, 46, 51, .68); }
.topic:nth-child(3) { background: rgba(30, 26, 61, .72); }

.topic:nth-child(2) .topic-icon,
.post:nth-child(2) .post-index,
.post:nth-child(2) .read-link { color: #71dfcb; }

.topic:nth-child(3) .topic-icon,
.post:nth-child(3) .post-index,
.post:nth-child(3) .read-link { color: #c4b9ff; }

.orbit { border-color: rgba(96, 165, 250, .3); }

.paper {
  background: rgba(12, 22, 39, .96);
  box-shadow: var(--shadow-md);
}

.paper-front::before {
  background-image:
    linear-gradient(rgba(96, 165, 250, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, .08) 1px, transparent 1px);
}

.post,
.post:nth-child(3) {
  background: linear-gradient(145deg, rgba(13, 23, 41, .94), rgba(10, 17, 32, .92));
}

.post:nth-child(2) { background: linear-gradient(145deg, rgba(13, 38, 44, .9), rgba(10, 17, 32, .94)); }
.post:nth-child(3) { background: linear-gradient(145deg, rgba(30, 26, 61, .88), rgba(10, 17, 32, .94)); }

.post-link:hover {
  border-color: rgba(96, 165, 250, .5);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28), 0 0 28px rgba(37, 99, 235, .08);
}

.contact-float {
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 10%, rgba(37, 99, 235, .3), transparent 6rem),
    rgba(7, 14, 27, .96);
  box-shadow: 0 22px 54px rgba(0, 0, 0, .42), 0 0 0 1px rgba(96, 165, 250, .12);
}

/* Product catalog. */
.promo-backdrop {
  border-color: rgba(169, 154, 251, .28);
  background: linear-gradient(135deg, rgba(30, 26, 61, .9), rgba(13, 46, 51, .82));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .26);
}

.promo-graphic {
  border-color: var(--line-strong);
  background:
    radial-gradient(circle at 91% 23%, rgba(96, 165, 250, .22), transparent 7rem),
    linear-gradient(125deg, rgba(13, 23, 41, .98), rgba(16, 42, 80, .9));
}

.promo-graphic::after,
.product-card::after {
  background: linear-gradient(112deg, transparent 30%, rgba(191, 219, 254, .2) 48%, transparent 64%);
}

.family,
.family.quick {
  background: rgba(13, 23, 41, .82);
  box-shadow: 0 16px 42px rgba(0, 0, 0, .2);
}

.family.quick { background: linear-gradient(145deg, rgba(30, 26, 61, .72), rgba(13, 23, 41, .86)); }

.family.quick .family-symbol,
.quick .product-kind,
.quick .price .discount-badge,
.quick .select-link,
.promo-qualifiers span:last-child { color: #c4b9ff; }

.product-card,
.product-card.on-sale,
.quick .product-card.on-sale {
  background: linear-gradient(145deg, rgba(14, 25, 44, .96), rgba(9, 17, 31, .94));
}

.product-card.on-sale {
  border-color: rgba(96, 165, 250, .38);
  background: linear-gradient(145deg, rgba(16, 42, 80, .88), rgba(9, 17, 31, .96));
}

.quick .product-card.on-sale {
  border-color: rgba(169, 154, 251, .4);
  background: linear-gradient(145deg, rgba(30, 26, 61, .88), rgba(9, 17, 31, .96));
}

.product-card:hover,
.product-card:focus-visible {
  border-color: rgba(96, 165, 250, .58);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .32), 0 0 26px rgba(37, 99, 235, .09);
}

/* Checkout and payment completion. */
.error-summary {
  border-color: rgba(255, 123, 134, .38);
  color: #ff9aa3;
  background: rgba(67, 19, 30, .48);
}

.provider-card {
  background: linear-gradient(145deg, rgba(13, 23, 41, .98), rgba(16, 42, 80, .58));
}

.provider-badge { border-color: rgba(67, 211, 158, .3); }
.auth-state { background: rgba(9, 17, 31, .84); }

input,
select {
  border-color: var(--line-strong);
  color: var(--ink);
  background: rgba(7, 14, 27, .9);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
}

input:hover,
select:hover { border-color: rgba(124, 180, 255, .6); }

input:focus,
select:focus {
  border-color: var(--focus);
  background: #0b1425;
  box-shadow: 0 0 0 3px rgba(124, 180, 255, .18);
}

.card-mark { background: linear-gradient(135deg, #14213a 50%, var(--orange-soft) 50%); }
.card-mark:last-child { background: linear-gradient(135deg, var(--lavender-soft) 50%, #14213a 50%); }

.pay-button {
  box-shadow: 0 14px 34px rgba(37, 99, 235, .32), 0 1px 0 rgba(255, 255, 255, .16) inset;
}

.pay-button:hover {
  box-shadow: 0 18px 42px rgba(37, 99, 235, .4), 0 1px 0 rgba(255, 255, 255, .18) inset;
}

.order-panel {
  background: linear-gradient(155deg, rgba(16, 30, 52, .95), rgba(8, 16, 30, .94));
}

.order-panel::before { border-color: rgba(96, 165, 250, .42); }

.gift-card,
.gift-card.quick {
  border-color: rgba(149, 176, 217, .35);
  background:
    radial-gradient(circle at 82% 18%, rgba(96, 165, 250, .24), transparent 8rem),
    rgba(12, 22, 39, .97);
  box-shadow: 0 32px 54px rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .08) inset;
}

.gift-card.quick {
  background:
    radial-gradient(circle at 82% 18%, rgba(169, 154, 251, .25), transparent 8rem),
    rgba(12, 22, 39, .97);
}

.gift-card::before {
  background-image:
    linear-gradient(rgba(96, 165, 250, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, .08) 1px, transparent 1px);
}

.gift-card::after {
  background: linear-gradient(90deg, transparent, rgba(191, 219, 254, .24), transparent);
}

.gift-card.quick .gift-type { color: #c4b9ff; }
.gift-card.quick .signal { background: var(--lavender); box-shadow: 0 0 0 5px rgba(169, 154, 251, .16); }
.delivery-note { background: rgba(9, 17, 31, .74); }
.code-panel { background: linear-gradient(145deg, rgba(17, 30, 52, .98), rgba(11, 24, 45, .96)); }
.action { background: rgba(12, 22, 39, .96); }
.action:hover { background: rgba(16, 42, 80, .82); }

/* Blog article pages. */
.reading-progress { background: rgba(34, 48, 71, .72); }

.article-hero {
  background: radial-gradient(circle at 82% 18%, rgba(37, 99, 235, .14), transparent 23rem);
}

.map-board {
  background:
    linear-gradient(rgba(96, 165, 250, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(96, 165, 250, .08) 1px, transparent 1px),
    rgba(12, 22, 39, .97);
}

.map-lines { color: rgba(124, 180, 255, .42); }

.map-node,
.map-node.concepts,
.map-node.example,
.map-node.mistakes {
  background: rgba(14, 25, 44, .96);
}

.map-node.concepts { background: rgba(13, 46, 51, .94); }
.map-node.example { background: rgba(16, 33, 62, .96); }
.map-node.mistakes { background: rgba(30, 26, 61, .96); }

.map-node.centre {
  border-color: var(--orange-fill);
  background: var(--orange-fill);
}

.prose p { color: #ced7e6; }

table { background: rgba(10, 19, 35, .96); }

.example-card {
  border-color: rgba(96, 165, 250, .3);
  background: linear-gradient(135deg, rgba(13, 46, 51, .68), rgba(10, 19, 35, .96));
}

.example-card::before { color: #b9d5ff; }

.takeaway {
  background: linear-gradient(145deg, rgba(17, 30, 52, .98), rgba(10, 19, 35, .96));
  box-shadow: 0 16px 38px rgba(0, 0, 0, .22);
}

.article-footer { background: rgba(8, 16, 30, .94); }

@media (prefers-reduced-transparency: reduce) {
  .topbar,
  .topic,
  .family,
  .order-panel { background: var(--surface); }
}