:root{
	--bg:#f6f8fb;
	--card:#ffffff;
	--accent:#2563eb;
	--accent-600:#1e40af;
	--muted:#6b7280;
	--glass:rgba(255,255,255,0.6);
}

*{box-sizing:border-box;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
body{margin:0;background:linear-gradient(180deg,#f7fbff 0%,var(--bg) 100%);color:#0f172a;-webkit-font-smoothing:antialiased}
.page-header{max-width:920px;margin:18px auto;padding:0 16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:48px;height:48px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-600));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px;box-shadow:0 6px 18px rgba(37,99,235,0.18)}
.logo-img{width:48px;height:48px;border-radius:12px;box-shadow:0 6px 18px rgba(37,99,235,0.18);object-fit:contain}
.brand-text{line-height:1}
.brand-title{font-weight:700;font-size:18px;color:#0b1220}
.brand-sub{font-size:13px;color:var(--muted)}

.container{max-width:720px;margin:20px auto;padding:0 16px}
h1{display:none}
.card{background:var(--card);padding:22px;border-radius:14px;box-shadow:0 10px 30px rgba(11,15,25,0.06);border:1px solid rgba(15,23,42,0.04)}
.meta{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}
.meta .business-name{font-size:18px;font-weight:700;color:#0b1220}
.small{font-size:13px;color:var(--muted)}
.mode-switch{display:flex;gap:12px;margin-bottom:12px}
.field{margin-bottom:14px}
label{display:block;margin-bottom:6px;font-weight:600;color:#0b1220}
input[type=text],input,textarea,select{width:100%;padding:12px;border:1px solid #e6e9ef;border-radius:10px;background:#fbfdff}
textarea{resize:vertical;min-height:120px}
.actions{display:flex;gap:10px;margin-top:6px}
button{background:var(--accent);color:#fff;border:none;padding:10px 16px;border-radius:10px;cursor:pointer;font-weight:600;box-shadow:0 6px 18px rgba(37,99,235,0.12)}
button.secondary{background:#fff;border:1px solid #e6e9ef;color:#0b1220}
.success{background:#ecfdf5;border:1px solid #34d399;padding:10px;border-radius:8px;margin-bottom:12px;color:#065f46}
.error{background:#fff1f2;border:1px solid #fca5a5;padding:10px;border-radius:8px;margin-bottom:12px;color:#7f1d1d}
.info{background:#f0f9ff;border:1px solid #60a5fa;padding:10px;border-radius:8px;margin-bottom:12px;color:#0369a1}
footer{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}
.small.muted{color:var(--muted);margin-top:12px}

/* Responsive tweaks */
@media (max-width:480px){.container{padding:0 14px}.brand-title{font-size:16px}.logo{width:44px;height:44px}}

/* Recording animation */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}