:root{
  --blue:#1f6feb; 
  --orange:#ff7a1a; 
  --text:#111; 
  --muted:#6b7280; 
  --border:#e5e7eb;
  --glass-bg:rgba(255,255,255,0.45);
  --glass-brd:rgba(255,255,255,0.55);
  --control-h:44px;               /* consistent input/select height */
  --radius:12px;
  --grad-a:#f3c6ff; /* soft pink/lilac */
  --grad-b:#d6e1ff; /* powder blue */
  --grad-c:#e8f3ff; /* pale sky */
  --grad-d:#fff0d8; /* warm cream */
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}



body{
  margin:0;
  color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    linear-gradient(135deg,
      var(--grad-a) 0%,
      var(--grad-b) 30%,
      var(--grad-c) 65%,
      var(--grad-d) 100%
    ) fixed no-repeat;
  background-size: cover;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:16px}

/* Header & footer (slight glass) */
.site-header{
  position:sticky;top:0;z-index:10;
  border-bottom:1px solid var(--glass-brd);
  background:var(--glass-bg);
  backdrop-filter:saturate(120%) blur(10px);
}
.site-header .brand a{font-weight:700;color:var(--text)}
.site-header nav a{margin:0 8px}

.site-footer{
  border-top:1px solid var(--glass-brd);
  padding:16px;color:var(--muted);font-size:14px;margin-top:32px;
  background:var(--glass-bg);
  backdrop-filter:saturate(120%) blur(8px);
}

/* Links, buttons */
.inline{display:inline}
.link{background:none;border:none;padding:0;color:var(--blue);cursor:pointer}
.link.danger{color:#b91c1c}
.btn{
  display:inline-block;background:#f3f4f6;border:1px solid var(--border);
  padding:8px 12px;border-radius:10px
}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn.danger{background:#ef4444;color:#fff;border-color:#ef4444}
.btn.small{padding:4px 8px;font-size:12px}

/* Panels -> glass */
.card{
  background:var(--glass-bg);
  border:1px solid var(--glass-brd);
  border-radius:var(--radius);
  padding:16px;margin:12px 0;
  box-shadow:0 8px 28px rgba(17,24,39,.12), inset 0 1px 0 rgba(255,255,255,.6);
  backdrop-filter:saturate(160%) blur(14px);
}

/* Tables (work well on glass) */
.table{width:100%;border-collapse:collapse;margin-top:12px}
.table th,.table td{border-bottom:1px solid rgba(0,0,0,.06);padding:8px;text-align:left}
.table th{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}

/* FORM CONTROLS — same size, same typeface */
input[type=text], input[type=email], input[type=password],
input[type=datetime-local], input[type=number],
textarea, select,
.filters input, .filters select{
  width:100%;
  min-height:var(--control-h);
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  margin:6px 0;
  background:rgba(255,255,255,0.85);
  color:var(--text);
  font:inherit;                      /* match site font */
  -webkit-appearance:none; appearance:none;
  transition:box-shadow .15s ease, border-color .15s ease, background .15s;
}
textarea{min-height:110px; line-height:1.4; resize:vertical}

input::placeholder, textarea::placeholder{color:var(--muted)}
input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(31,111,235,.18);
  background:#fff;
}

/* Uniform select with chevron */
select{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='black' stroke-opacity='.6' stroke-width='1.6'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 12px center;
  padding-right:40px;
}

/* Labels, legends */
label{display:block;font-weight:600;margin-top:8px}
legend{font-weight:700}
.muted{color:var(--muted)}

/* Alerts */
.alert{padding:10px;border-radius:8px;margin:12px 0;border:1px solid}
.alert.success{color:#065f46;border-color:#34d399;background:rgba(236,253,245,.9)}
.alert.error{color:#991b1b;border-color:#fca5a5;background:rgba(254,242,242,.92)}

/* Pagination */
.pagination a{display:inline-block;margin:2px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:rgba(255,255,255,.85)}
.pagination a.active{background:var(--orange);color:#fff;border-color:var(--orange)}

/* Layout helpers */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.gallery{display:flex;flex-wrap:wrap;gap:8px}
.thumb img{height:120px;display:block;border:1px solid var(--border);border-radius:8px}


/*=========================================================================================*/


/* ---------- Settings page helpers (additive) ---------- */

/* Make the settings form a true 2-column grid on desktop */
.settings .grid{ display:grid; gap:16px; grid-template-columns:repeat(12,1fr); }
.settings .col-6{ grid-column:span 6; }
@media (max-width: 900px){
  .settings .col-6{ grid-column:1 / -1; }
}

/* Small, consistent helper text under inputs */
.help{ display:block; margin-top:4px; font-size:13px; color:var(--muted); }

/* A touch more gloss for cards used on forms (optional class) */
.card.glass{
  background: rgba(255,255,255,0.58);
  border-color: rgba(255,255,255,0.62);
  box-shadow:
    0 18px 40px rgba(17,24,39,.14),
    0 2px 8px rgba(17,24,39,.08),
    inset 0 1px 0 rgba(255,255,255,.7);
  backdrop-filter: saturate(170%) blur(16px);
}

/* Horizontal action rows (buttons + inputs) */
.stack{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }

/* Nicer inline code samples */
code{ background:rgba(0,0,0,.06); padding:0 6px; border-radius:6px; }