/* DuoCraft Client Portal - styles */
:root {
  --bg:#0d0a16;
  --card:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09);
  --tx:#ece8f7;
  --mu:#a3a1ba;
  --ac:#a78bfa;
  --ink:#1a1033;
  --ok:#5fd4a6;
  --wn:#f5c26b;
  --bl:#60a5fa;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--tx);
  font:16px/1.55 "IBM Plex Sans",system-ui,sans-serif;
}

/* soft aurora + faint grid behind every page */
body:before,body:after {
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
}

body:before {
  background:radial-gradient(640px 420px at 0 0,rgba(124,58,237,.26),transparent 70%),radial-gradient(560px 420px at 100% 100%,rgba(192,38,211,.14),transparent 70%),radial-gradient(420px 320px at 85% 10%,rgba(37,99,235,.1),transparent 70%);
}

body:after {
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 0,#000 10%,transparent 70%);
  mask-image:radial-gradient(ellipse at 50% 0,#000 10%,transparent 70%);
}

h1,h2,h3,b {
  font-family:"Space Grotesk",system-ui,sans-serif;
}

h1,h2,h3 {
  margin:0 0 .6rem;
  line-height:1.2;
  color:#fff;
}

h2 {
  font-size:1.4rem;
  letter-spacing:-.01em;
}

h3 {
  font-size:1.05rem;
}

main {
  max-width:960px;
  margin:0 auto;
  padding:24px 16px 72px;
}

header {
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px max(16px,calc((100% - 928px) / 2));
  background:rgba(13,10,22,.7);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}

.lg {
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
}

.lg img {
  height:34px;
  width:auto;
}

.lg small {
  display:block;
  color:var(--mu);
}

/* page heading */
.pgh {
  margin:4px 0 22px;
  animation:pgin .5s ease both;
}

.pgh small {
  display:block;
  font-size:.75rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c4b5fd;
  margin-bottom:4px;
}

.pgh h1 {
  font-size:clamp(1.6rem,3.4vw,2.2rem);
  letter-spacing:-.02em;
  margin:0;
}

@keyframes pgin {
  from {
    opacity:0;
    transform:translateY(8px);
  }
}

.card {
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:22px;
  margin-bottom:16px;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  box-shadow:0 24px 48px -28px rgba(0,0,0,.7);
}

label {
  display:block;
  font-weight:500;
  font-size:.88rem;
  color:#d4d1e6;
  margin:14px 0 6px;
}

input,textarea,select {
  width:100%;
  font:inherit;
  color:var(--tx);
  background:rgba(0,0,0,.28);
  border:1px solid var(--line);
  border-radius:12px;
  padding:11px 14px;
  transition:border-color .2s,box-shadow .2s;
}

input::placeholder,textarea::placeholder {
  color:#6f6c86;
}

select option {
  background:#1a1430;
}

input[type=range],input[type=checkbox] {
  accent-color:var(--ac);
}

input[type=range] {
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}

input:focus,textarea:focus,select:focus {
  outline:none;
  border-color:var(--ac);
  box-shadow:0 0 0 3px rgba(167,139,250,.2);
}

button:focus-visible,a:focus-visible {
  outline:2px solid var(--ac);
  outline-offset:2px;
}

.b {
  font:600 .95rem "Space Grotesk",system-ui,sans-serif;
  background:linear-gradient(135deg,#a78bfa,#c084fc);
  color:var(--ink);
  border:1px solid transparent;
  border-radius:12px;
  padding:11px 20px;
  cursor:pointer;
  box-shadow:0 10px 24px -12px rgba(167,139,250,.8);
  transition:filter .2s,transform .2s,background .2s,color .2s;
}

.b:hover {
  filter:brightness(1.08);
}

.b:active {
  transform:scale(.98);
}

.b.g {
  background:rgba(167,139,250,.08);
  color:#d8ccff;
  border-color:rgba(167,139,250,.35);
  box-shadow:none;
}

.b.g:hover {
  background:rgba(167,139,250,.16);
  filter:none;
}

.b.s {
  padding:7px 14px;
  font-size:.85rem;
  border-radius:10px;
}

.b:disabled {
  opacity:.45;
  cursor:not-allowed;
  filter:none;
  transform:none;
}

.row {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:space-between;
}

.row>input {
  flex:1;
  min-width:160px;
}

.mu,small {
  color:var(--mu);
}

.err {
  color:#ff9aa8;
}

/* stat cards */
.st {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:14px;
  margin-bottom:22px;
}

.st div {
  --c:var(--ac);
  position:relative;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  padding:18px;
  color:var(--mu);
  font-size:.88rem;
  transition:border-color .25s,transform .25s;
}

.st div:hover {
  border-color:color-mix(in srgb,var(--c) 45%,transparent);
  transform:translateY(-2px);
}

.st div:nth-child(2) {
  --c:var(--wn);
}

.st div:nth-child(3) {
  --c:var(--ok);
}

.st div:nth-child(4) {
  --c:var(--bl);
}

.st div:before {
  content:"";
  position:absolute;
  width:140px;
  height:140px;
  top:-60px;
  right:-50px;
  border-radius:50%;
  background:var(--c);
  opacity:.16;
  filter:blur(34px);
}

.st i {
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:11px;
  margin-bottom:14px;
  color:var(--c);
  background:color-mix(in srgb,var(--c) 14%,transparent);
}

.st i svg {
  width:20px;
  height:20px;
}

.st b {
  display:block;
  font-size:2rem;
  line-height:1.1;
  color:#fff;
}

.tabs {
  display:inline-flex;
  gap:4px;
  padding:4px;
  margin-bottom:16px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  border-radius:14px;
}

.tabs .b {
  box-shadow:none;
}

.tabs .b.g {
  background:none;
  border-color:transparent;
  color:var(--mu);
}

.tabs .b.g:hover {
  color:#fff;
  background:rgba(255,255,255,.05);
}

/* status badges */
.bd {
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  font-size:.78rem;
  font-weight:500;
  border-radius:99px;
  padding:3px 10px;
  background:color-mix(in srgb,currentColor 12%,transparent);
  border:1px solid color-mix(in srgb,currentColor 30%,transparent);
}

.bd:before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}

.bd.ok {
  color:var(--ok);
}

.bd.wn {
  color:var(--wn);
}

.bd.mu {
  color:var(--mu);
}

.bar {
  height:10px;
  background:rgba(255,255,255,.07);
  border-radius:99px;
  overflow:hidden;
}

.bar i {
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#7c3aed,#c084fc,#60a5fa);
  box-shadow:0 0 16px rgba(167,139,250,.6);
}

/* stage timeline with connectors */
.tl {
  display:flex;
  justify-content:space-between;
  margin:18px 0 0;
  padding:0;
  list-style:none;
  font-size:.82rem;
  color:var(--mu);
  text-align:center;
}

.tl li {
  flex:1;
  position:relative;
}

.tl li:before {
  content:"";
  position:relative;
  z-index:1;
  display:block;
  width:18px;
  height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  background:var(--bg);
  margin:0 auto 6px;
}

.tl li:after {
  content:"";
  position:absolute;
  top:8px;
  left:calc(50% + 9px);
  width:calc(100% - 18px);
  height:2px;
  background:rgba(255,255,255,.1);
}

.tl li:last-child:after {
  display:none;
}

.tl .d {
  color:var(--ok);
}

.tl .d:before {
  border-color:var(--ok);
  background:var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230d0a16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

.tl .d:after {
  background:var(--ok);
}

.tl .c {
  color:#fff;
}

.tl .c:before {
  border-color:var(--ac);
  box-shadow:0 0 0 5px rgba(167,139,250,.18);
}

/* client onboarding steps */
.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin-bottom:16px;
}

.steps span {
  text-align:center;
  font-size:.85rem;
  padding:10px 4px;
  border-radius:12px;
  background:var(--card);
  border:1px solid var(--line);
  color:var(--mu);
}

.steps .on {
  border-color:var(--ac);
  background:rgba(167,139,250,.12);
  color:#fff;
}

.steps .dn {
  border-color:rgba(95,212,166,.35);
  color:var(--ok);
}

.rp {
  background:rgba(0,0,0,.25);
  border-radius:12px;
  padding:10px 14px;
  margin:8px 0;
}

.rp.o {
  border-left:3px solid var(--ac);
}

ul.k {
  list-style:none;
  padding-left:0;
}

ul.k li {
  position:relative;
  padding-left:28px;
  margin:.55rem 0;
}

ul.k li:before {
  content:"";
  position:absolute;
  left:0;
  top:.2em;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(167,139,250,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23c4b5fd' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* project updates feed */
.up {
  position:relative;
  padding:0 0 16px 22px;
  border-left:2px solid var(--line);
  margin-left:6px;
}

.up:last-child {
  padding-bottom:0;
}

.up:before {
  content:"";
  position:absolute;
  left:-7px;
  top:4px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:var(--ac);
  box-shadow:0 0 0 4px rgba(167,139,250,.18);
}

.up p {
  margin:4px 0 0;
}

canvas {
  width:100%;
  height:150px;
  background:#fff;
  border-radius:12px;
  touch-action:none;
  display:block;
}

.qr {
  background:#fff;
  padding:12px;
  border-radius:14px;
  display:inline-block;
  box-shadow:0 0 0 6px rgba(167,139,250,.15);
}

.cr {
  border-color:rgba(167,139,250,.45);
  background:linear-gradient(135deg,rgba(167,139,250,.14),var(--card));
}

.cr code {
  font:600 1.1rem "Space Grotesk";
  color:var(--ac);
}

.demo {
  font-size:.85rem;
  color:var(--mu);
  text-align:center;
  margin-top:10px;
}

/* empty state */
.empty {
  text-align:center;
  padding:44px 22px;
}

.empty p {
  max-width:420px;
  margin:0 auto 20px;
}

.emi {
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  margin:0 auto 16px;
  border-radius:20px;
  color:#c4b5fd;
  background:linear-gradient(135deg,rgba(167,139,250,.22),rgba(192,132,252,.06));
  border:1px solid rgba(167,139,250,.3);
}

.emi svg {
  width:30px;
  height:30px;
}

table {
  width:100%;
  border-collapse:collapse;
}

td,th {
  padding:14px 10px;
  border-bottom:1px solid var(--line);
  text-align:left;
  font-weight:400;
}

tr:last-child td {
  border-bottom:0;
}

th {
  color:var(--mu);
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.ct tr:not(:first-child):hover td {
  background:rgba(255,255,255,.03);
}

/* client name with initial avatar */
.cn {
  display:flex;
  align-items:center;
  gap:12px;
}

.cn small {
  display:block;
}

.avi {
  flex:none;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:12px;
  font:600 1rem "Space Grotesk",system-ui,sans-serif;
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#c084fc);
}

/* mini progress in the clients table */
.mp {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.85rem;
}

.mbar {
  width:70px;
  height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}

.mbar i {
  display:block;
  height:100%;
  background:linear-gradient(90deg,#7c3aed,#c084fc);
}

@media(prefers-reduced-motion:no-preference) {
  .bar i {
    transition:width .4s;
  }
}

@media(prefers-reduced-motion:reduce) {
  .pgh,.st div,.b {
    animation:none;
    transition:none;
  }
}

/* ---- login page ---- */ .lgw {
  position:fixed;
  inset:0;
  z-index:50;
  background:#0d0a16;
  overflow:auto;
  display:flex;
  padding:20px;
  color:#fff;
}

/* animated aurora + grid backdrop */
.lgbg {
  position:fixed;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.lgbg:after {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);
  mask-image:radial-gradient(ellipse at 50% 40%,#000 20%,transparent 75%);
}

.lgbg i {
  position:absolute;
  border-radius:50%;
  filter:blur(90px);
  opacity:.55;
  animation:lgdrift 18s ease-in-out infinite alternate;
}

.lgbg i:nth-child(1) {
  width:520px;
  height:520px;
  background:#7c3aed;
  top:-160px;
  left:-120px;
}

.lgbg i:nth-child(2) {
  width:420px;
  height:420px;
  background:#c026d3;
  bottom:-140px;
  right:-100px;
  opacity:.35;
  animation-duration:22s;
  animation-direction:alternate-reverse;
}

.lgbg i:nth-child(3) {
  width:300px;
  height:300px;
  background:#2563eb;
  top:40%;
  left:45%;
  opacity:.22;
  animation-duration:26s;
}

@keyframes lgdrift {
  to {
    transform:translate(80px,60px) scale(1.15);
  }
}

.lgsplit {
  position:relative;
  margin:auto;
  width:100%;
  max-width:1060px;
  display:grid;
  grid-template-columns:1fr 384px;
  gap:72px;
  align-items:center;
}

.lghero {
  animation:lgin .7s ease both;
}

.lgtag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 12px;
  border:1px solid rgba(167,139,250,.3);
  background:rgba(167,139,250,.08);
  border-radius:999px;
  font-size:.75rem;
  letter-spacing:.04em;
  color:#c4b5fd;
}

.lgtag span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#5fd4a6;
  box-shadow:0 0 0 0 rgba(95,212,166,.6);
  animation:lgping 2s infinite;
}

@keyframes lgping {
  70% {
    box-shadow:0 0 0 8px rgba(95,212,166,0);
  }
  100% {
    box-shadow:0 0 0 0 rgba(95,212,166,0);
  }
}

.lghero h2 {
  font:700 clamp(2rem,3.6vw,2.9rem)/1.12 "Space Grotesk",system-ui,sans-serif;
  letter-spacing:-.02em;
  margin:18px 0 14px;
  color:#fff;
}

.lghero h2 em {
  font-style:normal;
  background:linear-gradient(90deg,#c4b5fd,#f0abfc,#93c5fd);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.lghero > p {
  color:#a1a1b5;
  max-width:440px;
  margin:0 0 28px;
}

.lgmock {
  max-width:420px;
  padding:18px 20px;
  border-radius:18px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
  transform:perspective(900px) rotateY(6deg) rotateX(2deg);
  animation:lgfloat 6s ease-in-out infinite;
}

@keyframes lgfloat {
  50% {
    transform:perspective(900px) rotateY(6deg) rotateX(2deg) translateY(-8px);
  }
}

.lgmh {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.lgmh small {
  display:block;
  font-size:.7rem;
  color:#8b8aa0;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.lgmh b {
  font-weight:600;
  color:#fff;
}

.lgpct {
  font:700 1.3rem "Space Grotesk",system-ui,sans-serif;
  color:#c4b5fd;
}

.lgbar {
  height:6px;
  border-radius:99px;
  background:rgba(255,255,255,.08);
  margin:12px 0 14px;
  overflow:hidden;
}

.lgbar i {
  display:block;
  height:100%;
  width:50%;
  border-radius:inherit;
  background:linear-gradient(90deg,#7c3aed,#c084fc);
  animation:lgfill 1.4s .3s ease both;
}

@keyframes lgfill {
  from {
    width:0;
  }
}

.lgmock ul {
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}

.lgmock li {
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.85rem;
  color:#8b8aa0;
}

.lgmock li span {
  width:16px;
  height:16px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.18);
  flex:none;
}

.lgmock li small {
  margin-left:auto;
  font-size:.72rem;
}

.lgmock li.dn {
  color:#e5e3f0;
}

.lgmock li.dn span {
  border-color:#5fd4a6;
  background:#5fd4a6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%230d0a16' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
}

.lgmock li.dn small {
  color:#5fd4a6;
}

.lgmock li.nw {
  color:#fff;
}

.lgmock li.nw span {
  border-color:#a78bfa;
  box-shadow:0 0 0 4px rgba(167,139,250,.18);
}

.lgmock li.nw small {
  color:#c4b5fd;
}

.lgfeat {
  list-style:none;
  padding:0;
  margin:28px 0 0;
  display:flex;
  gap:28px;
  flex-wrap:wrap;
}

.lgfeat li {
  font-size:.8rem;
  color:#8b8aa0;
}

.lgfeat b {
  display:block;
  font-size:1.05rem;
  color:#fff;
}

@media(max-width:900px) {
  .lgsplit {
    grid-template-columns:1fr;
    max-width:384px;
  }
  .lghero {
    display:none;
  }
}

.lgk2 {
  margin:auto;
  width:100%;
  max-width:384px;
  display:flex;
  flex-direction:column;
  align-items:center;
  animation:lgin .6s ease both;
}

@keyframes lgin {
  from {
    opacity:0;
    transform:translateY(14px);
  }
}

.lgcard {
  position:relative;
  width:100%;
  border-radius:24px;
  background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(18,14,30,.85) 60%);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:0 25px 50px -12px rgba(0,0,0,.7),0 0 80px -20px rgba(124,58,237,.45);
  padding:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* gradient hairline border */
.lgcard:before {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(140deg,rgba(196,181,253,.55),rgba(255,255,255,.06) 40%,rgba(240,171,252,.35));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  pointer-events:none;
}

.lgl {
  width:92px;
  margin-bottom:14px;
}

.lgl img {
  width:100%;
  height:auto;
  display:block;
  filter:drop-shadow(0 6px 14px rgba(167,139,250,.25));
}

.lgcard h1 {
  font:600 1.5rem "Space Grotesk",system-ui,sans-serif;
  margin:0;
  color:#fff;
}

.lgsub {
  color:#9ca3af;
  font-size:.85rem;
  margin:2px 0 22px;
}

.seg {
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  background:rgba(255,255,255,.06);
  border-radius:999px;
  padding:4px;
  margin-bottom:18px;
}

.seg button {
  border:0;
  background:none;
  color:#9ca3af;
  font:500 .85rem "IBM Plex Sans",system-ui,sans-serif;
  padding:9px 8px;
  border-radius:999px;
  cursor:pointer;
  transition:background .25s,color .25s;
}

.seg .on {
  background:rgba(255,255,255,.14);
  color:#fff;
}

.lgfs {
  width:100%;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.lgcap {
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#9ca3af;
  margin:0;
  text-align:left;
}

.lgfs input {
  width:100%;
  padding:12px 20px;
  border-radius:12px;
  border:0;
  background:rgba(255,255,255,.1);
  color:#fff;
  font:.875rem "IBM Plex Sans",system-ui,sans-serif;
}

.lgfs input::placeholder {
  color:#d1d5db;
}

.lgfs input:focus {
  outline:2px solid #9ca3af;
  outline-offset:0;
}

.lge {
  width:100%;
  color:#f87171;
  font-size:.85rem;
  margin:12px 0 0;
  text-align:left;
}

.lge.inf {
  color:#86efac;
}

.lgcard hr {
  width:100%;
  border:0;
  border-top:1px solid rgba(255,255,255,.1);
  margin:16px 0;
}

.lgb,.gb {
  width:100%;
  border:0;
  border-radius:999px;
  padding:12px 20px;
  font:500 .875rem "IBM Plex Sans",system-ui,sans-serif;
  color:#fff;
  cursor:pointer;
  transition:background .2s,filter .2s,transform .2s;
}

.lgb {
  background:rgba(255,255,255,.1);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

.lgb:hover {
  background:rgba(255,255,255,.2);
}

.gb {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:linear-gradient(#232526,#2d2e30);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

.gb:hover {
  filter:brightness(1.15);
}

.lgb:active,.gb:active {
  transform:scale(.98);
}

.lgb:disabled,.gb:disabled {
  opacity:.6;
  cursor:wait;
}

.or {
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  margin:12px 0;
  color:#6b7280;
  font-size:.75rem;
}

.or:before,.or:after {
  content:"";
  flex:1;
  border-top:1px solid rgba(255,255,255,.08);
}

.lgfoot {
  font-size:.75rem;
  color:#9ca3af;
  margin:14px 0 0;
  text-align:center;
}

.lglink {
  background:none;
  border:0;
  padding:0;
  color:rgba(255,255,255,.8);
  font:inherit;
  text-decoration:underline;
  cursor:pointer;
}

.lglink:hover {
  color:#fff;
}

.lgn {
  font-size:.78rem;
  color:#f5c26b;
  margin:12px 0 0;
  text-align:left;
}

.lgteam {
  margin-top:40px;
  text-align:center;
  color:#9ca3af;
  font-size:.85rem;
}

.lgteam b {
  color:#fff;
  font-weight:500;
}

.av {
  display:flex;
  justify-content:center;
  margin-top:8px;
}

.av img {
  width:32px;
  height:32px;
  border-radius:50%;
  border:2px solid #181824;
  object-fit:cover;
  margin-left:-8px;
}

.av img:first-child {
  margin-left:0;
}

@media(prefers-reduced-motion:reduce) {
  .lgk2,.lghero,.lgbg i,.lgmock,.lgbar i,.lgtag span {
    animation:none;
  }
  .lgb,.gb {
    transition:none;
  }
}

header .b {
  white-space:nowrap;
}

.lg div {
  white-space:nowrap;
}

@media(max-width:520px) {
  .who {
    display:none;
  }
}

.who {
  font-size:.8rem;
  color:var(--mu);
  margin-right:6px;
  max-width:34vw;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Mobile: clients table becomes stacked cards */
@media(max-width:560px) {
  .ct, .ct tbody {
    display:block;
  }

  .ct tr:first-child {
    display:none;
  }

  .ct tr {
    display:grid;
    grid-template-columns:auto auto 1fr auto;
    gap:6px 14px;
    align-items:center;
    padding:12px 0;
    border-bottom:1px solid var(--line);
  }

  .ct tr:last-child {
    border-bottom:0;
  }

  .ct td {
    padding:0;
    border:0;
  }

  .ct td:nth-child(1) {
    grid-column:1 / 4;
    grid-row:1;
    overflow-wrap:anywhere;
  }

  .ct td:nth-child(2) {
    grid-column:1 / 4;
    grid-row:2;
  }

  .ct td:nth-child(3) {
    grid-column:1;
    grid-row:3;
  }

  .ct td:nth-child(4) {
    grid-column:2;
    grid-row:3;
  }

  .ct td:nth-child(5) {
    grid-column:4;
    grid-row:1 / 4;
    align-self:center;
  }

  .ct td:nth-child(3)::before {
    content:"Progress: ";
    color:var(--mu);
    font-size:.85rem;
  }

  .ct td:nth-child(4)::before {
    content:"Tickets: ";
    color:var(--mu);
    font-size:.85rem;
  }

  .card {
    padding:14px;
  }
}

/* Mobile: keep the 5 stage labels from colliding */
@media(max-width:560px) {
  .tl {
    font-size:.66rem;
  }

  .tl li {
    min-width:0;
    padding:0 1px;
  }
}

@media(max-width:360px) {
  .tl {
    font-size:.58rem;
  }
}

/* Mobile: compact stat cards in a 2x2 grid */
@media(max-width:560px) {
  .st {
    gap:10px;
  }

  .st div {
    padding:14px;
  }

  .st i {
    width:32px;
    height:32px;
    margin-bottom:10px;
  }

  .st b {
    font-size:1.6rem;
  }

  .steps span {
    font-size:.75rem;
  }
}

@media(max-width:560px) {
  .ct td:nth-child(3) {
    display:flex;
    align-items:center;
    gap:6px;
  }
}

/* danger zone: delete client */
.dz {
  border-color:rgba(248,113,113,.3);
  margin-top:24px;
}

.dz small {
  display:block;
  max-width:520px;
  margin-top:4px;
}

.b.del {
  background:rgba(248,113,113,.12);
  color:#fca5a5;
  border-color:rgba(248,113,113,.45);
  box-shadow:none;
}

.b.del:hover {
  background:rgba(248,113,113,.22);
  filter:none;
}

/* Chrome autofill: keep fields dark instead of white */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill {
  -webkit-text-fill-color:var(--tx);
  caret-color:var(--tx);
  -webkit-box-shadow:0 0 0 1000px #15111f inset;
  transition:background-color 99999s;
}

/* add-client form */
.nf .fs {
  margin:28px 0 2px;
  padding-top:18px;
  border-top:1px solid var(--line);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#c4b5fd;
}

.hint {
  display:block;
  font-size:.78rem;
  margin-top:6px;
}

.g2,.g3 {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 14px;
}

.g3 {
  grid-template-columns:1fr 1fr 1fr;
}

.aos {
  display:grid;
  gap:8px;
}

.ao {
  display:grid;
  grid-template-columns:22px 1fr 130px;
  align-items:center;
  gap:10px;
  margin:0;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(0,0,0,.18);
  font-weight:400;
  color:var(--tx);
}

.ao input[type=checkbox] {
  width:18px;
  height:18px;
  margin:0;
}

.ao input {
  padding:8px 10px;
}

.aoc {
  text-align:center;
  color:var(--mu);
}

.sumc {
  margin-top:24px;
  padding:16px 18px;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(167,139,250,.1),rgba(0,0,0,.15));
  border:1px solid rgba(167,139,250,.3);
}

.sumc h3 {
  margin-bottom:6px;
}

/* price breakdown and payment schedule */
.pbk {
  list-style:none;
  margin:8px 0 12px;
  padding:0;
}

.pbk li {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px dashed var(--line);
  font-size:.92rem;
}

.pbk li:last-child {
  border-bottom:0;
}

.pbk .tot {
  font-weight:600;
  font-family:"Space Grotesk",system-ui,sans-serif;
  color:#fff;
  border-bottom:0;
  border-top:1px solid var(--line);
}

.pbk em {
  font-style:normal;
  font-size:.72rem;
  padding:2px 8px;
  border-radius:99px;
  margin-left:6px;
}

.pbk .pd {
  color:var(--ok);
  background:rgba(95,212,166,.12);
}

.pbk .pr {
  color:var(--wn);
  background:rgba(245,194,107,.12);
}

.pbk .pu {
  color:var(--mu);
  background:rgba(255,255,255,.06);
}

/* client detail info grid */
.info {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px 20px;
  margin:16px 0 0;
  padding-top:14px;
  border-top:1px solid var(--line);
}

.info dt {
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--mu);
}

.info dd {
  margin:2px 0 0;
  overflow-wrap:anywhere;
}

.mpd {
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

/* client dashboard chips */
.chips {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:-8px 0 18px;
}

.chip {
  font-size:.82rem;
  padding:6px 12px;
  border-radius:99px;
  background:rgba(167,139,250,.1);
  border:1px solid rgba(167,139,250,.3);
  color:#d8ccff;
  text-decoration:none;
}

/* client preview inside the add-client form */
.pvc {
  margin-top:20px;
  padding:16px;
  border-radius:16px;
  border:1px dashed rgba(167,139,250,.5);
}

.pvc .card {
  margin:12px 0 0;
}

@media(max-width:560px) {
  .g2,.g3 {
    grid-template-columns:1fr;
  }
  .ao {
    grid-template-columns:22px 1fr 96px;
  }
}

/* dropdowns: custom chevron with breathing room instead of the edge-hugging native arrow */
select {
  -webkit-appearance:none;
  appearance:none;
  padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a3a1ba' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:16px;
  cursor:pointer;
}

select:hover {
  border-color:rgba(167,139,250,.4);
}

/* extra owner stat cards: money */
.st div:nth-child(5) {
  --c:#f472b6;
}

.st div:nth-child(6) {
  --c:#2dd4bf;
}

.st .mo b {
  font-size:1.45rem;
  white-space:nowrap;
}

/* client hero banners: payment due / fully paid / reported */
.hero {
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:24px;
  position:relative;
  overflow:hidden;
}

.hero h2 {
  margin:0 0 6px;
  font-size:1.35rem;
}

.hero p {
  margin:0 0 12px;
  color:#d4d1e6;
}

.hero .hi {
  flex:none;
  display:grid;
  place-items:center;
  width:52px;
  height:52px;
  border-radius:16px;
  font-size:1.5rem;
  font-weight:700;
  color:#fff;
}

.hero.due {
  border-color:rgba(167,139,250,.55);
  background:linear-gradient(135deg,rgba(124,58,237,.28),rgba(192,132,252,.08) 60%,var(--card));
}

.hero.due .hi {
  background:linear-gradient(135deg,#7c3aed,#c084fc);
}

.hero.ok {
  border-color:rgba(95,212,166,.5);
  background:linear-gradient(135deg,rgba(95,212,166,.2),rgba(95,212,166,.04) 60%,var(--card));
}

.hero.ok .hi {
  background:linear-gradient(135deg,#10b981,#5fd4a6);
}

.hero.wn {
  border-color:rgba(245,194,107,.5);
}

.hero.wn .hi {
  background:rgba(245,194,107,.18);
}

.hero .row .b {
  text-decoration:none;
  display:inline-block;
}

/* payment parts list */
.prs {
  list-style:none;
  margin:8px 0 0;
  padding:0;
}

.prs li {
  padding:12px 0;
  border-bottom:1px dashed var(--line);
}

.prs li:last-child {
  border-bottom:0;
}

.prm {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.prm small {
  font-weight:400;
}

.prd {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:6px;
}

.prd small {
  overflow-wrap:anywhere;
}

.prd .b {
  text-decoration:none;
}

.prs .tot {
  border-top:1px solid var(--line);
  border-bottom:0;
  font-family:"Space Grotesk",system-ui,sans-serif;
}

.prs em,.pbk em {
  font-style:normal;
  font-size:.72rem;
  padding:2px 8px;
  border-radius:99px;
  margin-left:6px;
  white-space:nowrap;
}

.prs .pd {
  color:var(--ok);
  background:rgba(95,212,166,.12);
}

.prs .pr {
  color:var(--wn);
  background:rgba(245,194,107,.12);
}

.prs .pu {
  color:var(--mu);
  background:rgba(255,255,255,.06);
}

.prs .po,.pbk .po {
  color:#fff;
  background:linear-gradient(135deg,#7c3aed,#c084fc);
}

/* document downloads */
.dls {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  gap:10px;
}

.dlb {
  display:flex;
  align-items:center;
  gap:12px;
  text-align:left;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--tx);
  font:inherit;
  cursor:pointer;
  transition:border-color .2s,background .2s,transform .2s;
}

.dlb:hover {
  border-color:rgba(167,139,250,.5);
  background:rgba(167,139,250,.08);
  transform:translateY(-1px);
}

.dlb i {
  flex:none;
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:12px;
  color:#c4b5fd;
  background:rgba(167,139,250,.14);
}

.dlb i svg {
  width:20px;
  height:20px;
}

.dlb span {
  min-width:0;
}

.dlb b {
  display:block;
  font-size:.92rem;
}

.dlb small {
  display:block;
  font-size:.78rem;
}

.dlb.ld,.b.ld {
  opacity:.6;
  cursor:wait;
}

@media(max-width:560px) {
  .hero {
    flex-direction:column;
    padding:18px;
  }
}