/* Dimensional Cinema Administration App Shell
   Core flow UI + forms + crop modal.
   Ticket/movie/receipt visual style is delegated to base.css + theme-*.css. */

:root{
  /* New global UI palette: warm amber + sea-green */
  --hub-bg:#100e08;
  --hub-bg-2:#1b1710;
  --hub-bg-3:#272113;
  --hub-surface:rgba(30,24,16,.74);
  --hub-surface-2:rgba(24,20,14,.8);
  --hub-text:#f6efdf;
  --hub-muted:#c8b998;
  --hub-border:rgba(216,164,74,.34);
  --hub-border-soft:rgba(216,164,74,.2);
  --hub-shadow:0 18px 56px rgba(5,4,2,.55);
  --hub-shadow-soft:0 10px 26px rgba(5,4,2,.38);
  --hub-primary:#d59a3f;
  --hub-primary-2:#79c9b6;
  --hub-primary-hover:#e4ad5b;
  --hub-primary-rgb:213 154 63;
  --hub-secondary-rgb:121 201 182;
  --hub-danger:#e16c5f;
  --hub-aura-1:rgba(216,164,74,.22);
  --hub-aura-2:rgba(121,201,182,.16);
  --hub-aura-3:rgba(181,132,60,.2);
  --hub-panel-gray-1:#16120d;
  --hub-panel-gray-2:#211b14;
  --hub-panel-gray-3:#2d251a;
  --hub-grad-soft:linear-gradient(180deg,rgb(var(--hub-primary-rgb) / .18),var(--hub-panel-gray-2) 52%,var(--hub-panel-gray-3));
  --hub-grad-base:linear-gradient(180deg,rgb(var(--hub-primary-rgb) / .24),var(--hub-panel-gray-2) 44%,var(--hub-panel-gray-3));
  --hub-grad-strong:linear-gradient(180deg,rgb(var(--hub-primary-rgb) / .34),var(--hub-panel-gray-2) 30%,var(--hub-panel-gray-3));
  --hub-input-bg:linear-gradient(180deg,rgb(var(--hub-primary-rgb) / .1),#1b1611 58%,#120f0b);
  --hub-flow-header-border:var(--hub-border);
  --hub-flow-header-bg:linear-gradient(180deg,rgba(83,60,28,.9),rgba(31,24,15,.9));
  --hub-flow-header-glow:0 16px 34px rgba(216,164,74,.22);
  --hub-header-title:#f8edd8;
  --hub-header-sub:#d7c6a5;
  --hub-btn-text:#f8ecd8;
  --hub-btn-primary-text:#2a1a09;
  --hub-label:#e3cfaa;
  --hub-table-head:#e5d2af;
  --hub-input-placeholder:#b79d72;

  --dm-bg:var(--hub-bg);
  --dm-bg-2:var(--hub-bg-2);
  --dm-bg-3:var(--hub-bg-3);
  --dm-surface:var(--hub-surface);
  --dm-surface-2:var(--hub-surface-2);
  --dm-border:var(--hub-border);
  --dm-border-soft:var(--hub-border-soft);
  --dm-text:var(--hub-text);
  --dm-muted:var(--hub-muted);
  --dm-accent:var(--hub-primary);
  --dm-accent-2:var(--hub-primary-2);
  --dm-accent-hover:var(--hub-primary-hover);
  --dm-danger:var(--hub-danger);
  --dm-success:var(--hub-primary-2);
  --dm-shadow:0 14px 30px rgba(5,4,2,.35);
}

*{box-sizing:border-box}

body.cinema-hub{
  margin:0;
  min-height:100vh;
  padding:22px;
  color:var(--dm-text);
  font-family:"Source Han Sans CN","Source Han Sans SC","Noto Sans CJK SC","Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(920px 520px at 8% -12%, rgba(57,194,255,.16), rgba(57,194,255,0) 64%),
    radial-gradient(860px 520px at 96% 6%, rgba(122,255,210,.13), rgba(122,255,210,0) 62%),
    linear-gradient(160deg, var(--dm-bg), var(--dm-bg-2) 52%, var(--dm-bg-3));
}

body.cinema-hub .dm-app{
  width:min(1180px, 100%);
  margin:0 auto;
  display:grid;
  gap:14px;
}

.dm-header{
  border:1px solid var(--dm-border);
  background:linear-gradient(180deg, rgba(14,35,47,.92), rgba(8,22,31,.88));
  box-shadow:var(--dm-shadow);
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.dm-header-main{
  display:grid;
  gap:4px;
}

.dm-title{
  font-size:20px;
  font-weight:900;
  letter-spacing:.01em;
  line-height:1.1;
}

.dm-subtitle{
  font-size:12px;
  color:var(--dm-muted);
}

.dm-step{
  font-family:var(--mono);
  font-size:11px;
  color:#b6ddf1;
  border:1px solid var(--dm-border);
  background:rgba(14,34,46,.66);
  padding:5px 10px;
  border-radius:999px;
  white-space:nowrap;
}

.dm-screen{
  display:none;
}

.dm-screen.active{
  display:block;
  animation:dm-fade-in .3s ease;
}

@keyframes dm-fade-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}

.dm-card{
  border:1px solid var(--dm-border);
  background:linear-gradient(180deg, var(--dm-surface), var(--dm-surface-2));
  box-shadow:var(--dm-shadow);
  border-radius:16px;
  padding:16px;
}

.dm-card h2{
  margin:0 0 4px 0;
  font-size:22px;
  font-weight:900;
}

.dm-card .dm-copy{
  margin:0;
  color:var(--dm-muted);
  font-size:13px;
  line-height:1.55;
}

.dm-btn-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:14px;
}

