/* CutFlow — Base Variables & Reset */
:root {
  --bg: #0c0c0e;
  --bg2: #111114;
  --bg3: #18181d;
  --bg4: #1e1e26;
  --surface: #22222c;
  --surface2: #2a2a38;
  --border: rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.12);
  --accent: #7c6af7;
  --accent2: #9d8eff;
  --accent3: #5b4de0;
  --cyan: #22d3ee;
  --green: #34d399;
  --red: #f87171;
  --amber: #fbbf24;
  --pink: #f472b6;
  --text: #f0f0f5;
  --text2: #9090a8;
  --text3: #5a5a70;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Syne', sans-serif;
  --r: 8px;
  --timeline-h: 200px;
  --header-h: 52px;
  --tools-w: 56px;
  --panel-w: 280px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);}
body{font-family:var(--sans);color:var(--text);display:flex;flex-direction:column;}

/* ── AUTH SCREEN ── */
#auth-screen{
  position:fixed;inset:0;z-index:1000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  background-image:
    radial-gradient(ellipse 60% 50% at 30% 40%, rgba(124,106,247,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 75% 65%, rgba(34,211,238,0.07) 0%, transparent 60%);
}
.auth-card{
  width:420px;
  background:var(--bg2);
  border:1px solid var(--border2);
  border-radius:16px;
  padding:40px;
  position:relative;
  overflow:hidden;
}
.auth-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--accent3), var(--accent), var(--cyan));
}
.auth-logo{
  display:flex;align-items:center;gap:12px;margin-bottom:32px;
}
.auth-logo-mark{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg, var(--accent3), var(--accent));
  display:flex;align-items:center;justify-content:center;font-size:20px;
}
.auth-logo-text{font-size:22px;font-weight:800;letter-spacing:-0.5px;}
.auth-logo-text span{color:var(--accent);}
.auth-tabs{display:flex;gap:0;margin-bottom:28px;background:var(--bg3);border-radius:8px;padding:3px;}
.auth-tab{
  flex:1;padding:7px;text-align:center;font-size:13px;font-weight:600;
  border-radius:6px;cursor:pointer;transition:all .2s;color:var(--text2);border:none;background:none;
  font-family:var(--sans);
}
.auth-tab.active{background:var(--surface);color:var(--text);}
.auth-field{margin-bottom:16px;}
.auth-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px;display:block;text-transform:uppercase;letter-spacing:.06em;}
.auth-input{
  width:100%;padding:11px 14px;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--r);color:var(--text);font-size:14px;font-family:var(--sans);
  outline:none;transition:border-color .2s;
}
.auth-input:focus{border-color:var(--accent);}
.auth-btn{
  width:100%;padding:12px;background:linear-gradient(135deg,var(--accent3),var(--accent));
  border:none;border-radius:var(--r);color:#fff;font-size:14px;font-weight:700;
  font-family:var(--sans);cursor:pointer;transition:all .2s;margin-top:8px;
  letter-spacing:.03em;
}
.auth-btn:hover{opacity:.9;transform:translateY(-1px);}
.auth-sep{text-align:center;color:var(--text3);font-size:12px;margin:16px 0;position:relative;}
.auth-sep::before,.auth-sep::after{content:'';position:absolute;top:50%;width:38%;height:1px;background:var(--border);}
.auth-sep::before{left:0;}.auth-sep::after{right:0;}
.auth-guest{
  width:100%;padding:10px;background:transparent;border:1px solid var(--border);
  border-radius:var(--r);color:var(--text2);font-size:13px;font-weight:600;
  font-family:var(--sans);cursor:pointer;transition:all .2s;
}
.auth-guest:hover{border-color:var(--border2);color:var(--text);}
.auth-note{font-size:11px;color:var(--text3);text-align:center;margin-top:16px;line-height:1.6;}