/* =========================================================
   TFS UI — PRO SAAS DARK (Gold only for money)
   Clean, consistent, no duplicates, no "gaming neon"
   ========================================================= */

/* =============== BASE VARS (MUST EXIST) =============== */
:root{
  --bg:#0f1115;
  --bg-2:#121520;
  --bg-3:#161a26;

  --text:#e9edf3;
  --muted:#9aa4b2;

  --border:rgba(255,255,255,.08);
  --border-2:rgba(255,255,255,.12);

  --radius:18px;
  --shadow: 0 14px 30px rgba(0,0,0,.38);

  /* accent (subtil, doar pt focus / UI) */
  --accent:#4b9cff;
  --accent-2:#6fb2ff;

  /* money */
  --gold:#d4af37;
  --gold-2:#f2d26b;

  /* status */
  --green:#38d97a;
  --orange:#ffb020;

  /* aliases (compat) */
  --cyan: var(--accent);
  --cyan-2: var(--accent-2);
  --ember: var(--orange);
  --lime: var(--green);
}

/* =============== RESET / BASE =============== */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
}
::-webkit-scrollbar-thumb:hover{ background: rgba(255,255,255,.16); }
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }

/* Links */
a{ color:inherit; }
a:hover{ text-decoration:none; }

/* =============== LAYOUT =============== */
.main{ min-height:100vh; padding:16px; }
@media (min-width:1024px){
  .main{ padding-left: calc(320px + 16px); }
}

/* =============== SIDEBAR =============== */
.sidebar{
  position:fixed; inset:0 auto 0 0;
  width:320px; height:100vh; z-index:40;
  background: #0c0e12;
  border-right:1px solid var(--border);
  transform: translateX(-100%);
  transition: transform .25s ease;
  display:flex; flex-direction:column;
}
@media (min-width:1024px){ .sidebar{ transform:none; } }
.sidebar.open{ transform:none; }

.sb-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
}
.sb-brand{ display:flex; gap:12px; align-items:center; }
.sb-badge{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
}
.sb-title b{ display:block; letter-spacing:.2px; }
.sb-title small{ color: var(--muted); }

.sb-close{
  width:38px; height:38px;
  border:0; border-radius:10px;
  background:transparent; color:var(--text);
  cursor:pointer;
}
.sb-close:hover{ background: rgba(255,255,255,.05); }

.sb-nav{ padding:10px; overflow:auto; }
.sb-section{
  margin:16px 8px 6px;
  color:var(--muted);
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;
}
.sb-link,.sb-button{
  display:flex; gap:10px; align-items:center;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
  border:1px solid transparent;
  background:transparent;
  cursor:pointer;
}
.sb-link:hover,.sb-button:hover{ background: rgba(255,255,255,.04); }
.sb-link.active{
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}

.sb-footer{
  margin-top:auto;
  padding:14px;
  color:var(--muted);
  font-size:12px;
  border-top:1px solid var(--border);
}

/* CTA (money only) */
.sb-cta{
  margin:16px; padding:14px; border-radius:16px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  color:#1a1400;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border:1px solid rgba(212,175,55,.45);
  box-shadow: var(--shadow);
  text-decoration:none;
  font-weight:900;
}
.sb-cta .icon{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.35);
  color:#1a1400;
  border:1px solid rgba(0,0,0,.10);
}

/* Mobile toggle */
.toggle{
  position:fixed; left:16px; top:16px; z-index:35;
  width:46px; height:46px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  color:var(--text);
  background: rgba(255,255,255,.04);
  cursor:pointer;
}
.toggle:hover{ background: rgba(255,255,255,.06); }
@media (min-width:1024px){ .toggle{ display:none; } }
.backdrop{
  position:fixed; inset:0;
  background: rgba(0,0,0,.55);
  z-index:30; display:none;
}
.backdrop.show{ display:block; }

