/* ==========================================================================
   public.css — 公开页（首页 / 登录 / 注册 / 定价）共享样式
   暗色营销视觉：#060609 背景 + 星空 / 月球 / 噪点装饰
   品牌 accent：#4653d4 系，暗色页用 #7c8cff（与 app.css 暗色主题同源）
   字体栈与 app.css 一致（Inter 拉丁子集 + 系统中文字体）
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

/* 自托管 Inter（与应用内 app.css 共用，仅拉丁子集） */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("/app/static/fonts/inter-latin.woff2") format("woff2");
}

/* ══ 设计 token（公开页集中维护） ══ */
:root{
  color-scheme:dark;

  /* 背景 / 卡片 */
  --bg:#060609;
  --bg-soft:#0a0a10;
  --bg-peak:#101018;                 /* 顶部径向光晕 */
  --card:rgba(255,255,255,.03);
  --card-border:rgba(255,255,255,.08);
  --card-border-hover:rgba(255,255,255,.17);

  /* 文本层级 */
  --text:#a7a7b0;
  --text-strong:#f4f4f6;
  --text-dim:#8f8f99;
  --text-muted:#5c5c66;

  /* 品牌 accent（#4653d4 系暗色形态，与 app.css 暗色主题同源） */
  --accent:#7c8cff;
  --accent-hover:#93a1ff;
  --accent-soft:rgba(124,140,255,.14);      /* 图标 / 结果底 */
  --accent-ring:rgba(124,140,255,.18);      /* 输入框 focus 环 */
  --accent-line:rgba(124,140,255,.2);       /* 内描边 */
  --accent-glow:rgba(124,140,255,.10);      /* 大范围光晕投影 */
  --accent-dot:rgba(124,140,255,.6);        /* badge 圆点光晕 */
  --accent-selection:rgba(124,140,255,.3);

  /* 语义色 */
  --ok:#4cc38a;--ok-bg:rgba(76,195,138,.12);
  --err:#e5534b;--err-bg:rgba(229,83,75,.12);

  /* 线条 / 导航 */
  --line:rgba(255,255,255,.08);
  --nav-bg:rgba(6,6,9,.55);

  /* 按钮（高亮白底主按钮） */
  --btn-bg:#f4f4f6;
  --btn-bg-hover:#fff;
  --btn-text:#0b0b0f;

  /* 圆角档位 */
  --r-sm:10px;      /* 输入框 / 消息条 */
  --r-md:16px;      /* 营销卡片 */
  --r-lg:20px;      /* 大圆角营销卡片（毛玻璃） */
  --r-xl:24px;      /* CTA 盒 */
  --r-pill:999px;   /* 胶囊按钮 / badge */

  /* 字体 / 动效（字体栈与 app.css 一致） */
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","HarmonyOS Sans SC","MiSans","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --ease:cubic-bezier(.4,0,.2,1);
}

html{scroll-behavior:smooth}
body{
  font-family:var(--font);color:var(--text);line-height:1.7;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  background:radial-gradient(ellipse 90% 60% at 50% -10%, var(--bg-peak) 0%, var(--bg) 60%);
}
a{text-decoration:none}
::selection{background:var(--accent-selection)}

