:root{
      --bg:#000;
      --text:#f7f2eb;
      --muted:rgba(247,242,235,.62);
      --line:rgba(255,255,255,.12);
      --panel:rgba(255,255,255,.055);
      --panel2:rgba(255,255,255,.035);
      --orange:#ff7a1a;
      --gold:#ffb000;
      --green:#76f7a8;
      --red:#ff6b6b;
      --blue:#8ab4ff;
    }

    *{box-sizing:border-box}

    html,body{
      margin:0;
      min-height:100vh;
      background:#000;
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Noto Sans TC","PingFang TC",sans-serif;
    }

    a{color:inherit;text-decoration:none}

    .nav{
      position:sticky;
      top:24px;
      z-index:100;
      width:min(1180px,calc(100% - 44px));
      min-height:64px;
      margin:24px auto 0;
      padding:0 22px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      border:1px solid rgba(255,255,255,.14);
      border-radius:999px;
      background:rgba(0,0,0,.86);
      backdrop-filter:blur(22px);
      -webkit-backdrop-filter:blur(22px);
    }

    .brand{
      display:flex;
      align-items:center;
      flex:0 0 auto;
    }

    .brand img{
      display:block;
      height:28px;
      width:auto;
      object-fit:contain;
    }

    .links{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:22px;
      flex-wrap:wrap;
    }

    .links a{
      color:rgba(255,255,255,.66);
      font-size:14px;
      font-weight:760;
      white-space:nowrap;
    }

    .links a:hover{color:#fff}

    main{
      width:min(1180px,calc(100% - 44px));
      margin:0 auto;
      padding:76px 0 90px;
    }

    .hero{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:18px;
      align-items:stretch;
    }

    .hero-card,
    .side-card,
    .orders-card{
      border:1px solid var(--line);
      background:linear-gradient(180deg,var(--panel),var(--panel2));
      border-radius:32px;
      box-shadow:0 30px 90px rgba(0,0,0,.34);
      backdrop-filter:blur(24px);
      -webkit-backdrop-filter:blur(24px);
    }

    .hero-card{
      padding:36px;
      min-height:260px;
      position:relative;
      overflow:hidden;
    }

    .hero-card:after{
      content:"";
      position:absolute;
      right:-120px;
      top:-120px;
      width:330px;
      height:330px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(255,122,26,.30),transparent 64%);
      pointer-events:none;
    }

    .kicker{
      color:var(--orange);
      font-size:13px;
      font-weight:950;
      letter-spacing:.12em;
      text-transform:uppercase;
      margin-bottom:14px;
    }

    h1{
      margin:0;
      font-size:clamp(42px,6vw,74px);
      line-height:1;
      letter-spacing:-.07em;
      font-weight:950;
    }

    .lead{
      margin:18px 0 0;
      color:var(--muted);
      font-size:17px;
      line-height:1.75;
      max-width:720px;
      position:relative;
      z-index:1;
    }

    .member-pill{
      display:inline-flex;
      align-items:center;
      gap:9px;
      margin-top:24px;
      padding:10px 14px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(0,0,0,.28);
      border-radius:999px;
      color:#fff;
      font-size:13px;
      font-weight:800;
      position:relative;
      z-index:1;
    }

    .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--green);
      box-shadow:0 0 16px rgba(118,247,168,.8);
    }

    .side-card{
      padding:26px;
      display:grid;
      gap:14px;
      align-content:start;
    }

    .metric{
      padding:18px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.22);
      border-radius:22px;
    }

    .metric span{
      display:block;
      color:var(--muted);
      font-size:12px;
      margin-bottom:8px;
    }

    .metric b{
      font-size:28px;
      letter-spacing:-.04em;
    }

    .notice{
      display:none;
      margin-bottom:18px;
      border:1px solid rgba(255,176,0,.34);
      background:rgba(255,176,0,.10);
      border-radius:22px;
      padding:18px 20px;
    }

    .notice b{
      color:var(--gold);
      font-size:18px;
      font-weight:950;
    }

    .notice p{
      margin:8px 0 0;
      color:var(--muted);
      line-height:1.7;
    }

    .orders-card{
      margin-top:18px;
      padding:28px;
    }

    .orders-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:18px;
      margin-bottom:18px;
    }

    .orders-head h2{
      margin:0;
      font-size:28px;
      letter-spacing:-.04em;
    }

    .orders-head p{
      margin:6px 0 0;
      color:var(--muted);
      line-height:1.6;
      font-size:14px;
    }

    .toolbar{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
    }

    .input{
      width:280px;
      max-width:100%;
      border:1px solid rgba(255,255,255,.13);
      background:rgba(0,0,0,.32);
      color:#fff;
      border-radius:999px;
      padding:12px 14px;
      outline:none;
      font-size:14px;
    }

    .btn{
      border:0;
      border-radius:999px;
      padding:12px 16px;
      font-size:14px;
      font-weight:900;
      cursor:pointer;
      background:linear-gradient(135deg,var(--gold),var(--orange));
      color:#120a03;
    }

    .btn.secondary{
      border:1px solid rgba(255,255,255,.13);
      background:rgba(255,255,255,.06);
      color:#fff;
    }

    .order-list{
      display:grid;
      gap:12px;
      margin-top:18px;
    }

    .order{
      display:grid;
      grid-template-columns:1fr auto;
      gap:14px;
      align-items:center;
      padding:18px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(0,0,0,.24);
      border-radius:22px;
    }

    .order h3{
      margin:0;
      font-size:18px;
      letter-spacing:-.025em;
    }

    .meta{
      margin-top:8px;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:13px;
      line-height:1.5;
    }

    .status{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:86px;
      padding:9px 12px;
      border-radius:999px;
      font-size:13px;
      font-weight:950;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.06);
    }

    .status.paid{
      color:#06140b;
      background:var(--green);
      border-color:var(--green);
    }

    .status.created{
      color:#180f00;
      background:var(--gold);
      border-color:var(--gold);
    }

    .status.failed{
      color:#fff;
      background:rgba(255,107,107,.22);
      border-color:rgba(255,107,107,.45);
    }

    .empty{
      padding:28px;
      border:1px dashed rgba(255,255,255,.16);
      border-radius:22px;
      color:var(--muted);
      line-height:1.7;
      text-align:center;
    }

    footer{
      width:min(1180px,calc(100% - 44px));
      margin:0 auto;
      padding:42px 0 52px;
      border-top:1px solid rgba(255,255,255,.14);
      color:rgba(255,255,255,.72);
      text-align:center;
    }

    .footer-links{
      margin-top:16px;
      display:flex;
      justify-content:center;
      gap:16px;
      flex-wrap:wrap;
    }

    .footer-links a,
    .footer-links button{
      color:rgba(255,255,255,.72);
      background:transparent;
      border:0;
      padding:0;
      font:inherit;
      font-size:13px;
      cursor:pointer;
    }

    @media(max-width:860px){
      .nav{
        top:12px;
        width:min(100% - 28px,1180px);
        margin-top:12px;
        height:auto;
        min-height:auto;
        padding:16px;
        border-radius:28px;
        flex-direction:column;
        align-items:flex-start;
      }

      .links{
        justify-content:flex-start;
        gap:12px;
      }

      main{
        width:min(100% - 32px,1180px);
        padding-top:42px;
      }

      .hero{
        grid-template-columns:1fr;
      }

      .orders-head{
        align-items:flex-start;
        flex-direction:column;
      }

      .order{
        grid-template-columns:1fr;
      }

      footer{
        width:min(100% - 32px,1180px);
      }
    }
  

