/* ========== TITAN GLOBAL - Theme ========== */
:root{
  --gold:#D4AF37;--gold-light:#E5C158;--gold-dark:#B8962E;
  --bg:#0A0A0A;--bg-2:#020617;--card:#141414;--card-2:#1A1A1A;
  --text:#E0E0E0;--text-dim:#A0A0A0;--border:rgba(212,175,55,.2);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh}
body{background:var(--bg)}
a{color:inherit;text-decoration:none}
button{cursor:pointer;font-family:inherit;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit}
h1,h2,h3,h4,h5,h6{font-family:'Clash Display','Inter',sans-serif;letter-spacing:-.02em;color:var(--gold)}
.font-display{font-family:'Clash Display','Inter',sans-serif}
.font-mono{font-family:'JetBrains Mono',ui-monospace,monospace}

/* Layout helpers */
.container{max-width:1280px;margin:0 auto;padding:0 1rem}
.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.gap-6{gap:1.5rem}
.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}
.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}
.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.p-8{padding:2rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}
.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}
.text-center{text-align:center}.text-right{text-align:right}.text-left{text-align:left}
.text-xs{font-size:.75rem}.text-sm{font-size:.875rem}.text-base{font-size:1rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}.text-4xl{font-size:2.25rem}.text-5xl{font-size:3rem}
.font-bold{font-weight:700}.font-semibold{font-weight:600}.font-medium{font-weight:500}
.uppercase{text-transform:uppercase}.capitalize{text-transform:capitalize}.tracking-wider{letter-spacing:.05em}.tracking-widest{letter-spacing:.1em}
.w-full{width:100%}.h-full{height:100%}.min-h-screen{min-height:100vh}
.rounded{border-radius:.5rem}.rounded-lg{border-radius:.75rem}.rounded-xl{border-radius:1rem}.rounded-2xl{border-radius:1.25rem}.rounded-full{border-radius:9999px}
.flex-1{flex:1}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}.z-10{z-index:10}.z-50{z-index:50}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto}
.cursor-pointer{cursor:pointer}.transition{transition:all .2s ease}
.text-white{color:#fff}.text-dim{color:var(--text-dim)}.text-gold{color:var(--gold)}.text-green{color:#22c55e}.text-red{color:#ef4444}.text-yellow{color:#facc15}.text-blue{color:#3b82f6}.text-purple{color:#a855f7}

/* Glass cards */
.glass,.glass-card{
  background:linear-gradient(135deg,#141414 0%,#1A1A1A 100%);
  border:1px solid rgba(212,175,55,.2);
  border-radius:1rem;
  box-shadow:0 4px 20px rgba(0,0,0,.4),0 0 40px rgba(212,175,55,.03);
  transition:all .3s ease;
}
.glass-card:hover{transform:translateY(-2px);border-color:rgba(212,175,55,.35);box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 50px rgba(212,175,55,.08)}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:.75rem;font-weight:600;transition:all .25s ease;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--gold);color:#0A0A0A;box-shadow:0 4px 15px rgba(212,175,55,.3)}
.btn-primary:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 6px 20px rgba(212,175,55,.4)}
.btn-secondary{background:linear-gradient(135deg,#141414,#1A1A1A);border-color:rgba(212,175,55,.3);color:var(--gold)}
.btn-secondary:hover{border-color:rgba(212,175,55,.5);background:linear-gradient(135deg,#1A1A1A,#222)}
.btn-danger{background:#ef4444;color:#fff}
.btn-danger:hover{opacity:.9}
.btn-success{background:#22c55e;color:#0A0A0A}
.btn-success:hover{opacity:.9}
.btn-block{width:100%;display:flex}
.btn-sm{padding:.5rem 1rem;font-size:.875rem}

/* Inputs */
.input-dark,input[type=text],input[type=email],input[type=password],input[type=number],input[type=tel],input[type=url],input[type=date],input[type=datetime-local],textarea,select{
  width:100%;padding:.75rem 1rem;background:#141414;border:1px solid rgba(212,175,55,.2);border-radius:.75rem;color:var(--text);transition:all .25s ease;font-size:.95rem
}
.input-dark:focus,input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.15)}
.input-dark::placeholder,input::placeholder,textarea::placeholder{color:#666}
label{display:block;color:var(--text);font-weight:500;font-size:.875rem;margin-bottom:.5rem}

/* Tables */
.table-wrap{overflow-x:auto;border-radius:1rem;border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:.875rem}
thead{background:rgba(212,175,55,.05)}
th{text-align:left;padding:.875rem 1rem;color:var(--text-dim);font-weight:500;text-transform:uppercase;font-size:.75rem;letter-spacing:.05em;border-bottom:1px solid var(--border)}
td{padding:1rem;border-bottom:1px solid rgba(255,255,255,.05);color:var(--text)}
tbody tr:hover{background:rgba(255,255,255,.02)}

/* Status badges */
.badge{display:inline-block;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.badge-success{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.3)}
.badge-pending{background:rgba(212,175,55,.15);color:var(--gold);border:1px solid rgba(212,175,55,.3)}
.badge-error{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.3)}
.badge-info{background:rgba(59,130,246,.15);color:#3b82f6;border:1px solid rgba(59,130,246,.3)}

/* Gradient text */
.text-gradient{background:linear-gradient(135deg,#FFFFFF 0%,#D4AF37 50%,#FFFFFF 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* Logo */
.logo{font-family:'Clash Display',sans-serif;font-weight:700;color:var(--gold);font-size:1.5rem;letter-spacing:.05em}
.logo-mark{display:inline-flex;align-items:center;gap:.5rem}
.logo-mark::before{content:"";display:block;width:32px;height:32px;background:linear-gradient(135deg,var(--gold),var(--gold-dark));border-radius:8px;box-shadow:0 0 15px rgba(212,175,55,.4)}

/* Navigation */
.navbar{position:fixed;top:0;left:0;right:0;height:64px;background:rgba(10,10,10,.92);backdrop-filter:blur(20px);border-bottom:1px solid rgba(212,175,55,.1);z-index:50}
.navbar .container{height:100%;display:flex;align-items:center;justify-content:space-between}

/* Hero / sections */
section{padding:4rem 0}
.section-eyebrow{font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:1rem;display:block}

/* Marquee */
.marquee{overflow:hidden;white-space:nowrap}
.marquee-track{display:inline-block;animation:marquee 40s linear infinite}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.crypto-pill{display:inline-flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.05);border-radius:.5rem;margin:0 .5rem}
.up{color:#22c55e;background:rgba(34,197,94,.1);padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:700}
.down{color:#ef4444;background:rgba(239,68,68,.1);padding:2px 8px;border-radius:4px;font-size:.75rem;font-weight:700}

/* Glow effects */
.glow-orb{position:absolute;border-radius:9999px;filter:blur(120px);pointer-events:none;animation:pulse-slow 4s ease-in-out infinite}
@keyframes pulse-slow{0%,100%{opacity:.3}50%{opacity:.6}}

/* Sidebar */
.app-shell{display:flex;min-height:100vh;padding-top:64px}
.sidebar{position:sticky;top:64px;width:260px;height:calc(100vh - 64px);background:#0A0A0A;border-right:1px solid rgba(212,175,55,.1);padding:1rem;overflow-y:auto;flex-shrink:0}
.sidebar-link{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:.75rem;color:var(--text-dim);transition:all .2s ease;margin-bottom:.25rem;font-weight:500;font-size:.875rem}
.sidebar-link:hover{background:rgba(212,175,55,.05);color:var(--text)}
.sidebar-link.active{background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.2);color:var(--text);box-shadow:inset 4px 0 0 var(--gold)}
.sidebar-link.active i{color:var(--gold)}
.sidebar-link i{width:20px;height:20px}
.app-main{flex:1;padding:2rem 1rem;min-height:calc(100vh - 64px)}
.app-main .container{max-width:1280px}

/* Stat cards */
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem}
@media(min-width:1024px){.stat-grid{grid-template-columns:repeat(4,1fr)}}
.stat-card{padding:1.25rem;border-radius:1rem;background:linear-gradient(135deg,rgba(20,20,20,.8),rgba(26,26,26,.8));border:1px solid rgba(212,175,55,.2);position:relative;overflow:hidden}
.stat-card .icon-box{display:inline-flex;padding:.625rem;background:rgba(212,175,55,.15);border-radius:.625rem;margin-bottom:.75rem}
.stat-card .icon-box i{width:22px;height:22px;color:var(--gold)}
.stat-card .value{font-size:1.5rem;font-weight:700;color:#fff;font-family:'JetBrains Mono',monospace;margin-bottom:.25rem}
.stat-card .label{font-size:.75rem;color:var(--text-dim);text-transform:uppercase;letter-spacing:.05em}

/* Mobile nav */
.mobile-toggle{display:none}
@media(max-width:1023px){
  .mobile-toggle{display:inline-flex}
  .sidebar{position:fixed;left:0;top:64px;transform:translateX(-100%);transition:transform .3s ease;z-index:40}
  .sidebar.open{transform:translateX(0)}
  .app-main{padding:1rem}
}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(8px);z-index:60;display:flex;align-items:center;justify-content:center;padding:1rem}
.modal-content{max-width:520px;width:100%}

/* Alert */
.alert{padding:1rem;border-radius:.75rem;display:flex;gap:.75rem;align-items:flex-start;font-size:.875rem;margin-bottom:1rem}
.alert-error{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.3);color:#fca5a5}
.alert-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.3);color:#86efac}
.alert-warning{background:rgba(250,204,21,.1);border:1px solid rgba(250,204,21,.3);color:#fde68a}
.alert-info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.3);color:#93c5fd}

/* Auth pages */
.auth-wrapper{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:3rem 1rem;position:relative;overflow:hidden}
.auth-wrapper .glow-orb:nth-child(1){top:-200px;left:-200px;width:500px;height:500px;background:rgba(212,175,55,.2)}
.auth-wrapper .glow-orb:nth-child(2){bottom:-200px;right:-200px;width:400px;height:400px;background:rgba(212,175,55,.15);animation-delay:2s}
.auth-card{max-width:440px;width:100%;padding:2.5rem 2rem}

/* Code input */
.code-input{text-align:center;font-size:2rem;letter-spacing:.5em;font-family:'JetBrains Mono',monospace;padding:1rem}

/* Misc */
hr{border:none;border-top:1px solid rgba(255,255,255,.08);margin:1rem 0}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);margin:1.5rem 0}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:#0A0A0A}
::-webkit-scrollbar-thumb{background:#333;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::selection{background:rgba(212,175,55,.3);color:#fff}

/* Grid utils */
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){
  .grid-cols-3,.grid-cols-4{grid-template-columns:repeat(2,1fr)}
  .md-grid-cols-1{grid-template-columns:1fr !important}
}
.md-grid-cols-2{grid-template-columns:1fr}
@media(min-width:768px){.md-grid-cols-2{grid-template-columns:repeat(2,1fr)}}

/* Pricing card */
.pricing-card{padding:1.75rem;border-radius:1.25rem;position:relative;display:flex;flex-direction:column;background:linear-gradient(135deg,#141414 0%,#1A1A1A 100%);border:1px solid rgba(212,175,55,.2);height:100%}
.pricing-card.popular{border:2px solid var(--gold);box-shadow:0 0 40px rgba(212,175,55,.3);transform:translateY(-4px)}
.pricing-card .badge-pop{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:.4rem 1rem;background:linear-gradient(90deg,var(--gold),var(--gold-dark));color:#0A0A0A;border-radius:9999px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;white-space:nowrap}
.pricing-card .level-pill{position:absolute;top:1rem;right:1rem;padding:.3rem .75rem;background:rgba(212,175,55,.15);border:1px solid rgba(212,175,55,.3);color:var(--gold);font-size:.75rem;font-weight:700;border-radius:9999px}

/* Avatar */
.avatar{width:40px;height:40px;border-radius:.75rem;background:linear-gradient(135deg,var(--gold),var(--gold-dark));display:inline-flex;align-items:center;justify-content:center;color:#0A0A0A;font-weight:700;font-size:.875rem}