/* =============== WHATSAPP CARD (SINGLE SOURCE) =============== */
.tfs-wa-card{
  margin:0 16px 12px;
  padding:12px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--text);
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 22px rgba(0,0,0,.20);
  transition:transform .15s ease, border-color .15s ease, background .15s ease;
}
.tfs-wa-card:hover{
  transform: translateY(-1px);
  border-color: rgba(37,211,102,.30);
  background: rgba(255,255,255,.04);
}
.tfs-wa-left{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(37,211,102,.10);
  border:1px solid rgba(37,211,102,.22);
  color:#25D366;
  flex:0 0 auto;
}
.tfs-wa-title{ font-weight:900; letter-spacing:.2px; }
.tfs-wa-sub{ font-size:12px; color:var(--muted); margin-top:2px; }
.tfs-wa-right{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.tfs-wa-chip{
  font-size:11px; font-weight:900;
  padding:4px 8px; border-radius:999px;
  background: rgba(37,211,102,.12);
  border:1px solid rgba(37,211,102,.25);
  color:#bfffd4;
}

/* =============== COMMON COMPONENTS =============== */
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 12px; border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  font-weight:800;
  font-size:13px;
}
.h2{ margin:10px 0 0; font-size:24px; font-weight:950; letter-spacing:.2px; }

/* Hero / Panel / Cards */
.hero, .panel, .card, .info-card, .wallet, .form-card{
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.hero-inner{ padding:18px; }
.hero-flex{ display:flex; flex-direction:column; gap:16px; }
@media (min-width:1024px){
  .hero-flex{ flex-direction:row; align-items:flex-start; justify-content:space-between; }
}

.panel{ margin-top:18px; }
.panel-head{
  padding:12px 14px;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-bottom:1px solid var(--border);
  background: transparent;
}
.panel-sub{ color:var(--muted); font-size:12px; }

/* Cards grid */
.cards{
  display:grid; gap:16px;
  grid-template-columns:1fr;
  margin-top:16px;
}
@media (min-width:768px){ .cards{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width:1280px){ .cards{ grid-template-columns:repeat(4, 1fr); } }

.card-top{
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
}
.card-body{ padding:14px; }

.wallet{
  width:100%;
  max-width:360px;
  padding:16px;
}

/* Info card */
.info-card{ margin-top:18px; padding:16px; }
.info-header{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.title-wrap{ display:flex; gap:12px; align-items:center; }
.info-badge{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
}
.info-card h2{ margin:0; font-size:18px; font-weight:950; }
.info-card .subtitle{ margin:4px 0 0; color:var(--muted); }

.info-body{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:18px;
  margin-top:14px;
}
@media (max-width:900px){ .info-body{ grid-template-columns:1fr; } }

.steps{
  list-style:none;
  margin:0; padding:0;
  display:grid; gap:10px;
}
.steps li{
  display:flex; gap:10px; align-items:flex-start;
  padding:10px 12px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
}
.steps i{ color: var(--accent); margin-top:2px; }

.perks{ display:grid; gap:12px; }
.perk{
  display:flex; gap:12px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:12px;
}
.perk-icon{
  width:32px; height:32px; border-radius:10px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: var(--accent);
}
.perk-title{ font-weight:950; margin-bottom:4px; }

/* Progress meters */
.meter{
  height:8px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}
.meter > div{ height:100%; border-radius:999px; }
.bar-progress{ background: linear-gradient(90deg, var(--orange), rgba(255,255,255,.12)); }
.bar-delivered{ background: linear-gradient(90deg, var(--green), rgba(255,255,255,.12)); }
.bar-open{ background: linear-gradient(90deg, var(--accent), rgba(255,255,255,.12)); }

/* =============== BUTTONS =============== */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px;
  border-radius:12px;
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  font-weight:900;
}

.btn-ghost{
  color:var(--text);
  border:1px solid rgba(255,255,255,.14);
  background: transparent;
}
.btn-ghost:hover{ background: rgba(255,255,255,.04); }

/* Primary = accent (NOT gold) */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius:12px;
  font-weight:950;
  text-decoration:none;
  color: var(--text);
  background: rgba(75,156,255,.12);
  border:1px solid rgba(75,156,255,.28);
}
.btn-primary:hover{ background: rgba(75,156,255,.16); }

/* Warning = money */
.btn-warning{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius:12px;
  font-weight:950;
  color:#1a1400;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border:1px solid rgba(212,175,55,.35);
}
.btn-warning:hover{ filter:brightness(1.05); }

.btn-outline{
  display:inline-flex; align-items:center; justify-content:center;
  padding:9px 12px;
  border-radius:12px;
  font-weight:950;
  text-decoration:none;
  color: var(--text);
  background: transparent;
  border:1px solid rgba(255,255,255,.16);
}
.btn-outline:hover{ background: rgba(255,255,255,.04); }

.btn-success{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px;
  border-radius:12px;
  font-weight:950;
  border:1px solid rgba(56,217,122,.25);
  background: rgba(56,217,122,.10);
  color: var(--text);
}
.btn-success:hover{ background: rgba(56,217,122,.14); }

/* =============== FORMS =============== */
.grid{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:768px){ .grid{ grid-template-columns:1fr 1fr; } }

label{ display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea{
  width:100%;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(75,156,255,.35);
  box-shadow: 0 0 0 3px rgba(75,156,255,.10);
}

/* =============== TABLES =============== */
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; padding:12px; }
table{ width:100%; border-collapse:collapse; min-width:980px; }
thead th{
  background: rgba(255,255,255,.03);
  color: var(--muted);
  padding:12px;
  text-align:left;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.08em;
  border-bottom:1px solid rgba(255,255,255,.08);
}
tbody td{
  padding:12px;
  border-top:1px solid rgba(255,255,255,.06);
  color: var(--text);
  vertical-align:top;
}
tbody tr:hover{ background: rgba(255,255,255,.02); }

#user-projects-table{
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}

