:root {
  color-scheme: light;
  --cloud-bg: #f9fafb;
  --cloud-panel: #ffffff;
  --cloud-text: #1f2937;
  --cloud-muted: #6b7280;
  --cloud-border: #d1d5db;
  --cloud-input: #ffffff;
  --cloud-accent: #2563eb;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --cloud-bg: #0f172a;
  --cloud-panel: #1e293b;
  --cloud-text: #e5e7eb;
  --cloud-muted: #94a3b8;
  --cloud-border: #475569;
  --cloud-input: #0f172a;
  --cloud-accent: #60a5fa;
}

body { background: var(--cloud-bg) !important; color: var(--cloud-text); }
body.cloud-locked > .container { visibility: hidden; }

.cloud-auth {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  padding: 1rem; background: var(--cloud-bg);
}
.cloud-auth[hidden] { display: none; }
.cloud-auth-card {
  width: min(100%, 28rem); padding: 2rem; border: 1px solid var(--cloud-border);
  border-radius: 1rem; background: var(--cloud-panel); box-shadow: 0 20px 45px rgb(15 23 42 / .18);
}
.cloud-auth-card h1 { margin: 0 0 .35rem; font-size: 1.75rem; font-weight: 750; }
.cloud-auth-card p { margin: 0 0 1.25rem; color: var(--cloud-muted); }
.cloud-auth-card label { display: block; margin: .9rem 0 .3rem; font-weight: 650; }
.cloud-auth-card input {
  width: 100%; padding: .7rem .8rem; color: var(--cloud-text); background: var(--cloud-input);
  border: 1px solid var(--cloud-border); border-radius: .55rem;
}
.cloud-auth-card button {
  width: 100%; margin-top: 1.2rem; padding: .75rem; border-radius: .55rem;
  background: #2563eb; color: white; font-weight: 700;
}
.cloud-auth-card button:disabled { opacity: .6; }
.cloud-auth-error { min-height: 1.25rem; margin-top: .75rem !important; color: #dc2626 !important; }

.cloud-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .55rem; margin-top: .8rem; }
.cloud-pill, .cloud-control {
  display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .7rem;
  border: 1px solid var(--cloud-border); border-radius: 999px; background: var(--cloud-panel);
  color: var(--cloud-text); font-size: .82rem; font-weight: 650;
}
.cloud-control:hover { background: color-mix(in srgb, var(--cloud-panel), var(--cloud-accent) 10%); }
.cloud-dot { width: .55rem; height: .55rem; border-radius: 50%; background: #16a34a; }
[data-sync="saving"] .cloud-dot { background: #f59e0b; animation: cloudPulse 1s infinite; }
[data-sync="offline"] .cloud-dot { background: #64748b; }
[data-sync="failed"] .cloud-dot { background: #dc2626; }
@keyframes cloudPulse { 50% { opacity: .35; } }

.cloud-toast {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 11000; max-width: 24rem;
  padding: .8rem 1rem; border-radius: .65rem; color: white; background: #334155;
  box-shadow: 0 8px 24px rgb(0 0 0 / .25);
}
.cloud-toast.error { background: #991b1b; }
.cloud-toast.warning { background: #92400e; }

.deepsite-credit { text-align: center; margin: 1rem; color: var(--cloud-muted); font-size: .75rem; }
.deepsite-credit a { color: var(--cloud-accent); text-decoration: underline; }

html[data-theme="dark"] .bg-white { background-color: var(--cloud-panel) !important; }
html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100 { background-color: var(--cloud-bg) !important; }
html[data-theme="dark"] .text-black, html[data-theme="dark"] .text-gray-900,
html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700,
html[data-theme="dark"] .text-gray-600 { color: var(--cloud-text) !important; }
html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400 { color: var(--cloud-muted) !important; }
html[data-theme="dark"] .border-gray-200, html[data-theme="dark"] .border-gray-300 { border-color: var(--cloud-border) !important; }
html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select {
  background-color: var(--cloud-input) !important; color: var(--cloud-text) !important; border-color: var(--cloud-border) !important;
}
html[data-theme="dark"] table thead { background: #0f172a !important; }
html[data-theme="dark"] table tbody, html[data-theme="dark"] table td,
html[data-theme="dark"] table th, html[data-theme="dark"] label,
html[data-theme="dark"] h1, html[data-theme="dark"] h2,
html[data-theme="dark"] h3, html[data-theme="dark"] h4 { color: var(--cloud-text) !important; }
html[data-theme="dark"] table tbody tr:hover { background: #273449 !important; }
html[data-theme="dark"] .calendar-day.has-birthday { background-color: #172554 !important; }
html[data-theme="dark"] .modal-overlay { background-color: rgb(0 0 0 / .72); }

@media (max-width: 640px) {
  .cloud-auth-card { padding: 1.25rem; }
  .cloud-controls { justify-content: flex-start; }
}