/* ============================================================
   JUPAS 2026 — Shared Design System
   Light Theme · Clean & Professional
   Fonts: Poppins (heading) + Inter (body)
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---- Design Tokens ---- */
:root{
  /* Background — pure white */
  --bg-base:#ffffff;
  --bg-surface:#ffffff;
  --bg-gradient:#ffffff;

  /* Card & surface */
  --glass-bg:#ffffff;
  --glass-bg-hover:#ffffff;
  --glass-bg-subtle:#ffffff;
  --glass-border:#e2e6ed;
  --glass-border-hover:#c8cfd9;
  --glass-blur:0px;
  --glass-shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);
  --glass-shadow-lg:0 4px 12px rgba(0,0,0,0.08);

  /* Text */
  --ink:#2d3748;
  --ink-bright:#1a202c;
  --muted:#718096;
  --muted-light:#4a5568;

  /* Accents */
  --accent-teal:#0d9488;
  --accent-teal-soft:rgba(13,148,136,0.08);
  --accent-indigo:#5b6abf;
  --accent-indigo-soft:rgba(91,106,191,0.08);
  --accent-gold:#d97706;
  --accent-gold-soft:rgba(217,119,6,0.08);
  --brand:#0d9488;
  --brand-soft:rgba(13,148,136,0.08);
  --gold:#d97706;

  /* Status */
  --ok:#16a34a;
  --ok-soft:rgba(22,163,74,0.08);
  --bad:#dc2626;
  --bad-soft:rgba(220,38,38,0.08);
  --warn:#d97706;
  --warn-soft:rgba(217,119,6,0.08);

  /* Line */
  --line:#e8ecf1;
  --line-strong:#d1d8e0;

  /* Card */
  --card:#ffffff;

  /* Radius */
  --radius:10px;
  --radius-md:7px;
  --radius-sm:5px;
  --radius-xs:3px;

  /* Shadow */
  --shadow:var(--glass-shadow);
  --shadow-lg:var(--glass-shadow-lg);

  /* Fonts */
  --font-heading:'Poppins','Microsoft YaHei','PingFang SC',system-ui,sans-serif;
  --font-body:'Inter','Microsoft YaHei','PingFang SC',system-ui,sans-serif;
}

/* ---- Reset & Base ---- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#fff}
body{
  font-family:var(--font-body);
  background:#fff;
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  min-height:100vh;
  position:relative;
}
body::before,body::after{display:none}

button,input,select,textarea{font:inherit;color:inherit}
option{background:#fff;color:var(--ink)}
optgroup{background:#fff;color:var(--ink)}
option:hover{background:#f0f2f5}
a{color:var(--accent-teal);text-decoration:none}
a:hover{opacity:.85}
h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);color:var(--ink-bright);letter-spacing:-.2px}
::selection{background:rgba(13,148,136,.15);color:var(--ink-bright)}

/* ---- Scrollbar ---- */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,0,0,.12);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.2)}

/* ---- Hero Section ---- */
.hero{
  padding:32px 28px 72px;
  background:#ffffff;
  color:var(--ink);position:relative;overflow:hidden;
  border-bottom:1px solid var(--line);
}
.hero::before,.hero::after{display:none}
.hero-inner{max-width:1420px;margin:0 auto;position:relative;z-index:1}

/* Brand logo — inside hero, right side */
.brand-logo{
  position:absolute;top:0;right:0;
}
.brand-logo img{height:72px;width:auto;display:block}
@media(max-width:1600px){
  /* 中窄屏下hero内容区右边缘贴近视口右侧，logo左移避让固定的语言切换按钮(right:18px) */
  .brand-logo{right:64px}
}
@media(max-width:760px){
  /* 手机端logo改为正常文档流(左上角)小尺寸，布局更紧凑 */
  .brand-logo{position:static;margin:0 0 14px}
  .brand-logo img{height:40px}
}

/* Hero nav links */
.hero-nav{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.hero-nav a{
  display:inline-flex;align-items:center;gap:5px;
  padding:7px 14px;border-radius:var(--radius-sm);
  background:var(--accent-teal);color:#fff;
  font-size:12px;font-weight:600;text-decoration:none;
  transition:opacity .15s;
}
.hero-nav a:hover{opacity:.85}
.hero-nav a.secondary{
  background:#fff;color:var(--ink);
  border:1px solid var(--glass-border);
}
.hero-nav a.secondary:hover{border-color:var(--glass-border-hover);background:var(--glass-bg-subtle)}
.hero-nav a svg{width:14px;height:14px;flex-shrink:0}

/* Brand footer */
.brand-footer{
  max-width:1420px;margin:32px auto 48px;padding:20px 20px 0;
  text-align:center;border-top:1px solid var(--line);
}
.brand-footer p{color:var(--muted);font-size:12px;line-height:1.8}
.brand-footer a{color:var(--accent-teal);font-weight:600;text-decoration:none}
.brand-footer a:hover{text-decoration:underline}

.hero h1{
  font-family:var(--font-heading);font-size:clamp(22px,3.2vw,30px);
  font-weight:700;margin:12px 0 8px;letter-spacing:-.3px;
  color:var(--ink-bright);
}
.hero p{max-width:680px;color:var(--muted);font-size:13px;line-height:1.85}

/* Hero badge / eyebrow */
.eyebrow,.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  padding:4px 10px;border-radius:4px;
  background:var(--accent-teal-soft);
  border:1px solid rgba(13,148,136,.15);
  font-size:10px;font-weight:600;letter-spacing:.4px;color:var(--accent-teal);
  text-transform:uppercase;
}
.hero-badge .dot,.state-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent-gold);
}
.hero-badge.synced .dot,.state-pill.live .state-dot{
  background:var(--ok);
}

