:root{
  --bg-deep:#241512;
  --bg-mid:#3a2118;
  --amber:#e8a15c;
  --amber-soft:#f3c78c;
  --coral:#e07856;
  --gold:#d9a441;
  --cream:#fbead9;
  --text-soft:#e9d3bf;
  --text-dim:#c9a98c;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; background:var(--bg-deep); }

body{
  font-family:"Noto Serif TC","PMingLiU","Georgia",serif;
  background-color:var(--bg-deep);
  background-image:
    radial-gradient(ellipse 60% 50% at 20% 10%, rgba(232,161,92,0.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(224,120,86,0.16), transparent 60%),
    linear-gradient(160deg, var(--bg-deep) 0%, var(--bg-mid) 55%, #2b1712 100%);
  color:var(--text-soft);
  overflow-x:hidden;
  min-height:100vh;
}

.glow-orb{ position:fixed; border-radius:50%; filter:blur(60px); pointer-events:none; z-index:0; opacity:0.5; }
.orb1{ width:420px; height:420px; top:-120px; left:-100px; background:radial-gradient(circle, rgba(232,161,92,0.5), transparent 70%); animation:drift1 22s ease-in-out infinite; }
.orb2{ width:360px; height:360px; bottom:-100px; right:-80px; background:radial-gradient(circle, rgba(224,120,86,0.45), transparent 70%); animation:drift2 26s ease-in-out infinite; }
@keyframes drift1{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(60px,40px); } }
@keyframes drift2{ 0%,100%{ transform:translate(0,0); } 50%{ transform:translate(-50px,-30px); } }

.container{ position:relative; z-index:1; max-width:760px; margin:0 auto; padding:0 24px; }

.topbar{ display:flex; align-items:center; justify-content:center; padding:28px 24px 0; position:relative; z-index:2; }
.topbar .brand{ font-size:15px; letter-spacing:4px; color:var(--amber-soft); }

.hero{ text-align:center; padding:64px 0 40px; }
.eyebrow{ font-size:13px; letter-spacing:5px; color:var(--amber-soft); text-transform:uppercase; margin-bottom:16px; opacity:0.85; }
.hero h1{
  font-size:clamp(32px, 6vw, 46px);
  font-weight:600; letter-spacing:4px;
  background:linear-gradient(120deg, var(--cream) 10%, var(--amber-soft) 45%, var(--coral) 75%, var(--gold) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px rgba(232,161,92,0.25);
  margin-bottom:18px;
}
.hero p{ font-size:15.5px; color:var(--text-dim); line-height:1.9; max-width:520px; margin:0 auto; }

section{ padding:36px 0; position:relative; }

.card{
  background:linear-gradient(155deg, rgba(255,235,210,0.07), rgba(255,235,210,0.02));
  border:1px solid rgba(232,161,92,0.18);
  border-radius:20px; padding:32px;
  box-shadow:0 20px 45px -20px rgba(0,0,0,0.5);
}

.section-title{ font-size:18px; color:var(--amber-soft); letter-spacing:1px; margin-bottom:18px; font-weight:600; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 26px; border-radius:999px; border:none; cursor:pointer;
  font-size:14px; letter-spacing:2px; text-decoration:none; font-family:inherit;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.btn-primary{
  background:linear-gradient(120deg, var(--amber), var(--coral));
  color:#2b1712; font-weight:700;
  box-shadow:0 15px 35px -10px rgba(224,120,86,0.5);
  width:100%;
}
.btn-primary:hover{ transform:translateY(-2px); }
.btn-primary:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }
.btn-outline{ border:1px solid rgba(232,161,92,0.4); color:var(--amber-soft); background:transparent; }
.btn-outline:hover{ background:rgba(232,161,92,0.1); transform:translateY(-2px); }
.btn-line{
  background:#06C755; color:#fff; font-weight:700; width:100%;
  box-shadow:0 15px 35px -10px rgba(6,199,85,0.45);
}
.btn-line:hover{ transform:translateY(-2px); }

textarea, input[type="text"], input[type="email"], input[type="password"]{
  width:100%;
  background:rgba(0,0,0,0.18); border:1px solid rgba(232,161,92,0.25); border-radius:12px;
  padding:14px 16px; color:var(--text-soft); font-family:inherit; font-size:14.5px;
  outline:none; transition:border-color 0.3s ease; resize:vertical;
}
textarea:focus, input:focus{ border-color:var(--amber); }
label{ display:block; font-size:13px; color:var(--text-dim); letter-spacing:1px; margin-bottom:8px; }
.field{ margin-bottom:18px; }

.status-msg{ font-size:13px; color:var(--text-dim); margin-top:10px; min-height:18px; }
.status-msg.error{ color:var(--coral); }
.status-msg.ok{ color:var(--amber-soft); }

.answer-box{
  margin-top:20px; padding:22px; border-radius:16px;
  background:linear-gradient(160deg, rgba(255,235,210,0.06), rgba(255,235,210,0.015));
  border:1px solid rgba(232,161,92,0.16);
  font-size:15px; line-height:1.9; color:var(--text-soft); white-space:pre-wrap;
}
.answer-box:empty{ display:none; }

.user-bar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; flex-wrap:wrap; }
.user-bar .who{ font-size:13.5px; color:var(--text-dim); }
.user-bar .who b{ color:var(--amber-soft); }

.hidden{ display:none !important; }

footer{ padding:50px 0 40px; text-align:center; }
footer a{ color:var(--text-dim); font-size:13px; letter-spacing:1px; text-decoration:none; }
footer a:hover{ color:var(--amber-soft); }

table{ width:100%; border-collapse:collapse; font-size:13.5px; }
th, td{ text-align:left; padding:10px 12px; border-bottom:1px solid rgba(232,161,92,0.14); vertical-align:top; }
th{ color:var(--amber-soft); font-weight:600; letter-spacing:0.5px; }
td{ color:var(--text-soft); }

.tabs{ display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap; }
.tab-btn{
  background:transparent; border:1px solid rgba(232,161,92,0.25); color:var(--text-dim);
  padding:10px 20px; border-radius:999px; cursor:pointer; font-family:inherit; font-size:13.5px; letter-spacing:1px;
}
.tab-btn.active{ background:linear-gradient(120deg, var(--amber), var(--coral)); color:#2b1712; font-weight:700; border-color:transparent; }

select{
  background:rgba(0,0,0,0.18); border:1px solid rgba(232,161,92,0.25); border-radius:8px;
  padding:6px 10px; color:var(--text-soft); font-family:inherit; font-size:13px;
}

.link-btn{ background:none; border:none; color:var(--amber-soft); cursor:pointer; font-family:inherit; font-size:13px; text-decoration:underline; padding:0; }

@media (max-width:640px){
  .card{ padding:24px 20px; }
}