:root {
  --blue: #0875e8;
  --blue-dark: #0566d0;
  --green: #00c853;
  --ink: #25364a;
  --muted: #8492a5;
  --line: #e5ebf2;
  --surface: #ffffff;
  --bg: #f2f6fb;
  --orange: #ff6545;
}
* { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; background: var(--bg); }
body { margin: 0; color: var(--ink); background: var(--bg); font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; }
button { touch-action: manipulation; }
.mobile-app { position: relative; width: 100%; max-width: 560px; min-height: 100dvh; margin: 0 auto; padding-bottom: calc(84px + env(safe-area-inset-bottom)); overflow-x: clip; background: var(--bg); }
.mobile-header { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: calc(13px + env(safe-area-inset-top)) 18px 14px; color: #fff; background: linear-gradient(135deg, #0879ec 0%, #0668d9 72%, #075ab8 100%); box-shadow: 0 6px 22px rgba(6, 82, 164, .22); }
.mobile-brand { min-width: 0; display: flex; align-items: center; gap: 10px; }
.mobile-brand img { width: 48px; height: 38px; object-fit: contain; filter: brightness(0) invert(1); }
.mobile-brand strong, .mobile-brand span { display: block; }
.mobile-brand strong { font-size: 17px; letter-spacing: .4px; }
.mobile-brand span { max-width: 210px; margin-top: 3px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; opacity: .82; }
.header-action { flex: 0 0 auto; border: 1px solid rgba(255,255,255,.35); border-radius: 18px; padding: 7px 11px; color: #fff; background: rgba(255,255,255,.13); font-size: 12px; }
.view { display: none; width: 100%; min-width: 0; padding: 15px 14px 10px; }
.view.active { display: block; }
.score-hero { min-height: 118px; display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-radius: 18px; color: #fff; background: linear-gradient(130deg, #1683ef, #0567d7); box-shadow: 0 12px 28px rgba(23, 111, 217, .22); overflow: hidden; }
.score-hero > div:first-child { min-width: 0; flex: 1; }
.score-hero span, .score-hero strong { display: block; }
.score-hero span { font-size: 12px; opacity: .8; }
.score-hero strong { margin-top: 4px; font-size: clamp(34px, 11vw, 48px); line-height: 1; letter-spacing: -1.5px; }
.score-hero small { margin-left: 4px; font-size: 12px; opacity: .72; }
.score-ring { position: relative; width: 80px; height: 80px; flex: 0 0 80px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; }
.score-ring::before, .score-ring i { content: ""; position: absolute; border-radius: 50%; }
.score-ring::before { inset: 10px; border: 1px solid rgba(255,255,255,.4); }
.score-ring i { inset: 20px; background: rgba(63, 255, 162, .32); border: 2px solid #47ef9d; }
.score-ring b { position: relative; z-index: 1; font-size: 11px; }
.config-name-card { position: relative; margin-top: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(37,54,74,.04); }
.config-name-card label { display: block; margin-bottom: 7px; color: #66768a; font-size: 11px; }
.config-name-card input { width: 100%; height: 39px; border: 1px solid #dbe4ef; border-radius: 9px; padding: 0 11px; outline: none; color: var(--ink); background: #f9fbfe; font-size: 13px; }
.config-name-card input:focus { border-color: #378cf0; box-shadow: 0 0 0 3px rgba(55,140,240,.1); }
#editingBadge { display: inline-block; margin-top: 7px; color: #2b7edb; font-size: 10px; }
.section-heading, .page-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 3px 11px; }
.section-heading h1, .page-heading h1 { margin: 0; font-size: 16px; }
.section-heading p, .page-heading p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.section-heading > span { color: #718197; font-size: 11px; }
.selected-parts { min-width: 0; display: grid; gap: 9px; }
.selected-part { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 14px; padding: 12px; color: inherit; background: var(--surface); text-align: left; box-shadow: 0 4px 15px rgba(37,54,74,.04); }
.selected-part > span:nth-child(2) { min-width: 0; }
.selected-part:active { transform: scale(.992); background: #f8fbff; }
.part-badge { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; color: #237ddd; background: #edf5ff; font-size: 11px; font-weight: 700; }
.selected-part strong, .selected-part small, .selected-part em { display: block; }
.selected-part strong { max-width: 100%; overflow: hidden; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.selected-part small { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.selected-part em { margin-top: 5px; color: var(--orange); font-size: 10px; font-style: normal; font-weight: 700; }
.selected-part .change { color: #5590d2; font-size: 17px; }
.primary-actions { position: sticky; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 5; display: grid; grid-template-columns: .85fr 1.35fr; gap: 9px; margin-top: 15px; padding: 9px; border: 1px solid rgba(220,228,238,.9); border-radius: 16px; background: rgba(255,255,255,.92); box-shadow: 0 10px 28px rgba(40,58,82,.13); backdrop-filter: blur(12px); }
.primary-button, .secondary-button { min-height: 44px; border-radius: 10px; padding: 0 12px; font-size: 13px; font-weight: 700; }
.primary-button { border: 1px solid var(--blue); color: #fff; background: var(--blue); }
.secondary-button { border: 1px solid #d8e3ef; color: #3979c1; background: #fff; }
.primary-button:active, .secondary-button:active { transform: scale(.98); }
.page-heading { justify-content: flex-start; margin: 3px 0 15px; }
.back-build { width: 36px; height: 36px; border: 0; border-radius: 10px; color: #3a78bd; background: #e9f3ff; font-size: 27px; line-height: 1; }
.saved-configs { display: grid; gap: 10px; }
.saved-card { padding: 15px; border: 1px solid var(--line); border-radius: 15px; background: #fff; box-shadow: 0 5px 18px rgba(37,54,74,.05); }
.saved-card header { display: flex; justify-content: space-between; gap: 10px; }
.saved-card h2 { margin: 0; font-size: 14px; }
.saved-card time { color: var(--muted); font-size: 9px; }
.saved-summary { margin: 10px 0 12px; color: #748297; font-size: 10px; line-height: 1.7; }
.saved-actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 7px; }
.saved-actions button { min-height: 34px; border: 1px solid #dce6f1; border-radius: 8px; color: #3979c1; background: #fff; font-size: 11px; }
.saved-actions .apply { border-color: #2e85eb; color: #fff; background: #2e85eb; }
.saved-actions .delete { width: 38px; color: #d86b62; }
.empty-state { padding: 42px 18px; border: 1px dashed #d8e1ec; border-radius: 14px; color: var(--muted); background: rgba(255,255,255,.6); text-align: center; font-size: 12px; line-height: 1.7; }
.bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; width: 100%; max-width: 560px; height: calc(68px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); margin: 0 auto; padding: 7px 12px env(safe-area-inset-bottom); border-top: 1px solid #e1e8f0; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.bottom-nav button { border: 0; color: #8a97a8; background: transparent; font-size: 10px; }
.bottom-nav i, .bottom-nav span { display: block; font-style: normal; }
.bottom-nav i { margin-bottom: 3px; font-size: 21px; }
.bottom-nav button.active { color: var(--blue); font-weight: 700; }
dialog { color: var(--ink); font-family: inherit; }
dialog::backdrop { background: rgba(22,36,55,.48); backdrop-filter: blur(2px); }
.bottom-sheet { width: 100%; max-width: 560px; height: min(78dvh,720px); margin: auto auto 0; padding: 0 14px calc(12px + env(safe-area-inset-bottom)); overflow-x: hidden; border: 0; border-radius: 22px 22px 0 0; background: #fff; }
.bottom-sheet[open] { animation: sheetUp .2s ease-out; }
@keyframes sheetUp { from { transform: translateY(20%); opacity: .6; } }
.sheet-handle { width: 40px; height: 4px; margin: 8px auto 11px; border-radius: 3px; background: #d9e0e8; }
.bottom-sheet header, .screenshot-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.bottom-sheet h2, .screenshot-dialog h2 { margin: 0; font-size: 17px; }
.bottom-sheet header p, .screenshot-dialog header p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.sheet-close, .shot-close { width: 34px; height: 34px; border: 0; border-radius: 10px; color: #77879a; background: #f1f4f8; font-size: 22px; }
.mobile-search { height: 42px; display: flex; align-items: center; gap: 8px; margin-top: 13px; padding: 0 12px; border: 1px solid #dce5ef; border-radius: 11px; color: #7f8da0; background: #f8fafc; }
.mobile-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 13px; }
.mobile-categories { display: flex; gap: 7px; margin: 11px 0 9px; overflow-x: auto; scrollbar-width: none; }
.mobile-categories::-webkit-scrollbar { display: none; }
.mobile-categories button { flex: 0 0 auto; border: 1px solid #e0e7ef; border-radius: 16px; padding: 6px 11px; color: #718095; background: #fff; font-size: 11px; }
.mobile-categories button.active { border-color: #2f86ed; color: #1775df; background: #edf6ff; }
.mobile-parts-list { height: calc(100% - 142px); overflow: auto; padding-bottom: 18px; }
.mobile-part { width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 10px; border: 0; border-bottom: 1px solid #edf1f5; padding: 13px 5px; color: inherit; background: #fff; text-align: left; }
.mobile-part strong, .mobile-part small { display: block; }
.mobile-part strong { font-size: 12px; }
.mobile-part small { margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.mobile-part em { align-self: center; color: var(--orange); font-size: 10px; font-style: normal; font-weight: 700; }
.mobile-part.selected { background: #f1f7ff; }
.screenshot-dialog { width: min(94vw,680px); max-width: 680px; margin: auto; padding: 18px; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 20px 60px rgba(17,31,52,.28); }
.shot-preview { margin-top: 14px; overflow: hidden; border: 1px solid #dce4ed; border-radius: 11px; background: #eaf0f7; }
.shot-preview img { width: 100%; display: block; }
.save-tip { margin: 10px 2px 12px; color: #7f8da0; font-size: 10px; line-height: 1.5; }
.screenshot-dialog footer { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.mobile-toast { position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 50; max-width: calc(100vw - 32px); padding: 10px 15px; transform: translate(-50%,18px); border-radius: 9px; color: #fff; background: rgba(29,43,62,.94); font-size: 11px; opacity: 0; pointer-events: none; transition: .2s; }
.mobile-toast.show { transform: translate(-50%,0); opacity: 1; }
@media (min-width: 561px) {
  body { padding: 24px 0; }
  .mobile-app { min-height: calc(100dvh - 48px); border-radius: 22px; overflow: hidden; box-shadow: 0 20px 60px rgba(31,55,83,.14); }
  .bottom-nav { bottom: 24px; border-radius: 0 0 22px 22px; }
}