/* ============================================================
   AI-BOS Public Site — Shared Styles (site.css v1)
   Used by: /  /ha/*  /reply/  all public pages
   ============================================================ */

/* ── Tokens ── */
:root {
  --blue:#3b82f6; --blue-d:#2563eb; --blue-g:rgba(37,99,235,.38);
  --em:#10b981; --am:#f59e0b; --vi:#8b5cf6;
  --site-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans TC","Microsoft JhengHei",sans-serif;
}

/* ── NAV v2 ── */
.site-nav{
  position:sticky;top:0;z-index:100;height:80px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(24px,5vw,80px);
  background:linear-gradient(180deg,rgba(12,18,44,.96) 0%,rgba(10,14,30,.92) 100%);
  backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 4px 32px -4px rgba(0,0,0,.55);
  font-family:var(--site-font);
}

.nav-brand{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.nav-logo-wrap{
  width:46px;height:46px;background:#fff;border-radius:12px;padding:5px;flex-shrink:0;
  box-shadow:0 4px 18px rgba(37,99,235,.45),0 1px 0 rgba(255,255,255,.55) inset;
  transition:transform .2s,box-shadow .2s;
}
.nav-logo-wrap:hover{transform:scale(1.06);box-shadow:0 6px 24px rgba(37,99,235,.6),0 1px 0 rgba(255,255,255,.55) inset}
.nav-logo{width:100%;height:100%;border-radius:8px;object-fit:contain}
.nav-brand-text{display:flex;flex-direction:column;line-height:1.15}
.nav-brand-text b{
  font-size:22px;font-weight:900;letter-spacing:-.05em;
  background:linear-gradient(135deg,#60a5fa 0%,#818cf8 55%,#c4b5fd 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.nav-brand-text small{font-size:11px;color:rgba(255,255,255,.45);font-weight:500;letter-spacing:.08em;-webkit-text-fill-color:initial;background:none}
/* Light mode nav - 淺色主題 */
@media(prefers-color-scheme:light){
  .site-nav{
    background:linear-gradient(180deg,rgba(248,251,255,.97) 0%,rgba(238,246,255,.95) 100%) !important;
    border-bottom-color:rgba(37,99,235,.14) !important;
    box-shadow:0 1px 0 rgba(255,255,255,.95) inset,0 2px 16px -4px rgba(37,99,235,.10) !important;
  }
  .nav-brand-text b{background:linear-gradient(135deg,#1d4ed8,#7c3aed) !important;-webkit-background-clip:text !important;background-clip:text !important}
  .nav-brand-text small{color:rgba(15,23,42,.5) !important}
  .nav-link{color:rgba(15,23,42,.78) !important}
  .nav-link:hover{color:#0f172a !important;background:rgba(37,99,235,.07) !important}
  .nav-link.nav-on{color:#1d4ed8 !important}
  .nav-link.nav-on::after{background:linear-gradient(90deg,#1d4ed8,#7c3aed) !important}
}

.nav-links{display:flex;gap:2px;align-items:center}
.nav-link{
  font-size:15px;font-weight:700;color:rgba(255,255,255,.88);text-decoration:none;
  padding:9px 15px;border-radius:9px;letter-spacing:.005em;
  transition:color .15s,background .15s;position:relative;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav-link.nav-on{color:#60a5fa}
.nav-link.nav-on::after{
  content:'';position:absolute;bottom:2px;left:50%;transform:translateX(-50%);
  width:20px;height:3px;border-radius:3px;
  background:linear-gradient(90deg,#3b82f6,#818cf8);
  box-shadow:0 0 8px rgba(59,130,246,.7);
}

.nav-cta{
  padding:12px 26px;border-radius:12px;font-size:15px;font-weight:700;color:#fff;
  text-decoration:none;border:1px solid #1d4ed8;
  background:linear-gradient(180deg,#5090f7 0%,#2563eb 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.2) inset,
             0 8px 24px -4px var(--blue-g),0 2px 8px -1px rgba(15,23,42,.3);
  text-shadow:0 1px 0 rgba(0,0,0,.2);
  transition:transform .15s,box-shadow .15s;
  white-space:nowrap;
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.2) inset,0 14px 36px -4px var(--blue-g),0 2px 8px -1px rgba(15,23,42,.3)}
.nav-cta:active{transform:translateY(1px)}

/* ── SHARED BUTTONS ── */
.s-btn{
  display:inline-flex;align-items:center;padding:13px 26px;border-radius:12px;
  font-size:15px;font-weight:700;text-decoration:none;border:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s;font-family:var(--site-font);
}
.s-btn:hover{transform:translateY(-2px)}.s-btn:active{transform:translateY(1px)}
.s-btn-primary{
  background:linear-gradient(180deg,#4f8cf6,#2563eb);color:#fff;border:1px solid #1d4ed8;
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.18) inset,
             0 8px 24px -4px var(--blue-g),0 2px 6px -1px rgba(15,23,42,.25);
  text-shadow:0 1px 0 rgba(0,0,0,.18);
}
.s-btn-primary:hover{box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 -2px 0 rgba(0,0,0,.18) inset,0 14px 36px -4px var(--blue-g),0 2px 6px -1px rgba(15,23,42,.25)}
.s-btn-ghost{
  background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.s-btn-ghost:hover{background:rgba(255,255,255,.09);color:#fff;border-color:rgba(255,255,255,.22)}
@media(prefers-color-scheme:light){
  .s-btn-ghost{background:rgba(37,99,235,.06);color:#1d4ed8;border-color:rgba(37,99,235,.18)}
  .s-btn-ghost:hover{background:rgba(37,99,235,.10);color:#1d4ed8}
}

/* ── FOOTER ── */
.site-footer{background:linear-gradient(180deg,#0267b9 0%,#014e8e 100%);color:#fff;font-family:var(--site-font)}
.footer-inner{max-width:1400px;margin:0 auto;padding:52px clamp(20px,5vw,60px) 36px}
.footer-cols{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr 1fr;gap:28px 20px;margin-bottom:36px;align-items:start}
.footer-col-brand .footer-brand{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.footer-logo-wrap{width:40px;height:40px;background:#fff;border-radius:10px;padding:4px;flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,0,0,.2),0 1px 0 rgba(255,255,255,.4) inset}
.footer-logo{width:100%;height:100%;border-radius:6px;object-fit:contain}
.footer-brand-name{font-size:15px;font-weight:900;letter-spacing:-.04em}
.footer-brand-sub{font-size:10px;color:rgba(255,255,255,.6);letter-spacing:.06em;margin-top:2px}
.footer-desc{font-size:13px;color:rgba(255,255,255,.65);line-height:1.65}
.footer-h{
  font-size:13px;font-weight:700;color:#fff;margin:0 0 14px;
  padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;gap:8px;
}
.footer-h::before{content:'';width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.6);flex-shrink:0}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.footer-links li a{font-size:12.5px;color:rgba(255,255,255,.72);text-decoration:none;display:flex;align-items:center;transition:color .15s,transform .15s}
.footer-links li a:hover{color:#fff;transform:translateX(3px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.1)}
.footer-bottom-inner{max-width:1400px;margin:0 auto;padding:18px clamp(20px,5vw,60px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.footer-social{display:flex;align-items:center;gap:10px}
.footer-social-label{font-size:12px;color:rgba(255,255,255,.55)}
.footer-social-btn{
  width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  transition:background .15s,transform .15s,color .15s;
}
.footer-social-btn:hover{background:#fff;color:#0267b9;transform:translateY(-2px)}
.footer-copy{font-size:12px;color:rgba(255,255,255,.55)}
.footer-copy a{color:rgba(255,255,255,.65);text-decoration:none;margin-left:14px}
.footer-copy a:hover{color:#fff}

/* ── RWD ── */
@media(max-width:1400px){.footer-cols{grid-template-columns:repeat(3,1fr)}.footer-col-brand{grid-column:1/-1}}
@media(max-width:960px){.nav-links{display:none}}
@media(max-width:760px){.footer-cols{grid-template-columns:repeat(2,1fr)}.footer-col-brand{grid-column:1/-1}.footer-bottom-inner{flex-direction:column;align-items:flex-start}}
@media(max-width:480px){.footer-cols{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.nav-cta,.s-btn,.footer-social-btn{transition:none!important}}

/* site.css v2 nav upgrade */
.nav-cta{padding:12px 26px!important;font-size:15px!important;border-radius:12px!important}
.nav-link{font-size:15px!important;letter-spacing:.005em!important}