/* =============== FOOTER =============== */
footer{
  margin-top:18px;
  padding:16px;
  color: var(--muted);
  border-top:1px solid rgba(255,255,255,.08);
}
@media (min-width:1024px){ footer{ padding-left: calc(320px + 16px); } }

/* =========================================================
   PRICES PAGE (Compact + right aligned credits + new order)
   ========================================================= */

/* optional: add class="page-prices" on body for isolation */
.page-prices .panel, .page-prices .hero{
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

/* Head icon + search */
.prices-head-ico{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
}

.prices-head-tools{ display:flex; align-items:center; gap:10px; }
.prices-search{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background: rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.10);
  min-width:320px;
}
.prices-search i{ color: var(--muted); }
.prices-search input{
  width:100%;
  border:0; outline:0;
  background:transparent;
  color: var(--text);
  font-weight:800;
}

/* List */
.prices-list{ padding:8px 10px 14px; }

/* Row = service | right block (price+order) */
.prices-row{
  display:grid;
  grid-template-columns: 1fr 290px;
  align-items:center;
  gap:16px;
  padding:10px 12px;
  margin:8px 0;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.prices-row:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.03);
}

/* Head row */
.prices-row--head{
  background:transparent;
  border:0;
  margin: 6px 0 8px;
  padding: 0 12px;
  transform:none !important;
}
.prices-row--head .prices-col{
  color: var(--muted);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:900;
}

.prices-col{ min-width:0; }

/* service cell */
.prices-service{ display:flex; align-items:center; gap:10px; min-width:0; }
.prices-svc-ico{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.70);
}
.prices-svc-text{ min-width:0; }
.prices-svc-name{
  font-weight:950;
  font-size:14px;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.prices-svc-meta{
  margin-top:2px;
  font-size:11px;
  color: var(--muted);
  opacity:.9;
}

/* credits block to far right */
.prices-col--credits{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}

/* credits badge */
.prices-credits{
  text-align:right;
  padding:8px 10px;
  border-radius:12px;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  min-width:120px;
}
.prices-credits-num{
  font-weight:950;
  font-size:15px;
  color: var(--text);
}
.prices-credits-dec{ opacity:.45; font-size:12px; }
.prices-credits-lbl{ color: var(--muted); font-size:11px; margin-top:2px; }

/* Order button (money only) */
.prices-order{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:950;
  color:#1a1400;
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  border:1px solid rgba(212,175,55,.35);
  box-shadow: 0 10px 18px rgba(0,0,0,.22);
}
.prices-order:hover{ filter:brightness(1.05); }

/* Mobile prices */
@media (max-width:900px){
  .prices-search{ min-width: 200px; width: 100%; }
  .prices-row{ grid-template-columns: 1fr; }
  .prices-col--credits{
    justify-self:stretch;
    justify-content:space-between;
  }
  .prices-credits{ text-align:left; }
}


/* =========================================================
   CREATE PROJECT (page-create) — missing styles
   ========================================================= */
.page-create{
  padding-top: 16px;
}

/* Sections */
.page-create .section{
  margin-top:18px;
  border-radius: var(--radius);
  border:1px solid var(--border);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.page-create .section-head{
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  font-weight:950;
}
.page-create .section-head i{ color: var(--muted); }
.page-create .section-title{ font-size:14px; letter-spacing:.2px; }
.page-create .section-body{ padding:14px; }
.page-create .hint{ color: var(--muted); font-size:13px; line-height:1.35; }

/* Make your inline grids responsive */
.page-create .section-body > div[style*="grid-template-columns:repeat(3,1fr)"]{
  grid-template-columns: repeat(3, 1fr) !important;
}
@media (max-width: 980px){
  .page-create .section-body > div[style*="grid-template-columns:repeat(3,1fr)"]{
    grid-template-columns: 1fr !important;
  }
  .page-create .section-body > div[style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: 1fr !important;
  }
}

/* Select / textarea polishing */
.page-create select, .page-create textarea{
  width:100%;
}
.page-create textarea{
  min-height: 44px;
  resize: vertical;
}

/* grid-2 */
.page-create .grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:14px;
}
@media (max-width: 980px){
  .page-create .grid-2{ grid-template-columns: 1fr; }
}

/* Badge pill */
.page-create .badge-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  font-weight:900;
  font-size:12px;
  color: var(--text);
}

