@import "tailwindcss";
@theme {
  --color-bg:       #0a0a0f;
  --color-s0:       #0c0c12;
  --color-s1:       #111117;
  --color-s2:       #16161e;
  --color-s3:       #1c1c26;
  --color-hover:    #1a1a24;
  --color-surface:  #101019;
  --color-surface2: #1d1d28;
  --color-b1:       rgba(255,255,255,0.06);
  --color-b2:       rgba(255,255,255,0.10);
  --color-t1:       #f0f0f5;
  --color-t2:       #8888a0;
  --color-t3:       #44445a;
  --color-dim:      #5c5c70;
  --color-akzent:   #4f8ef7;
  --color-akzent2:  #7c5cff;
  --color-success:  #3ecf8e;
  --color-warning:  #f5a623;
  --color-danger:   #f05252;
  --color-purple:   #c084fc;

  --font-sans: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}

/* ── Keyframes ── */
@keyframes clu-pulse     { 0%{transform:scale(.6);opacity:.5} 100%{transform:scale(2.4);opacity:0} }
@keyframes clu-type-in   { to{opacity:1;transform:translateY(0)} }
@keyframes clu-blink     { 50%{opacity:0} }
@keyframes clu-spin      { to{transform:rotate(360deg)} }
@keyframes clu-dot-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

@layer utilities {
  .dot-pulse { animation: clu-dot-pulse 2s infinite; }
  .clu-reset { all: revert; }
  .clu-spin  { animation: clu-spin .8s linear infinite; }
}