.dm-btn{
  appearance:none;
  border:1px solid var(--dm-border);
  background:rgba(14,34,46,.76);
  color:#eaf8ff;
  border-radius:10px;
  font-size:13px;
  font-weight:700;
  padding:9px 14px;
  cursor:pointer;
}

.dm-btn:hover{
  border-color:rgba(126,222,255,.62);
  transform:translateY(-1px);
}

.dm-btn:disabled{
  opacity:.46;
  cursor:not-allowed;
  transform:none;
}

.dm-btn-primary{
  border-color:rgba(122,255,210,.45);
  background:linear-gradient(180deg, rgba(31,117,148,.95), rgba(20,84,116,.95));
}

.dm-btn-ghost{
  background:rgba(10,25,35,.42);
}

.dm-loading{
  min-height:420px;
  display:grid;
  place-items:center;
}

.dm-loading-box{
  width:min(560px, 96%);
  text-align:center;
  border:1px solid var(--dm-border);
  background:linear-gradient(180deg, rgba(14,36,48,.88), rgba(8,23,32,.86));
  border-radius:18px;
  padding:28px 18px;
  box-shadow:var(--dm-shadow);
}

.dm-loading-title{
  margin:0;
  font-size:28px;
  font-weight:900;
  letter-spacing:.02em;
}

.dm-loading-copy{
  margin:8px 0 0 0;
  color:var(--dm-muted);
}

.dm-progress-track{
  margin:18px auto 0;
  width:min(380px, 92%);
  height:10px;
  border-radius:999px;
  border:1px solid var(--dm-border);
  background:rgba(9,24,33,.72);
  overflow:hidden;
}

.dm-progress-fill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, var(--dm-accent), var(--dm-accent-2));
  transition:width .22s linear;
}

.dm-progress-meta{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  gap:8px;
  color:#b6d5e3;
  font-size:12px;
  font-family:var(--mono);
}

.dm-grid{
  display:grid;
  gap:12px;
}

.dm-grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

.dm-grid-3{
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.dm-field{
  display:grid;
  gap:6px;
}

.dm-field label{
  font-size:12px;
  color:#b7d7e6;
  font-weight:700;
}

.dm-field input,
.dm-field textarea,
.dm-field select{
  width:100%;
  border:1px solid var(--dm-border-soft);
  background:rgba(7,19,27,.84);
  color:#eaf7ff;
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  line-height:1.4;
}

.dm-field input:focus,
.dm-field textarea:focus,
.dm-field select:focus{
  outline:none;
  border-color:rgba(122,255,210,.58);
  box-shadow:0 0 0 3px rgba(122,255,210,.12);
}

.dm-field textarea{
  min-height:86px;
  resize:vertical;
}

.dm-field .dm-note{
  font-size:11px;
  color:var(--dm-muted);
}

.dm-full{
  grid-column:1 / -1;
}

.dm-inst-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.dm-inst-card{
  border:1px solid var(--dm-border-soft);
  background:rgba(9,23,33,.64);
  border-radius:12px;
  padding:10px;
  display:grid;
  gap:6px;
  cursor:pointer;
}

.dm-inst-card:hover{
  border-color:rgba(122,255,210,.5);
}

.dm-inst-card.is-active{
  border-color:rgba(122,255,210,.66);
  background:linear-gradient(180deg, rgba(16,44,56,.86), rgba(9,24,33,.78));
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}

.dm-inst-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:flex-start;
}

.dm-inst-name{
  margin:0;
  font-size:14px;
  font-weight:900;
  line-height:1.3;
}

.dm-inst-code{
  font-family:var(--mono);
  font-size:10px;
  color:#b8d5e3;
  border:1px solid var(--dm-border-soft);
  border-radius:999px;
  padding:2px 7px;
  white-space:nowrap;
}

