:root{
  /* Vibrant Base44-ish palette */
  --brand1:#7c3aed; /* violet */
  --brand2:#22c55e; /* green  */
  --brand3:#06b6d4; /* cyan   */
  --brand4:#f59e0b; /* amber  */

  --bg:#0b1020;      /* fallback */
  --text:#0b1220;    /* dark text on light surfaces */
  --text-on-dark:#f8fafc;

  --panel:#ffffff;
  --border:#e5e7eb;
  --muted:#64748b;

  --shadow-sm:0 6px 16px rgba(15,23,42,.06);
  --shadow-md:0 10px 30px rgba(15,23,42,.12);
}

/* ===== Base layout ===== */
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{
  font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  /* Colorful gradient background */
  background:
    radial-gradient(1200px 600px at 85% -20%, rgba(124,58,237,.25), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgba(34,197,94,.22), transparent 55%),
    radial-gradient(900px 500px at 40% 120%, rgba(6,182,212,.20), transparent 55%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  min-height:100dvh;
}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:24px}

/* ===== Nav (glass, colorful underline on hover) ===== */
.nav{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 24px;position:sticky;top:0;z-index:10;
  backdrop-filter:blur(10px);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.70));
  border-bottom:1px solid rgba(255,255,255,.6);
  box-shadow:var(--shadow-sm);
}
.logo{display:flex;gap:10px;align-items:center;font-weight:800;letter-spacing:.2px}
.logo-badge{
  width:28px;height:28px;border-radius:8px;
  background:conic-gradient(from 120deg,var(--brand1),var(--brand3),var(--brand2),var(--brand4),var(--brand1));
  box-shadow:0 0 0 2px rgba(255,255,255,.8) inset;
}
.nav a.btn{margin-left:10px;position:relative}
.nav a.btn::after{
  content:"";position:absolute;left:10px;right:10px;bottom:6px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand1),var(--brand3),var(--brand2));
  transform:scaleX(0);transform-origin:right;transition:transform .25s ease;
}
.nav a.btn:hover::after{transform:scaleX(1);transform-origin:left}

/* ===== Buttons (solid & outline gradient) ===== */
.btn{
  display:inline-block;padding:10px 16px;border-radius:12px;
  border:1px solid var(--border);background:#fff;box-shadow:var(--shadow-sm);
}
.btn.primary{
  border:none;color:#fff;font-weight:700;
  background:linear-gradient(135deg,var(--brand1),var(--brand3),var(--brand2));
  box-shadow:0 8px 24px rgba(124,58,237,.25), 0 2px 6px rgba(6,182,212,.2);
}
.btn.primary:hover{filter:saturate(1.05) brightness(1.02)}
.btn.ghost{
  border:1px solid transparent;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--brand1),var(--brand3),var(--brand2)) border-box;
}

/* ===== Hero (colorful headline & blob) ===== */
.hero{
  position:relative;overflow:hidden;
  padding:72px 24px;background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.9));
  border:1px solid rgba(255,255,255,.75);border-left:0;border-right:0;
}
.hero:before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:420px;z-index:0;
  background:radial-gradient(closest-side at 30% 60%, rgba(124,58,237,.25), transparent 70%),
             radial-gradient(closest-side at 75% 40%, rgba(6,182,212,.22), transparent 70%),
             radial-gradient(closest-side at 50% 20%, rgba(34,197,94,.22), transparent 70%);
  filter:blur(30px);
}
.hero h1{
  position:relative;z-index:1;margin:0 0 12px;font-size:42px;line-height:1.1;
  background:linear-gradient(90deg,var(--brand1),var(--brand3),var(--brand2));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.hero p{position:relative;z-index:1;color:var(--muted);font-size:18px;margin:0 0 24px}

/* ===== Cards (glass + gradient borders) ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.card{
  position:relative;padding:18px;border-radius:16px;background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.7);box-shadow:var(--shadow-sm);
}
.card:before{
  content:"";position:absolute;inset:-1px;border-radius:16px;
  background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(6,182,212,.25),rgba(34,197,94,.25));
  z-index:-1;filter:blur(0.5px);
}
.card h3{margin:0 0 6px}
.small{font-size:12px;color:var(--muted)}
.footer{opacity:.75;text-align:center;padding:40px 0}

/* ===== Base44-like floating label forms ===== */
.form{
  max-width:520px;margin:28px 0;background:rgba(255,255,255,.96);
  padding:24px;border-radius:16px;border:1px solid rgba(255,255,255,.7);
  box-shadow:var(--shadow-md);
}
.form .field{position:relative;margin:16px 0}
.form .field input,
.form .field textarea{
  width:100%;padding:18px 14px;border-radius:12px;background:#fff;color:var(--text);
  border:1px solid var(--border);outline:none;transition:border-color .15s, box-shadow .15s, background-color .15s;
}
.form .field textarea{min-height:110px;resize:vertical}
.form .field input::placeholder,
.form .field textarea::placeholder{color:transparent}
.form .field label{
  position:absolute;left:12px;top:16px;padding:0 6px;background:#fff;color:var(--muted);
  pointer-events:none;transition:transform .15s, color .15s, top .15s, background-color .15s;
}
.form .field input:focus,
.form .field textarea:focus{
  border-color:transparent;
  box-shadow:
    0 0 0 1px rgba(255,255,255,1) inset,
    0 0 0 2px rgba(255,255,255,1),
    0 0 0 4px rgba(124,58,237,.20),
    0 0 0 8px rgba(6,182,212,.12);
}
.form .field input:focus + label,
.form .field textarea:focus + label,
.form .field input:not(:placeholder-shown) + label,
.form .field textarea:not(:placeholder-shown) + label{
  color:var(--brand1);
  transform:translateY(-20px) scale(0.92);
}
.form .row{display:flex;gap:12px}
.form .row .field{flex:1}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.note{margin-top:8px;color:var(--muted);font-size:14px}

/* ===== KPIs / table (clean & bright) ===== */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-top:12px}
.kpi{
  background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.7);
  border-radius:16px;padding:18px;box-shadow:var(--shadow-sm);
}
.kpi .val{
  display:inline-block;margin-top:8px;padding:6px 10px;border-radius:999px;
  background:linear-gradient(90deg,#f8fafc,#ffffff);
  border:1px solid var(--border)
}
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table td,.table th{padding:10px 12px;background:#fff;border:1px solid var(--border)}
.table th{background:#f1f5f9}
.row td:first-child,.row th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}
.row td:last-child,.row th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}

/* ===== Badges ===== */
.badge{
  display:inline-block;
  background:linear-gradient(135deg,rgba(124,58,237,.1),rgba(6,182,212,.1));
  border:1px solid rgba(124,58,237,.25);
  padding:6px 10px;border-radius:999px;font-size:12px
}