/* ══ 背景装饰：星空 · 月球 · 噪点颗粒 ══ */
.grain{
  position:fixed;inset:0;z-index:60;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
}
.stars{
  position:fixed;inset:-50%;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Ccircle cx='24' cy='36' r='1' fill='%23fff' opacity='.55'/%3E%3Ccircle cx='120' cy='18' r='.7' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='208' cy='52' r='1.1' fill='%23fff' opacity='.5'/%3E%3Ccircle cx='66' cy='96' r='.8' fill='%23cdd2ff' opacity='.4'/%3E%3Ccircle cx='168' cy='120' r='1' fill='%23fff' opacity='.45'/%3E%3Ccircle cx='40' cy='168' r='1' fill='%23fff' opacity='.4'/%3E%3Ccircle cx='228' cy='180' r='.7' fill='%23fff' opacity='.3'/%3E%3Ccircle cx='108' cy='210' r='1.2' fill='%23e6e9ff' opacity='.5'/%3E%3Ccircle cx='190' cy='238' r='.8' fill='%23fff' opacity='.35'/%3E%3Ccircle cx='250' cy='120' r='.9' fill='%23fff' opacity='.4'/%3E%3C/svg%3E");
  animation:drift 160s linear infinite;
}
@keyframes drift{to{transform:translate3d(260px,260px,0)}}
.moon-halo{
  position:absolute;inset:-32%;border-radius:50%;
  background:radial-gradient(circle, rgba(226,222,198,.13) 0%, rgba(124,140,255,.06) 45%, transparent 70%);
  filter:blur(8px);
}
.moon{
  position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle at 63% 57%, rgba(0,0,0,.16) 0 5.5%, transparent 6.5%),
    radial-gradient(circle at 39% 67%, rgba(0,0,0,.12) 0 4%, transparent 5%),
    radial-gradient(circle at 69% 33%, rgba(0,0,0,.12) 0 3.5%, transparent 4.5%),
    radial-gradient(circle at 32% 28%, #fffdf4 0%, #ede9db 32%, #d2cebf 52%, #8f8b7c 76%, #565349 100%);
  box-shadow:
    inset -14px -18px 40px rgba(0,0,0,.5),
    inset 4px 6px 16px rgba(255,255,255,.22),
    0 0 60px 16px rgba(238,234,214,.09),
    0 0 160px 60px var(--accent-glow);
}
@keyframes moonFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}

/* ══ 品牌标识 ══ */
.brand-mark{
  color:var(--btn-text);
  background:linear-gradient(135deg,#fff,#c9cdf5);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 16px rgba(200,205,255,.35);
}

/* ══ 导航栏 ══ */
.navbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:var(--nav-bg);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line);
  padding:0 32px;height:60px;display:flex;align-items:center;justify-content:space-between;
}
.nav-logo{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:650;letter-spacing:-.01em;color:var(--text-strong)}
.nav-logo .brand-mark{width:26px;height:26px;border-radius:7px}
.nav-logo .brand-mark svg{width:15px;height:15px}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{font-size:13.5px;color:var(--text-dim);transition:color .15s var(--ease)}
.nav-links a:hover{color:var(--text-strong)}
.nav-links a.cur{color:var(--text-strong)}
.nav-links a.btn{color:var(--btn-text)}
.nav-links a.btn:hover{color:var(--btn-text)}

/* ══ 按钮（统一白底胶囊主按钮 + 幽灵次要按钮） ══ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:48px;padding:0 30px;border:none;border-radius:var(--r-pill);
  font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  color:var(--btn-text);background:var(--btn-bg);
  transition:all .2s var(--ease);
}
.btn:hover{background:var(--btn-bg-hover);box-shadow:0 0 36px rgba(255,255,255,.22);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
.btn-sm{height:34px;padding:0 18px;font-size:13.5px}
.btn-block{width:100%;height:44px;font-size:14px}
.btn-outline{
  background:rgba(255,255,255,.03);color:var(--text-strong);
  border:1px solid var(--card-border);
}
.btn-outline:hover{border-color:rgba(255,255,255,.22);background:rgba(255,255,255,.06);box-shadow:none;transform:none}

/* ══ 表单（登录 / 注册） ══ */
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:12px;font-weight:500;color:var(--text-dim);margin-bottom:6px}
.form-group input{
  width:100%;padding:8px 14px;height:40px;border:1px solid var(--card-border);border-radius:var(--r-sm);
  font-size:13.5px;font-family:inherit;outline:none;background:rgba(255,255,255,.04);color:var(--text-strong);
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);
}
.form-group input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-ring);background:rgba(255,255,255,.06)}
.form-group input::placeholder{color:var(--text-muted)}
.msg{font-size:12.5px;padding:9px 12px;border-radius:var(--r-sm);margin-bottom:16px;display:none}
.msg.error{display:block;background:var(--err-bg);color:var(--err)}
.msg.ok{display:block;background:var(--ok-bg);color:var(--ok)}