.dm-inst-en{
  margin:0;
  font-size:11px;
  color:#9ec0d1;
  line-height:1.35;
}

.dm-inst-slogan{
  margin:0;
  font-size:11px;
  color:#d2ebf7;
}

.dm-toggle-row{
  margin-top:4px;
  display:flex;
  gap:18px;
  align-items:center;
  flex-wrap:wrap;
}

.dm-check{
  display:inline-flex;
  gap:6px;
  align-items:center;
  font-size:12px;
  color:#d4ebf7;
  user-select:none;
}

.dm-check input{
  width:15px;
  height:15px;
}

.dm-table-wrap{
  border:1px solid var(--dm-border-soft);
  border-radius:10px;
  overflow:auto;
  background:rgba(7,19,27,.62);
}

.dm-table{
  width:100%;
  border-collapse:collapse;
  min-width:540px;
}

.dm-table th,
.dm-table td{
  border-bottom:1px solid rgba(95,198,255,.14);
  padding:8px 8px;
  text-align:left;
  vertical-align:middle;
  font-size:12px;
}

.dm-table th{
  font-size:11px;
  color:#a8cde0;
  font-family:var(--mono);
  text-transform:uppercase;
  letter-spacing:.02em;
  background:rgba(9,25,35,.86);
}

.dm-table tr:last-child td{
  border-bottom:none;
}

.dm-table input[type="text"],
.dm-table input[type="number"]{
  width:100%;
  border:1px solid var(--dm-border-soft);
  background:rgba(7,19,27,.84);
  color:#eaf7ff;
  border-radius:8px;
  padding:6px 8px;
  font-size:12px;
}

.dm-table .dm-lock{
  color:#aad3e6;
  font-family:var(--mono);
}

.dm-seat-chip{
  display:inline-block;
  border:1px solid var(--dm-border-soft);
  border-radius:999px;
  padding:2px 8px;
  color:#d8f2ff;
  background:rgba(9,25,35,.7);
  font-family:var(--mono);
  font-size:11px;
}

.dm-cast-photo{
  width:56px;
  height:56px;
  border:1px dashed var(--dm-border);
  border-radius:8px;
  overflow:hidden;
  display:grid;
  place-items:center;
  color:#a6c5d5;
  font-size:10px;
  background:rgba(9,25,35,.7);
}

.dm-cast-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dm-inline-actions{
  display:flex;
  gap:6px;
  align-items:center;
}

.dm-mini-btn{
  appearance:none;
  border:1px solid var(--dm-border-soft);
  border-radius:8px;
  background:rgba(10,26,36,.7);
  color:#dcf0fa;
  font-size:11px;
  padding:5px 8px;
  cursor:pointer;
}

.dm-mini-btn:hover{
  border-color:rgba(122,255,210,.5);
}

.dm-mini-btn.is-danger{
  border-color:rgba(255,127,127,.4);
  color:#ffd2d2;
}

.dm-poster-upload{
  display:grid;
  gap:8px;
}

.dm-poster-preview{
  width:min(180px, 62%);
  aspect-ratio:2 / 3;
  border:1px dashed var(--dm-border);
  border-radius:10px;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#a8c7d7;
  font-size:11px;
  background:rgba(10,25,35,.68);
}

.dm-poster-preview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.dm-export-toolbar{
  display:flex;
  gap:10px;
  justify-content:space-between;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:10px;
}

.dm-export-meta{
  display:grid;
  gap:4px;
}

.dm-export-meta .dm-case{
  font-family:var(--mono);
  color:#d0ebf8;
  font-size:12px;
}

.dm-export-meta .dm-note{
  color:var(--dm-muted);
  font-size:11px;
}

.dm-export-wrap{
  border:1px solid var(--dm-border);
  border-radius:16px;
  background:linear-gradient(180deg, rgba(13,32,43,.88), rgba(8,20,29,.82));
  box-shadow:var(--dm-shadow);
  padding:12px;
}

.dm-export-wrap .stage{
  width:100%;
}

.dm-empty{
  border:1px dashed var(--dm-border);
  border-radius:12px;
  padding:26px 14px;
  text-align:center;
  color:#a2c2d2;
  background:rgba(8,22,32,.54);
}

.dm-tip{
  margin-top:8px;
  font-size:11px;
  color:#9fc1d2;
}

/* Crop modal */
.dm-crop-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,8,13,.78);
  z-index:2000;
}

.dm-crop-modal.is-open{
  display:flex;
}

