@import url("https://cdn.jsdelivr.net/npm/@chinese-fonts/cubic@3.0.0/dist/Cubic/result.css");
@import url("https://chinese-fonts-cdn.deno.dev/packages/qxs/dist/quan/result.css");

/* ==========================================================
   FMRG Theme: FRB — Future Restoration Bureau
   未来修补办公室
   "Mending Broken Stories."

   Usage: add class="theme-frb" to .page
   PIXEL-CUTE — 8-bit sticker UI, candy palette
   ========================================================== */

.theme-frb{
  --font:         "Cubic 11","Cubic","Quan","qxs-quan","Noto Sans SC","Source Han Sans SC",sans-serif;
  --sans:         "Cubic 11","Cubic","Quan","qxs-quan","Noto Sans SC","Source Han Sans SC",sans-serif;

  /* — Color System (warm cream base, mint accent) — */
  --ink:          #2a2438;
  --muted:        #8a8098;
  --line:         #4a4260;
  --thin:         rgba(74,66,96,.16);
  --bg:           #fdf9f3;
  --accent:       #5dba9e;          /* soft mint-green */
  --accent-light: rgba(93,186,158,.07);
  --accent-mid:   rgba(93,186,158,.24);
  --panel-bg:     rgba(93,186,158,.03);

  /* — Pixel Borders (override base rounded borders) — */
  --b1: 2px solid var(--line);
  --b0: 1.5px solid var(--thin);
  --r:  2px;                        /* near-square pixel corners */

  /* — Pixel Shadow — */
  --pixel-shadow: 3px 3px 0 rgba(74,66,96,.10);

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

  /* — Dot Matrix Background — */
  --dot-opacity:  .045;
  --dot-size:     1.5px;
  --dot-gap:      14px;

  /* — Watermark — */
  --wm-opacity:      .04;
  --wm-color:        var(--accent);
  --wm-rotate:       0deg;
  --wm-letterspace:  .30em;

  /* — Stamp (sticker style) — */
  --stamp-size:      132px;
  --stamp-ink:       var(--accent);
  --stamp-opacity:   .55;
  --stamp-rotate:    4deg;
  --stamp-x:         0px;
  --stamp-y:         0px;

  /* — Footer Banner — */
  --fb-bg:       rgba(93,186,158,.05);
  --fb-border:   rgba(93,186,158,.22);

  /* — UI Font override — */
  --ui-font:     "Cubic 11","Cubic","Quan",var(--mono);
}


/* ==========================================================
   PAGE — pixel outer border + shadow
   ========================================================== */
.page.theme-frb{
  border: 2.5px solid var(--line);
  border-radius: 0;
  box-shadow:
    4px 4px 0 rgba(74,66,96,.12),
    8px 8px 0 rgba(74,66,96,.05);
}


/* ==========================================================
   LETTERHEAD — pixel dither separator
   ========================================================== */
.page.theme-frb .letterhead{
  background:
    linear-gradient(to bottom,
      rgba(93,186,158,.04) 0%,
      transparent 80%
    );
  border-bottom: none;
  /* pixel-tooth separator via repeating gradient */
  background-image:
    linear-gradient(to bottom, rgba(93,186,158,.04) 0%, transparent 80%),
    repeating-linear-gradient(
      to right,
      var(--line) 0px, var(--line) 4px,
      transparent 4px, transparent 8px
    );
  background-size: 100% 100%, 8px 3px;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat, repeat-x;
}


/* ==========================================================
   DOT MATRIX BACKGROUND
   ========================================================== */
.page.theme-frb::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;
  background:
    /* L1 — dot matrix (main) */
    radial-gradient(
      circle,
      rgba(93,186,158,var(--dot-opacity)) var(--dot-size),
      transparent var(--dot-size)
    ),
    /* L2 — secondary dots (offset, slightly bigger, sparser) */
    radial-gradient(
      circle,
      rgba(200,160,210,calc(var(--dot-opacity) * .4)) 2px,
      transparent 2px
    );
  background-size:
    var(--dot-gap) var(--dot-gap),
    42px 42px;
  background-position:
    0 0,
    7px 7px;
}


/* ==========================================================
   PIXEL PANEL — all content cards get pixel box style
   ========================================================== */
.page.theme-frb .header,
.page.theme-frb .subject,
.page.theme-frb .summary,
.page.theme-frb .sections,
.page.theme-frb .items,
.page.theme-frb .footer{
  border: var(--b1);
  border-radius: var(--r);
  box-shadow: var(--pixel-shadow);
  background: rgba(255,255,255,.82);
}

.page.theme-frb .summary .box,
.page.theme-frb .tl-item,
.page.theme-frb .sign-box{
  border-radius: var(--r);
  box-shadow: 2px 2px 0 rgba(74,66,96,.06);
}


/* ==========================================================
   WATERMARK — cute mono text, no rotation
   ========================================================== */
.page.theme-frb .watermark .wm-text{
  font-family: var(--ui-font);
  font-size: 72px;
  font-weight: 900;
  letter-spacing: var(--wm-letterspace);
  transform: rotate(var(--wm-rotate));
}


/* ==========================================================
   CHIP — pixel UI tag / sticker label
   ========================================================== */
.page.theme-frb .chip{
  border: 1.5px solid var(--accent-mid);
  color: var(--accent);
  background: var(--accent-light);
  border-radius: 2px;
  font-family: var(--ui-font);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 1px 1px 0 rgba(74,66,96,.06);
}


/* ==========================================================
   SECTION TITLE — pixel UI header feel
   ========================================================== */
.page.theme-frb .section-title{
  font-family: var(--ui-font);
}
.page.theme-frb .section-title .small{
  color: var(--accent);
}


/* ==========================================================
   TABLE — pixel panel header
   ========================================================== */
.page.theme-frb .items-table th{
  background: var(--panel-bg);
  font-family: var(--ui-font);
  letter-spacing: .04em;
  border-top: var(--b0);
}


/* ==========================================================
   STAMP — pixel sticker (override circle to rounded-rect)
   ========================================================== */
.page.theme-frb .stamp{
  width: var(--stamp-size);
  height: var(--stamp-size);
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  color: var(--stamp-ink);
  transform: translate(var(--stamp-x), var(--stamp-y)) rotate(var(--stamp-rotate));
}
.page.theme-frb .stamp span{
  font-family: var(--ui-font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}


/* ==========================================================
   FOOTER BANNER — pixel status bar
   ========================================================== */
.page.theme-frb .footer-banner{
  border: 2px solid var(--fb-border);
  border-radius: var(--r);
  box-shadow: var(--pixel-shadow);
  background: var(--fb-bg);
}
.page.theme-frb .fb-badge{
  font-family: var(--ui-font);
  border-radius: 2px;
  border: 1.5px solid var(--accent-mid);
  background: var(--accent-light);
  box-shadow: 1px 1px 0 rgba(74,66,96,.06);
}


/* ==========================================================
   META — UI font for system fields
   ========================================================== */
.page.theme-frb .meta-k,
.page.theme-frb .lh-meta{
  font-family: var(--ui-font);
}
.page.theme-frb .lh-meta .lh-tag{
  border-color: var(--accent-mid);
  color: var(--accent);
  border-radius: 2px;
  box-shadow: 1px 1px 0 rgba(74,66,96,.05);
}
.page.theme-frb .issuer-org,
.page.theme-frb .items-hd{
  font-family: var(--ui-font);
}