@layer components {

  /* Login ambient background */
  .clu-login-body::before {
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(60% 50% at 12% 10%,rgba(79,142,247,.10),transparent 65%),
      radial-gradient(50% 50% at 88% 100%,rgba(124,92,255,.08),transparent 65%);
  }
  .clu-login-body::after {
    content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(ellipse at center,#000 30%,transparent 75%);
  }

  /* Brand marks */
  .clu-brand-mark {
    background:linear-gradient(135deg,#4f8ef7 0%,#7c5cff 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 6px 16px rgba(79,142,247,.30);
    display:grid;place-items:center;
  }
  .clu-brand-mark::before {
    content:"";width:11px;height:11px;border-radius:50%;
    background:#0a0a0f;box-shadow:inset 0 0 0 2px #fff;
  }
  .clu-brand-mark-sm {
    background:linear-gradient(135deg,#4f8ef7 0%,#7c5cff 100%);
    box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 4px 12px rgba(79,142,247,.25);
    display:grid;place-items:center;
  }
  .clu-brand-mark-sm::before {
    content:"";width:10px;height:10px;border-radius:50%;
    background:#0c0c12;box-shadow:inset 0 0 0 2px #fff;
  }

  /* Pulse dot */
  .clu-pulse-dot { position:relative;flex:none; }
  .clu-pulse-dot::after {
    content:"";position:absolute;inset:-3px;border-radius:50%;
    background:currentColor;opacity:.35;animation:clu-pulse 1.8s ease-out infinite;
  }

  /* Input with :focus-within */
  .clu-input {
    display:flex;align-items:center;gap:10px;padding:0 12px;
    background:#101019;border:1px solid rgba(255,255,255,.06);border-radius:8px;
    transition:border-color .15s,background .15s,box-shadow .15s;height:40px;
  }
  .clu-input:hover { border-color:rgba(255,255,255,.10); }
  .clu-input:focus-within {
    border-color:rgba(79,142,247,.50);background:#12121c;
    box-shadow:0 0 0 3px rgba(79,142,247,.10);
  }
  .clu-input input {
    flex:1;background:none;border:0;outline:0;
    color:#f0f0f5;font-size:13.5px;font-family:inherit;min-width:0;height:100%;
  }
  .clu-input input::placeholder { color:#5c5c70; }

  /* Divider */
  .clu-divider {
    display:flex;align-items:center;gap:12px;color:#5c5c70;
    font-size:11px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;
  }
  .clu-divider::before,.clu-divider::after {
    content:"";flex:1;height:1px;background:rgba(255,255,255,.06);
  }

  /* SSO button */
  .clu-sso-btn {
    display:flex;align-items:center;justify-content:center;gap:8px;padding:9px 12px;
    background:#101019;border:1px solid rgba(255,255,255,.06);border-radius:8px;
    color:#f0f0f5;font-size:12.5px;font-weight:500;transition:all .15s;cursor:pointer;font-family:inherit;
  }
  .clu-sso-btn:hover { background:#1d1d28;border-color:rgba(255,255,255,.10); }

  /* Primary button */
  .clu-btn-primary {
    display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:10px 16px;background:#4f8ef7;color:#fff;border-radius:8px;
    font-weight:500;font-size:13.5px;height:40px;width:100%;
    transition:background .15s,transform .05s;border:none;cursor:pointer;font-family:inherit;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 1px 3px rgba(79,142,247,.35);
  }
  .clu-btn-primary:hover { background:#5e98f7; }
  .clu-btn-primary:active { transform:translateY(1px); }
  .clu-btn-primary:disabled { opacity:.7;cursor:not-allowed; }
  .clu-btn-primary svg.arrow { transition:transform .15s; }
  .clu-btn-primary:hover:not(:disabled) svg.arrow { transform:translateX(2px); }

  /* Alt button */
  .clu-alt-btn {
    display:flex;align-items:center;gap:10px;padding:9px 12px;
    background:transparent;border:1px solid rgba(255,255,255,.06);border-radius:8px;
    font-size:12.5px;color:#f0f0f5;font-weight:500;transition:all .15s;
    width:100%;cursor:pointer;font-family:inherit;
  }
  .clu-alt-btn:hover { border-color:rgba(255,255,255,.10);background:#101019; }

  /* Live side glow */
  .clu-live-side::before {
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(80% 50% at 100% 0%,rgba(79,142,247,.12),transparent 65%);
  }

  /* Terminal */
  .clu-term-line {
    display:flex;gap:10px;align-items:flex-start;
    opacity:0;transform:translateY(4px);animation:clu-type-in .35s ease forwards;
  }
  .clu-term-ok   { color:#3ecf8e; }
  .clu-term-warn { color:#f5a623; }
  .clu-term-err  { color:#f05252; }
  .clu-term-acc  { color:#4f8ef7; }
  .clu-term-dim  { color:#5c5c70; }
  .clu-term-pkg  { color:#c084fc; }

  /* Cursor */
  .clu-cursor {
    display:inline-block;width:7px;height:13px;background:#4f8ef7;
    vertical-align:-2px;animation:clu-blink 1s steps(1) infinite;margin-left:2px;
  }

  /* Dashboard topbar */
  .clu-topbar {
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    background:rgba(10,10,15,.85);
  }

  /* Search */
  .clu-search {
    display:flex;align-items:center;gap:8px;padding:6px 10px;
    background:#101019;border:1px solid rgba(255,255,255,.06);border-radius:7px;
    color:#8888a0;transition:border-color .15s;min-width:280px;
  }
  .clu-search:hover { border-color:rgba(255,255,255,.10); }
  .clu-search:focus-within { border-color:rgba(79,142,247,.5);background:#12121c; }
  .clu-search input {
    flex:1;background:none;border:0;outline:0;
    color:#f0f0f5;font-size:12.5px;font-family:inherit;min-width:0;
  }
  .clu-search input::placeholder { color:#8888a0; }

  /* Dashboard button */
  .clu-btn-dash {
    display:inline-flex;align-items:center;gap:6px;padding:7px 12px;
    background:#4f8ef7;color:#fff;border-radius:7px;font-weight:500;font-size:12.5px;
    transition:background .15s;border:none;cursor:pointer;font-family:inherit;
    box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 1px 3px rgba(79,142,247,.35);
  }
  .clu-btn-dash:hover { background:#5e98f7; }

  /* Metric top stripe */
  .clu-metric { position:relative;overflow:hidden; }
  .clu-metric::before { content:"";position:absolute;top:0;left:0;right:0;height:2px;background:#4f8ef7; }
  .clu-metric-success::before { background:#3ecf8e; }
  .clu-metric-warning::before { background:#f5a623; }
  .clu-metric-danger::before  { background:#f05252; }
  .clu-metric-neutral::before { background:#5c5c70; }

  /* Nav active bar */
  .clu-nav-active { position:relative; }
  .clu-nav-active::before {
    content:"";position:absolute;left:-12px;top:6px;bottom:6px;
    width:2px;border-radius:2px;background:#4f8ef7;
  }

  /* Row actions */
  .clu-row-actions { display:flex;gap:4px;justify-content:flex-end;opacity:0;transition:opacity .15s; }
  tr:hover .clu-row-actions { opacity:1; }

  /* Plan box overlay */
  .clu-plan-box { position:relative;overflow:hidden; }
  .clu-plan-box::before {
    content:"";position:absolute;inset:0;pointer-events:none;
    background:radial-gradient(120% 80% at 0% 0%,rgba(79,142,247,.10),transparent 60%);
  }

  /* Chart axis */
  .clu-chart-axis { font-family:var(--font-mono);font-size:9.5px;fill:#5c5c70; }

  /* ── Stepper ── */
  .clu-stepper { display:flex;align-items:center;gap:10px;margin-top:28px;font-family:var(--font-mono);font-size:11px;color:#44445a; }
  .clu-step { display:flex;align-items:center;gap:7px; }
  .clu-step-num { width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.06);display:grid;place-items:center;font-size:10.5px;color:#8888a0;background:#101019; }
  .clu-step.active .clu-step-num { border-color:#4f8ef7;color:#4f8ef7;background:rgba(79,142,247,.12); }
  .clu-step.done   .clu-step-num { border-color:#3ecf8e;color:#0a0a0f;background:#3ecf8e; }
  .clu-step-label { font-size:11px;color:#8888a0;text-transform:uppercase;letter-spacing:.06em;font-weight:500; }
  .clu-step.active .clu-step-label { color:#f0f0f5; }
  .clu-step-line { flex:1;height:1px;background:rgba(255,255,255,.06);min-width:14px;max-width:28px; }

  /* ── Two-column field row ── */
  .clu-field-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }

  /* ── Input suffix ── */
  .clu-input.with-suffix { padding-right:0; }
  .clu-input-suffix { height:100%;display:flex;align-items:center;padding:0 12px;border-left:1px solid rgba(255,255,255,.06);color:#8888a0;font-family:var(--font-mono);font-size:11.5px;background:rgba(255,255,255,.015);border-top-right-radius:8px;border-bottom-right-radius:8px; }

  /* ── Input valid checkmark ── */
  .clu-input-check { color:#3ecf8e;display:none;flex:none; }
  .clu-input.valid .clu-input-check { display:inline-flex; }

  /* ── Slug preview ── */
  .clu-slug-preview { font-family:var(--font-mono);font-size:11px;color:#8888a0;margin-top:4px; }
  .clu-slug-preview b { color:#4f8ef7;font-weight:500; }

  /* ── Password strength meter ── */
  .clu-pw-meter { display:flex;gap:4px;margin-top:6px; }
  .clu-pw-meter span { flex:1;height:3px;border-radius:2px;background:#16161e;transition:background .2s; }
  .clu-pw-meter.s1 span:nth-child(-n+1) { background:#f05252; }
  .clu-pw-meter.s2 span:nth-child(-n+2) { background:#f5a623; }
  .clu-pw-meter.s3 span:nth-child(-n+3) { background:#4f8ef7; }
  .clu-pw-meter.s4 span                 { background:#3ecf8e; }
  .clu-pw-rules { display:flex;flex-wrap:wrap;gap:6px 12px;margin-top:6px;font-family:var(--font-mono);font-size:10.5px;color:#5c5c70; }
  .clu-pw-rule { display:inline-flex;align-items:center;gap:5px; }
  .clu-pw-rule .clu-pw-bullet { width:5px;height:5px;border-radius:50%;background:#5c5c70;transition:background .15s; }
  .clu-pw-rule.ok { color:#3ecf8e; }
  .clu-pw-rule.ok .clu-pw-bullet { background:#3ecf8e; }

  /* ── Checkbox ── */
  .clu-checkbox { display:flex;align-items:flex-start;gap:10px;font-size:12.5px;color:#8888a0;cursor:pointer;user-select:none;line-height:1.45; }
  .clu-checkbox .clu-check-box { width:15px;height:15px;border-radius:4px;border:1px solid rgba(255,255,255,.10);background:#101019;display:grid;place-items:center;transition:all .15s;flex:none;margin-top:1px; }
  .clu-checkbox input:checked ~ .clu-check-box { background:#4f8ef7;border-color:#4f8ef7; }
  .clu-checkbox input:checked ~ .clu-check-box svg { opacity:1;transform:scale(1); }
  .clu-checkbox .clu-check-box svg { opacity:0;transform:scale(.6);transition:all .15s;color:#fff; }
  .clu-checkbox:hover { color:#f0f0f5; }

  /* ── Trial card (signup right panel) ── */
  .clu-trial-card { background:#16161e;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px 20px;position:relative;overflow:hidden; }
  .clu-trial-card::before { content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,#4f8ef7,#7c5cff); }
  .clu-trial-row { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px; }
  .clu-trial-tag { font-family:var(--font-mono);font-size:10.5px;color:#4f8ef7;background:rgba(79,142,247,.12);padding:3px 8px;border-radius:5px;border:1px solid rgba(79,142,247,.25);font-weight:500;text-transform:uppercase;letter-spacing:.05em; }
  .clu-trial-count { font-family:var(--font-mono);font-size:11px;color:#8888a0;display:inline-flex;align-items:center;gap:6px; }
  .clu-trial-title { font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.25;margin-top:12px; }
  .clu-trial-title em { font-style:normal;background:linear-gradient(90deg,#4f8ef7,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:700; }
  .clu-trial-sub { color:#8888a0;font-size:13px;margin-top:6px; }

  /* ── Benefit list ── */
  .clu-benefit-list { list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:14px; }
  .clu-benefit { display:flex;gap:12px;align-items:flex-start; }
  .clu-benefit-ico { width:30px;height:30px;border-radius:8px;background:rgba(79,142,247,.12);border:1px solid rgba(79,142,247,.22);color:#4f8ef7;display:grid;place-items:center;flex:none; }
  .clu-benefit-ico.success { background:rgba(62,207,142,.12);border-color:rgba(62,207,142,.22);color:#3ecf8e; }
  .clu-benefit-ico.purple  { background:rgba(124,92,255,.12);border-color:rgba(124,92,255,.25);color:#a78bfa; }
  .clu-benefit-ico.warn    { background:rgba(245,166,35,.10);border-color:rgba(245,166,35,.22);color:#f5a623; }
  .clu-benefit-title { font-size:13.5px;font-weight:500;color:#f0f0f5; }
  .clu-benefit-desc  { font-size:12.5px;color:#8888a0;margin-top:2px;line-height:1.5; }

  /* ── Quote card ── */
  .clu-quote-card { background:#16161e;border:1px solid rgba(255,255,255,.06);border-radius:12px;padding:18px 20px;margin-top:auto; }
  .clu-quote-text { font-size:13.5px;color:#dcdce8;line-height:1.55; }
  .clu-quote-text::before { content:"\201E";color:#4f8ef7;font-size:24px;line-height:0;margin-right:4px;vertical-align:-6px;font-weight:600; }
  .clu-quote-text::after  { content:"\201D";color:#4f8ef7;font-weight:600; }
  .clu-quote-author { display:flex;align-items:center;gap:10px;margin-top:12px; }
  .clu-avatar { width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3ecf8e,#2a9d6f);display:grid;place-items:center;color:#0a0a0f;font-weight:600;font-size:12px;font-family:var(--font-mono); }
  .clu-author-name { font-size:12px;color:#f0f0f5;font-weight:500; }
  .clu-author-role { font-size:11px;color:#8888a0;font-family:var(--font-mono); }

  /* ── Logo strip ── */
  .clu-logos    { display:flex;align-items:center;gap:20px;flex-wrap:wrap;opacity:.55;font-family:var(--font-mono);font-size:11px;color:#8888a0;text-transform:uppercase;letter-spacing:.08em; }
  .clu-logo-pill { padding:5px 10px;border:1px solid rgba(255,255,255,.06);border-radius:5px;background:#101019; }

  /* Login page responsive grid */
  .clu-login-grid {
    display:grid;
    grid-template-columns:minmax(420px,1fr) 1fr;
    min-height:100vh;
    min-height:100dvh;
    position:relative;
    z-index:10;
  }
  .clu-form-side { padding:32px 48px; }
  .clu-sso-row   { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
  @media(max-width:1080px){
    .clu-login-grid { grid-template-columns:1fr; }
    .clu-live-side  { display:none !important; }
    .clu-form-side  { padding:28px 36px; }
  }
  @media(max-width:640px){
    .clu-form-side      { padding:20px; }
    .clu-sso-row        { grid-template-columns:1fr; }
    .clu-login-status   { display:none !important; }
    .clu-field-row      { grid-template-columns:1fr; }
    .clu-step-label     { display:none; }
  }
  @media(max-width:390px){
    .clu-form-side { padding:16px; }
  }
}