.dm-crop-panel{
  width:min(560px, 100%);
  border:1px solid var(--dm-border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(13,34,45,.96), rgba(8,20,29,.94));
  box-shadow:0 24px 40px rgba(0,0,0,.42);
  padding:12px;
  display:grid;
  gap:10px;
  max-height:94vh;
  overflow:auto;
}

.dm-crop-head{
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:center;
}

.dm-crop-head h3{
  margin:0;
  font-size:16px;
  font-weight:900;
}

.dm-crop-stage{
  border:1px solid var(--dm-border-soft);
  border-radius:10px;
  overflow:auto;
  background:#061018;
  display:grid;
  place-items:center;
  max-height:62vh;
}

.dm-crop-stage canvas{
  width:min(100%, 420px);
  max-width:100%;
  height:auto;
  aspect-ratio:1 / 1;
  display:block;
  touch-action:none;
  cursor:grab;
}

.dm-crop-stage canvas.is-dragging{
  cursor:grabbing;
}

.dm-crop-controls{
  display:grid;
  gap:6px;
}

.dm-crop-controls label{
  font-size:12px;
  color:#bddbe9;
}

.dm-crop-controls input[type="range"]{
  width:100%;
}

.dm-crop-hint{
  margin:0;
  font-size:11px;
  color:#a4c4d4;
}

@media (max-width:980px){
  body.cinema-hub{
    padding:12px;
  }
  .dm-grid-3{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width:760px){
  .dm-inst-grid{
    grid-template-columns:1fr;
  }
  .dm-grid-2,
  .dm-grid-3{
    grid-template-columns:1fr;
  }
  .dm-header{
    padding:12px;
  }
  .dm-title{
    font-size:17px;
  }
}

/* Export area should preserve theme preview layout without hub shell overlay. */
#screen-export .book-wrap{
  margin-top:10px;
  border:none;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  overflow-x:auto;
}

#screen-export #exportCards{
  border:none;
  background:transparent;
  padding:0;
  overflow-x:auto;
}

#screen-export #exportCards > .wrap{
  margin:0 auto;
  max-width:980px;
  justify-items:center;
}

#screen-export #exportCards > .stage{
  margin:0 auto;
  justify-items:center;
}

#screen-export #exportCards > .wrap > .stage{
  margin:0 auto;
  justify-items:center;
}

/* Export preview isolation: keep template layout/content rules authoritative. */
#screen-export #exportCards .export-skin-root{
  color:var(--ink) !important;
  font-family:var(--sans) !important;
  color-scheme:light !important;
  forced-color-adjust:none !important;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

#screen-export #exportCards .export-skin-root .mono{
  font-family:var(--mono) !important;
}

#screen-export #exportCards .export-skin-root .muted{
  color:var(--muted) !important;
}

#screen-export #exportCards .export-skin-root,
#screen-export #exportCards .export-skin-root *{
  color-scheme:light !important;
  forced-color-adjust:none !important;
}

#screen-export #exportCards .wrap{
  display:grid;
  gap:14px;
  justify-items:center;
}

#screen-export #exportCards .wrap > .stage{
  display:grid;
  gap:14px;
  justify-items:center;
  width:min(980px, 100%);
}

#screen-export #exportCards .export-skin-root .ticket,
#screen-export #exportCards .export-skin-root .movieSheet,
#screen-export #exportCards .export-skin-root .receipt{
  color:var(--ink);
  font-family:var(--sans);
}

/* Exported card width is fixed and should not depend on viewport width.
   Height remains auto so content length/wrapping still responds to text. */
#screen-export #exportCards .export-skin-root [data-export-node="ticket"],
#screen-export #exportCards .export-skin-root [data-export-node="movieSheet"]{
  width:var(--ticket-w) !important;
  min-width:var(--ticket-w) !important;
  max-width:var(--ticket-w) !important;
}

#screen-export #exportCards .export-skin-root [data-export-node="receipt"]{
  width:var(--receipt-mm) !important;
  min-width:var(--receipt-mm) !important;
  max-width:var(--receipt-mm) !important;
}

/* Keep card content left-aligned while export page frame remains centered. */
#screen-export #exportCards .export-skin-root .ticketBody,
#screen-export #exportCards .export-skin-root .movieHeaderText,
#screen-export #exportCards .export-skin-root .movieMeta,
#screen-export #exportCards .export-skin-root .receiptMeta,
#screen-export #exportCards .export-skin-root .finePrint{
  text-align:left;
}

/* Venue/Notice lines must use ticket theme colors, not hub shell colors. */
#screen-export #exportCards .export-skin-root .ticket .finePrint .mono{
  color:var(--panel-ink);
  font-family:var(--mono);
}

#screen-export #exportCards .export-skin-root .ticket .finePrint .muted{
  color:var(--muted);
}

