/* ==========================================================
   FMRG Theme: ASRA — Arcane System Regulation Authority
   奥术平衡协会
   "Balance the Arcane."

   Usage: add class="theme-asra" to .page
   DARK THEME — deep indigo-black background
   ========================================================== */

.theme-asra{
  /* — Color System (dark mode: light text on deep indigo-black) — */
  --ink:          #e2dff0;
  --muted:        #8a86a0;
  --line:         #3d385a;
  --thin:         rgba(140,130,180,.14);
  --bg:           #0e0d16;
  --accent:       #9b8ad8;          /* soft lavender-indigo */
  --accent-light: rgba(155,138,216,.08);
  --accent-mid:   rgba(155,138,216,.22);

  /* — Borders — */
  --b1: 1.5px solid var(--line);
  --b0: 1px solid var(--thin);

  /* — Letterhead — */
  --lh-h:       126px;
  --lh-logo-h:  72px;
  --lh-pad-x:   22px;
  --lh-gap:     12px;

  /* — Paper & Background Texture — */
  --paper-tint:        rgba(30,20,50,.6);
  --stardust-opacity:  .06;
  --sigil-opacity:     .06;
  --corner-opacity:    .14;

  /* — Watermark — */
  --wm-opacity:      .05;
  --wm-color:        #e2dff0;
  --wm-rotate:       -8deg;
  --wm-letterspace:  .38em;

  /* — Stamp — */
  --stamp-size:      134px;
  --stamp-ink:       var(--accent);
  --stamp-opacity:   .16;
  --stamp-rotate:    -10deg;
  --stamp-x:         0px;
  --stamp-y:         0px;

  /* — Footer Banner — */
  --fb-bg:       rgba(155,138,216,.05);
  --fb-border:   rgba(155,138,216,.18);

  /* — Override base body background for dark theme — */
  color: var(--ink);
}


/* ==========================================================
   BODY & PAGE — dark shell
   ========================================================== */
.page.theme-asra{
  box-shadow:
    0 1px 2px rgba(0,0,0,.3),
    0 8px 32px rgba(0,0,0,.5);
  border-color: rgba(155,138,216,.08);
}


/* ==========================================================
   LETTERHEAD — deep arcane arc + seal line
   ========================================================== */
.page.theme-asra .letterhead{
  background:
    radial-gradient(
      ellipse at 50% 120%,
      rgba(155,138,216,.06),
      transparent 60%
    ),
    linear-gradient(to bottom,
      rgba(140,130,180,.04) 0%,
      transparent 80%
    );
  border-bottom: 2.5px solid var(--line);
}


/* ==========================================================
   COMPONENT BACKGROUNDS — dark glass panels
   (override base's rgba(255,255,255,.78))
   ========================================================== */
.page.theme-asra .header,
.page.theme-asra .subject,
.page.theme-asra .summary,
.page.theme-asra .sections,
.page.theme-asra .items,
.page.theme-asra .footer{
  background: rgba(255,255,255,.03);
}

.page.theme-asra .summary .box,
.page.theme-asra .tl-item,
.page.theme-asra .sign-box{
  background: rgba(255,255,255,.025);
}

.page.theme-asra .kv-key{
  background: rgba(255,255,255,.03);
}
.page.theme-asra .avatar-slot{
  background: rgba(255,255,255,.02);
}
.page.theme-asra .avatar-img{
  border-color: var(--thin);
  background: rgba(255,255,255,.03);
}

.page.theme-asra .items-table th{
  background: rgba(155,138,216,.06);
}

/* ==========================================================
   TITLE PAGE COVER - dark text box background
   ========================================================== */
.page.theme-asra.title-page .cover-card,
.page.theme-asra.cover-page .cover-card{
  background: rgba(20,16,34,.84);
  border-color: rgba(155,138,216,.35);
  box-shadow: inset 0 0 0 1px rgba(155,138,216,.14);
}
.page.theme-asra.title-page .cover-grid .k,
.page.theme-asra.cover-page .cover-grid .k{
  background: rgba(155,138,216,.08);
}
.page.theme-asra.title-page .cover-grid .v,
.page.theme-asra.cover-page .cover-grid .v{
  background: rgba(255,255,255,.02);
}


/* ==========================================================
   PAPER TEXTURE — Deep space + Stardust + Sigil Rings
   ========================================================== */
