:root {
  --bg: #0b0c12;
  --panel: #14151d;
  --text: #F6F7FB;
  --muted: #AAB0C0;
  --accent: #9BE7FF;
  --accent-2: #FFC04D;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --shadow-soft: 0 6px 30px rgba(0,0,0,.4);
  --border: 1px solid rgba(255,255,255,.08);
}

/* Base */
body {
  margin:0;
  background:
    radial-gradient(700px 300px at 10% -10%, rgba(155,231,255,.08), transparent 60%),
    radial-gradient(600px 260px at 110% 0%, rgba(255,192,77,.08), transparent 65%),
    var(--bg);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
}
/* subtle star grid */
body:before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.15;
  background-image: radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px);
  background-size: 4px 4px; filter: blur(1.2px);
}

a { text-decoration:none; color:inherit; }
.container { width:min(1200px, 92%); margin:0 auto; }

.bg-canvas{position:fixed; inset:0; z-index:-1; pointer-events:none;}

/* Header */
.header { position:sticky; top:0; z-index:10; backdrop-filter:saturate(120%) blur(8px);
  background:linear-gradient(180deg, rgba(11,12,18,.9), rgba(11,12,18,.55)); border-bottom: var(--border); }
.header-inner{ display:flex; justify-content:space-between; align-items:center; padding:14px 0; }

