/* ── Real Coequiper Design System ── */

/* ── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:        #ffffff;
  --bg-2:      #fafafa;
  --bg-3:      #f4f4f5;
  --border:    #e4e4e7;
  --text:      #18181b;
  --text-2:    #52525b;
  --text-3:    #a1a1aa;
  --accent:    #7c5cfc;
  --accent-h:  #6d4ce0;
  --accent-lt: #f5f3ff;
  --red:       #E11B22;
  --red-lt:    #fef2f2;
  --green:     #16a34a;
  --blue:      #0054A6;
  --sh-s: 0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --sh:   0 4px 16px rgba(0,0,0,.08),0 1px 4px rgba(0,0,0,.04);
  --r:    10px;
  --r-lg: 16px;
}

[data-theme="dark"] {
  --bg:        #0f0f11;
  --bg-2:      #18181b;
  --bg-3:      #27272a;
  --border:    #3f3f46;
  --text:      #fafafa;
  --text-2:    #a1a1aa;
  --text-3:    #52525b;
  --accent:    #9d7cff;
  --accent-h:  #b39dff;
  --accent-lt: #1c1524;
  --red-lt:    #1c0a0a;
  --sh-s: 0 1px 3px rgba(0,0,0,.4);
  --sh:   0 4px 16px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.3);
}

/* ── BASE ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Inter','Montserrat',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  transition:background .15s,color .15s;
}

/* ── THEME BUTTON ────────────────────────────────────── */
.theme-btn {
  background:var(--bg-3);
  border:1px solid var(--border);
  color:var(--text-2);
  width:34px; height:34px;
  border-radius:8px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; line-height:1;
  transition:background .15s;
  flex-shrink:0;
}
.theme-btn:hover { background:var(--border); }

/* ── SHARED NAV ──────────────────────────────────────── */
.rc-nav {
  background:var(--bg);
  border-bottom:1px solid var(--border);
  padding:0 24px;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  position:sticky;
  top:0;
  z-index:100;
  box-shadow:var(--sh-s);
}
.rc-nav-brand {
  font-size:14px; font-weight:800; letter-spacing:-.03em;
  color:var(--text); text-decoration:none; white-space:nowrap;
}
.rc-nav-brand span { color:var(--red); }
.rc-nav-right { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* ── SHARED BUTTONS ──────────────────────────────────── */
.rc-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:9px 18px;
  border-radius:var(--r);
  font-family:inherit; font-size:13px; font-weight:600;
  cursor:pointer; border:none; text-decoration:none;
  transition:background .15s, opacity .15s, box-shadow .15s;
  white-space:nowrap;
}
.rc-btn:disabled { opacity:.45; cursor:not-allowed; }
.rc-btn-primary { background:var(--accent); color:#fff; }
.rc-btn-primary:hover:not(:disabled) { background:var(--accent-h); }
.rc-btn-red { background:var(--red); color:#fff; }
.rc-btn-red:hover:not(:disabled) { opacity:.88; }
.rc-btn-ghost {
  background:transparent; color:var(--text-2);
  border:1px solid var(--border);
}
.rc-btn-ghost:hover { background:var(--bg-3); color:var(--text); }
.rc-btn-danger { background:transparent; color:var(--red); border:1px solid #fecaca; }
.rc-btn-danger:hover { background:var(--red-lt); }

/* ── SHARED INPUTS ───────────────────────────────────── */
.rc-input {
  width:100%; padding:11px 14px;
  background:var(--bg-3);
  border:1.5px solid var(--border);
  border-radius:var(--r);
  font-family:inherit; font-size:14px; font-weight:500;
  color:var(--text);
  outline:none;
  transition:border .15s, box-shadow .15s;
}
.rc-input:focus {
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-lt);
  background:var(--bg);
}
.rc-input::placeholder { color:var(--text-3); }

/* ── SHARED CARD ─────────────────────────────────────── */
.rc-card {
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-s);
}

/* ── SHARED BADGE ────────────────────────────────────── */
.rc-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border-radius:20px;
  font-size:11px; font-weight:600;
}
.rc-badge-green { background:#dcfce7; color:#16a34a; }
.rc-badge-violet { background:var(--accent-lt); color:var(--accent); }
.rc-badge-red    { background:var(--red-lt);    color:var(--red);    }
.rc-badge-gray   { background:var(--bg-3);       color:var(--text-3); }

/* ── SHARED LABEL ────────────────────────────────────── */
.rc-label {
  display:block;
  font-size:12px; font-weight:600; color:var(--text-2);
  margin-bottom:6px;
}

/* ── SHARED ERROR BOX ────────────────────────────────── */
.rc-error {
  background:var(--red-lt);
  border:1px solid #fecaca;
  border-radius:var(--r);
  padding:10px 14px;
  font-size:13px; font-weight:500; color:var(--red);
  display:none;
}
.rc-success {
  background:#f0fdf4;
  border:1px solid #86efac;
  border-radius:var(--r);
  padding:10px 14px;
  font-size:13px; font-weight:500; color:var(--green);
  display:none;
}

/* ── CREDITS BADGE ───────────────────────────────────── */
.credits-badge {
  display:inline-flex; align-items:center; gap:5px;
  background:var(--accent-lt); color:var(--accent);
  font-size:11px; font-weight:700;
  padding:5px 12px; border-radius:20px; white-space:nowrap;
}
.credits-badge.low { background:var(--red-lt); color:var(--red); }

/* ── SPINNER ─────────────────────────────────────────── */
.rc-spinner {
  border:2px solid var(--border);
  border-top-color:var(--accent);
  border-radius:50%; width:24px; height:24px;
  animation:rc-spin .7s linear infinite;
}
@keyframes rc-spin { to { transform:rotate(360deg); } }

/* ── DIVIDER ─────────────────────────────────────────── */
.rc-divider {
  display:flex; align-items:center; gap:12px;
  color:var(--text-3); font-size:11px; font-weight:600;
}
.rc-divider::before,.rc-divider::after {
  content:''; flex:1; height:1px; background:var(--border);
}