/* app.css - shared light NEO-BRUTALISM UI, the same look as the dashboard (index.html).
   Paper background with dots, thick ink borders, hard offset shadows, bright colour blocks. */

:root{
  --paper:#f4efe4;
  --paper-2:#ebe4d4;
  --card:#ffffff;
  --ink:#111111;
  --ink-2:#2a2a2a;
  --muted:#6b655a;
  --faint:#a39c8e;

  --yellow:#ffd23f;  --yellow-soft:#fff3c4;
  --orange:#ff6b35;  --orange-soft:#ffdccd;
  --green:#3ddc84;   --green-soft:#c9f6dc;  --green-ink:#0a7a3c;
  --blue:#5aa9ff;    --blue-soft:#d4e8ff;   --blue-ink:#1450b8;
  --violet:#b49cff;  --violet-soft:#e6ddff;
  --red:#ff4d4d;     --red-soft:#ffd6d6;    --red-ink:#b3141c;
  --pink:#ff8fd1;
  --discord:#8c9eff;

  /* older names some page styles still use */
  --bg:var(--paper);
  --panel:var(--card);
  --panel-2:var(--paper-2);
  --line:var(--ink);
  --soft:var(--ink-2);
  --cyan:var(--blue-ink);
  --accent-cyan:var(--blue-ink);
  --accent-green:var(--green-ink);
  --text-muted:var(--muted);

  --bw:2.5px;
  --border:var(--bw) solid var(--ink);
  --sh-xs:2px 2px 0 var(--ink);
  --sh-sm:3px 3px 0 var(--ink);
  --sh:5px 5px 0 var(--ink);
  --sh-lg:7px 7px 0 var(--ink);
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
[hidden]{display:none!important}
a{color:inherit;text-decoration:none}
::selection{background:var(--yellow);color:var(--ink)}

body{
  min-height:100vh;
  color:var(--ink);
  background-color:var(--paper);
  background-image:radial-gradient(rgba(17,17,17,.13) 1px,transparent 1px);
  background-size:22px 22px;
  font-family:"Space Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:28px;
  overflow-x:hidden;
}
body.modal-open{overflow:hidden}
.container{max-width:1480px;margin:0 auto}

/* ===== Flat white surface: thick ink border + hard shadow ===== */
.surface,header,nav,.card,.stat,.feature,.plan,.step,.discord-card,.login-card{
  position:relative;background:var(--card);
  border:3px solid var(--ink);border-radius:16px;box-shadow:var(--sh-lg);
}

/* ===== Logo mark ===== */
.logo-box{
  width:54px;height:54px;flex:0 0 54px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:23px;color:var(--ink);
  background:var(--yellow);border:3px solid var(--ink);box-shadow:var(--sh-sm);
  transform:rotate(-4deg);transition:transform .25s var(--ease);
}
.logo-box:hover{transform:rotate(3deg) scale(1.04)}

/* ===== Brand lockup (same animation as the dashboard) ===== */
.brand{display:flex;align-items:center;gap:15px;min-width:0}
.brand-text{min-width:0}
.brand-text .jxe-brand{display:flex;align-items:center;gap:10px;line-height:1;white-space:nowrap}
.brand-text .jxe-main{
  position:relative;display:inline-flex;perspective:520px;isolation:isolate;
  font-size:28px;font-weight:700;letter-spacing:-1px;color:var(--ink);
}
.brand-text .jxe-main .ch{
  display:inline-block;color:var(--ink);transform-origin:50% 100%;
  animation:shawon-in .8s cubic-bezier(.2,1.4,.3,1) both,shawon-wave 3.6s ease-in-out infinite;
  animation-delay:calc(var(--i) * 80ms + 100ms),calc(var(--i) * 110ms + 1.2s);
}
.brand-text .jxe-main::after{
  content:"";position:absolute;z-index:-1;left:-3px;right:-3px;bottom:1px;height:11px;
  background:var(--orange);transform-origin:left;animation:brand-mark .7s .5s var(--ease) both;
}
@keyframes shawon-in{0%{opacity:0;transform:translateY(16px) rotateX(-90deg)}100%{opacity:1;transform:none}}
@keyframes shawon-wave{0%,26%,100%{translate:0 0}12%{translate:0 -4px}}
@keyframes brand-mark{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.brand-text .jxe-divider{width:3px;height:22px;background:var(--ink);border-radius:2px}
.brand-text .jxe-level{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--ink-2);text-transform:uppercase}
.brand-text .jxe-pro{
  display:inline-flex;align-items:center;padding:4px 8px;border-radius:6px;
  font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.12em;color:var(--ink);
  background:var(--pink);border:2px solid var(--ink);box-shadow:var(--sh-xs);transform:rotate(3deg);
}
.brand-text > p{margin-top:11px;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:500;color:var(--muted)}
.brand-text > p b{color:var(--ink);font-weight:700;font-family:"JetBrains Mono",monospace;font-size:12px}

/* ===== Live tag ===== */
.live-tag{
  display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;
  font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink);background:var(--green);border:2px solid var(--ink);box-shadow:var(--sh-xs);
}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);display:inline-block;animation:blink 1.4s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}

