* {margin: 0;padding: 0;box-sizing: border-box;font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;}html, body {max-width: 100%;overflow-x: hidden;}body {background: #f5f9fc;min-height: 100vh;display: flex;justify-content: center;padding: 10px;}
    .container {max-width: 1200px;width: 100%;background: white;border-radius: 32px 32px 24px 24px;box-shadow: 0 20px 40px rgba(0, 20, 40, 0.08);overflow: hidden;padding: 24px 28px 32px;transition: all 0.2s;}
    .header {margin-bottom: 28px;border-bottom: 2px solid #e6f0fa;padding-bottom: 18px;}
    h1 {font-size: 2.2rem;font-weight: 700;-webkit-background-clip: text;background-clip: text;letter-spacing: -0.5px;margin-bottom: 12px;display: inline-block;line-height: 1.2;color: #0b4d8a;}
    .badge-container {display: flex;flex-wrap: wrap;gap: 12px 16px;margin: 16px 0 12px;align-items: center;background: linear-gradient(200deg, #004b97ad 0%, #cde3f5 100%);padding: 20px 28px 20px 28px;position: relative;border-radius:24px;}
    .badge {background: #e9f0f9;padding: 6px 16px;border-radius: 40px;font-size: 0.9rem;font-weight: 500;color: #135b9c;display: inline-flex;align-items: center;gap: 6px;border: 1px solid rgba(21, 94, 158, 0.15);}
	.badge a{color: #135b9c;text-decoration: none;}.badge span {font-size: 1.1rem;margin-right: 4px;}
    .platform-tag {background: #0b4d8a;color: white;border: none;padding: 4px 14px;}
    .intro-text {font-size: 1.02rem;line-height: 1.6;color: #1e3a5f;background: #f0f8ff;padding: 18px 22px;border-radius: 24px;margin: 16px 0 10px;border: 1px solid #cde3f5;}
    .intro-text strong {color: #0a4980;font-weight: 600;}
    .meta-row {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;margin-top: 16px;font-size: 0.95rem;color: #2f4858;}
    .meta-left {display: flex;flex-wrap: wrap;gap: 28px;}
    .meta-item {display: flex;align-items: center;gap: 6px;}
    .meta-item i {font-style: normal;background: #d4e3fd;width: 28px;height: 28px;border-radius: 50%;display: inline-flex;align-items: center;justify-content: center;color: #004b97;font-weight: 600;}
    .teacher,.honor,.foot {border-radius: 40px;padding: 4px 0px;font-weight: 500;line-height: 1.6em;}
    .section-title {font-size: 1.7rem;font-weight: 600;margin: 30px 0 20px 0;color: #0b3b5c;display: flex;align-items: center;gap: 12px;}
    .section-title span {background: #1f6fb5;color: white;padding: 4px 16px;border-radius: 50px;font-size: 1rem;font-weight: 400;}
    .experiment-grid {display: grid;grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));gap: 18px;margin: 20px 0 36px;}
    .exp-card {background: white;border-radius: 24px;padding: 18px 16px 16px 16px;box-shadow: 0 6px 16px rgba(0, 32, 64, 0.05);border: 1px solid #e2edf7;transition: all 0.2s ease;display: flex;flex-direction: column;border-top: 5px solid;position: relative;}
    .exp-card:hover {transform: translateY(-4px);box-shadow: 0 18px 30px -8px rgba(18, 83, 143, 0.2);border-color: #b9d9f0;}
    .exp-card.optics { border-top-color: #3b8cbf; }
    .exp-card.mechanics { border-top-color: #2b9c7a; }
    .exp-card.thermals { border-top-color: #e68a3d; }
    .exp-card.electromag { border-top-color: #a965b8; }
    .exp-number {font-size: 0.8rem;color: #7f9bb3;margin-bottom: 6px;letter-spacing: 0.3px;}
    .exp-name {font-size: 1.16rem;font-weight: 600;line-height: 1.4;margin-bottom: 12px;color: #0b2d4b;padding-right: 5px;}
    .exp-name a {text-decoration: none;color: inherit;display: inline-block;width: 100%;transition: color 0.1s;}
    .exp-name a:hover {text-decoration: underline;color: #0b4d8a;}
    .exp-category {align-self: flex-start;font-size: 0.75rem;font-weight: 600;padding: 4px 12px;border-radius: 50px;background: #eef4fa;color: #1d4f7a;text-transform: uppercase;letter-spacing: 0.4px;margin-top: 4px;border: 1px solid rgba(0,0,0,0.05);}
    .optics .exp-category { background: #d9ecfe; color: #1b5a93; }
    .mechanics .exp-category { background: #daf2e8; color: #1d6e55; }
    .thermals .exp-category { background: #ffead2; color: #b55c19; }
    .electromag .exp-category { background: #ecddf5; color: #76448a; }
    .footer {margin-top: 40px;background: #f2f8ff;border-radius: 28px;padding: 28px 30px;display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 24px;border: 1px solid #bdd6ec;}
    .db-info {flex: 2 1 260px;}
    .db-url {font-size: 1.4rem;font-weight: 600;background: white;display: inline-block;padding: 8px 24px;border-radius: 60px;box-shadow: 0 2px 8px rgba(0,60,120,0.1);margin: 12px 0 8px;border: 1px solid #b9d4ef;word-break: break-all;}
    .db-url a {text-decoration: none;color: #0a4c8c;}
    .qr-section {flex: 1 1 160px;text-align: center;background: white;border-radius: 32px;padding: 14px 14px 10px;box-shadow: 0 8px 22px rgba(0,30,60,0.08);}
    #qrcode {display: flex;justify-content: center;align-items: center;margin: 0 auto 6px;width: 130px;height: 130px;background: white;padding: 6px;border-radius: 18px;position: relative;}
    #qrcode img, #qrcode table, #qrcode .fallback-img {max-width: 100%;max-height: 100%;border-radius: 12px;}
    .qr-caption {font-size: 0.85rem;color: #1d456b;font-weight: 500;background: #e1effb;padding: 5px 8px;border-radius: 40px;width: fit-content;margin: 8px auto 0;}
    .fallback-img {width: 130px;height: 130px;object-fit: cover;border-radius: 12px;}
    .copyright {width: 100%;text-align: center;margin-top: 18px;color: #4a6885;font-size: 0.9rem;border-top: 1px dashed #b0cde0;padding-top: 22px;}.copyright strong {color: #103a60;}
    .icon-s { font-size: 1.2rem; vertical-align: middle; }.title-icon {font-size: 2rem;width: 50px;height: 50px;border-radius: 30px;display: flex;align-items: center;justify-content: center;}
        .stats-card {border-radius: 28px;color: #0a4c8c;display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 16px;}
        .stats-left h3 {font-size: 1rem;font-weight: 400;opacity: 0.9;letter-spacing: 0.5px;margin-bottom: 6px;}
        .stats-left .experiment-count {font-size: 2.8rem;font-weight: 800;line-height: 1;display: flex;align-items: baseline;}
        .experiment-count span {font-size: 1.1rem;font-weight: 400;margin-left: 6px;opacity: 0.8;}
        .qr-sim {background: #e6f0fa;border-radius: 24px;padding: 10px 16px;display: flex;align-items: center;gap: 12px;color: #1d3f5e;}
        .qr-icon {width: 60px;height: 60px;background: url(https://img.wkepu.cn/img/wuli6060.png) no-repeat;border-radius: 12px;}
        .qr-sim p {font-size: 0.8rem;font-weight: 600;}
        .online {display: inline-block;border-radius: 50%;position: relative;transform: translateZ(0);-webkit-backface-visibility: hidden;backface-visibility: hidden;width: 1.3rem;height: 1.3rem;margin-left: 10px;margin-right: 3px;}.online::before,.online::after {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255, 59, 48, 0.5);border-radius: 50%;opacity: 0.8;animation: ripple 2.4s infinite ease-out;}.online::after {animation-delay: 0.8s;}@keyframes ripple {0% { transform: scale(1); opacity: 0.6; }60% { transform: scale(2.5); opacity: 0; }100% { transform: scale(2.5); opacity: 0; } }
         .compat-warning {background: #ffebee;border-bottom: 1px solid #ffcdd2;color: #b71c1c;padding: 12px 24px;font-size: 0.95rem;display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap: 12px;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;position: relative;z-index: 100000;}
        .compat-warning {background: #ffebee;border-bottom: 1px solid #ffcdd2;color: #b71c1c;padding: 8px 12px;font-family: Arial, sans-serif;font-size: 12px;zoom: 1;}.warning-content {font-size: 16px;width: 100%;margin: 4px 0;}.warning-icon {float: left;margin-right: 8px;font-size: 16px;font-weight: bold;}.warning-text {overflow: hidden;line-height: 1.4;}.warning-text strong {color: #d32f2f;}.warning-buttons {float: right;margin: 4px 0;}.btn-switch {background: #d32f2f;color: white;border: none;padding: 4px 12px;margin-left: 8px;font-size: 12px;cursor: pointer;font-family: Arial, sans-serif;border-radius: 3px; }.btn-switch {background: #d32f2f;}.btn-switch:hover {background: #b71c1c;}
        .hidden {display: none !important;}.compat-warning:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}.compat-warning { *zoom: 1;}
    .exp-toolbar {display: flex;flex-wrap: wrap;gap: 12px 16px;align-items: center;justify-content: space-between;margin: -6px 0 6px;width: 100%;max-width: 100%;min-width: 0;box-sizing: border-box;}
    .search-box {position: relative;flex: 1 1 300px;display: flex;align-items: center;height: 50px;padding: 0 8px 0 18px;background: #fff;border: 1.5px solid #cde3f5;border-radius: 50px;box-shadow: 0 3px 10px rgba(0,60,120,0.05);transition: border-color .2s, box-shadow .2s;max-width: 100%;min-width: 0;box-sizing: border-box;overflow: hidden;}
    .search-box:focus-within {border-color: #1f6fb5;box-shadow: 0 0 0 4px rgba(31,111,181,0.13);}
    .search-icon {font-size: 1.05rem;line-height: 1;margin-right: 10px;flex: none;opacity: .75;}
    #expSearch {flex: 1 1 auto;min-width: 0;width: 100%;height: 100%;border: none;outline: none;background: transparent;font-size: 1rem;color: #0b2d4b;font-family: inherit;-webkit-appearance: none;appearance: none;border-radius: 0;}
    #expSearch::placeholder {color: #93aec4;}
    #expSearch::-webkit-search-cancel-button, #expSearch::-webkit-search-decoration {-webkit-appearance: none;appearance: none;display: none;}
    .search-clear {flex: none;width: 32px;height: 32px;border: none;border-radius: 50%;background: #e8f1f9;color: #4c7ba6;font-size: 0.9rem;line-height: 1;cursor: pointer;display: flex;align-items: center; justify-content: center;transition: background .18s, color .18s;}
    .search-clear:hover {background: #d3e6f7;color: #0b4d8a;}
    .search-clear[hidden] {display: none;}
    .filter-chips {display: flex;flex-wrap: wrap;gap: 8px;max-width: 100%;min-width: 0;box-sizing: border-box;}
    .chip {border: 1px solid #d5e6f5;background: #f6fafe;color: #2b6091;font-size: 0.86rem;font-weight: 500;padding: 7px 16px;border-radius: 40px;cursor: pointer;font-family: inherit;transition: all .18s ease;white-space: nowrap;}
    .chip:hover {background: #e8f2fb;border-color: #b9d9f0;}
    .chip.active {background: #1f6fb5;border-color: #1f6fb5;color: #fff;box-shadow: 0 4px 10px rgba(31,111,181,0.28);}
    .search-tip {font-size: 0.9rem;color: #52799c;margin: 0 0 14px;display: flex;align-items: center;gap: 8px;flex-wrap: wrap;}
    .search-tip strong {color: #0b4d8a;}
    .search-tip .reset-link {color: #1f6fb5;cursor: pointer;text-decoration: underline;background: none;border: none;font: inherit;padding: 0;}
    .exp-name mark {background: #fff2a8;color: #b3540a;border-radius: 4px;padding: 0 2px;font-weight: 700;}
    .empty-state {grid-column: 1 / -1;text-align: center;padding: 46px 20px;background: #f7fbff;border: 1.5px dashed #cde3f5;border-radius: 24px;color: #52799c;}
    .empty-state .empty-icon {font-size: 2.4rem;display: block;margin-bottom: 12px;opacity: .7;}
    .empty-state p {font-size: 1rem;margin-bottom: 16px;line-height: 1.6;}
    .empty-state strong {color: #0b4d8a;}
    .empty-reset {border: none;background: #1f6fb5;color: #fff;padding: 9px 22px;border-radius: 40px;font-size: 0.92rem;cursor: pointer;font-family: inherit;transition: background .18s;}
    .empty-reset:hover {background: #0b4d8a;}
    .intro-toggle {display: none;margin: 0 auto;background: none;border: none;color: #1f6fb5;font-size: 0.92rem;font-weight: 500;cursor: pointer;padding: 6px 12px;font-family: inherit;align-items: center;justify-content: center;gap: 4px;width: fit-content;}
    .intro-toggle:hover { color: #0b4d8a; text-decoration: underline; }
    .intro-toggle .arrow {display: inline-block;transition: transform 0.2s ease;font-size: 0.75rem;}
    .intro-toggle.expanded .arrow { transform: rotate(180deg); }
    .welcome-overlay {position: fixed;top: 0; right: 0; bottom: 0; left: 0;z-index: 99999;display: flex;align-items: center;justify-content: center;background: radial-gradient(circle at 50% 40%, #1a5a96 0%, #0b3b5c 55%, #072a44 100%);opacity: 1;transition: opacity 0.6s ease;overflow: hidden;padding: 20px;}
    .welcome-overlay.hide {opacity: 0;pointer-events: none;}
    .welcome-glow {position: absolute;top: 50%;left: 50%;width: 620px;height: 620px;margin: -310px 0 0 -310px;background: radial-gradient(circle, rgba(96, 174, 255, 0.2) 0%, rgba(96, 174, 255, 0) 65%);pointer-events: none;z-index: 0;animation: glowPulse 4s ease-in-out infinite;}
    @keyframes glowPulse {0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.15); opacity: 1; } }
    .formula-layer {position: absolute;top: 0; right: 0; bottom: 0; left: 0;pointer-events: none;overflow: hidden;z-index: 1;}
    .formula-layer span {position: absolute;left: var(--x, 50%);top: var(--y, 50%);font-family: Georgia, 'Times New Roman', serif;font-style: italic;font-size: 1.5rem;font-weight: 500;color: rgba(160, 210, 255, 0.2);white-space: nowrap;animation: formulaFloat var(--dur, 8s) ease-in-out infinite;animation-delay: var(--d, 0s);transform: translate(-50%, -50%);will-change: transform, opacity;}
    @keyframes formulaFloat {0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-4deg); opacity: 0.12; }50% { transform: translate(-50%, -50%) translateY(-22px) rotate(4deg); opacity: 0.34; } }
    .welcome-inner {position: relative;z-index: 2;text-align: center;max-width: 520px;width: 100%;}
    .atom-svg {width: 180px;height: 180px;display: block;margin: 0 auto 24px;animation: atomIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;}
    @keyframes atomIn {from { opacity: 0; transform: scale(0.6) rotate(-30deg); }to { opacity: 1; transform: scale(1) rotate(0deg); } }
    .welcome-title {font-size: 1.5rem;font-weight: 500;color: rgba(200, 230, 255, 0.85);margin-bottom: 10px;letter-spacing: 2px;animation: fadeUp 0.8s ease 0.35s both;}
    .welcome-title-main {display: block;font-size: 2rem;font-weight: 800;letter-spacing: 1px;margin-top: 8px;background: linear-gradient(100deg, #a0d8ff 0%, #ffd166 50%, #a0d8ff 100%);background-size: 200% auto;-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;animation: fadeUp 0.8s ease 0.5s both, shimmer 3s linear infinite 1.3s;}
    @keyframes shimmer {to { background-position: 200% center; } }
    @keyframes fadeUp {from { opacity: 0; transform: translateY(18px); }to { opacity: 1; transform: translateY(0); } }
    .welcome-subtitle {font-size: 0.95rem;color: rgba(160, 200, 240, 0.7);letter-spacing: 3px;margin-bottom: 32px;animation: fadeUp 0.8s ease 0.65s both;}
    .welcome-enter {display: inline-flex;align-items: center;gap: 8px;padding: 12px 32px;border: 1.5px solid rgba(160, 216, 255, 0.5);border-radius: 50px;background: rgba(255, 255, 255, 0.06);color: #c8e8ff;font-size: 1rem;font-weight: 500;font-family: inherit;cursor: pointer;backdrop-filter: blur(8px);-webkit-backdrop-filter: blur(8px);transition: all 0.25s ease;animation: fadeUp 0.8s ease 0.8s both;}
    .welcome-enter:hover {background: rgba(160, 216, 255, 0.15);border-color: rgba(160, 216, 255, 0.9);color: #fff;transform: translateY(-2px);box-shadow: 0 8px 24px rgba(96, 174, 255, 0.3);}
    .welcome-enter:active {transform: translateY(0);}
    @media (max-width: 600px) {.container { padding: 10px; }
      h1 { font-size: 1.8rem;}
      .meta-row { flex-direction: column; align-items: start; gap: 12px; }.meta-left { gap: 16px; }
      .footer { flex-direction: column; align-items: center; text-align: center; padding: 10px; }.db-url { font-size: 1.2rem; }.copyright{margin-top:0;padding-top:0;border-top:unset !important;}.db-info,.qr-section,.qr-sim{display:none;}.badge {padding: 4px !important; gap: 0px !important; }.badge span {margin-right: 0px !important;}
      .exp-toolbar {flex-direction: column;align-items: stretch;gap: 10px;width: 100%;max-width: 100%;min-width: 0;}
      .search-box {flex: 1 1 auto;width: 100%;max-width: 100%;height: 46px;padding-left: 14px;padding-right: 6px;box-sizing: border-box;}
      #expSearch {width: 100%;min-width: 0;font-size: 16px;}
      .filter-chips {width: 100%;max-width: 100%;min-width: 0;overflow-x: auto;flex-wrap: nowrap;padding-bottom: 4px;-webkit-overflow-scrolling: touch;scrollbar-width: none;box-sizing: border-box;}
      .filter-chips::-webkit-scrollbar {display: none;}
      .chip {flex: none;font-size: 0.82rem;padding: 6px 14px;}
      .section-title {margin: 22px 0 14px;}
      .intro-text {padding: 4px 16px;margin: 12px 0 8px;font-size: 0.95rem;line-height: 1.55;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;transition: all 0.2s ease;position: relative;}
      .intro-text.expanded { -webkit-line-clamp: unset;display: block;overflow: visible;}
      .intro-text:not(.expanded)::after {content: '';position: absolute;right: 0;bottom: 0;width: 50px;height: 100%;background: linear-gradient(to right, rgba(240,248,255,0), #f0f8ff);pointer-events: none;}
      .intro-toggle { display: flex; }
      .atom-svg { width: 140px; height: 140px; margin-bottom: 18px; }
      .welcome-title { font-size: 1.2rem; letter-spacing: 1px; }
      .welcome-title-main { font-size: 1.55rem; }
      .welcome-subtitle { font-size: 0.82rem; letter-spacing: 2px; margin-bottom: 26px; }
      .welcome-enter { padding: 11px 26px; font-size: 0.95rem; }
      .formula-layer span { font-size: 1.15rem; }
    }
    @media (prefers-reduced-motion: reduce) {.welcome-overlay,.welcome-overlay *,.welcome-overlay *::before,.welcome-overlay *::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;}
    }
    
/* ---------- 最近使用 ---------- */
.recent-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 12px;
  background: #f0f8ff;
  border: 1px solid #cde3f5;
  border-radius: 20px;
  padding: 10px 16px;
  margin: 0 0 16px 0;
  font-size: 0.92rem;
}
.recent-bar[hidden] { display: none !important; }
.recent-label {
  color: #2b6091;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
}
.recent-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.recent-item {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #cde3f5;
  color: #0b4d8a;
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 40px;
  font-size: 0.86rem;
  transition: all .18s ease;
  white-space: nowrap;
}
.recent-item:hover {
  background: #1f6fb5;
  border-color: #1f6fb5;
  color: #fff;
  transform: translateY(-1px);
}
.recent-clear {
  flex: none;
  background: none;
  border: none;
  color: #52799c;
  font-size: 0.84rem;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 20px;
  font-family: inherit;
  transition: all .18s ease;
}
.recent-clear:hover { color: #b71c1c; background: #ffebee; }
@media (max-width: 720px) {
  .badge-container {justify-content: center;padding: 14px 16px;gap: 8px 10px;text-align: center;}.recent-bar { display:none !important; }
}