:root {
  --r:.48px;
  --blue:#2ab9fc;
  --ink:#303133;
  --muted:#909399;
  --page:#fbfdff;
  --status:25px;
  --bottom:0px}
* {
  box-sizing:border-box;
  -webkit-tap-highlight-color:transparent}
html,body {
  margin:0;
  min-height:100%;
  font-family:Roboto,"Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:#e6eaf0;
  font-size:calc(28 * var(--r));
  line-height:1.5}
button,input,select,textarea {
  font:inherit;
  color:inherit}
button {
  border:0;
  background:none;
  cursor:pointer;
  padding:0}
button:disabled {
  opacity:.5;
  cursor:default}
input,textarea,select {
  min-width:0;
  background:none;
  border:0;
  outline:0}
textarea {
  resize:none}
img {
  object-fit:contain}
button:focus-visible,a:focus-visible {
  outline:2px solid #69bbff;
  outline-offset:2px}
#app-shell {
  width:100%;
  max-width:480px;
  margin:auto;
  min-height:100vh;
  min-height:100dvh;
  position:relative;
  background:var(--page);
  overflow-x:hidden}
#screen {
  min-height:100vh;
  min-height:100dvh}
#preview-status {
  height:var(--status);
  position:absolute;
  z-index:8;
  top:0;
  left:0;
  right:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 25px;
  font-size:12px;
  font-weight:600;
  color:#fff;
  pointer-events:none}
.native #preview-status {
  display:none}
body.secondary #preview-status {
  color:#222}
body.secondary #screen {
  padding-top:var(--status)}
