/* ===================================================================
   博仕港 · 学生端高保真原型 · 全局设计系统
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root{
  /* ---- 品牌色：靛墨蓝（专业/信任） ---- */
  --c-primary-900:#1C1B4E;
  --c-primary-700:#2E3192;
  --c-primary-600:#3A3DB8;
  --c-primary-500:#4B4FD1;
  --c-primary-100:#E7E7FB;
  --c-primary-50:#F3F3FD;

  /* ---- 强调色：活力橙（任务/行动） ---- */
  --c-accent-600:#E6541C;
  --c-accent-500:#FF6B35;
  --c-accent-400:#FF8F65;
  --c-accent-100:#FFE7DB;

  /* ---- AI 专属：紫青渐变（科技感） ---- */
  --c-ai-1:#7C3AED;
  --c-ai-2:#06B6D4;

  /* ---- 成长色：松石绿（社区/成长） ---- */
  --c-growth-600:#0B8F5C;
  --c-growth-500:#0EA86B;
  --c-growth-100:#DFF7EC;

  /* ---- 中性色 ---- */
  --c-bg:#F5F6FB;
  --c-surface:#FFFFFF;
  --c-text:#15162B;
  --c-text-2:#6E7191;
  --c-text-3:#A0A3BD;
  --c-border:#EAEAF4;
  --c-warning:#FFB020;
  --c-danger:#F5523D;

  --font-display:'Outfit','PingFang SC','Helvetica Neue',sans-serif;
  --font-body:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',sans-serif;

  --radius-phone:60px;
}

*{box-sizing:border-box;}
body{font-family:var(--font-body);background:var(--c-bg);color:var(--c-text);}
.font-display{font-family:var(--font-display);}
::-webkit-scrollbar{display:none;}
*{scrollbar-width:none;}

