:root{
  --bg: #e9f6ff;
  --bg-accent: #e8fff2;
  --brand: #0ea5e9;
  --brand-2: #10b981;
  --text: #0f172a;
  --muted: #475569;
  --white: #ffffff;
  --glass: rgba(255,255,255,0.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size:16px; line-height:1.6; color:var(--text);
  background:linear-gradient(120deg,var(--bg),var(--bg-accent));
}
/* NAVBAR */
.navbar{
  position:fixed; top:0; left:0; right:0; height:64px; z-index:1000;
  display:flex; justify-content:space-between; align-items:center;
  padding:0 16px;
  background:linear-gradient(90deg,rgba(14,165,233,.75),rgba(16,185,129,.75));
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
  color:#fff; border-bottom:1px solid rgba(255,255,255,.35);
}
.site-name{font-weight:700; font-size:18px}
.nav-right{display:flex; align-items:center; gap:12px}
.user-name{opacity:.95}
.btn-logout{
  text-decoration:none; background:var(--white); color:#0b3d2e; font-weight:600;
  padding:8px 12px; border-radius:12px; border:1px solid rgba(0,0,0,.05);
}
.btn-logout:hover{filter:brightness(.97)}
/* CONTENT/OFFSETS & FOOTER */
.content{padding-top:80px; padding-bottom:72px; min-height:calc(100vh - 152px)}
.footer{
  position:fixed; bottom:0; left:0; right:0; height:56px; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.8); backdrop-filter:blur(8px);
  border-top:1px solid rgba(0,0,0,.06); font-size:14px; color:#063e2e;
}
/* LAYOUT */
.container{max-width:1100px; margin:auto; padding:16px}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; margin-top:16px}
/* GLASS CARDS */
.glass-card{
  position:relative; background:var(--glass);
  backdrop-filter:blur(12px) saturate(135%);
  -webkit-backdrop-filter:blur(12px) saturate(135%);
  border-radius:20px; padding:20px;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  border:2px solid rgba(255,255,255,0.9);
}
.glass-card:before{
  content:""; position:absolute; top:-3px; left:-3px; right:-3px; bottom:-3px;
  border-radius:22px;
  background:linear-gradient(135deg, rgba(255,255,255,0.9), rgba(255,255,255,0.15), rgba(255,255,255,0.85));
  z-index:-1; filter:blur(8px); opacity:.7;
}
.glass-card.small{padding:16px}
h1{margin:0 0 10px 0; font-size:24px; color:#043a5e}
h2{margin:0 0 8px 0; font-size:18px; color:#064e3b}
/* Buttons */
a.btn, button.btn{
  display:inline-block; text-decoration:none; background:#0ea5e9; color:#fff;
  padding:10px 14px; border-radius:10px; font-weight:600; border:none;
}
a.btn:hover, button.btn:hover{filter:brightness(.97)}
label{display:block; margin-top:8px; font-weight:600}
input[type="text"], input[type="password"]{
  width:100%; padding:10px; border-radius:10px; border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.85);
}

/* v6: Compact full-width buttons on cards */
a.btn, button.btn{
  display:inline-block;
  text-decoration:none;
  background:#0ea5e9;
  color:#fff;
  width:100%;          /* full width */
  padding:6px 10px;    /* reduced height */
  border-radius:8px;
  font-weight:600;
  border:none;
  text-align:center;
  font-size:14px;      /* slightly smaller text */
}
a.btn:hover, button.btn:hover{ filter:brightness(.97); }


/* v7: colored borders per card + colored buttons */
.glass-card.card-orange { border: 1px solid #f97316; } /* orange */
.glass-card.card-green  { border: 1px solid #10b981; } /* green */
.glass-card.card-red    { border: 1px solid #ef4444; } /* red */

a.btn.btn-orange { background:#f97316; }
a.btn.btn-green  { background:#10b981; }
a.btn.btn-red    { background:#ef4444; }


/* v8: add blue card border matching default blue button */
.glass-card.card-blue { border: 1px solid #0ea5e9; } /* blue */


/* v9: icon sizing for lucide */
h2 i[data-lucide]{width:18px;height:18px;display:inline-block;vertical-align:middle;margin-right:6px}
a.btn i[data-lucide]{width:16px;height:16px;display:inline-block;vertical-align:middle;margin-right:6px}


/* v12: fieldset styles for user blocks */
fieldset.fs-user{
  border:2px solid #0ea5e9; /* default blue */
  border-radius:12px;
  padding:12px;
  background:rgba(255,255,255,0.6);
}
fieldset.fs-user legend{
  padding:0 6px;
  color:#065f46; /* green legend for contrast */
  font-weight:600;
}
/* Optional variants: switch border color by adding one of these classes */
fieldset.fieldset-blue{ border-color:#0ea5e9; }
fieldset.fieldset-green{ border-color:#10b981; }

.mt-12{ margin-top:12px; }


/* v13: subtle hint text for labels */
label span.hint{
  font-weight:300;
  color:#6b7280; /* gray-500 */
  font-size:0.9em;
}

/* v13: inline/narrow button (override global full-width) */
a.btn.btn-inline, button.btn.btn-inline{
  width:auto;
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
}


/* v16: make dropdowns full width */
select{
  width:100%;
  padding:8px;
  border-radius:6px;
  border:1px solid #d1d5db;
  font-size:0.95em;
}