:root{
  --bg:#0b1220;
  --panel:#121a2b;
  --panel-2:#172133;
  --line:#263247;
  --text:#eef4ff;
  --muted:#9db0d1;
  --brand:#6ea8fe;
  --brand-2:#7c3aed;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.28);
  --radius:20px;
}

:root.light-mode{
  --bg:#edf3f8;
  --panel:#f8fbff;
  --panel-2:#eef4fa;
  --line:#d8e2ee;
  --text:#172235;
  --muted:#64748b;
  --brand:#4f8cff;
  --brand-2:#7c3aed;
  --ok:#16a34a;
  --warn:#d97706;
  --danger:#dc2626;
  --shadow:0 10px 24px rgba(15,23,42,.08);
  --radius:20px;
}

*{
  box-sizing:border-box;
}

html,body{
  margin:0;
  padding:0;
  background:linear-gradient(180deg,var(--bg) 0%, var(--panel-2) 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans TC",Arial,sans-serif;
}

a{
  color:var(--brand);
  text-decoration:none;
}

img{
  max-width:100%;
  display:block;
}

.container{
  max-width:1400px;
  margin:0 auto;
  padding:24px;
}

.topbar{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(11,18,32,.78);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.06);
}

.topbar-inner{
  max-width:1400px;
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.brand{
  font-weight:800;
  letter-spacing:.4px;
}

.nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--line);
  font:inherit;
  line-height:1.2;
}

.hero{
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.12), transparent 35%),
    radial-gradient(circle at top left, rgba(110,168,254,.10), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:28px;
  padding:28px;
  margin-bottom:22px;
}

.badge.danger{
  background:#ef4444;
  color:#fff;
}

/* 首頁固定三欄 */
.grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:24px;
  align-items:start;
}

.grid.cards{
  grid-template-columns:repeat(3, minmax(0,1fr));
}

.card{
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:18px;
}

.event-card{
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:520px;
}

/* 首頁圖固定比例 */
.event-cover{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:18px;
  display:block;
}

/* detail頁主圖 */
.detail-cover{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:18px;
}

.event-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.meta{
  padding:6px 10px;
  border-radius:999px;
  background:var(--panel);
  border:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
}

.title{
  font-size:1.4rem;
  font-weight:800;
}

.desc{
  color:var(--muted);
  line-height:1.7;
}

.desc-preview{
  max-height:180px;
  overflow:hidden;
  position:relative;
}

.desc-preview::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:50px;
  background:linear-gradient(to bottom, rgba(18,26,43,0), rgba(18,26,43,1));
}

.actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:auto;
}

.btn{
  appearance:none;
  border:none;
  cursor:pointer;
  padding:12px 16px;
  border-radius:14px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  color:white;
  font-weight:700;
  box-shadow:var(--shadow);
}

.btn.secondary{
  background:#182338;
}

.btn.danger{
  background:linear-gradient(135deg,#ef4444,#dc2626);
}

.btn.ok{
  background:linear-gradient(135deg,#22c55e,#16a34a);
}

.form-grid{
  display:grid;
  gap:14px;
}

label{
  display:block;
  font-size:14px;
  color:var(--muted);
  margin-bottom:6px;
}

input,select,textarea{
  width:100%;
  background:var(--panel);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  outline:none;
}

textarea{
  min-height:120px;
  resize:vertical;
}

.two-col{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:24px;
}

.badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:13px;
  font-weight:700;
}

.badge.paid{
  background:rgba(34,197,94,.14);
  color:#86efac;
}

.badge.pending{
  background:rgba(245,158,11,.14);
  color:#fcd34d;
}

.badge.rejected{
  background:rgba(239,68,68,.14);
  color:#fca5a5;
}

.table-wrap{
  overflow:auto;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.06);
}

table{
  width:100%;
  border-collapse:collapse;
  background:var(--panel);
}

th,td{
  padding:14px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  text-align:left;
  vertical-align:top;
}

th{
  background:var(--panel-2);
  font-size:14px;
}

.ticket-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:14px;
  margin-top:14px;
}

