/* ============================================================
   老闆網 × 超級 VIP 會員聯盟 — 共用設計系統 theme.css
   風格：白底金線（White × Gold）+ 深藍 / 鐵灰 搭配
   ============================================================ */
/* 圓體：justfont 粉圓 open-huninn（全站統一字型） */
@font-face{
  font-family:"Huninn";
  src:url("https://cdn.jsdelivr.net/gh/justfont/open-huninn-font@2.1/font/jf-openhuninn-2.1.ttf") format("truetype");
  font-weight:normal;font-style:normal;font-display:swap;
}
:root{
  /* 白底 · 深藍為主結構 · 鐵灰線條/文字 · 金色只當重點 */
  --ink:#ffffff; --ink-2:#f6f8fb; --ink-3:#edf0f5;
  --black:#1f2e49; --black-2:#2c4067; --iron:#586472; --iron-2:#929cab;
  --line:rgba(88,100,114,.32); --line-soft:rgba(31,46,73,.12);
  --gold:#c9a227; --gold-2:#a9851f; --gold-deep:#7e6018;
  --copper:#36507e; --copper-2:#4d6b9c;
  --cream:#1e2a3d; --muted:#566273; --muted-2:#828d9c; --ok:#2f8a4e; --danger:#b3402f;
  /* 全站改用圓體；備援保留 Noto Sans TC，載入前不卡畫面 */
  --serif:"Huninn","Noto Sans TC",sans-serif; --sans:"Huninn","Noto Sans TC",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--cream);background:var(--ink);
  background-image:radial-gradient(900px 500px at 78% -8%,rgba(201,162,39,.07),transparent 60%),radial-gradient(700px 600px at -10% 110%,rgba(31,46,73,.07),transparent 60%);
  line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px;position:relative;z-index:1}
.ic-svg{display:inline-block;vertical-align:-0.18em;flex:none}
.sidebar a .ic-svg{vertical-align:middle;opacity:.85}