/* ══ 徽章 / 渐变标题（hero 共用） ══ */
.badge{
  display:inline-flex;align-items:center;gap:8px;padding:6px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.03);border:1px solid var(--card-border);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  font-size:12.5px;color:var(--text-dim);margin-bottom:32px;letter-spacing:.02em;
}
.badge .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px 2px var(--accent-dot)}
.gradient-text{
  background:linear-gradient(115deg,#fdfdfd 10%,#b9bfff 55%,#7b84f2 90%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* ══ 营销卡片（特性 / 定价共用基底） ══ */
.m-card{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.015));
  border:1px solid var(--card-border);border-radius:var(--r-md);
  padding:26px 24px;
  transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease);
}
.m-card:hover{
  transform:translateY(-4px);border-color:var(--card-border-hover);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7),0 0 40px -10px var(--accent-glow);
}
.m-icon{
  width:38px;height:38px;border-radius:var(--r-sm);margin-bottom:16px;
  background:var(--accent-soft);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 0 0 1px var(--accent-line);
}
.m-icon svg{width:18px;height:18px}

/* ══ 标题层级 / 布局 ══ */
.container{max-width:1060px;margin:0 auto}
.sec-title{text-align:center;font-size:12px;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:22px}
.h2{text-align:center;font-size:clamp(24px,3vw,32px);font-weight:700;letter-spacing:-.02em;color:var(--text-strong);margin-bottom:12px}
.h2-sub{text-align:center;font-size:15px;color:var(--text-dim);margin:0 auto 60px;max-width:480px}

/* ══ 页脚 ══ */
.footer{text-align:center;font-size:12.5px;color:var(--text-muted)}
.footer a{color:var(--text-muted);transition:color .15s var(--ease)}
.footer a:hover{color:var(--text)}
.footer-bar{padding:36px 24px;border-top:1px solid var(--line)}

/* ══ 登录 / 注册（居中毛玻璃卡片布局） ══ */
body.auth{display:flex;align-items:center;justify-content:center;min-height:100vh}
body.auth a{color:var(--accent)}
body.auth .moon-wrap{
  position:fixed;bottom:8%;left:6%;width:180px;height:180px;
  pointer-events:none;z-index:0;opacity:.85;animation:moonFloat 10s ease-in-out infinite;
}
.auth-page{position:relative;z-index:2;width:100%;max-width:400px;padding:24px}
.auth-card{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--card-border);border-radius:var(--r-lg);padding:38px 34px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8),0 0 60px -20px var(--accent-glow);
  animation:fadeUp .6s var(--ease) both;
}
.auth-card .brand-mark{width:42px;height:42px;border-radius:11px;margin:0 auto 20px;box-shadow:0 0 24px rgba(200,205,255,.35)}
.auth-card .brand-mark svg{width:22px;height:22px}
.auth-card h1{text-align:center;font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--text-strong);margin-bottom:5px}
.auth-sub{text-align:center;font-size:12.5px;color:var(--text-dim);margin-bottom:28px}
.auth-extra{text-align:center;margin-top:24px;font-size:12.5px;color:var(--text-dim)}
.auth-extra a{font-weight:500}
.auth-extra a:hover{text-decoration:underline}
body.auth .footer{margin-top:30px;font-size:11.5px}

/* ══ 响应式 / 动效偏好 ══ */
@media(max-width:900px){
  .navbar{padding:0 20px}
  .nav-links{gap:16px}
}
@media(max-width:640px){
  body.auth .moon-wrap{opacity:.35;left:-40px;bottom:4%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}