:root {
  --navy: #0c1a3c;
  --navy-2: #173c87;
  --blue: #356dff;
  --blue-2: #597cff;
  --cyan: #45d2e5;
  --orange: #f26624;
  --ink: #14213c;
  --muted: #7d8aa5;
  --line: #e7ecf4;
  --bg: #f5f7fb;
  --green: #15b981;
  --shadow: 0 18px 50px rgba(18, 42, 92, .1);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; font-family: "Microsoft YaHei UI", "PingFang SC", system-ui, sans-serif; color: var(--ink); background: var(--bg); }
button, input, select, textarea { font: inherit; }
button, a { cursor: pointer; }
.hidden { display: none !important; }
.overline { margin: 0 0 14px; font-size: 11px; font-weight: 800; letter-spacing: .2em; }
.overline.blue { color: var(--blue); }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: minmax(520px, 1.15fr) minmax(430px, .85fr); background: white; }
.auth-backdrop { position: relative; overflow: hidden; min-height: 100vh; padding: 32px 7vw; color: white; background: radial-gradient(circle at 78% 85%, rgba(65,127,255,.7), transparent 38%), linear-gradient(145deg, #091938, #163879 62%, #285de1); }
.auth-backdrop::before { content: ""; position: absolute; inset: 43% -10% -25% 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 65px 65px; transform: perspective(600px) rotateX(62deg) scale(1.6); transform-origin: bottom; }
.auth-header { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; }
.auth-header img { width: 280px; height: auto; }
.auth-header a { color: rgba(255,255,255,.72); font-size: 12px; text-decoration: none; }
.auth-header a:hover { color: white; }
.auth-intro { position: relative; z-index: 2; max-width: 680px; margin-top: 18vh; }
.auth-intro h1 { margin: 0 0 24px; font-size: clamp(48px, 5vw, 76px); line-height: 1.23; letter-spacing: -.05em; }
.auth-intro > p:nth-of-type(2) { margin: 0; color: rgba(255,255,255,.7); font-size: 16px; line-height: 1.8; }
.auth-points { display: flex; gap: 12px; margin-top: 48px; }
.auth-points span { min-width: 132px; padding: 14px 18px; border: 1px solid rgba(255,255,255,.13); border-radius: 14px; color: rgba(255,255,255,.82); background: rgba(255,255,255,.07); backdrop-filter: blur(12px); font-size: 12px; }
.auth-points b { display: block; margin-bottom: 5px; color: #61e1ed; font-size: 10px; }
.auth-orbit { position: absolute; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.auth-orbit::after { content: ""; position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #72ebf5; box-shadow: 0 0 17px #72ebf5; }
.orbit-a { width: 500px; height: 500px; right: -210px; top: -170px; }.orbit-a::after { left: 50px; bottom: 100px; }
.orbit-b { width: 620px; height: 620px; left: -310px; bottom: -410px; }.orbit-b::after { right: 70px; top: 94px; }
.auth-panel { display: grid; place-items: center; padding: 42px; }
.auth-card { width: min(430px, 100%); }
.mobile-logo { display: none; align-items: center; gap: 12px; margin-bottom: 34px; }.mobile-logo span { width: 40px; height: 40px; display: grid; place-items: center; color: white; background: linear-gradient(135deg, var(--cyan), var(--blue)); border-radius: 13px; }
.auth-card h2 { margin: 0 0 9px; font-size: 30px; }.subcopy { margin: 0 0 28px; color: var(--muted); font-size: 12px; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 23px; border-bottom: 1px solid var(--line); }
.auth-tabs button { position: relative; padding: 12px; border: 0; color: #8d98ab; background: transparent; font-size: 13px; font-weight: 700; }
.auth-tabs button.active { color: var(--blue); }.auth-tabs button.active::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -1px; height: 2px; background: var(--blue); border-radius: 2px; }
.auth-form { display: none; }.auth-form.active { display: block; }
.auth-form > label { display: block; margin-top: 15px; }.auth-form > label > span { display: block; margin-bottom: 7px; font-size: 11px; font-weight: 700; }
.input-box { height: 48px; display: flex; align-items: center; border: 1px solid var(--line); border-radius: 11px; background: #fafbfe; transition: .2s; }
.input-box:focus-within { border-color: var(--blue); background: white; box-shadow: 0 0 0 4px rgba(53,109,255,.09); }
.input-box i { width: 44px; color: #9da9bd; font-size: 10px; font-style: normal; text-align: center; }
.input-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.input-box button { width: 42px; height: 100%; border: 0; color: #8996ab; background: transparent; }
.code-row { display: grid; grid-template-columns: 1fr 108px; gap: 9px; }.code-button { border: 1px solid #ccdaff; border-radius: 10px; color: var(--blue); background: #f1f5ff; font-size: 11px; }
.form-options { display: flex; justify-content: space-between; margin: 17px 0 21px; color: #8490a5; font-size: 11px; }.form-options button { border: 0; color: var(--blue); background: transparent; }
.agreement { display: flex !important; align-items: flex-start; gap: 7px; color: #8793a7; font-size: 10px; line-height: 1.6; }.agreement input { margin-top: 3px; }
.action-button { width: 100%; display: flex; justify-content: center; gap: 10px; margin-top: 20px; padding: 14px; border: 0; border-radius: 11px; color: white; background: linear-gradient(100deg, #326cf5, #5b78ff); box-shadow: 0 10px 24px rgba(53,109,255,.23); font-weight: 700; }
.demo-account { color: #9da7b9; font-size: 10px; text-align: center; }.demo-account code { padding: 3px 6px; color: #61708a; background: #f1f3f7; border-radius: 5px; }
.auth-card footer { margin-top: 35px; color: #adb6c5; font-size: 9px; text-align: center; }

.client-app { min-height: 100vh; background: var(--bg); }
.client-header { position: sticky; z-index: 30; top: 0; height: 72px; display: flex; align-items: center; padding: 0 max(28px, calc((100vw - 1180px) / 2)); border-bottom: 1px solid var(--line); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); }
.client-brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }.brand-symbol { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: white; font-weight: 900; background: linear-gradient(140deg, #50d3e4, #4769f3 70%, #7a54ee); }.client-brand > span:last-child strong, .client-brand small { display: block; }.client-brand strong { font-size: 14px; }.client-brand small { margin-top: 3px; color: #a0aabb; font-size: 7px; letter-spacing: .12em; }
.client-header nav { display: flex; align-self: stretch; gap: 8px; margin-left: 58px; }.client-header nav button { position: relative; padding: 0 15px; border: 0; color: #69768d; background: transparent; font-size: 12px; }.client-header nav button:hover, .client-header nav button.active { color: var(--blue); }.client-header nav button.active::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--blue); }
.client-user { position: relative; display: flex; align-items: center; gap: 10px; margin-left: auto; }.notice-button { position: relative; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 11px; color: #6e7a91; background: white; font-size: 10px; }.notice-button i { position: absolute; width: 6px; height: 6px; right: 7px; top: 6px; border-radius: 50%; background: #ff5b69; }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 4px 8px 4px 5px; border: 0; color: var(--ink); background: transparent; text-align: left; }.user-chip > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: white; background: linear-gradient(140deg, #4bc8db, #5366ec); }.user-chip b, .user-chip small { display: block; }.user-chip b { font-size: 10px; }.user-chip small { margin-top: 3px; color: #9aa5b6; font-size: 8px; }.user-chip em { color: #9aa5b5; font-style: normal; }
.user-menu { position: absolute; right: 0; top: 49px; width: 130px; overflow: hidden; padding: 6px; border: 1px solid var(--line); border-radius: 11px; background: white; box-shadow: var(--shadow); }.user-menu button { width: 100%; padding: 9px 10px; border: 0; border-radius: 7px; color: #5e6b82; background: transparent; font-size: 10px; text-align: left; }.user-menu button:hover { color: var(--blue); background: #f2f5ff; }
.mobile-menu { display: none; margin-left: auto; border: 0; background: transparent; font-size: 22px; }.mobile-nav { position: sticky; z-index: 25; top: 72px; display: grid; grid-template-columns: repeat(4, 1fr); padding: 8px; border-bottom: 1px solid var(--line); background: white; }.mobile-nav button { padding: 10px 5px; border: 0; color: #6d7890; background: transparent; font-size: 10px; }
.client-content { width: min(1180px, calc(100% - 42px)); min-height: calc(100vh - 180px); margin: 0 auto; padding: 28px 0 55px; }
.client-hero { position: relative; overflow: hidden; min-height: 300px; display: flex; align-items: center; justify-content: space-between; padding: 46px 52px; border-radius: 22px; color: white; background: radial-gradient(circle at 80% 95%, rgba(86,150,255,.7), transparent 36%), linear-gradient(115deg, #102657, #214dae 62%, #5b45d4); box-shadow: var(--shadow); }
.client-hero::after { content: ""; position: absolute; width: 380px; height: 380px; right: -100px; top: -230px; border: 1px solid rgba(255,255,255,.17); border-radius: 50%; box-shadow: 0 0 0 48px rgba(255,255,255,.035), 0 0 0 96px rgba(255,255,255,.02); }
.hero-copy { position: relative; z-index: 2; max-width: 620px; }.hero-copy h1 { margin: 0 0 16px; font-size: clamp(29px, 3vw, 43px); line-height: 1.3; }.hero-copy p { margin: 0 0 26px; color: rgba(255,255,255,.7); font-size: 12px; }.hero-actions { display: flex; gap: 10px; }.hero-button { padding: 12px 21px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; color: white; background: rgba(255,255,255,.1); font-size: 11px; }.hero-button.primary { border-color: white; color: #24469e; background: white; font-weight: 700; }
.hero-date { position: relative; z-index: 2; width: 185px; padding: 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.1); backdrop-filter: blur(12px); text-align: center; }.hero-date strong { display: block; font-size: 46px; }.hero-date span { display: block; margin: 4px 0 13px; font-size: 12px; }.hero-date small { color: #a4f4db; font-size: 9px; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; margin: 30px 0 16px; }.section-head h2 { margin: 0 0 6px; font-size: 19px; }.section-head p { margin: 0; color: var(--muted); font-size: 10px; }.section-head button { border: 0; color: var(--blue); background: transparent; font-size: 10px; }
.service-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }.service-card { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: white; transition: .2s; }.service-card:hover { transform: translateY(-2px); border-color: #cddaff; box-shadow: 0 11px 28px rgba(25,57,126,.07); }.service-card > span { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 12px; color: var(--blue); background: #eef3ff; }.service-card h3 { margin: 0 0 7px; font-size: 12px; }.service-card p { margin: 0; color: var(--muted); font-size: 9px; line-height: 1.65; }
.event-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }.event-card { overflow: hidden; border: 1px solid var(--line); border-radius: 17px; background: white; transition: .2s; }.event-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }.event-cover { position: relative; height: 125px; padding: 18px; color: white; background: linear-gradient(135deg, #122b62, #396cf0); }.event-card:nth-child(2) .event-cover { background: linear-gradient(135deg, #36215f, #815be7); }.event-card:nth-child(3) .event-cover { background: linear-gradient(135deg, #0d5668, #2dbbc4); }.event-cover::after { content: ""; position: absolute; width: 125px; height: 125px; right: -25px; top: -42px; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; box-shadow: 0 0 0 24px rgba(255,255,255,.05); }.event-cover span { display: inline-block; padding: 5px 8px; border-radius: 12px; color: #bff6e8; background: rgba(255,255,255,.1); font-size: 8px; }.event-cover strong { position: absolute; left: 18px; bottom: 16px; font-size: 12px; }.event-body { padding: 17px; }.event-body h3 { min-height: 39px; margin: 0 0 12px; font-size: 13px; line-height: 1.5; }.event-info { display: grid; gap: 7px; margin-bottom: 15px; color: var(--muted); font-size: 9px; }.event-info span b { display: inline-block; width: 20px; color: #9aa6b9; }.event-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 13px; border-top: 1px solid var(--line); }.event-bottom small { color: #909caf; font-size: 9px; }.event-bottom small b { color: var(--blue); font-size: 13px; }.event-bottom button { padding: 8px 12px; border: 0; border-radius: 8px; color: white; background: var(--blue); font-size: 9px; }.event-bottom button.registered { color: var(--green); background: #eaf9f3; }
.page-banner { display: flex; align-items: center; justify-content: space-between; padding: 28px 32px; margin-bottom: 20px; border-radius: 17px; color: white; background: linear-gradient(110deg, #122b61, #315ed7); }.page-banner h1 { margin: 0 0 8px; font-size: 24px; }.page-banner p { margin: 0; color: rgba(255,255,255,.67); font-size: 11px; }.page-banner span { font-size: 42px; opacity: .5; }
.filter-row { display: flex; gap: 10px; margin-bottom: 17px; }.filter-row label { flex: 1; display: flex; align-items: center; padding: 0 13px; height: 42px; border: 1px solid var(--line); border-radius: 10px; color: #9ca6b7; background: white; }.filter-row input { width: 100%; margin-left: 9px; border: 0; outline: 0; background: transparent; font-size: 11px; }.filter-row select { padding: 0 30px 0 13px; border: 1px solid var(--line); border-radius: 10px; color: #68748b; background: white; font-size: 10px; }
.registration-list { display: grid; gap: 14px; }.registration-card { display: grid; grid-template-columns: 98px 1fr auto; align-items: center; gap: 18px; padding: 18px; border: 1px solid var(--line); border-radius: 16px; background: white; }.registration-date { padding: 13px 8px; border-radius: 12px; color: var(--blue); background: #edf3ff; text-align: center; }.registration-date strong, .registration-date small { display: block; }.registration-date strong { font-size: 21px; }.registration-date small { margin-top: 3px; font-size: 9px; }.registration-main h3 { margin: 0 0 7px; font-size: 13px; }.registration-main p { margin: 0 0 10px; color: var(--muted); font-size: 9px; }.status-pill { display: inline-flex; padding: 5px 9px; border-radius: 12px; color: var(--green); background: #e9f9f3; font-size: 8px; }.registration-actions { display: flex; gap: 7px; }.registration-actions button { padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px; color: #627087; background: white; font-size: 9px; }.registration-actions button.primary { border-color: var(--blue); color: white; background: var(--blue); }
.empty-card { padding: 70px 20px; border: 1px dashed #d9e0eb; border-radius: 16px; color: var(--muted); background: white; text-align: center; }.empty-card b { display: block; margin-bottom: 10px; color: var(--ink); font-size: 14px; }.empty-card button { margin-top: 17px; padding: 10px 16px; border: 0; border-radius: 9px; color: white; background: var(--blue); }
.query-card { max-width: 720px; margin: 0 auto; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: white; box-shadow: var(--shadow); }.query-card h2 { margin: 0 0 8px; font-size: 18px; }.query-card > p { margin: 0 0 22px; color: var(--muted); font-size: 10px; }.query-form { display: flex; gap: 9px; }.query-form input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 9px; outline: 0; }.query-form button { padding: 0 22px; border: 0; border-radius: 9px; color: white; background: var(--blue); }.query-result { margin-top: 18px; padding: 18px; border-radius: 13px; background: #f4f7ff; }.query-result h3 { margin: 0 0 10px; font-size: 13px; }.query-result p { margin: 5px 0; color: #66748d; font-size: 10px; }.query-result strong { color: var(--blue); }
.profile-card { max-width: 760px; margin: 0 auto; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: white; }.profile-head { display: flex; align-items: center; gap: 15px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }.profile-avatar { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 17px; color: white; font-size: 20px; background: linear-gradient(140deg, #48c9db, #5267ee); }.profile-head h2 { margin: 0 0 5px; font-size: 17px; }.profile-head p { margin: 0; color: var(--muted); font-size: 10px; }.profile-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 21px; }.profile-form label span { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; }.profile-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; }.profile-form label.full { grid-column: 1 / -1; }.profile-form button { grid-column: 1 / -1; justify-self: end; padding: 11px 22px; border: 0; border-radius: 9px; color: white; background: var(--blue); }
.site-footer { width: min(1180px, calc(100% - 42px)); display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 25px 0 35px; color: #9aa5b8; border-top: 1px solid var(--line); font-size: 9px; }.site-footer strong, .site-footer span { display: block; }.site-footer strong { margin-bottom: 4px; color: #627087; }

.client-modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(7,18,42,.58); backdrop-filter: blur(7px); }.client-modal-card { width: min(650px, 100%); max-height: 91vh; overflow: auto; border-radius: 19px; background: white; box-shadow: 0 30px 80px rgba(7,18,43,.28); }.client-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 22px 25px; border-bottom: 1px solid var(--line); }.client-modal-head h2 { margin: 0; font-size: 20px; }.client-modal-head button { border: 0; color: #8b96a9; background: transparent; font-size: 23px; }
.registration-form { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; padding: 23px 25px 26px; }.registration-form label span { display: block; margin-bottom: 7px; font-size: 10px; font-weight: 700; }.registration-form input, .registration-form select, .registration-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 9px; outline: 0; background: #fafbfc; }.registration-form input:focus, .registration-form select:focus, .registration-form textarea:focus { border-color: var(--blue); background: white; box-shadow: 0 0 0 3px rgba(53,109,255,.08); }.registration-form label.full, .registration-submit { grid-column: 1 / -1; }.registration-form textarea { min-height: 70px; resize: vertical; }.ticket-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }.ticket-option { position: relative; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }.ticket-option input { position: absolute; opacity: 0; }.ticket-option:has(input:checked) { border-color: var(--blue); background: #f2f6ff; }.ticket-option strong, .ticket-option small { display: block; }.ticket-option strong { font-size: 10px; }.ticket-option small { margin-top: 5px; color: var(--muted); font-size: 8px; }.registration-submit { display: flex; justify-content: flex-end; gap: 9px; padding-top: 5px; }.registration-submit button { padding: 11px 20px; border: 1px solid var(--line); border-radius: 9px; color: #647188; background: white; }.registration-submit button.primary { border-color: var(--blue); color: white; background: var(--blue); }
.ticket-view { padding: 25px; }.ticket-shell { overflow: hidden; border: 1px solid #dfe6f2; border-radius: 17px; background: #f8faff; }.ticket-top { padding: 23px; color: white; background: linear-gradient(115deg, #10285c, #3869ea); }.ticket-top p { margin: 0 0 8px; color: rgba(255,255,255,.65); font-size: 9px; letter-spacing: .12em; }.ticket-top h3 { margin: 0; font-size: 18px; }.ticket-body { display: grid; grid-template-columns: 1fr 150px; gap: 20px; padding: 23px; }.ticket-info { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.ticket-info span { display: block; color: var(--muted); font-size: 8px; }.ticket-info strong { display: block; margin-top: 5px; font-size: 11px; }.qr-wrap { text-align: center; }.qr-wrap canvas { width: 120px; height: 120px; padding: 6px; background: white; border: 1px solid var(--line); }.qr-wrap small { display: block; margin-top: 6px; color: var(--muted); font-size: 8px; }.ticket-note { padding: 12px 23px; color: #69768e; background: #eef3ff; font-size: 9px; line-height: 1.6; }.ticket-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }.ticket-actions button { padding: 10px 16px; border: 1px solid var(--line); border-radius: 9px; color: #647188; background: white; }.ticket-actions button.primary { border-color: var(--blue); color: white; background: var(--blue); }
.client-toast { position: fixed; z-index: 200; left: 50%; bottom: 28px; padding: 12px 18px; border-radius: 10px; color: white; background: #142240; box-shadow: var(--shadow); font-size: 11px; opacity: 0; transform: translate(-50%, 70px); transition: .25s; pointer-events: none; }.client-toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 960px) {
  .auth-page { grid-template-columns: 1fr; }.auth-backdrop { display: none; }.mobile-logo { display: flex; }.auth-panel { min-height: 100vh; }
  .client-header { padding: 0 22px; }.client-header nav, .client-user .notice-button, .client-user .user-chip > span:nth-child(2), .client-user .user-chip em { display: none; }.mobile-menu { display: block; }.client-user { margin-left: auto; }.user-chip { padding: 0; }.user-menu { right: -45px; }
  .service-grid { grid-template-columns: repeat(2, 1fr); }.event-grid { grid-template-columns: repeat(2, 1fr); }.client-hero { padding: 38px; }
}
@media (max-width: 620px) {
  .auth-panel { padding: 25px; }.auth-card h2 { font-size: 26px; }
  .client-content, .site-footer { width: min(100% - 28px, 1180px); }.client-content { padding-top: 16px; }
  .client-brand strong { font-size: 12px; }.client-brand small { display: none; }
  .client-hero { min-height: 275px; padding: 28px 24px; }.hero-date { display: none; }.hero-copy h1 { font-size: 27px; }.hero-actions { flex-wrap: wrap; }
  .service-grid, .event-grid { grid-template-columns: 1fr; }.section-head { align-items: flex-start; }
  .filter-row { flex-wrap: wrap; }.filter-row label { flex-basis: 100%; }.filter-row select { flex: 1; height: 42px; }
  .registration-card { grid-template-columns: 70px 1fr; gap: 12px; }.registration-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .page-banner { padding: 22px; }.page-banner span { display: none; }
  .profile-form, .registration-form { grid-template-columns: 1fr; }.profile-form label.full, .profile-form button, .registration-form label.full, .registration-submit { grid-column: auto; }
  .ticket-options { grid-template-columns: 1fr; }.ticket-body { grid-template-columns: 1fr; }.ticket-info { grid-template-columns: 1fr 1fr; }.query-form { flex-direction: column; }.query-form button { padding: 12px; }.site-footer { align-items: flex-start; gap: 15px; }
}
@media print {
  body * { visibility: hidden; }.client-modal, .client-modal * { visibility: visible; }.client-modal { position: absolute; inset: 0; background: white; }.client-modal-head, .ticket-actions { display: none; }.client-modal-card { width: 100%; box-shadow: none; }
}