/* coindirectly.org/assets/css/style.css
   Cohesive, colorful, slightly animated UI for Coindirectly (shared-hosting friendly)
   ------------------------------------------------------------------------------- */

:root{
  --bg-0: #050b1b;
  --bg-1: #080f24;
  --bg-2: #0b1329;

  --text: #eaf2ff;
  --muted: #bcd1ff;
  --muted-2:#9fb7ff;

  --primary: #60a5fa;   /* blue */
  --teal:    #22d3ee;   /* cyan */
  --green:   #10b981;   /* emerald */
  --warn:    #f59e0b;   /* amber */
  --danger:  #ef4444;   /* red */

  --surface-1: rgba(255,255,255,.06);
  --surface-2: rgba(255,255,255,.12);

  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --inner-bd: inset 0 0 0 1px rgba(255,255,255,.06);
  --r-card: 18px;
  --r-btn: 12px;

  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Base ---------------------------------------------------------------------- */

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--text); font-family:var(--sans);
  background:
    radial-gradient(1000px 700px at 0% 0%, rgba(96,165,250,.10), transparent 60%),
    radial-gradient(1000px 700px at 100% 100%, rgba(34,197,94,.10), transparent 60%),
    linear-gradient(180deg, var(--bg-1), var(--bg-0) 45%, var(--bg-2));
  background-attachment: fixed;
  line-height:1.45;
}

