/* DhobiGo skin: fresh and playful (laundry). Soap-bubble header, extra-round soft cards,
   floating bar whose active icon sits in a bubble, Nunito. Layered after theme.css. */
:root { --bg: #f1f5ff; --radius: 24px; font-family: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

/* header: deeper curve, soap bubbles (rings + glossy dots) */
.topbar { border-radius: 0 0 40px 40px;
  background: radial-gradient(circle at 82% 30%, rgba(255,255,255,.22) 0 7px, transparent 8px),
              radial-gradient(circle at 70% 70%, rgba(255,255,255,.16) 0 4px, transparent 5px),
              radial-gradient(circle at 18% 78%, rgba(255,255,255,.18) 0 5px, transparent 6px),
              radial-gradient(circle at 92% 82%, rgba(255,255,255,.14) 0 10px, transparent 11px),
              linear-gradient(135deg, var(--g1), var(--g2)); }
.topbar::before { width: 150px; height: 150px; right: -30px; top: -50px; background: transparent; border: 3px solid rgba(255,255,255,.18); }
.topbar::after { width: 90px; height: 90px; left: 30%; bottom: -40px; background: transparent; border: 3px solid rgba(255,255,255,.14); }
.topbar h1 { font-weight: 900; font-size: 28px; }
.tb-hi, .tb-sub { font-weight: 600; }
.tb-av, .topbar .back, .topbar .bell { border-radius: 50%; }

/* extra-round, soft blue-tinted cards */
.card, .stat, .pcard, .list a, .list .li, .irow { box-shadow: 0 8px 24px -6px rgba(37, 99, 235, .14); }
.irow { border-radius: 18px; }
.pcard .nm { font-weight: 800; }
.otp { font-family: "Nunito", ui-monospace, monospace; font-weight: 900; }

/* pill buttons and soft chips */
.btn { border-radius: 999px; }
.btn.sm { border-radius: 999px; }
.chip { background: #e6edff; box-shadow: none; color: #1e3a8a; }
.chip.on { box-shadow: 0 6px 14px -6px var(--g1); }
label.f input, label.f select, label.f textarea { border-radius: 16px; }
.step, .addbtn { border-radius: 999px; }
.seg, .tabs2 { border-radius: 999px; }
.seg button, .tabs2 button { border-radius: 999px; }

/* floating bar: active icon sits in a gradient bubble */
.nav { border-radius: 999px; left: 14px; right: 14px; }
.nav a.on::after { display: none; }
.nav a .ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 19px; }
.nav a.on .ic { background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 6px 14px -4px var(--g1); transform: translateY(-6px); }
.nav a.on { color: var(--g1); }
.actionbar, .composer, .summary-bar { border-radius: 999px; padding: 8px 8px 8px 20px; }

/* login */
.auth .hero .mark { border-radius: 50%; }
.auth .demo-logins .btn { border-radius: 22px; background: linear-gradient(135deg, #0ea5e9, #2563eb); }
.auth .demo-logins .btn:nth-child(4n+2) { background: linear-gradient(135deg, #8b5cf6, #c026d3); }
.auth .demo-logins .btn:nth-child(4n+3) { background: linear-gradient(135deg, #06b6d4, #0d9488); }
.auth .demo-logins .btn:nth-child(4n+4) { background: linear-gradient(135deg, #ec4899, #8b5cf6); }