/* Options grid */
.page-create .options-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 1100px){
  .page-create .options-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px){
  .page-create .options-grid{ grid-template-columns: 1fr; }
}

/* Option card */
.page-create .opt{ position:relative; }
.page-create .opt-check{ position:absolute; opacity:0; pointer-events:none; }
.page-create .opt-ui{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
  cursor:pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
.page-create .opt-ui:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.03);
}
.page-create .opt-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.page-create .opt-icon{
  width:34px; height:34px; border-radius:12px;
  display:grid; place-items:center;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.10);
  color: var(--muted);
}
.page-create .price-badge{
  padding:6px 8px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color: var(--text);
  white-space:nowrap;
}
.page-create .price-old{
  opacity:.55;
  text-decoration: line-through;
  margin-right:6px;
}

/* Checked state */
.page-create .opt-check:checked + .opt-ui{
  border-color: rgba(75,156,255,.30);
  background: rgba(75,156,255,.08);
}
.page-create .opt-check:checked + .opt-ui .opt-icon{
  border-color: rgba(75,156,255,.30);
  color: var(--accent);
}

/* Dropzone */
.page-create .dropzone{
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.02);
  padding:18px;
  text-align:center;
}
.page-create .dropzone.dragover{
  border-color: rgba(75,156,255,.35);
  background: rgba(75,156,255,.06);
}
.page-create .drop-icon{
  width:46px; height:46px; border-radius:14px;
  margin: 0 auto;
  display:grid; place-items:center;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
}
.page-create .dz-actions{ margin-top:10px; display:flex; justify-content:center; }
.page-create .file-name{ margin-top:10px; color: var(--muted); font-size:12px; }

/* Total box */
.page-create .total-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.02);
}
.page-create .total-price{
  font-weight:950;
}
@media (max-width: 900px){
  .page-create .total-box{ flex-direction:column; align-items:stretch; }
  .page-create .total-box > div:last-child{ justify-content:space-between; }
}
/* =========================================================
   COINS HERO XL (Create Project / Dashboard)
   ========================================================= */

.coins-hero-xl{
  margin: 0 0 18px;
}

.coins-card-xl{
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: rgba(255,255,255,.03);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 16px;
  max-width: 420px;
}

.coins-head-xl{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap: 12px;
}

.coins-hint-xl{
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 6px;
}

.coins-amount-xl{
  font-size: 34px;
  font-weight: 950;
  letter-spacing: .2px;
  line-height: 1;
}

.coins-badge-xl{
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--muted);
}

.coins-actions-xl{
  display:flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.btn-gold-xl,
.btn-ghost-xl{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 950;
  text-decoration:none;
  border: 1px solid transparent;
}

.btn-gold-xl{
  background: linear-gradient(90deg, var(--gold), var(--gold-2));
  color: #1a1400;
  border-color: rgba(212,175,55,.35);
}

.btn-gold-xl:hover{ filter: brightness(1.05); }

.btn-ghost-xl{
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.12);
  color: var(--text);
}

.btn-ghost-xl:hover{ background: rgba(255,255,255,.05); }

.coins-footnote-xl{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* make it full width on small screens */
@media (max-width: 900px){
  .coins-card-xl{ max-width: 100%; }
}
/* =========================================================
   DARK SELECT + DROPDOWN SCROLL (Stage select)
   ========================================================= */

/* Force browser controls to dark on pages */
html{ color-scheme: dark; }

/* style select itself */
.page-create select{
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.10);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  outline: none;
}

