:root {
  --ink: #16202a;
  --muted: #657383;
  --line: #dde5ea;
  --soft: #f3f7f8;
  --card: #ffffff;
  --brand: #0b766e;
  --brand-dark: #075c56;
  --brand-soft: #e7f5f2;
  --accent: #e99d44;
  --danger: #c94545;
  --shadow: 0 18px 55px rgba(25, 58, 64, .11);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { max-width: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body { max-width: 100%; min-width: 0; margin: 0; overflow-x: hidden; color: var(--ink); background: #f7faf9; font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }

.topbar { position: sticky; top: 0; z-index: 20; width: 100%; min-width: 0; height: 72px; padding: 0 max(24px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; gap: 34px; border-bottom: 1px solid rgba(215, 226, 226, .85); background: rgba(250, 252, 251, .9); backdrop-filter: blur(16px); }
.brand { min-width: 0; display: flex; flex: 0 1 auto; align-items: center; gap: 11px; }
.brand > span:last-child { min-width: 0; }
.brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: var(--brand); color: white; font: 800 21px/1 Georgia, serif; box-shadow: 0 8px 20px rgba(11,118,110,.24); }
.brand strong, .brand small, .user-copy strong, .user-copy small { display: block; }
.brand strong { line-height: 1.1; letter-spacing: .08em; white-space: nowrap; }
.brand small, .user-copy small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.topnav { display: flex; gap: 7px; }
.topnav a { padding: 9px 13px; border-radius: 10px; color: #50616c; font-size: 14px; }
.topnav a:hover, .topnav a.active { color: var(--brand); background: var(--brand-soft); }
.mobile-nav { position: relative; flex: 0 0 auto; display: none; }
.mobile-nav summary { min-width: 76px; min-height: 42px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 8px; list-style: none; color: var(--brand-dark); border: 1px solid #cfe2df; border-radius: 11px; background: white; font-size: 13px; font-weight: 800; cursor: pointer; user-select: none; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav summary:hover, .mobile-nav summary:focus-visible, .mobile-nav[open] summary { border-color: #acd1cb; background: var(--brand-soft); outline: none; }
.mobile-nav-icon { position: relative; width: 18px; height: 14px; border-top: 2px solid currentColor; border-bottom: 2px solid currentColor; }
.mobile-nav-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; border-top: 2px solid currentColor; }
.mobile-nav-panel { position: absolute; top: calc(100% + 10px); right: 0; width: min(270px, calc(100vw - 24px)); padding: 8px; display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.98); box-shadow: 0 18px 45px rgba(25,58,64,.18); backdrop-filter: blur(16px); }
.mobile-nav-panel a { position: relative; min-height: 60px; padding: 10px 12px 10px 15px; display: flex; flex-direction: column; justify-content: center; border-radius: 11px; }
.mobile-nav-panel a:hover, .mobile-nav-panel a:focus-visible, .mobile-nav-panel a.active { color: var(--brand-dark); background: var(--brand-soft); outline: none; }
.mobile-nav-panel a.active::before { content: ""; position: absolute; left: 4px; top: 13px; bottom: 13px; width: 3px; border-radius: 99px; background: var(--brand); }
.mobile-nav-panel strong { font-size: 14px; }
.mobile-nav-panel small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }
.user-menu { min-width: 0; margin-left: auto; display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--brand-dark); background: #dcefeb; font-weight: 800; }
.user-copy strong { font-size: 13px; }
.text-button { padding: 5px 7px; color: var(--muted); border: 0; background: none; }
.text-button:hover { color: var(--danger); }

.app-shell { width: calc(100% - 40px); max-width: 1240px; min-width: 0; margin: 0 auto; padding: 48px 0 80px; }
.page-heading, .panel-title, .modal-head, .modal-actions, .inline-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.page-heading > div, .panel-title > div, .account-head > div { min-width: 0; max-width: 100%; }
.page-heading { margin-bottom: 30px; }
.page-heading h1 { margin: 4px 0 7px; font-size: clamp(28px, 3vw, 42px); letter-spacing: -.045em; }
.page-heading p, .panel-title p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.metric-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 22px; }
.metric-grid-four { grid-template-columns: repeat(4, 1fr); }
.metric-grid-five { grid-template-columns: repeat(5, 1fr); }
.metric-grid-six { grid-template-columns: repeat(6, 1fr); }
.metric-grid article { position: relative; overflow: hidden; padding: 24px; min-height: 145px; border: 1px solid #e0e9e8; border-radius: var(--radius); background: var(--card); box-shadow: 0 7px 24px rgba(25, 58, 64, .05); }
.metric-grid article::after { content: ""; position: absolute; right: -22px; bottom: -35px; width: 105px; height: 105px; border-radius: 50%; background: var(--brand-soft); }
.metric-grid span, .metric-grid small { display: block; position: relative; z-index: 1; color: var(--muted); }
.metric-grid strong { display: block; position: relative; z-index: 1; margin: 10px 0 4px; color: var(--brand-dark); font-size: 34px; }
.metric-grid small { font-size: 12px; }
.content-panel, .admin-panel { min-width: 0; padding: 26px; border: 1px solid #e0e9e8; border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 35px rgba(25, 58, 64, .055); }
.panel-title { margin-bottom: 22px; }
.panel-title h2 { margin: 0 0 4px; font-size: 20px; }
.panel-title p { font-size: 13px; }
.panel-actions { flex-wrap: wrap; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 17px; border: 1px solid transparent; border-radius: 11px; font-weight: 700; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: var(--brand); box-shadow: 0 8px 19px rgba(11,118,110,.19); }
.btn-primary:hover { background: var(--brand-dark); }
.btn-secondary { color: #425461; border-color: var(--line); background: white; }
.btn-danger { color: var(--danger); border-color: #f0caca; background: #fff7f7; }
.btn-small { min-height: 34px; padding: 6px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }

.account-grid { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.account-grid > *, .metric-grid > * { min-width: 0; }
.account-card { min-width: 0; padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: linear-gradient(145deg, #fff, #fbfdfc); }
.account-head { display: flex; justify-content: space-between; gap: 14px; margin-bottom: 15px; }
.account-head h3 { margin: 2px 0 3px; font-size: 18px; }
.account-head h3, .account-head p { overflow-wrap: anywhere; }
.account-head p { margin: 0; color: var(--muted); font-size: 13px; }
.status-pill { height: max-content; padding: 5px 9px; border-radius: 999px; color: #1c7264; background: #e5f6ef; font-size: 11px; font-weight: 800; }
.status-pill.off, .status-pill.fail { color: #a44848; background: #fdecec; }
.status-pill.pending { color: #98641c; background: #fff1d8; }
.account-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 17px; color: var(--muted); font-size: 12px; }
.account-meta span { padding: 9px 10px; border-radius: 9px; background: var(--soft); }
.account-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.account-editor { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); }
.account-editor summary { cursor: pointer; color: var(--brand); font-size: 13px; font-weight: 700; }
.account-editor .form-grid { margin-top: 14px; }
.empty-state, .loading-state { grid-column: 1 / -1; padding: 48px 20px; color: var(--muted); text-align: center; border: 1px dashed #ccd9d9; border-radius: 14px; background: #fbfdfc; }

.modal { width: min(650px, calc(100% - 28px)); max-height: calc(100vh - 40px); padding: 0; overflow: auto; border: 0; border-radius: 20px; box-shadow: var(--shadow); }
.modal-wide { width: min(820px, calc(100% - 28px)); }
.modal::backdrop { background: rgba(12, 29, 33, .52); backdrop-filter: blur(3px); }
.modal form { padding: 28px; }
.modal-head { margin-bottom: 22px; }
.modal-head h2 { margin: 3px 0 0; }
.icon-button { width: 38px; height: 38px; border: 0; border-radius: 50%; color: var(--muted); background: var(--soft); font-size: 20px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.form-grid label, .auth-form label { display: grid; gap: 7px; color: #465762; font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; padding: 11px 12px; color: var(--ink); border: 1px solid #cedadc; border-radius: 10px; outline: none; background: white; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(11,118,110,.1); }
textarea { resize: vertical; }
.full-field { grid-column: 1 / -1; }
.time-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.check-row { display: flex !important; grid-template-columns: none !important; align-items: center; gap: 9px !important; }
.check-row input { width: 17px; height: 17px; }
.modal-actions { margin-top: 24px; justify-content: flex-end; }
.form-intro { margin: -6px 0 20px; color: var(--muted); line-height: 1.7; }
.form-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.form-help-link { color: var(--brand); font-size: 12px; font-weight: 800; }
.form-help-link:hover { text-decoration: underline; }
.form-grid.one-column { grid-template-columns: 1fr; }
.user-row-actions { display: flex; flex-wrap: wrap; gap: 8px; min-width: 150px; }
.hidden { display: none !important; }

.admin-tabs { display: flex; gap: 8px; margin: 5px 0 16px; padding: 6px; overflow-x: auto; border: 1px solid var(--line); border-radius: 13px; background: white; }
.admin-tabs button { padding: 9px 15px; white-space: nowrap; color: var(--muted); border: 0; border-radius: 9px; background: transparent; font-weight: 700; }
.admin-tabs button.active { color: white; background: var(--brand); }
.admin-panel { display: none; }
.admin-panel.active { display: block; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 13px 11px; text-align: left; border-bottom: 1px solid #e8eeee; vertical-align: middle; }
th { color: var(--muted); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
td { font-size: 13px; }
.cell-title { font-weight: 800; }
.cell-sub { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.school-admin-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.school-card { padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.school-card h3 { margin: 0 0 5px; }
.school-card p { margin: 3px 0; color: var(--muted); font-size: 12px; word-break: break-all; }
.school-card .account-actions { margin-top: 13px; }
.log-list { display: grid; gap: 10px; }
.log-entry { padding: 15px; border: 1px solid var(--line); border-left: 4px solid var(--brand); border-radius: 12px; }
.log-entry.fail { border-left-color: var(--danger); }
.log-entry header { display: flex; justify-content: space-between; gap: 12px; }
.log-entry h3 { margin: 0; font-size: 14px; }
.log-entry time, .log-entry p { color: var(--muted); font-size: 12px; }
.log-entry p { margin: 7px 0 0; word-break: break-word; }
.pagination-bar { min-height: 42px; margin-top: 18px; display: flex; align-items: center; justify-content: center; gap: 12px; color: var(--muted); font-size: 12px; }
.pagination-bar:empty { display: none; }
.pagination-bar .btn { min-width: 82px; }
.inline-actions { justify-content: flex-end; }
.inline-actions select { min-width: 150px; }
.bulk-account-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.account-enabled-summary { display: block; margin-top: 7px; color: var(--brand-dark); font-size: 12px; font-weight: 800; }
.guide-shell { max-width: 980px; }
.guide-toolbar { align-items: flex-end; }
.pdf-viewer { display: block; width: 100%; height: min(76vh, 900px); min-height: 620px; border: 1px solid var(--line); border-radius: 14px; background: #f4f8f7; overflow: hidden; }
.pdf-fallback { min-height: 260px; padding: 32px; display: grid; place-content: center; justify-items: center; gap: 16px; color: var(--muted); text-align: center; }
.pdf-fallback p { margin: 0; }

/* Billing and manual payment review */
.billing-shell { max-width: 1120px; }
.billing-summary { margin-bottom: 22px; padding: 24px 26px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--ink); border: 1px solid #e3d8bb; border-radius: var(--radius); background: linear-gradient(135deg, #fffaf0, #fff 68%); box-shadow: 0 10px 35px rgba(93, 70, 25, .06); }
.billing-summary.active { border-color: #b9ded6; background: linear-gradient(135deg, #eefaf7, #fff 68%); }
.billing-summary h2 { margin: 5px 0 6px; font-size: 24px; }
.billing-summary p { max-width: 650px; margin: 0; color: var(--muted); font-size: 13px; }
.billing-summary-values { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 10px; }
.billing-summary-values span { min-width: 145px; padding: 12px 14px; color: var(--muted); border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.82); font-size: 12px; }
.billing-summary-values strong { display: block; margin-top: 5px; color: var(--brand-dark); font-size: 15px; overflow-wrap: anywhere; }
.billing-order-layout { display: grid; gap: 22px; margin-bottom: 22px; }
.plan-grid, .payment-method-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.plan-card, .payment-method { position: relative; min-width: 0; padding: 20px; display: flex; flex-direction: column; gap: 9px; cursor: pointer; border: 2px solid var(--line); border-radius: 16px; background: #fbfdfc; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.plan-card:hover, .payment-method:hover { transform: translateY(-1px); }
.plan-card.selected, .payment-method.selected { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(11,118,110,.09); background: #f4fbf9; }
.plan-card input, .payment-method input { position: absolute; top: 16px; right: 16px; width: 18px; height: 18px; accent-color: var(--brand); }
.plan-kicker { color: var(--brand); font-size: 11px; font-weight: 800; }
.plan-card > strong { padding-right: 28px; font-size: 20px; }
.plan-price { display: flex; align-items: baseline; gap: 6px; }
.plan-price b { color: var(--brand-dark); font-size: 36px; }
.plan-price small, .plan-description { color: var(--muted); font-size: 12px; }
.payment-method { align-items: center; text-align: center; }
.payment-method-title { width: 100%; padding-right: 24px; display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: left; }
.payment-method-title b { font-size: 18px; }
.payment-method-title small { color: #a96a19; font-size: 11px; font-weight: 800; }
.payment-method img { width: min(100%, 320px); aspect-ratio: 1 / 1.16; object-fit: contain; border-radius: 12px; background: white; }
.order-submit-panel { border-color: #b9ded6; }
.billing-confirm { margin: 18px 0 14px; }
.billing-submit { width: 100%; min-height: 48px; }
.billing-submit-note { margin: 10px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.billing-orders-table { min-width: 980px; }
.payment-reference { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.toast { position: fixed; right: 24px; bottom: 24px; z-index: 100; max-width: 360px; padding: 13px 17px; color: white; border-radius: 11px; background: #20333a; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transform: translateY(10px); transition: .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: var(--danger); }

/* Public pages */
.landing { min-height: 100vh; background: radial-gradient(circle at 80% 10%, #d7efea 0, transparent 31%), #fbfdfc; }
.landing-nav { width: min(1180px, calc(100% - 40px)); height: 78px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.landing-actions { display: flex; gap: 9px; }
.hero { width: min(1180px, calc(100% - 40px)); min-height: 630px; margin: auto; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 65px; }
.hero h1 { margin: 14px 0 20px; max-width: 730px; font-size: clamp(44px, 6vw, 74px); line-height: 1.04; letter-spacing: -.06em; }
.hero-copy > p { max-width: 610px; color: var(--muted); font-size: 18px; }
.hero-actions { display: flex; gap: 12px; margin: 30px 0; }
.hero-note { color: var(--muted); font-size: 12px; }
.hero-visual { position: relative; min-height: 420px; }
.visual-card { position: absolute; padding: 22px; border: 1px solid rgba(210,225,224,.8); border-radius: 22px; background: rgba(255,255,255,.92); box-shadow: var(--shadow); }
.visual-card.primary { inset: 25px 20px 60px 0; }
.visual-card.floating { right: 0; bottom: 15px; width: 220px; }
.visual-bars { display: grid; gap: 12px; margin-top: 26px; }
.visual-bars i { display: block; height: 45px; border-radius: 11px; background: linear-gradient(90deg, #e4f4f1, #f8fbfa); }
.visual-bars i:nth-child(2) { width: 83%; }
.visual-bars i:nth-child(3) { width: 64%; }
.feature-section, .security-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 80px 0; }
.section-heading { max-width: 680px; margin-bottom: 32px; }
.section-heading h2 { margin: 8px 0; font-size: clamp(30px, 4vw, 48px); letter-spacing: -.04em; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.feature-grid article { padding: 27px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.feature-grid h3 { margin: 12px 0 8px; }
.feature-grid p, .security-section p { color: var(--muted); }
.feature-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-weight: 900; }
.security-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; align-items: center; }
.security-list { display: grid; gap: 13px; }
.security-list div { padding: 17px; border-radius: 13px; background: white; border: 1px solid var(--line); }
.landing-footer { padding: 30px; color: var(--muted); text-align: center; border-top: 1px solid var(--line); }

.marketing-nav { width: min(1180px, calc(100% - 40px)); height: 78px; margin: auto; display: flex; align-items: center; justify-content: space-between; }
.marketing-nav nav { display: flex; align-items: center; gap: 18px; color: var(--muted); font-size: 13px; }
.marketing-nav nav > a:not(.btn):hover { color: var(--brand); }
.marketing-hero { width: min(1180px, calc(100% - 40px)); min-height: 635px; margin: auto; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 58px; }
.marketing-hero h1 { margin: 15px 0 20px; font-size: clamp(43px, 5.8vw, 72px); line-height: 1.04; letter-spacing: -.06em; }
.marketing-hero .hero-copy > p { color: var(--muted); font-size: 18px; }
.pill { display: inline-flex; padding: 7px 12px; color: var(--brand-dark); border-radius: 999px; background: var(--brand-soft); font-size: 12px; font-weight: 800; }
.pill-dark { color: #d9f2ed; background: rgba(255,255,255,.12); }
.btn-large { min-height: 49px; padding: 12px 21px; }
.trust-row { display: flex; flex-wrap: wrap; gap: 15px; color: var(--muted); font-size: 11px; }
.trust-row span::before { content: "✓"; margin-right: 5px; color: var(--brand); font-weight: 900; }
.product-preview { padding: 23px; border: 1px solid rgba(211,226,224,.9); border-radius: 25px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); transform: rotate(1deg); }
.preview-head { display: flex; align-items: center; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.preview-head > span { width: 8px; height: 8px; border-radius: 50%; background: #d6dfdf; }
.preview-head strong { margin-left: 8px; font-size: 12px; }
.preview-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 18px 0; }
.preview-stats article { padding: 15px; border-radius: 13px; background: var(--soft); }
.preview-stats small, .preview-stats em { display: block; color: var(--muted); font-size: 10px; font-style: normal; }
.preview-stats strong { display: block; margin: 5px 0; color: var(--brand-dark); font-size: 23px; }
.preview-list { display: grid; gap: 9px; }
.preview-list > div { display: flex; align-items: center; gap: 10px; padding: 13px; border: 1px solid #e7eeee; border-radius: 12px; }
.preview-list p { flex: 1; margin: 0; }
.preview-list strong, .preview-list small { display: block; }
.preview-list small, .preview-list b { color: var(--muted); font-size: 10px; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.status-dot.ok { background: #43a88f; }.status-dot.info { background: #6a8fc4; }
.marketing-section { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 90px 0; }
.section-heading > span { color: var(--brand); font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.feature-grid i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; color: var(--brand); background: var(--brand-soft); font-style: normal; font-weight: 900; }
.security-band { width: min(1180px, calc(100% - 40px)); margin: 40px auto 90px; padding: 45px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 60px; color: white; border-radius: 24px; background: #153f43; }
.security-band h2 { margin: 12px 0 0; font-size: 36px; }.security-band p { color: #cae0dd; }
.marketing-footer { padding: 30px; display: flex; justify-content: center; gap: 12px; color: var(--muted); border-top: 1px solid var(--line); font-size: 12px; }
.marketing-footer p { margin: 0; }

.auth-page { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; background: white; }
.auth-aside { padding: clamp(35px, 7vw, 90px); display: flex; flex-direction: column; justify-content: space-between; color: white; background: linear-gradient(145deg, #0b766e, #113d43); }
.auth-aside h1 { margin: 20px 0; max-width: 550px; font-size: clamp(37px, 5vw, 65px); line-height: 1.05; letter-spacing: -.05em; }
.auth-aside p { color: #cce7e2; }
.auth-panel { display: grid; place-items: center; padding: 35px; }
.auth-card { width: min(430px, 100%); }
.auth-card h2 { margin: 8px 0 7px; font-size: 33px; }
.auth-card > p { margin: 0 0 24px; color: var(--muted); }
.auth-form { display: grid; gap: 15px; }
.auth-form .btn { margin-top: 6px; }
.form-error { padding: 10px 12px; color: #a63232; border-radius: 9px; background: #fff0f0; font-size: 13px; }
.auth-switch { margin-top: 20px; color: var(--muted); font-size: 13px; }
.auth-switch a { color: var(--brand); font-weight: 800; }
.auth-layout { position: relative; min-height: 100vh; width: 100vw; display: grid; place-items: center; padding: 95px 24px 50px; background: radial-gradient(circle at 15% 15%, #d9efeb, transparent 34%), linear-gradient(145deg, #fbfdfc, #eef6f4); }
.auth-page { display: block; background: white; }
.auth-brand { position: absolute; left: 35px; top: 28px; }
.auth-card { width: min(450px, 100%); padding: 34px; border: 1px solid rgba(210,224,222,.9); border-radius: 22px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.auth-card-wide { width: min(670px, 100%); }
.auth-copy h1 { margin: 5px 0 8px; font-size: 34px; letter-spacing: -.04em; }.auth-copy p { margin: 0 0 23px; color: var(--muted); }
.stack-form { display: grid; gap: 15px; }.stack-form label { display: grid; gap: 7px; color: #465762; font-size: 13px; font-weight: 700; }.stack-form label small { color: var(--muted); font-size: 10px; font-weight: 400; }
.two-column-form { grid-template-columns: 1fr 1fr; }.btn-block { width: 100%; }.alert { margin-bottom: 18px; padding: 11px 13px; border-radius: 9px; font-size: 13px; }.alert-error { color: #a63232; background: #fff0f0; }.auth-note { position: absolute; bottom: 20px; color: var(--muted); font-size: 11px; }

/* Leave center and approved credential */
.leave-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 18px; align-items: start; }
.leave-history-panel { margin-top: 18px; }
.leave-list { display: grid; gap: 11px; }
.leave-row { display: grid; grid-template-columns: 105px 1fr auto; align-items: center; gap: 18px; padding: 17px; border: 1px solid var(--line); border-radius: 14px; }
.leave-row-status { display: flex; align-items: center; gap: 8px; color: #16826f; font-size: 12px; }.leave-row-status span { width: 9px; height: 9px; border-radius: 50%; background: #32a88e; box-shadow: 0 0 0 5px #e6f5f1; }.leave-row-status.pending { color: #9a671f; }.leave-row-status.pending span { background: #d79636; box-shadow: 0 0 0 5px #fff3dc; }.leave-row-status.fail { color: #a44848; }.leave-row-status.fail span { background: #d15b5b; box-shadow: 0 0 0 5px #fdeaea; }
.leave-row-main h3 { margin: 4px 0; font-size: 15px; }.leave-row-main p, .leave-row-main small { margin: 0; color: var(--muted); font-size: 11px; }.leave-row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.mobile-record-shell { position: relative; width: min(480px, 100%); min-height: 100vh; margin: 0 auto; padding-bottom: 35px; overflow: hidden; background: #f2f4f7; box-shadow: 0 0 45px rgba(17,43,55,.13); }
.mobile-record-top { height: 55px; padding: 0 18px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: white; }.mobile-record-top a { color: #4b5c66; }.mobile-record-top strong { font-size: 16px; }
.leave-status-hero { padding: 20px 22px 27px; color: white; text-align: center; background: linear-gradient(145deg, var(--school-color), color-mix(in srgb, var(--school-color) 65%, #162e3b)); }
.school-identity { display: flex; align-items: center; gap: 10px; text-align: left; }.school-identity img, .school-identity > span, .credential-school img, .credential-school > span { width: 43px; height: 43px; object-fit: contain; display: grid; place-items: center; border-radius: 11px; color: var(--school-color); background: white; font-weight: 900; }.school-identity strong, .school-identity small { display: block; }.school-identity small { color: rgba(255,255,255,.75); font-size: 10px; }
.leave-state-icon { width: 56px; height: 56px; margin: 26px auto 8px; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; font-size: 29px; }.leave-status-hero h1 { margin: 0; font-size: 27px; }.leave-status-hero p { margin: 4px 0 0; color: rgba(255,255,255,.8); font-size: 11px; }
.mobile-info-card { position: relative; z-index: 2; margin: 13px; padding: 19px; border-radius: 13px; background: white; }.mobile-info-card h2 { margin: 0 0 13px; font-size: 15px; }.mobile-info-card dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }.mobile-info-card dl div { padding: 10px 0; border-bottom: 1px solid #edf0f2; }.mobile-info-card dl .wide { grid-column: 1 / -1; }.mobile-info-card dt { color: #8a959d; font-size: 10px; }.mobile-info-card dd { margin: 3px 0 0; font-size: 13px; word-break: break-word; }.mobile-primary-action { position: relative; z-index: 3; margin: 18px 13px 0; min-height: 46px; display: grid; place-items: center; color: white; border-radius: 11px; background: var(--brand); font-weight: 800; }

.credential-body { min-height: 100vh; padding: 28px 12px; background: #e9edf0; }
.credential-body .topbar { display: none; }
.credential-shell { position: relative; width: min(430px, 100%); min-height: 760px; margin: auto; overflow: hidden; border-radius: 17px; background: white; box-shadow: var(--shadow); }
.credential-school { position: relative; z-index: 2; padding: 25px 23px; display: flex; align-items: center; gap: 13px; color: white; background: var(--school-color); }.credential-school h1 { margin: 0; font-size: 19px; }.credential-school p { margin: 3px 0 0; color: rgba(255,255,255,.75); font-size: 10px; }.credential-school > span { color: var(--school-color); }
.credential-status { position: relative; z-index: 2; padding: 27px; display: grid; place-items: center; border-bottom: 1px solid #edf0f2; }.credential-status i { width: 55px; height: 55px; display: grid; place-items: center; color: white; border-radius: 50%; background: #35ad89; font-size: 28px; font-style: normal; }.credential-status strong { margin-top: 9px; color: #219272; font-size: 24px; }.credential-status small { color: var(--muted); }
.credential-fields { position: relative; z-index: 2; padding: 10px 23px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }.credential-fields div { padding: 13px 0; border-bottom: 1px solid #eef1f2; }.credential-fields .wide { grid-column: 1 / -1; }.credential-fields span, .credential-fields b { display: block; }.credential-fields span { color: #8b969d; font-size: 10px; }.credential-fields b { margin-top: 3px; font-size: 13px; font-weight: 700; }
.credential-footer { position: relative; z-index: 2; margin: 15px 23px 23px; padding: 15px; border-radius: 11px; background: #f5f8f8; }.credential-footer span, .credential-footer strong { display: block; }.credential-footer span { color: var(--muted); font-size: 10px; }.credential-footer strong { margin-top: 3px; letter-spacing: .07em; }.credential-footer p { margin: 8px 0 0; color: var(--muted); font-size: 9px; word-break: break-all; }
.verify-shell { min-height: 100vh; display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at top, #dff2ee, #f6f9f8 55%); }.verify-card { width: min(470px, 100%); padding: 38px; text-align: center; border: 1px solid var(--line); border-radius: 22px; background: white; box-shadow: var(--shadow); }.verify-icon { width: 66px; height: 66px; margin: 0 auto 18px; display: grid; place-items: center; color: white; border-radius: 50%; background: var(--brand); font-size: 32px; }.verify-card.invalid .verify-icon { background: var(--danger); }.verify-card h1 { margin: 5px 0; }.verify-card > p { color: var(--muted); }.verify-card dl { margin: 23px 0; text-align: left; }.verify-card dl div { padding: 11px 0; border-bottom: 1px solid var(--line); }.verify-card dt { color: var(--muted); font-size: 10px; }.verify-card dd { margin: 3px 0 0; font-size: 13px; }

/* Site announcement editor and first-view modal */
.announcement-dialog { width: min(540px, calc(100% - 28px)); max-height: calc(100vh - 32px); padding: 0; overflow: auto; border: 0; border-radius: 24px; background: transparent; box-shadow: 0 26px 80px rgba(13, 36, 41, .28); }
.announcement-dialog::backdrop { background: rgba(8, 28, 32, .58); backdrop-filter: blur(5px); }
.announcement-card { position: relative; padding: 36px; overflow: hidden; border: 1px solid rgba(255,255,255,.6); border-radius: 24px; background: linear-gradient(155deg, #ffffff 0%, #f3fbf9 100%); }
.announcement-card::before { content: ""; position: absolute; right: -60px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: rgba(11, 118, 110, .09); }
.announcement-badge { position: relative; z-index: 1; width: 58px; height: 58px; display: grid; place-items: center; color: white; border-radius: 18px; background: linear-gradient(145deg, var(--brand), #12988d); box-shadow: 0 12px 28px rgba(11,118,110,.24); font-size: 13px; font-weight: 900; letter-spacing: .08em; }
.announcement-heading { position: relative; z-index: 1; margin-top: 22px; }
.announcement-heading h2 { margin: 5px 0 0; font-size: clamp(24px, 5vw, 31px); line-height: 1.25; letter-spacing: -.03em; }
.announcement-content { position: relative; z-index: 1; max-height: min(42vh, 360px); margin-top: 20px; padding: 18px 20px; overflow: auto; color: #344a52; border: 1px solid #dceae7; border-radius: 15px; background: rgba(255,255,255,.78); white-space: pre-wrap; overflow-wrap: anywhere; }
.announcement-time { position: relative; z-index: 1; margin: 13px 2px 0; color: var(--muted); font-size: 11px; }
.announcement-actions { position: relative; z-index: 1; margin-top: 23px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.announcement-actions .btn { min-width: 128px; }
.announcement-error { position: relative; z-index: 1; margin: 14px 0 0; color: var(--danger); font-size: 12px; }
.announcement-admin-form { width: min(820px, 100%); display: grid; gap: 18px; }
.announcement-admin-form label { display: grid; gap: 8px; color: #465762; font-size: 13px; font-weight: 800; }
.announcement-admin-form input[type="text"], .announcement-admin-form textarea { width: 100%; padding: 12px 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; background: #fff; outline: none; }
.announcement-admin-form input[type="text"]:focus, .announcement-admin-form textarea:focus { border-color: #7ab8b0; box-shadow: 0 0 0 3px rgba(11,118,110,.09); }
.announcement-admin-form textarea { min-height: 240px; resize: vertical; line-height: 1.7; }
.announcement-setting-row { padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid var(--line); border-radius: 13px; background: var(--soft); }
.announcement-setting-row strong, .announcement-setting-row small { display: block; }
.announcement-setting-row small { margin-top: 2px; color: var(--muted); font-size: 11px; font-weight: 500; }
.announcement-switch { width: 46px; height: 26px; accent-color: var(--brand); }
.announcement-admin-meta { margin: 0; color: var(--muted); font-size: 11px; }
.announcement-admin-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.announcement-history-shell { padding-bottom: 70px; }
.announcement-history-heading { margin-bottom: 22px; }
.announcement-history-heading h1 { margin-bottom: 6px; }
.announcement-history-heading p { margin: 0; color: var(--muted); }
.announcement-history-list { display: grid; gap: 16px; }
.announcement-history-card { position: relative; padding: 25px 27px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); box-shadow: 0 10px 35px rgba(25,58,64,.045); }
.announcement-history-card.latest { border-color: #b9dcd7; box-shadow: 0 16px 42px rgba(11,118,110,.09); }
.announcement-history-card.latest::before { content: ""; position: absolute; right: -50px; top: -70px; width: 170px; height: 170px; border-radius: 50%; background: rgba(11,118,110,.055); }
.announcement-history-card header { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.announcement-history-card header time { color: var(--muted); font-size: 11px; }
.announcement-history-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.announcement-current-label { color: var(--brand-dark); font-size: 11px; font-weight: 800; }
.announcement-history-card h2 { position: relative; z-index: 1; margin: 20px 0 12px; font-size: 22px; }
.announcement-history-content { position: relative; z-index: 1; color: #40545c; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.announcement-history-card footer { position: relative; z-index: 1; margin-top: 19px; padding-top: 13px; color: var(--muted); border-top: 1px solid #edf2f1; font-size: 10px; }
.announcement-history-empty { padding: 60px 25px; text-align: center; }
.announcement-empty-mark { width: 64px; height: 64px; margin: 0 auto 16px; display: grid; place-items: center; color: white; border-radius: 19px; background: var(--brand); font-weight: 900; }
.announcement-history-empty h2 { margin: 0; }
.announcement-history-empty p { margin-bottom: 0; color: var(--muted); }
.ticket-shell { padding-bottom: 70px; }
.ticket-heading { margin-bottom: 22px; }
.ticket-heading h1 { margin-bottom: 6px; }
.ticket-heading p { margin: 0; color: var(--muted); }
.ticket-create-panel, .ticket-reply-panel, .ticket-conversation { margin-bottom: 20px; }
.ticket-form { display: grid; gap: 18px; }
.ticket-form label { display: grid; gap: 8px; color: #465762; font-size: 13px; font-weight: 800; }
.ticket-form input, .ticket-form select, .ticket-form textarea, .ticket-filter select { width: 100%; padding: 12px 14px; color: var(--ink); border: 1px solid var(--line); border-radius: 11px; background: white; outline: none; }
.ticket-form input:focus, .ticket-form select:focus, .ticket-form textarea:focus, .ticket-filter select:focus { border-color: #7ab8b0; box-shadow: 0 0 0 3px rgba(11,118,110,.09); }
.ticket-form textarea { resize: vertical; line-height: 1.7; }
.ticket-form-actions { display: flex; justify-content: flex-end; }
.ticket-form-actions .btn { min-width: 150px; }
.ticket-filter { margin-bottom: 20px; padding: 15px 17px; display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.ticket-filter label { color: var(--muted); font-size: 12px; font-weight: 800; }
.ticket-filter select { width: min(220px, 100%); }
.ticket-list-section { margin-top: 24px; }
.ticket-list { display: grid; gap: 13px; }
.ticket-list-card { padding: 20px 22px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: inherit; border: 1px solid var(--line); border-radius: 15px; background: var(--card); box-shadow: 0 8px 28px rgba(25,58,64,.04); text-decoration: none; transition: .18s ease; }
.ticket-list-card:hover { border-color: #a9d5cf; box-shadow: 0 14px 36px rgba(11,118,110,.09); transform: translateY(-1px); }
.ticket-list-main { min-width: 0; }
.ticket-list-main h3 { margin: 9px 0 5px; font-size: 18px; overflow-wrap: anywhere; }
.ticket-list-main p { margin: 0; color: var(--muted); font-size: 12px; }
.ticket-list-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; color: var(--muted); font-size: 11px; }
.ticket-list-side { min-width: 180px; text-align: right; }
.ticket-list-side strong, .ticket-list-side small { display: block; }
.ticket-list-side strong { font-size: 12px; }
.ticket-list-side small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.ticket-status-open { color: #9a6418; background: #fff2d8; }
.ticket-status-processing { color: #176fa3; background: #e4f4ff; }
.ticket-status-resolved { color: #087760; background: #dff5ef; }
.ticket-status-closed { color: #69787e; background: #edf1f2; }
.ticket-empty { padding: 55px 25px; text-align: center; }
.ticket-empty > div { width: 62px; height: 62px; margin: 0 auto 16px; display: grid; place-items: center; color: white; border-radius: 18px; background: var(--brand); font-weight: 900; }
.ticket-empty h2 { margin: 0; }
.ticket-empty p { margin-bottom: 0; color: var(--muted); }
.ticket-summary-card { margin-bottom: 20px; padding: 19px 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; border: 1px solid var(--line); border-radius: 15px; background: var(--card); }
.ticket-summary-card div { min-width: 0; }
.ticket-summary-card span, .ticket-summary-card strong { display: block; }
.ticket-summary-card > div > span { margin-bottom: 6px; color: var(--muted); font-size: 10px; }
.ticket-summary-card > div > strong:not(.status-pill) { font-size: 13px; overflow-wrap: anywhere; }
.ticket-messages { display: grid; gap: 14px; }
.ticket-message { width: min(82%, 720px); padding: 16px 18px; border: 1px solid var(--line); border-radius: 15px; background: #f7faf9; }
.ticket-message.admin-message { margin-left: auto; border-color: #b8ddd7; background: #edf8f6; }
.ticket-message header { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 16px; }
.ticket-message header strong { color: var(--brand-dark); font-size: 12px; }
.ticket-message header time { color: var(--muted); font-size: 10px; }
.ticket-message > div { color: #354a52; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.75; }
.ticket-closed-note { text-align: center; }
.ticket-closed-note p { margin-bottom: 0; color: var(--muted); }

@media (max-width: 900px) {
  .topbar { gap: 15px; }
  .topnav { display: none; }
  .mobile-nav { display: block; margin-left: auto; }
  .user-menu { margin-left: 0; }
  .metric-grid, .metric-grid-four { grid-template-columns: repeat(2, 1fr); }
  .metric-grid-five { grid-template-columns: repeat(2, 1fr); }
  .metric-grid-six { grid-template-columns: repeat(3, 1fr); }
  .account-grid, .school-admin-grid { grid-template-columns: 1fr; }
  .hero { grid-template-columns: 1fr; padding: 60px 0; }
  .marketing-hero { grid-template-columns: 1fr; padding: 55px 0 75px; }
  .security-band { grid-template-columns: 1fr; gap: 20px; }
  .leave-layout { grid-template-columns: 1fr; }
  .hero-visual { min-height: 360px; }
  .feature-grid { grid-template-columns: 1fr; }
  .security-section { grid-template-columns: 1fr; }
  .auth-page { grid-template-columns: 1fr; }
  .auth-aside { min-height: 320px; }
}

@media (max-width: 620px) {
  .topbar { height: 64px; padding: 0 15px; }
  .brand small, .user-copy { display: none; }
  .app-shell { width: calc(100% - 24px); max-width: 1240px; padding-top: 28px; }
  .page-heading, .panel-title { width: 100%; min-width: 0; align-items: stretch; flex-direction: column; }
  .page-heading .btn, .panel-title > .btn { width: 100%; }
  .metric-grid, .metric-grid-four { grid-template-columns: 1fr; }
  .metric-grid-five { grid-template-columns: 1fr; }
  .metric-grid-six { grid-template-columns: 1fr; }
  .content-panel, .admin-panel { padding: 17px; }
  .bulk-account-actions { width: 100%; display: grid; grid-template-columns: 1fr; }
  .bulk-account-actions .btn { width: 100%; }
  .panel-actions, .guide-toolbar .btn { width: 100%; }
  .panel-actions { display: grid; grid-template-columns: 1fr; }
  .pdf-viewer { height: 68vh; min-height: 500px; border-radius: 11px; }
  .billing-summary { padding: 18px; align-items: stretch; flex-direction: column; }
  .billing-summary-values, .plan-grid, .payment-method-grid { grid-template-columns: 1fr; }
  .billing-summary-values span { min-width: 0; }
  .plan-card, .payment-method { padding: 17px; }
  .form-grid { grid-template-columns: 1fr; }
  .full-field { grid-column: auto; }
  .time-fields { grid-template-columns: 1fr; }
  .hero h1 { font-size: 43px; }
  .hero-actions { flex-direction: column; }
  .auth-panel { padding: 25px 20px; }
  .auth-aside { padding: 35px 24px; }
  .marketing-nav nav > a:not(.btn) { display: none; }
  .marketing-nav .btn-secondary { display: none; }
  .product-preview { transform: none; }
  .preview-stats { grid-template-columns: 1fr; }
  .security-band { padding: 28px; }
  .two-column-form { grid-template-columns: 1fr; }
  .leave-row { grid-template-columns: 1fr; }.leave-row-actions { justify-content: flex-start; }
  .announcement-card { padding: 26px 21px 22px; }
  .announcement-badge { width: 50px; height: 50px; border-radius: 15px; }
  .announcement-content { max-height: 38vh; padding: 15px; }
  .announcement-actions, .announcement-admin-actions { align-items: stretch; flex-direction: column; }
  .announcement-actions .btn, .announcement-admin-actions .btn { width: 100%; }
  .announcement-setting-row { align-items: flex-start; }
  .announcement-history-card { padding: 21px 18px; }
  .announcement-history-card header { align-items: flex-start; flex-direction: column; gap: 8px; }
  .ticket-filter { align-items: stretch; flex-direction: column; }
  .ticket-filter select, .ticket-filter .btn { width: 100%; }
  .ticket-list-card { align-items: flex-start; flex-direction: column; gap: 13px; }
  .ticket-list-side { min-width: 0; text-align: left; }
  .ticket-summary-card { grid-template-columns: 1fr; }
  .ticket-message { width: 100%; }
  .ticket-form-actions .btn { width: 100%; }
}

@media (max-width: 420px) {
  .topbar { padding: 0 10px; gap: 8px; }
  .brand { gap: 8px; }
  .brand-mark { width: 36px; height: 36px; border-radius: 11px; }
  .mobile-nav summary { min-width: 42px; width: 42px; padding: 0; }
  .mobile-nav-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .user-menu { gap: 4px; }
  .text-button { padding-inline: 4px; }
}

@media (max-width: 360px) {
  .topbar { padding: 0 8px; gap: 6px; }
  .brand strong { font-size: 14px; }
  .user-menu .avatar { display: none; }
  .text-button { font-size: 12px; }
}

/* Native-style leave application — independent violet/teal branding */
.leave-mobile-body { min-height: 100vh; background: #f4f3f8; }
.leave-mobile-body .topbar, .leave-certificate-body .topbar { display: none; }
.leave-app { position: relative; width: min(590px, 100%); min-height: 100vh; margin: 0 auto; padding: 174px 0 115px; background: #f4f3f8; box-shadow: 0 0 40px rgba(38,32,80,.08); }
.leave-app-header { position: fixed; top: 0; z-index: 20; width: min(590px, 100%); height: 158px; padding: 24px 19px 18px; background: white; }
.leave-header-title { height: 112px; display: flex; align-items: center; justify-content: center; gap: 10px; color: #6657d9; border-radius: 8px; background: rgba(102,87,217,.1); }
.leave-header-title strong { font-size: 23px; letter-spacing: .02em; }
.leave-app-header > p { position: absolute; left: 0; right: 0; bottom: 5px; margin: 0; color: #8c889c; text-align: center; font-size: 10px; }
.leave-calendar-icon { position: relative; width: 31px; height: 29px; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 6px; }
.leave-calendar-icon::before { content: ""; position: absolute; top: 5px; left: 0; right: 0; border-top: 2px solid currentColor; }
.leave-calendar-icon i { position: absolute; top: -5px; width: 3px; height: 7px; border-radius: 3px; background: currentColor; }.leave-calendar-icon i:first-child { left: 7px; }.leave-calendar-icon i:nth-child(2) { right: 7px; }.leave-calendar-icon b { padding-top: 5px; font-size: 12px; }
.leave-native-list { display: grid; gap: 15px; }
.native-leave-card { margin: 0 19px; padding: 20px 24px 0; overflow: hidden; border-radius: 13px; background: white; }
.native-leave-main { display: block; }
.native-leave-heading { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.native-type { display: flex; align-items: center; gap: 13px; }.native-type > span { width: 39px; height: 39px; display: grid; place-items: center; color: white; border-radius: 50%; background: linear-gradient(145deg,#7a6be2,#5a4cc6); font-size: 18px; }.native-type strong { font-size: 24px; }
.native-status { display: inline-flex; min-width: 72px; min-height: 34px; padding: 6px 10px; align-items: center; justify-content: center; color: #6558c9; border-radius: 17px 5px 17px 5px; background: #eeebff; font-size: 13px; font-style: normal; font-weight: 800; }
.native-status.active { color: #168477; background: #e0f6f0; }.native-status.pending { color: #a06919; background: #fff2d8; }.native-status.cancelled, .native-status.rejected { color: #9b5964; background: #fae9ed; }
.native-leave-main > p { margin: 17px 0 19px; color: #5e5b69; font-size: 13px; }
.native-leave-actions { min-height: 69px; display: flex; align-items: center; justify-content: flex-start; gap: 12px; border-top: 1px solid #efedf4; }
.native-btn { min-width: 105px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; color: white; font-size: 13px; }
.native-btn.credential { background: #6657d9; }.native-btn.extend { color: #4d477a; background: #ebe9f4; }.native-btn.detail { color: #4e4782; background: #ece9fa; }.native-btn.cancel { color: #8e5360; background: #fae9ed; }
.leave-native-empty { padding: 180px 20px 30px; color: #b5b1bd; text-align: center; }.leave-native-empty div { font-size: 76px; font-weight: 200; }.leave-native-empty strong { display: block; margin-top: 12px; font-size: 18px; }.leave-native-empty p { font-size: 12px; }
.leave-fab { position: fixed; right: max(19px, calc((100vw - 552px)/2)); bottom: 25px; z-index: 20; min-height: 52px; padding: 0 21px; color: white; border: 0; border-radius: 26px; background: #6657d9; box-shadow: 0 9px 23px rgba(102,87,217,.28); font-weight: 800; }.leave-fab span { margin-right: 6px; font-size: 21px; }
.leave-profile-entry { position: fixed; left: max(19px, calc((100vw - 552px)/2)); bottom: 31px; z-index: 20; padding: 8px 12px; color: #6657d9; border: 1px solid #d9d4f5; border-radius: 16px; background: white; font-size: 12px; font-weight: 800; }
.leave-sheet { width: min(590px, 100%); height: min(780px, 92vh); max-height: none; margin: auto auto 0; padding: 0; border: 0; border-radius: 20px 20px 0 0; background: #f4f3f8; box-shadow: 0 -15px 50px rgba(35,29,69,.18); }
.leave-sheet::backdrop { background: rgba(25,22,43,.48); }.leave-sheet form { padding: 0; }.leave-sheet-head { position: sticky; top: 0; z-index: 2; height: 57px; padding: 0 17px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: white; border-bottom: 1px solid #efedf3; }.leave-sheet-head button { padding: 8px; color: #6657d9; border: 0; background: transparent; }.leave-sheet-head button:first-child { justify-self: start; color: #77727f; }.leave-sheet-head button:last-child { justify-self: end; font-weight: 800; }
.leave-form-card { margin: 14px; padding: 0 18px; border-radius: 12px; background: white; }.leave-form-card label { min-height: 58px; display: grid; grid-template-columns: 105px 1fr; align-items: center; border-bottom: 1px solid #efedf3; color: #34313c; font-size: 14px; }.leave-form-card input, .leave-form-card select, .leave-form-card textarea { padding: 11px 0; text-align: right; border: 0; border-radius: 0; box-shadow: none; background: transparent; }.leave-form-card textarea { text-align: left; }.leave-form-card .leave-reason-row { min-height: 150px; grid-template-columns: 1fr; align-content: center; gap: 4px; }.leave-form-note { margin: 8px 23px; color: #928e9b; font-size: 11px; }

.detail-app { padding-top: 60px; padding-bottom: 95px; }
.leave-native-nav { position: fixed; top: 0; z-index: 20; width: min(590px, 100%); height: 58px; padding: 0 17px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; background: white; border-bottom: 1px solid #eceaf1; }.leave-native-nav a { font-size: 32px; line-height: 1; }.leave-native-nav span { justify-self: end; color: #6657d9; font-size: 11px; font-weight: 800; }
.detail-status-card, .native-info-group { margin: 15px; padding: 20px; border-radius: 13px; background: white; }
.detail-school-line { display: flex; align-items: center; gap: 11px; padding-bottom: 17px; border-bottom: 1px solid #efedf3; }.detail-school-line > img, .detail-school-line > span { width: 42px; height: 42px; object-fit: contain; display: grid; place-items: center; color: #6657d9; border-radius: 50%; background: #ece9ff; font-weight: 900; }.detail-school-line > div { flex: 1; }.detail-school-line strong, .detail-school-line small { display: block; }.detail-school-line small { color: #95919d; font-size: 10px; }
.detail-type-line { display: flex; align-items: center; gap: 15px; padding-top: 20px; }.detail-type-line > span { width: 47px; height: 47px; display: grid; place-items: center; color: white; border-radius: 50%; background: #6657d9; font-size: 21px; }.detail-type-line strong { font-size: 21px; }.detail-type-line p { margin: 6px 0 0; color: #716d79; font-size: 11px; }
.native-info-group h2 { margin: 0 0 8px; font-size: 16px; }.native-info-group dl { margin: 0; }.native-info-group dl div { min-height: 45px; display: grid; grid-template-columns: 115px 1fr; align-items: center; border-bottom: 1px solid #efedf3; }.native-info-group dl div:last-child { border: 0; }.native-info-group dt { color: #888491; font-size: 12px; }.native-info-group dd { margin: 0; text-align: right; font-size: 13px; word-break: break-word; }.native-info-group .wide { grid-template-columns: 1fr; gap: 6px; padding: 12px 0; }.native-info-group .wide dd { text-align: left; }
.native-bottom-action { position: fixed; left: max(15px, calc((100vw - 560px)/2)); right: max(15px, calc((100vw - 560px)/2)); bottom: 18px; z-index: 15; min-height: 49px; display: grid; place-items: center; color: white; border-radius: 8px; background: #6657d9; font-weight: 800; box-shadow: 0 8px 20px rgba(102,87,217,.22); }.native-waiting-tip { margin: 18px; padding: 14px; color: #8b6b2a; text-align: center; border-radius: 9px; background: #fff4db; font-size: 12px; }

.leave-certificate-body { min-height: 100vh; padding: 0; background: #efedf2; }
.native-certificate { width: min(590px, 100%); min-height: 100vh; margin: auto; padding-bottom: 26px; background: #efedf2; box-shadow: 0 0 38px rgba(36,31,71,.12); }
.certificate-hero { position: relative; height: 142px; padding: 22px 38px; overflow: hidden; color: white; background: linear-gradient(125deg,#6657d9,#6251c9 55%,#2e9b91); }.certificate-hero h1 { margin: 0; font-size: 32px; letter-spacing: .02em; }.certificate-hero p { margin: 1px 0 0; font-size: 14px; }.certificate-hero small { display: inline-block; margin-top: 8px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 10px; font-size: 9px; }
.certificate-hero-art { position: absolute; right: 35px; top: 25px; width: 150px; height: 95px; border-radius: 50% 20% 50% 35%; background: rgba(255,255,255,.08); }.certificate-hero-art::before { content: ""; position: absolute; left: 22px; top: 22px; width: 52px; height: 52px; border: 8px solid rgba(255,255,255,.35); border-radius: 50%; }.certificate-hero-art::after { content: ""; position: absolute; left: 72px; top: 48px; width: 48px; border-top: 8px solid rgba(255,255,255,.35); transform: rotate(-12deg); }.certificate-hero-art b { position: absolute; right: 7px; top: 10px; width: 37px; height: 37px; display: grid; place-items: center; color: #6657d9; border-radius: 50%; background: white; font-size: 21px; }
.certificate-student { position: relative; z-index: 2; min-height: 124px; margin: -18px 24px 13px; padding: 27px; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; background: white; box-shadow: 0 5px 12px rgba(39,32,74,.16); }.certificate-student strong, .certificate-student span { display: block; }.certificate-student strong { font-size: 26px; }.certificate-student span { margin-top: 4px; color: #95909e; font-size: 17px; }.certificate-student img, .certificate-student em { width: 84px; height: 84px; object-fit: contain; display: grid; place-items: center; color: #6657d9; border: 7px solid #ece9fb; border-radius: 50%; background: white; font-size: 34px; font-style: normal; font-weight: 900; }
.certificate-qr-card, .certificate-time-card, .certificate-info-card, .certificate-proof { margin: 13px 18px; border-radius: 5px; background: white; }
.certificate-qr-card { position: relative; padding: 30px 35px 18px; text-align: center; }.certificate-qr-card > img { width: min(400px, 92%); height: auto; display: block; margin: auto; }.qr-brand { position: absolute; left: 50%; top: 47%; width: 43px; height: 43px; display: grid; place-items: center; color: white; border: 6px solid white; border-radius: 10px; background: #6657d9; font: 800 22px Georgia,serif; transform: translate(-50%,-50%); }.certificate-qr-card time { display: block; margin-top: 8px; font-size: 18px; }.certificate-qr-card p { margin: 5px 0 0; color: #96919c; font-size: 10px; }
.certificate-time-card { padding: 25px 28px; }.certificate-time-card span { display: block; color: #8e8995; font-size: 15px; }.certificate-time-card strong { display: block; margin-top: 8px; font-size: 20px; }
.certificate-info-card { padding: 20px 28px; }.certificate-info-card h2 { margin: 0 0 12px; font-size: 18px; }.certificate-info-card dl { margin: 0; }.certificate-info-card dl div { min-height: 43px; display: grid; grid-template-columns: 145px 1fr; align-items: center; border-bottom: 1px solid #f0eef3; }.certificate-info-card dl div:last-child { border: 0; }.certificate-info-card dt { color: #8d8993; font-size: 12px; }.certificate-info-card dd { margin: 0; text-align: right; font-size: 13px; }
.certificate-proof { padding: 18px 25px; }.certificate-proof span, .certificate-proof strong { display: block; }.certificate-proof span { color: #96919d; font-size: 10px; }.certificate-proof strong { letter-spacing: .06em; }.certificate-proof p { margin: 8px 0; color: #918d97; font-size: 10px; }.certificate-proof a { color: #6657d9; font-size: 12px; font-weight: 800; }

@media (max-width: 620px) {
  .leave-app-header { height: 140px; padding-top: 15px; }.leave-app { padding-top: 153px; }.leave-header-title { height: 100px; }
  .native-leave-card { margin: 0 10px; padding-left: 16px; padding-right: 16px; }.native-type strong { font-size: 20px; }.native-leave-main > p { font-size: 11px; }
  .native-btn { min-width: 86px; }.leave-fab { right: 14px; }.leave-profile-entry { left: 14px; }
  .certificate-hero { padding-left: 25px; }.certificate-hero-art { right: 9px; opacity: .85; }.certificate-student { margin-left: 12px; margin-right: 12px; }.certificate-student strong { font-size: 23px; }.certificate-student span { font-size: 14px; }
  .certificate-qr-card { padding-left: 18px; padding-right: 18px; }.certificate-time-card strong { font-size: 16px; }.certificate-info-card dl div { grid-template-columns: 115px 1fr; }
}

/* Original leave-page proportions with an independent violet/teal identity. */
.leave-mobile-body,.leave-certificate-body { min-height:100vh; margin:0; font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,"Segoe UI",Arial,Roboto,"PingFang SC",miui,"Hiragino Sans GB","Microsoft Yahei",sans-serif; font-weight:500; }
.leave-mobile-body { background:#f5f5f5; }
.leave-mobile-body .topbar,.leave-certificate-body .topbar { display:none; }
.leave-app { position:relative; width:100%; min-height:100vh; margin:0; padding:27.2vw 0 0; background:#f5f5f5; box-shadow:none; }
.leave-app-header { position:fixed; inset:0 0 auto; z-index:20; width:100%; height:27.2vw; padding:3.7333vw 3.2vw; background:#fff; }
.leave-header-panel { width:100%; height:19.7333vw; display:flex; align-items:center; justify-content:center; border-radius:1.0667vw; background:rgba(28,117,233,.10); }
.leave-header-title { height:auto; padding:0; color:#3c84f0; border:0; border-radius:0; background:transparent; cursor:pointer; }
.leave-header-title strong { font-size:3.7333vw; line-height:5.6vw; font-weight:700; letter-spacing:0; }
.leave-calendar-icon { width:4.8vw; height:4.8vw; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.leave-calendar-icon img { display:block; width:100%; height:100%; }
.leave-native-list { display:block; padding-top:2.6667vw; }
.native-leave-card { height:32.424vw; margin:0 3.2vw 2.6667vw; padding:3.4667vw 3.7333vw 0 4.2667vw; overflow:hidden; border-radius:2.1333vw; background:#fff; }
.native-leave-card.with-actions { height:46.823vw; }
.native-leave-heading { height:12.8vw; min-height:0; display:flex; align-items:flex-start; justify-content:space-between; gap:0; }
.native-type { height:12.8vw; display:flex; align-items:center; gap:2.1333vw; }
.native-type > span { width:6.4vw; height:6.4vw; display:block; }
.native-type > span img { display:block; width:100%; height:100%; object-fit:contain; filter:none; }
.native-type strong { color:#303030; font-size:4.2667vw; line-height:7.4667vw; font-weight:700; }
.native-status-stamp { width:12.8vw; height:12.8vw; display:block; border:0; background:transparent; font-style:normal; }
.native-status-stamp img { display:block; width:100%; height:100%; object-fit:contain; }
.native-leave-time { height:3.9vw; margin:5.8667vw 0 0 .5333vw; color:#666; font-size:3.2vw; line-height:3.8933vw; font-weight:400; white-space:nowrap; }
.native-leave-actions { height:14.4vw; min-height:0; margin-top:6.4vw; display:flex; align-items:flex-start; justify-content:flex-start; gap:0; border:0; }
.native-btn { flex:1; width:auto; min-width:0; height:8.5333vw; min-height:0; margin-left:8.5333vw; padding:1.6vw 0; display:flex; align-items:center; justify-content:center; border:0; border-radius:1.0667vw; font-size:3.2vw; line-height:4.8vw; font-weight:400; cursor:pointer; }
.native-btn:first-child { margin-left:0; }
.native-btn.credential { color:#fff; background:#3c84f0; }.native-btn.extend { color:#61b077; background:rgba(97,176,119,.10); }.native-btn.cancel { color:#333; background:#f8f8f8; }
.leave-native-empty { padding:20vw 0 0; color:#969799; text-align:center; font-size:3.2vw; }
.leave-sheet { width:100vw; max-width:none; height:100vh; max-height:none; margin:0; padding:0; border:0; border-radius:0; background:#f5f5f5; }
.leave-sheet::backdrop { background:rgba(25,22,43,.48); }.leave-sheet form { min-height:100%; padding:0; }
.leave-sheet-head { position:sticky; top:0; z-index:2; height:12vw; padding:0 4.2667vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:#fff; border-bottom:1px solid #eee; }
.leave-sheet-head strong { font-size:4.2667vw; }.leave-sheet-head button { padding:2vw; color:#6b5ce7; border:0; background:transparent; font-size:3.2vw; }.leave-sheet-head button:first-child { justify-self:start; color:#777; }.leave-sheet-head button:last-child { justify-self:end; font-weight:700; }
.leave-form-card { margin:2.6667vw 3.2vw; padding:0 4.2667vw; border-radius:2.1333vw; background:#fff; }.leave-form-card label { min-height:12.8vw; display:grid; grid-template-columns:24vw 1fr; align-items:center; border-bottom:1px solid #eee; color:#303030; font-size:3.2vw; }.leave-form-card input,.leave-form-card select,.leave-form-card textarea { padding:2vw 0; text-align:right; border:0; border-radius:0; box-shadow:none; background:transparent; font-size:3.2vw; }.leave-form-card textarea { text-align:left; }.leave-form-card .leave-reason-row { min-height:32vw; grid-template-columns:1fr; align-content:center; gap:1vw; }.leave-form-note { margin:2vw 5vw; color:#969799; font-size:2.8vw; }

.detail-app { padding-top:14vw; padding-bottom:20vw; }.leave-native-nav { position:fixed; inset:0 0 auto; z-index:20; width:100%; height:12vw; padding:0 4vw; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; background:#fff; border-bottom:1px solid #eee; }.leave-native-nav a { font-size:7vw; line-height:1; }.leave-native-nav span { justify-self:end; color:#6b5ce7; font-size:2.8vw; font-weight:800; }.detail-status-card,.native-info-group { margin:3.2vw; padding:4.2667vw; border-radius:2.1333vw; background:#fff; }.detail-school-line { display:flex; align-items:center; gap:2.5vw; padding-bottom:3vw; border-bottom:1px solid #eee; }.detail-school-line > img,.detail-school-line > span { width:9vw; height:9vw; object-fit:contain; display:grid; place-items:center; color:#6b5ce7; border-radius:50%; background:#efedff; }.detail-school-line > div { flex:1; }.detail-school-line strong,.detail-school-line small { display:block; }.detail-school-line small { color:#969799; font-size:2.4vw; }.native-status { padding:1.3vw 2vw; color:#6b5ce7; border-radius:3vw; background:#efedff; font-size:2.8vw; font-style:normal; font-weight:700; }.detail-type-line { display:flex; align-items:center; gap:3vw; padding-top:4vw; }.detail-type-line > span { width:10vw; height:10vw; display:grid; place-items:center; color:#fff; border-radius:1.8vw; background:#6b5ce7; }.detail-type-line strong { font-size:4.2vw; }.detail-type-line p { margin:1.2vw 0 0; color:#666; font-size:2.7vw; }.native-info-group h2 { margin:0 0 2vw; font-size:4vw; }.native-info-group dl { margin:0; }.native-info-group dl div { min-height:10vw; display:grid; grid-template-columns:25vw 1fr; align-items:center; border-bottom:1px solid #eee; }.native-info-group dt { color:#999; font-size:3vw; }.native-info-group dd { margin:0; text-align:right; font-size:3.2vw; }.native-info-group .wide { grid-template-columns:1fr; gap:1vw; padding:2.5vw 0; }.native-info-group .wide dd { text-align:left; }.native-bottom-action { position:fixed; left:3.2vw; right:3.2vw; bottom:3.2vw; z-index:15; height:10.5vw; display:grid; place-items:center; color:#fff; border-radius:1.0667vw; background:#6b5ce7; font-size:3.2vw; font-weight:800; }.native-waiting-tip { margin:4vw; padding:3vw; color:#695da8; text-align:center; border-radius:1vw; background:#efedff; font-size:3vw; }

.leave-certificate-body { padding:0; background:#e4e4e4; }
.native-certificate { width:100%; min-height:100vh; margin:0; padding-bottom:3.90625vw; background:#e4e4e4; box-shadow:none; }
.certificate-hero { position:relative; height:23.4667vw; padding:4.2667vw 0 0 6.4vw; overflow:hidden; color:#fff; background:#1890ff; }
.certificate-hero h1 { position:relative; z-index:2; margin:0; font-size:6.4vw; line-height:6.4vw; font-weight:700; letter-spacing:0; }.certificate-hero p { position:relative; z-index:2; margin:0; font-size:2.6667vw; line-height:6.4vw; }.certificate-hero small { position:relative; z-index:2; display:inline-block; margin:0; padding:.2vw 1vw; color:rgba(255,255,255,.92); border:.1vw solid rgba(255,255,255,.55); border-radius:1.4vw; font-size:1.2vw; line-height:2vw; }
.certificate-hero-art { position:absolute; right:0; top:0; width:39.6vw; height:20.2667vw; border-radius:48% 0 42% 48%; background:rgba(255,255,255,.07); }.certificate-hero-art::before { content:""; position:absolute; left:9vw; top:5vw; width:11vw; height:11vw; border:1.25vw solid rgba(255,255,255,.24); border-radius:50%; }.certificate-hero-art::after { content:""; position:absolute; left:19vw; top:10.2vw; width:11vw; border-top:1.25vw solid rgba(255,255,255,.24); transform:rotate(-11deg); }.certificate-hero-art b { position:absolute; right:5vw; top:3vw; width:5.6vw; height:5.6vw; display:grid; place-items:center; color:#6b5ce7; border-radius:50%; background:#fff; font-size:3.2vw; }
.certificate-student { position:relative; z-index:2; height:21.3333vw; min-height:0; margin:-3.2vw 4.2667vw 2.1333vw; padding:0 4.2667vw; display:flex; align-items:center; justify-content:space-between; border-radius:1.0667vw; background:#fff; box-shadow:0 .4167vw 1.25vw rgba(114,124,245,.5); }.certificate-student strong,.certificate-student span { display:block; }.certificate-student strong { color:#303030; font-size:5.3333vw; line-height:6.4vw; font-weight:700; }.certificate-student span { margin:0; color:#999; font-size:3.4667vw; line-height:6.4vw; }.certificate-student img,.certificate-student em { width:13.3333vw; height:13.3333vw; object-fit:contain; display:grid; place-items:center; color:#6b5ce7; border:0; border-radius:50%; background:#fff; font-size:5vw; font-style:normal; font-weight:900; }
.certificate-qr-card,.certificate-time-card,.certificate-info-card { margin-left:2.6vw; margin-right:2.6vw; background:#fff; }
.certificate-qr-card { position:relative; min-height:78.9333vw; margin-top:0; padding:5.3333vw 0 0; text-align:center; border-radius:.313vw; }.certificate-qr-card > img { width:64vw; height:64vw; display:block; margin:0 auto; }.qr-brand { position:absolute; left:50%; top:37.3333vw; z-index:2; width:14.6667vw; height:14.6667vw; padding:0; display:grid; place-items:center; overflow:hidden; border:1.3333vw solid #fff; border-radius:1.6vw; background:#fff; transform:translate(-50%,-50%); }.qr-brand img { width:100%; height:100%; display:block; object-fit:cover; }.certificate-qr-card time { height:9.6vw; margin:0; display:flex; align-items:center; justify-content:center; color:#303030; font-size:3.7333vw; line-height:6.4vw; font-style:normal; }.certificate-qr-card time b { margin-left:1vw; font-size:4.5333vw; }
.certificate-time-card { height:21.3333vw; margin-top:2.6667vw; padding:4.2667vw 0; border-radius:1.0667vw; }.certificate-time-card span { display:block; margin-left:4.2667vw; color:#999; font-size:3.7333vw; line-height:6.4vw; }.certificate-time-card strong { display:block; margin:0; color:#303030; font-size:4.5333vw; line-height:6.4vw; text-align:center; }
.certificate-info-card { margin-top:2.6667vw; padding:4.2667vw; border-radius:1.0667vw; }.certificate-info-card h2 { margin:0 0 9.6vw; color:#303030; font-size:5.3333vw; line-height:6.4vw; font-weight:700; }.certificate-info-card dl { margin:0; }.certificate-info-card dl div { min-height:8.5333vw; display:grid; grid-template-columns:1fr 1fr; align-items:start; border:0; }.certificate-info-card dt,.certificate-info-card dd { font-size:3.7333vw; line-height:6.4vw; font-weight:500; }.certificate-info-card dt { color:#999; }.certificate-info-card dd { margin:0; color:#303030; text-align:right; }

/* Pixel-alignment corrections measured against the source viewport. */
.leave-app-header { inset:0 auto auto 0; width:100vw; }
.leave-calendar-icon { margin-right:0; }
.native-status-stamp { box-sizing:border-box; }
.certificate-student { width:93.6vw; margin-right:0; }
.certificate-student > div { height:100%; padding-top:6.4vw; }
.certificate-info-card { margin-bottom:0; }
.certificate-info-card dl div { min-height:8.6875vw; }
.certificate-info-card dl div { display:flex; align-items:flex-start; }
.certificate-info-card dt { flex:0 0 14.9333vw; color:#999; font-size:3.7333vw; line-height:6.4vw; font-weight:500; white-space:nowrap; }
.certificate-info-card dd { flex:0 1 auto; margin:0 0 0 6.4vw; color:#303030; font-size:4.2667vw; line-height:6.4vw; font-weight:700; text-align:left; white-space:nowrap; }
.leave-calendar-icon { width:4.8vw; height:4.8vw; overflow:visible; border:0; border-radius:0; }
.leave-calendar-icon::before,.leave-calendar-icon b,.leave-calendar-icon i { display:none; }
.native-type > span { background:transparent; border-radius:0; }
.native-type > span img { width:6.4vw; height:6.4vw; display:block; object-fit:contain; filter:none; }
.certificate-hero-art { position:absolute; right:0; top:0; width:39.6vw; height:20.2667vw; object-fit:contain; border-radius:0; background:transparent; filter:none; }

/* JWSESSION acquisition tool */
.jwsession-tool-panel { overflow:hidden; }
.jwsession-tool-grid { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr); gap:28px; }
.jwsession-login-card { min-width:0; }
.jwsession-result-card { padding:25px; align-self:start; border:1px solid #e4e8f0; border-radius:18px; background:linear-gradient(145deg,#f8f9ff,#f3f8ff); }
.jwsession-result-card h2 { margin:7px 0 8px; }
.jwsession-result-card > p { margin:0 0 18px; color:#667085; }
.jwsession-result-card label { display:block; margin-bottom:7px; font-size:13px; font-weight:800; }
.jwsession-result-card textarea { width:100%; resize:vertical; word-break:break-all; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; }
.jwsession-result-card .btn { width:100%; margin-top:12px; }
.jwsession-verify-note { min-height:20px; margin-top:12px !important; font-size:12px; }
.jwsession-status { min-height:45px; margin:18px 0 12px; padding:12px 14px; color:#41536b; border-radius:11px; background:#f3f6fa; font-size:13px; }
.jwsession-submit { width:100%; }
.captcha-panel { margin-top:20px; padding:16px; border:1px solid #dfe5ee; border-radius:14px; background:#f8fafc; }
.captcha-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.captcha-heading strong,.captcha-heading small { display:block; }
.captcha-heading small { margin-top:3px; color:#667085; }
.captcha-stage { position:relative; width:min(310px,100%); aspect-ratio:2/1; overflow:hidden; border-radius:9px; background:#e9edf3; user-select:none; }
.captcha-stage > img { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; }
.captcha-stage .captcha-piece { top:0; right:auto; bottom:0; width:auto; height:100%; max-width:none; left:0; z-index:2; }
.captcha-stage.is-clickable { cursor:crosshair; }
.click-markers { position:absolute; inset:0; z-index:3; pointer-events:none; }
.click-markers span { position:absolute; width:25px; height:25px; display:grid; place-items:center; color:white; border:2px solid white; border-radius:50%; background:#4f63d8; box-shadow:0 2px 7px rgba(24,34,80,.35); font-size:12px; font-weight:900; transform:translate(-50%,-50%); }
.captcha-slider { width:min(310px,100%); margin-top:12px; }
.captcha-slider input { width:100%; accent-color:#5264d9; }
.captcha-slider span { display:block; color:#667085; text-align:center; font-size:12px; }
.captcha-click-controls { width:min(310px,100%); }
.captcha-click-controls p { margin:12px 0 9px; }
.captcha-click-controls strong { color:#4556ca; }
.btn-small { min-height:34px; padding:7px 11px; font-size:12px; }
@media (max-width:780px) { .jwsession-tool-grid { grid-template-columns:1fr; }.jwsession-result-card { order:2; } }