/* Unified visual system for the merged student project. */
:root {
  --app-primary: #C7000B;
  --app-primary-dark: #A6000A;
  --app-primary-soft: #FDEFF0;
  --app-accent: #E95532;
  --app-success: #00B578;
  --app-success-soft: #EAF9F4;
  --app-warning: #F59E0B;
  --app-warning-soft: #FFF7E8;
  --app-danger: #EF4444;
  --app-danger-soft: #FFF1F1;
  --app-bg: #F5F6F8;
  --app-surface: #FFFFFF;
  --app-surface-soft: #FAFBFC;
  --app-text: #111418;
  --app-text-muted: #5F6672;
  --app-text-faint: #9AA0AA;
  --app-border: #E8ECF1;
  --app-radius-sm: 10px;
  --app-radius-md: 14px;
  --app-radius-lg: 18px;
  --app-shadow: 0 8px 24px rgba(17, 20, 24, .08);
  --app-shadow-soft: 0 2px 10px rgba(17, 20, 24, .05);

  --huawei-red: var(--app-primary);
  --huawei-red-light: var(--app-primary-soft);
  --primary: var(--app-primary);
  --primary-light: var(--app-primary-soft);
  --primary-dark: var(--app-primary-dark);
  --hw-red: var(--app-primary);
  --hw-red-2: var(--app-primary);
  --hw-red-bg: var(--app-primary-soft);
  --accent: var(--app-primary);
  --accent-soft: var(--app-primary-soft);
  --bg: var(--app-bg);
  --card: var(--app-surface);
  --card-bg: var(--app-surface);
  --panel: var(--app-surface);
  --bg-card: var(--app-surface);
  --ink: var(--app-text);
  --text: var(--app-text);
  --text-1: var(--app-text);
  --text-primary: var(--app-text);
  --muted: var(--app-text-muted);
  --text-2: var(--app-text-muted);
  --text-secondary: var(--app-text-muted);
  --text-3: var(--app-text-faint);
  --text-tertiary: var(--app-text-faint);
  --line: var(--app-border);
  --border: var(--app-border);
  --radius: var(--app-radius-md);
  --radius-sm: var(--app-radius-sm);
  --radius-md: var(--app-radius-md);
  --radius-lg: var(--app-radius-lg);
  --shadow: var(--app-shadow);
  --shadow-card: var(--app-shadow-soft);
  --shadow-pop: 0 12px 32px rgba(17, 20, 24, .16);
  --success: var(--app-success);
  --success-light: var(--app-success-soft);
  --solved: var(--app-success);
  --solved-bg: var(--app-success-soft);
  --warning: var(--app-warning);
  --urgent: var(--app-accent);
  --urgent-bg: #FFF4EC;
  --danger: var(--app-danger);
}

* {
  letter-spacing: 0 !important;
}

body.page-index,
body.page-devices,
body.page-feedback,
body.page-analysis {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "HarmonyOS Sans", "Microsoft YaHei", sans-serif;
  background:
    radial-gradient(circle at 50% 0%, rgba(199, 0, 11, .13), transparent 28%),
    linear-gradient(135deg, #E7E9ED 0%, #CFD4DB 100%);
  color: var(--app-text);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 24px 16px;
}

body.page-index .phone-frame,
body.page-feedback .phone-frame,
body.page-analysis .phone,
body.page-devices .phone-frame {
  width: 390px;
  max-width: min(390px, calc(100vw - 32px));
  height: 780px;
  max-height: calc(100vh - 48px);
  background: var(--app-bg);
  border-radius: 44px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 12px #17191F,
    0 0 0 13px #343842,
    0 28px 70px rgba(0, 0, 0, .30),
    0 10px 28px rgba(0, 0, 0, .18);
}

body.page-index .phone-frame::before,
body.page-feedback .phone-frame::before,
body.page-analysis .phone::before,
body.page-devices .phone-frame::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 118px;
  height: 28px;
  transform: translateX(-50%);
  background: #17191F;
  border-radius: 0 0 18px 18px;
  z-index: 200;
}

body.page-devices .screen {
  height: 100%;
  border-radius: 36px;
}

body.page-index .appbar,
body.page-devices .status-bar,
body.page-devices .app-header,
body.page-feedback .navbar,
body.page-analysis .statusbar,
body.page-analysis .app-header {
  background: var(--app-primary);
  color: #fff;
}

body.page-index .appbar {
  height: 64px;
  padding-top: 10px;
  box-shadow: none;
}

body.page-index .appbar h1,
body.page-feedback .nav-title,
body.page-devices .app-title h1,
body.page-analysis .ah-title {
  font-size: 17px;
  font-weight: 750;
  line-height: 1.25;
}

body.page-index .appbar .back,
body.page-feedback .nav-back {
  min-width: 36px;
  height: 36px;
  border-radius: 10px;
}

