:root{
      --ink:#111;
      --muted:#555;
      --paper:#f7f6f2;
      --paper2:#fbfbf8;
      --line:#d8d5cd;
      --dash:#cfcbbf;
      --panel-bg:#ffffff;
      --panel-bg-soft:#ffffff;
      --panel-border:var(--line);
      --panel-dash:var(--dash);
      --panel-ink:#222222;
      --panel-ink-soft:#333333;

      --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      --sans: system-ui, -apple-system, Segoe UI, Roboto, Arial, "PingFang SC", "Microsoft YaHei", sans-serif;

      /* 尺寸 */
      --ticket-w: 392px;     /* 手机票宽 */
      --receipt-mm: 80mm;    /* 热敏纸宽 */
      --receipt-max: 320px;  /* 屏幕最大宽 */

      /* 背景纹理参数（可调） */
      --bg-a: rgba(0,0,0,.035);
      --bg-b: rgba(0,0,0,.02);
      --bg-c: rgba(0,0,0,.015);
    }

    /* Theme-specific font mapping */
    html[data-theme-id="ssda"]{
      --sans: "Huiwen-MinchoGBK", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      --mono: "Huiwen-MinchoGBK", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    html[data-theme-id="cmls"]{
      --sans: "Huiwen-Fangsong", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      --mono: "Huiwen-Fangsong", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    html[data-theme-id="frb"]{
      --sans: "Cubic 11", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      --mono: "QuanPixel 8px", "Cubic 11", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    html[data-theme-id="fgsao"]{
      --sans: "LXGW Neo ZhiSong CHS", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      --mono: "LXGW Neo ZhiSong CHS", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    html[data-theme-id="iumd"]{
      --sans: "Source Han Serif CN", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
      --mono: "Source Han Serif CN", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    }

    html[data-theme-id="aoa"]{
      --sans: "Source Han Serif CN", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
      --mono: "Source Han Serif CN", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    }

    html[data-theme-id="asra"]{
      --sans: "Source Han Serif CN", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
      --mono: "Source Han Serif CN", "Source Han Serif SC", "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif;
    }

    html[data-theme-id="ffmc"]{
      --sans: "Huiwen-ZhengKai", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
      --mono: "Huiwen-ZhengKai", "Source Han Sans CN", "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:var(--sans);
      color:var(--ink);
      padding:18px;
      background:
        radial-gradient(900px 500px at 20% 0%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
        radial-gradient(800px 420px at 85% 20%, rgba(255,255,255,.6), rgba(255,255,255,0) 70%),
        repeating-linear-gradient(45deg, var(--bg-b) 0 2px, transparent 2px 10px),
        repeating-linear-gradient(0deg, var(--bg-c) 0 1px, transparent 1px 7px),
        #ededed;
    }

    .wrap{
      max-width:980px;
      margin:0 auto;
      display:grid;
      gap:14px;
      justify-items:center;
    }

    .modePreviewBar{
      width:min(980px, calc(100% - 36px));
      margin:0 auto 10px;
      padding:10px 12px;
      border:1px solid rgba(0,0,0,.1);
      background:#fff;
      display:flex;
      gap:10px;
      align-items:center;
      justify-content:space-between;
      box-shadow:0 4px 14px rgba(0,0,0,.06);
    }
    .modePreviewTitle{
      font-size:12px;
      font-weight:800;
      letter-spacing:.02em;
      color:#2a2a2a;
    }
    .modePreviewActions{
      display:flex;
      gap:8px;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .modeGroupLabel{
      font-size:11px;
      color:#5f6a76;
      padding:0 2px;
      font-weight:700;
    }
    .modePreviewActions button{
      appearance:none;
      border:1px solid #cfd6de;
      background:#fff;
      color:#1f2a35;
      padding:6px 10px;
      border-radius:8px;
      font-size:12px;
      line-height:1.2;
      text-decoration:none;
      cursor:pointer;
    }
    .modePreviewActions button[aria-current="true"]{
      border-color:#516f8f;
      background:#edf4fb;
      font-weight:800;
    }
    .modeHint{
      font-size:11px;
      color:#5f6a76;
      padding-left:2px;
      white-space:nowrap;
    }
    .modeState{
      font-size:11px;
      color:#2f5f95;
      font-weight:700;
      padding-left:2px;
      white-space:nowrap;
    }

    @media (max-width:980px){
      .modePreviewBar{
        width:min(980px, calc(100% - 20px));
      }
      .modeState{
        width:100%;
        text-align:right;
      }
    }

    /* 一个可导出的画布容器：导出时截图这块 */
    .stage{
      display:grid;
      gap:14px;
      justify-items:center;
      padding:16px;
      width:min(980px, 100%);
      border:1px solid rgba(0,0,0,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)),
        repeating-linear-gradient(90deg, rgba(0,0,0,.03) 0 1px, transparent 1px 16px);
      box-shadow:0 6px 18px rgba(0,0,0,.06);
    }

    /* ==================== MOVIE TICKET (mobile) ==================== */
    .ticket{
      width:min(var(--ticket-w), 100%);
      overflow:hidden;
      border:1px solid var(--line);
      box-shadow:0 1px 0 rgba(0,0,0,.04);
      background:
        /* 顶部校准网格 */
        repeating-linear-gradient(90deg, rgba(0,0,0,.035) 0 1px, transparent 1px 14px),
        repeating-linear-gradient(0deg, rgba(0,0,0,.025) 0 1px, transparent 1px 10px),
        linear-gradient(180deg, var(--paper2), var(--paper));
      position:relative;
    }

    /* 角标/定位点（纯CSS，html2canvas可渲染） */
    .ticket:before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 10px 10px, rgba(0,0,0,.10) 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 10px) 10px, rgba(0,0,0,.10) 0 2px, transparent 3px),
        radial-gradient(circle at 10px calc(100% - 10px), rgba(0,0,0,.10) 0 2px, transparent 3px),
        radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), rgba(0,0,0,.10) 0 2px, transparent 3px);
      opacity:.35;
      pointer-events:none;
    }

    .ticketHeader{
      padding:12px 12px 10px 12px;
      border-bottom:1px solid var(--line);
      display:grid;
      grid-template-columns:minmax(0, 1fr) minmax(110px, 36%);
      gap:8px;
      align-items:start;
      position:relative;
    }

    .brand{
      display:grid;
      grid-template-columns:44px minmax(0, 1fr);
      gap:10px;
      align-items:start;
      min-width:0;
    }
    .sigil{
      width:44px;height:44px;
      border:1px solid var(--line);
      background:#fff;
      display:grid;
      place-items:center;
      font-family:var(--mono);
      font-weight:900;
      letter-spacing:.02em;
      flex:0 0 auto;
      overflow:hidden;
    }
    .sigil img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
    }
    .brandText{
      min-width:0;
      display:grid;
      gap:4px;
      align-content:start;
    }
    .brandTop{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:6px 8px;
      align-items:start;
      min-width:0;
    }
    .brandTop .cn{
      font-size:15.5px;
      font-weight:950;
      letter-spacing:.01em;
      line-height:1.2;
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      max-width:none;
      word-break:break-word;
    }
    .brandLine{
      margin-top:0;
      min-width:0;
    }
    .brandTop .code{
      font-family:var(--mono);
      font-size:10.5px;
      color:var(--panel-ink-soft);
      border:1px solid var(--panel-border);
      background:var(--panel-bg-soft);
      padding:2px 6px;
      white-space:nowrap;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      justify-self:end;
      align-self:start;
    }
    .brandText .en{
      margin-top:0;
      font-family:var(--mono);
      font-size:11px;
      color:var(--muted);
      letter-spacing:.02em;
      line-height:1.3;
      white-space:normal;
      overflow:visible;
      text-overflow:clip;
      max-width:none;
      word-break:break-word;
      flex:1 1 220px;
    }
    .tagline{
      font-family:var(--mono);
      font-size:8.7px;
      color:#666;
      border:none;
      background:transparent;
      padding-top:1px;
      line-height:1.2;
      text-align:right;
      min-width:96px;
      width:100%;
      max-width:150px;
      justify-self:end;
      display:grid;
      align-content:start;
      justify-items:end;
      gap:2px;
    }
    .tagline > div{
      width:100%;
    }
    .tagline b{
      font-weight:600;
      display:block;
      word-break:break-word;
      overflow-wrap:anywhere;
    }
    .tagline .muted{
      color:inherit;
      opacity:.78;
      display:block;
      word-break:break-word;
      overflow-wrap:anywhere;
    }

    .ticketBody{padding:12px 12px 12px 12px; position:relative;}
    .filmTitle{
      margin:0 0 4px 0;
      font-size:20px;
      font-weight:900;
      letter-spacing:.015em;
      font-kerning:none;
      font-synthesis:none;
      text-rendering:optimizeSpeed;
      line-height:1.15;
    }
    .filmSub{
      margin:0 0 10px 0;
      font-size:12.5px;
      color:var(--muted);
      line-height:1.35;
    }

    .metaGrid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:10px 12px;
      border-top:1px solid var(--line);
      padding-top:10px;
    }
    .kv .k{
      font-family:var(--mono);
      font-size:10.5px;
      color:var(--muted);
      letter-spacing:.03em;
      text-transform:uppercase;
    }
    .kv .v{
      margin-top:3px;
      font-size:13.5px;
      font-weight:850;
      line-height:1.25;
      word-break:break-word;
    }

    .codeRow{
      margin-top:12px;
      display:block;
    }
    .box{
      border:1px solid var(--panel-border);
      background:var(--panel-bg);
      padding:10px 12px;
    }
    .barcodeSim{
      height:58px;
      border:1px dashed var(--dash);
      display:flex;
      align-items:flex-end;
      justify-content:center;
      position:relative;
      overflow:hidden;
      background:none !important;
      background-color:transparent !important;
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      margin-bottom:8px;
      letter-spacing:.03em;
    }
    .barcodeBars{
      position:absolute;
      left:10px;
      right:10px;
      top:10px;
      bottom:12px;
      pointer-events:none;
    }
    .barcodeBars i{
      position:absolute;
      top:0;
      bottom:0;
      background:#151515;
      border-radius:.2px;
    }
    .codeLabel{
      font-family:var(--mono);
      font-size:10.5px;
      color:var(--muted);
      word-break:normal;
      overflow-wrap:anywhere;
      line-height:1.25;
      text-align:center;
    }

    .perforation{
      margin-top:12px;
      height:18px;
      display:flex;
      align-items:center;
      border-top:1px solid var(--line);
      border-bottom:1px solid var(--line);
      background:var(--panel-bg);
      position:relative;
      overflow:hidden;
    }
    .perforation:before{
      content:"";
      position:absolute;
      left:0;right:0;top:50%;
      transform:translateY(-50%);
      border-top:1px dashed var(--dash);
    }
    .perforation .stub{
      font-family:var(--mono);
      font-size:10.5px;
      color:var(--muted);
      padding:0 12px;
      background:var(--panel-bg);
      position:relative;
    }

    .finePrint{
      margin-top:10px;
      border-top:1px solid var(--line);
      padding-top:10px;
      font-size:11px;
      color:#2b2b2b;
      line-height:1.45;
    }
    .finePrint .mono{font-family:var(--mono)}
    .finePrint .muted{color:var(--muted)}
    .easterEgg{
      margin-top:7px;
      font-family:var(--mono);
      font-size:10.8px;
      color:var(--panel-ink);
      line-height:1.35;
      border:1px dashed var(--panel-dash);
      background:var(--panel-bg);
      padding:8px 10px;
    }
    .easterEgg b{font-weight:950}

    /* ==================== MOVIE INTRO PAGE ==================== */
    .movieSheet{
      width:min(var(--ticket-w), 100%);
      border:1px solid var(--line);
      box-shadow:0 1px 0 rgba(0,0,0,.04);
      background:
        linear-gradient(180deg, #fbfbf8, #f5f4ef);
      padding:10px;
    }
    .movieHeader{
      padding:0 0 8px 0;
      border-bottom:1px solid var(--line);
      margin-bottom:8px;
      display:grid;
      grid-template-columns:34px minmax(0, 1fr);
      gap:8px;
      align-items:start;
    }
    .movieHeader .sigil{
      width:34px;
      height:34px;
      font-size:13px;
    }
    .movieHeaderText{
      min-width:0;
      display:grid;
      gap:2px;
      align-content:start;
    }
    .movieHeaderTop{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      gap:5px 8px;
      align-items:start;
      min-width:0;
    }
    .movieHeaderName{
      font-size:12.5px;
      font-weight:850;
      line-height:1.2;
      word-break:break-word;
    }
    .movieHeaderTag{
      font-family:var(--mono);
      font-size:9px;
      color:var(--panel-ink-soft);
      border:1px solid var(--panel-border);
      background:var(--panel-bg-soft);
      padding:3px 7px;
      white-space:nowrap;
      text-align:right;
      line-height:1.35;
      min-width:56px;
      max-width:none;
      justify-self:end;
      align-self:start;
      box-sizing:border-box;
      overflow:visible;
      text-overflow:clip;
    }
    .movieHeaderSub{
      margin-top:0;
      font-family:var(--mono);
      font-size:9.5px;
      color:var(--muted);
      line-height:1.3;
      word-break:break-word;
    }
    .movieSheet .sheetTitle{
      margin:0 0 4px 0;
      font-size:16px;
      font-weight:850;
      letter-spacing:.01em;
      font-kerning:none;
      font-synthesis:none;
      text-rendering:optimizeSpeed;
      line-height:1.2;
    }
    .movieSheet .sheetSub{
      margin:0 0 10px 0;
      font-size:11px;
      color:var(--muted);
      line-height:1.4;
    }
    .movieHero{
      display:grid;
      grid-template-columns:1fr;
      gap:10px;
      align-items:start;
    }
    .posterSlot{
      width:min(68%, 220px);
      margin:0 auto;
      aspect-ratio:2 / 3;
      border:1px dashed var(--panel-dash);
      background:var(--panel-bg);
      display:grid;
      place-items:center;
      color:var(--muted);
      font-family:var(--mono);
      font-size:10.5px;
      overflow:hidden;
      text-align:center;
      padding:8px;
    }
    .posterSlot img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .movieMeta{
      display:grid;
      gap:8px;
    }
    .movieInfoGrid{
      display:grid;
      grid-template-columns:1fr;
      gap:6px;
    }
    .movieInfoItem{
      border:1px dashed var(--panel-dash);
      background:var(--panel-bg);
      padding:6px 7px;
    }
    .movieInfoItem .k{
      font-family:var(--mono);
      font-size:9.5px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.03em;
    }
    .movieInfoItem .v{
      margin-top:2px;
      font-size:12px;
      font-weight:700;
      line-height:1.3;
      word-break:break-word;
    }
    .synopsisBlock{
      border:1px solid var(--panel-border);
      background:var(--panel-bg);
      padding:7px 8px;
    }
    .synopsisBlock .k{
      font-family:var(--mono);
      font-size:9.5px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.03em;
    }
    .synopsisBlock p{
      margin:5px 0 0 0;
      font-size:11.5px;
      line-height:1.5;
      color:var(--panel-ink);
      white-space:pre-line;
    }
    .castBlock{
      margin-top:10px;
      border-top:1px solid var(--line);
      padding-top:8px;
    }
    .castBlock .k{
      font-family:var(--mono);
      font-size:9.5px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:.03em;
      margin-bottom:6px;
    }
    .castList{
      display:grid;
      grid-template-columns:repeat(2, minmax(0, 1fr));
      gap:6px;
    }
    .castCard{
      border:1px solid var(--panel-border);
      background:var(--panel-bg);
      padding:5px;
    }
    .castPhoto{
      width:100%;
      aspect-ratio:1 / 1;
      border:1px dashed var(--panel-dash);
      background:var(--panel-bg-soft);
      display:grid;
      place-items:center;
      font-family:var(--mono);
      font-size:10px;
      color:var(--muted);
      overflow:hidden;
      text-align:center;
    }
    .castPhoto img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .castName{
      margin-top:5px;
      font-size:11px;
      font-weight:800;
      line-height:1.25;
      word-break:break-word;
    }
    .castRole{
      margin-top:2px;
      font-size:10px;
      color:var(--muted);
      line-height:1.25;
      word-break:break-word;
    }
    .castEmpty{
      font-size:11px;
      color:var(--muted);
      font-family:var(--mono);
      border:1px dashed var(--panel-dash);
      padding:10px;
      text-align:center;
      background:var(--panel-bg);
      grid-column:1 / -1;
    }

    @media (max-width:340px){
      .posterSlot{width:min(82%, 220px)}
      .castList{grid-template-columns:1fr}
    }

    @media (max-width:420px){
      .ticketHeader{
        grid-template-columns:minmax(0, 1fr) 104px;
        gap:6px;
      }
      .brand{
        grid-template-columns:38px minmax(0, 1fr);
        gap:8px;
      }
      .sigil{
        width:38px;
        height:38px;
      }
      .brandTop .cn{font-size:14.5px}
      .brandText .en{
        font-size:10px;
        line-height:1.25;
      }
      .tagline{
        font-size:8.2px;
        min-width:90px;
        max-width:132px;
      }
      .filmTitle{font-size:18px}
      .movieHeader{
        grid-template-columns:30px minmax(0, 1fr);
        gap:7px;
      }
      .movieHeader .sigil{
        width:30px;
        height:30px;
      }
      .movieHeaderName{font-size:12px}
      .movieHeaderSub{font-size:9px}
      .movieHeaderTag{
        font-size:8.5px;
        min-width:52px;
        max-width:none;
        line-height:1.35;
      }
      .movieSheet .sheetTitle{font-size:15px}
      .movieSheet .sheetSub{font-size:10.5px}
    }

    /* ==================== RECEIPT (thermal 80mm) ==================== */
    .receipt{
      width: min(var(--receipt-mm), 100%, var(--receipt-max));
      background:#fff;
      border:none;
      box-shadow:0 1px 0 rgba(0,0,0,.04);
      padding:12px 10px 10px 10px;
      font-family:var(--mono);
      position:relative;
      overflow:hidden;
    }
    /* 规则：小票默认纯白底，不叠加动态/纹理背景 */
    .receipt:before{display:none}
    .receiptInner{position:relative}

    /* 小票抬头：更像真实热敏打印的“居中+两行+meta块” */
    .receiptHeader{
      text-align:center;
      margin-bottom:8px;
    }
    .receiptHeader .logoSlot{
      width:108px;
      height:108px;
      margin:0 auto 6px;
      border:none;
      background:transparent;
      display:grid;
      place-items:center;
      font-size:10px;
      letter-spacing:.03em;
      overflow:hidden;
    }
    .receiptHeader .logoSlot img{
      width:100%;
      height:100%;
      object-fit:contain;
      display:block;
    }
    .receiptHeader .name{
      font-weight:950;
      font-size:13.5px;
      letter-spacing:.02em;
      line-height:1.25;
      word-break:break-word;
    }
    .receiptHeader .sub{
      margin-top:3px;
      font-size:10.5px;
      color:#222;
    }

    .receiptMeta{
      margin-top:7px;
      text-align:left;
      border-top:1px dashed #8c8c8c;
      border-bottom:1px dashed #8c8c8c;
      padding:7px 0;
      font-size:10.5px;
      line-height:1.35;
    }
    .metaRow{display:flex;justify-content:space-between;gap:8px}
    .metaRow span{white-space:nowrap}
    .metaRow .left{overflow:hidden;text-overflow:ellipsis}

    .rline{border-top:1px dashed #8c8c8c;margin:8px 0}

    .rtbl{
      width:100%;
      border-collapse:collapse;
      font-size:11.5px;
    }
    .rtbl th,.rtbl td{padding:3px 0;vertical-align:top}
    .rtbl th{
      font-weight:950;
      text-align:left;
      border-bottom:1px dashed #8c8c8c;
      padding-bottom:5px;
    }
    .rtbl td:last-child,.rtbl th:last-child{text-align:right;white-space:nowrap}

    .subline{
      font-size:10.5px;
      color:#222;
      line-height:1.25;
      margin-top:2px;
    }
    .status{
      font-size:10.5px;
      color:#222;
      margin-top:2px;
    }

    .sumRow{
      display:flex;
      justify-content:space-between;
      font-size:11.5px;
      padding:2px 0;
    }
    .sumRow strong{font-weight:950}

    .thanks{
      margin-top:8px;
      text-align:center;
      font-size:10.5px;
      line-height:1.35;
      color:#111;
    }
    .footerNote{
      margin-top:6px;
      text-align:center;
      font-size:10px;
      color:#222;
    }

    @media print{
      body{background:#fff;padding:0}
      .modePreviewBar{display:none !important}
      .wrap{max-width:none;margin:0;padding:0;gap:10px}
      .stage{border:none;box-shadow:none;background:#fff;padding:0}
      .ticket,.movieSheet,.receipt{box-shadow:none}
    }