/* Flat blue workspace theme informed by the selected admin reference. */
:root {
  --blue: #5d8ef4;
  --deep: #326fdc;
  --line: #e9eef6;
  --soft: #f5f8ff;
  --tblr-primary: #5d8ef4;
  --tblr-primary-rgb: 93, 142, 244;
}
body { background: #f7f9fd; color: #293449; }
.primary-btn, .btn-primary {
  background: #5d8ef4;
  border-color: #5d8ef4;
  border-radius: 7px;
  box-shadow: none;
}
.primary-btn:hover, .btn-primary:hover {
  background: #427be9;
  border-color: #427be9;
  box-shadow: none;
}
.outline-btn, .btn-outline-primary {
  border-color: #abc5fb;
  border-radius: 7px;
  color: #4e81e9;
  box-shadow: none;
}
.outline-btn:hover, .btn-outline-primary:hover {
  background: #f0f5ff;
  border-color: #75a0f4;
  color: #326fdc;
}

/* Management workspace */
.admin-body { background: #f6f8fd; }
.admin-layout { grid-template-columns: 184px minmax(0, 1fr); }
.admin-sidebar {
  background: #fff;
  border-right: 1px solid #e8edf7;
  padding: 0;
  box-shadow: none;
}
.admin-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  margin: 0;
  padding: 28px 12px 24px;
  border-bottom: 1px solid #f0f3f8;
}
.admin-brand .brand-mark, .admin-brand img {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0 0 10px;
  border-radius: 10px;
  object-fit: cover;
  font-size: 19px;
  box-shadow: none;
  background: #5d8ef4;
}
.admin-brand .brand-mark[hidden], .admin-brand img[hidden] { display: none !important; }
.admin-brand strong {
  color: #273247;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 720;
}
.admin-brand small {
  color: #8fa6d0;
  font-size: 10px;
}
.admin-nav { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; gap: 0; padding: 10px 0; margin: 0; overflow-y: auto; overflow-x: hidden; }
.admin-nav button {
  display: flex;
  align-items: center;
  width: 100%;
  height: 47px;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0;
  padding: 0 23px;
  background: #fff;
  text-align: left;
  color: #5e6879;
  font-size: 13px;
  font-weight: 570;
  transition: background .15s, color .15s;
}
.admin-nav button:hover { background: #f5f8ff; color: #4e80df; transform: none; }
.admin-nav button.active {
  border-left-color: #4b82ed;
  background: #edf3ff;
  color: #3269d5;
  font-weight: 720;
}
.sidebar-bottom { margin-top: auto; border-top: 1px solid #edf1f7; padding: 15px 22px; }
.sidebar-bottom a { color: #7189b2; font-size: 11px; }
.admin-main {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 0;
  background: #f6f8fd;
}
.admin-topbar {
  height: 58px;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  background: #fff;
  border-bottom: 1px solid #eaf0f8;
}
.menu-toggle {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
}
.menu-toggle:hover { background: #f0f5ff; }
.menu-toggle img { width: 25px; height: 25px; filter: invert(49%) sepia(57%) saturate(1281%) hue-rotate(193deg) brightness(102%); }
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.topbar-actions span { color: #3768c5; font-size: 11px; font-weight: 700; }
.topbar-actions button {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 0;
  border-left: 1px solid #e9eef5;
  padding: 3px 0 3px 13px;
  background: transparent;
  color: #8a98aa;
  font-size: 11px;
}
.topbar-actions button:hover { color: #4078e2; }
.topbar-actions button img { width: 15px; height: 15px; opacity: .58; }
.admin-workspace {
  flex: 1;
  min-height: calc(100vh - 97px);
  margin: 15px 18px 25px;
  padding: 19px 25px 26px;
  background: #fff;
  border: 1px solid #eef2f9;
  border-radius: 8px;
}
.admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 21px;
  padding: 0;
  min-height: 30px;
}
.admin-title-group { display: flex; align-items: center; gap: 11px; min-width: 0; }
.section-rule { display: block; width: 4px; height: 22px; border-radius: 3px; background: #5d8ef4; }
.admin-header h1 { margin: 0; font-size: 17px; font-weight: 730; color: #263248; white-space: nowrap; }
.admin-header-actions { display: flex; align-items: center; gap: 14px; }
.admin-header-actions span { color: #4268a7; font-size: 11px; font-weight: 670; }
.admin-header-actions .outline-btn { height: 30px; padding: 0 10px; font-size: 11px; }
.sidebar-scrim { display: none; }
.admin-layout.sidebar-collapsed { grid-template-columns: 0 minmax(0, 1fr); }
.admin-layout.sidebar-collapsed .admin-sidebar { overflow: hidden; visibility: hidden; }
.admin-grid { gap: 12px; margin-bottom: 22px; }
.stat-card, .admin-card, .login-card.card {
  box-shadow: none;
  border: 1px solid #e7edf7;
  border-radius: 8px;
}
.stat-card { padding: 18px 20px; }
.stat-card:first-child { border-top: 2px solid #5d8ef4; }
.stat-card small { color: #8997aa; font-size: 11px; }
.stat-card strong { color: #2a3c5c; font-size: 26px; margin-top: 6px; }
.admin-card { padding: 20px 21px; margin-bottom: 17px; }
.admin-card h2 { color: #29354b; font-size: 15px; }
.admin-section-head h2 { color: #2c3c58; font-size: 15px; }
.overview-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, .85fr); }
.overview-spotlight {
  min-height: 256px;
  border: 1px solid #e3ebfa;
  border-left: 4px solid #5d8ef4;
  border-radius: 7px;
  background: #f6f9ff;
  color: #314363;
}
.overview-kicker { color: #5180d7; opacity: 1; }
.overview-spotlight h2 { margin-top: 19px; color: #27364f; font-size: 20px; }
.overview-spotlight p { color: #697b98; }
.overview-actions button {
  border: 1px solid #a9c2f7;
  border-radius: 5px;
  background: #fff;
  color: #4a77d7;
}
.overview-actions button:first-child { background: #5d8ef4; border-color: #5d8ef4; color: #fff; }
.overview-actions button:hover { background: #edf3ff; color: #366fda; }
.overview-actions button:first-child:hover { background: #447bea; color: #fff; }
.overview-meta { border-top: 1px solid #e0eafa; color: #8c9bb4; }
.overview-operations button:hover { color: #4b7ee6; }
.admin-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 10px;
}
.admin-search-field { display: flex; align-items: stretch; height: 34px; }
.admin-search-field input {
  min-width: 0;
  width: min(244px, 42vw);
  padding: 0 10px;
  border: 1px solid #e2e9f5;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #fff;
  color: #34445d;
  font-size: 11px;
}
.admin-search-field input:focus { border-color: #9cbbf6; outline: 0; box-shadow: inset 0 0 0 1px #9cbbf6; }
.admin-search-field button {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  min-width: 62px;
  white-space: nowrap;
  padding: 0 12px;
  border: 1px solid #5d8ef4;
  border-radius: 0 5px 5px 0;
  background: #5d8ef4;
  color: #fff;
  font-size: 11px;
  font-weight: 650;
}
.admin-search-field button img { width: 15px; height: 15px; filter: brightness(0) invert(1); }
.admin-toolbar select {
  height: 34px;
  min-width: 130px;
  padding: 0 10px;
  border: 1px solid #e2e9f5;
  border-radius: 5px;
  background: #fff;
  color: #64758d;
  font-size: 11px;
}
.toolbar-fill { flex: 1; }
.task-queue-summary { color: #72839d; font-size: 11px; white-space: nowrap; }
.admin-action {
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid #9ebaf6;
  border-radius: 18px;
  background: #fff;
  color: #4f80e5;
  font-size: 11px;
  font-weight: 650;
}
.admin-action:hover { background: #edf4ff; }
.admin-action.primary { border-color: #5d8ef4; background: #5d8ef4; color: #fff; }
.admin-action.primary:hover { background: #447bea; }
.account-table-panel { padding: 0; overflow: hidden; }
.account-table-panel .table-wrap { padding: 0; overflow-x: auto; }
.admin-table { min-width: 620px; border-collapse: collapse; }
.admin-table thead th {
  height: 34px;
  padding: 7px 16px;
  border: 0;
  background: #f2f6ff;
  color: #303e53;
  font-size: 11px;
  font-weight: 690;
}
.admin-table tbody td {
  height: 37px;
  padding: 6px 16px;
  border: 0;
  color: #6a778a;
  font-size: 11px;
}
.admin-table tbody tr:nth-child(even) td { background: #f4f8ff; }
.admin-table tbody tr:hover td { background: #ebf3ff; }
.admin-table td strong { color: #34435c; font-size: 11px; font-weight: 640; }
.account-email-cell { overflow-wrap: anywhere; }
.table-actions { flex-wrap: nowrap; gap: 5px; }
#account-table { min-width: 1080px; }
.account-actions-cell { min-width: 300px; width: 300px; }
.account-row-actions { display: grid; justify-items: start; gap: 6px; }
.account-action-primary, .account-action-secondary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.account-row-actions .mini-button { white-space: nowrap; }
.account-more-trigger { border-color: #d6e0f1; color: #637792; background: #f8faff; }
.account-more-trigger:hover { background: #edf3ff; color: #3c68c5; }
.account-delete-warning { padding: 14px 16px; border: 1px solid #f1d5d7; border-radius: 12px; background: #fff9f9; color: #8e4650; line-height: 1.65; }
.account-delete-warning p { margin: 0; }
.account-delete-warning p + p { margin-top: 7px; }
.account-more-options { display: grid; gap: 12px; }
.account-more-option { display: flex; align-items: center; gap: 10px; padding: 15px 16px; border: 1px solid #e1e9f5; border-radius: 12px; background: #fafcff; }
.account-more-option > div { flex: 1; min-width: 0; }
.account-more-option strong, .account-more-option small { display: block; }
.account-more-option small { margin-top: 4px; color: #8190a5; line-height: 1.45; }
.account-more-danger { border-color: #f3e3e4; background: #fffafa; }
.profile-alert { position:fixed; top:78px; right:24px; z-index:70; display:flex; align-items:center; gap:12px; max-width:min(520px,calc(100vw - 32px)); padding:12px 14px; border:1px solid #f3d6b4; border-radius:12px; background:#fffaf2; box-shadow:0 12px 32px #1f293722; color:#7c4924; }
.profile-alert[hidden] { display:none; }
.profile-alert > div { min-width:0; flex:1; }
.profile-alert strong,.profile-alert small { display:block; }
.profile-alert small { margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.profile-alert button { flex:none; border:1px solid #e9ba89; border-radius:8px; background:#fff; color:#8e521f; padding:6px 9px; cursor:pointer; }
@media (max-width:560px) { .profile-alert { top:60px; right:16px; left:16px; } }
.force-duration-fields { display: grid; grid-template-columns: minmax(0,1fr) 140px; gap: 12px; }
@media (max-width: 560px) { .account-more-option { flex-wrap: wrap; } .force-duration-fields { grid-template-columns: minmax(0,1fr) 110px; } }
.account-pagination { justify-content: space-between; }
.account-pagination-actions { display: flex; align-items: center; gap: 16px; }
.account-pagination .code-page-size select { min-width: 68px; }
.auto-check-cell .recheck-hint { color: #8797ae; }
.mini-button {
  min-height: 24px;
  padding: 1px 8px;
  border: 1px solid #a7c3ff;
  border-radius: 13px;
  background: transparent;
  color: #5a86e7;
  font-size: 10px;
  white-space: nowrap;
}
.mini-button:hover { background: #eaf2ff; }
.mini-button.danger { border-color: #efc2c2; color: #d37a7a; }
.mini-button.danger:hover { background: #fff2f2; }
.admin-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 10px 12px;
  color: #8b98a9;
  font-size: 11px;
}
.page-controls { display: flex; align-items: center; gap: 8px; }
.page-controls button {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #d9e3f2;
  border-radius: 4px;
  background: #fff;
  color: #6786bb;
  font-size: 18px;
}
.page-controls button:disabled { opacity: .4; cursor: default; }
.empty-admin { padding: 48px 18px; color: #9aa6b7; }
.badge { border-radius: 4px; }
.badge.warning { background: #edf2f8; color: #64758d; }
.badge.disabled { background: #edf0f4; color: #657386; }
.account-table-panel .badge.unknown,.account-table-panel .badge.error { background: #fff0f0; color: #c7464e; }
.account-table-panel .badge.checking { background: #e9f2ff; color: #2d69d2; }
.form-field input, .form-field textarea, .form-field select, .login-card input {
  border-radius: 6px;
  background: #fff;
  border-color: #e1e8f2;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus, .login-card input:focus {
  border-color: #92b4f6;
  box-shadow: 0 0 0 2px rgba(93,142,244,.1);
}
.security-icon { border-radius: 6px; background: #eef4ff; color: #4c7fea; }
.login-card.card { border-radius: 9px; }
.login-mark { background: #5d8ef4; border-radius: 8px; }
.support-panel, .admin-dialog { border-radius: 10px; }
.notice-box { border-radius: 6px; background: #f5f8ff; }

/* Phone share page in the same visual language */
.public-body { background: #f7f9fd; }
.site-header { height: 56px; background: #fff; border-bottom: 1px solid #e7edf8; box-shadow: none; }
.brand { font-size: 14px; }
.brand-mark, .login-mark { background: #5d8ef4; border-radius: 7px; box-shadow: none; }
#brand-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.site-header .brand { min-width:0; }
.header-logout { flex:none; color:#667b9a; white-space:nowrap; padding:9px 4px; font-size:13px; }
.header-logout[hidden] { display:none; }
.share-shell { max-width: 660px; padding-top: 20px; }
.unlock-card.card {
  margin-top: 32px;
  border: 1px solid #e5ecf7;
  border-radius: 9px;
  box-shadow: none;
}
.unlock-brand { margin-bottom: 27px; }
.unlock-brand .brand-mark { border-radius: 5px; }
.unlock-card .eyebrow { color: #5988e5; }
.unlock-card h1 { color: #26344c; font-size: 25px; }
.unlock-card p { color: #8795a9; }
.input-with-action input {
  height: 43px;
  border-radius: 6px;
  background: #fff;
  border-color: #dce6f4;
}
.input-with-action input:focus { box-shadow: 0 0 0 2px rgba(93,142,244,.1); border-color: #9ab9f6; }
.input-action { color: #4a7ce6; }
.unlock-card .primary-btn { height: 44px; }
.share-hero {
  border: 1px solid #e5ecf7;
  border-radius: 8px;
  padding: 20px 22px;
  box-shadow: none;
}
.share-hero:before { content: ""; display: block; width: 4px; height: 23px; position: absolute; top: 21px; left: 0; background: #5d8ef4; border-radius: 0 3px 3px 0; }
.share-hero .hero-top h1 { margin:0; color:#4f7fe0; font-size:clamp(22px,4.5vw,25px); font-weight:700; line-height:1.3; }
.share-hero .hero-top { margin-bottom:14px; }
.access-line { flex-wrap:wrap; }
.access-line strong { white-space:nowrap; }
.share-hero p { color: #7f8ea6; }
.access-line {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  color: #6d85ab;
}
.access-dot { background: #5d8ef4; }
.access-line strong { border-left-color: #d6e2fa; }
.module.card {
  border: 1px solid #e5ecf7;
  border-radius: 8px;
  padding: 20px 22px;
  box-shadow: none;
}
.module-header { margin-bottom: 14px; }
.module-header h2 {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #2d3a50;
  font-size: 16px;
}
.module-header h2:before {
  content: "";
  width: 4px;
  height: 17px;
  display: block;
  border-radius: 3px;
  background: #5d8ef4;
}
.notice-module { border-left: 1px solid #e5ecf7 !important; }
.notice-module .module-header h2 { color: #2d3a50; }
.module p { color: #66768c; line-height: 1.8; }
.guide-image { border-radius: 5px; border-color: #e3eaf5; background: #f8faff; }
.guide-image span { border-radius: 4px; }
.plain-module { padding: 2px 0 0; }
.plain-module .module-header { padding: 0 2px; }
.account-card.card {
  border: 1px solid #e3eaf7;
  border-radius: 7px;
  box-shadow: none;
  padding: 18px 19px;
}
.account-card.card:before { display: none; }
.account-card.card:hover { transform: none; box-shadow: none; border-color: #bdcff4; }
.account-card-header {
  border-left: 4px solid #5d8ef4;
  padding-left: 10px;
  margin-bottom: 16px;
}
.account-card h3 { color: #2d3a50; }
.credential-row { min-height: 61px; border-radius: 5px; border: 0; background: #f3f7ff; }
.credential-row:nth-of-type(odd) { background: #fafbfe; }
.credential-main small { color: #8998ae; }
.credential-main strong { color: #3c4c64; }
.credential-icon { color: #5d8ef4; }
.credential-row img.credential-icon { width: 18px; height: 18px; flex: none; filter: invert(54%) sepia(34%) saturate(1552%) hue-rotate(191deg) brightness(99%); }
.copy-btn {
  width: 34px;
  height: 34px;
  background: #5d8ef4;
  border-radius: 5px;
  box-shadow: none;
}
.copy-btn img { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.copy-btn:hover { background: #427be9; }
.account-note { border-top: 1px solid #ecf0f7; padding-top: 12px; color: #7f8da1; }
.faq-list details { border-top-color: #e9eff8; }
.faq-list summary { color: #33445d; }
.support-fab {
  background: #5d8ef4;
  border-radius: 8px;
  box-shadow: 0 7px 19px rgba(88,135,232,.18);
}
.support-fab:hover { background: #427be9; }
.support-fab img { width: 17px; height: 17px; filter: brightness(0) invert(1); }
.image-bar { position: sticky; top: 0; z-index: 1; flex: none; }
.image-bar-actions { display: flex; align-items: center; gap: 8px; }
.image-overlay.zoomed { display: block; overflow: auto; }
.image-overlay.zoomed img { display: block; width: min(1180px, 200vw); max-width: none; max-height: none; height: auto; margin: 0; }

/* Reading scale and typography */
body { font-size: 14px; font-weight: 400; }
.admin-layout { grid-template-columns: 216px minmax(0, 1fr); }
.admin-brand { padding: 31px 12px 27px; }
.admin-brand .brand-mark, .admin-brand img { width: 56px; height: 56px; font-size: 21px; }
.admin-brand strong { font-size: 16px; font-weight: 650; }
.admin-brand small { font-size: 12px; }
.admin-nav button { height: 53px; padding-left: 28px; font-size: 15px; font-weight: 500; }
.admin-nav button.active { font-weight: 650; }
.sidebar-bottom a { font-size: 13px; }
.admin-topbar { height: 64px; min-height: 64px; }
.topbar-actions span, .topbar-actions button { font-size: 13px; }
.admin-workspace { margin: 18px 22px 28px; padding: 26px 30px 32px; }
.admin-header { margin-bottom: 26px; }
.admin-header h1 { font-size: 20px; font-weight: 650; }
.admin-header-actions span, .admin-header-actions .outline-btn { font-size: 13px; }
.admin-header-actions .outline-btn { height: 36px; }
.stat-card small { font-size: 13px; }
.stat-card strong { font-size: 31px; font-weight: 650; }
.admin-card h2, .admin-section-head h2 { font-size: 18px; font-weight: 650; }
.overview-spotlight h2 { font-size: 24px; font-weight: 650; }
.overview-spotlight p, .overview-operations strong { font-size: 14px; }
.overview-operations small, .overview-meta, .card-help, .admin-card p.card-help { font-size: 13px; }
.admin-search-field { height: 41px; }
.admin-search-field input { width: min(290px, 42vw); font-size: 13px; }
.admin-search-field button, .admin-toolbar select, .admin-action { font-size: 13px; }
.admin-toolbar select { height: 41px; min-width: 150px; }
.admin-action { min-height: 39px; padding-inline: 17px; font-weight: 600; }
.admin-table thead th { height: 42px; padding: 9px 17px; font-size: 13px; font-weight: 600; }
.admin-table tbody td { height: 45px; padding: 9px 17px; font-size: 13px; }
.admin-table td strong { font-size: 13px; font-weight: 600; }
.auto-check-cell { min-width: 220px; max-width: 310px; white-space: normal; }
.auto-check-cell small { display: block; margin-top: 3px; color: #8290a5; font-size: 11px; line-height: 1.45; }
.auto-check-cell .check-result-detail { color: #566985; font-size: 12px; }
.auto-check-cell strong { color: #25344b; font-weight: 600; }
.mini-button { min-height: 29px; font-size: 12px; padding-inline: 10px; font-weight: 600; }
.mini-button:disabled { cursor: not-allowed; opacity: .48; }
.check-confirmation p { margin: 0 0 13px; color: #43536c; line-height: 1.7; }
.check-confirmation p:first-child { color: #25344b; font-size: 15px; }
.check-confirmation .form-actions { margin-top: 24px; }
.admin-pagination { font-size: 13px; padding-block: 13px; }
.page-controls button { width: 30px; height: 30px; }
.form-field { font-size: 14px; font-weight: 600; }
.form-field input, .form-field textarea, .form-field select { font-size: 14px; min-height: 44px; }
.form-hint { font-size: 12px; }
.auto-check-settings { border-top: 1px solid #e7edf6; padding-top: 16px; }
.auto-check-settings .switch-row { margin-top: 12px; justify-content: flex-start; gap: 12px; }
.auto-check-settings input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; }
.primary-btn, .outline-btn { font-weight: 600; }
.admin-dialog { width: min(100%, 820px); max-height: calc(100dvh - 36px); display: flex; flex-direction: column; overflow: hidden; }
.dialog-head { flex: none; padding: 18px 25px; }
.dialog-head h2 { font-size: 19px; font-weight: 650; }
.dialog-content { min-height: 0; overflow-y: auto; padding: 22px 25px 26px; }
.login-card h1 { font-weight: 650; }
.login-brand-logo { display: block; width: 43px; height: 43px; margin-bottom: 28px; border-radius: 8px; object-fit: cover; }
.login-brand-logo[hidden], .login-mark[hidden] { display: none !important; }

.site-header .brand:not(.ready) { visibility: hidden; }
.brand { font-size: 16px; font-weight: 650; }

.share-shell { max-width: 720px; }
.unlock-card.card { width: min(100%, 480px); margin-top: 40px; padding: 36px 34px 30px; }
.unlock-card .eyebrow { font-size: 13px; font-weight: 600; }
.unlock-card h1 { margin-top: 11px; font-size: 29px; font-weight: 650; }
.unlock-card p { font-size: 15px; }
.unlock-card label { font-size: 14px; font-weight: 600; }
.input-with-action { height: 49px; align-items: stretch; }
.input-with-action input { height: 100%; padding-right: 83px; font-size: 15px; }
.input-action { top: 50%; right: 7px; height: calc(100% - 12px); min-width: 57px; display: grid; place-items: center; padding: 0 12px; margin: 0; transform: translateY(-50%); border-radius: 5px; font-size: 13px; font-weight: 600; }
.unlock-card .primary-btn { height: 49px; font-size: 15px; }
.unlock-card small { font-size: 12px; }

.share-hero p { font-size: 15px; }
.module-header h2 { font-size: 18px; font-weight: 650; }
.module p { font-size: 14px; }
.account-card h3 { font-size: 17px; font-weight: 650; }
.credential-main small { font-size: 12px; }
.credential-main strong { font-size: 15px; font-weight: 500; }
.faq-list summary { font-size: 14px; font-weight: 600; }
.account-note { font-size: 13px; }

@media (max-width: 760px) {
  .admin-layout { display: block; }
  .admin-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 45;
    width: 210px;
    height: 100dvh;
    transform: translateX(-105%);
    transition: transform .2s ease;
    visibility: visible;
    border-right: 1px solid #e5ecf7;
    padding: 0;
  }
  .admin-layout.sidebar-open .admin-sidebar { transform: translateX(0); }
  .sidebar-scrim { display: block; position: fixed; inset: 0; z-index: 44; border: 0; background: rgba(25,42,70,.22); }
  .admin-nav { display: flex; flex-direction: column; overflow: visible; gap: 0; padding: 10px 0; margin: 0; }
  .admin-nav button { width: 100%; height: 48px; border-radius: 0; font-size: 14px; padding: 0 22px; }
  .admin-nav button.active { background: #edf3ff; }
  .admin-brand { margin: 0; padding: 23px 12px; }
  .admin-brand .brand-mark, .admin-brand img { width: 44px; height: 44px; border-radius: 8px; margin-bottom: 8px; }
  .admin-main { padding: 0; }
  .admin-workspace { margin: 10px; padding: 18px 16px 26px; min-height: calc(100dvh - 78px); }
  .admin-topbar { height: 54px; min-height: 54px; padding: 0 14px; }
  .admin-header { margin-bottom: 22px; }
  .admin-header h1 { font-size: 18px; }
  .admin-header-actions .outline-btn { display: none; }
  .overview-grid { grid-template-columns: 1fr; }
  .overview-spotlight { min-height: 236px; }
  .admin-toolbar { gap: 8px; }
  .admin-search-field { flex: 1 1 100%; }
  .admin-search-field input { width: 100%; }
  .toolbar-fill { display: none; }
  .admin-toolbar select { flex: 1; min-width: 120px; }
  .account-table-panel { margin: 0; }
  .admin-table { min-width: 690px; }
  .ticket-layout { grid-template-columns: 1fr; }
  .admin-dialog { width: 100%; max-height: calc(100dvh - 18px); }
  .dialog-content { padding: 18px; }
}
@media (max-width: 600px) {
  .site-header { height: 54px; }
  .share-shell { padding: 16px 14px 78px; }
  .unlock-card.card { margin-top: 24px; padding: 29px 23px; }
  .share-hero { padding: 19px 20px; }
  .module.card { padding: 18px 19px; }
  .account-card.card { padding: 17px; }
  .credential-row { padding: 10px; }
  .admin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-card { padding: 12px 9px; }
  .stat-card strong { font-size: 21px; }
  .admin-header-actions span { font-size: 10px; }
  .support-fab { bottom: max(14px, env(safe-area-inset-bottom)); right: 14px; }
  .support-fab { width: 46px; height: 46px; justify-content: center; padding: 0; border-radius: 9px; }
  .support-fab span { display: none; }
  .support-fab img { width: 21px; height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .admin-sidebar { transition: none; }
}
.share-page-list { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 12px; margin-bottom: 18px; }
.share-page-card { display: grid; gap: 7px; text-align: left; border: 1px solid #dce5f3; border-radius: 12px; background: #fff; padding: 17px 18px; color: #2a3951; cursor: pointer; }
.share-page-card:hover,.share-page-card.active { border-color: #5586ec; background: #f4f7ff; }
.share-page-card strong { font-size: 15px; }
.share-page-card small { color: #79879d; font-size: 12px; }
.share-page-card span { color: #4276d9; font-size: 12px; font-weight: 650; }
.page-summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
.page-summary small { color: #75859b; }
.page-summary h2 { margin: 3px 0 8px; }
.page-summary .card-help { margin-bottom: 0!important; }
.page-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.page-summary-actions .outline-btn { text-decoration: none; display: inline-flex; align-items: center; }
.outline-btn.danger { border-color: #e8c2c5; color: #b84e59; }
.page-account-settings { border-top: 1px solid #e9eef7; padding-top: 16px; }
.page-account-settings strong { font-size: 14px; }
.page-account-picker { display: grid; grid-template-columns: repeat(auto-fill,minmax(210px,1fr)); gap: 8px; margin-top: 12px; }
.page-account-picker[hidden] { display: none; }
.page-account-option { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border: 1px solid #e2e9f4; border-radius: 9px; background: #fafcff; }
.page-account-option input { width: 17px; height: 17px; accent-color: #4b7dec; margin-top: 2px; }
.page-account-option span { min-width: 0; font-weight: 600; }
.page-account-option small { display: block; color: #8996a8; font-weight: 400; overflow-wrap: anywhere; }
.empty-code-accounts { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.form-field input[type="checkbox"] { display: inline-block; width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: none; accent-color: #4d7fe5; }
.account-config-section { grid-column: 1/-1; padding: 19px 20px; border: 1px solid #e1e8f3; border-radius: 12px; background: #fafcff; }
.account-config-head { margin-bottom: 15px; }
.account-config-head strong { font-size: 15px; }
.account-config-head p { margin: 5px 0 0; color: #7e8da2; font-size: 12px; line-height: 1.55; }
.account-config-grid { display: grid; grid-template-columns: minmax(180px,1fr) minmax(220px,1fr); gap: 18px; align-items: start; }
.config-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 43px; font-size: 13px; font-weight: 650; color: #3f5069; }
.config-toggle input { width: 18px; height: 18px; accent-color: #4d7fe5; flex: none; }
.history-filters { display: flex; gap: 7px; border-bottom: 1px solid #e6ecf5; padding-bottom: 12px; }
.history-filters button { border: 1px solid transparent; border-radius: 8px; padding: 7px 13px; color: #6a7a92; background: #f5f7fb; font-size: 12px; font-weight: 650; }
.history-filters button.active { background: #eaf1ff; color: #2867d4; border-color: #c9d9ff; }
.history-tools { flex-wrap:wrap; align-items:center; }
.history-tools input[type="search"] { flex:1 1 100%; }
.history-tools input[type="date"] { flex:0 1 150px; }
.history-tools select { min-height:40px; border:1px solid #dce5f3; border-radius:9px; padding:8px 10px; background:#fff; color:#344861; }
.history-pagination { display:flex; justify-content:center; align-items:center; gap:14px; padding:14px 0 4px; color:#70819a; }
.history-pagination button:disabled { opacity:.45; cursor:default; }
@media (max-width:560px) { .history-tools input[type="date"] { flex:1 1 130px; } .history-tools select { flex:1 1 130px; } }
.history-day { padding: 19px 0 8px; color: #7e8ba0; font-size: 12px; font-weight: 700; }
.history-event { padding: 14px 16px; margin-bottom: 9px; border: 1px solid #e2e9f4; border-radius: 10px; background: #fff; }
.history-event-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.history-event-kind { font-weight: 700; font-size: 13px; color: #34435a; }
.history-event-status { border-radius: 6px; padding: 3px 7px; font-size: 11px; font-weight: 700; }
.history-event-status.is-success { color: #168158; background: #e9f8f0; }
.history-event-status.is-attention { color: #a46a0e; background: #fff5dc; }
.history-event-status.is-skipped { color: #60718a; background: #eef2f8; }
.history-event time { margin-left: auto; color: #8c99ab; font-size: 12px; }
.history-event p { color: #78869c; font-size: 12px; line-height: 1.55; margin: 8px 0 0; }
.history-event details { margin-top: 10px; }
.history-event summary { cursor: pointer; color: #2867d4; font-size: 12px; font-weight: 650; }
.rescue-log-panel { max-width: 900px; }
.rescue-log-panel .history-event { margin-bottom: 12px; }
.rescue-mail-body { margin-top: 12px; padding: 12px; border-radius: 8px; background: #f6f9fe; overflow-wrap: anywhere; }
.rescue-mail-body pre { margin: 8px 0 0; white-space: pre-wrap; font: inherit; font-size: 12px; line-height: 1.6; }
.history-change-list { display: grid; gap: 12px; margin-top: 12px; }
.history-change { display: grid; grid-template-columns: 90px minmax(0,1fr); gap: 12px; padding: 12px; border-radius: 8px; background: #f6f8fc; font-size: 12px; overflow-wrap: anywhere; }
.history-change>span { color: #677790; font-weight: 700; }
.history-change small { display: block; color: #8c99aa; margin: 6px 0 2px; }
.history-change small:first-child { margin-top: 0; }
.history-change strong { display: block; color: #34435a; }
.history-readbacks { margin-top:12px; padding:12px; border:1px solid #d9eee5; border-radius:8px; background:#f5fbf8; font-size:12px; }
.history-readbacks>strong { display:block; margin-bottom:7px; color:#286b50; }
.history-readback { display:flex; justify-content:space-between; gap:12px; padding:5px 0; color:#63778c; }
.history-readback strong { color:#2c4d42; overflow-wrap:anywhere; text-align:right; }
.history-legacy { display:block; margin-top:8px; color:#91a0b2; font-size:11px; }
.history-pending { padding: 14px 16px; margin-bottom: 12px; border: 1px solid #efdfb8; border-radius: 10px; background: #fffaf0; color: #725823; overflow-wrap: anywhere; }
.history-pending p { margin: 7px 0; }
.history-pending small { color: #8b7545; }
@media (max-width: 700px) {
  .page-summary { display: block; }
  .page-summary-actions { margin-top: 14px; }
  .account-config-grid { grid-template-columns: 1fr; gap: 8px; }
  .account-config-section { padding: 15px; }
}
.share-manager { display: grid; grid-template-columns: minmax(205px,245px) minmax(0,1fr); gap: 18px; align-items: start; }
.share-manager-rail { background: #fff; border: 1px solid #e1e8f3; border-radius: 12px; padding: 14px; }
.rail-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.rail-heading strong { font-size: 15px; }
.rail-heading .primary-btn { padding: 7px 10px; min-height: 32px; font-size: 12px; }
.share-manager .share-page-list { display: grid; grid-template-columns: 1fr; gap: 7px; margin: 0; }
.share-manager .share-page-list { max-height: min(68dvh, 700px); overflow-y: auto; padding-right: 3px; align-content: start; }
.share-page-tools { display: grid; gap: 7px; margin-bottom: 7px; }
.share-page-tools input,.share-page-tools select { width: 100%; min-width: 0; min-height: 35px; padding: 0 10px; border: 1px solid #dce6f5; border-radius: 7px; background: #fff; color: #40536f; font: inherit; font-size: 12px; }
.share-page-tools input:focus,.share-page-tools select:focus { border-color: #7ea8f5; outline: 2px solid #dce9ff; }
.share-page-count { display: block; margin-bottom: 10px; color: #8492a8; font-size: 11px; }
.share-page-empty { margin: 0; padding: 14px 8px; color: #8b99ac; font-size: 12px; text-align: center; }
.share-manager .share-page-card { padding: 11px 12px; gap: 3px; border-radius: 8px; }
.share-manager .share-page-card strong { font-size: 13px; }
.share-manager .share-page-card small,.share-manager .share-page-card span { font-size: 11px; }
.share-manager-main { min-width: 0; }
.share-manager .page-summary { padding: 16px 18px; margin-bottom: 12px; }
.share-manager .page-summary h2 { font-size: 17px; margin: 2px 0; }
.share-manager .page-summary .card-help { font-size: 12px; }
.share-manager .page-summary-actions .outline-btn { padding: 7px 11px; font-size: 12px; }
.page-tabs { display: flex; gap: 3px; border-bottom: 1px solid #dfe8f7; margin: 0 0 12px; overflow-x: auto; }
.page-tabs button { flex: none; padding: 11px 14px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #6c7b92; font-size: 13px; font-weight: 600; cursor: pointer; }
.page-tabs button.active { color: #356cdb; border-bottom-color: #4f80ec; }
.page-panel { margin: 0; padding: 20px; }
.page-panel h2 { margin: 0 0 15px; font-size: 16px; }
.page-panel h3 { margin: 16px 0 8px; font-size: 13px; }
.page-panel-heading { display: flex; align-items: flex-start; gap: 10px; justify-content: space-between; }
.page-panel-heading .form-hint { margin: -8px 0 10px; }
.page-tag-list { display: flex; gap: 8px; flex-wrap: wrap; }
.page-tag-choice { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #dce6f6; border-radius: 7px; padding: 7px 10px; color: #40536e; background: #fafcff; font-size: 12px; cursor: pointer; }
.page-tag-choice input { accent-color: #4f80ec; }
.page-account-option em { color: #75869e; font-size: 11px; font-style: normal; }
.account-tags { display: flex!important; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.account-tags span { color: #426fc9; background: #edf3ff; border-radius: 4px; padding: 2px 5px; font-size: 10px; }
.login-result { display: grid; gap: 3px; max-width: 350px; }
.login-result strong { font-size: 13px; color: #34465f; }
.login-result .check-result-detail { color: #7a899e; font-size: 12px; line-height: 1.45; }
.account-task-details { margin-top: 6px; font-size: 11px; color: #5b7cc0; }
.account-task-details summary { cursor: pointer; width: fit-content; }
.account-task-details dl { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 7px 10px; margin: 9px 0 0; padding: 10px; border-radius: 7px; background: #f5f8ff; color: #596b83; }
.account-task-details dt { font-weight: 700; color: #5f718b; }
.account-task-details dd { margin: 0; overflow-wrap: anywhere; }
.account-options { border-top: 1px solid #e5ebf4; padding-top: 16px; margin-top: 3px; }
#account-form > .full-row { grid-column: 1 / -1; }
.account-options > .profile-option { margin-top: 14px; }
.profile-fields { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
@media (max-width: 600px) { .profile-fields { grid-template-columns: 1fr; } }
.code-list-panel { padding: 16px; }
.code-presence-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; margin: 0 0 14px; color: #7c8ba2; font-size: 12px; line-height: 1.6; }
.badge.offline { background: #eef1f5; color: #7b8594; }
.code-access-table { min-width: 1550px; }
.code-access-table td { white-space: nowrap; }
.code-ip { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.code-access-summary { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; padding: 18px; border-radius: 14px; background: #f6f8fc; }
.code-access-summary>div:first-child { grid-column: 1 / -1; }
.code-access-summary span:not(.badge) { display: block; margin-bottom: 5px; color: #7b89a1; font-size: 12px; }
.code-access-summary strong { display: block; overflow-wrap: anywhere; font-size: 14px; color: #34435c; }
.code-access-summary .code-ip { font-size: 13px; }
.code-access-heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 22px 0 12px; }
.code-access-heading h3 { margin: 0; font-size: 15px; }
.code-login-event { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 12px; padding: 14px 0; border-bottom: 1px solid #edf0f5; font-size: 13px; overflow-wrap: anywhere; }
.code-login-event span { color: #7b89a1; }
@media (max-width: 600px) {
  .code-access-table { display: block; min-width: 0; width: 100%; }
  .code-access-table thead { display: none; }
  .code-access-table tbody { display: grid; gap: 12px; }
  .code-access-table tbody tr { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 16px; border: 1px solid #e4eaf3; border-radius: 14px; }
  .code-access-table tbody td, .code-access-table tbody tr:nth-child(even) td, .code-access-table tbody tr:hover td { display: block; height: auto; width: auto; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .code-access-table td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 5px; color: #8a98ad; font: 12px -apple-system,BlinkMacSystemFont,sans-serif; }
  .code-access-table tbody td.code-check-cell { position: absolute; right: 16px; top: 19px; }
  .code-access-table td.code-text { grid-column: 1 / -1; padding-right: 26px; }
  .code-access-table td:last-child { grid-column: 1 / -1; }
  .code-access-table .table-actions { justify-content: flex-start; flex-wrap: wrap; }
  .code-access-summary { grid-template-columns: minmax(0,1fr); }
  .code-login-event { grid-template-columns: minmax(0,1fr); gap: 6px; }
}
.code-filter-bar { display: grid; grid-template-columns: minmax(220px,2fr) repeat(3,minmax(145px,1fr)); gap: 10px; margin-bottom: 14px; }
.code-filter-bar input, .code-filter-bar select { min-width: 0; width: 100%; height: 40px; padding: 0 11px; border: 1px solid #dbe5f5; border-radius: 7px; background: white; color: #35445d; }
.code-date-filter { display: grid; gap: 4px; color: #657690; font-size: 11px; }
.code-date-filter input { font-size: 12px; }
.code-export-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.code-export-actions button:disabled { opacity: .5; cursor: not-allowed; }
.code-filter-bar [data-reset-code-filters] { align-self: end; height: 40px; }
.code-list-panel th:first-child, .code-list-panel td:first-child { width: 42px; text-align: center; }
.code-list-panel input[type=checkbox] { width: 16px; height: 16px; accent-color: #4e7fe5; }
.sidebar-bottom button { border: 0; background: transparent; padding: 0; cursor: pointer; color: #7189b2; font-size: 13px; }
.page-picker-list { display: grid; gap: 9px; }
.page-picker-list { max-height: min(60dvh, 560px); overflow-y: auto; align-content: start; }
.page-picker-search { width: 100%; min-height: 40px; margin-bottom: 12px; padding: 0 12px; border: 1px solid #dce6f5; border-radius: 8px; font: inherit; }
.page-picker-search:focus { border-color: #7ea8f5; outline: 2px solid #dce9ff; }
.page-picker-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 15px; border: 1px solid #dde7f8; border-radius: 9px; color: #34547f; text-decoration: none; }
.page-picker-item[hidden] { display: none; }
.page-picker-item:hover { background: #f5f8ff; border-color: #aac3fa; }
.page-picker-item strong, .page-picker-item small { display: block; }
.page-picker-item small { margin-top: 3px; color: #8796ad; font-size: 11px; }
@media (max-width: 900px) { .code-filter-bar { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .code-filter-bar { grid-template-columns: 1fr; } }
.account-options-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.account-options-head strong { font-size: 14px; }
.account-options-head span { font-size: 11px; color: #8b98aa; }
.account-options-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.account-option { border: 1px solid #e0e8f5; border-radius: 8px; background: #fbfcff; padding: 11px 13px; min-width: 0; }
.account-option-title { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; }
.account-option-title strong { font-size: 12px; color: #34465f; }
.help-mark { width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%; background: #e7eefb; color: #426fca; font-size: 12px; font-weight: 800; cursor: pointer; flex: none; }
.compact-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: #5e6f87; }
.compact-switch input { width: 17px; height: 17px; accent-color: #4f80ec; }
.account-option .form-field { font-size: 12px; }
.account-option .form-field input { min-height: 34px; margin-top: 5px; }
.account-option .form-field select { min-height: 38px; margin-top: 5px; }
.account-option .form-field input[hidden] { display: none; }
.rich-field { min-width: 0; }
.rich-toolbar { display: flex; gap: 6px; margin-top: 8px; padding: 7px; border: 1px solid #dfe6f0; border-bottom: 0; border-radius: 9px 9px 0 0; background: #f7f9fd; }
.rich-toolbar button { border: 1px solid #d9e4f5; border-radius: 6px; background: white; padding: 5px 10px; color: #40536d; cursor: pointer; }
.rich-editor { min-height: 130px; max-height: 320px; overflow: auto; padding: 12px; border: 1px solid #dfe6f0; border-radius: 0 0 9px 9px; background: white; font-size: 13px; font-weight: 400; color: #34465f; line-height: 1.75; white-space: pre-wrap; }
.rich-editor:focus { outline: 2px solid #91b2f7; outline-offset: -2px; }
.rich-red, .formatted-copy .rich-red { color: #dc2626; }
.formatted-copy p, .formatted-copy div { margin: 0 0 .65em; }
.formatted-copy { color: #536176; font-size: 13px; line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.formatted-copy p:last-child, .formatted-copy div:last-child { margin-bottom: 0; }
.formatted-copy ul, .formatted-copy ol { padding-left: 1.5em; margin: .35em 0; }
.faq-editor { gap: 12px; }
.faq-row { display: grid; grid-template-columns: 1fr; padding: 14px; border: 1px solid #dfe7f4; border-radius: 9px; background: #fbfcff; }
.faq-row-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.faq-row-top strong { color: #465a77; font-size: 12px; }
.faq-row .form-field { margin-top: 8px; }
.faq-row textarea { min-height: 85px; resize: vertical; }
.faq-row-top button { padding: 5px 9px; }
.support-panel .chat-form { position: relative; }
.emoji-toggle { border: 0; background: transparent; color: #4d78c8; font-size: 11px; font-weight: 700; cursor: pointer; padding: 4px 2px; white-space: nowrap; }
.emoji-picker { position: absolute; bottom: 64px; left: 12px; z-index: 2; width: min(290px,calc(100% - 24px)); display: grid; grid-template-columns: repeat(6,1fr); gap: 3px; padding: 9px; border: 1px solid #dce7f7; border-radius: 12px; background: white; box-shadow: 0 12px 28px #1d355728; }
.emoji-picker[hidden] { display: none; }
.emoji-picker button { border: 0; border-radius: 7px; background: transparent; padding: 5px; font-size: 22px; cursor: pointer; }
.emoji-picker button:hover { background: #f0f5ff; }
.message.emoji-sticker { background: transparent; padding: 3px 5px; font-size: 36px; }
.message.emoji-sticker small { font-size: 10px; }
#account-form .form-actions { position: static; align-self: start; min-height: 0; margin: 6px 0 0; padding: 14px 0 0; border-top: 1px solid #e7edf6; }
#account-form .form-actions button { flex: none; align-self: center; height: 38px; min-height: 38px; padding-inline: 16px; }
.admin-feedback { position: fixed; right: 24px; top: 74px; z-index: 1300; min-width: 190px; max-width: min(440px,calc(100vw - 32px)); padding: 12px 16px; border-radius: 10px; background: #263b5d; color: #fff; box-shadow: 0 12px 32px #1e345328; font-size: 14px; font-weight: 600; line-height: 1.45; opacity: 0; transform: translateY(-12px); transition: opacity .2s,transform .2s; }
.admin-feedback.visible { opacity: 1; transform: translateY(0); }
.admin-feedback[data-kind="success"] { background: #edf8f2; color: #19704a; border: 1px solid #aee4c6; box-shadow: 0 12px 32px #1e664128; }
.admin-feedback[data-kind="success"]::before { content: '✓'; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: #23a66b; color: #fff; font-size: 12px; }
.admin-feedback[data-kind="error"] { background: #fff0f0; color: #a93f4b; border: 1px solid #f4c4c7; }
.help-overlay { z-index: 1200; }
.help-dialog { width: min(420px,calc(100vw - 36px)); background: #fff; border-radius: 12px; box-shadow: 0 20px 60px #1d315026; }
.help-dialog .dialog-head { padding: 13px 18px; }
.help-dialog .dialog-head h2 { font-size: 16px; }
.help-dialog p { padding: 18px; margin: 0; font-size: 13px; line-height: 1.7; color: #506077; }

/* Share-page editor and card management refinements. */
.rich-toolbar { flex-wrap: wrap; align-items: center; }
.rich-toolbar button, .rich-toolbar select { min-height: 34px; font-size: 12px; }
.rich-toolbar button:hover, .rich-toolbar select:hover { border-color: #9cb9ee; background: #f8fbff; }
.rich-toolbar button:focus-visible, .rich-toolbar select:focus-visible { outline: 2px solid #84aaf6; outline-offset: 1px; }
.rich-toolbar select { width: auto; min-width: 86px; margin: 0; padding: 4px 25px 4px 8px; border: 1px solid #d9e4f5; border-radius: 6px; background: #fff; color: #40536d; cursor: pointer; }
.rich-black, .formatted-copy .rich-black { color: #151b28; }
.rich-blue, .formatted-copy .rich-blue { color: #2563c4; }
.rich-yellow, .formatted-copy .rich-yellow { background: #fff2a8; border-radius: 2px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.rich-size-12, .formatted-copy .rich-size-12 { font-size: 12px; }
.rich-size-14, .formatted-copy .rich-size-14 { font-size: 14px; }
.rich-size-18, .formatted-copy .rich-size-18 { font-size: 18px; }
.rich-size-24, .formatted-copy .rich-size-24 { font-size: 24px; }
.rich-align-left { text-align: left; }
.rich-align-center { text-align: center; }
.rich-align-right { text-align: right; }
.visually-hidden-file { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0!important; }
.upload-picker { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid #a9c1f4; border-radius: 8px; color: #346ac7; background: #f4f8ff; cursor: pointer; font-size: 12px; font-weight: 700; transition: background .16s, border-color .16s; }
.upload-picker:hover { background: #eaf2ff; border-color: #5d8cec; }
.visually-hidden-file:focus-visible + .upload-picker { outline: 2px solid #5d8cec; outline-offset: 2px; }
.upload-picker span { font-size: 16px; line-height: 1; }
.upload-file-name { color: #8896ab; font-size: 11px; font-weight: 400; overflow-wrap: anywhere; }
.upload-row img { border: 1px solid #e3eaf5; padding: 3px; }
.code-generator-head { margin: 15px 0 9px; }
.code-view-nav { display:flex; gap:6px; margin:2px 0 18px; padding:5px; width:max-content; max-width:100%; border:1px solid #dce6f6; border-radius:10px; background:#f4f7fd; }
.code-view-nav button { display:flex; align-items:center; gap:8px; min-height:36px; padding:0 16px; border:0; border-radius:7px; background:transparent; color:#65758d; font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.code-view-nav button.active { background:#fff; color:#376ac7; box-shadow:0 1px 5px #315aa314; }
.code-view-nav button span { display:inline-block; padding:2px 6px; border-radius:5px; background:#e8eef9; color:#6c7c96; font-size:11px; }
.code-view-nav button.active span { background:#e9f0ff; color:#376ac7; }
.code-list-head { margin:0 0 10px; }
.code-generator-panel { padding: 16px 18px; }
#code-form { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 11px; align-items: start; }
#code-form .code-batch-name { grid-column:span 3; }
#code-form .code-batch-name label { display:block; }
.batch-label-picker { display:flex; align-items:center; gap:8px; margin-top:5px; }
.batch-label-picker select { flex:1; width:0; min-width:0; margin-top:0!important; }
.batch-label-picker button { flex:none; min-height:44px; white-space:nowrap; }
#code-form .batch-label-picker select { max-width:680px; }
#batch-label-preview { display:block; margin-top:6px; }
#code-form .form-field { min-width: 0; }
#code-form .form-field input, #code-form .form-field select { margin-top: 5px; }
#code-form #one-time-accounts[hidden], #code-form #minutes-field[hidden] { display: none; }
.code-generator-foot { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 38px; }
.code-generator-foot .form-hint { margin: 0; }
.code-generator-foot .primary-btn { flex: none; min-height: 36px; }
.code-date-filter { display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 9px; border: 1px solid #dbe5f5; border-radius: 7px; background: #fff; color: #657690; font-size: 12px; white-space: nowrap; }
.code-filter-bar .code-date-filter input { flex: 1; width: 0; min-width: 0; height: 38px; padding: 0; border: 0; background: transparent; font-size: 12px; }
.code-date-filter:focus-within { border-color: #84aaf6; outline: 1px solid #84aaf6; }
.code-filter-bar [data-reset-code-filters] { align-self: stretch; }
.code-search-box { display: flex; min-width: 0; height: 40px; border: 1px solid #dbe5f5; border-radius: 7px; overflow: hidden; background: #fff; }
.code-search-box:focus-within { border-color: #84aaf6; outline: 1px solid #84aaf6; }
.code-filter-bar .code-search-box input { flex: 1; width: 0; min-width: 0; height: 38px; border: 0; border-radius: 0; background: transparent; }
.code-search-box button { flex: none; padding: 0 16px; border: 0; background: #5283e9; color: #fff; font-size: 12px; font-weight: 700; cursor: pointer; }
.code-search-box button:hover { background: #386fdc; }
.code-pagination-actions { display: flex; align-items: center; gap: 18px; }
.code-page-size { display: inline-flex; align-items: center; gap: 6px; color: #71829a; white-space: nowrap; }
.code-page-size select { min-height: 31px; padding: 3px 7px; border: 1px solid #dbe5f5; border-radius: 6px; background: #fff; color: #40536d; font-size: 12px; }
@media (max-width: 1200px) { #code-form { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 1200px) { #code-form .code-batch-name { grid-column:span 2; } }
@media (max-width: 760px) { #code-form { grid-template-columns: repeat(2,minmax(0,1fr)); } #code-form .code-batch-name { grid-column:span 2; } .code-generator-foot { flex-wrap: wrap; } }
@media (max-width: 520px) { #code-form { grid-template-columns: 1fr; } #code-form .code-batch-name { grid-column:auto; } .batch-label-picker { flex-wrap:wrap; } .batch-label-picker select { flex-basis:100%; } .code-generator-foot { align-items: stretch; } .code-generator-foot .primary-btn { width: 100%; } }
@media (max-width: 520px) { .code-view-nav { width:100%; } .code-view-nav button { flex:1; justify-content:center; padding:0 8px; font-size:12px; } }
@media (max-width: 600px) { .code-list-panel .admin-pagination { align-items: flex-start; gap: 9px; flex-wrap: wrap; } .code-pagination-actions { width: 100%; justify-content: space-between; } }
.batch-panel { padding:16px 18px; }
.batch-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin-bottom:12px; }
.batch-heading h2 { margin:0 0 2px; }
.batch-heading h2 small { color:#93a0b3; font-size:13px; }
.batch-heading p { margin:0; color:#8b99ac; font-size:12px; }
.batch-search { display:grid; grid-template-columns:minmax(180px,2fr) repeat(3,minmax(110px,1fr)) auto; gap:7px; width:100%; margin-bottom:11px; }
.batch-search input,.batch-search select { width:100%; min-width:0; min-height:36px; padding:7px 10px; border:1px solid #dbe5f5; border-radius:7px; background:#fff; color:#35445d; font-size:12px; }
.batch-search button { min-height:36px; padding:0 12px; font-size:12px; }
.batch-table th,.batch-table td { padding:11px 10px; }
.batch-table th { background:#f5f8ff; color:#667891; }
.batch-table td:first-child { min-width:170px; }
.batch-table td:first-child { position:relative; padding-left:28px; }
.batch-expand { position:absolute; left:7px; top:50%; transform:translateY(-50%); border:0; background:transparent; color:#477bd6; font-size:19px; line-height:1; cursor:pointer; }
.batch-table td:first-child strong { font-size:13px; }
.batch-table td:first-child small { font-family:ui-monospace,Menlo,monospace; letter-spacing:.02em; }
.batch-table td:nth-child(8) { white-space:nowrap; }
.batch-actions { display:grid; gap:4px; white-space:nowrap; }
.batch-status { display:inline-block; padding:4px 7px; border-radius:5px; font-size:11px; font-weight:700; white-space:nowrap; }
.batch-status.pending { color:#67768b; background:#f0f3f8; }
.batch-status.exported { color:#3267ba; background:#eaf1ff; }
.batch-status.imported { color:#17815b; background:#e8f7f0; }
.batch-preview-row td { background:#f8faff; }
.batch-preview { padding:5px 8px; }
.batch-preview strong { color:#354b6b; }
.batch-preview p { margin:4px 0 8px; color:#7889a1; font-size:11px; }
.batch-preview-codes { display:flex; flex-wrap:wrap; gap:5px; }
.batch-preview-codes span { padding:5px 7px; border:1px solid #e1e9f6; border-radius:5px; background:white; color:#66758a; font:11px ui-monospace,Menlo,monospace; }
.batch-panel .admin-pagination { margin-top:10px; }
@media (max-width:1000px) { .batch-search { grid-template-columns:repeat(4,minmax(0,1fr)); } .batch-search input { grid-column:span 2; } }
@media (max-width:760px) { .batch-heading { align-items:stretch; flex-direction:column; } .batch-search { grid-template-columns:repeat(2,minmax(0,1fr)); } .batch-search input { grid-column:span 2; } .batch-table { min-width:1050px; } }
@media (max-width: 900px) { .share-manager { grid-template-columns: 1fr; } .share-manager .share-page-list { grid-template-columns: repeat(auto-fill,minmax(175px,1fr)); } }
@media (max-width: 600px) { .page-panel { padding: 15px; } .account-options-grid { grid-template-columns: 1fr; } .admin-feedback { right: 16px; top: 16px; } }
.integration-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; align-items: start; }
.integration-column { min-width:0; display:grid; gap:16px; align-content:start; }
.integration-column > .admin-card { margin:0; max-width:none; }
.integration-card .form-grid > .full-row,.security-card .form-grid > .full-row { grid-column:1/-1; }
.legacy-mail-settings { border:1px solid #e3eaf5; border-radius:8px; background:#fff; }
.legacy-mail-settings > summary { padding:18px; color:#63728a; font-size:13px; font-weight:650; cursor:pointer; }
.legacy-mail-settings .admin-card { margin:0; border:0; }
.integration-card { min-width: 0; }
.integration-heading { display: flex; justify-content: space-between; align-items: start; gap: 16px; margin-bottom: 16px; }
.integration-heading h2 { margin: 0 0 5px; font-size: 16px; }
.integration-heading p { margin: 0; max-width: 540px; }
.integration-status { flex: none; font-size: 12px; font-weight: 700; color: #416fca; background: #edf3ff; border-radius: 20px; padding: 5px 9px; }
.integration-actions { display: flex; flex-wrap: wrap; gap: 9px; justify-content: start; }
.integration-actions button { flex: none; }
.mail-reveal-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mail-reveal-row button { flex: none; }
.mail-reveal-row input { flex: 1 1 220px; min-width: 0; font-family: ui-monospace,monospace; }
.mail-reveal-row input[hidden] { display: none; }
@media (max-width: 1000px) { .integration-grid { grid-template-columns: 1fr; } .integration-grid > .security-card { grid-row: auto; } }
.rescue-workspace { min-width:0; }
.rescue-toolbar { display:flex; justify-content:space-between; align-items:start; gap:16px; margin:0 0 18px; }
.rescue-toolbar p { color:#7f8da3; font-size:13px; margin:0 0 12px; }
.rescue-summary { display:flex; flex-wrap:wrap; gap:12px 24px; color:#7b8ba1; font-size:13px; }
.rescue-summary strong { margin-left:5px; font-size:17px; color:#33465e; }
.rescue-log-panel { max-width:none; }
.rescue-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.rescue-tabs { display:flex; border:1px solid #dce7fb; background:#f5f8ff; border-radius:8px; padding:4px; gap:4px; }
.rescue-tabs button { border:0; border-radius:5px; background:transparent; color:#788aa4; padding:9px 15px; font-size:13px; font-weight:650; }
.rescue-tabs button.active { color:#4c7fea; background:#fff; }
.rescue-page-size { display:flex; align-items:center; gap:8px; color:#7c8ba1; font-size:12px; }
.rescue-page-size select { min-height:36px; border:1px solid #dfe7f3; border-radius:6px; background:#fff; color:#566d8a; padding:4px 8px; }
.rescue-email-card { border:1px solid #e2eaf6; border-radius:9px; padding:18px; margin-bottom:12px; }
.rescue-email-top { display:flex; justify-content:space-between; align-items:start; gap:16px; }
.rescue-email-top h3 { font-size:15px; line-height:1.5; margin:0 0 8px; color:#33445c; overflow-wrap:anywhere; }
.rescue-email-top time { color:#8293ad; font-size:12px; flex:none; }
.rescue-email-tags { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:#6e83a2; }
.rescue-link-tag { color:#4c7fea; }
.rescue-email-meta { display:flex; flex-wrap:wrap; gap:8px 24px; color:#7b8da6; font-size:12px; margin-top:12px; overflow-wrap:anywhere; }
.rescue-email-note,.rescue-email-timing { margin:10px 0; font-size:12px; line-height:1.65; color:#8393ac; }
.rescue-email-actions,.rescue-link-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.rescue-mail-body[hidden] { display:none; }
.rescue-link-box { border:1px solid #d8e5fb; border-radius:7px; background:#fff; padding:14px; margin-bottom:16px; }
.rescue-link-row > a { display:block; color:#4c7fea; font-size:13px; margin-top:8px; overflow-wrap:anywhere; }
.rescue-link-actions a { text-decoration:none; display:inline-flex; align-items:center; }
.rescue-message-head { display:grid; gap:6px; color:#647c9c; font-size:12px; }
.rescue-message-head strong { color:#33445c; font-size:14px; }
@media (max-width:600px) {
  .rescue-toolbar { flex-wrap:wrap; }
  .rescue-list-head { align-items:stretch; flex-direction:column; }
  .rescue-page-size { align-self:flex-end; }
  .rescue-email-card { padding:14px; }
  .rescue-email-top { flex-direction:column; gap:8px; }
  .rescue-email-meta { flex-direction:column; gap:5px; }
  .rescue-email-actions > *, .rescue-link-actions > * { flex:1 1 140px; justify-content:center; }
  .integration-heading { flex-wrap:wrap; }
}
.guide-gallery { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.guide-gallery-item { margin-top:14px; border:1px solid #e3eaf5; cursor:pointer; }
.guide-gallery-item img { height:260px; max-height:none; object-fit:contain; }
.guide-video { margin-top:14px; border:1px solid #e3eaf5; border-radius:15px; overflow:hidden; background:#f5f7fb; }
.guide-video video { display:block; width:100%; max-height:560px; background:#111827; }
.guide-video span { display:block; padding:8px 10px; color:#62718a; font-size:11px; }
.admin-main { position:relative; }
.topbar-actions .attention-toggle { border:1px solid #f1d8ac; border-radius:8px; padding:7px 10px; background:#fff8ed; color:#895628; cursor:pointer; }
.topbar-actions .attention-toggle span { color:inherit; font-size:12px; }
.attention-panel { position:absolute; top:64px; right:22px; z-index:70; width:min(440px,calc(100vw - 36px)); padding:14px; border:1px solid #e6eaf2; border-radius:12px; background:#fff; box-shadow:0 16px 40px #1f293722; }
.attention-panel[hidden] { display:none; }
.attention-panel > strong { display:block; margin-bottom:10px; color:#34435c; font-size:14px; }
.attention-panel .profile-alert { position:static; max-width:none; margin-top:8px; padding:10px; box-shadow:none; }
.share-page-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin-bottom:10px; }
.share-page-categories button { display:flex; justify-content:space-between; gap:4px; min-width:0; border:1px solid #dce5f3; border-radius:8px; padding:8px; background:#fff; color:#61718b; font-size:11px; cursor:pointer; }
.share-page-categories button.active { border-color:#6492ef; background:#eef4ff; color:#315fb8; font-weight:700; }
.share-page-categories small { color:inherit; }
.share-manager .share-page-card .page-category-label { color:#5474a8; font-size:10px; }
.image-bar button:disabled { opacity:.42; cursor:default; }
@media (max-width:760px) { .guide-gallery { grid-template-columns:1fr; } .guide-gallery-item img { height:auto; max-height:380px; } }

/* Reader mode and richer share-page formatting. */
.notice-option-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:9px; }
.notice-option-grid label { display:inline-flex; align-items:center; gap:7px; padding:10px 13px; border:1px solid #dfe7f4; border-radius:9px; background:#f9fbff; font-size:12px; cursor:pointer; }
.notice-option-grid input { width:16px; height:16px; min-height:0; margin:0; accent-color:#4f80ec; }
.notice-seconds { display:flex; align-items:center; gap:9px; margin-top:10px; font-size:12px; }
.notice-seconds input { width:85px; min-height:34px; margin:0; }
.notice-overlay { z-index:80; width:100vw; }
.public-body.notice-open { overflow:hidden; }
html:has(body.notice-open) { overflow:hidden; }
.notice-dialog { width:min(580px,calc(100vw - 28px)); max-height:min(760px,92dvh); display:flex; flex-direction:column; border-radius:18px; background:#fff; box-shadow:0 24px 70px #162b4760; overflow:hidden; }
.notice-dialog-head { padding:22px 25px 12px; border-bottom:1px solid #e6ecf6; }
.notice-dialog-head h2 { margin:6px 0 0; font-size:22px; color:#223249; }
.notice-dialog-copy { padding:20px 25px; overflow:auto; flex:1; min-height:90px; }
.notice-dialog-footer { padding:14px 25px 22px; border-top:1px solid #e6ecf6; display:flex; align-items:center; justify-content:space-between; gap:10px; color:#71819a; font-size:12px; }
.notice-dialog-footer button:disabled { opacity:.55; cursor:not-allowed; }
.announcement-settings { grid-column:1/-1; display:grid; gap:16px; margin:4px 0 8px; padding:18px; border:1px solid #dbe6f4; border-radius:12px; background:#fbfcff; }
.announcement-page .announcement-settings { margin:0; padding:0; border:0; background:transparent; }
.announcement-settings-head { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.announcement-settings-head h3 { margin:0 0 5px; font-size:16px; color:#34445d; }
.announcement-settings-head p { margin:0; color:#8492a6; font-size:12px; line-height:1.5; }
.announcement-settings-head .switch-row { flex:none; margin:0; white-space:nowrap; }
.announcement-fields { display:grid; grid-template-columns:1fr 1fr minmax(130px,.5fr); gap:12px; }
.announcement-color-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.announcement-color-field { display:grid; gap:6px; min-width:0; color:#4a5c78; font-size:12px; font-weight:650; }
.announcement-color-control { display:flex; align-items:center; gap:6px; min-height:39px; padding:4px 8px; border:1px solid #dbe5f4; border-radius:8px; background:#fff; }
.announcement-color-control input[type=color] { appearance:none; -webkit-appearance:none; width:27px; height:27px; min-height:27px; flex:none; padding:0; overflow:hidden; border:1px solid #dfe7f1; border-radius:6px; background:transparent; cursor:pointer; }
.announcement-color-control input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.announcement-color-control input[type=color]::-webkit-color-swatch { border:0; border-radius:5px; }
.announcement-color-control input[type=color]::-moz-color-swatch { border:0; border-radius:5px; }
.announcement-color-control input[type=text] { width:100%; min-width:0; min-height:27px; height:27px; padding:0; border:0; outline:0; color:#52617a; background:transparent; font-size:12px; font-family:ui-monospace,SFMono-Regular,monospace; }
.announcement-opacity-field { display:flex; align-items:center; gap:12px; color:#4a5c78; font-size:13px; font-weight:650; }
.announcement-opacity-field input { width:min(260px,100%); accent-color:#5485e9; cursor:pointer; }
.announcement-opacity-field output { min-width:38px; color:#53647c; font-variant-numeric:tabular-nums; }
.announcement-preview-wrap { padding:12px; border-radius:12px; background:#eef3fa; }
.announcement-preview-wrap > span { display:block; margin-bottom:8px; color:#73839a; font-size:12px; }
.announcement-preview { --announcement-background:#e42525; --announcement-text:#fff; --announcement-button-background:#fff; --announcement-button-text:#c82020; display:grid; justify-items:center; gap:10px; max-width:550px; padding:20px; border-radius:12px; background:var(--announcement-surface,var(--announcement-background)); color:var(--announcement-text); text-align:center; }
.announcement-preview strong { font-size:18px; }
.announcement-preview p { max-height:75px; margin:0; overflow:hidden; font-size:15px; line-height:1.5; white-space:pre-line; }
.announcement-preview > span { padding:7px 20px; border-radius:7px; background:var(--announcement-button-background); color:var(--announcement-button-text); font-size:13px; font-weight:700; }
.announcement-dialog { --announcement-background:#e42525; --announcement-text:#fff; --announcement-button-background:#fff; --announcement-button-text:#c82020; width:min(620px,calc(100vw - 28px)); max-height:min(780px,92dvh); padding:26px 24px 24px; background:var(--announcement-surface,var(--announcement-background)); color:var(--announcement-text); text-align:center; }
.announcement-dialog .notice-dialog-head { flex:none; padding:0 0 10px; border:0; }
.announcement-dialog .notice-dialog-head h2 { margin:0; color:inherit; font-size:24px; }
.announcement-dialog .notice-dialog-copy { min-height:0; padding:15px 10px 20px; color:inherit; font-size:19px; font-weight:700; line-height:1.6; overflow:auto; }
.announcement-dialog .notice-dialog-copy img { max-width:100%; max-height:300px; object-fit:contain; }
.announcement-dialog .notice-dialog-copy a { color:inherit; }
.announcement-dialog .notice-dialog-footer { flex:none; flex-direction:column; gap:10px; padding:0; border:0; color:inherit; }
.announcement-dialog .notice-dialog-footer button { width:100%; max-width:360px; min-height:48px; border:0; border-radius:9px; background:var(--announcement-button-background); color:var(--announcement-button-text); font-size:16px; font-weight:750; box-shadow:0 3px 12px #101a2630; }
@media (max-width:760px) { .announcement-fields { grid-template-columns:1fr 1fr; } .announcement-color-grid { grid-template-columns:1fr 1fr; } .announcement-dialog { padding:22px 17px 18px; } .announcement-dialog .notice-dialog-copy { font-size:17px; padding:12px 3px 17px; } }
@media (max-width:480px) { .announcement-settings { padding:14px; } .announcement-fields,.announcement-color-grid { grid-template-columns:1fr; } .announcement-settings-head { align-items:flex-start; } .announcement-opacity-field { display:grid; grid-template-columns:1fr auto; } .announcement-opacity-field input { grid-column:1/-1; width:100%; } }
.rich-setting { display:inline-flex; align-items:center; gap:5px; padding:3px 6px; border:1px solid #d9e4f5; border-radius:6px; background:#fff; color:#40536d; font-size:12px; }
.rich-setting input[type=number] { width:47px; min-height:25px; height:25px; margin:0; padding:2px 3px; border:0; background:#fff; font-size:12px; }
.rich-setting input[type=color] { width:28px; height:25px; min-height:25px; margin:0; padding:0; border:0; background:transparent; cursor:pointer; }
.rich-setting input[type=color] { appearance:none; -webkit-appearance:none; width:25px; height:25px; overflow:hidden; border:1px solid #e2e8f0; border-radius:6px; box-shadow:0 1px 2px #24374f12; }
.rich-setting input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.rich-setting input[type=color]::-webkit-color-swatch { border:0; border-radius:5px; }
.rich-setting input[type=color]::-moz-color-swatch { border:0; border-radius:5px; }
.formatted-copy blockquote,.rich-editor blockquote { margin:.7em 0; padding:.35em .8em; border-left:3px solid #80a8f3; background:#f5f8ff; }
.formatted-copy a { color:#3272d6; text-decoration:underline; }
.guide-gallery { grid-template-columns:1fr; }
.guide-gallery-item { width:100%; }
.guide-gallery-item img { display:block; width:100%; height:auto; max-height:600px; object-fit:contain; }

/* Compact, WeChat-like composer with original cartoon stickers. */
.support-panel .chat-form { padding:10px 13px 12px; }
.support-panel .chat-form textarea { border:0; border-radius:0; padding:8px 3px; min-height:66px; outline:none; background:#fff; }
.support-panel .chat-form textarea:focus { outline:none; }
.support-panel .chat-actions { border-top:1px solid #edf1f7; padding-top:8px; margin-top:4px; gap:8px; }
.chat-tool { width:34px; height:34px; display:grid; place-items:center; border:0; border-radius:9px; background:transparent; color:#526276; cursor:pointer; }
.chat-tool:hover,.chat-tool[aria-expanded=true] { background:#edf4ff; color:#3972d0; }
.chat-tool svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.support-panel .emoji-picker { left:10px; right:10px; bottom:61px; width:auto; max-height:min(320px,50dvh); display:block; overflow:auto; padding:11px; }
.sticker-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
.sticker-grid button { display:grid; place-items:center; min-width:0; min-height:54px; padding:2px; border:0; border-radius:8px; background:#fff; cursor:pointer; }
.sticker-grid button:hover { background:#edf5ff; }
.sticker-art { display:inline-block; width:56px; height:56px; flex:none; background-image:url('/assets/stickers/blue-otter-24.png'); background-repeat:no-repeat; background-size:600% 400%; vertical-align:middle; }
.sticker-art.sticker-extra { background-image:url('/assets/stickers/blue-otter-12.png'); background-size:600% 200%; }
.sticker-grid .sticker-art { width:50px; height:50px; max-width:100%; }
.message.custom-sticker { background:transparent; padding:2px 4px; }
.message.custom-sticker .sticker-art { width:106px; height:106px; }
.message.custom-sticker small { font-size:10px; }
.attachment-menu { position:absolute; bottom:61px; left:52px; display:grid; gap:3px; padding:7px; border:1px solid #dce7f7; border-radius:10px; background:#fff; box-shadow:0 12px 28px #1d355728; z-index:3; }
.attachment-menu[hidden] { display:none; }
.attachment-menu button { min-width:104px; border:0; border-radius:6px; background:#fff; padding:8px 12px; text-align:left; color:#40536d; cursor:pointer; }
.attachment-menu button:hover { background:#edf5ff; }
.selected-file { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 9px; border-radius:7px; background:#eef5ff; color:#3d6b9b; font-size:11px; }
.selected-file[hidden] { display:none; }
.selected-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.selected-file button { border:0; background:transparent; color:#5c6b81; font-size:17px; cursor:pointer; }

/* Keep the full editor while showing its common actions first. */
.page-panel { padding: 18px 20px; }
.page-panel .form-grid { gap: 18px 16px; }
.rich-toolbar { display: block; background: #fafbfd; padding: 8px 10px; }
.rich-toolbar-main,.rich-toolbar-extra { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.rich-toolbar button { min-height:32px; padding:5px 9px; border-color:#e3e8f0; }
.rich-toolbar-main > button[data-insert-image] { margin-left:auto; color:#3266b6; }
.rich-more { margin-top: 6px; border-top: 1px solid #e9edf3; }
.rich-more summary { width:max-content; padding:7px 5px 2px; font-size:12px; font-weight:600; color:#63738a; cursor:pointer; }
.rich-more[open] summary { margin-bottom:6px; }
.rich-editor { min-height:155px; max-height:440px; font-size:14px; line-height:1.8; }
.rich-editor img,.formatted-copy img { display:block; max-width:100%; height:auto; margin:12px 0; border-radius:8px; }
.formatted-copy p { font-size:inherit; }
.formatted-copy img { cursor:zoom-in; }
.image-overlay { z-index:100; }
.notice-options { padding:14px 16px; border:1px solid #e6ebf2; border-radius:9px; background:#fbfcfe; }
.notice-option-grid label { background:#fff; padding:8px 11px; }
.ticket-create-empty { margin:auto; text-align:center; color:#7b899c; }
.ticket-create-empty strong { display:block; color:#293a54; font-size:17px; }
.ticket-create-empty p { margin:7px 0 18px; font-size:12px; }
.ticket-create-empty .primary-btn { min-height:38px; padding:0 20px; }
.ticket-create-form { display:grid; align-self:flex-start; width:100%; gap:9px; padding:4px 1px 14px; }
.ticket-create-form h3 { margin:0; color:#293a54; font-size:17px; }
.ticket-create-form p { margin:0 0 9px; color:#8390a2; font-size:12px; line-height:1.6; }
.ticket-create-form label { color:#44556d; font-size:12px; font-weight:650; }
.ticket-create-form input,.ticket-create-form textarea { width:100%; border:1px solid #dce5f0; border-radius:9px; padding:11px 12px; color:#2e405a; background:#fff; font:inherit; font-size:13px; outline:none; }
.ticket-create-form input:focus,.ticket-create-form textarea:focus { border-color:#83aaf0; box-shadow:0 0 0 3px #e9f1ff; }
.ticket-create-form textarea { resize:vertical; min-height:122px; }
.ticket-create-form .primary-btn { justify-self:end; margin-top:7px; padding:0 21px; min-height:38px; }
.ticket-create-form .primary-btn:disabled { opacity:.6; cursor:wait; }
.ticket-create-attachments { display:grid; gap:7px; margin-top:3px; }
.ticket-create-attachments .attachment-picker { justify-self:start; border:1px solid #c6d8f5; border-radius:8px; background:#f7faff; color:#386dc7; padding:8px 11px; font-size:12px; font-weight:700; cursor:pointer; }
.ticket-create-attachments .attachment-picker:hover { background:#ebf3ff; }
.ticket-create-attachments small { color:#8492a8; font-size:11px; }
.ticket-draft-files { display:grid; gap:5px; }
.ticket-draft-file { display:flex; align-items:center; justify-content:space-between; gap:8px; min-width:0; padding:7px 9px; border-radius:7px; background:#eef5ff; color:#405c82; font-size:11px; }
.ticket-draft-file span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ticket-draft-file button { border:0; background:transparent; color:#7a879b; cursor:pointer; font-size:16px; }
.ticket-create-actions { display:flex; justify-content:flex-end; }
.support-panel:has(.ticket-create-form) { height:min(760px,92dvh); }
.support-panel .chat-messages { min-height:0; }
.ticket-create-form input[hidden] { display:none; }
.force-visible-note { display:block; margin-top:5px; color:#a45b2b; font-size:11px; line-height:1.45; }
.topbar-actions .ticket-sound-toggle { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:30px; border:1px solid #d8e4f3; border-radius:7px; padding:0 10px; background:#f7faff; color:#426db7; font-size:12px; font-weight:650; line-height:1; white-space:nowrap; cursor:pointer; }
.topbar-actions .ticket-sound-toggle::before { content:''; width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#9ab2d8; }
.topbar-actions .ticket-sound-toggle[aria-pressed="true"] { border-color:#c5e5d3; background:#f3faf5; color:#287653; }
.topbar-actions .ticket-sound-toggle[aria-pressed="true"]::before { background:#42ad75; }
.topbar-actions .ticket-sound-toggle[aria-pressed="true"][data-audio-ready="false"] { border-color:#efd9a6; background:#fffaf0; color:#936821; }
.topbar-actions .ticket-sound-toggle[aria-pressed="true"][data-audio-ready="false"]::before { background:#d9a84d; }
.topbar-actions .ticket-sound-toggle:hover { border-color:#9bbced; color:#315fa6; }
.account-more-option .outline-btn:disabled { opacity:.55; cursor:not-allowed; }
.import-form textarea { min-height: 110px; resize: vertical; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; white-space: pre; overflow-x: auto; overflow-wrap: normal; }
.import-form [data-import-undo-ai][hidden] { display: none; }
.import-form [data-import-edit][hidden] { display: none; }
.import-form:not(.import-form-reviewed) [data-import-confirm] { display:none; }
.import-form > .full-row { grid-column: 1 / -1; }
.import-form > .form-actions { position:sticky; bottom:-26px; z-index:3; margin:0 -25px -26px; padding:12px 25px; border-top:1px solid #e1e9f5; background:#fff; box-shadow:0 -6px 14px rgba(42,69,110,.06); }
.import-form-reviewed > .import-section,.import-form-reviewed > [data-import-intro],.import-form-reviewed > .form-hint:not(#import-preview),.import-form-reviewed [data-import-undo-ai],.import-form-reviewed [data-import-ai],.import-form-reviewed button[type=submit] { display:none; }
.import-form-reviewed #import-preview { max-height:none; }
.import-questions { padding: 12px 14px; border: 1px solid #e1e9f5; border-radius: 12px; background: #f8fbff; }
.import-questions p { margin: 0 0 12px; }
.import-preview { min-height: 48px; max-height: min(480px,56dvh); overflow: auto; padding: 12px 14px; border: 1px solid #e1e9f5; border-radius: 12px; background: #f8fbff; }
.import-preview p { margin: 5px 0 10px; }
.import-preview ul { margin: 8px 0 0; padding-left: 20px; }
.import-preview .admin-table { font-size: 12px; }
.import-preview h3 { margin:0 0 8px; font-size:15px; color:#334762; }
.import-review-search { margin:12px 0; }
.import-recognized-list { display:grid; gap:8px; }
.import-review-row { border:1px solid #dce6f5; border-radius:10px; background:#fff; }
.import-review-row[hidden] { display:none; }
.import-review-row summary { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; cursor:pointer; list-style:none; }
.import-review-row summary::-webkit-details-marker { display:none; }
.import-review-row summary strong,.import-review-row summary small { display:block; }
.import-review-row summary small { margin-top:3px; color:#7586a0; overflow-wrap:anywhere; }
.import-review-row p { border-top:1px solid #e7edf6; padding:12px; margin:0; }
.import-review-errors { margin:10px 0; padding:10px 12px; border:1px solid #f2c9c9; border-radius:8px; background:#fff6f6; color:#a53a3a; }
.import-review-errors[hidden] { display:none; }
@media (max-width:560px) { .import-review-row summary { align-items:flex-start; flex-direction:column; gap:4px; } }
.import-section { min-width:0; padding:15px; border:1px solid #e1e9f5; border-radius:12px; background:#fbfdff; }
.import-section h3 { margin:0 0 8px; font-size:15px; color:#334762; }
.import-section > .form-hint { margin:0 0 12px; line-height:1.6; }
.import-question-map { display:grid; gap:5px; margin-top:10px; padding:10px 12px; border-radius:9px; background:#edf5ff; color:#45617f; font-size:12px; }
.import-question-map strong { color:#385579; }
.import-question-map summary { cursor:pointer; font-weight:650; }
.import-advanced { margin-top:12px; border-top:1px solid #e1e9f5; padding-top:10px; }
.import-advanced summary { cursor:pointer; color:#416fbd; font-weight:650; }
.import-advanced p { margin:10px 0; }
.import-advanced small { display:block; margin-top:4px; color:#8492a8; line-height:1.5; }
.import-settings { padding:10px 15px; }
.import-settings > summary { cursor:pointer; color:#385579; font-size:14px; font-weight:700; }
.import-settings > .form-grid { margin-top:12px; }
.import-feature-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:13px; }
.import-feature { display:grid; align-content:start; gap:8px; min-width:0; padding:11px 12px; border:1px solid #e1e9f5; border-radius:9px; background:#fff; }
.import-feature > label:first-child { display:flex; align-items:center; gap:8px; color:#38506e; font-weight:650; }
.import-feature > label:first-child input { flex:none; }
.import-feature .form-field { font-weight:400; }
.import-feature .form-field input { max-width:180px; }
.import-feature small { color:#8897aa; line-height:1.5; }
.import-feature:has(input:disabled):not(:has(input[name="autoPasswordEnabled"]:checked)) { color:#9aa6b5; }
@media (max-width:640px) { .import-feature-grid { grid-template-columns:1fr; } .import-section { padding:12px; } }
@media (max-width:640px) { .import-form > .form-actions { bottom:-18px; margin:0 -18px -18px; padding:10px 18px; } }
.ticket-alert { position:fixed; right:18px; bottom:18px; z-index:80; display:flex; align-items:center; gap:7px; width:max-content; max-width:calc(100vw - 36px); min-height:42px; padding:6px 7px 6px 12px; border:1px solid #dce6f2; border-radius:10px; background:#fff; box-shadow:0 7px 22px rgba(55,75,106,.12); color:#3d526e; }
.ticket-alert[hidden] { display:none; }
body:has(#dialog-overlay:not([hidden])) .ticket-alert, body:has(#help-overlay:not([hidden])) .ticket-alert { display:none; }
.ticket-alert strong { margin-right:4px; font-size:12px; font-weight:700; white-space:nowrap; }
.ticket-alert button { min-height:28px; border:1px solid #d9e4f3; border-radius:6px; padding:4px 8px; background:#fff; color:#577299; font-size:11px; font-weight:650; white-space:nowrap; cursor:pointer; }
.ticket-alert #ticket-alert-open { background:#5d8ef4; border-color:#5d8ef4; color:white; }
.ticket-alert #ticket-alert-dismiss { width:27px; min-height:27px; padding:0; border:0; background:transparent; color:#90a0b5; font-size:17px; line-height:1; }
.ticket-head { align-items:center; }
.ticket-head h2 { margin-bottom:3px; }
.ticket-head p { margin:0; color:#8391a5; font-size:12px; }
.ticket-filters { display:grid; grid-template-columns:minmax(170px,1fr) repeat(3,minmax(125px,170px)); gap:10px; margin-bottom:14px; }
.ticket-filters input,.ticket-filters select { min-width:0; height:41px; border:1px solid #dce5f2; border-radius:8px; padding:0 11px; background:#fff; color:#41516a; font:inherit; font-size:13px; }
.ticket-layout { grid-template-columns:minmax(290px,350px) minmax(0,1fr); }
.ticket-side { display:flex; flex-direction:column; max-height:680px; min-height:320px; overflow:auto; }
.ticket-side .ticket-list-item { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:5px 8px; min-width:0; width:100%; padding:12px 11px; text-align:left; }
.ticket-list-item.needs-reply { border-left:3px solid #e8935d; background:#fffaf6; }
.ticket-list-item.active { background:#edf5ff; }
.ticket-list-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:650; color:#35445b; }
.ticket-list-status { color:#7b899c; font-size:11px; white-space:nowrap; }
.ticket-list-item.needs-reply .ticket-list-status { color:#c46c3c; font-weight:750; }
.ticket-side .ticket-list-item small { grid-column:1/-1; margin:0; }
.ticket-pagination { display:flex; align-items:center; justify-content:space-between; gap:9px; margin-top:auto; padding:13px 4px 2px; color:#8593a8; font-size:11px; }
.ticket-pagination > div { display:flex; gap:6px; }
.ticket-pagination button { width:29px; height:29px; padding:0; text-align:center; border:1px solid #d6e2f4; border-radius:7px; background:white; color:#5f84c2; cursor:pointer; }
.ticket-pagination button:disabled { opacity:.42; cursor:not-allowed; }
.ticket-detail { min-width:0; }
@media (max-width:900px) { .ticket-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .ticket-layout { grid-template-columns:1fr; } .ticket-side { max-height:340px; min-height:0; } }
@media (max-width:560px) { .ticket-filters { grid-template-columns:1fr; } .ticket-alert { right:10px; bottom:10px; gap:5px; max-width:calc(100vw - 20px); } .ticket-alert strong { font-size:11px; } .ticket-alert button { padding:3px 5px; } .topbar-actions .ticket-sound-toggle { min-height:28px; padding:0 7px; font-size:11px; } .ticket-pagination { flex-wrap:wrap; } .ticket-pagination > span { width:100%; white-space:nowrap; } .ticket-pagination > div { width:100%; justify-content:flex-end; } .ticket-side .ticket-pagination button { width:29px; flex:0 0 29px; } }
.recheck-action { display:inline-flex; flex-direction:column; align-items:flex-start; gap:3px; }
.recheck-action small { max-width:130px; color:#8492a6; font-size:10px; line-height:1.3; }
@media(max-width:700px) { .account-pagination { align-items:flex-start; flex-wrap:wrap; } .account-pagination-actions { width:100%; justify-content:space-between; } }
.rich-color-setting { position:relative; display:inline-flex; align-items:center; gap:5px; min-height:32px; padding:3px 5px 3px 8px; border:1px solid #d9e4f5; border-radius:6px; background:#fff; color:#40536d; font-size:12px; }
.rich-toolbar .rich-color-trigger { width:25px; min-height:25px; height:25px; padding:0; border:1px solid #dfe7f3; border-radius:6px; box-shadow:0 1px 3px #25395818; background:var(--swatch); }
.rich-color-popover { position:absolute; top:calc(100% + 7px); left:0; z-index:10; display:flex; align-items:center; gap:7px; padding:8px; border:1px solid #dbe6f4; border-radius:9px; background:#fff; box-shadow:0 10px 28px #24354e26; white-space:nowrap; }
.rich-color-popover[hidden] { display:none; }
.rich-color-popover input[type=color] { appearance:none; -webkit-appearance:none; width:32px; height:30px; padding:0; border:0; border-radius:6px; background:transparent; cursor:pointer; }
.rich-color-popover input[type=color]::-webkit-color-swatch-wrapper { padding:0; }
.rich-color-popover input[type=color]::-webkit-color-swatch { border:1px solid #dfe7f3; border-radius:6px; }
.rich-color-popover .rich-color-confirm { border-color:#5d8ef4; background:#5d8ef4; color:#fff; }
.rich-color-popover .rich-color-confirm:hover { background:#447bea; color:#fff; }
@media(max-width:700px) { .rich-toolbar-main > button[data-insert-image] { margin-left:0; } }
/* Keep the public cards inside narrow in-app browser viewports. */
.public-body,.public-body .share-shell,.public-body #share,.public-body .module,
.public-body .account-list,.public-body .account-card,.public-body .guide-gallery,
.public-body .formatted-copy { min-width:0; max-width:100%; }
.public-body .share-shell { width:100%; max-width:900px; }
.public-body .account-list,.public-body .guide-gallery { grid-template-columns:minmax(0,1fr); }
.public-body .module-header { min-width:0; flex-wrap:wrap; }
.public-body .module-header h2 { min-width:0; }
.public-body .count-label { margin-left:auto; white-space:normal; text-align:right; }
.public-body .formatted-copy,.public-body .account-card { overflow-wrap:anywhere; }
.public-body .formatted-copy img { width:auto; max-width:100%; }
@media(max-width:600px) {
  .public-body .share-shell { width:100%; max-width:100%; padding-left:14px; padding-right:14px; }
  .public-body .guide-gallery-item img { max-height:420px; }
  .public-body .module.card { width:100%; padding:18px 16px; }
  .public-body .account-card.card { width:100%; padding:16px; }
  .public-body .credential-row { width:100%; min-width:0; }
  .public-body .credential-main { min-width:0; }
}

/* Tutorial media shares the text flow; video shape only applies before playback. */
#guide-text video,.rich-editor video,.guide-video video { display:block; width:100%; height:auto; max-width:100%; background:#111827; object-fit:contain; }
#guide-text video,.rich-editor video { margin:12px 0; border-radius:9px; }
#guide-text video[data-ratio="16:9"],.rich-editor video[data-ratio="16:9"],.guide-video video[data-ratio="16:9"] { aspect-ratio:16/9; object-fit:cover; max-height:none; }
#guide-text video[data-ratio="1:1"],.rich-editor video[data-ratio="1:1"],.guide-video video[data-ratio="1:1"] { aspect-ratio:1; object-fit:cover; max-width:720px; max-height:none; }
#guide-text video[data-ratio="3:4"],.rich-editor video[data-ratio="3:4"],.guide-video video[data-ratio="3:4"] { aspect-ratio:3/4; object-fit:cover; max-width:600px; max-height:none; }
#guide-text video[data-ratio="9:16"],.rich-editor video[data-ratio="9:16"],.guide-video video[data-ratio="9:16"] { aspect-ratio:9/16; object-fit:cover; max-width:400px; max-height:none; }
#guide-module video[data-playing="true"] { aspect-ratio:auto; width:100%; max-width:100%; max-height:min(75vh,720px); object-fit:contain; }
.rich-editor video.guide-video-selected { outline:3px solid #5d8ef4; outline-offset:2px; }
.guide-ratio-control { display:inline-flex; align-items:center; gap:6px; color:#50647d; font-size:12px; white-space:nowrap; }
.guide-ratio-control select { min-height:32px; border:1px solid #d9e4f5; border-radius:6px; background:#fff; color:#40536d; font-size:12px; }
/* Grouped management: statuses and login results remain visible when folded. */
.management-group{border:1px solid #dce5f6;border-radius:10px;overflow:hidden;margin:0 0 14px;background:#fff}
.management-group-head{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#f3f6fb;padding:16px 18px}
.management-group-head strong{font-size:15px;color:#283951}.management-group-head small{margin-left:10px;color:#7e8da5;font-size:12px}
.group-status-summary{display:flex;gap:14px;flex-wrap:wrap;margin-top:8px;color:#648079;font-size:12px}.group-expand{border:0;background:transparent;color:#7284a0;font-size:12px;cursor:pointer;white-space:nowrap}
.account-state-strip,.cloud-state-strip{display:flex;gap:9px;padding:12px 16px;flex-wrap:wrap}
.account-state-chip,.cloud-state-chip{border:1px solid transparent;text-align:left;background:#edf5ff;border-radius:6px;padding:9px 11px;color:#476282;cursor:pointer;min-width:180px;max-width:260px;flex:0 1 200px;display:flex;flex-direction:column;gap:5px;font:inherit;font-size:12px}
.account-state-chip.normal,.cloud-state-chip.normal{background:#eaf7f1;color:#13826b}.account-state-chip.error,.cloud-state-chip.error{background:#fff0ee;color:#be554e}.account-state-chip.checking{background:#eef3ff;color:#507cc5}.account-state-chip.disabled{background:#f1f3f6;color:#7a8595}
.account-state-chip[aria-expanded=true]{border-color:currentColor}.chip-head{display:flex;align-items:center;gap:7px}.chip-head i{height:5px;width:5px;border-radius:50%;background:currentColor}.chip-head em{font-style:normal;color:#7b8faa;font-size:11px;margin-left:auto}.chip-result{white-space:normal;color:inherit}.account-state-chip small,.cloud-state-chip small{color:#7d8ba1;font-size:11px;line-height:1.5}
.group-account-detail{padding:15px 18px;border-top:1px solid #e8edf5;background:#fafcff}.group-detail-heading{display:flex;justify-content:space-between;gap:12px;align-items:center}.group-account-detail p{font-size:13px;color:#61718b;margin:8px 0}.group-account-detail small{font-size:12px;color:#8291a9}.group-account-detail .table-actions{margin-top:12px}
.grouped-account-table{min-width:1080px}.account-table-panel{padding:0;border:0}.cloud-management-groups{margin-top:18px}.cloud-state-chip{min-width:200px;flex-basis:240px}.cloud-state-chip span{font-size:12px}
.group-sort-list{display:flex;flex-direction:column;gap:9px;margin-top:15px}.group-sort-list>div{display:flex;align-items:center;justify-content:space-between;border:1px solid #dce5f6;padding:12px;border-radius:8px}.group-sort-list>div>div{display:flex;gap:6px}
.rescue-center-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid #e4eaf5;padding-bottom:15px;margin-bottom:22px}.rescue-center-tabs button{padding:10px 20px;border:1px solid #dfe7f6;border-radius:8px;background:#fff;color:#7184a1;font:inherit;cursor:pointer}.rescue-center-tabs button.active{background:#edf3ff;border-color:#9ebaff;color:#4e7fe0;font-weight:600}
.rescue-email-settings{max-width:1150px}.security-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.tag-picker{position:relative}.tag-picker details{border:1px solid #dce5f6;border-radius:6px;background:#fff}.tag-picker summary{padding:10px;cursor:pointer;font-size:13px;color:#73839e}.tag-dropdown{padding:10px;border-top:1px solid #e6ecf5}.tag-options{max-height:160px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.tag-options label{display:flex;gap:7px;align-items:center;font-size:13px}.tag-options input{width:15px!important;min-height:15px!important;margin:0!important}.tag-create-row{display:flex;gap:8px;margin-top:12px}.tag-create-row input{min-width:0;flex:1}.tag-create-row button{white-space:nowrap}.tag-selected{display:flex;gap:5px;flex-wrap:wrap}.tag-selected span{background:#edf3ff;color:#5c82c6;border-radius:4px;padding:3px 7px;font-size:12px}
.tutorial-player{position:relative;margin:12px 0;max-width:100%;clear:both}.tutorial-player video{display:block!important;width:100%;margin:0!important;cursor:pointer}.tutorial-play-trigger{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;background:rgba(19,34,55,.78);color:#fff;border:1px solid rgba(255,255,255,.65);border-radius:30px;padding:13px 22px;cursor:pointer;font:inherit;z-index:2;white-space:nowrap}.tutorial-play-trigger span{font-size:23px;line-height:1}.tutorial-play-trigger b{font-size:15px}.tutorial-play-trigger[hidden],.tutorial-play-error[hidden]{display:none!important}.tutorial-play-error{display:flex;gap:12px;flex-wrap:wrap;font-size:13px;padding:12px;background:#fff4ec;color:#ad6635}.tutorial-play-error a{color:#4d80db}.credential-password{overflow-wrap:anywhere;user-select:text;-webkit-user-select:text}
@media(max-width:760px){.management-group-head{padding:13px}.account-state-strip,.cloud-state-strip{padding:10px;gap:8px}.account-state-chip{min-width:0;max-width:none;flex:0 0 calc(50% - 4px);padding:9px}.cloud-state-chip{min-width:0;flex:1 1 180px}.chip-head{gap:5px}.security-settings-grid{grid-template-columns:1fr}.rescue-center-tabs button{padding:9px 12px;font-size:13px}.group-account-detail{padding:12px}.tag-options{grid-template-columns:1fr}}

.account-state-chip.has-incomplete .chip-result{color:#a87024}

/* Detail dialogs retain a compact group overview. */
.group-open-hint{color:#7c8da6;font-size:12px;white-space:nowrap}
.account-state-chip.has-incomplete.normal{background:#fff7e9;color:#ac7627}
.account-inspect-dialog{max-width:760px;width:calc(100% - 32px)}
.account-inspect-tabs{display:flex;gap:24px;border-bottom:1px solid #e4ebf6;margin:0 0 20px}
.account-inspect-tabs button{border:0;border-bottom:2px solid transparent;background:none;padding:0 2px 13px;color:#7c8ba3;font-size:14px;cursor:pointer}
.account-inspect-tabs button.active{border-bottom-color:#5b8bf7;color:#477fe9;font-weight:600}
.account-inspect-result{padding:18px;border:1px solid #deeee7;background:#f4fbf8;border-radius:8px;color:#25856b;line-height:1.65}
.account-inspect-result.needs-attention{background:#fff9ed;border-color:#f2e4c5;color:#a77328}
.account-inspect-result p{margin:8px 0;color:#5b6d85}.account-inspect-result small{font-size:12px}
.account-inspect-facts,.account-inspect-tasks dl{display:grid;grid-template-columns:95px minmax(0,1fr);gap:16px;margin:24px 0;font-size:13px;line-height:1.7}
.account-inspect-facts dt,.account-inspect-tasks dt{color:#8795a9;font-weight:400}
.account-inspect-facts dd,.account-inspect-tasks dd{margin:0;color:#3b4e68;overflow-wrap:anywhere}
.account-inspect-actions{display:flex;gap:9px;flex-wrap:wrap;padding-top:18px;border-top:1px solid #e6edf6}
.account-inspect-actions button{padding:8px 12px}
.cloud-management-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.cloud-category{margin:0;min-width:0}.cloud-category .management-group-head strong{overflow-wrap:anywhere}
.cloud-provider-list{padding:0 18px}.cloud-provider-row{display:flex;align-items:center;gap:12px;justify-content:space-between;width:100%;padding:17px 0;border:0;border-bottom:1px solid #edf1f7;background:#fff;text-align:left;cursor:pointer;color:#7d8ba2}
.cloud-provider-row:last-child{border-bottom:0}.cloud-provider-row>span:first-child{flex:1;min-width:0}.cloud-provider-row b{display:block;color:#3b506f;font-size:13px;font-weight:500}.cloud-provider-row small{display:block;margin-top:6px;color:#90a0b5;font-size:11px}.cloud-provider-row .badge{font-size:11px;white-space:normal;text-align:center;max-width:110px}
.cloud-category-manage-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid #edf1f7}.cloud-category-name{background:none;border:0;color:#487fdc;cursor:pointer;text-align:left}
.tutorial-play-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#f5f8fe;border:1px solid #e2e9f5;border-radius:0 0 9px 9px;color:#74849b;font-size:13px}
.tutorial-play-bar .tutorial-play-trigger{position:static;transform:none;display:inline-flex;align-items:center;justify-content:center;background:#5b89f7;color:#fff;border:0;border-radius:6px;padding:9px 15px;font-size:13px;box-shadow:none;cursor:pointer;flex-shrink:0}
#guide-text .tutorial-player video{margin:0;border-radius:9px 9px 0 0}.tutorial-player{margin:12px 0}
@media(max-width:760px){.cloud-management-groups{grid-template-columns:minmax(0,1fr)}.group-open-hint{display:none}.account-inspect-facts,.account-inspect-tasks dl{grid-template-columns:75px minmax(0,1fr);gap:12px}.account-inspect-tabs{gap:20px}}

/* Account configuration keeps the active pane and save controls in view. */
.account-editor-dialog{width:min(1100px,calc(100vw - 48px));height:min(760px,calc(100dvh - 48px));max-height:calc(100dvh - 48px)}
.account-editor-dialog .dialog-content{padding:0;display:flex;flex-direction:column;overflow:hidden;flex:1;min-height:0}
.account-editor-form{display:flex;flex-direction:column;flex:1;min-height:0}
.account-editor-layout{display:grid;grid-template-columns:195px minmax(0,1fr);flex:1;min-height:0}
.account-editor-nav{padding:20px 12px;background:#f7f9fd;border-right:1px solid #e5ebf5;display:flex;flex-direction:column;gap:8px}
.account-editor-nav button{text-align:left;border:0;border-radius:8px;background:none;color:#6f8099;padding:13px 12px}
.account-editor-nav button strong{display:block;font-size:14px;font-weight:600}.account-editor-nav button small{display:block;margin-top:7px;font-size:11px;line-height:1.5;color:#8595ad}
.account-editor-nav button.active{background:#e9f0ff;color:#417cec}
.account-editor-panels{min-width:0;min-height:0;overflow:auto;padding:25px 28px}
.account-editor-panel[hidden]{display:none}.account-editor-panel h3{font-size:18px;color:#2a3c57;margin:0 0 5px}.account-editor-panel>p{margin:0 0 22px}
.account-editor-panel .form-grid{gap:20px 18px;align-items:start}.account-editor-panel .account-options{padding:0;border:0;background:none;margin:0;min-width:0}.account-editor-panel .profile-option{grid-column:1/-1;width:100%;margin:0}
#account-form .account-editor-footer{flex:none;position:static;padding:15px 25px;margin:0;min-height:72px;width:100%;align-self:stretch;border-top:1px solid #e3ebf7;background:#fff;align-items:center}
.account-editor-footer-note{margin-right:auto;color:#8d9bb0;font-size:12px}
@media(max-width:760px){.account-editor-dialog{width:calc(100vw - 18px);height:calc(100dvh - 32px);max-height:calc(100dvh - 32px)}.account-editor-layout{display:flex;flex-direction:column}.account-editor-nav{flex-direction:row;border-right:0;border-bottom:1px solid #e5ebf5;padding:8px;gap:4px;flex-wrap:wrap;flex:none}.account-editor-nav button{flex:1;padding:11px 7px;text-align:center}.account-editor-nav button strong{font-size:12px}.account-editor-nav button small{display:none}.account-editor-panels{padding:20px;flex:1}.account-editor-footer-note{display:none}#account-form .account-editor-footer{padding:12px 18px;min-height:64px}.account-editor-panel .form-grid{grid-template-columns:minmax(0,1fr)}}

/* Task settings fill the editor and keep switches, intervals and notes aligned. */
.account-editor-panel .account-options{grid-column:1/-1;width:100%}
.account-editor-panel .account-options-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:stretch}
.account-editor-panel .account-options-grid>.account-option{padding:16px 18px;border-radius:12px;background:#fafcff;display:flex;flex-direction:column;min-height:118px}
.account-editor-panel .account-option-title{gap:8px;min-height:25px;margin-bottom:7px}
.account-editor-panel .account-option-title strong{font-size:14px}
.account-editor-panel .task-switch{margin-left:auto;gap:8px;white-space:nowrap;color:#8290a5;font-weight:400;font-size:11px}
.account-editor-panel .task-switch input{appearance:none;-webkit-appearance:none;width:37px;height:22px;min-width:37px;margin:0;border:0;border-radius:20px;background:#d3dce9;position:relative;cursor:pointer;transition:background .18s}
.account-editor-panel .task-switch input::after{content:'';position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #172a4524;transition:transform .18s cubic-bezier(.2,.8,.2,1)}
.account-editor-panel .task-switch input:checked{background:#5d8df5}
.account-editor-panel .task-switch input:checked::after{transform:translateX(15px)}
.account-editor-panel .task-switch input:disabled{opacity:.45;cursor:not-allowed}
.account-editor-panel .task-option-description{font-size:12px;line-height:1.65;color:#8493aa;margin:0 0 11px;font-weight:400;min-height:20px}
.account-editor-panel .task-interval-field{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;color:#62748f;font-weight:400}
.account-editor-panel .task-interval-field input{width:116px;margin:0;background:#fff;min-height:39px;font-size:14px;text-align:center;font-variant-numeric:tabular-nums}
.account-editor-panel .account-option>.form-hint{display:block;margin-top:8px;font-size:11px;line-height:1.65;color:#91a0b6}
.account-editor-panel .account-option>.compact-switch{margin-top:auto}
@media(max-width:760px){.account-editor-panel .account-options-grid{grid-template-columns:minmax(0,1fr);gap:12px}.account-editor-panel .account-options-grid>.account-option{padding:16px;min-height:110px}.account-editor-panel .task-switch{font-size:11px}}
@media(prefers-reduced-motion:reduce){.account-editor-panel .task-switch input,.account-editor-panel .task-switch input::after{transition:none}}

/* Per-page public navigation names. */
.admin-body .module-name-field{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:12px;flex:1;min-width:0}
.admin-body .module-name-field input{width:100%;max-width:360px;min-width:0;min-height:38px;padding:8px 11px;border:1px solid #dfe6f0;border-radius:8px;background:#fff;color:#31405a;font-size:13px;font-weight:400}
.admin-body #announcement-editor img{margin-left:auto;margin-right:auto}
@media(max-width:600px){.admin-body .module-name-field{grid-template-columns:minmax(0,1fr);gap:6px}}

/* Customer update progress remains readable on desktop and small screens. */
.update-status-panel{margin:20px 0;padding:20px;border:1px solid #dbe5f4;border-radius:16px;background:#f7faff}
.update-progress-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#1d3554;font-size:15px}
.update-progress-heading>span{font-variant-numeric:tabular-nums;color:#007aff;font-weight:600}
.update-progress-track{height:8px;margin:16px 0;border-radius:8px;background:#e1e9f4;overflow:hidden}
.update-progress-track>span{display:block;height:100%;border-radius:inherit;background:#007aff;transition:width .3s ease}
.update-stage-list{display:flex;gap:10px;justify-content:space-between;list-style:none;padding:0;margin:0;font-size:12px;color:#8794a9;flex-wrap:wrap}
.update-stage-list li::before{content:'○';margin-right:5px}.update-stage-list .is-done{color:#27866a}.update-stage-list .is-done::before{content:'✓'}.update-stage-list .is-current{color:#007aff;font-weight:600}
.update-transfer-details,.update-connection-hint{font-size:12px;color:#65748c;margin:14px 0 0;overflow-wrap:anywhere}
.update-status-panel.is-success .update-progress-track>span{background:#30a77a}.update-status-panel.is-failed .update-progress-track>span{background:#e17835}
.update-failure-detail{margin-top:16px;padding:14px;border-radius:12px;background:#fff4e8;color:#925516}.update-failure-detail p{margin:8px 0;font-size:13px}.update-failure-detail small{overflow-wrap:anywhere}
.update-progress-track.is-indeterminate>span{animation:update-progress-wait 1.4s ease-in-out infinite alternate}
@keyframes update-progress-wait{from{transform:translateX(0)}to{transform:translateX(230%)}}
@media(max-width:760px){.update-status-panel{padding:16px}.update-stage-list{justify-content:flex-start;gap:10px 16px}.update-progress-heading{align-items:flex-start}.customer-update-card>.account-result-note p{overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){.update-progress-track.is-indeterminate>span{animation:none}.update-progress-track>span{transition:none}}