/* Hero stats / state pills */
.source-state,.hero-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.state-pill,.hero-stat{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--radius-sm);
  background:var(--glass-bg-subtle);
  border:1px solid var(--glass-border);
  font-size:11px;font-weight:500;color:var(--muted);
}
.hero-stat strong{display:block;font-family:var(--font-heading);font-size:15px;color:var(--ink-bright)}
.hero-stat span{font-size:10px;color:var(--muted)}

/* ---- Glass Card ---- */
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-border);
  border-radius:var(--radius);
  box-shadow:var(--glass-shadow);
  transition:border-color .2s;
}
.card:hover{border-color:var(--glass-border-hover)}

/* ---- Tab Navigation ---- */
.tabs-card,.uni-tabs{
  padding:6px;margin-bottom:16px;overflow:auto;
  -webkit-overflow-scrolling:touch;
}
.tabs,.tabs-inner{
  display:grid;grid-template-columns:repeat(8,minmax(110px,1fr));
  gap:4px;min-width:880px;
}
.tab,.uni-tab{
  border:0;background:transparent;color:var(--muted);
  border-radius:var(--radius-md);padding:12px 8px;
  cursor:pointer;text-align:center;transition:all .15s;
}
.tab:hover,.uni-tab:hover{
  background:var(--glass-bg-subtle);color:var(--ink);
}
.tab.active,.uni-tab.active{
  background:var(--accent-teal);
  color:#fff;
}
.tab strong,.uni-tab .tab-abbr{display:block;font-family:var(--font-heading);font-size:13px;font-weight:700}
.tab small,.uni-tab .tab-count{display:block;margin-top:3px;opacity:.7;font-size:11px}
.uni-tab .tab-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-bottom:2px}

/* ---- Form Controls ---- */
.control{
  width:100%;height:40px;
  border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  background:#ffffff;
  padding:0 12px;color:var(--ink);outline:none;
  transition:border-color .15s,box-shadow .15s;
  font-size:13px;
}
.control:focus{
  border-color:var(--accent-teal);
  box-shadow:0 0 0 2px rgba(13,148,136,.10);
}
.control::placeholder{color:var(--muted)}
select.control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}

/* ---- Buttons ---- */
.btn{
  border:0;border-radius:var(--radius-sm);padding:9px 16px;
  font-weight:600;cursor:pointer;transition:all .15s;
  font-size:13px;display:inline-flex;align-items:center;gap:6px;
}
.btn-primary{
  background:var(--accent-teal);
  color:#fff;
}
.btn-primary:hover{opacity:.88}
.btn-soft{
  background:var(--accent-teal-soft);color:var(--accent-teal);
  border:1px solid rgba(13,148,136,.18);
}
.btn-soft:hover{background:rgba(13,148,136,.12)}
.btn-ghost{
  background:var(--glass-bg-subtle);color:var(--muted-light);
  border:1px solid var(--glass-border);
}
.btn-ghost:hover{background:#edf0f4;color:var(--ink)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ---- Status Indicators ---- */
.status{
  margin:16px 20px 0;padding:10px 14px;
  border-radius:var(--radius-sm);font-weight:600;font-size:13px;
}
.status.ok{background:var(--ok-soft);color:var(--ok);border:1px solid rgba(22,163,74,.15)}
.status.bad{background:var(--bad-soft);color:var(--bad);border:1px solid rgba(220,38,38,.15)}

/* ---- Toast ---- */
.toast{
  position:fixed;right:20px;bottom:20px;z-index:20;
  background:var(--ink-bright);
  color:#fff;border-radius:var(--radius-sm);
  padding:10px 16px;
  box-shadow:0 4px 16px rgba(0,0,0,.12);
  transform:translateY(100px);opacity:0;transition:.25s;
  font-size:13px;
}
.toast.show{transform:none;opacity:1}

/* ---- Footer ---- */
.footer-note,.footer{
  max-width:1420px;margin:-24px auto 40px;padding:0 20px;
  color:var(--muted);font-size:12px;line-height:1.8;
}
.footer{text-align:center}
.footer a{color:var(--accent-teal);font-weight:600}

/* ---- Utility ---- */
.empty{font-size:12px;color:var(--muted);padding:8px 0}
.check-ok{color:var(--ok);font-weight:700}
.check-bad{color:var(--bad);font-weight:700}

/* ---- Loading Spinner ---- */
.loading{padding:80px 20px;text-align:center}
.loading-spinner{
  width:36px;height:36px;
  border:3px solid var(--glass-border);
  border-top-color:var(--accent-teal);
  border-radius:50%;
  animation:spin .7s linear infinite;
  margin:0 auto 16px;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-text{color:var(--muted);font-size:14px}

/* ---- Error Box ---- */
.error-box{padding:40px 28px;text-align:center}
.error-box .error-icon{font-size:48px;margin-bottom:12px}
.error-box h3{font-family:var(--font-heading);font-size:18px;margin-bottom:8px}
.error-box p{color:var(--muted);font-size:13px;line-height:1.7}
.error-box .retry-btn{
  margin-top:16px;padding:9px 22px;border:0;
  border-radius:var(--radius-sm);
  background:var(--accent-teal);
  color:#fff;font-weight:600;cursor:pointer;transition:opacity .15s;
}
.error-box .retry-btn:hover{opacity:.88}

/* ---- Language Toggle ---- */
.lang-toggle{
  position:fixed;top:14px;right:18px;z-index:50;
  padding:5px 12px;border:1px solid var(--glass-border);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);font-size:12px;font-weight:600;letter-spacing:.4px;
  cursor:pointer;transition:all .15s;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.lang-toggle:hover{background:#fff;border-color:var(--glass-border-hover)}

/* ---- Responsive Shared ---- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}