.ticket-item{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:18px;
  padding:14px;
  text-align:center;
}

.ticket-qr{
  width:min(80vw,320px);
  height:auto;
  max-width:320px;
  margin:0 auto 10px;
  border-radius:18px;
  background:white;
  padding:10px;
}

.empty{
  padding:28px;
  text-align:center;
  color:var(--muted);
}

.order-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
  align-items:start;
}

.order-card{
  margin:0;
}

@media (max-width:1200px){
  .grid,
  .grid.cards,
  .stat-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

/* dashboard 統計方塊 */
.stat-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:20px;
  margin-top:20px;
}

.stat-card{
  background:linear-gradient(180deg, rgba(23,33,51,.96), rgba(18,26,43,.96));
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:24px;
  min-height:130px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.stat-label{
  font-size:14px;
  color:var(--muted);
  margin-bottom:10px;
}

.stat-num{
  font-size:2rem;
  font-weight:800;
  color:var(--text);
}

/* =========================
   手機版 App 底部導覽列
========================= */
.app-nav{
  display:flex;
  gap:14px;
  align-items:center;
  flex-wrap:wrap;
}

/* =========================
   白天模式柔和化
========================= */
:root.light-mode .topbar{
  background:rgba(248,251,255,.82);
  border-bottom:1px solid var(--line);
}

:root.light-mode .hero{
  background:
    radial-gradient(circle at top right, rgba(124,58,237,.08), transparent 35%),
    radial-gradient(circle at top left, rgba(110,168,254,.07), transparent 40%),
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.28));
}

:root.light-mode .meta{
  background:#f3f7fc;
  border:1px solid var(--line);
  color:var(--muted);
}

:root.light-mode .btn.secondary{
  background:#eaf1f8;
  color:var(--text);
  border:1px solid var(--line);
}

:root.light-mode .stat-card{
  background:linear-gradient(180deg,#fbfdff,#f3f7fc);
  border:1px solid var(--line);
}

:root.light-mode .ticket-item{
  background:#f4f8fc;
}

:root.light-mode .table-wrap{
  border:1px solid var(--line);
}

:root.light-mode th,
:root.light-mode td{
  border-bottom:1px solid var(--line);
}

:root.light-mode .desc-preview::after{
  background:linear-gradient(to bottom, rgba(248,251,255,0), rgba(248,251,255,1));
}

@media (max-width:900px){

  body{
    padding-bottom:calc(110px + env(safe-area-inset-bottom, 0px));
  }

  .footer-space{
    height:calc(100px + env(safe-area-inset-bottom, 0px));
  }

  .topbar{
    position:static;
    background:transparent;
    border:none;
    backdrop-filter:none;
  }

  .topbar-inner{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:10px 14px;
  }

  .brand{
    display:none;
  }

  .nav{
    width:100%;
    display:flex;
  }

  .pill{
    flex:1;
    justify-content:center;
  }

  .container{
    padding:14px;
  }

  .card{
    padding:14px;
  }

  .title{
    font-size:1.2rem;
  }

  .two-col{
    grid-template-columns:1fr;
  }

  .grid,
  .grid.cards,
  .order-list,
  .stat-grid{
    grid-template-columns:1fr;
  }

  .topbar-inner .nav.app-nav{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(env(safe-area-inset-bottom, 0px) + 14px);
    z-index:9999;

    width:min(92vw, 560px);
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;

    padding:10px;
    border-radius:22px;
    background:rgba(18,26,43,.92);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 30px rgba(0,0,0,.32);
  }

  :root.light-mode .topbar-inner .nav.app-nav{
    background:rgba(248,251,255,.94);
    border:1px solid var(--line);
    box-shadow:0 12px 24px rgba(15,23,42,.10);
  }

  .topbar-inner .nav.app-nav .pill{
    min-height:50px;
    width:100%;
    justify-content:center;
    align-items:center;
    text-align:center;
    border-radius:16px;
    background:var(--panel-2);
    border:1px solid var(--line);
    font-size:14px;
    font-weight:700;
    padding:12px 8px;
    line-height:1.2;
    white-space:nowrap;
  }
}