/* ===== Buttons ===== */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:10px 18px;border-radius:10px;
  font:700 14px/1 "Space Grotesk",sans-serif;letter-spacing:.01em;color:var(--ink);text-decoration:none;
  background:var(--card);border:var(--border);box-shadow:var(--sh-sm);cursor:pointer;
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:var(--sh)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--ink)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--sh-xs)}
.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.btn-primary{background:var(--orange)}
.btn-primary:hover{background:#ff7d4d}
.btn-secondary{background:var(--card)}
.btn-secondary:hover{background:var(--yellow-soft)}
.btn-discord{background:var(--discord)}
.btn-discord:hover{background:#a3b1ff}
.btn-danger{background:var(--red);color:#fff}
.btn-danger:hover{background:#ff6464}
.btn-lg{min-height:54px;padding:15px 28px;font-size:16px;box-shadow:var(--sh)}
.btn-lg:hover{box-shadow:var(--sh-lg)}
.btn-sm{min-height:36px;padding:7px 12px;font-size:12px;border-width:2px;box-shadow:var(--sh-xs)}
.btn-sm:hover{box-shadow:var(--sh-sm)}

/* ===== Form fields ===== */
label{display:block;margin-bottom:7px;font:700 11px/1.2 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
input:not([type=checkbox]):not([type=radio]),select,textarea,.form-input{
  width:100%;min-height:48px;padding:12px 14px;border-radius:10px;outline:none;
  font:500 15px "Space Grotesk",sans-serif;color:var(--ink);
  background:var(--card);border:2.5px solid var(--ink);
  transition:box-shadow .12s ease,background .12s ease,transform .12s ease;
}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus,.form-input:focus{
  background:var(--yellow-soft);box-shadow:var(--sh-sm);transform:translate(-1px,-1px);
}
select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:42px;font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;
}
select option{background:#fff;color:var(--ink)}
textarea{resize:vertical;line-height:1.55}
input[type=checkbox],input[type=radio]{accent-color:var(--ink)}

/* ===== Notices ===== */
.notice,.info-box{
  display:flex;align-items:flex-start;gap:12px;padding:14px 18px;border-radius:12px;
  font-size:14px;font-weight:500;line-height:1.55;color:var(--ink);
  background:var(--blue-soft);border:var(--border);box-shadow:var(--sh-sm);
  white-space:pre-line;overflow-wrap:anywhere;
}
.notice > i,.info-box > i{
  flex:0 0 28px;width:28px;height:28px;margin-top:-2px;border-radius:7px;display:grid;place-items:center;font-size:12px;
  color:var(--ink);background:var(--blue);border:2px solid var(--ink);
}
.error-box{
  padding:12px 15px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.5;color:var(--red-ink);
  background:var(--red-soft);border:var(--border);box-shadow:3px 3px 0 var(--red);
}

/* ===== Badges ===== */
.badge{
  display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;white-space:nowrap;
  font:700 10px/1 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink);background:var(--card);border:2px solid var(--ink);box-shadow:var(--sh-xs);
}

/* ===== Modal ===== */
.modal,.modal-overlay{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(17,17,17,.5)}
.modal-overlay{display:none}
.modal-overlay.active{display:flex;animation:fade-in .18s ease}
.modal-card{
  position:relative;width:min(480px,100%);padding:26px;border-radius:16px;
  background:var(--card);border:3px solid var(--ink);box-shadow:9px 9px 0 var(--ink);
  animation:modal-in .35s cubic-bezier(.2,1.4,.3,1);
}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
@keyframes modal-in{from{opacity:0;transform:translateY(24px) rotate(-1.5deg)}to{opacity:1;transform:none}}

/* ===== Phones ===== */
@media(max-width:650px){
  :root{--sh:4px 4px 0 var(--ink);--sh-lg:5px 5px 0 var(--ink)}
  body{padding:14px;background-size:18px 18px}
  .logo-box{width:46px;height:46px;flex-basis:46px;font-size:19px}
  .brand{gap:11px}
  .brand-text .jxe-main{font-size:22px}
  .brand-text .jxe-level{font-size:10px}
  .brand-text .jxe-pro{font-size:8px;padding:3px 6px}
  .brand-text .jxe-divider{height:17px}
  .brand-text > p{margin-top:9px}
  .modal-card{box-shadow:6px 6px 0 var(--ink)}
}
/* 16px fields stop iPhones zooming in when a field is tapped */
@media(max-width:650px),(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),select,textarea,.form-input{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}