.page-create select:focus{
  border-color: rgba(0,229,255,.35);
  box-shadow: 0 0 0 3px rgba(0,229,255,.10);
}

/* dropdown options (works in many browsers, not all) */
.page-create select option{
  background: #0f1218;  /* dark */
  color: #f2f2f2;
}

/* Firefox: scrollbar */
*{
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.25) transparent;
}

/* Chrome/Edge: scrollbar (global, dark) */
::-webkit-scrollbar{ width:10px; height:10px }
::-webkit-scrollbar-track{ background: transparent }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.20);
}
/* =========================================================
   CREATE PAGE LAYOUT: content left + coins right
   ========================================================= */

/* IMPORTANT: pune pe <body> class="page-create"
   (dacă nu vrei să atingi HTML, scrie-mi și facem target pe .page .coins-hero-xl)
*/

.page-create .page{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 360px;   /* content | coins */
  gap: 16px;
  align-items: start;
}

/* coins column */
.page-create .coins-hero-xl{
  grid-column: 2;
  position: sticky;
  top: 16px;
}

/* restul contentului (section/form) pe coloana 1 */
.page-create .page > :not(.coins-hero-xl){
  grid-column: 1;
}

/* pe mobile revine sus */
@media (max-width: 1100px){
  .page-create .page{
    grid-template-columns: 1fr;
  }
  .page-create .coins-hero-xl{
    grid-column: 1;
    position: static;
  }
  .page-create .page > :not(.coins-hero-xl){
    grid-column: 1;
  }
}
/* =========================================================
   SELECT (Stage) — more premium look
   ========================================================= */

.page-create select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 42px 11px 12px; /* space for arrow */
  font-weight: 800;
  letter-spacing: .1px;

  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

/* custom arrow */
.page-create select{
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
    radial-gradient(10px 10px at calc(100% - 16px) 50%, rgba(0,229,255,.20), transparent 60%);
  background-repeat: no-repeat;
  background-size: 100% 100%, 28px 28px;
  background-position: 0 0, calc(100% - 10px) 50%;
}

.page-create select:focus{
  border-color: rgba(0,229,255,.40);
  box-shadow: 0 0 0 3px rgba(0,229,255,.12);
  outline: none;
}

/* options background (works in many browsers) */
.page-create select option{
  background: #0f1218;
  color: #f2f2f2;
}

/* =========================================================
   Scrollbar — cleaner, more modern
   ========================================================= */
*{ scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }

::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.20);
}
/* =========================================================
   FIX: page layout (tu ai <main class="page">, nu .main)
   ========================================================= */

.page{
  min-height:100vh;
  padding:16px;
}

/* offset pt sidebar pe desktop */
@media (min-width:1024px){
  .page{
    padding-left: calc(320px + 16px);
  }
}
/* =========================================================
   CREATE: content left + coins right (corect)
   ========================================================= */

.page.page-create{
  max-width: 1400px;
  margin: 0 auto;
}

/* doar pe desktop facem 2 coloane */
@media (min-width:1100px){
  .page.page-create{
    display:grid;
    grid-template-columns: 1fr 380px;   /* content | coins */
    gap:16px;
    align-items:start;
  }

  /* coins în dreapta */
  .page.page-create .coins-hero-xl{
    grid-column:2;
    align-self:start;
    justify-self:stretch;
    width:100%;
    z-index:2;
    position:sticky;
    top:16px;
  }

  /* restul rămâne pe stânga */
  .page.page-create > :not(.coins-hero-xl){
    grid-column:1;
    min-width:0;
  }
}

/* pe mobil revine normal */
@media (max-width:1099px){
  .page.page-create .coins-hero-xl{
    position:static;
  }
}
/* =========================================================
   SELECT: dark dropdown + cleaner (Stage)
   ========================================================= */

/* Forțează controalele native să fie dark (Chrome/Edge/Firefox) */
html{ color-scheme: dark; }

.page-create select{
  color-scheme: dark;
  appearance: auto;          /* important: revenim la native */
  -webkit-appearance: auto;
  -moz-appearance: auto;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  font-weight: 850;
  letter-spacing: .1px;
}

.page-create select:focus{
  border-color: rgba(75,156,255,.45);
  box-shadow: 0 0 0 3px rgba(75,156,255,.12);
  outline: none;
}

