/* Fixed mobile frames for Figma capture. Layout geometry is integer px only. */
@font-face { font-family: MiSans; src: url('/prototypes/seqvia/shared/fonts/MiSans-Regular.woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: MiSans; src: url('/prototypes/seqvia/shared/fonts/MiSans-Medium.woff2'); font-weight: 500; font-display: block; }
@font-face { font-family: MiSans; src: url('/prototypes/seqvia/shared/fonts/MiSans-Semibold.woff2'); font-weight: 600; font-display: block; }
:root { --paper: #f8f5ee; --card: #fffcf6; --ink: #201f1c; --muted: #776f64; --rule: #dfd7c9; --amber: #efa324; --night: #071b2d; --frame-width: 390px; --frame-height: 844px; --safe-top: 59px; --safe-bottom: 34px; --page-padding: 20px; --icon-size: 26px; --button-height: 50px; --button-radius: 10px; --card-radius: 16px; }
* { box-sizing: border-box; }
html { background: #eae7e1; }
body { margin: 0; width: 1720px; color: var(--ink); font-family: MiSans, 'Microsoft YaHei', sans-serif; font-size: 14px; line-height: 22px; }
h1, h2, h3, p, figure { margin: 0; font-weight: 400; }
a { color: inherit; text-decoration: none; }
button { font: inherit; border: 0; padding: 0; color: inherit; background: none; }
img, svg { display: block; }
.preview-bar { width: 1720px; height: 56px; padding: 16px 32px; display: grid; grid-template-columns: 880px 776px; font-size: 13px; line-height: 24px; color: #726b61; }
.preview-links { display: flex; justify-content: flex-end; gap: 24px; }
.preview-links a { display: block; width: 72px; height: 24px; text-align: center; }
.board { width: 1720px; padding: 12px 32px 32px; display: grid; grid-template-columns: 390px 390px 390px 390px; gap: 32px; align-items: start; }
.sheet { width: 390px; height: 880px; }
.sheet-caption { width: 390px; height: 24px; margin-bottom: 12px; line-height: 24px; font-size: 13px; color: #625c52; }
.screen { position: relative; width: 390px; height: 844px; overflow: hidden; background: var(--paper); }
.status { position: relative; z-index: 3; width: 390px; height: 59px; padding: 20px 36px 19px; display: grid; grid-template-columns: 48px 206px 64px; color: var(--ink); }
.status-time { display: block; width: 48px; height: 20px; font-size: 13px; font-weight: 600; line-height: 20px; }
.status-icons { display: flex; align-items: center; width: 64px; height: 20px; }
.status-icons svg { width: 64px; height: 12px; }
.light { color: #fffdf8; }
.nav { position: relative; z-index: 3; display: grid; grid-template-columns: 44px 280px 44px; align-items: center; width: 390px; height: 44px; padding: 0 11px; }
.nav-icon { display: block; width: 44px; height: 44px; padding: 10px; }
.nav-icon svg { width: 24px; height: 24px; }
.nav-title { width: 280px; height: 24px; font-size: 17px; line-height: 24px; font-weight: 500; text-align: center; }
.home-area { position: absolute; z-index: 4; left: 0; top: 810px; width: 390px; height: 34px; }
.home-indicator { position: absolute; left: 128px; top: 20px; width: 134px; height: 5px; border-radius: 3px; background: #1c1c1a; }
.home-area.light .home-indicator { background: #fffdf8; }
.icon { width: 26px; height: 26px; }
.divider { height: 1px; background: var(--rule); }
.footer { position: absolute; z-index: 3; left: 0; top: 728px; width: 390px; height: 82px; padding: 16px 20px; background: var(--paper); }
.footer-pay { display: grid; grid-template-columns: 134px 200px; gap: 16px; align-items: center; box-shadow: 0 -1px 0 #e4dccf; }
.primary { display: block; width: 350px; height: 50px; border-radius: 10px; background: #1e1e1b; color: #fffdf8; font-size: 17px; line-height: 50px; font-weight: 500; text-align: center; }
.footer-pay .primary { width: 200px; }
.price { display: block; width: 134px; height: 36px; font-size: 28px; font-weight: 500; line-height: 36px; }
.poster-image { object-fit: cover; }
.film-type { color: var(--muted); font-size: 12px; line-height: 20px; }
/* 01 — movie details. Photo and content sheet preserve the approved overlap. */
.detail-hero { position: absolute; left: 0; top: 0; width: 390px; height: 270px; background: var(--night); }
.detail-hero .poster-image { width: 390px; height: 270px; }
.detail-hero .film-lettering { position: absolute; top: 110px; left: 30px; width: 160px; height: 64px; font-family: 'STZhongsong', 'SimSun', serif; font-weight: 600; font-size: 48px; line-height: 64px; letter-spacing: 4px; color: #fffdf5; }
.detail-sheet { position: absolute; left: 0; top: 254px; width: 390px; height: 474px; padding: 20px; border-radius: 20px 20px 0 0; background: var(--paper); }
.detail-title { width: 350px; height: 32px; font-size: 26px; line-height: 32px; font-weight: 600; }
.detail-sheet .film-type { width: 350px; height: 20px; margin-top: 4px; }
.synopsis { width: 350px; height: 40px; margin-top: 8px; font-size: 13px; line-height: 20px; }
.detail-sheet > .divider { width: 350px; margin-top: 12px; }
.cinema-row { display: grid; grid-template-columns: 26px 284px 16px; gap: 12px; align-items: center; width: 350px; height: 40px; }
.cinema-row p { width: 284px; height: 22px; font-size: 14px; line-height: 22px; }
.cinema-row .chevron { width: 16px; height: 16px; }
.date-strip { display: grid; grid-template-columns: 110px 110px 110px; gap: 10px; width: 350px; height: 44px; margin-top: 8px; }
.date-option { width: 110px; height: 44px; padding: 4px 0; border-radius: 10px; box-shadow: inset 0 0 0 1px #e3dbcd; }
.date-option.selected { background: var(--amber); box-shadow: none; }
.date-option p { width: 110px; height: 18px; text-align: center; line-height: 18px; font-size: 13px; }
.showtimes { display: grid; grid-template-rows: 54px 54px; gap: 8px; width: 350px; height: 116px; margin-top: 8px; }
.showtime { display: grid; grid-template-columns: 24px 78px 124px 72px; gap: 8px; align-items: center; width: 350px; height: 54px; padding: 6px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px #e4ddcf; }
.showtime.selected { box-shadow: inset 0 0 0 1px #26231f; }
.showtime .icon { width: 24px; height: 24px; }
.showtime-time { width: 78px; height: 42px; }
.showtime-time strong { display: block; width: 78px; height: 24px; line-height: 24px; font-size: 20px; font-weight: 500; }
.showtime-time small { display: block; width: 78px; height: 18px; line-height: 18px; font-size: 10px; color: #8b8275; }
.showtime-room { width: 124px; height: 20px; font-size: 12px; line-height: 20px; }
.showtime-price { width: 72px; height: 22px; font-size: 13px; line-height: 22px; text-align: right; }
/* 02 — static seat map asset. No seat-selection behavior. */
.seats-hero { position: absolute; left: 0; top: 0; width: 390px; height: 199px; background: var(--night); }
.seats-hero .poster-image { width: 390px; height: 199px; object-position: center bottom; }
.seats-hero-shade { position: absolute; left: 0; top: 0; width: 390px; height: 199px; background: linear-gradient(180deg, #06172625 0px, #061726a0 84px, #061726f0 199px); }
.seats-movie { position: absolute; top: 119px; left: 20px; width: 350px; height: 60px; color: #fffdf8; }
.seats-movie h1 { width: 350px; height: 28px; font-size: 22px; line-height: 28px; font-weight: 500; }
.seats-meta { display: grid; grid-template-columns: 286px 48px; gap: 16px; width: 350px; height: 20px; margin-top: 8px; }
.seats-meta p { width: 286px; height: 20px; font-size: 12px; line-height: 20px; }
.seats-meta button { width: 48px; height: 20px; line-height: 20px; font-size: 12px; text-align: right; }
.screen-arc { position: absolute; left: 37px; top: 214px; width: 316px; height: 30px; }
.seat-map { position: absolute; left: 37px; top: 248px; width: 316px; height: 300px; }
.seat-legend { position: absolute; top: 562px; left: 55px; width: 280px; height: 24px; display: grid; grid-template-columns: 80px 80px 80px; gap: 20px; }
.legend-item { display: grid; grid-template-columns: 22px 50px; gap: 8px; align-items: center; width: 80px; height: 24px; }
.legend-item span { display: block; width: 50px; height: 20px; line-height: 20px; font-size: 12px; }
.seat-state { display: block; width: 22px; height: 22px; border-radius: 4px; box-shadow: inset 0 0 0 1px #bdb4a5; background: #fffdf9; }
.seat-state.selected { background: var(--amber); box-shadow: none; }
.seat-state.sold { background: #ded9d1; box-shadow: none; }
.seat-state svg { width: 22px; height: 22px; }
.selected-seats { position: absolute; left: 20px; top: 614px; width: 350px; height: 96px; border-top: 1px solid var(--rule); padding-top: 20px; }
.selected-heading { display: grid; grid-template-columns: 258px 92px; width: 350px; height: 22px; }
.selected-heading h2 { width: 258px; height: 22px; line-height: 22px; font-size: 15px; font-weight: 500; }
.selected-heading p { width: 92px; height: 22px; line-height: 22px; font-size: 12px; text-align: right; color: var(--muted); }
.seat-chips { display: flex; gap: 12px; width: 350px; height: 32px; margin-top: 16px; }
.seat-chip { display: grid; grid-template-columns: 64px 14px; gap: 4px; align-items: center; width: 102px; height: 32px; padding: 6px 10px; border-radius: 6px; box-shadow: inset 0 0 0 1px #d3c8b8; background: var(--card); }
.seat-chip span { display: block; width: 64px; height: 20px; font-size: 12px; line-height: 20px; }
.seat-chip svg { width: 14px; height: 14px; }
/* 03 — order summary with the original ticket-edge treatment. */
.order-card { position: absolute; top: 119px; left: 20px; width: 350px; height: 324px; padding: 20px 20px 16px; background: var(--card); border-radius: 16px; box-shadow: 0 2px 6px #29211514, inset 0 0 0 1px #e3dccf; }
.order-film { display: grid; grid-template-columns: 60px 234px; gap: 16px; align-items: center; width: 310px; height: 80px; }
.poster-mini { position: relative; width: 60px; height: 80px; border-radius: 7px; overflow: hidden; background: var(--night); }
.poster-mini img { width: 60px; height: 80px; object-fit: cover; }
.poster-mini .mini-title { position: absolute; left: 6px; top: 16px; width: 48px; height: 24px; font-family: 'STZhongsong', 'SimSun', serif; font-size: 18px; line-height: 24px; text-align: center; color: #fffdf5; }
.order-film-copy { width: 234px; height: 62px; }
.order-film-copy h1 { width: 234px; height: 30px; font-size: 23px; line-height: 30px; font-weight: 500; }
.order-film-copy p { width: 234px; height: 20px; margin-top: 12px; }
.order-card .divider { width: 310px; margin-top: 20px; margin-bottom: 11px; }
.order-info { width: 310px; height: 176px; display: grid; grid-template-rows: 44px 44px 44px 44px; }
.info-row { width: 310px; height: 44px; display: grid; grid-template-columns: 26px 270px; gap: 14px; align-items: center; }
.info-row p { width: 270px; height: 22px; font-size: 14px; line-height: 22px; }
.edge-notch { position: absolute; top: 114px; width: 12px; height: 12px; border-radius: 6px; background: var(--paper); }
.edge-notch.left { left: -6px; }.edge-notch.right { right: -6px; }
.order-fees { position: absolute; top: 467px; left: 24px; width: 342px; height: 158px; }
.order-fees h2 { width: 342px; height: 22px; font-size: 15px; font-weight: 500; line-height: 22px; margin-bottom: 18px; }
.fee-line { display: grid; grid-template-columns: 270px 72px; width: 342px; height: 22px; margin-bottom: 14px; }
.fee-line p { width: 270px; height: 22px; font-size: 14px; line-height: 22px; }
.fee-line .amount { width: 72px; text-align: right; }
.fee-line + .fee-line { margin-bottom: 0; }
.fee-total { display: grid; grid-template-columns: 270px 72px; align-items: center; width: 342px; height: 46px; border-top: 1px solid var(--rule); padding-top: 17px; margin-top: 14px; }
.fee-total p { width: 270px; height: 28px; font-size: 15px; line-height: 28px; }
.fee-total .amount { width: 72px; height: 28px; font-size: 21px; font-weight: 500; text-align: right; }
.order-note { position: absolute; top: 645px; left: 24px; width: 280px; height: 72px; }
.order-note h2 { width: 280px; height: 20px; font-size: 13px; line-height: 20px; font-weight: 500; margin-bottom: 8px; }
.order-note p { width: 280px; height: 36px; font-size: 11px; line-height: 18px; color: var(--muted); }
.order-sticker { position: absolute; left: 308px; top: 646px; width: 52px; height: 52px; }
/* 04 — electronic ticket. Photo is raster; all useful ticket text stays editable. */
.ticket-screen { background: var(--night); }
.ticket-backdrop { position: absolute; left: 0; top: 0; width: 390px; height: 844px; object-fit: cover; filter: blur(8px); }
.ticket-backdrop-shade { position: absolute; left: 0; top: 0; width: 390px; height: 844px; background: linear-gradient(180deg, #061829e8 0px, #061829a8 500px, #061829f5 844px); }
.projector-light { position: absolute; left: 242px; top: 42px; width: 148px; height: 174px; }
.ticket-success { position: absolute; left: 30px; top: 115px; width: 330px; height: 58px; color: #fffcf6; }
.success-heading { display: grid; grid-template-columns: 26px 84px; gap: 10px; align-items: center; width: 120px; height: 28px; margin-left: 105px; }
.success-heading svg { width: 26px; height: 26px; }
.success-heading h1 { width: 84px; height: 28px; font-size: 21px; line-height: 28px; font-weight: 500; }
.ticket-success p { width: 330px; height: 20px; margin-top: 10px; text-align: center; font-size: 13px; line-height: 20px; }
.ticket { position: absolute; top: 189px; left: 30px; width: 330px; height: 506px; background: var(--card); border-radius: 16px; box-shadow: 0 8px 20px #00000026; }
.ticket-poster { position: absolute; top: 16px; left: 16px; width: 298px; height: 100px; overflow: hidden; border-radius: 8px; }
.ticket-poster img { width: 298px; height: 100px; object-fit: cover; object-position: center bottom; }
.ticket-poster .film-lettering { position: absolute; left: 172px; top: 22px; width: 112px; height: 48px; font-family: 'STZhongsong', 'SimSun', serif; color: #fffdf5; font-weight: 600; font-size: 36px; line-height: 48px; letter-spacing: 3px; }
.ticket-date { position: absolute; top: 132px; left: 24px; width: 282px; height: 24px; text-align: center; font-size: 16px; line-height: 24px; }
.ticket-time { position: absolute; top: 160px; left: 24px; width: 282px; height: 50px; text-align: center; font-size: 40px; line-height: 50px; font-weight: 500; }
.ticket-rule { position: absolute; top: 220px; left: 32px; width: 266px; height: 1px; background: #b9a68a; }
.ticket-cinema { position: absolute; top: 234px; left: 24px; width: 282px; height: 22px; font-size: 14px; line-height: 22px; text-align: center; }
.ticket-hall { position: absolute; top: 264px; left: 24px; width: 282px; height: 20px; font-size: 13px; line-height: 20px; text-align: center; }
.ticket-seats { position: absolute; top: 302px; left: 32px; width: 266px; height: 32px; display: grid; grid-template-columns: 132px 2px 132px; align-items: center; }
.ticket-seats p { width: 132px; height: 28px; font-size: 18px; line-height: 28px; font-weight: 600; text-align: center; }
.ticket-seats .separator { width: 2px; height: 24px; background: #d9ccba; }
.perforation { position: absolute; top: 348px; left: 0; width: 330px; height: 1px; border-top: 1px dashed #bcae99; }
.ticket-notch { position: absolute; top: 338px; width: 20px; height: 20px; border-radius: 10px; background: #091b2b; }
.ticket-notch.left { left: -10px; }.ticket-notch.right { right: -10px; }
.ticket-qr { position: absolute; top: 365px; left: 115px; width: 100px; height: 100px; }
.ticket-code { position: absolute; top: 475px; left: 30px; width: 270px; height: 20px; text-align: center; font-size: 13px; line-height: 20px; }
.ticket-stamp { position: absolute; z-index: 2; top: 638px; left: 292px; width: 66px; height: 66px; border: 2px solid #b97129; border-radius: 33px; background: #fffcf6; padding: 4px; }
.ticket-stamp span { display: block; width: 54px; height: 54px; line-height: 52px; border: 1px solid #d4964d; border-radius: 27px; text-align: center; color: #b97129; font-size: 15px; font-weight: 500; }
.location-button { position: absolute; left: 30px; top: 720px; width: 330px; height: 48px; border: 1px solid #ede9e1; border-radius: 8px; color: #fffdf6; display: grid; grid-template-columns: 24px 104px; gap: 8px; padding: 11px 96px; align-items: center; }
.location-button svg { width: 24px; height: 24px; }.location-button span { display: block; width: 104px; height: 24px; font-size: 14px; line-height: 24px; }
.ticket-reminder { position: absolute; left: 30px; top: 782px; width: 330px; height: 20px; font-size: 12px; line-height: 20px; text-align: center; color: #ede8df; }
/* Single-screen entry points are exact 390 × 844, with no gallery shell. */
body.single { width: 390px; height: 844px; background: var(--paper); }
body.single .preview-bar { display: none; }
body.single .board { display: block; width: 390px; height: 844px; padding: 0; }
body.single .sheet { width: 390px; height: 844px; }
body.single .sheet-caption { display: none; }