#screen-export #exportCards .export-skin-root .ticket [data-field="venue"],
#screen-export #exportCards .export-skin-root .ticket [data-field="notice"]{
  color:var(--panel-ink);
}

/* Receipt item rows: keep item detail lines left-aligned, amount column right-aligned. */
#screen-export #exportCards .export-skin-root .receipt .rtbl,
#screen-export #exportCards .export-skin-root .receipt .rtbl th,
#screen-export #exportCards .export-skin-root .receipt .rtbl td,
#screen-export #exportCards .export-skin-root .receipt .rtbl td > div,
#screen-export #exportCards .export-skin-root .receipt .rtbl .subline,
#screen-export #exportCards .export-skin-root .receipt .rtbl .status{
  text-align:left;
}

#screen-export #exportCards .export-skin-root .receipt .rtbl td:last-child,
#screen-export #exportCards .export-skin-root .receipt .rtbl th:last-child{
  text-align:right;
}

/* Online-share scene: cinematic layout with slight ticket tilt. */
#screen-export #exportCards .dm-share-layout{
  width:100%;
  max-width:980px;
  justify-items:stretch;
}

#screen-export #exportCards .dm-share-page{
  position:relative;
  width:min(940px, 100%);
  margin:0 auto;
  padding:18px 14px 24px;
  border:1px solid rgba(222,236,251,.22);
  border-radius:22px;
  overflow:visible;
  isolation:isolate;
  background:
    radial-gradient(110% 85% at 12% -8%, rgba(140,188,245,.24), transparent 58%),
    radial-gradient(100% 84% at 88% 112%, rgba(255,196,132,.18), transparent 62%),
    linear-gradient(160deg, rgba(8,16,26,.92), rgba(5,11,19,.95) 56%, rgba(3,9,14,.97));
  box-shadow:0 20px 48px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.08);
}

#screen-export #exportCards .dm-share-page:before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(55% 38% at 28% 22%, rgba(244,248,255,.15), rgba(244,248,255,0) 70%),
    radial-gradient(62% 44% at 74% 78%, rgba(174,196,226,.16), rgba(174,196,226,0) 72%);
  mix-blend-mode:screen;
  opacity:.62;
  animation:dmShareGlowDrift 32s ease-in-out infinite alternate;
}

#screen-export #exportCards .dm-share-page:after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.2;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, rgba(255,255,255,0) 1px 6px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, rgba(255,255,255,0) 1px 10px);
  animation:dmShareGrainShift 24s linear infinite;
}

#screen-export #exportCards .dm-share-head{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px;
  align-items:start;
}

#screen-export #exportCards .dm-share-head .item{
  min-width:0;
  display:grid;
  gap:2px;
  color:#f0f6ff;
}

#screen-export #exportCards .dm-share-head .item.center{text-align:center}
#screen-export #exportCards .dm-share-head .item.right{text-align:right}

#screen-export #exportCards .dm-share-head .k{
  font-size:10px;
  line-height:1.2;
  letter-spacing:.08em;
  opacity:.72;
  text-transform:uppercase;
  white-space:nowrap;
}

#screen-export #exportCards .dm-share-head .v{
  font-size:14px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:.03em;
  word-break:break-word;
  overflow-wrap:anywhere;
}

#screen-export #exportCards .dm-share-pill{
  position:relative;
  z-index:2;
  margin:12px auto 16px;
  width:fit-content;
  max-width:min(96%, 520px);
  padding:7px 16px;
  border:1px solid rgba(237,246,255,.32);
  border-radius:999px;
  color:#eff6ff;
  font-size:12px;
  line-height:1.35;
  text-align:center;
  letter-spacing:.03em;
  background:linear-gradient(180deg, rgba(20,42,68,.5), rgba(10,26,42,.45));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 20px rgba(0,0,0,.28);
  overflow-wrap:anywhere;
}

#screen-export #exportCards .dm-share-stage-wrap{
  position:relative;
  z-index:2;
  perspective:1200px;
  padding:8px 0;
}

#screen-export #exportCards .dm-share-page #exportStage{
  width:min(560px, 100%) !important;
  margin:0 auto !important;
  padding:6px 0 !important;
  border:none !important;
  background:transparent !important;
  box-shadow:none !important;
  gap:22px !important;
  overflow:visible !important;
  justify-items:center !important;
}

#screen-export #exportCards .dm-share-page #exportStage [data-export-node]{
  transform:translateZ(0) rotateX(.7deg) rotateY(var(--card-yaw, 0deg)) rotate(var(--card-tilt, 0deg));
  transform-origin:50% 12%;
  will-change:transform;
}

