@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&family=Noto+Sans+TC:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap');

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:#F8F9FC; color:#0F172A;
    font-family:'Inter','Noto Sans TC',system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}
  h1,h2,h3,h4{font-family:'Plus Jakarta Sans','Noto Sans TC',sans-serif; text-wrap:balance; margin:0;}
  ::selection{background:#E0E7FF;}

  /* ============ ENV STRIP ============ */
  .env-strip{
    position:sticky; top:0; z-index:90; display:flex; align-items:center; gap:6px;
    background:#0F1024; padding:8px 16px; overflow-x:auto; white-space:nowrap;
  }
  .env-strip b{color:#A5B4FC; font-size:11px; font-weight:700; margin-right:8px; letter-spacing:.03em;}
  .env-strip a{
    font-size:12px; font-weight:700; color:#B9BBD6; padding:6px 12px; border-radius:999px; flex:none;
  }
  .env-strip a:hover{background:#1D1F3D; color:#fff;}
  .env-strip a.on{background:linear-gradient(90deg,#4F46E5,#9333EA); color:#fff;}

  /* ============ toast ============ */
  #toast-host{position:fixed; top:48px; right:16px; z-index:200; display:flex; flex-direction:column; gap:8px; align-items:flex-end;}
  .toast{
    background:#111827; color:#fff; font-size:12.5px; font-weight:600; padding:11px 16px 11px 12px;
    border-radius:12px; display:flex; align-items:center; gap:8px; box-shadow:0 12px 28px -8px rgba(0,0,0,.35);
    animation:toastIn .25s ease, toastOut .3s ease 2.7s forwards; max-width:340px;
  }
  .toast .ic{width:18px;height:18px;border-radius:50%; background:#22C55E; color:#111827; display:flex; align-items:center; justify-content:center; font-size:11px; flex:none;}
  @keyframes toastIn{from{opacity:0; transform:translateX(16px);} to{opacity:1; transform:translateX(0);}}
  @keyframes toastOut{to{opacity:0; transform:translateX(16px);}}
  @media (prefers-reduced-motion: reduce){ .toast{animation:none;} }

  /* ============ auth modal ============ */
  #authOverlay{
    display:none; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:300;
    align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(2px);
  }
  #authOverlay.show{display:flex;}
  #brandGateOverlay{
    display:none; position:fixed; inset:0; background:rgba(15,23,42,.55); z-index:300;
    align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(2px);
  }
  #brandGateOverlay.show{display:flex;}

  /* ============ AI growth coach floating widget ============ */
  #coachWidget{position:fixed; right:20px; bottom:20px; z-index:250; display:flex; flex-direction:column; align-items:flex-end;}
  #coachFab{width:52px; height:52px; border-radius:50%; border:0; background:linear-gradient(135deg,#4F46E5,#DB2777); color:#fff; font-size:22px; cursor:pointer; box-shadow:0 10px 24px -6px rgba(79,70,229,.5); display:flex; align-items:center; justify-content:center;}
  #coachPanel{display:none; flex-direction:column; width:320px; max-width:calc(100vw - 40px); height:420px; max-height:calc(100vh - 120px); background:#fff; border-radius:18px; box-shadow:0 24px 48px -12px rgba(0,0,0,.35); margin-bottom:12px; overflow:hidden;}
  #coachWidget.open #coachPanel{display:flex;}
  #coachWidget.open #coachFab{display:none;}
  .coach-head{background:linear-gradient(120deg,#1E1B3A,#3B2E6B); color:#fff; padding:12px 14px; display:flex; align-items:center; justify-content:space-between;}
  .coach-body{flex:1; overflow-y:auto; padding:12px 14px; display:flex; flex-direction:column; gap:8px; background:#FAFAFF;}
  .coach-msg{font-size:12px; line-height:1.6; padding:9px 12px; border-radius:12px; max-width:88%;}
  .coach-msg.bot{background:#EEF2FF; color:#3730A3; align-self:flex-start; border-bottom-left-radius:2px;}
  .coach-msg.user{background:#4F46E5; color:#fff; align-self:flex-end; border-bottom-right-radius:2px;}
  .coach-chips{display:flex; gap:6px; flex-wrap:wrap; padding:8px 14px; border-top:1px solid #F1F0FB;}
  .coach-chips span{font-size:10.5px; background:#F1F0FB; color:#4F46E5; padding:5px 9px; border-radius:999px; cursor:pointer; font-weight:600;}
  .coach-input{display:flex; gap:6px; padding:10px 12px; border-top:1px solid #F1F0FB;}
  .coach-input .input{flex:1; font-size:12px; padding:8px 10px;}
  @media (max-width:640px){ #coachWidget{right:12px; bottom:12px;} #coachPanel{width:calc(100vw - 24px);} }

  /* ============ Media Kit overlay ============ */
  #mediaKitOverlay{display:none; position:fixed; inset:0; background:rgba(15,23,42,.65); z-index:280; align-items:flex-start; justify-content:center; padding:32px 16px; overflow-y:auto;}
  #mediaKitOverlay.show{display:flex;}
  .mk-card{background:#F8F9FC; border-radius:20px; width:100%; max-width:920px; position:relative; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); padding-bottom:24px;}
  .mk-close{position:absolute; top:14px; right:14px; border:0; background:#fff; width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:14px; color:#64748B; box-shadow:0 2px 8px rgba(0,0,0,.15); z-index:2;}
  .mk-section{background:#fff; border:1px solid #EEEDF5; border-radius:16px; padding:18px 20px; margin:0 20px 16px;}
  .mk-section:first-of-type{margin-top:20px;}
  .mk-avatar{width:84px; height:84px; border-radius:16px; background:linear-gradient(135deg,#4F46E5,#DB2777); display:flex; align-items:center; justify-content:center; font-size:34px; color:#fff; flex:none;}
  .mk-kpi{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; text-align:center;}
  .mk-kpi div span{font-size:10px; color:#94A3B8; display:block; margin-bottom:4px;}
  .mk-kpi div b{font-size:18px; font-variant-numeric:tabular-nums;}
  .mk-genderbar{height:22px; border-radius:999px; overflow:hidden; display:flex; font-size:10.5px; font-weight:700; color:#fff;}
  .mk-genderbar span{display:flex; align-items:center; justify-content:center;}
  .mk-agebar-row{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:11px;}
  .mk-agebar-row .lbl{width:64px; color:#64748B; flex:none;}
  .mk-agebar-row .bar{flex:1; height:9px; border-radius:999px; background:#F1F0FB; overflow:hidden;}
  .mk-agebar-row .bar i{display:block; height:100%; border-radius:999px;}
  .mk-agebar-row .val{width:38px; text-align:right; flex:none; font-weight:700;}
  .mk-post{border:1px solid #EEEDF5; border-radius:12px; overflow:hidden; background:#fff;}
  .mk-post .thumb{height:100px; background:linear-gradient(135deg,#E0E7FF,#FCE7F3); display:flex; align-items:center; justify-content:center; font-size:26px; position:relative;}
  .mk-post .info{padding:9px;}
  .mk-post .info b{font-size:11px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:6px; line-height:1.4;}
  .mk-post .stats{display:flex; justify-content:space-between; font-size:10px; color:#64748B; margin-bottom:8px;}
  #socialSettingsOverlay{display:none; position:fixed; inset:0; background:rgba(15,23,42,.65); z-index:280; align-items:flex-start; justify-content:center; padding:32px 16px; overflow-y:auto;}
  #socialSettingsOverlay.show{display:flex;}
  .ss-card{background:#fff; border-radius:20px; width:100%; max-width:600px; position:relative; box-shadow:0 30px 80px -20px rgba(0,0,0,.5); padding:28px 28px 24px;}
  .ss-header{display:flex; gap:12px; align-items:center; margin-bottom:20px;}
  .ss-header .icon{width:44px; height:44px; border-radius:12px; background:#EEF2FF; display:flex; align-items:center; justify-content:center; font-size:20px; flex:none;}
  .ss-oauth-box{background:#F5F5FF; border:1px solid #C7D2FE; border-radius:14px; padding:16px 18px; margin-bottom:20px;}
  .ss-field{margin-bottom:14px;}
  .ss-field label{font-size:11.5px; font-weight:700; color:#334155; display:block; margin-bottom:6px;}
  .ss-field .input{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace; font-size:11.5px;}
  .auth-card{background:#fff; border-radius:20px; width:100%; max-width:380px; padding:28px; position:relative; box-shadow:0 30px 60px -20px rgba(0,0,0,.4);}
  .auth-close{position:absolute; top:16px; right:16px; border:0; background:#F1F0FB; width:28px; height:28px; border-radius:50%; cursor:pointer; font-size:14px; color:#64748B;}
  .auth-logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; margin-bottom:6px; font-family:'Plus Jakarta Sans',sans-serif;}
  .auth-sub{font-size:12.5px; color:#64748B; margin-bottom:20px; line-height:1.6;}
  .auth-tabs{display:flex; background:#F1F0FB; border-radius:10px; padding:4px; margin-bottom:20px;}
  .auth-tabs button{flex:1; border:0; background:transparent; padding:9px; border-radius:8px; font-size:12.5px; font-weight:700; color:#64748B; cursor:pointer;}
  .auth-tabs button.on{background:#fff; color:#4F46E5; box-shadow:0 1px 2px rgba(15,23,42,.08);}
  .auth-card label{display:block; font-size:11.5px; font-weight:700; color:#475569; margin-bottom:6px;}
  .auth-card .row{margin-bottom:14px;}
  .auth-note{font-size:10.5px; color:#94A3B8; text-align:center; margin-top:14px; line-height:1.6;}

  /* ============ shared bits ============ */
  .chip{background:#EEF2FF; color:#4F46E5; font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; white-space:nowrap;}
  .pill{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap;}
  .pill.hot{background:#FEF3C7; color:#B45309;}
  .pill.good{background:#DCFCE7; color:#15803D;}
  .pill.new{background:#EEF2FF; color:#4F46E5;}
  .pill.bad{background:#FEE2E2; color:#B91C1C;}
  .pill.warn{background:#FEF3C7; color:#B45309;}
  .btn{border:0; padding:11px 18px; border-radius:12px; font-weight:700; font-size:13.5px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; transition:transform .1s, filter .15s; font-family:inherit;}
  .btn:active{transform:scale(.96);}
  .btn.p{background:linear-gradient(90deg,#4F46E5,#9333EA); color:#fff; box-shadow:0 10px 20px -6px rgba(79,70,229,.45);}
  .btn.p:hover{filter:brightness(1.06);}
  .btn.p:disabled{opacity:.7; cursor:default; filter:none;}
  .btn.s{background:#F1F0FB; color:#0F172A;}
  .btn.s:hover{background:#E7E5F8;}
  .btn.d{background:#FEE2E2; color:#B91C1C;}
  .btn.d:hover{background:#FECACA;}
  .btn.ok{background:#16A34A; color:#fff;}
  .card{border:1px solid #E7E7F1; border-radius:16px; padding:16px; background:#fff; box-shadow:0 1px 2px rgba(15,23,42,.04);}
  .card h4{font-size:14px; margin:0 0 6px;}
  .card p{font-size:12px; color:#64748B; margin:0; line-height:1.6;}
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
  .grid.g2{grid-template-columns:repeat(2,1fr);}
  .grid.g4{grid-template-columns:repeat(4,1fr);}
  .grid.g5{grid-template-columns:repeat(5,1fr);}
  @media (max-width:900px){ .grid{grid-template-columns:1fr 1fr;} .grid.g4{grid-template-columns:1fr 1fr;} .grid.g5{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .grid{grid-template-columns:1fr;} .grid.g2{grid-template-columns:1fr;} .grid.g4{grid-template-columns:1fr 1fr;} .grid.g5{grid-template-columns:1fr;} }
  .bar{height:7px; background:#EEF2FF; border-radius:999px; overflow:hidden; margin-bottom:14px;}
  .bar i{display:block; height:100%; background:linear-gradient(90deg,#4F46E5,#DB2777); border-radius:999px; transition:width .5s ease;}
  .bar.thin{height:5px; margin-bottom:10px;}
  .kpi-row{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-size:12.5px;}
  .kpi-row b{font-weight:800; font-variant-numeric:tabular-nums;}
  .input{border:1.5px solid #E2E8F0; border-radius:10px; padding:11px 14px; font-size:13px; width:100%; font-family:inherit; transition:border-color .15s;}
  .input:focus{outline:none; border-color:#4F46E5;}
  .tagchip{font-size:11px; background:#F1F0FB; padding:6px 10px; border-radius:8px; display:inline-flex; gap:6px; align-items:center; margin:0 6px 6px 0;}
  .toggle{width:38px; height:22px; border-radius:999px; background:#E2E8F0; position:relative; cursor:pointer; flex:none; transition:background .2s; border:0;}
  .toggle i{position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s;}
  .toggle.on{background:linear-gradient(90deg,#4F46E5,#9333EA);}
  .toggle.on i{transform:translateX(16px);}

  /* ============ generic site/app header ============ */
  .site-header{
    position:sticky; top:37px; z-index:80; background:#fff; border-bottom:1px solid #EEEDF5;
    display:flex; align-items:center; justify-content:space-between; padding:12px 24px; gap:16px;
  }
  @media (max-width:640px){ .site-header{padding:10px 16px;} }
  .site-logo{display:flex; align-items:center; gap:8px; font-weight:800; font-size:15px; flex:none; font-family:'Plus Jakarta Sans',sans-serif;}
  .site-logo .sq{width:28px;height:28px;border-radius:9px;background:linear-gradient(135deg,#4F46E5,#DB2777); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800;}
  .site-nav{display:flex; gap:4px; align-items:center; flex-wrap:wrap; flex:1; padding:0 8px;}
  .site-nav a, .site-nav .dd>button{
    font-size:13px; font-weight:600; color:#475569; padding:8px 12px; border-radius:8px; white-space:nowrap; border:0; background:transparent; cursor:pointer; font-family:inherit;
  }
  .site-nav a:hover, .site-nav .dd>button:hover{background:#F5F5FC;}
  .site-nav a.on{color:#4F46E5; background:#EEF2FF;}
  .site-right{display:flex; align-items:center; gap:10px; flex:none;}
  .dd{position:relative;}
  .dd-menu{
    display:none; position:absolute; top:110%; left:0; background:#fff; border:1px solid #EEEDF5; border-radius:14px;
    box-shadow:0 16px 36px -10px rgba(15,23,42,.2); padding:6px; min-width:230px; z-index:95;
  }
  .dd.open .dd-menu{display:block;}
  .dd-menu a{display:block; padding:9px 12px; border-radius:9px; font-size:12.5px; font-weight:600; color:#334155;}
  .dd-menu a:hover{background:#F5F5FC; color:#4F46E5;}

  main{max-width:1180px; margin:0 auto; padding:28px 24px 80px;}
  @media (max-width:640px){ main{padding:20px 16px 60px;} }
  .page-head{margin-bottom:20px;}
  .page-head .eyebrow{font-size:11px; font-weight:700; color:#4F46E5; text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px;}
  .page-head h1{font-size:22px;}
  .page-head p{font-size:13px; color:#64748B; margin:6px 0 0; max-width:64ch;}

  /* ============ marketing page ============ */
  .mkt-hero{padding:56px 24px 40px; text-align:left; max-width:1180px; margin:0 auto;}
  @media (max-width:640px){ .mkt-hero{padding:36px 16px 28px;} }
  .mkt-badge{display:inline-flex; align-items:center; gap:6px; background:#EEF2FF; color:#4F46E5; font-size:11.5px; font-weight:700; padding:6px 12px; border-radius:999px; margin-bottom:16px;}
  .mkt-h1{font-size:42px; font-weight:800; line-height:1.2; margin:0 0 14px; letter-spacing:-.01em;}
  @media (max-width:640px){ .mkt-h1{font-size:28px;} }
  .mkt-grad{background:linear-gradient(90deg,#4F46E5,#9333EA,#DB2777); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .mkt-sub{font-size:15px; color:#475569; max-width:62ch; margin:0 0 22px; line-height:1.75;}
  .mkt-stats{display:flex; gap:40px; flex-wrap:wrap; margin-top:32px;}
  .mkt-stats .s b{display:block; font-size:26px; font-weight:800; font-variant-numeric:tabular-nums;}
  .mkt-stats .s span{font-size:11.5px; color:#64748B;}
  .mkt-section{padding:52px 24px;}
  @media (max-width:640px){ .mkt-section{padding:32px 16px;} }
  .mkt-section.tint{background:#F8F9FC;}
  .mkt-inner{max-width:1180px; margin:0 auto;}
  .mkt-tagline{font-size:11px; font-weight:700; color:#4F46E5; text-transform:uppercase; letter-spacing:.08em; margin-bottom:10px; text-align:center;}
  .mkt-h2{font-size:27px; text-align:center; margin-bottom:32px; letter-spacing:-.01em;}
  @media (max-width:640px){ .mkt-h2{font-size:20px;} }
  .mkt-feat-icon{width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center; font-size:18px; color:#fff; flex:none;}
  .mkt-feat-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:12px;}
  .mkt-feat-link{display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; color:#4F46E5; margin-top:10px;}
  .stars{color:#F59E0B; font-size:13px; letter-spacing:2px; margin-bottom:10px;}
  .quote{background:#fff; border:1px solid #EEEDF5; border-radius:16px; padding:18px;}
  .quote p{font-size:13px; line-height:1.7; color:#334155; margin:0 0 14px;}
  .quote .who-row{display:flex; align-items:center; gap:10px;}
  .quote .avatar{width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:12px; flex:none;}
  .quote .who b{font-size:12.5px; display:block;}
  .quote .who span{font-size:11px; color:#64748B;}
  .quote .stat{font-size:11px; color:#B45309; font-weight:700; margin-top:8px;}

  .faq-item{border-top:1px solid #EEEDF5; max-width:760px; margin:0 auto;}
  .faq-item:last-child{border-bottom:1px solid #EEEDF5;}
  .faq-q{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:16px 4px; cursor:pointer; font-size:14px; font-weight:700; color:#0F172A;}
  .faq-q .chev{flex:none; color:#94A3B8; transition:transform .2s; font-size:14px;}
  .faq-item.open .faq-q .chev{transform:rotate(180deg); color:#4F46E5;}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
  .faq-item.open .faq-a{max-height:200px;}
  .faq-a p{font-size:12.5px; color:#64748B; line-height:1.7; padding:0 4px 16px;}

  .calc-wrap{display:grid; grid-template-columns:1fr 1fr; gap:24px; background:#fff; border:1px solid #EEEDF5; border-radius:20px; padding:24px; box-shadow:0 1px 2px rgba(15,23,42,.04);}
  @media (max-width:820px){ .calc-wrap{grid-template-columns:1fr;} }
  .calc-label{font-size:12px; font-weight:700; color:#334155; margin-bottom:10px;}
  .calc-tabs{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:20px;}
  .calc-tabs span{font-size:11.5px; font-weight:700; padding:8px 12px; border-radius:9px; background:#F1F0FB; color:#475569; cursor:pointer;}
  .calc-tabs span.on{background:linear-gradient(90deg,#4F46E5,#9333EA); color:#fff;}
  .calc-slider{width:100%; accent-color:#4F46E5; margin-bottom:22px;}
  .calc-val{font-size:13px; font-weight:700; color:#4F46E5; float:right;}
  .calc-panel{background:linear-gradient(160deg,#F8F7FF,#FDF2FB); border-radius:16px; padding:20px;}
  .calc-panel .tag{font-size:10.5px; font-weight:700; color:#4F46E5; text-transform:uppercase; letter-spacing:.05em;}
  .calc-panel .big{font-size:32px; font-weight:800; margin:8px 0 2px; font-variant-numeric:tabular-nums;}
  .calc-panel .big span{font-size:12px; font-weight:600; color:#64748B;}
  .calc-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0;}
  .calc-grid .c{background:#fff; border-radius:12px; padding:10px 12px;}
  .calc-grid .c span{font-size:10.5px; color:#64748B; display:block; margin-bottom:4px;}
  .calc-grid .c b{font-size:15px; font-variant-numeric:tabular-nums;}

  .art-card{background:#fff; border:1px solid #EEEDF5; border-radius:16px; overflow:hidden;}
  .art-cover{height:120px; display:flex; align-items:center; justify-content:center; font-size:32px;}
  .art-body{padding:14px;}
  .art-body h4{font-size:13.5px; line-height:1.5; margin:8px 0 6px;}
  .art-body p{font-size:11.5px; color:#64748B; line-height:1.6; margin:0 0 10px;}
  .art-link{font-size:12px; font-weight:700; color:#4F46E5;}

  .brand-cta{background:linear-gradient(160deg,#111827,#1E1B3A); border-radius:24px; padding:40px 32px; color:#fff;}
  .brand-cta-top{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; margin-bottom:24px;}
  .brand-cta h2{font-size:24px; text-align:left; margin-bottom:8px; color:#fff;}
  .brand-cta p{font-size:13px; color:#CBD5E1; max-width:60ch; line-height:1.7;}
  .brand-cta-btns{display:flex; gap:10px; flex:none; flex-wrap:wrap;}
  .brand-mini{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  @media (max-width:820px){ .brand-mini{grid-template-columns:1fr;} }
  .brand-mini .m{background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:14px; padding:16px;}
  .brand-mini .m b{display:block; font-size:12.5px; color:#fff; margin-bottom:4px;}
  .brand-mini .m span{font-size:11.5px; color:#94A3B8; line-height:1.6;}

  .final-cta{background:linear-gradient(120deg,#111827,#3B2E6B,#831843); border-radius:24px; padding:48px 32px; text-align:center; color:#fff;}
  .final-cta h2{font-size:26px; color:#fff; margin-bottom:10px;}
  @media (max-width:640px){ .final-cta h2{font-size:20px;} }
  .final-cta p{font-size:13px; color:#CBD5E1; margin-bottom:22px;}
  .btn.gold{background:linear-gradient(90deg,#F59E0B,#FBBF24); color:#78350F;}
  .btn.ghost{background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.35);}

  .mkt-footer{padding:36px 24px; text-align:center; border-top:1px solid #EEEDF5; background:#fff;}
  .mkt-footer p{font-size:11.5px; color:#64748B;}

  /* ============ creator/brand extras ============ */
  .ring{width:120px;height:120px;border-radius:50%; background:conic-gradient(#4F46E5 0 82%, #EEF2FF 0); display:flex; align-items:center; justify-content:center; flex:none;}
  .ring i{width:96px;height:96px;border-radius:50%; background:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; font-style:normal;}
  .ring i b{font-size:26px;}
  .ring i span{font-size:10px; color:#64748B;}
  .timeline{border-left:2px solid #E0E7FF; margin-left:8px;}
  .tstep{position:relative; padding:0 0 20px 20px;}
  .tstep::before{content:""; position:absolute; left:-6.5px; top:2px; width:11px; height:11px; border-radius:50%; background:#4F46E5;}
  .tstep b{display:block; font-size:12.5px; margin-bottom:3px;}
  .tstep span{font-size:11.5px; color:#64748B; line-height:1.6;}
  .media{border:1px solid #EEEDF5; border-radius:12px; overflow:hidden;}
  .media .thumb{height:88px; background:linear-gradient(135deg,#E0E7FF,#FCE7F3); display:flex; align-items:center; justify-content:center; font-size:22px;}
  .media .info{padding:10px;}
  .media .info b{font-size:11.5px; display:block; margin-bottom:4px;}
  .media .info span{font-size:10px; color:#64748B;}
  .campaign{border:1px solid #EEEDF5; border-radius:16px; padding:16px; margin-bottom:12px; background:#fff;}
  .campaign .top{display:flex; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap;}
  .campaign h4{font-size:14px; margin:0;}
  .campaign .match{background:#DCFCE7; color:#15803D; font-size:11px; font-weight:800; padding:4px 9px; border-radius:999px; white-space:nowrap;}
  .campaign .meta{display:flex; gap:18px; font-size:11px; color:#64748B; flex-wrap:wrap; margin:8px 0;}
  .campaign .meta b{color:#0F172A; display:block; font-size:12px;}
  .plat-row{display:flex; align-items:center; gap:12px; border:1px solid #EEEDF5; border-radius:14px; padding:12px 14px; margin-bottom:10px; flex-wrap:wrap; background:#fff;}
  .plat-row .ico{width:36px;height:36px;border-radius:10px; background:#F1F0FB; display:flex; align-items:center; justify-content:center; font-size:15px; flex:none;}
  .plat-row .body{flex:1; min-width:160px;}
  .plat-row .body b{font-size:12.5px; display:block;}
  .plat-row .body span{font-size:11px; color:#64748B;}
  .plat-row .stat{text-align:right; flex:none;}
  .plat-row .stat b{font-size:12.5px; display:block;}
  .plat-row .stat span{font-size:10.5px; color:#64748B;}
  .queue-item{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; border:1px solid #EEEDF5; border-radius:14px; padding:12px 14px; margin-bottom:10px; flex-wrap:wrap; background:#fff;}
  .queue-item b{font-size:12.5px; display:block; margin-bottom:3px;}
  .queue-item p{font-size:11.5px; color:#64748B; margin:0 0 6px; line-height:1.5;}
  .tier-card{border:1px solid #EEEDF5; border-radius:16px; padding:16px; position:relative; background:#fff;}
  .tier-card.on{border-color:#4F46E5; box-shadow:0 0 0 1px #4F46E5, 0 10px 24px -12px rgba(79,70,229,.35);}
  .tier-card .badge{position:absolute; top:-10px; right:12px; background:linear-gradient(90deg,#4F46E5,#9333EA); color:#fff; font-size:10px; font-weight:700; padding:3px 9px; border-radius:999px;}
  .tier-card h4{font-size:13px; margin-bottom:2px;}
  .tier-card .price{font-size:23px; font-weight:800; margin:8px 0 2px; font-variant-numeric:tabular-nums;}
  .tier-card .price span{font-size:11px; font-weight:600; color:#64748B;}
  .tier-card .tk{font-size:11px; color:#64748B; margin-bottom:10px;}
  .tier-card ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
  .tier-card li{font-size:11px; color:#334155; display:flex; gap:6px; line-height:1.5;}
  .tier-card li::before{content:"✓"; color:#16A34A; font-weight:800;}
  .contract-card{border:1px solid #EEEDF5; border-radius:16px; padding:14px; margin-bottom:12px; background:#fff;}
  .contract-card .head{display:flex; justify-content:space-between; gap:10px; margin-bottom:6px; flex-wrap:wrap;}
  .contract-card b{font-size:12.5px;}
  .contract-card p{font-size:11.5px; color:#64748B; margin:0 0 8px;}
  .contract-card .money{display:flex; justify-content:space-between; font-size:11px; color:#64748B; border-top:1px dashed #EEEDF5; padding-top:8px; flex-wrap:wrap; gap:6px;}
  .contract-card .money b{color:#0F172A; font-size:12px;}
  .funnel-row{display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap;}
  .funnel-row .lbl{width:230px; flex:none; font-size:11.5px; color:#334155;}
  .funnel-row .bar{flex:1; min-width:120px; height:20px; background:#F1F0FB; border-radius:6px; overflow:hidden; margin:0;}
  .funnel-row .bar i{display:block; height:100%; background:linear-gradient(90deg,#4F46E5,#9333EA);}
  .funnel-row .val{width:90px; flex:none; text-align:right; font-size:11.5px; font-weight:700; font-variant-numeric:tabular-nums;}
  .logline{border:1px solid #EEEDF5; border-radius:12px; padding:10px 12px; margin-bottom:8px; font-size:11.5px; background:#fff;}
  .logline .top{display:flex; justify-content:space-between; margin-bottom:4px; color:#64748B; font-size:10.5px; flex-wrap:wrap; gap:6px;}
  .logline .prompt{color:#334155;}
  .stepper{display:flex; gap:6px; margin:10px 0; flex-wrap:wrap;}
  .stepper span{font-size:10px; background:#F1F0FB; color:#64748B; padding:4px 9px; border-radius:999px; font-weight:700;}
  .stepper span.on{background:linear-gradient(90deg,#4F46E5,#9333EA); color:#fff;}
  .cover-mock{background:linear-gradient(160deg,#111827,#1E1B3A); border-radius:16px; padding:32px 20px; text-align:center;}
  .cover-mock .tag{font-size:10px; letter-spacing:.1em; color:#94A3B8; text-transform:uppercase; margin-bottom:10px;}
  .cover-mock .txt{font-size:22px; font-weight:800; color:#FCD34D; line-height:1.4;}
  .cover-mock .note{font-size:11px; color:#94A3B8; margin-top:10px;}
  .spinner{width:14px;height:14px;border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:spin .7s linear infinite; display:inline-block;}
  @keyframes spin{to{transform:rotate(360deg);}}
  .empty-state{border:1.5px dashed #E2E8F0; border-radius:16px; padding:36px 20px; text-align:center; color:#64748B; font-size:12.5px;}

  /* ============ admin app shell ============ */
  .admin-shell{display:grid; grid-template-columns:230px 1fr; min-height:100vh;}
  @media (max-width:900px){ .admin-shell{grid-template-columns:1fr;} }
  .admin-sidebar{
    background:#0F1024; color:#B9BBD6; padding:16px 12px; position:sticky; top:37px; align-self:start;
    max-height:calc(100vh - 37px); overflow-y:auto;
  }
  @media (max-width:900px){
    .admin-sidebar{position:fixed; left:0; top:37px; bottom:0; width:250px; z-index:85; transform:translateX(-100%); transition:transform .2s; max-height:none;}
    .admin-sidebar.open{transform:translateX(0);}
  }
  .admin-brand{display:flex; align-items:center; gap:10px; padding:6px 8px 16px; border-bottom:1px solid #23253F; margin-bottom:12px;}
  .admin-brand b{font-size:13px; color:#fff; display:block;}
  .admin-brand span{font-size:10.5px; color:#7C7E9C;}
  .admin-grp{margin:14px 0 6px; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#6E70A0; padding:0 8px;}
  .admin-sidebar a{display:flex; justify-content:space-between; gap:6px; padding:9px 10px; border-radius:9px; color:#CDD0E8; margin-bottom:2px; font-size:12.5px;}
  .admin-sidebar a:hover{background:#1B1D38;}
  .admin-sidebar a.on{background:linear-gradient(90deg,#4F46E5,#7C3AED); color:#fff;}
  .admin-sidebar a small{background:#292B4D; color:#B9BBD6; font-size:9px; padding:1px 6px; border-radius:999px;}
  .admin-sidebar a.on small{background:rgba(255,255,255,.22); color:#fff;}
  .admin-sidebar .foot{border-top:1px solid #23253F; margin-top:14px; padding-top:10px;}
  .admin-main{padding:22px 26px 70px; min-width:0;}
  @media (max-width:640px){ .admin-main{padding:18px 16px 60px;} }
  .admin-topbar{display:none; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid #EEEDF5; background:#fff; position:sticky; top:37px; z-index:60;}
  @media (max-width:900px){ .admin-topbar{display:flex;} }
  .admin-topbar button{border:0; background:#F1F0FB; border-radius:8px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer;}
  .admin-scrim{display:none; position:fixed; inset:37px 0 0 0; background:rgba(0,0,0,.35); z-index:80;}
  .admin-scrim.show{display:block;}
  .adm-crumb{font-size:11px; color:#64748B; margin-bottom:8px;}
  .adm-h{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; gap:10px; flex-wrap:wrap;}
  .adm-h h1{font-size:19px; margin-bottom:4px;}
  .adm-h p{font-size:12px; color:#64748B; margin:0;}
  .adm-kpi{display:grid; grid-template-columns:repeat(6,1fr); gap:10px; margin-bottom:18px;}
  .adm-kpi.k4{grid-template-columns:repeat(4,1fr);}
  @media (max-width:900px){ .adm-kpi, .adm-kpi.k4{grid-template-columns:repeat(2,1fr);} }
  .adm-kpi .c{background:#fff; border:1px solid #EEEDF5; border-radius:14px; padding:12px;}
  .adm-kpi .c span{font-size:10.5px; color:#64748B; display:block; margin-bottom:6px;}
  .adm-kpi .c b{font-size:16px; font-variant-numeric:tabular-nums;}
  .adm-nav4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px;}
  @media (max-width:900px){ .adm-nav4{grid-template-columns:1fr 1fr;} }
  .adm-navcard{background:#fff; border:1px solid #EEEDF5; border-radius:14px; padding:14px;}
  .adm-navcard b{display:block; font-size:12.5px; margin-bottom:4px;}
  .adm-navcard p{font-size:11px; color:#64748B; margin:0 0 8px; line-height:1.5;}
  .adm-navcard span{font-size:11px; color:#4F46E5; font-weight:700;}
  .kanban{display:grid; grid-template-columns:repeat(5,1fr); gap:10px;}
  @media (max-width:900px){ .kanban{grid-template-columns:1fr 1fr;} }
  @media (max-width:600px){ .kanban{grid-template-columns:1fr;} }
  .kanban .col{background:#fff; border:1px solid #EEEDF5; border-radius:14px; padding:10px; transition:box-shadow .2s;}
  .kanban .col.hl{box-shadow:0 0 0 2px #4F46E5;}
  .kanban .col .n{font-size:11px; color:#64748B; margin-bottom:2px;}
  .kanban .col .t{font-size:12px; font-weight:700; margin-bottom:8px;}
  .kanban .col .count{font-size:20px; font-weight:800; font-variant-numeric:tabular-nums;}
  .modgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
  @media (max-width:640px){ .modgrid{grid-template-columns:1fr;} }
  .modcard{background:#fff; border:1px solid #EEEDF5; border-radius:14px; padding:14px;}
  .modcard .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; gap:8px; flex-wrap:wrap;}
  .modcard .top b{font-size:12px;}
  .modcard .top .up{font-size:11px; color:#15803D; font-weight:700; white-space:nowrap;}
  .modcard p{font-size:11px; color:#64748B; margin:0 0 8px; line-height:1.5;}
  .modcard .stats{display:flex; gap:14px; font-size:10.5px; color:#64748B; flex-wrap:wrap;}
  .modcard .stats b{color:#0F172A; display:block; font-size:12px; font-variant-numeric:tabular-nums;}
  .switch-row{display:flex; justify-content:space-between; align-items:center; gap:10px; padding:8px 0; border-top:1px solid #F1F0FB;}
  .switch-row .lbl{font-size:11.5px; font-weight:700;}
  .switch-row .sub{font-size:10.5px; color:#64748B; margin-top:2px;}
  .cmsform label{display:block; font-size:11.5px; font-weight:700; color:#475569; margin-bottom:6px;}
  .cmsform .row{margin-bottom:14px;}
  .cmsform textarea.input{resize:vertical; font-family:inherit;}
  .cmstabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
  .cmstabs span{font-size:11.5px; padding:7px 12px; border-radius:9px; background:#F1F0FB; color:#475569; font-weight:600;}
  .cmstabs span.on{background:linear-gradient(90deg,#4F46E5,#9333EA); color:#fff;}
  .adm-table-wrap{overflow-x:auto;}
  .adm-table{width:100%; border-collapse:collapse; font-size:11.5px;}
  .adm-table th{text-align:left; color:#64748B; font-weight:600; padding:8px 10px; border-bottom:1px solid #EEEDF5; white-space:nowrap;}
  .adm-table td{padding:10px; border-bottom:1px solid #F5F5FC; vertical-align:top; white-space:nowrap;}
  .adm-table tr:last-child td{border-bottom:0;}
  .live-preview{border:1px solid #EEEDF5; border-radius:14px; overflow:hidden; background:#fff;}
  .live-preview .bar-top{background:#F1F0FB; padding:6px 10px; font-size:10px; color:#64748B; font-weight:700; display:flex; align-items:center; gap:6px;}
  .live-preview .bar-top i{width:6px;height:6px;border-radius:50%; background:#22C55E; display:inline-block;}

  .footer-note{text-align:center; font-size:11.5px; color:#64748B; padding:22px 16px 32px;}
  .footer-note code{font-family:'JetBrains Mono',monospace; background:#EEECF7; padding:2px 6px; border-radius:5px;}
  .admin-shell > div{min-width:0;}
  body.in-app #coachWidget{display:none;}
  .app-stage{display:flex; gap:44px; justify-content:center; align-items:flex-start; padding:26px 16px 40px; background:#F1F0FB; min-height:calc(100vh - 44px);}
  .app-side{max-width:300px; padding-top:48px;}
  .app-phone{width:390px; height:800px; max-height:calc(100vh - 96px); min-height:560px; background:#F7F7FC; border:10px solid #0F172A; border-radius:44px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 60px -25px rgba(15,23,42,.45); flex:none;}
  .app-status{display:flex; justify-content:space-between; align-items:center; padding:8px 20px 6px; font-size:11px; color:#0F172A; background:#F7F7FC;}
  .app-status span{color:#64748B; font-weight:700;}
  .app-screen{flex:1; overflow-y:auto; padding:10px 14px 18px;}
  .app-tabbar{display:grid; grid-template-columns:repeat(5,1fr); background:#fff; border-top:1px solid #EEEDF5; padding:6px 4px 10px;}
  .app-tabbar a{display:flex; flex-direction:column; align-items:center; gap:2px; font-size:10px; color:#94A3B8; text-decoration:none; font-weight:700; padding:4px 0;}
  .app-tabbar a i{font-style:normal; font-size:18px; filter:grayscale(1); opacity:.6;}
  .app-tabbar a.on{color:#4F46E5;}
  .app-tabbar a.on i{filter:none; opacity:1;}
  .app-card{background:#fff; border:1px solid #EEEDF5; border-radius:16px; padding:12px; margin-bottom:10px;}
  .app-h{font-size:12.5px; font-weight:800; margin:14px 2px 8px;}
  .app-seg{display:grid; grid-template-columns:1fr 1fr; background:#ECEBF7; border-radius:12px; padding:3px; margin-bottom:12px;}
  .app-seg span{text-align:center; font-size:11.5px; font-weight:700; color:#64748B; padding:7px 0; border-radius:10px; cursor:pointer;}
  .app-seg span.on{background:#fff; color:#4F46E5; box-shadow:0 1px 3px rgba(15,23,42,.12);}
  @media (max-width:820px){ .app-side{display:none;} }
  @media (max-width:600px){ .app-stage{padding:0;} .app-phone{width:100%; height:calc(100dvh - 44px); max-height:none; border:0; border-radius:0; box-shadow:none;} }

/* ===== 正式系統補充（server-rendered 版型用） ===== */
.env-strip{display:none;}
body.has-topstrip .env-strip{display:flex;}
.flash-host{position:fixed;top:16px;right:16px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.flash{background:#0F172A;color:#fff;padding:10px 14px;border-radius:10px;font-size:13px;box-shadow:0 10px 30px rgba(15,23,42,.25);pointer-events:auto;max-width:360px;}
.flash[data-tone="ok"]{background:#16A34A;} .flash[data-tone="bad"]{background:#DC2626;} .flash[data-tone="info"]{background:#4F46E5;}
.field-error{display:block;color:#DC2626;font-size:11.5px;margin-top:4px;}
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:#F8F9FC;padding:24px 16px;}
.auth-page .auth-card{position:relative;max-width:440px;width:100%;}
.empty{border:1px dashed #E2E8F0;border-radius:12px;padding:28px 16px;text-align:center;color:#64748B;font-size:13px;background:#fff;}
.empty b{display:block;font-size:14px;color:#0F172A;margin-bottom:4px;}
.pagination{display:flex;gap:6px;align-items:center;justify-content:flex-end;margin-top:12px;font-size:12.5px;}
.pagination a,.pagination span{padding:6px 10px;border:1px solid #E2E8F0;border-radius:8px;color:#334155;text-decoration:none;background:#fff;}
.pagination .is-active{background:#4F46E5;color:#fff;border-color:#4F46E5;}
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:900;display:none;align-items:center;justify-content:center;padding:16px;}
.modal-backdrop.show{display:flex;}
.modal{background:#fff;border-radius:16px;max-width:560px;width:100%;max-height:90vh;overflow:auto;padding:20px;box-shadow:0 30px 80px rgba(15,23,42,.3);}
.modal h3{margin:0 0 12px;font-size:16px;}
.inline-form{display:inline;}
.table-wrap{overflow-x:auto;max-width:100%;}
.admin-main,.admin-main>*,.modcard{min-width:0;}
.adm-table-wrap{overflow-x:auto;max-width:100%;}
.app-standalone{min-height:100vh;background:#F8F9FC;}
.app-standalone .app-stage{padding:24px 16px;}
@media (max-width:860px){.app-standalone .app-stage{padding:0;} .app-standalone .app-side{display:none;} .app-standalone .app-phone{width:100%;max-width:none;border-radius:0;min-height:100vh;border:0;box-shadow:none;}}
/* ===== 版型補充 ===== */
.site-logo{text-decoration:none;color:inherit;}
.dd-menu form{display:block;} .dd-link{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 12px;font:inherit;font-size:12.5px;color:#334155;cursor:pointer;}
.dd-link:hover{background:#F1F5F9;}
.admin-logout{background:none;border:0;color:#94A3B8;font:inherit;font-size:11.5px;padding:6px 14px;cursor:pointer;text-align:left;width:100%;}
.admin-logout:hover{color:#fff;}
.admin-sidebar.open{transform:translateX(0);}
.admin-scrim.show{display:block;}
.adm-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.trial-banner a{margin-left:auto;}
@media (max-width:1024px){ .admin-sidebar{top:0;} .admin-scrim{inset:0;} }
.app-back{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:#4F46E5;text-decoration:none;margin-bottom:8px;}
/* 頂列在手機寬度：導覽可橫向捲動、右側按鈕不撐破版面 */
@media (max-width:820px){ .site-header{flex-wrap:wrap;gap:8px;} .site-nav{order:3;width:100%;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;} .site-right{margin-left:auto;flex-wrap:wrap;justify-content:flex-end;gap:6px;} .site-right .btn,.site-right .chip{font-size:11px;padding:6px 9px;} }
/* 手機寬度：沒有包在 .adm-table-wrap／.table-wrap 的表格自行橫向捲動，避免撐破版面 */
@media (max-width:820px){ :not(.adm-table-wrap):not(.table-wrap) > table.adm-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;} }
/* 格線子項允許縮到比內容窄，讓內層表格的捲動容器生效 */
.modgrid > *, .mk-kpi > *, .grid > *, .adm-kpi > *{min-width:0;}
@media (max-width:640px){ .mk-kpi{grid-template-columns:repeat(2,1fr) !important;} }
[data-chart]{overflow:hidden;max-width:100%;}