/* Skyline Blue mobile visual system · approved concept · 2026-09-16 */
body[data-app-surface="mobile"] {
  --mobile-page: #f3f7fc;
  --mobile-surface: #fff;
  --mobile-line: #dce7f3;
  --mobile-line-soft: #edf3f9;
  --mobile-ink: #0b1f3a;
  --mobile-muted: #667892;
  --mobile-primary: #0878ed;
  --mobile-primary-deep: #0756b5;
  --mobile-primary-soft: #eaf4ff;
  --mobile-cyan: #1ba9f5;
  --mobile-success: #12a66a;
  --mobile-warning: #f59e0b;
  --mobile-danger: #ef4444;
  --mobile-photo-overlay: linear-gradient(180deg, rgb(7 43 91 / 18%), rgb(5 36 79 / 76%));
  font-family: "Microsoft YaHei UI", "PingFang SC", "Segoe UI", sans-serif;
  background: #e8eff8;
}

body[data-app-surface="mobile"] .phone-frame {
  overflow: hidden;
  border: 1px solid rgb(114 145 183 / 28%);
  border-radius: 28px;
  background: var(--mobile-page);
  box-shadow: 0 28px 70px rgb(9 32 67 / 24%);
}

body[data-app-surface="mobile"] .ui-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--icon-size, 20px);
  height: var(--icon-size, 20px);
  font-size: var(--icon-size, 20px);
  line-height: 1;
}

