/* ═══════════════════════════════════════════════════════════
   Cadify — Design System
   Dark palette, cyan accent, aligned with SmartCut
═══════════════════════════════════════════════════════════ */

:root {
  --c-bg:           #06090f;
  --c-bg2:          #080c14;
  --c-surface:      #0d1626;
  --c-surface2:     #111c30;
  --c-card:         #0f1e35;
  --c-border:       rgba(255,255,255,.07);
  --c-border2:      rgba(255,255,255,.04);
  --c-text:         #e2e8f2;
  --c-text-dim:     #a0aec0;
  --c-muted:        #4a5568;
  --c-faint:        #2d3748;
  --c-cyan:         #00d4ff;
  --c-cyan-pale:    rgba(0,212,255,.08);
  --c-cyan-border:  rgba(0,212,255,.25);
  --c-green:        #00e676;
  --c-orange:       #ff9500;
  --c-red:          #ff4444;
  --c-glow:         0 0 24px rgba(0,212,255,.18);
  --c-glow-sm:      0 0 12px rgba(0,212,255,.12);
  --c-shadow:       0 4px 24px rgba(0,0,0,.4);
  --c-shadow-lg:    0 8px 40px rgba(0,0,0,.6);
  --c-font:         'Segoe UI', system-ui, sans-serif;
  --c-r:            8px;
  --c-r-sm:         6px;
  --c-r-lg:         12px;
  --c-r-xl:         16px;
  --c-r-pill:       999px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--c-font);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ── LOGO ── */
.c-logo {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--c-text);
}
.c-logo span { color: var(--c-cyan); }
.c-logo-icon {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--c-surface); border: 1px solid var(--c-cyan-border);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--c-glow-sm);
}

/* ── BUTTONS ── */
.c-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--c-r); border: none;
  font-family: var(--c-font); font-size: .875rem; font-weight: 600;
  cursor: pointer; transition: all .18s; white-space: nowrap; text-decoration: none;
}
.c-btn-cyan {
  background: var(--c-cyan); color: #06090f;
  box-shadow: 0 0 16px rgba(0,212,255,.3);
}
.c-btn-cyan:hover { background: #22dcff; box-shadow: 0 0 24px rgba(0,212,255,.45); transform: translateY(-1px); }
.c-btn-outline {
  background: transparent; color: var(--c-text-dim);
  border: 1px solid var(--c-border);
}
.c-btn-outline:hover { border-color: var(--c-cyan-border); color: var(--c-cyan); }
.c-btn-surface {
  background: var(--c-surface2); color: var(--c-text-dim);
  border: 1px solid var(--c-border);
}
.c-btn-surface:hover { border-color: var(--c-cyan-border); color: var(--c-text); }
.c-btn-ghost {
  background: transparent; color: var(--c-text-dim); border: none;
}
.c-btn-ghost:hover { color: var(--c-cyan); }
.c-btn-lg { padding: 12px 28px; font-size: .95rem; border-radius: var(--c-r-lg); }
.c-btn-sm { padding: 6px 14px; font-size: .8rem; }
.c-btn-block { width: 100%; }
.c-btn:disabled { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ── INPUTS ── */
.c-input {
  width: 100%; padding: 10px 14px;
  background: var(--c-bg); border: 1px solid var(--c-border);
  border-radius: var(--c-r); color: var(--c-text);
  font-family: var(--c-font); font-size: .875rem;
  transition: border-color .15s, box-shadow .15s;
}
.c-input:focus { outline: none; border-color: var(--c-cyan); box-shadow: 0 0 0 3px rgba(0,212,255,.1); }
.c-input::placeholder { color: var(--c-muted); }
.c-label { display: block; font-size: .78rem; font-weight: 600; color: var(--c-text-dim); margin-bottom: 6px; }
.c-field { margin-bottom: 16px; }

/* ── CARDS ── */
.c-card {
  background: var(--c-card); border: 1px solid var(--c-border);
  border-radius: var(--c-r-xl); padding: 24px;
  transition: border-color .2s, box-shadow .2s;
}
.c-card:hover { border-color: var(--c-cyan-border); box-shadow: var(--c-glow); }

/* ── TYPOGRAPHY ── */
.c-h1 { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 900; line-height: 1.12; letter-spacing: -.03em; }
.c-h2 { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; line-height: 1.2; letter-spacing: -.02em; }
.c-h3 { font-size: 1.1rem; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.c-sub { color: var(--c-text-dim); font-size: .88rem; }

/* ── PILL / BADGE ── */
.c-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--c-cyan-pale); border: 1px solid var(--c-cyan-border);
  border-radius: var(--c-r-pill); padding: 4px 14px;
  font-size: .72rem; font-weight: 700; color: var(--c-cyan);
  letter-spacing: .06em; text-transform: uppercase;
}
.c-pill::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--c-cyan); box-shadow:0 0 6px var(--c-cyan); }

/* ── DIVIDER ── */
.c-divider { height: 1px; background: var(--c-border); margin: 20px 0; }
.c-divider-text {
  display: flex; align-items: center; gap: 12px;
  color: var(--c-muted); font-size: .78rem;
}
.c-divider-text::before, .c-divider-text::after {
  content: ''; flex: 1; height: 1px; background: var(--c-border);
}

/* ── AUTH TABS ── */
.c-tabs { display: flex; border-bottom: 1px solid var(--c-border); margin-bottom: 24px; }
.c-tab {
  flex: 1; padding: 10px; text-align: center; font-size: .85rem; font-weight: 600;
  color: var(--c-muted); cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .15s; margin-bottom: -1px;
}
.c-tab.active { color: var(--c-cyan); border-bottom-color: var(--c-cyan); }

/* ── GRID ── */
.c-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── SECTION ── */
.c-section { padding: 80px 5%; max-width: 1200px; margin: 0 auto; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--c-bg); }
::-webkit-scrollbar-thumb { background: var(--c-faint); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-muted); }

/* ── TOAST ── */
#_c_toast {
  position: fixed; bottom: 22px; right: 22px; z-index: 9999;
  background: var(--c-surface); border: 1px solid rgba(0,212,255,.2);
  color: var(--c-text); padding: 11px 18px; border-radius: var(--c-r-lg);
  font-size: .83rem; line-height: 1.5; box-shadow: var(--c-shadow-lg);
  transition: all .28s ease; opacity: 0; transform: translateY(14px);
  max-width: 360px; cursor: pointer;
}