.brand { font-family: "Space Grotesk", Inter, sans-serif; font-weight:700; letter-spacing:.3px; display:flex; gap:10px; align-items:center; }
.brand .aster { color:#fff; opacity:.95; font-size:28px; line-height:0; transform:translateY(-1px) }
.brand .name { font-size:22px; }

.nav { display:flex; align-items:center; gap:16px; }
.nav a { padding:8px 10px; border-radius:10px; color:var(--muted); font-weight:600; font-size:14px; border:1px solid transparent; }
.nav a:hover { color:#fff; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.03); }

.btn { background:transparent; border:1px solid rgba(155,231,255,.35); border-radius:14px; padding:10px 16px; font-weight:700; cursor:pointer; color:#E9FBFF; transition:.2s; }
.btn:hover { box-shadow:0 0 0 3px rgba(155,231,255,.12); transform:translateY(-1px); }
.btn:disabled {
  cursor: not-allowed;
}

.wallet-btn { background:transparent; border:1px solid rgba(155,231,255,.35); border-radius:14px; padding:10px 16px; font-weight:700; cursor:pointer; color:#E9FBFF; transition:.2s; }
.wallet-btn:hover { box-shadow:0 0 0 3px rgba(155,231,255,.12); transform:translateY(-1px); }
.wallet-btn:disabled {
  cursor: not-allowed;
}

/* Hero */
.hero { text-align:center; padding:2px 0 2px; }
.hero h1 { font-family:"Space Grotesk", Inter, sans-serif; font-size:48px; margin:0 0 8px; }
.hero p { color:var(--muted); font-size:18px; margin:0; }

/* Progress */
.progress-box { margin:36px auto 8px; max-width:640px; }
.progress-bar { background:#1b1c26; border-radius:14px; overflow:hidden; height:16px; border:1px solid rgba(255,255,255,.06); }
.progress { background:linear-gradient(90deg, var(--accent), var(--accent-2)); width:0%; height:100%; }
.progress-info { margin-top:8px; font-size:13px; text-align:right; color:var(--muted); }

/* Main */
.main { display:grid; grid-template-columns:1fr 1fr; gap:36px; margin-top:52px; }
.main2 { display:grid; grid-template-columns:1fr; gap:36px; margin-top:52px; }
.panel { background:var(--panel); border-radius:var(--radius-lg); padding:24px; box-shadow:var(--shadow-soft); border:var(--border); }
.panel h2 { margin-top:0; margin-bottom:16px; font-size:18px; font-weight:700; letter-spacing:.3px; text-transform:uppercase; color:#EAF6FF }
.panel p, .panel li { color:var(--muted); font-size:15px; line-height:1.55; }
.panel input { display:block; width:100%; box-sizing:border-box; margin:10px 0; padding:14px; border-radius:20px; border:1px solid #2a2d3b; background:#0e0f15; color:var(--text); font-size:15px; }

/* Action button — upgraded visual */
.action-btn {
  width:100%; margin-top:12px; padding:16px; border:none; border-radius:20px;
  font-weight:800; font-size:17px; color:#0b0c12;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  cursor:pointer; position:relative; overflow:hidden;
  box-shadow:0 0 20px rgba(155,231,255,.3), 0 0 30px rgba(255,192,77,.25);
  transition: transform .2s ease, box-shadow .3s ease;
}
.action-btn:before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle at top left, rgba(255,255,255,.35), transparent 60%);
  opacity:.5; transition:opacity .3s;
}
.action-btn:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 0 30px rgba(155,231,255,.5), 0 0 40px rgba(255,192,77,.35); }
.action-btn:hover:before{ opacity:.7; }

.action-btn:disabled {
  cursor: not-allowed;
}

/* Preview */
.preview { aspect-ratio:1/1; background:#0e0f15; border-radius:14px; display:flex; align-items:center; justify-content:center; border:1px solid #2a2d3b; position:relative; overflow:hidden; }
.preview:before{ content:""; position:absolute; width:150%; height:150%; background:radial-gradient(circle at 50% 45%, rgba(155,231,255,.2), transparent 45%); filter:blur(30px); opacity:.2; }
.preview span { color:var(--muted) }

/* Modals */
.modal, .tx-modal { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; padding:20px; }
.modal-content, .tx-box { background:var(--panel); border-radius:18px; padding:28px; width:100%; max-width:500px; text-align:center; box-shadow:var(--shadow-soft); border:var(--border); }
.wallets { display:grid; gap:12px; margin-top:16px; }
.wallet-btn { padding:12px; border-radius:12px; border:1px solid #3a3e52; cursor:pointer; background:#1a1b25; color:var(--text); font-weight:700; }
.txid { font-family:monospace; margin-top:12px; color:var(--accent); }
.tx-modal input { display:block; width:100%; box-sizing:border-box; margin:10px 0; padding:14px; border-radius:20px; border:1px solid #2a2d3b; background:#0e0f15; color:var(--text); font-size:15px; }

/* Footer */
footer { color:var(--muted); text-align:center; padding:48px 0; font-size:13px }

/* Responsive */
@media (max-width: 900px){ .main{ grid-template-columns:1fr; } .hero{ padding-top:48px; } }


/* Table */
.orders-table {
    width: 100%;
    /*max-width: 800px;*/
    border-collapse: collapse;
    margin-top: 20px;
    background: var(--panel);
    border: var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    font-size: 14px;
  }
.orders-table thead {
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    color: #0b0c12;
    text-align: left;
    font-weight: 700;
  }
.orders-table th,
.orders-table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    word-break: break-word;
  }
.orders-table tbody tr:last-child td {
    border-bottom: none;
  }
.orders-table tbody tr:hover {
    background: rgba(255,255,255,.04);
  }



/* --- Mint Phases (cards) --- */
.phases{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:14px;
  margin-top:24px;
  margin-bottom:8px;
  position:relative;
}

.phase-card{
  background:var(--panel);
  border:var(--border);
  border-radius:var(--radius-lg);
  padding:16px 18px;
  box-shadow:var(--shadow-soft);
  text-align:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.phase-card:hover{
  transform:translateY(-2px);
  box-shadow:0 0 22px rgba(155,231,255,.18);
}

.phase-head{ display:flex; align-items:center; justify-content:center; gap:10px; }
.phase-label{
  font-weight:800; letter-spacing:.6px; text-transform:uppercase;
  color:#EAF6FF; font-size:14px;
}
.dot{ width:10px; height:10px; border-radius:50%; display:inline-block;
  box-shadow:0 0 0 3px rgba(255,255,255,.05), 0 0 10px rgba(155,231,255,.4) inset; }
.dot-gtd{    background: var(--accent);   }
.dot-fcfs{   background: var(--accent-2); }
.dot-public{ background: #8BFFB2; }

.phase-time{
  margin-top:6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size:18px; color:var(--text);
}
.phase-time .muted{ color:var(--muted); margin-right:6px; }

/* Mobile */
@media (max-width: 900px){
  .phases{ grid-template-columns: 1fr; gap:10px; margin-top:18px; }
  .phase-card{ padding:14px 16px; }
  .phase-label{ font-size:13px; }
  .phase-time{ font-size:16px; }
}