body.page-feedback .navbar {
  height: 72px;
  padding: 26px 18px 0;
  border-bottom: none;
  box-shadow: none;
}

body.page-feedback .nav-title,
body.page-feedback .nav-back,
body.page-feedback .nav-crumb,
body.page-feedback .nav-crumb b {
  color: #fff;
}

body.page-feedback .nav-crumb {
  color: rgba(255, 255, 255, .78);
}

body.page-feedback .nav-back:hover {
  background: rgba(255, 255, 255, .14);
}

body.page-devices .app-header {
  padding: 8px 18px 16px;
}

body.page-devices .status-bar {
  padding: 14px 26px 8px;
}

body.page-devices .status-icons svg,
body.page-devices .status-icons svg * {
  color: #fff;
  fill: #fff;
  stroke: #fff;
}

body.page-devices .logo {
  width: 50px;
  height: 34px;
  flex: 0 0 50px;
  border-radius: 12px;
  background: #fff;
  color: var(--app-primary);
  font-size: 10px;
  font-weight: 800;
  overflow: hidden;
}

body.page-devices .app-title p {
  color: rgba(255, 255, 255, .78);
}

body.page-devices .header-icon {
  background: rgba(255, 255, 255, .16);
  color: #fff;
  box-shadow: none;
}

body.page-devices .header-icon svg,
body.page-devices .header-icon svg * {
  stroke: #fff;
}

body.page-analysis .statusbar {
  height: 44px;
}

body.page-analysis .app-header {
  padding: 12px 16px 14px;
}

body.page-index .dots,
body.page-analysis .progress {
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-border);
}

body.page-index .dots {
  padding: 12px 0 10px;
}

body.page-index .scroll,
body.page-devices .content,
body.page-feedback .container,
body.page-analysis .content {
  background: var(--app-bg);
  scrollbar-width: none;
}

body.page-index .screen {
  padding: 22px 18px 28px;
}

body.page-index .screen h2,
body.page-feedback .view-title {
  font-size: 21px;
  line-height: 1.3;
  color: var(--app-text);
}

body.page-index .screen .sub,
body.page-feedback .view-desc,
body.page-devices .app-title p,
body.page-analysis .ah-sub {
  color: var(--app-text-muted);
  font-size: 13px;
}

body.page-analysis .ah-sub {
  color: rgba(255, 255, 255, .82);
}

body.page-index .card,
body.page-devices .product-card,
body.page-feedback .list-card,
body.page-feedback .form-card,
body.page-feedback .selected-summary,
body.page-analysis .context-card,
body.page-analysis .detail-card,
body.page-analysis .count-card,
body.page-analysis .ps-card,
body.page-index .result {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-md);
  box-shadow: var(--app-shadow-soft);
}

body.page-index .card {
  min-height: 142px;
  padding: 20px 12px;
}

body.page-index .card.selected,
body.page-devices .product-card.selected,
body.page-analysis .ps-card.active {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 2px rgba(199, 0, 11, .08), var(--app-shadow);
  background: #FFF9FA;
}

body.page-index .card .ico,
body.page-feedback .item-icon,
body.page-feedback .summary-icon,
body.page-feedback .upload-icon,
body.page-analysis .context-card .cc-icon,
body.page-analysis .psc-icon,
body.page-feedback .success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--app-primary-soft);
  color: var(--app-primary);
  flex-shrink: 0;
}

body.page-index .card .ico {
  width: 52px;
  height: 52px;
  font-size: 28px;
}

body.page-feedback .item-icon {
  width: 42px;
  height: 42px;
  font-size: 22px;
}

body.page-feedback .summary-icon,
body.page-analysis .context-card .cc-icon {
  width: 44px;
  height: 44px;
  font-size: 21px;
}

body.page-analysis .psc-icon {
  width: 30px;
  height: 30px;
  font-size: 16px;
}

body.page-index .card .name,
body.page-devices .product-name,
body.page-feedback .item-name,
body.page-analysis .dc-title {
  font-weight: 700;
  color: var(--app-text);
}

body.page-index .card .desc,
body.page-devices .product-desc,
body.page-feedback .summary-note,
body.page-analysis .dc-sub {
  color: var(--app-text-muted);
}