/* ---------- 導覽列 ---------- */
.nav{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.86);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:1100px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;gap:18px}
.nav .brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:900;color:var(--gold-2);font-size:18px;text-decoration:none}
.nav .brand .crest{width:34px;height:34px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--gold-2);background:radial-gradient(circle at 50% 30%,rgba(201,162,39,.18),transparent 70%)}
.nav .links{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.nav .links a{font-size:13.5px;color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:8px;transition:.2s}
.nav .links a:hover{color:var(--gold-2);background:rgba(201,162,39,.07)}
.nav .links a.btn{color:#fff;background:var(--black)}
.nav .links a.btn:hover{color:#fff;background:var(--black-2)}
.nav .links a.btn.ghost{color:var(--black);background:transparent}
.nav .links a.btn.ghost:hover{color:#fff;background:var(--black)}

/* ---------- 按鈕 ---------- */
.btn{display:inline-block;font-family:var(--serif);font-weight:700;font-size:15px;color:#fff;background:var(--black);border:none;border-radius:999px;padding:13px 34px;text-decoration:none;cursor:pointer;transition:transform .25s,background .2s,box-shadow .25s}
.btn:hover{transform:translateY(-3px);background:var(--black-2);box-shadow:0 14px 26px -16px rgba(31,46,73,.5)}
.btn.ghost{color:var(--black);background:transparent;border:1.5px solid var(--black)}
.btn.ghost:hover{background:var(--black);color:#fff;box-shadow:none}
.btn.sm{font-size:13px;padding:9px 20px}
.btn.block{display:block;width:100%;text-align:center}

/* ---------- 區塊標題 ---------- */
.section{margin-top:64px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
.sec-head .k{font-family:var(--serif);font-size:13px;color:var(--gold-deep);letter-spacing:.2em}
.sec-head h2{font-family:var(--serif);font-weight:700;font-size:26px;color:var(--cream)}
.sec-head .ln{flex:1;height:1px;background:var(--line-soft)}
.lead{color:var(--muted);font-size:15.5px;max-width:780px;margin-bottom:14px}
.eyebrow{font-size:12px;letter-spacing:.46em;color:var(--iron);text-transform:uppercase}

/* ---------- Hero ---------- */
.hero{text-align:center;padding:72px 0 40px}
.hero .crest{width:64px;height:64px;margin:0 auto 22px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid var(--gold);font-family:var(--serif);font-weight:900;font-size:20px;color:var(--gold-2);background:radial-gradient(circle at 50% 30%,rgba(201,162,39,.22),transparent 70%)}
.hero h1{font-family:var(--serif);font-weight:900;font-size:clamp(34px,6vw,58px);line-height:1.12;letter-spacing:.02em;margin-top:16px;
  background:linear-gradient(180deg,var(--black-2),var(--black));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.sub{color:var(--muted);max-width:620px;margin:18px auto 0;font-size:16px;font-weight:300}
.hero .cta{margin-top:30px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.rule{width:100%;max-width:760px;margin:36px auto 0;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent);position:relative}
.rule::after{content:"\25C6";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:var(--gold);font-size:9px;background:var(--ink);padding:0 12px}

/* ---------- 卡片 / 格線 ---------- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.card{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:linear-gradient(180deg,var(--ink-2),var(--ink));transition:transform .35s,border-color .35s,box-shadow .35s}
.card:hover{transform:translateY(-5px);border-color:rgba(201,162,39,.45);box-shadow:0 22px 44px -28px rgba(38,34,28,.4)}
.card .ic{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-weight:900;font-size:20px;color:var(--gold-2);border:1px solid var(--line);background:rgba(201,162,39,.07);margin-bottom:16px}
.card h3{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--cream);margin-bottom:8px}
.card p{font-size:13.5px;color:var(--muted)}

/* ---------- 標籤 / 徽章 ---------- */
.tag{display:inline-block;font-size:12px;letter-spacing:.1em;border-radius:6px;padding:3px 12px;font-weight:700}
.tag.gold{color:#e7c95f;background:var(--black)}
.tag.navy{color:var(--gold-2);background:var(--black)}
.tag.line{color:var(--gold-2);background:rgba(201,162,39,.08);border:1px solid var(--line)}

/* ---------- 服務 / 商品卡 ---------- */
.tile{border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:14px;padding:18px;background:var(--ink-2);transition:transform .3s,box-shadow .3s,border-color .3s;display:flex;flex-direction:column;min-width:0}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 36px -26px rgba(38,34,28,.45)}
.tile .cat{font-size:11px;color:var(--copper);letter-spacing:.08em;font-weight:700}
.tile .nm{font-size:14.5px;color:var(--cream);font-weight:500;margin:6px 0 10px;line-height:1.4;flex:1}
.tile .thumb{height:140px;border-radius:10px;background:linear-gradient(135deg,var(--ink-3),#e7ddc8);display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;margin-bottom:12px;overflow:hidden}
.tile .thumb img{width:100%;height:100%;object-fit:cover}
.tile .price{font-family:var(--serif);font-size:22px;font-weight:900;color:var(--gold-2)}
.tile .price small{font-size:12px;color:var(--muted);font-weight:400;font-family:var(--sans);margin-left:2px}
.tile .foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;gap:10px}
.tile .shop{font-size:11.5px;color:var(--muted-2)}

/* ---------- 價格 / 方案卡 ---------- */
.plan{border:1px solid var(--line);border-radius:18px;padding:30px 26px;background:linear-gradient(180deg,var(--ink-2),var(--ink));text-align:center}
.plan.feat{border-color:var(--gold);box-shadow:0 0 0 1px rgba(201,162,39,.2),0 30px 60px -34px rgba(201,162,39,.3)}
.plan .tier{font-family:var(--serif);font-size:18px;color:var(--gold-2);font-weight:700}
.plan .amt{font-family:var(--serif);font-size:46px;font-weight:900;color:var(--cream);line-height:1.1;margin:6px 0}
.plan .amt small{font-size:15px;color:var(--muted);font-weight:400;font-family:var(--sans)}
.plan .note{font-size:13px;color:var(--ok);margin-bottom:14px}
.plan ul{list-style:none;text-align:left;border-top:1px dashed var(--line-soft);padding-top:14px;margin-top:6px}
.plan li{font-size:13px;color:var(--muted);padding:6px 0 6px 20px;position:relative}
.plan li::before{content:"\203A";position:absolute;left:2px;color:var(--gold);font-weight:700}

/* ---------- 提示框 ---------- */
.notebox{border:1px solid var(--line-soft);border-radius:12px;padding:16px 20px;background:var(--ink-2);font-size:13.5px;color:var(--muted)}
.notebox.warn{border-color:rgba(201,162,39,.4);background:rgba(201,162,39,.06)}
.notebox b{color:var(--gold-2)}

/* ---------- 盟約 ---------- */
.creed{margin-top:20px;border:1px solid var(--line);border-radius:16px;padding:28px 30px;background:var(--ink-2);position:relative;overflow:hidden}
.creed::before{content:"\201C";position:absolute;top:14px;left:18px;font-family:var(--serif);font-size:52px;color:var(--copper);opacity:.25;line-height:1}
.creed h3{font-family:var(--serif);font-size:18px;font-weight:700;color:var(--gold-2);margin-bottom:10px}
.creed p{font-size:14.5px;color:var(--cream);line-height:1.9}
.creed p b{color:var(--copper);font-weight:700}
.creed .sign{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:right;font-family:var(--serif);letter-spacing:.1em}

/* ---------- 統計 ---------- */
.stat{border:1px solid var(--line-soft);border-radius:16px;padding:26px 18px;text-align:center;background:var(--ink-2)}
.stat .n{font-family:var(--serif);font-size:32px;font-weight:900;color:var(--gold-2);line-height:1}
.stat .n span{font-size:14px;color:var(--muted);font-weight:400;font-family:var(--sans);margin-left:2px}
.stat .l{font-size:12.5px;color:var(--muted);margin-top:10px}

/* ---------- 表單 ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;color:var(--gold-deep);font-weight:700;margin-bottom:6px;letter-spacing:.03em}
.field input,.field select{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-family:var(--sans);font-size:14px;color:var(--cream);background:#fff;outline:none;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15)}
.field .hint{font-size:11.5px;color:var(--muted-2);margin-top:4px}

/* ---------- 頁尾 ---------- */
.footer{text-align:center;color:var(--muted-2);font-size:12.5px;margin-top:72px;padding:28px 24px;border-top:1px solid var(--line-soft)}
.footer b{color:var(--muted)}
.footer a{color:var(--gold-2);text-decoration:none}

/* ---------- 後台版面 ---------- */
body.admin-body{background:#f4f6f9}
.admin-top{position:sticky;top:0;z-index:40;background:linear-gradient(180deg,#22314f,#1b2942);color:#fff;border-bottom:1px solid rgba(201,162,39,.4);box-shadow:0 3px 16px -6px rgba(15,23,42,.45)}
.admin-top .in{max-width:1280px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:14px}
.admin-top .brand{font-family:var(--serif);font-weight:900;color:#fff;font-size:17px;text-decoration:none;display:flex;align-items:center;gap:9px}
.admin-top .brand .crest{width:30px;height:30px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:12px;color:#e7c95f;background:radial-gradient(circle at 50% 30%,rgba(201,162,39,.25),transparent 70%)}
.admin-top .who{margin-left:auto;display:flex;align-items:center;gap:10px}
.admin-top .me{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:4px 14px 4px 5px}
.admin-top .me .av{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#1f2e49;background:linear-gradient(135deg,#e7c95f,var(--gold));flex:none}
.admin-top .me .mn{display:flex;flex-direction:column;line-height:1.18;font-size:13px;color:#fff;font-weight:500}
.admin-top .me .mn small{font-size:10.5px;color:#9fb0cc;font-weight:400;letter-spacing:.04em}
.admin-top .wbtn{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#dbe2ea;text-decoration:none;border:1px solid rgba(255,255,255,.16);border-radius:9px;padding:7px 13px;transition:.2s}
.admin-top .wbtn:hover{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.32)}
.admin-shell{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:236px 1fr;gap:0;min-height:calc(100vh - 120px)}
.sidebar{background:#fff;border-right:1px solid var(--line-soft);padding:18px 14px}
.sidebar .grp{font-size:11px;letter-spacing:.12em;color:var(--muted-2);padding:14px 12px 8px}
.sidebar a{display:flex;align-items:center;gap:11px;padding:11px 14px;border-radius:10px;color:var(--muted);text-decoration:none;font-size:14px;transition:.18s;margin-bottom:3px}
.sidebar a:hover{background:var(--ink-3);color:var(--cream)}
.sidebar a.on{background:rgba(31,46,73,.07);color:var(--black-2);font-weight:700}
.sidebar a.on .ic-svg{color:var(--gold-2);opacity:1}
.admin-main{padding:30px 32px}
.admin-main h1{font-family:var(--serif);font-size:24px;color:var(--cream);margin-bottom:6px}
.admin-main .crumb{font-size:12.5px;color:var(--muted-2);margin-bottom:22px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.kpi{border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:14px;padding:18px 20px;background:var(--ink-2)}
.kpi .n{font-family:var(--serif);font-size:30px;font-weight:900;color:var(--gold-2)}
.kpi .l{font-size:12.5px;color:var(--muted);margin-top:4px}

/* 資料表 */
.tablebox{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink-2)}
.dtable{width:100%;border-collapse:collapse;font-size:13.5px}
.dtable th{text-align:left;padding:12px 14px;background:rgba(31,46,73,.05);color:var(--gold-deep);font-weight:700;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.dtable td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--cream);vertical-align:middle}
.dtable tr:last-child td{border-bottom:none}
.dtable tr:hover td{background:rgba(201,162,39,.04)}
.dtable .muted{color:var(--muted-2);font-size:12px}
.pill-st{display:inline-block;font-size:11.5px;font-weight:700;border-radius:999px;padding:3px 11px}
.pill-st.on{color:#1c5b32;background:rgba(47,138,78,.14)}
.pill-st.off{color:#7a2a20;background:rgba(179,64,47,.14)}
.pill-st.role{color:var(--gold-2);background:rgba(201,162,39,.12)}
.act{display:inline-flex;gap:6px}
.act a,.act button{font-size:12px;padding:6px 12px;border-radius:8px;border:1px solid var(--line);background:#fff;color:var(--muted);text-decoration:none;cursor:pointer;transition:.2s}
.act a:hover,.act button:hover{border-color:var(--black);color:var(--black)}
.act .danger{color:var(--danger);border-color:rgba(179,64,47,.3)}
.act .danger:hover{background:var(--danger);color:#fff;border-color:var(--danger)}

/* 通知條 */
.flash{border-radius:12px;padding:13px 18px;font-size:14px;margin-bottom:18px}
.flash.ok{background:rgba(47,138,78,.12);color:#1c5b32;border:1px solid rgba(47,138,78,.3)}
.flash.err{background:rgba(179,64,47,.12);color:#7a2a20;border:1px solid rgba(179,64,47,.3)}
.formcard{border:1px solid var(--line);border-radius:16px;padding:26px;background:var(--ink-2);max-width:640px}
.textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:11px 14px;font-family:var(--sans);font-size:14px;color:var(--cream);background:#fff;min-height:90px;resize:vertical}

@media(max-width:880px){
  .admin-shell{grid-template-columns:1fr;min-width:0}
  .sidebar{display:flex;flex-wrap:wrap;gap:6px;border-right:none;border-bottom:1px solid var(--line-soft);min-width:0}
  .sidebar .grp{width:100%}
  .kpis{grid-template-columns:1fr 1fr}
  .admin-main{padding:22px 18px;min-width:0}
  .tablebox{overflow-x:auto}
  .dtable{min-width:520px}
}

/* ---------- 動畫 / RWD ---------- */
@keyframes fade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fade{animation:fade .9s ease both}
@media(max-width:880px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .grid-4{grid-template-columns:1fr 1fr}
  .nav .brand span.full{display:none}
}
@media(max-width:600px){
  .grid-4{grid-template-columns:1fr}
}