/* Next Gen CRM — design system. Green / white / black. */
:root{
  --black:#07090a;
  --panel:#0f1412;
  --line:#1e2a24;
  --white:#f5f7f6;
  --muted:#8a9690;
  --green:#22c55e;
  --green-hi:#4ade80;
  --green-dk:#15803d;
  --danger:#f87171;
  --radius:14px;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:var(--font);background:var(--black);color:var(--white);-webkit-font-smoothing:antialiased}

/* ---------- Login ---------- */
.login-page{display:grid;place-items:center;min-height:100%;padding:24px;overflow:hidden;position:relative}
/* Glossy black: deep base, a soft top-left highlight, and a slow diagonal sheen. */
.bg-gloss{position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(120% 80% at 15% -10%,rgba(255,255,255,.07),transparent 55%),
    radial-gradient(90% 70% at 50% 120%,rgba(34,197,94,.10),transparent 60%),
    linear-gradient(180deg,#0b0d0c 0%,#050606 55%,#020303 100%)}
.bg-sheen{position:fixed;inset:-50%;z-index:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.035) 48%,rgba(255,255,255,.07) 50%,
    rgba(255,255,255,.035) 52%,transparent 58%);
  animation:sheen 11s ease-in-out infinite}
@keyframes sheen{0%{transform:translateX(-40%)}60%,100%{transform:translateX(40%)}}

/* Floating CRM activity chips behind the card */
.activity{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.chip{position:absolute;display:flex;align-items:center;gap:9px;padding:9px 13px 9px 10px;
  border-radius:12px;font-size:12.5px;color:rgba(245,247,246,.82);white-space:nowrap;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;animation:chipLife var(--life,7s) ease-in-out forwards}
.chip i{width:24px;height:24px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:12px;
  background:rgba(34,197,94,.14);color:var(--green-hi);border:1px solid rgba(34,197,94,.3)}
.chip b{font-weight:600;color:var(--white)}
.chip small{color:var(--muted);font-size:11px;margin-left:4px}
@keyframes chipLife{
  0%{opacity:0;transform:translateY(14px) scale(.96)}
  12%{opacity:var(--op,.75);transform:translateY(0) scale(1)}
  80%{opacity:var(--op,.75);transform:translateY(-10px)}
  100%{opacity:0;transform:translateY(-22px)}}

.login-wrap{position:relative;z-index:1;width:100%;max-width:400px;display:flex;flex-direction:column;align-items:center;gap:22px}

.brand{display:flex;align-items:center;gap:12px}
/* Spiral loader logo: three arcs turning at different speeds and directions. */
.logo{width:46px;height:46px;position:relative;filter:drop-shadow(0 0 12px rgba(34,197,94,.45))}
.logo svg{width:100%;height:100%;overflow:visible}
.logo .arc{fill:none;stroke-linecap:round;transform-origin:24px 24px}
.logo .a1{stroke:url(#lg);stroke-width:3.2;stroke-dasharray:70 200;animation:spin 1.6s linear infinite}
.logo .a2{stroke:var(--white);stroke-width:2.4;stroke-dasharray:34 200;opacity:.85;animation:spin 2.4s linear infinite reverse}
.logo .a3{stroke:var(--green-hi);stroke-width:2;stroke-dasharray:14 200;animation:spin 1.1s linear infinite}
.logo .core{fill:var(--green-hi);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4;transform:scale(.8)}}
.logo .core{transform-origin:24px 24px}
.brand-name{font-weight:700;font-size:20px;letter-spacing:-.01em;
  /* left-to-right light sweep across the wordmark */
  background:linear-gradient(90deg,var(--white) 0%,var(--white) 40%,#bfffd8 50%,var(--white) 60%,var(--white) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{0%{background-position:100% 0}70%,100%{background-position:-50% 0}}
.brand-name span{color:var(--green);-webkit-text-fill-color:var(--green)}
.brand-sub{font-size:12px;color:var(--muted);margin-top:1px}

.card{width:100%;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 40%),rgba(12,15,14,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px 28px;
  box-shadow:0 30px 80px rgba(0,0,0,.6)}
.card h1{font-size:22px;font-weight:600;letter-spacing:-.01em}
.muted{color:var(--muted);font-size:14px;margin:4px 0 22px}

label{display:block;font-size:13px;font-weight:500;color:#cfd6d2;margin:0 0 7px}
input{width:100%;height:46px;padding:0 14px;border-radius:10px;border:1px solid var(--line);
  background:#0a0d0c;color:var(--white);font:inherit;font-size:15px;outline:none;margin-bottom:16px;
  transition:border-color .15s,box-shadow .15s}
input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(34,197,94,.2)}
input.bad{border-color:var(--danger)}

.pw{position:relative}
.pw input{padding-right:64px}
.pw-toggle{position:absolute;right:6px;top:6px;height:34px;padding:0 10px;border:0;border-radius:7px;
  background:transparent;color:var(--muted);font:inherit;font-size:13px;cursor:pointer}
.pw-toggle:hover{color:var(--white);background:rgba(255,255,255,.05)}

.msg{font-size:13.5px;line-height:1.4;padding:10px 12px;border-radius:9px;margin:-4px 0 14px;
  background:rgba(248,113,113,.1);border:1px solid rgba(248,113,113,.35);color:#fecaca}
.msg.ok{background:rgba(34,197,94,.1);border-color:rgba(34,197,94,.4);color:#bbf7d0}

.btn-primary{position:relative;width:100%;height:48px;border:0;border-radius:10px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;color:var(--black);
  background:linear-gradient(180deg,var(--green-hi),var(--green));
  box-shadow:0 8px 24px rgba(34,197,94,.3),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .08s,filter .15s}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:active{transform:translateY(1px)}
.btn-primary:disabled{cursor:progress;filter:saturate(.6) brightness(.9)}
.spinner{display:none;position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;
  border:2px solid rgba(0,0,0,.25);border-top-color:var(--black);border-radius:50%;animation:spin .7s linear infinite}
.btn-primary.loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.foot{font-size:12px;color:#55605a}

@media (prefers-reduced-motion:reduce){
  .spinner{animation-duration:2s}
  .bg-sheen,.brand-name,.logo .a2,.logo .a3,.logo .core{animation:none}
  .logo .a1{animation-duration:4s}
}
@media (max-width:640px){.chip{font-size:11.5px}}

/* ---------- App shell (placeholder until the dashboard is built) ---------- */
.app-placeholder{display:grid;place-items:center;min-height:100%;text-align:center;padding:24px}
.app-placeholder h1{font-size:24px;margin-bottom:8px}
.app-placeholder p{color:var(--muted);margin-bottom:20px}
.btn-ghost{height:40px;padding:0 18px;border-radius:10px;border:1px solid var(--line);background:transparent;
  color:var(--white);font:inherit;cursor:pointer}
.btn-ghost:hover{border-color:var(--green);color:var(--green-hi)}