.page.theme-asra::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    /* L1 — deep indigo centre glow */
    radial-gradient(
      ellipse at 50% 40%,
      var(--paper-tint),
      transparent 70%
    ),
    /* L2 — stardust: sparse dots (larger) */
    radial-gradient(
      rgba(200,190,240,var(--stardust-opacity)) .8px,
      transparent .8px
    ),
    /* L3 — stardust: sparse dots (smaller, offset) */
    radial-gradient(
      rgba(180,170,220,var(--stardust-opacity)) .5px,
      transparent .5px
    ),
    /* L4 — sigil ring: inner circle */
    radial-gradient(
      circle at 50% 48%,
      transparent 140px,
      rgba(155,138,216,var(--sigil-opacity)) 141px,
      rgba(155,138,216,var(--sigil-opacity)) 143px,
      transparent 144px
    ),
    /* L5 — sigil ring: outer circle */
    radial-gradient(
      circle at 50% 48%,
      transparent 190px,
      rgba(155,138,216,calc(var(--sigil-opacity) * .5)) 191px,
      rgba(155,138,216,calc(var(--sigil-opacity) * .5)) 192px,
      transparent 193px
    ),
    /* L6 — edge vignette (darker corners) */
    radial-gradient(
      ellipse at 50% 50%,
      transparent 40%,
      rgba(0,0,0,.15) 100%
    );
  background-size:
    100% 100%,
    7px 7px,
    5px 5px,
    100% 100%,
    100% 100%,
    100% 100%;
  background-position:
    0 0,
    0 0,
    3px 3px,
    0 0,
    0 0,
    0 0;
}


/* ==========================================================
   CORNER RUNE MARKS — four corners (lighter for dark bg)
   ========================================================== */
.page.theme-asra::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    /* ── top-left corner: L + inner tick ── */
    linear-gradient(rgba(155,138,216,var(--corner-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,138,216,var(--corner-opacity)) 1px, transparent 1px),
    linear-gradient(45deg, rgba(155,138,216,calc(var(--corner-opacity) * .5)) 1px, transparent 1px),
    /* ── top-right corner ── */
    linear-gradient(rgba(155,138,216,var(--corner-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,138,216,var(--corner-opacity)) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(155,138,216,calc(var(--corner-opacity) * .5)) 1px, transparent 1px),
    /* ── bottom-left corner ── */
    linear-gradient(rgba(155,138,216,var(--corner-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,138,216,var(--corner-opacity)) 1px, transparent 1px),
    linear-gradient(-45deg, rgba(155,138,216,calc(var(--corner-opacity) * .5)) 1px, transparent 1px),
    /* ── bottom-right corner ── */
    linear-gradient(rgba(155,138,216,var(--corner-opacity)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155,138,216,var(--corner-opacity)) 1px, transparent 1px),
    linear-gradient(45deg, rgba(155,138,216,calc(var(--corner-opacity) * .5)) 1px, transparent 1px);
  background-size:
    28px 1px, 1px 28px, 14px 14px,
    28px 1px, 1px 28px, 14px 14px,
    28px 1px, 1px 28px, 14px 14px,
    28px 1px, 1px 28px, 14px 14px;
  background-position:
    10px 10px, 10px 10px, 10px 10px,
    calc(100% - 10px) 10px, calc(100% - 10px) 10px, calc(100% - 10px) 10px,
    10px calc(100% - 10px), 10px calc(100% - 10px), 10px calc(100% - 10px),
    calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) calc(100% - 10px);
  background-repeat: no-repeat;
}


/* ==========================================================
   WATERMARK — light text on dark
   ========================================================== */
.page.theme-asra .watermark .wm-text{
  font-size: 66px;
  letter-spacing: var(--wm-letterspace);
  transform: rotate(var(--wm-rotate));
}


/* ==========================================================
   CHIP — soft lavender on dark
   ========================================================== */
.page.theme-asra .chip{
  border-color: var(--accent-mid);
  color: var(--accent);
  background: var(--accent-light);
}


/* ==========================================================
   STAMP — regulation seal (lavender on dark)
   ========================================================== */
.page.theme-asra .stamp{
  transform: rotate(var(--stamp-rotate));
  border-color: rgba(155,138,216,.30);
  color: var(--accent);
  box-shadow: inset 0 0 0 4px transparent, inset 0 0 0 5px rgba(155,138,216,.08);
}


/* ==========================================================
   FOOTER BANNER — dark glass, light accent border
   ========================================================== */
.page.theme-asra .footer-banner{
  background: var(--fb-bg);
  border-color: var(--fb-border);
}
.page.theme-asra .fb-org{
  color: var(--ink);
  opacity: .7;
}
.page.theme-asra .fb-badge{
  background: rgba(155,138,216,.06);
}


/* ==========================================================
   DISCLAIMER — brighter on dark
   ========================================================== */
.page.theme-asra .disclaimer{
  color: var(--muted);
}


/* ==========================================================
   META & MISC — ensure readability on dark
   ========================================================== */
.page.theme-asra .lh-meta .lh-tag{
  border-color: var(--accent-mid);
  color: var(--accent);
}
.page.theme-asra .fb-logo{
  opacity: .65;
  filter: brightness(1.6);
}