/* === IX_MEMBER_ORDERS_UI_POLISH_V1 === */

/* 整體更像正式會員訂單頁 */
main{
  padding-top:48px !important;
}

.notice{
  margin-bottom:16px !important;
  border-color:rgba(118,247,168,.34) !important;
  background:linear-gradient(135deg,rgba(118,247,168,.10),rgba(255,176,0,.055)) !important;
  border-radius:24px !important;
  padding:16px 20px !important;
}

.notice b{
  color:var(--green) !important;
  font-size:18px !important;
}

.notice p{
  margin-top:6px !important;
  font-size:14px !important;
}

/* Hero 縮小，讓訂單更快出現 */
.hero{
  grid-template-columns:1fr 420px !important;
  gap:16px !important;
}

.hero-card{
  min-height:230px !important;
  padding:30px 34px !important;
}

.hero-card h1{
  font-size:clamp(48px,5.2vw,68px) !important;
}

.lead{
  max-width:680px !important;
  font-size:16px !important;
}

.side-card{
  padding:22px !important;
  gap:12px !important;
}

.metric{
  padding:16px 18px !important;
}

.metric b{
  font-size:26px !important;
}

/* 訂單區更像正式後台 */
.orders-card{
  margin-top:16px !important;
  padding:26px 28px 28px !important;
  border-radius:30px !important;
}