body[data-app-surface="mobile"] .mobile-header {
  min-height: 58px;
  border: 0;
  color: #fff;
  background: linear-gradient(135deg, #0757b6 0%, #0878ed 58%, #1ba9f5 128%);
  box-shadow: 0 5px 18px rgb(5 65 139 / 18%);
}

body[data-app-surface="mobile"] .mobile-header strong,
body[data-app-surface="mobile"] .mobile-header small {
  color: #fff;
}

body[data-app-surface="mobile"] .mobile-header small {
  color: rgb(255 255 255 / 72%);
}

body[data-app-surface="mobile"] .mobile-header > button,
body[data-app-surface="mobile"] .mobile-header > .mobile-context-switch {
  color: #fff;
}

body[data-app-surface="mobile"] .mobile-header > .mobile-context-switch {
  border-color: rgb(255 255 255 / 28%);
  background: rgb(255 255 255 / 14%);
  backdrop-filter: blur(10px);
}

body[data-app-surface="mobile"] .mobile-header > .mobile-context-switch span {
  white-space: nowrap;
}

body[data-app-surface="mobile"] .mobile-content {
  padding: 12px 12px calc(24px + var(--safe-bottom));
  background:
    radial-gradient(circle at 100% 0, rgb(32 145 255 / 8%), transparent 190px),
    var(--mobile-page);
}

body[data-app-surface="mobile"] :where(
  .mobile-section,
  .mobile-card,
  .mobile-form-card,
  .mobile-profile-card,
  .mobile-domain-overview,
  .mobile-domain-menu,
  .m-prg-form-section,
  .m-prg-card,
  .m-saf-card,
  .m-saf-form fieldset,
  .m-mat-card,
  .m-mat-form-section,
  .cg-card
) {
  border-color: var(--mobile-line);
  border-radius: 14px;
  background: rgb(255 255 255 / 98%);
  box-shadow: 0 5px 16px rgb(9 49 94 / 6%);
}

body[data-app-surface="mobile"] :where(.mobile-section h3, .mobile-form-card h2, .m-prg-form-section h2, .m-mat-form-section h2, .m-saf-form legend) {
  color: var(--mobile-ink);
  font-weight: 760;
  letter-spacing: -.2px;
}

body[data-app-surface="mobile"] .mobile-section > header::before,
body[data-app-surface="mobile"] .m-prg-form-section > header::before,
body[data-app-surface="mobile"] .m-mat-form-section > header::before {
  content: "";
  align-self: stretch;
  width: 3px;
  margin-right: 8px;
  border-radius: 99px;
  background: linear-gradient(#0a85ff, #18b8f2);
}

body[data-app-surface="mobile"] :where(.mobile-section > header, .m-prg-form-section > header, .m-mat-form-section > header) {
  display: flex;
  align-items: stretch;
}

body[data-app-surface="mobile"] :where(.el-button--primary, .mobile-primary-block) {
  border-color: #0874e2;
  color: #fff;
  background: linear-gradient(135deg, #086ddd, #0784f8);
  box-shadow: 0 7px 16px rgb(8 112 229 / 22%);
}

body[data-app-surface="mobile"] :where(.el-button--primary, .mobile-primary-block):active {
  background: #075bbd;
  transform: translateY(1px);
}

body[data-app-surface="mobile"] :where(
  .mobile-content input,
  .mobile-content select,
  .mobile-content textarea,
  .el-overlay--mobile input,
  .el-overlay--mobile select,
  .el-overlay--mobile textarea,
  .mobile-content .el-input,
  .mobile-content .el-select
) {
  border-color: #c9d8e9;
  border-radius: 10px;
  background: #fbfdff;
}

body[data-app-surface="mobile"] :where(
  .mobile-content input,
  .mobile-content select,
  .mobile-content textarea,
  .el-overlay--mobile input,
  .el-overlay--mobile select,
  .el-overlay--mobile textarea
):focus {
  border-color: #1688f4;
  outline: 0;
  box-shadow: 0 0 0 3px rgb(22 136 244 / 13%);
}

/* Real local photography across the approved 30-page concept. */
body[data-app-surface="mobile"] .mobile-content[data-page-code="M04"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M05"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M06"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M10"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M11"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M12"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M20"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M21"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M22"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M23"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M30"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M31"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M32"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M33"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M34"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M40"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M41"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M42"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M50"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M51"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M52"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M60"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M61"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M71"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M72"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M80"] {
  --page-hero: url("../assets/skyline-blue/site-hero.png");
}

body[data-app-surface="mobile"] .mobile-content[data-page-code="M30"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M31"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M32"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M33"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M34"] {
  --page-hero: url("../assets/hazard-manual.png");
}

body[data-app-surface="mobile"] .mobile-content[data-page-code="M40"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M41"],
body[data-app-surface="mobile"] .mobile-content[data-page-code="M42"] {
  --page-hero: url("../assets/skyline-blue/materials-hero.png");
}

body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"] {
  --page-hero: url("../assets/skyline-blue/ai-assistant.png");
}

body[data-app-surface="mobile"] .mobile-content[data-page-code]:not([data-page-code="M02"]):not([data-page-code="M03"])::before {
  content: "";
  display: block;
  height: 112px;
  margin: -12px -12px 12px;
  border-radius: 0 0 18px 18px;
  background-image: var(--mobile-photo-overlay), var(--page-hero);
  background-position: center, center 46%;
  background-size: cover;
  box-shadow: 0 10px 24px rgb(7 55 114 / 14%);
}

body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"]::before {
  height: 148px;
  flex: 0 0 148px;
  background-image: linear-gradient(90deg, #0757b6 0%, rgb(7 87 182 / 76%) 46%, rgb(7 87 182 / 12%) 72%), var(--page-hero);
  background-position: center, right top;
  background-size: 100% 100%, 170px 170px;
  background-repeat: no-repeat;
  background-color: #0757b6;
}

/* Workbench hero: project photo first, business metrics second. */
body[data-app-surface="mobile"] .mobile-project-card {
  border: 0;
  border-radius: 16px;
  box-shadow: 0 12px 28px rgb(6 55 116 / 15%);
}

body[data-app-surface="mobile"] .mobile-project-summary {
  min-height: 134px;
  padding: 20px 18px;
  color: #fff;
  background-image: linear-gradient(90deg, rgb(4 39 87 / 88%), rgb(4 55 117 / 30%)), url("../assets/skyline-blue/site-hero.png");
  background-position: center;
  background-size: cover;
}

body[data-app-surface="mobile"] .mobile-project-summary h2 {
  max-width: 260px;
  color: #fff !important;
  font-size: 21px;
  text-shadow: 0 2px 9px rgb(0 31 72 / 42%);
}

body[data-app-surface="mobile"] .mobile-project-summary > div > span {
  border-color: rgb(255 255 255 / 34%);
  color: #fff;
  background: rgb(255 255 255 / 16%);
  backdrop-filter: blur(8px);
}

body[data-app-surface="mobile"] .mobile-project-summary p {
  color: rgb(255 255 255 / 84%) !important;
  text-shadow: 0 1px 7px rgb(0 31 72 / 46%);
}

body[data-app-surface="mobile"] .mobile-project-metrics {
  border-top: 0;
  background: #fff;
}

body[data-app-surface="mobile"] .mobile-project-metrics a:not(:last-child) {
  border-right: 1px solid var(--mobile-line-soft);
}

body[data-app-surface="mobile"] .mobile-project-metrics b {
  color: #0878ed;
}

body[data-app-surface="mobile"] .mobile-project-metrics b.is-danger {
  color: var(--mobile-danger);
}

/* Filled, dimensional action icons from the local Font Awesome family. */
body[data-app-surface="mobile"] .mobile-quick-grid > a {
  min-height: 82px;
  border-radius: 12px;
}

body[data-app-surface="mobile"] .mobile-quick-grid > a .ui-icon,
body[data-app-surface="mobile"] .mobile-domain-entry > span,
body[data-app-surface="mobile"] .mobile-domain-function-grid > a > span,
body[data-app-surface="mobile"] .mobile-domain-kpis article > i {
  color: #fff;
  background: linear-gradient(145deg, #24a2ff, #076de1);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 26%), 0 7px 14px rgb(7 111 225 / 22%);
}

body[data-app-surface="mobile"] .mobile-quick-grid > a:nth-child(2) .ui-icon,
body[data-app-surface="mobile"] .mobile-domain-entry--quality > span,
body[data-app-surface="mobile"] .mobile-domain-entry--safety > span {
  background: linear-gradient(145deg, #27d69a, #079864);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 7px 14px rgb(8 155 102 / 20%);
}

body[data-app-surface="mobile"] .mobile-quick-grid > a:nth-child(3) .ui-icon,
body[data-app-surface="mobile"] .mobile-domain-entry--equipment > span {
  background: linear-gradient(145deg, #ffb22e, #ff7a00);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 7px 14px rgb(255 127 0 / 21%);
}

body[data-app-surface="mobile"] .mobile-quick-grid > a:nth-child(4) .ui-icon,
body[data-app-surface="mobile"] .mobile-domain-entry--material > span,
body[data-app-surface="mobile"] .mobile-domain-entry--document > span {
  background: linear-gradient(145deg, #8d7cff, #654be7);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 28%), 0 7px 14px rgb(101 75 231 / 20%);
}

body[data-app-surface="mobile"] .mobile-domain-function-grid > a > span,
body[data-app-surface="mobile"] .mobile-domain-entry > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 13px;
}

body[data-app-surface="mobile"] .mobile-domain-function-grid > a > span .ui-icon,
body[data-app-surface="mobile"] .mobile-domain-entry > span .ui-icon {
  color: #fff;
}

body[data-app-surface="mobile"] .mobile-domain-function-grid > a {
  border-color: var(--mobile-line);
  border-radius: 13px;
  background: #fff;
}

/* Native lists with photographic thumbnails and clearer state rhythm. */
body[data-app-surface="mobile"] .mobile-task-list > :where(a, button) {
  min-height: 76px;
  border-bottom-color: var(--mobile-line-soft);
}

body[data-app-surface="mobile"] .mobile-task-list b {
  color: var(--mobile-ink);
  font-weight: 700;
}

body[data-app-surface="mobile"] .mobile-card-list > article,
body[data-app-surface="mobile"] .mobile-project-list button,
body[data-app-surface="mobile"] .mobile-message-list {
  border-color: var(--mobile-line);
  border-radius: 13px;
  box-shadow: 0 4px 14px rgb(11 52 99 / 6%);
}

body[data-app-surface="mobile"] .el-tag--primary,
body[data-app-surface="mobile"] .el-tag--info {
  color: #0871dc;
  background: #eaf4ff;
}

body[data-app-surface="mobile"] .el-tag--success {
  color: #078553;
  background: #e8f8f1;
}

body[data-app-surface="mobile"] .el-tag--warning {
  color: #c86d00;
  background: #fff3df;
}

body[data-app-surface="mobile"] .el-tag--danger {
  color: #dd2f37;
  background: #ffebed;
}

/* Bottom navigation stays compact; AI is a premium filled action, not a line icon. */
body[data-app-surface="mobile"] .mobile-bottom-nav {
  border-top-color: #dce7f3;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 -8px 24px rgb(10 48 92 / 10%);
  backdrop-filter: blur(16px);
}

body[data-app-surface="mobile"] .mobile-bottom-nav > a {
  color: #7a8aa0;
}

body[data-app-surface="mobile"] .mobile-bottom-nav > a.is-active {
  color: #0878ed;
}

body[data-app-surface="mobile"] .mobile-bottom-nav > a:nth-child(3) > .ui-icon {
  color: #fff;
  background: linear-gradient(145deg, #24a2ff, #0668d7);
  box-shadow: 0 8px 18px rgb(7 111 225 / 30%);
}

/* Login follows the approved photo-led concept while preserving the real form. */
body[data-app-surface="mobile"] .login-shell.is-mobile-login {
  display: flex;
  min-height: 100dvh;
  flex-direction: column;
  background: #f5f8fc;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-brand-panel {
  position: relative;
  display: flex;
  min-height: 360px;
  padding: 30px 24px 42px;
  background-image: linear-gradient(180deg, rgb(6 70 147 / 22%), rgb(4 36 79 / 80%)), url("../assets/skyline-blue/site-hero.png");
  background-position: center;
  background-size: cover;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-brand-panel::before {
  display: none;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-brand {
  position: relative;
  z-index: 1;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-brand > span,
body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #27a8ff, #086ddd);
  box-shadow: 0 9px 20px rgb(0 74 163 / 28%);
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-message {
  position: relative;
  z-index: 1;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-message h1 {
  max-width: 290px;
  color: #fff;
  font-size: 30px;
  line-height: 1.28;
  text-shadow: 0 3px 12px rgb(0 28 64 / 32%);
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-panel {
  position: relative;
  z-index: 2;
  display: block;
  min-height: 0;
  margin-top: -26px;
  padding: 0 16px 24px;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-card {
  width: 100%;
  padding: 22px 18px;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 18px 42px rgb(6 43 88 / 18%);
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-card > header {
  margin-bottom: 18px;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-card > header h2 {
  color: var(--mobile-ink);
  font-size: 22px;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-card form {
  gap: 10px;
}

body[data-app-surface="mobile"] .login-shell.is-mobile-login .login-card form > .el-button {
  height: 48px;
  border-radius: 12px;
}

/* AI page: local portrait replaces the previously hidden generic avatar. */
body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"] .m-ai-first-open {
  overflow: hidden;
  border: 1px solid var(--mobile-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px rgb(7 58 119 / 8%);
}

body[data-app-surface="mobile"] .mobile-content[data-page-code="M70"] .m-ai-role-prompts > button {
  min-height: 56px;
  padding: 12px 14px;
}

body[data-app-surface="mobile"] .m-ai-domain-grid > button,
body[data-app-surface="mobile"] .m-ai-analysis-card,
body[data-app-surface="mobile"] .m-ai-chat > article {
  border-color: var(--mobile-line);
  border-radius: 14px;
  box-shadow: 0 5px 16px rgb(7 58 119 / 7%);
}

/* Overlays and sticky actions belong to the phone and stay above content. */
body[data-app-surface="mobile"] .el-overlay--mobile[data-source-layer="dialog"] .el-dialog--mobile {
  border-radius: 18px;
  box-shadow: 0 24px 70px rgb(3 29 64 / 30%);
}

body[data-app-surface="mobile"] :where(.mobile-page-actionbar, .mobile-sticky-actions, .mobile-sticky-action) {
  border-top: 1px solid #dce7f3;
  background: rgb(255 255 255 / 97%);
  box-shadow: 0 -8px 20px rgb(10 48 92 / 9%);
  backdrop-filter: blur(14px);
}

body[data-app-surface="mobile"] :where(.mobile-page-actionbar, .mobile-sticky-actions, .mobile-sticky-action) .el-button {
  height: 48px;
  border-radius: 11px;
}

@media (max-width: 430px) {
  body[data-app-surface="mobile"] .phone-frame {
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}