:root {
  --bg: #f7fafc;            /* light background */
  --panel: #ffffff;          /* surfaces */
  --card: #ffffff;
  --text: #0f172a;           /* slate-900 */
  --muted: #475569;          /* slate-600 */
  --brand: #1e90ff;          /* dodger blue */
  --accent: #63b3ff;         /* lighter blue */
  --success: #16a34a;        /* green-600 */
  --danger: #dc2626;         /* red-600 */
  --border: #e2e8f0;         /* light border */
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% -10%, rgba(30,144,255,0.10), transparent 45%),
              radial-gradient(1000px 500px at 90% -20%, rgba(99,179,255,0.10), transparent 45%),
              var(--bg);
}

.container { max-width: 980px; margin: 0 auto; padding: 0 20px; }

.hero {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,1) 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="400"><defs><linearGradient id="g" x1="0" x2="1" y1="0" y2="1"><stop offset="0%" stop-color="%231e90ff"/><stop offset="100%" stop-color="%2363b3ff"/></linearGradient></defs><rect width="1600" height="400" fill="url(%23g)" opacity="0.15"/></svg>');
  background-size: cover;
  padding: 56px 0 40px;
  border-bottom: 1px solid var(--border);
}
.hero-content { display: grid; gap: 8px; }
.brand { display: flex; align-items: baseline; gap: 12px; color: var(--muted); }
.logo { font-weight: 700; letter-spacing: 0.5px; color: var(--brand); }
.tag { font-size: 0.9rem; color: var(--muted); }
.hero h1 { margin: 8px 0 0; font-size: 2rem; }
.hero p { margin: 4px 0 0; color: var(--muted); }

.fancy-card {
  background: linear-gradient(180deg, rgba(99,179,255,0.05), rgba(30,144,255,0.05)) padding-box,
              linear-gradient(180deg, rgba(30,144,255,0.25), rgba(99,179,255,0.20)) border-box;
  border: 1px solid transparent;
  border-radius: 14px;
}
.card-body { padding: 18px; }
/* Card headers appear as bold title bars */
.card-header {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}

label { display: grid; gap: 6px; }
label span { font-size: 0.9rem; color: var(--muted); }

input, textarea, .form-control {
  width: 100%;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
input::placeholder, textarea::placeholder { color: #6b7280; }
input:focus, textarea:focus, .form-control:focus {
  border-color: rgba(30,144,255,0.6);
  box-shadow: 0 0 0 3px rgba(30,144,255,0.15);
}

.actions { display: flex; align-items: center; gap: 12px; padding: 6px 2px 30px; }
.actions.d-grid { display: grid; }
.btn {
  appearance: none;
  border: 0;
  border-radius: 12px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary {
  background: linear-gradient(90deg, var(--accent), var(--brand));
  border: none;
  color: #ffffff;
}
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.status { color: var(--muted); min-height: 1.2em; }

.footer { border-top: 1px solid var(--border); padding: 18px 0 40px; color: var(--muted); }

@media (max-width: 720px) {
  .grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: span 1; }
}