/* Text length should expand naturally across ticket/intro/receipt in share page. */
#screen-export #exportCards .dm-share-page .filmTitle,
#screen-export #exportCards .dm-share-page .filmSub,
#screen-export #exportCards .dm-share-page .kv .v,
#screen-export #exportCards .dm-share-page .movieSheet .sheetTitle,
#screen-export #exportCards .dm-share-page .movieSheet .sheetSub,
#screen-export #exportCards .dm-share-page .movieInfoItem .v,
#screen-export #exportCards .dm-share-page .synopsisBlock p,
#screen-export #exportCards .dm-share-page .receipt .name,
#screen-export #exportCards .dm-share-page .receipt .sub,
#screen-export #exportCards .dm-share-page .receipt td,
#screen-export #exportCards .dm-share-page .receipt th,
#screen-export #exportCards .dm-share-page .receipt .subline,
#screen-export #exportCards .dm-share-page .receipt .status,
#screen-export #exportCards .dm-share-page .receipt .footerNote{
  word-break:break-word;
  overflow-wrap:anywhere;
}

#screen-export #exportCards .dm-share-page .receipt .metaRow{
  flex-wrap:wrap;
}

#screen-export #exportCards .dm-share-page .receipt .metaRow span{
  white-space:normal;
}

@keyframes dmShareGlowDrift{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-1.2%, 1.4%, 0); }
}

@keyframes dmShareGrainShift{
  from{ background-position:0 0, 0 0; }
  to{ background-position:0 28px, 28px 0; }
}

@media (max-width:760px){
  #screen-export #exportCards .dm-share-page{
    border-radius:16px;
    padding:14px 10px 18px;
  }

  #screen-export #exportCards .dm-share-head{
    grid-template-columns:1fr;
    gap:8px;
  }

  #screen-export #exportCards .dm-share-head .item.center,
  #screen-export #exportCards .dm-share-head .item.right{
    text-align:left;
  }

  #screen-export #exportCards .dm-share-pill{
    margin:10px 0 14px;
  }

  #screen-export #exportCards .dm-share-page #exportStage{
    width:min(420px, 100%) !important;
    gap:18px !important;
  }

  #screen-export #exportCards .dm-share-page #exportStage [data-export-node]{
    transform:translateZ(0) rotate(var(--card-tilt-mobile, var(--card-tilt, 0deg)));
  }
}

@media (prefers-reduced-motion: reduce){
  #screen-export #exportCards .dm-share-page:before,
  #screen-export #exportCards .dm-share-page:after{
    animation:none !important;
  }
}

/* Unified hub palette overrides for hos shell components */
html, body{
  color:var(--hub-text);
  background:
    radial-gradient(circle at 18% -4%, var(--hub-aura-1), transparent 34%),
    radial-gradient(circle at 92% 8%, var(--hub-aura-2), transparent 40%),
    radial-gradient(circle at 52% 120%, var(--hub-aura-3), transparent 45%),
    linear-gradient(160deg,var(--hub-bg),var(--hub-bg-2) 52%,var(--hub-bg-3));
}

#flowHeader .flow-header-title,
#screen-loading .loading-title,
#screen-inst-loading .loading-title,
#screen-ticket .title-xl,
#screen-intro .title-xl,
#screen-purchase .title-xl,
#screen-institution .inst-name{
  color:var(--hub-header-title);
}

#flowHeader .flow-header-sub,
#screen-ticket .brand-title,
#screen-intro .brand-title,
#screen-purchase .brand-title,
#screen-export .brand-title,
#screen-loading .loading-copy,
#screen-inst-loading .loading-copy,
#screen-ticket .subtitle,
#screen-intro .subtitle,
#screen-purchase .subtitle,
#screen-institution .inst-code,
#screen-institution .inst-slogan,
#screen-institution .hero-sub-en,
#screen-institution .hero-system-status,
#screen-institution .hero-brief-line,
#screen-institution .hub-disclaimer{
  color:var(--hub-header-sub);
}

#flowHeader .flow-header-logo-wrap{
  border-color:var(--hub-border-soft);
  background:rgb(255 255 255 / .92);
}

#flowHeader.logo-dark .flow-header-logo-wrap{
  border-color:rgb(var(--hub-primary-rgb) / .5);
  background:linear-gradient(180deg, #1b1e2a, #10131d);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08), 0 8px 16px rgb(0 0 0 / .45);
}

#screen-institution .inst-card[data-logo-bg="dark"] .inst-logo-wrap{
  border-color:rgb(var(--hub-primary-rgb) / .5);
  background:linear-gradient(180deg, #1b1e2a, #10131d);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08), 0 12px 24px rgb(0 0 0 / .5);
}

.brand-status,
.dm-step{
  color:var(--hub-header-title);
  border-color:var(--hub-border);
  background:rgb(var(--hub-primary-rgb) / .18);
}