.orders-head{
  align-items:center !important;
  margin-bottom:22px !important;
}

.orders-head h2{
  font-size:30px !important;
}

.orders-head p{
  font-size:13px !important;
}

.toolbar{
  gap:10px !important;
}

.input{
  width:300px !important;
  height:46px !important;
  border-radius:999px !important;
  background:rgba(0,0,0,.46) !important;
}

.btn{
  height:46px !important;
  padding:0 18px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* 訂單卡片：更乾淨、有層次 */
.order-list{
  gap:10px !important;
}

.order{
  position:relative !important;
  grid-template-columns:1fr auto !important;
  padding:18px 18px 18px 20px !important;
  border-radius:20px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.042),rgba(255,255,255,.020)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  transition:transform .18s ease,border-color .18s ease,background .18s ease !important;
}

.order:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(255,255,255,.18) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.028)) !important;
}

.order h3{
  font-size:18px !important;
  font-weight:950 !important;
  letter-spacing:-.035em !important;
  margin-bottom:8px !important;
}

/* meta 變成小膠囊資訊 */
.meta{
  display:flex !important;
  gap:8px !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  margin-top:0 !important;
}

.meta span{
  display:inline-flex !important;
  align-items:center !important;
  min-height:26px !important;
  padding:5px 9px !important;
  border-radius:999px !important;
  color:rgba(247,242,235,.66) !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  font-size:12px !important;
  line-height:1.2 !important;
}

/* 狀態：已付款明顯，確認中弱化 */
.status{
  min-width:88px !important;
  height:40px !important;
  padding:0 14px !important;
  font-size:13px !important;
  border-radius:999px !important;
}

.status.paid{
  color:#041008 !important;
  background:linear-gradient(135deg,#76f7a8,#baffcf) !important;
  border-color:rgba(118,247,168,.9) !important;
  box-shadow:0 0 24px rgba(118,247,168,.18) !important;
}

.status.created{
  color:rgba(247,242,235,.70) !important;
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.12) !important;
}

/* 已付款訂單加一條綠色線 */
.order:has(.status.paid){
  border-color:rgba(118,247,168,.30) !important;
}

.order:has(.status.paid)::before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#76f7a8,rgba(118,247,168,.18));
}

/* Footer 不要太遠太暗 */
footer{
  margin-top:42px !important;
  padding-top:34px !important;
  color:rgba(255,255,255,.68) !important;
}

@media(max-width:980px){
  .hero{
    grid-template-columns:1fr !important;
  }

  .orders-head{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  .toolbar{
    width:100% !important;
    justify-content:flex-start !important;
  }

  .input{
    width:100% !important;
  }
}

@media(max-width:720px){
  main{
    padding-top:34px !important;
  }

  .hero-card{
    padding:26px !important;
  }

  .orders-card{
    padding:22px !important;
  }

  .order{
    grid-template-columns:1fr !important;
  }

  .status{
    justify-self:flex-start !important;
  }
}