body.page-devices .banner {
  border-radius: var(--app-radius-lg);
  background: linear-gradient(135deg, #C7000B 0%, #9F0010 100%);
  box-shadow: 0 10px 24px rgba(199, 0, 11, .20);
}

body.page-devices .banner::after {
  display: none;
}

body.page-devices .search-bar,
body.page-feedback .search-box,
body.page-feedback textarea {
  background: var(--app-surface);
  border: 1px solid var(--app-border);
  border-radius: var(--app-radius-sm);
  box-shadow: none;
}

body.page-feedback .search-box:focus-within,
body.page-feedback textarea:focus {
  border-color: var(--app-primary);
  box-shadow: 0 0 0 3px rgba(199, 0, 11, .08);
}

body.page-devices .tag,
body.page-index .chip,
body.page-analysis .context-card .cc-chip,
body.page-analysis .urgent-chip,
body.page-analysis .step-tip,
body.page-devices .product-model,
body.page-devices .modal-title .modal-model {
  border-radius: 999px;
}

body.page-devices .tag.active,
body.page-index .dot.on,
body.page-index .dot.done,
body.page-analysis .dot.on,
body.page-analysis .p-step.current .p-dot {
  background: var(--app-primary);
}

body.page-index button.act,
body.page-devices .flow-btn.next,
body.page-devices .select-btn,
body.page-devices .buy-btn,
body.page-devices .modal-buy,
body.page-feedback .btn-primary,
body.page-feedback .install-btn,
body.page-analysis .ba-btn.primary {
  background: var(--app-primary);
  color: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(199, 0, 11, .20);
  font-weight: 700;
}

body.page-index button.act.secondary,
body.page-devices .flow-btn.back,
body.page-devices .more-btn,
body.page-feedback .btn-outline,
body.page-analysis .ba-btn.secondary {
  background: var(--app-surface);
  color: var(--app-primary);
  border: 1px solid rgba(199, 0, 11, .22);
  border-radius: 12px;
  box-shadow: none;
  font-weight: 700;
}

body.page-devices .flow-btn.next:disabled {
  background: #D7DBE0;
  color: #8A9099;
  box-shadow: none;
}

body.page-feedback .btn-primary:disabled {
  background: #D7DBE0;
  color: #8A9099;
  box-shadow: none;
  cursor: not-allowed;
}

body.page-feedback .bottom-bar,
body.page-devices .bottom-bar,
body.page-analysis .bottom-bar,
body.page-index .footer {
  background: rgba(255, 255, 255, .94);
  border-top: 1px solid var(--app-border);
  box-shadow: 0 -8px 24px rgba(17, 20, 24, .06);
  backdrop-filter: blur(12px);
}

body.page-feedback .bottom-bar {
  padding: 12px 16px 16px;
  border-radius: 0 0 36px 36px;
}

body.page-analysis .bottom-bar {
  padding: 10px 16px 24px;
}

body.page-devices .bottom-bar {
  padding: 10px 14px 22px;
}

body.page-feedback .selected-summary {
  background: #FFF9FA;
  border-color: #F5D4D8;
}

body.page-feedback .summary-path {
  color: var(--app-primary);
}

body.page-feedback .upload-zone {
  border-radius: var(--app-radius-md);
  border-color: var(--app-border);
  background: var(--app-surface-soft);
}

body.page-feedback .upload-zone:hover,
body.page-feedback .upload-zone.dragover {
  border-color: var(--app-primary);
  background: var(--app-primary-soft);
}

body.page-analysis .progress {
  padding: 12px 18px;
}

body.page-analysis .p-step.done .p-dot,
body.page-analysis .tl-item.done .tl-dot,
body.page-analysis .step-num {
  background: var(--app-success);
}

body.page-analysis .p-line.done,
body.page-analysis .step-item:not(:last-child)::after {
  background: var(--app-success);
}

body.page-analysis .dc-head.urgent .dc-status-icon,
body.page-analysis .count-card {
  background: #FFF8F4;
  border-color: #FFE0CF;
}

body.page-analysis .ba-btn.urgent-b {
  background: var(--app-accent);
  box-shadow: 0 8px 18px rgba(233, 85, 50, .20);
}

body.page-index .installbar,
body.page-feedback .install-banner {
  background: rgba(17, 20, 24, .92);
  color: #fff;
}

body.page-index .installbar .go {
  background: #fff;
  color: var(--app-primary);
}

body.page-index .installbar .no,
body.page-feedback .install-close {
  color: rgba(255, 255, 255, .72);
}

.toast {
  border-radius: 999px !important;
}

@media (max-width: 479px) {
  body.page-index,
  body.page-devices,
  body.page-feedback,
  body.page-analysis {
    padding: 0;
    background: var(--app-bg);
  }

  body.page-index .phone-frame,
  body.page-feedback .phone-frame,
  body.page-analysis .phone,
  body.page-devices .phone-frame {
    width: 100vw;
    max-width: none;
    height: 100vh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
  }

  body.page-index .phone-frame::before,
  body.page-feedback .phone-frame::before,
  body.page-analysis .phone::before,
  body.page-devices .phone-frame::before {
    display: none;
  }

  body.page-devices .screen {
    border-radius: 0;
  }

  body.page-feedback .bottom-bar {
    border-radius: 0;
  }
}