.btn,
.dm-btn{
  color:var(--hub-btn-text);
  border-color:var(--hub-border);
  background:rgb(var(--hub-primary-rgb) / .14);
}

.btn.primary,
.dm-btn-primary{
  color:var(--hub-btn-primary-text);
  background:linear-gradient(92deg,var(--hub-primary),var(--hub-primary-2));
}

.btn.ghost,
.dm-btn-ghost{
  border-color:var(--hub-border-soft);
  background:transparent;
}

.dm-mini-btn{
  color:var(--hub-btn-text);
  border-color:var(--hub-border-soft);
  background:rgb(var(--hub-primary-rgb) / .16);
}

.dm-mini-btn:hover{
  border-color:rgb(var(--hub-primary-rgb) / .58);
}

.field label,
.dm-field label{
  color:var(--hub-label);
}

.field input,
.field textarea,
.field select,
.dm-field input,
.dm-field textarea,
.dm-field select,
.dm-table input[type="text"],
.dm-table input[type="number"]{
  color:var(--hub-text);
  border-color:var(--hub-border-soft);
  background:var(--hub-input-bg);
}

.field input::placeholder,
.field textarea::placeholder,
.dm-field input::placeholder,
.dm-field textarea::placeholder,
.dm-table input[type="text"]::placeholder,
.dm-table input[type="number"]::placeholder{
  color:var(--hub-input-placeholder);
}

.dm-table th{
  color:var(--hub-table-head);
}

.dm-table td{
  border-bottom:1px solid rgb(var(--hub-primary-rgb) / .14);
}

/* Institution screen: title block + hero colors should follow the new palette. */
#screen-institution .hero{
  border-color:rgb(var(--hub-primary-rgb) / .5);
  background:
    radial-gradient(circle at 14% -12%, rgb(var(--hub-primary-rgb) / .32), transparent 40%),
    radial-gradient(circle at 86% 0%, rgb(var(--hub-secondary-rgb) / .2), transparent 44%),
    linear-gradient(180deg, rgb(var(--hub-primary-rgb) / .14), rgba(26,21,14,.9), rgba(17,14,10,.9));
}

#screen-institution .hero::before{
  background:
    radial-gradient(circle at 18% 22%, rgb(var(--hub-primary-rgb) / .34), transparent 34%),
    radial-gradient(circle at 86% 70%, rgb(var(--hub-secondary-rgb) / .22), transparent 38%),
    radial-gradient(circle at 62% 42%, rgb(var(--hub-primary-rgb) / .16), transparent 44%);
}

#screen-institution .hero::after{
  background:
    radial-gradient(rgb(var(--hub-primary-rgb) / .2) 1px, transparent 1px),
    radial-gradient(rgb(var(--hub-secondary-rgb) / .14) 1px, transparent 1px);
}

#screen-institution .hero .hero-main-title{
  display:inline-block;
  max-width:min(980px,94%);
  padding:10px 14px;
  border:1px solid rgb(var(--hub-primary-rgb) / .4);
  border-radius:14px;
  background:linear-gradient(180deg, rgb(var(--hub-primary-rgb) / .16), rgb(var(--hub-primary-rgb) / .08));
}

#screen-institution .hero .hero-line-welcome{
  color:transparent;
  -webkit-text-stroke:1.2px rgb(var(--hub-primary-rgb) / .86);
  text-shadow:none;
}

#screen-institution .hero .hero-welcome-en{
  color:#e7cb93;
}

#screen-institution .hero .hero-line-cn{
  margin-top:.12em;
  color:#f8e8c7;
  text-shadow:0 0 22px rgb(var(--hub-primary-rgb) / .22);
}

#screen-institution .hero .hero-sub-en{
  color:#d9c7a6;
}

#screen-institution .hero .hero-status{
  color:#cfbc95;
}

#screen-institution .hero .hero-code-roll{
  color:#e5c17c;
}

#screen-institution .hero .hero-system-status{
  color:#9edbc9;
}

#screen-institution .hero .hero-brief-line{
  color:#e9dbc2;
}

#screen-institution .hero .hero-confirm-btn{
  border-color:rgb(var(--hub-primary-rgb) / .52);
  background:linear-gradient(92deg, rgb(var(--hub-primary-rgb) / .3), rgb(var(--hub-secondary-rgb) / .2));
  color:var(--hub-btn-text);
  text-shadow:none;
}

#screen-institution .hero .hero-confirm-btn:hover{
  border-color:rgb(var(--hub-primary-rgb) / .78);
  box-shadow:0 0 0 1px rgb(var(--hub-primary-rgb) / .32), 0 10px 24px rgba(8,16,24,.45);
}