/* opțiuni dark (merge în multe browsere, nu în toate 100%) */
.page-create select option{
  background: #0f1115;
  color: #e9edf3;
}
/* =========================================================
   CREATE PROJECT ONLY — layout + coins right + select fix
   ========================================================= */

/* Tu ai <main class="page">, nu .main — deci trebuie stil pe .page */
.page{
  min-height:100vh;
  padding:16px;
}
@media (min-width:1024px){
  .page{
    padding-left: calc(320px + 16px); /* offset sidebar */
  }
}

/* ===== Create Project: 2 coloane doar aici ===== */
.page.page-create{
  max-width: 1400px;
  margin: 0 auto;
}

/* Desktop: content | coins */
@media (min-width:1100px){
  .page.page-create{
    display:grid;
    grid-template-columns: 1fr 380px;
    gap:16px;
    align-items:start;
  }

  /* coins în dreapta */
  .page.page-create .coins-hero-xl{
    grid-column:2;
    width:100%;
    align-self:start;
    justify-self:stretch;
    position:sticky;
    top:16px;
    z-index:2; /* peste fundal, dar NU peste content pt că e în col 2 */
  }

  /* restul conținutului în stânga */
  .page.page-create > :not(.coins-hero-xl){
    grid-column:1;
    min-width:0;
  }
}

/* Mobile: revine normal */
@media (max-width:1099px){
  .page.page-create{
    display:block;
  }
  .page.page-create .coins-hero-xl{
    position:static;
  }
}

/* ===== Stage select: dark + mai curat (fără alb) ===== */
html{ color-scheme: dark; }

.page.page-create select{
  color-scheme: dark;
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;

  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.12);
  color: var(--text);
  border-radius: 14px;
  padding: 11px 12px;
  font-weight: 850;
  letter-spacing: .1px;
}

.page.page-create select:focus{
  border-color: rgba(75,156,255,.45);
  box-shadow: 0 0 0 3px rgba(75,156,255,.12);
  outline: none;
}

/* opțiuni dark (în multe browsere merge ok) */
.page.page-create select option{
  background:#0f1115;
  color:#e9edf3;
}
/* =========================================================
   CREATE PROJECT — layout FIX (wider, balanced)
   ========================================================= */

@media (min-width:1100px){

  /* container principal */
  .page.page-create{
    max-width: 1550px;              /* mai mult aer */
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) 420px;
    /*        ^ CONTENT        ^ COINS */
    gap: 24px;
    align-items: start;
  }

  /* coloana coins */
  .page.page-create .coins-hero-xl{
    grid-column: 2;
    position: sticky;
    top: 20px;
    align-self: start;
  }

  /* conținutul */
  .page.page-create > :not(.coins-hero-xl){
    grid-column: 1;
    min-width: 0;
  }
}

/* Ultra-wide screens (4K / mare) */
@media (min-width:1600px){
  .page.page-create{
    grid-template-columns: minmax(0, 2fr) 440px;
  }
}
.page.page-create .section,
.page.page-create .panel{
  padding-left: 2px;
  padding-right: 2px;
}

.page.page-create .options-grid{
  gap: 14px;
}
/* =========================================================
   CREATE PROJECT — align content closer to sidebar
   ========================================================= */

@media (min-width:1100px){

  .page.page-create{
    max-width: none;                 /* nu mai centra artificial */
    margin-left: 0;                  /* lipește spre sidebar */
    margin-right: auto;

    padding-left: 0;                 /* elimină aerul fals */
  }

  /* opțional: mic offset ca să nu fie chiar lipit */
  .page.page-create{
    padding-left: 8px;
  }
}
@media (min-width:1400px){
  .page.page-create{
    padding-left: 0;
  }
}
/* =========================================================
   CREATE PROJECT — fix overlap under sidebar
   (doar pe /create)
   ========================================================= */

@media (min-width:1100px){
  /* sidebar-ul tău are width:320px */
  body.page-create .page.page-create{
    max-width: none;
    margin: 0;                          /* nu mai auto-center */
    padding-left: calc(320px + 20px);   /* ✅ pornește după meniu */
    padding-right: 20px;
  }
}

/* pe ecrane foarte mari, mai strângem un pic gap-ul */
@media (min-width:1600px){
  body.page-create .page.page-create{
    padding-left: calc(320px + 12px);
  }
}