.tabbar {
  position:fixed;
  z-index:10;
  bottom:0;
  width:100%;
  max-width:480px;
  height:calc(70px + var(--bottom));
  padding:5px 0 calc(5px + var(--bottom));
  background:white;
  display:flex;
  border-top:1px solid #f7f7f7}
.tabbar button {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  color:#7a7e83;
  font-size:10px;
  position:relative}
.tabbar button.active {
  color:#4fc5fc}
.tabbar img {
  width:34px;
  height:34px}
.tabbar .dot {
  position:absolute;
  top:9px;
  left:calc(50% + 10px);
  background:#f55;
  width:6px;
  height:6px;
  border-radius:50%}
.profile-page {
  background:#f2f6fc url('static/my2/my_bg.png') no-repeat 0 0;
  background-size:159% auto;
  min-height:100vh;
  min-height:100dvh;
  padding:33% calc(40 * var(--r)) calc(95px + var(--bottom))}
.profile-tools {
  position:absolute;
  top:5%;
  right:5%;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:calc(105 * var(--r));
  color:#fff;
  font-size:calc(28 * var(--r))}
.profile-tools .role {
  min-width:calc(125 * var(--r))}
.chevron-down {
  border-right:1.5px solid #bbb;
  border-bottom:1.5px solid #bbb;
  transform:rotate(45deg);
  display:inline-block;
  width:8px;
  height:8px;
  margin:0 0 3px 6px}
.scan-icon {
  width:calc(44 * var(--r));
  height:calc(44 * var(--r));
  color:inherit;
  display:block}
.profile-card {
  border-radius:28px;
  background:rgba(255,255,255,.94);
  box-shadow:0 0 calc(20 * var(--r)) #0000000d;
  text-align:center;
  padding:0 calc(20 * var(--r)) calc(30 * var(--r))}
.avatar {
  width:calc(200 * var(--r));
  height:calc(200 * var(--r));
  border-radius:50%;
  background:#fff;
  position:relative;
  top:calc(-100 * var(--r));
  margin:0 auto}
.avatar img {
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover}
.gender {
  position:absolute;
  top:80%;
  right:5%;
  height:calc(32 * var(--r));
  width:calc(32 * var(--r));
  font-size:calc(26 * var(--r));
  border:1px solid white;
  background:#2979ff;
  border-radius:50%;
  line-height:calc(28 * var(--r));
  color:white}
.profile-basic {
  margin-top:calc(-70 * var(--r));
  font-size:calc(36 * var(--r));
  font-weight:500;
  line-height:calc(50 * var(--r));
  color:#333}
.profile-basic .role-name,.profile-basic .class-name {
  font-size:calc(32 * var(--r))}
.detail-info {
  padding:calc(10 * var(--r)) calc(40 * var(--r));
  font-size:calc(32 * var(--r))}
.detail-info hr {
  border:0;
  border-top:1px solid #e2e4e8;
  margin:calc(20 * var(--r)) 0}
.profile-row {
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin:calc(10 * var(--r)) 0;
  line-height:calc(48 * var(--r));
  text-align:left}
.profile-row span:last-child {
  text-align:right;
  overflow-wrap:anywhere}
.profile-actions {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  padding:calc(10 * var(--r));
  gap:0}
.profile-actions button {
  color:#999;
  white-space:nowrap;
  font-size:calc(30 * var(--r));
  display:flex;
  align-items:center;
  flex-direction:column}
.profile-actions img {
  width:100%;
  height:calc(100 * var(--r));
  margin-bottom:calc(10 * var(--r))}
.hero-page {
  background:#f2f6fc;
  min-height:100vh;
  min-height:100dvh;
  padding-bottom:calc(75px + var(--bottom))}
.hero-image {
  position:relative;
  height:calc(307 * var(--r));
  background:url('static/console/bg.png') center/100% 100% no-repeat}
.hero-image h1 {
  position:absolute;
  top:calc(182 * var(--r));
  left:calc(50 * var(--r));
  font-size:calc(64 * var(--r));
  line-height:1.2;
  color:#026a9b;
  margin:0;
  font-weight:600}
.console-main {
  background:#fff;
  border-radius:8px;
  padding:calc(20 * var(--r));
  min-height:50vh}
.category-tabs {
  display:flex;
  gap:calc(65 * var(--r));
  padding:calc(16 * var(--r)) calc(32 * var(--r)) calc(25 * var(--r));
  font-size:calc(32 * var(--r))}
.category-tabs button {
  color:#999}
.category-tabs button.active {
  color:#333;
  font-weight:600}
.console-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr)}
.console-item {
  min-height:calc(175 * var(--r));
  border-bottom:1px solid #e6e6e6;
  display:flex;
  justify-content:center;
  align-items:center;
  flex-direction:column;
  gap:calc(8 * var(--r));
  font-size:14px;
  line-height:20px;
  padding:calc(20 * var(--r)) 1px}
.console-item img {
  width:calc(80 * var(--r));
  height:calc(80 * var(--r));
  padding:calc(10 * var(--r));
  box-sizing:content-box}
.navbar {
  height:44px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 calc(22 * var(--r));
  position:sticky;
  top:0;
  z-index:9;
  border-bottom:1px solid #f5f5f5}
.nav-left {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:15px;
  min-height:40px}
.back-arrow {
  display:inline-block;
  width:10px;
  height:10px;
  border-left:2px solid #222;
  border-bottom:2px solid #222;
  transform:rotate(45deg);
  margin-right:4px}
.nav-right {
  font-size:14px;
  padding:10px 0}
.state-tabs {
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
  height:43px;
  background:white;
  border-bottom:1px solid #f7f7f7}
.state-tabs::-webkit-scrollbar {
  display:none}
.state-tabs button {
  position:relative;
  flex:0 0 auto;
  min-width:calc(115 * var(--r));
  padding:0 calc(16 * var(--r));
  white-space:nowrap;
  font-size:calc(28 * var(--r));
  color:#606266}
.state-tabs button.active {
  color:#2ab9fc;
  font-weight:500}
.state-tabs button.active:after {
  content:'';
  position:absolute;
  width:20px;
  height:3px;
  border-radius:3px;
  background:#2ab9fc;
  bottom:3px;
  left:calc(50% - 10px)}
.state-tabs.two button {
  flex:1}
.type-tabs {
  display:flex;
  padding:calc(20 * var(--r));
  gap:calc(8 * var(--r));
  border-bottom:1px solid #f3f3f3;
  background:#fff}
.type-tabs button {
  flex:1;
  white-space:nowrap;
  padding:calc(6 * var(--r)) calc(8 * var(--r));
  font-size:calc(24 * var(--r));
  color:#999;
  border-radius:6px}
.type-tabs button.active {
  background:#2ab9fc;
  color:#fff}
.leave-list {
  padding:calc(30 * var(--r)) calc(25 * var(--r));
  padding-bottom:30px}
.leave-item {
  width:100%;
  min-height:calc(200 * var(--r));
  margin-bottom:calc(20 * var(--r));
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 14px #0000000d;
  display:flex;
  align-items:center;
  padding:calc(10 * var(--r));
  gap:calc(15 * var(--r));
  text-align:left}
.leave-status {
  width:calc(125 * var(--r));
  flex-shrink:0;
  text-align:center;
  font-size:calc(24 * var(--r));
  line-height:calc(26 * var(--r))}
.leave-status img {
  width:calc(75 * var(--r));
  height:calc(75 * var(--r));
  display:block;
  margin:0 auto calc(10 * var(--r))}
.leave-summary {
  flex:1;
  min-width:0}
.leave-summary strong {
  font-size:calc(32 * var(--r));
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-bottom:calc(10 * var(--r));
  font-weight:700}
.leave-summary p {
  color:#999;
  font-size:calc(24 * var(--r));
  line-height:calc(32 * var(--r));
  margin:0}
.right-arrow {
  border-right:1.5px solid #d1d5dc;
  border-top:1.5px solid #d1d5dc;
  width:7px;
  height:7px;
  transform:rotate(45deg);
  margin:0 10px}
.empty {
  text-align:center;
  padding:calc(100 * var(--r)) 20px;
  color:#b6bdc8;
  font-size:calc(28 * var(--r))}
.empty img {
  width:calc(220 * var(--r));
  height:calc(170 * var(--r));
  opacity:.75;
  display:block;
  margin:0 auto 20px}
.load-more {
  text-align:center;
  color:#aaa;
  font-size:12px;
  padding:15px}
.form-gap {
  height:calc(30 * var(--r));
  background:#fbfdff}
.form-section {
  background:#fff}
.form-row {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:calc(92 * var(--r));
  padding:calc(20 * var(--r));
  border-bottom:.5px solid #edf0f3;
  font-size:calc(28 * var(--r))}
.form-row label,.form-row .field-label {
  flex:0 0 auto;
  max-width:45%;
  color:#303133;
  font-weight:500}
.required:before {
  content:'*';
  color:#fa3534;
  margin-right:4px}
.form-row .field-value {
  margin-left:auto;
  flex:1;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  text-align:right;
  min-width:0}
.form-row input {
  flex:1;
  text-align:right;
  width:100%;
  font-size:calc(28 * var(--r));
  min-height:26px}
.form-row input::placeholder,.form-row textarea::placeholder {
  color:#c0c4cc}
.form-row .select-value {
  flex:1;
  text-align:right;
  min-height:30px;
  color:#303133}
.placeholder {
  color:#c0c4cc!important}
.form-row .arrow {
  font-size:16px;
  color:#ccc;
  display:inline-block;
  margin-left:8px}
.switch {
  width:calc(72 * var(--r));
  height:calc(40 * var(--r));
  border-radius:30px;
  background:#eee;
  position:relative;
  transition:.15s}
.switch:after {
  content:'';
  position:absolute;
  left:2px;
  top:2px;
  bottom:2px;
  aspect-ratio:1;
  background:white;
  border-radius:50%;
  box-shadow:0 1px 3px #0002}
.switch.on {
  background:#2979ff}
.switch.on:after {
  left:auto;
  right:2px}
.form-row.vertical {
  align-items:stretch;
  flex-direction:column;
  gap:calc(16 * var(--r))}
.form-row textarea {
  width:100%;
  font-size:calc(28 * var(--r));
  line-height:1.6;
  min-height:calc(115 * var(--r))}
.form-row .counter {
  font-size:11px;
  color:#c0c4cc;
  text-align:right}
.upload-grid {
  display:flex;
  flex-wrap:wrap;
  gap:8px}
.upload-button,.photo-tile {
  height:calc(140 * var(--r));
  width:calc(140 * var(--r));
  background:#f4f5f6;
  border-radius:5px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative}
.upload-button {
  font-size:28px;
  color:#c0c4cc}
.upload-button svg {
  width:30px;
  height:30px}
.photo-tile img {
  height:100%;
  width:100%;
  object-fit:cover;
  border-radius:5px}
.photo-tile button {
  position:absolute;
  top:-6px;
  right:-6px;
  background:#fa5353;
  color:#fff;
  border-radius:50%;
  height:19px;
  width:19px;
  line-height:19px;
  font-size:15px}
.field-note {
  font-size:11px;
  color:#909399}
.round-primary {
  display:block;
  width:80%;
  height:40px;
  border-radius:24px;
  margin:calc(20 * var(--r)) auto;
  background:#2ab9fc;
  color:white;
  font-size:15px}
.approval-box {
  background:#fff;
  padding:calc(25 * var(--r)) calc(30 * var(--r));
  margin:calc(25 * var(--r)) 0}
.approval-box h2 {
  font-size:calc(32 * var(--r));
  font-weight:700;
  margin:0 0 calc(32 * var(--r))}
.timeline {
  padding-left:calc(70 * var(--r))}
.timeline-node {
  position:relative;
  min-height:calc(145 * var(--r));
  padding:0 0 calc(25 * var(--r)) calc(35 * var(--r));
  border-left:2px solid #e9edf3}
.timeline-node:last-child {
  border-left-color:transparent}
.timeline-icon {
  position:absolute;
  left:calc(-21 * var(--r));
  top:0;
  width:calc(40 * var(--r));
  height:calc(40 * var(--r));
  background:white}
.timeline-node b {
  font-size:calc(28 * var(--r));
  font-weight:500;
  display:block;
  margin-bottom:calc(14 * var(--r))}
.timeline-node p {
  color:#909399;
  font-size:calc(26 * var(--r));
  display:flex;
  justify-content:space-between;
  margin:0 0 5px}
.timeline-node time {
  font-size:11px;
  color:#aaa}
.detail-wrap {
  padding:calc(20 * var(--r));
  padding-bottom:30px}
.detail-card,.contact-card,.timeline-card {
  background:#fff;
  border-radius:8px;
  box-shadow:0 2px 14px #0000000d;
  padding:calc(20 * var(--r))}
.detail-heading {
  display:flex;
  align-items:center;
  gap:calc(18 * var(--r));
  margin:calc(20 * var(--r)) 0 calc(30 * var(--r))}
.detail-heading img {
  width:calc(80 * var(--r));
  height:calc(80 * var(--r));
  border-radius:50%}
.detail-heading b {
  font-size:calc(32 * var(--r));
  font-weight:700}
.status-tag {
  display:inline-block;
  padding:1px 6px;
  background:#e7f7ef;
  border:1px solid #b0e4c6;
  border-radius:3px;
  color:#43b37f;
  font-size:10px;
  margin-left:5px;
  white-space:nowrap}
.detail-row {
  display:flex;
  align-items:flex-start;
  margin-bottom:calc(24 * var(--r));
  font-size:calc(28 * var(--r));
  line-height:calc(34 * var(--r));
  gap:10px}
.detail-row .label {
  width:calc(235 * var(--r));
  color:#ccc;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:calc(4 * var(--r))}
.detail-row .label img {
  width:calc(28 * var(--r));
  height:calc(28 * var(--r))}
.detail-row .value {
  flex:1;
  color:#666;
  overflow-wrap:anywhere}
.contact-card {
  margin:calc(40 * var(--r)) 0}
.contact-card .detail-row {
  margin:0}
.timeline-card {
  padding:calc(30 * var(--r));
  margin-bottom:calc(40 * var(--r))}
.detail-buttons {
  display:flex;
  justify-content:center;
  gap:16px;
  margin:18px 0}
.detail-buttons button {
  height:40px;
  border:1px solid #eee;
  border-radius:22px;
  padding:0 22px;
  min-width:calc(245 * var(--r));
  background:white}
.detail-buttons .primary {
  background:#2ab9fc;
  border-color:#2ab9fc;
  color:#fff}
.list-page {
  padding-bottom:25px}
.notice-box {
  background:#fff;
  border-radius:8px;
  margin:calc(20 * var(--r));
  padding:calc(25 * var(--r));
  box-shadow:0 2px 14px #0000000d}
.message-row {
  display:flex;
  align-items:center;
  gap:calc(20 * var(--r));
  width:100%;
  text-align:left}
.message-row>img {
  width:calc(56 * var(--r));
  height:calc(56 * var(--r))}
.message-row b {
  font-size:calc(28 * var(--r));
  font-weight:500}
.message-row .sub {
  font-size:calc(24 * var(--r));
  color:#999;
  display:block}
.message-row time {
  font-size:10px;
  color:#ccc;
  margin-left:auto}
.message-card h3 {
  font-size:calc(32 * var(--r));
  margin:0 0 12px}
.message-card p {
  font-size:calc(28 * var(--r));
  color:#666;
  margin:0 0 12px;
  line-height:1.6}
.message-card small {
  color:#bbb}
.contact-main {
  border-radius:8px;
  background:white;
  min-height:50vh;
  padding:calc(15 * var(--r))}
.search {
  background:#f5f6f8;
  border-radius:20px;
  padding:8px 13px;
  display:flex;
  gap:7px;
  align-items:center;
  color:#aaa;
  margin:7px 10px 15px}
.search input {
  width:100%;
  font-size:14px}
.contact-letter {
  background:#f7f8fa;
  color:#909399;
  padding:4px 12px;
  font-size:13px}
.contact-line {
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:13px 12px;
  border-bottom:.5px solid #eee;
  text-align:left}
.contact-line img {
  width:32px;
  height:32px;
  border-radius:6px}
.contact-line small {
  margin-left:auto;
  color:#bbb}
.overlay {
  position:fixed;
  z-index:30;
  inset:0;
  background:#0006;
  display:flex;
  align-items:flex-end;
  justify-content:center}
.sheet {
  background:white;
  border-radius:13px 13px 0 0;
  width:100%;
  max-width:480px;
  max-height:85vh;
  overflow:auto;
  padding-bottom:calc(12px + var(--bottom))}
.sheet-head {
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  border-bottom:1px solid #f2f2f2;
  font-size:16px}
.sheet-head button {
  color:#2979ff;
  font-size:14px}
.sheet-option {
  display:block;
  width:100%;
  padding:15px;
  border-bottom:1px solid #f6f6f6;
  text-align:center;
  font-size:16px}
.sheet-option.selected {
  color:#2ab9fc;
  font-weight:600}
.sheet-fields {
  padding:10px 18px}
.sheet-fields label {
  display:block;
  margin:12px 0 5px;
  font-size:13px;
  color:#777}
.sheet-fields input,.sheet-fields select,.sheet-fields textarea {
  display:block;
  width:100%;
  min-height:43px;
  border:1px solid #e5e8ed;
  border-radius:6px;
  padding:8px;
  background:white}
.sheet-fields textarea {
  min-height:100px}
.sheet-fields p {
  font-size:12px;
  color:#999}
.overlay.center {
  align-items:center;
  padding:24px}
.dialog {
  width:100%;
  max-width:310px;
  border-radius:13px;
  background:#fff;
  overflow:hidden}
.dialog h3 {
  text-align:center;
  font-size:18px;
  font-weight:500;
  margin:23px 16px 12px}
.dialog p {
  font-size:14px;
  line-height:1.6;
  margin:0 23px 24px;
  color:#606266;
  white-space:pre-line}
.dialog-actions {
  display:flex;
  border-top:1px solid #f2f2f2}
.dialog-actions button {
  height:48px;
  flex:1;
  font-size:16px;
  color:#2979ff}
.dialog-actions button+button {
  border-left:1px solid #f2f2f2}
.dialog-actions .cancel {
  color:#606266}
#toast {
  position:fixed;
  bottom:25%;
  left:50%;
  transform:translateX(-50%);
  max-width:85%;
  background:#000b;
  color:white;
  padding:12px 19px;
  border-radius:6px;
  font-size:14px;
  z-index:60;
  display:none;
  pointer-events:none;
  white-space:pre-line}
#toast.show {
  display:block}
.photo-full {
  max-width:100%;
  max-height:85vh}
.local-hint {
  font-size:12px;
  color:#909399;
  padding:12px 20px;
  line-height:1.7}
.small-link {
  color:#4b96f9;
  font-size:12px;
  text-align:center;
  display:block;
  margin:20px auto}
.settings-card {
  background:#fff;
  margin:12px;
  padding:15px;
  border-radius:8px}
.settings-card h3 {
  margin:0 0 12px;
  font-size:15px}
.settings-card p {
  font-size:12px;
  color:#999}
.mini-actions {
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap}
.mini-actions button {
  padding:7px 12px;
  border:1px solid #dceeff;
  border-radius:5px;
  color:#3498db;
  font-size:12px}
.ticket {
  margin:18px;
  background:#fff;
  border:1px solid #e7e7e7;
  padding:24px;
  position:relative;
  overflow:hidden}
.ticket h1 {
  font-size:23px;
  text-align:center;
  margin:8px 0 28px}
.ticket .watermark {
  position:absolute;
  font-size:37px;
  opacity:.09;
  color:#222;
  transform:rotate(-30deg);
  top:45%;
  left:5%;
  white-space:nowrap;
  pointer-events:none}
.ticket dl {
  font-size:14px}
.ticket dt {
  color:#999;
  margin-top:16px}
.ticket dd {
  margin:4px 0 0}
.ticket .demo-mark {
  text-align:center;
  color:#f6993f;
  border:1px solid #ffd2a3;
  padding:7px;
  font-size:12px;
  margin-top:25px}
.map-placeholder {
  height:200px;
  background:#eef2f2;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background-image:linear-gradient(#fff6 1px,transparent 1px),linear-gradient(90deg,#fff6 1px,transparent 1px);
  background-size:35px 35px;
  color:#728b94}
.map-placeholder span {
  background:#fff;
  padding:10px 18px;
  border-radius:25px;
  box-shadow:0 2px 10px #0001}
.generic-list {
  padding:16px}
.generic-list h3 {
  font-size:16px}
.generic-list .notice-box {
  margin:12px 0}
.profile-edit {
  padding-bottom:20px}
.profile-edit .form-row label {
  width:calc(175 * var(--r))}
.profile-edit .avatar-small {
  width:50px;
  height:50px;
  border-radius:50%}
.login-page {
  background:#f2f6fc;
  min-height:100vh;
  padding:120px 30px 40px;
  text-align:center}
.login-page img {
  width:80px;
  height:80px;
  margin-bottom:20px}
.login-page h1 {
  font-size:24px}
.login-page p {
  color:#999;
  font-size:13px}
.temperature-value {
  font-size:52px;
  text-align:center;
  color:#2ab9fc;
  margin:20px 0}
.danger-text {
  color:#f56c6c!important}
.spacer-bottom {
  height:30px}
.inline-tags {
  display:flex;
  gap:6px;
  flex-wrap:wrap}
.inline-tags span {
  background:#ecf5ff;
  border:1px solid #b4d6fa;
  color:#5599d1;
  padding:2px 6px;
  font-size:11px;
  border-radius:3px}
body.secondary #app-shell {
  background:#fbfdff}
:root {
  color-scheme:light}
.profile-row {
  padding:0 calc(10 * var(--r))}
.detail-info hr {
  border-top:.5px solid #dcdfe6}
.profile-tools {
  height:calc(80 * var(--r))}
.scan-icon {
  width:calc(50 * var(--r));
  height:calc(50 * var(--r))}
.photo-tile>button:first-child {
  position:static;
  background:none;
  border-radius:5px;
  width:100%;
  height:100%;
  line-height:normal}
.photo-tile>button:first-child img {
  display:block}
.profile-page {
  background-color:#f2f6fc}
.detail-info hr {
  border-top:.5px solid #dcdfe6}
.scan-icon {
  width:calc(50 * var(--r));
  height:calc(50 * var(--r))}
body.secondary .navbar {
  top:var(--status)}
body.secondary #app-shell:before {
  content:"";
  position:fixed;
  top:0;
  height:var(--status);
  width:100%;
  max-width:480px;
  background:#fff;
  z-index:9}
body.secondary #preview-status {
  position:fixed;
  z-index:11;
  max-width:480px;
  margin:auto}

/* Leave screens measured against the supplied production screenshots. */
.leave-index-tabs button {
  flex:1 1 0;
  min-width:0;
  padding:0;
  font-size:calc(24 * var(--r));
  color:#606266}
.leave-index-tabs button.active {
  color:#333;
  font-weight:600}
.leave-index-tabs button.active:after {display:none}
.leave-index-list {
  min-height:calc(100dvh - var(--status) - 130px);
  padding:0 calc(25 * var(--r)) calc(30 * var(--r))}
.leave-index-list .empty {
  padding:calc(300 * var(--r)) 0 0;
  font-size:calc(40 * var(--r));
  color:#303133}
.leave-index-list .empty img {
  width:calc(120 * var(--r));
  height:calc(120 * var(--r));
  margin:calc(40 * var(--r)) auto calc(20 * var(--r));
  opacity:1}
.leave-index-list .leave-item:first-child {margin-top:calc(30 * var(--r))}
.leave-form {background:#fbfdff;min-height:calc(100dvh - var(--status) - 44px)}
.leave-form .form-gap {height:calc(30 * var(--r))}
.leave-row {
  min-height:calc(110 * var(--r));
  padding:calc(20 * var(--r));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:calc(15 * var(--r));
  border-bottom:1px solid #eef0f2;
  background:#fff;
  font-size:calc(28 * var(--r));
  line-height:calc(70 * var(--r))}
.leave-row>label,.leave-block>label {
  color:#303133;
  font-weight:500;
  position:relative;
  flex:none}
.leave-form .required:before {
  position:absolute;
  left:calc(-16 * var(--r));
  top:0;
  margin:0;
  color:#fa3534}
.leave-value {
  margin-left:auto;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:calc(8 * var(--r));
  text-align:right;
  max-width:60%;
  font-size:calc(28 * var(--r));
  line-height:1.4}
.leave-static {margin-left:auto;color:#303133}
.down-triangle {
  display:inline-block;
  width:0;height:0;
  border-left:6px solid transparent;
  border-right:6px solid transparent;
  border-top:8px solid #aeb1b8;
  flex:none}
.leave-row .switch {
  margin-left:auto;
  width:calc(100 * var(--r));
  height:calc(50 * var(--r));
  border:1px solid #e2e2e2;
  box-shadow:0 1px 2px #0001;
  background:#fff}
.leave-row .switch.on {background:#68c23a;border-color:#68c23a}
.leave-row .switch:after {box-shadow:0 1px 3px #0003}
.leave-block {
  position:relative;
  padding:calc(20 * var(--r));
  background:#fff;
  border-bottom:1px solid #eef0f2;
  font-size:calc(28 * var(--r))}
.leave-block>label {display:block;margin-bottom:calc(28 * var(--r))}
.leave-block textarea {
  width:100%;
  min-height:calc(110 * var(--r));
  font-size:calc(28 * var(--r));
  line-height:1.6;
  text-align:left}
.leave-block textarea::placeholder {color:#c0c4cc}
.leave-form .counter {display:block;text-align:right;color:#c0c4cc;font-size:11px}
.region-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  min-height:calc(74 * var(--r));
  align-items:center;
  gap:calc(10 * var(--r))}
.region-grid button {
  display:flex;
  justify-content:center;
  align-items:center;
  gap:calc(8 * var(--r));
  white-space:nowrap;
  min-width:0}
.region-grid button span {overflow:hidden;text-overflow:ellipsis}
.region-grid .down-triangle {border-left-width:4px;border-right-width:4px;border-top-width:5px;border-top-color:#c4c4c4}
.reason-block {min-height:calc(200 * var(--r))}
.teacher-block {min-height:calc(155 * var(--r))}
.teacher-search {display:flex;align-items:center;gap:8px;width:100%}
.teacher-search-field {
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  gap:5px;
  background:#f1f2f3;
  color:#777;
  border-radius:30px;
  padding:0 10px;
  height:calc(66 * var(--r))}
.teacher-search-field>span {font-size:21px}
.teacher-search-field input {width:100%;font-size:calc(28 * var(--r))}
.teacher-search-field input::placeholder {color:#a7a7a7}
.teacher-search-button {white-space:nowrap}
.teacher-select-button {
  padding:calc(8 * var(--r)) calc(14 * var(--r));
  color:#fff;
  background:#2979ff;
  border-radius:6px;
  white-space:nowrap}
.teacher-block .inline-tags {margin-top:10px}
.teacher-block .inline-tags button {border-radius:4px;padding:2px 6px;background:#ecf5ff;color:#5599d1;font-size:11px}
.leave-upload {min-height:calc(170 * var(--r))}
.leave-upload .upload-button {
  width:calc(65 * var(--r));
  height:calc(65 * var(--r));
  background:transparent;
  color:#c6c9cf}
.leave-upload .upload-button svg {width:100%;height:100%}
.leave-upload .photo-tile {width:calc(110 * var(--r));height:calc(110 * var(--r))}
.leave-approval>label {font-size:calc(30 * var(--r));color:#909399}
.leave-approval .timeline {margin-top:calc(25 * var(--r))}
.wheel-overlay {background:rgba(0,0,0,.60)}
.wheel-sheet {
  width:100%;
  max-width:480px;
  height:calc(590 * var(--r));
  min-height:280px;
  background:#fff;
  overflow:hidden}
.wheel-head {
  height:calc(90 * var(--r));
  min-height:43px;
  padding:0 calc(40 * var(--r));
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid #f4f4f4;
  font-size:calc(30 * var(--r))}
.wheel-sheet.select .wheel-head {height:calc(80 * var(--r))}
.wheel-head button:last-child {color:#2979ff}
.wheel-body {
  height:calc(500 * var(--r));
  min-height:237px;
  display:flex;
  position:relative;
  overflow:hidden}
.wheel-body:before,.wheel-body:after {
  content:'';
  position:absolute;
  left:0;right:0;
  border-top:1px solid #e7e7e7;
  z-index:2;
  pointer-events:none}
.wheel-body:before {top:calc(50% - 20px)}
.wheel-body:after {top:calc(50% + 20px)}
.wheel-column {
  flex:1;
  min-width:0;
  height:100%;
  overflow-y:auto;
  padding:calc((500 * var(--r) - 40px) / 2) 0;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  overscroll-behavior:contain;
  touch-action:pan-y;
  -webkit-overflow-scrolling:touch;
  text-align:center}
.wheel-column::-webkit-scrollbar {display:none}
.wheel-item {
  display:flex;
  width:100%;
  height:40px;
  align-items:center;
  justify-content:center;
  scroll-snap-align:center;
  color:#999;
  opacity:.45;
  white-space:nowrap;
  font-size:calc(30 * var(--r))}
.wheel-item.selected {opacity:1;color:#303133;font-size:calc(32 * var(--r))}
.leave-index-list .empty {padding-top:calc(284 * var(--r))}
.leave-index-list .empty img {margin-bottom:calc(62 * var(--r))}

/* Local multi-account entry uses artwork and icons bundled with the original APK. */
.auth-page {
  min-height:100vh;
  min-height:100dvh;
  padding:calc(100vw * .91) 24px 42px;
  background:#fff url('static/login/login_bg.jpg') center top/100% auto no-repeat}
.auth-card {background:#fff;padding:8px 0 20px}
.auth-card h1 {font-size:22px;font-weight:600;text-align:center;margin:0 0 4px}
.auth-card .auth-sub {font-size:12px;color:#909399;text-align:center;margin:0 0 20px}
.auth-input {
  display:flex;
  width:100%;
  height:44px;
  align-items:center;
  gap:12px;
  background:#eef2f4;
  border-radius:44px;
  padding:0 16px;
  margin:0 0 13px}
.auth-input img {width:22px;height:22px;object-fit:contain}
.auth-input input {width:100%;height:100%;font-size:14px;text-align:left}
.auth-input input::placeholder {color:#aeb6bb}
.auth-button {width:100%;height:44px;background:#27bcf5;color:white;border-radius:25px;font-size:16px;margin:10px 0}
.auth-secondary {width:100%;height:40px;font-size:14px;color:#339bd3}
.auth-tip {color:#9aa5ac;text-align:center;font-size:11px;line-height:1.7;margin:12px 0 4px}
.auth-legacy {border:1px solid #bfe5fa;border-radius:12px;padding:12px 14px;margin:16px 0;color:#657680;font-size:13px}
.auth-legacy b {display:block;color:#303133;font-size:14px;margin-bottom:4px}
.auth-legacy button {color:#2ab9fc;font-size:13px;margin-top:6px}
.auth-register-page {min-height:100vh;min-height:100dvh;background:#f6f9fc}
.auth-register-head {height:115px;background:linear-gradient(115deg,#7ee1fb,#d8f4fa);padding:16px 20px 22px}
.auth-register-head h1 {font-size:22px;color:#086b94;margin:8px 0 4px}
.auth-register-head p {font-size:12px;color:#498b9d;margin:0}
.auth-form {margin:12px 12px 20px;background:#fff;border-radius:10px;overflow:hidden}
.auth-field {min-height:51px;display:flex;align-items:center;border-bottom:1px solid #eef0f2;gap:8px;padding:8px 15px;font-size:14px}
.auth-field:last-child {border-bottom:0}
.auth-field label {width:82px;flex:none;color:#303133}
.auth-field label.required:before {color:#f56c6c}
.auth-field input,.auth-field select {flex:1;width:100%;height:35px;text-align:right;background:transparent;border:0;outline:0;color:#303133}
.auth-field input::placeholder {color:#c0c4cc}
.auth-actions {padding:0 22px 30px}
.account-hint {font-size:12px;color:#909399;padding:10px 16px;line-height:1.6}
.account-chip {display:block;width:100%;text-align:left;padding:10px 14px;background:#f5faff;border:1px solid #d9efff;border-radius:8px;margin:8px 0;font-size:13px}
.account-chip small {display:block;color:#909399}

.approver-block .leave-row {padding-left:calc(20 * var(--r));padding-right:calc(20 * var(--r))}
.approver-block .leave-row input {flex:1;max-width:60%;height:calc(68 * var(--r));text-align:right;font-size:calc(28 * var(--r))}
.approver-block .leave-row input::placeholder {color:#c0c4cc}
.approver-note {margin:0;padding:8px calc(20 * var(--r)) 12px;color:#909399;font-size:11px;line-height:1.5;background:#fff}
.admin-login-note {margin:0;text-align:center;color:#909399;font-size:11px}
.admin-setup-link {margin-top:-4px}
.admin-fixed-name {margin-left:auto;color:#606266;font-size:14px}
.admin-local-notice {margin:12px;color:#909399;font-size:12px;line-height:1.6}
.admin-page {min-height:100vh;min-height:100dvh;background:#f6f9fc;padding-bottom:28px}
.admin-hero {padding:25px 20px 20px;background:linear-gradient(118deg,#a5ebfc,#d9f7ff)}
.admin-hero-top {display:flex;align-items:center;justify-content:space-between;gap:12px}
.admin-hero small {display:block;color:#47859b;font-size:12px}
.admin-hero h1 {margin:3px 0 0;color:#145d77;font-size:23px;font-weight:600}
.admin-hero p {margin:7px 0 0;color:#47859b;font-size:12px}
.admin-count {flex:none;padding:5px 9px;border-radius:12px;color:#127ca2;background:#ffffffb8;font-size:11px}
.admin-toolbar {display:flex;justify-content:flex-end;gap:15px;padding:11px 17px;background:#fff}
.admin-toolbar button {color:#2999c5;font-size:13px}
.admin-tabs {display:flex;gap:6px;margin:14px 12px 8px;background:#eaf2f7;border-radius:10px;padding:4px}
.admin-tabs button {flex:1;padding:8px 2px;border-radius:8px;color:#7b8992;font-size:13px}
.admin-tabs button.active {background:#fff;color:#168dc0;font-weight:600;box-shadow:0 1px 5px #00000012}
.admin-list {padding:2px 12px 14px}
.admin-card {display:block;width:100%;margin:10px 0;padding:15px;text-align:left;background:#fff;border-radius:10px;box-shadow:0 2px 10px #0000000b}
.admin-card-head {display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.admin-card-head b {min-width:0;font-size:15px;overflow-wrap:anywhere}
.admin-card-status {flex:none;color:#56ab7f;background:#edf9f2;border-radius:4px;padding:2px 6px;font-size:11px}
.admin-card-status.waiting {color:#e39920;background:#fff4dd}
.admin-card-line {margin-top:5px;font-size:12px;color:#7c858b;overflow-wrap:anywhere}
.admin-empty {margin:20px 12px;padding:18px 0;background:#fff;border-radius:10px}
.admin-empty .empty {padding:40px 0}
.admin-error {margin:18px 12px;padding:15px;background:#fff7f5;border:1px solid #ffd8d0;border-radius:8px;color:#b45346;font-size:13px}
.admin-detail {padding:12px;min-height:calc(100dvh - var(--status) - 44px);background:#f6f9fc}
.admin-detail .detail-card,.admin-detail .timeline-card {margin:0 0 12px;padding:16px}
.admin-detail .detail-row {margin-bottom:12px}
.admin-detail .timeline-card h2 {margin:0 0 12px;font-size:15px}
.admin-actions {display:flex;gap:10px;margin:15px 0}
.admin-actions button {flex:1;min-height:42px;padding:9px 8px;border-radius:22px;font-size:14px}
.admin-actions button.primary {background:#2ab9fc;color:#fff}
.admin-actions button.outline {border:1px solid #ef9393;color:#d16e6e;background:#fff}
.admin-review-note {margin:0 0 10px;color:#7b858b;font-size:12px;line-height:1.5}
.sheet-fields select {width:100%;height:37px;padding:4px 0;border-bottom:1px solid #eee;background:#fff;text-align:left}
.sample-tag {display:inline-block;margin-left:6px;padding:1px 5px;border-radius:3px;background:#eef2f5;color:#7c8790;font-size:10px;font-weight:400;vertical-align:middle}