/* Institution detail modal follows the same warm palette. */
#screen-institution .inst-detail-backdrop{
  background:rgba(12,10,7,.72);
}

#screen-institution .inst-detail-panel{
  border-color:rgb(var(--hub-primary-rgb) / .48);
  background:linear-gradient(180deg, rgb(var(--hub-primary-rgb) / .24), rgba(27,22,15,.94) 48%, rgba(17,14,10,.96));
  box-shadow:0 28px 64px rgba(5,4,2,.62);
}

#screen-institution .inst-detail-close{
  border-color:rgb(var(--hub-primary-rgb) / .44);
  background:rgb(var(--hub-primary-rgb) / .2);
  color:#f4e5c8;
}

#screen-institution .inst-detail-code{
  color:#cfb98d;
}

#screen-institution .inst-detail-title{
  color:#f8ead0;
}

#screen-institution .inst-detail-en{
  color:#d7c39e;
}

#screen-institution .inst-detail-slogan-zh{
  color:#f5e8cd;
}

#screen-institution .inst-detail-slogan-en,
#screen-institution .inst-detail-intro{
  color:#e4d3b4;
}

#screen-institution .inst-detail-submeta{
  margin:10px auto 0;
  color:var(--hub-header-sub);
  line-height:1.62;
  max-width:620px;
  font-size:12px;
}

#institutionDetail[data-logo-bg="dark"] .logo-lg-wrap{
  border-color:rgb(var(--hub-primary-rgb) / .5);
  background:linear-gradient(180deg, #1b1e2a, #10131d);
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .08), 0 14px 28px rgb(0 0 0 / .45);
}

#screen-institution .tag{
  color:#f2e4c8;
  border-color:rgb(var(--hub-primary-rgb) / .42);
  background:rgb(var(--hub-primary-rgb) / .18);
}

#screen-institution .inst-world-block{
  border-color:rgb(var(--hub-primary-rgb) / .34);
  background:rgba(34,28,19,.66);
}

#screen-institution .inst-world-title{
  color:#e8d6b4;
}

#screen-institution .inst-world-list{
  color:#dfcda9;
}

/* Loading panels keep readability under particle overlays. */
.loading-panel{
  border-color:var(--hub-border);
  background:linear-gradient(180deg, rgb(var(--hub-primary-rgb) / .22), rgba(26,21,14,.88) 44%, rgba(17,14,10,.9));
}

.progress-meta{
  color:#d7c6a8;
}

@media (max-width:860px){
  body.cinema-hub{
    padding:14px;
  }

  body.cinema-hub .dm-app{
    gap:12px;
  }

  .dm-header{
    flex-wrap:wrap;
    align-items:flex-start;
    padding:12px;
  }

  .dm-step{
    margin-left:auto;
  }

  .dm-grid-2,
  .dm-grid-3{
    grid-template-columns:1fr;
  }

  .dm-card{
    padding:14px;
  }

  .dm-table-wrap{
    overflow-x:auto;
  }

  #screen-export .book-wrap{
    padding:10px;
    border-radius:14px;
  }

  #screen-export #exportCards .wrap > .stage{
    width:100%;
  }
}

@media (max-width:640px){
  body.cinema-hub{
    padding:10px;
  }

  .dm-title{
    font-size:18px;
  }

  .dm-subtitle{
    font-size:11px;
  }

  .btn-row,
  .dm-btn-row{
    display:grid;
    grid-template-columns:1fr;
  }

  .btn-row .btn,
  .dm-btn-row .btn,
  .dm-btn-row .dm-btn{
    width:100%;
  }

  #screen-export #exportCards .export-skin-root .ticket,
  #screen-export #exportCards .export-skin-root .movieSheet,
  #screen-export #exportCards .export-skin-root .receipt{
    width:min(100%, var(--ticket-w));
  }

  #screen-institution .hero .hero-main-title{
    padding:9px 10px;
  }

  #screen-institution .hero .hero-confirm-btn{
    width:100%;
  }
}

@media (max-width:760px), (max-height:760px){
  #screen-institution .inst-detail{
    align-items:flex-start;
    overflow-y:auto;
    padding:max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
  }

  #screen-institution .inst-detail-panel{
    width:100%;
    max-height:calc(100vh - 20px);
    overflow-y:auto;
    padding:18px 14px calc(14px + env(safe-area-inset-bottom));
  }

  #screen-institution .inst-detail .btn-row{
    position:sticky;
    bottom:0;
    z-index:2;
    margin-top:12px;
    padding-top:10px;
    padding-bottom:calc(4px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(17,14,10,0), rgba(17,14,10,.9) 30%, rgba(17,14,10,.95));
  }

  #screen-institution .inst-detail .btn-row .btn{
    width:100%;
  }
}