/* =========================== iPhone 机身 =========================== */
.iphone-frame{
  position:relative;
  width:393px;
  height:852px;
  background:#0B0B12;
  border-radius:var(--radius-phone);
  padding:14px;
  box-shadow:0 0 0 2px #2b2b35, 0 30px 60px -15px rgba(20,20,50,.35), 0 10px 20px -5px rgba(20,20,50,.2);
  flex-shrink:0;
}
.iphone-frame .screen{
  position:relative;
  width:100%;
  height:100%;
  background:var(--c-bg);
  border-radius:46px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.dynamic-island{
  position:absolute;
  top:14px; left:50%; transform:translateX(-50%);
  width:114px; height:34px;
  background:#000;
  border-radius:20px;
  z-index:50;
}
.iphone-frame .side-btn{position:absolute;background:#1c1c24;}
.iphone-frame .btn-mute{width:3px;height:32px;left:-3px;top:118px;border-radius:3px 0 0 3px;}
.iphone-frame .btn-vol-up{width:3px;height:58px;left:-3px;top:170px;border-radius:3px 0 0 3px;}
.iphone-frame .btn-vol-down{width:3px;height:58px;left:-3px;top:240px;border-radius:3px 0 0 3px;}
.iphone-frame .btn-power{width:3px;height:88px;right:-3px;top:200px;border-radius:0 3px 3px 0;}

/* =========================== 状态栏 =========================== */
.status-bar{
  height:47px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 28px 0 32px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--c-text);
  position:relative;
  z-index:40;
  background:transparent;
}
.status-bar.on-image{color:#fff;}
.status-bar .icons{display:flex;align-items:center;gap:5px;}
.status-bar .icons i{font-size:14px;}

/* =========================== 顶部导航栏（二级页） =========================== */
.nav-header{
  flex-shrink:0;
  display:flex;
  align-items:center;
  height:48px;
  padding:0 12px;
  background:var(--c-surface);
  border-bottom:1px solid var(--c-border);
  position:relative;
  z-index:30;
}
.nav-header .nav-btn{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  border-radius:50%; color:var(--c-text); flex-shrink:0;
}
.nav-header .nav-btn:active{background:var(--c-bg);}
.nav-header .nav-title{
  position:absolute; left:0; right:0; text-align:center;
  font-size:17px; font-weight:600; color:var(--c-text);
  pointer-events:none;
}
.nav-header .nav-right{margin-left:auto; display:flex; align-items:center; gap:6px;}

/* =========================== 页面内容容器 =========================== */
.page-content{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:var(--c-bg);
}
.page-content.no-tabbar{padding-bottom:24px;}

/* =========================== 底部 Tab Bar =========================== */
.tab-bar{
  flex-shrink:0;
  display:flex;
  align-items:flex-start;
  padding:8px 0 0;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(20px);
  border-top:1px solid var(--c-border);
  position:relative;
  z-index:40;
}
.tab-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:3px;
  color:var(--c-text-3);
  font-size:10px;
  font-weight:500;
  padding-bottom:max(8px, env(safe-area-inset-bottom));
}
.tab-item i{font-size:21px;}
.tab-item.active{color:var(--c-primary-700);}
.tab-item .tab-center-icon{
  width:46px;height:46px;border-radius:16px;
  background:linear-gradient(135deg,var(--c-primary-600),var(--c-primary-700));
  display:flex;align-items:center;justify-content:center;color:#fff;
  margin-top:-22px; box-shadow:0 8px 16px -4px rgba(46,49,146,.5);
}

/* =========================== 组件：按钮 =========================== */
.btn-primary{
  background:linear-gradient(135deg,var(--c-primary-600),var(--c-primary-700));
  color:#fff; font-weight:600; border-radius:14px;
  box-shadow:0 8px 16px -6px rgba(46,49,146,.45);
}
.btn-accent{
  background:linear-gradient(135deg,var(--c-accent-500),var(--c-accent-600));
  color:#fff; font-weight:600; border-radius:14px;
  box-shadow:0 8px 16px -6px rgba(255,107,53,.45);
}
.btn-ai{
  background:linear-gradient(135deg,var(--c-ai-1),var(--c-ai-2));
  color:#fff; font-weight:600; border-radius:14px;
  box-shadow:0 8px 16px -6px rgba(124,58,237,.4);
}
.btn-ghost{
  background:var(--c-surface); color:var(--c-text); font-weight:600;
  border-radius:14px; border:1px solid var(--c-border);
}

/* =========================== 组件：卡片 =========================== */
.card{
  background:var(--c-surface);
  border-radius:18px;
  border:1px solid var(--c-border);
  box-shadow:0 2px 10px -4px rgba(20,20,50,.06);
}

/* =========================== 组件：徽标/标签 =========================== */
.badge{
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; font-weight:600; padding:2px 8px; border-radius:999px;
}
.badge-primary{background:var(--c-primary-100); color:var(--c-primary-700);}
.badge-accent{background:var(--c-accent-100); color:var(--c-accent-600);}
.badge-growth{background:var(--c-growth-100); color:var(--c-growth-600);}
.badge-gray{background:#F0F1F8; color:var(--c-text-2);}

/* =========================== 渐变文字 =========================== */
.text-grad-ai{
  background:linear-gradient(135deg,var(--c-ai-1),var(--c-ai-2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.text-grad-primary{
  background:linear-gradient(135deg,var(--c-primary-500),var(--c-primary-700));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* =========================== Tabs 切换 =========================== */
.seg-tabs{display:flex; gap:6px; overflow-x:auto; padding:2px;}
.seg-tab{
  flex-shrink:0; padding:7px 16px; border-radius:999px; font-size:13px; font-weight:600;
  color:var(--c-text-2); background:var(--c-surface); border:1px solid var(--c-border);
}
.seg-tab.active{background:var(--c-primary-700); color:#fff; border-color:var(--c-primary-700);}

.tab-panel{display:none;}
.tab-panel.active{display:block;}

/* =========================== 进度条 =========================== */
.progress-track{height:6px; border-radius:999px; background:var(--c-border); overflow:hidden;}
.progress-fill{height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c-primary-500),var(--c-primary-700));}

/* =========================== 索引页（网关页）专用 =========================== */
.gallery-bg{
  background:
    radial-gradient(circle at 15% 10%, rgba(124,58,237,.25), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(6,182,212,.18), transparent 35%),
    radial-gradient(circle at 50% 100%, rgba(255,107,53,.12), transparent 40%),
    #0B0B17;
}
.section-dot{width:6px;height:6px;border-radius:999px;background:var(--c-accent-500);}