a{ color:#93c5fd; text-decoration:none }
a:hover{ text-decoration:underline }

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

/* Layout -------------------------------------------------------------------- */

.container{ width:min(1100px, 92%); margin:0 auto }
.mt-12{ margin-top:12px }
.mt-16{ margin-top:16px }
.small{ font-size:13px; color:var(--muted) }

/* Top bar ------------------------------------------------------------------- */

.top{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight:700 }
.brand .logo{
  width:22px; height:22px; border-radius:8px;
  background: conic-gradient(from 180deg, var(--primary), var(--teal), var(--green), var(--primary));
  box-shadow:0 0 30px rgba(96,165,250,.35);
}
.pill{
  font-size:12px; padding:3px 8px; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  color:#dbeafe
}
.pill.ok{ background:rgba(16,185,129,.12); border-color: rgba(16,185,129,.35); color:#d1fae5 }

.user{ display:flex; align-items:center; gap:10px }
.copy{
  font-size:13px; color:var(--muted-2); padding:6px 10px; border-radius:10px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
}
.copy:hover{ background:rgba(255,255,255,.06) }

/* Buttons ------------------------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border-radius:var(--r-btn); border:1px solid var(--surface-2);
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(2,6,23,.70));
  color:var(--text); font-weight:600; box-shadow:var(--shadow), var(--inner-bd);
  transition: transform .15s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover{ transform: translateY(-1px) }
.btn.secondary{ background: rgba(255,255,255,.04) }
.btn.cta{
  background: linear-gradient(90deg, rgba(96,165,250,.35), rgba(34,197,94,.35));
  border-color: rgba(96,165,250,.45);
}
.btn.ok{
  background: linear-gradient(90deg, rgba(16,185,129,.35), rgba(34,197,94,.35));
  border-color: rgba(16,185,129,.45);
}

/* Panels / Cards ------------------------------------------------------------ */

.panel{
  position:relative; padding:14px; border-radius:var(--r-card);
  border:1px solid var(--surface-2);
  background: linear-gradient(180deg, var(--surface-1), rgba(2,6,23,.60));
  box-shadow: var(--shadow), var(--inner-bd);
  overflow:hidden;
}
.card{ composes: panel; } /* (for mental model; plain CSS keeps .panel) */

.header{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.header .logo{
  width:14px; height:14px; border-radius:6px;
  background: linear-gradient(135deg, var(--primary), var(--teal), var(--green));
}

/* Grids --------------------------------------------------------------------- */

.grid{ display:grid; gap:12px }
@media(min-width:980px){ .grid{ grid-template-columns: 1fr 1fr } }

/* Badges & labels ----------------------------------------------------------- */

.badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px }
.badge{
  font-size:12px; padding:4px 8px; border-radius:999px;
  border:1px dashed rgba(255,255,255,.20);
  color:#dbeafe; background: rgba(255,255,255,.05)
}

/* Code blocks / terminal-like ---------------------------------------------- */

pre, code{ font-family: var(--mono); }
pre{
  margin:0; padding:12px 14px; overflow:auto; border-radius:14px;
  background: #0b1329; color:#e8f0ff; border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}
code{ color:#cde3ff }
.hidden{ display:none }

.langtabs{ display:flex; gap:8px; margin-bottom:8px }
.langtabs button{
  padding:6px 10px; border-radius:10px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04); color:#cfe2ff; font-weight:600; cursor:pointer
}
.langtabs button.active{
  background:linear-gradient(90deg, rgba(96,165,250,.25), rgba(34,197,94,.25));
  border-color: rgba(96,165,250,.45);
}

/* Pricing ------------------------------------------------------------------- */

.pricing{ display:grid; gap:12px }
@media(min-width:980px){ .pricing{ grid-template-columns: repeat(3, 1fr) } }

.price-card{
  position:relative; padding:14px; border-radius:18px;
  border:1px solid var(--surface-2);
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(2,6,23,.70));
  box-shadow: var(--shadow), var(--inner-bd);
}
.price-card h3{ margin:0 0 6px }
.price-card .v{ font-size:22px; font-weight:800; margin:8px 0 12px; color:#e2f2ff }
.price-card .hr{ height:1px; background:rgba(255,255,255,.12); margin:8px 0 }
.price-card.popular{ outline:2px solid var(--primary); }

.price-card ul{ margin:8px 0 0 18px; padding:0; color:var(--muted); font-size:13px }
.price-card li{ margin:6px 0 }

/* Footer -------------------------------------------------------------------- */

.footer{
  margin:18px 0 30px; padding-top:14px; border-top:1px solid rgba(255,255,255,.08);
  color:var(--muted); font-size:13px; text-align:center;
}

/* Forms --------------------------------------------------------------------- */

input,select,textarea{
  font-family:var(--sans); font-size:14px;
}
label{ color:#cfe2ff }

input[type="text"], input[type="email"], input[type="password"], textarea, select{
  width:100%;
  color:var(--text);
  background: rgba(9,13,33,.6);
  border:1px solid var(--surface-2);
  border-radius:12px; padding:10px 12px;
  outline:0;
}
input:focus, textarea:focus, select:focus{
  border-color: rgba(96,165,250,.55);
  box-shadow:0 0 0 3px rgba(96,165,250,.20)
}

/* Animations & utilities ---------------------------------------------------- */

@keyframes floaty { from{ transform: translateY(-6px) } to{ transform: translateY(6px) } }
@keyframes pulse { 0%,100%{ opacity:1 } 50%{ opacity:.55 } }

.float{ animation: floaty 8s ease-in-out infinite }
.pulse{ animation: pulse 2.4s ease-in-out infinite }

/* Toast / flash (generic) --------------------------------------------------- */

.flash{
  padding:10px 12px; border-radius:12px; font-size:13px; margin:8px 0;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
}
.flash.ok{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35); color:#d1fae5 }
.flash.error{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35); color:#fee2e2 }
.flash.warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); color:#fff7ed }

/* Tables (dashboard lists) -------------------------------------------------- */

.table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:14px;
  border:1px solid rgba(255,255,255,.10); border-radius:14px; overflow:hidden;
}
.table thead th{
  text-align:left; background:rgba(255,255,255,.06); color:#dbeafe;
  padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.10);
}
.table tbody td{ padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.06); color:#eaf2ff }
.table tbody tr:hover{ background:rgba(255,255,255,.03) }
.table .status{
  padding:3px 8px; border-radius:999px; font-size:12px;
  border:1px solid rgba(255,255,255,.20); color:#e2f2ff;
}
.table .status.ok{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.35) }
.table .status.pending{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35) }
.table .status.failed{ background:rgba(239,68,68,.12); border-color:rgba(239,68,68,.35) }

/* Cards used in features section ------------------------------------------- */

.card.panel h3{ margin:0 0 4px; font-size:16px }
.card.panel p{ margin:0; color:var(--muted) }

/* Helper classes ------------------------------------------------------------ */

hr{ border:0; height:1px; background:rgba(255,255,255,.10); margin:12px 0 }

.center{ text-align:center }
.right{ text-align:right }

.tag{
  font-size:11px; padding:2px 6px; border-radius:6px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
}

/* Mobile tweaks ------------------------------------------------------------- */

@media(max-width:640px){
  .top{ flex-direction:column; align-items:flex-start; gap:8px }
  .user{ width:100%; justify-content:flex-start; flex-wrap:wrap }
}
/* Keep the shiny overlay purely visual */
.card-auth { position: relative; }
.card-auth .shine { 
  pointer-events: none;   /* <<< crucial */
  z-index: 0;
}

/* Make all real content sit above the overlay */
.card-auth > *:not(.shine) {
  position: relative;
  z-index: 1;
}

/* End ----------------------------------------------------------------------- */