:root{
  --bg:#f9fafc;         /* page background */
  --panel:#ffffff;      /* panels and forms */
  --card:#ffffff;       /* tiles/cards */
  --stroke:#d0d7e2;     /* light grey border */
  --text:#1a1a1a;       /* main text */
  --muted:#5a6473;      /* muted/subtext */
  --accent:#2563eb;     /* brand accent blue */
  --radius:16px;
  --shadow:0 4px 12px rgba(0,0,0,.08);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.page{
  background: linear-gradient(180deg,#f0f2f7, #ffffff 60%, #f0f2f7);
  color: var(--text);
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  line-height:1.45;
}

.wrap{max-width:1100px;margin:0 auto;padding:0 1rem}

.topbar{
  position:sticky;top:0;
  backdrop-filter:saturate(120%) blur(8px);
  background:rgba(255,255,255,.85);
  border-bottom:1px solid var(--stroke);
  z-index:10
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between; padding:.8rem 1rem;}
.brand{display:flex;gap:.8rem;align-items:center}
.logo{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:linear-gradient(135deg,var(--accent),#5b8ef6); color:#fff; font-weight:800}
.brand-text h1{font-size:1.05rem;margin:.1rem 0}
.sub{margin:0;color:var(--muted);font-size:.85rem}
.nav{display:flex;gap:.6rem;flex-wrap:wrap}
.nav-link{color:var(--text);text-decoration:none;padding:.45rem .7rem;border-radius:10px;border:1px solid transparent}
.nav-link:hover{border-color:var(--stroke);background:#f2f4f8}
.nav-link.active{border-color:var(--stroke);background:#e9edf7}

.tile-row{display:grid;grid-template-columns: 1fr 1fr 1fr; gap:1rem; margin:1.2rem 0 1.2rem}
@media (max-width: 900px){ .tile-row{grid-template-columns: 1fr 1fr} }
@media (max-width: 640px){ .tile-row{grid-template-columns: 1fr} }

.tile{
  display:flex;gap:.9rem;
  padding:1rem; border-radius:var(--radius);
  background:var(--card); border:1px solid var(--stroke);
  box-shadow:var(--shadow); color:inherit; text-decoration:none
}
.tile:hover{outline:2px solid rgba(37,99,235,.2)}
.tile-icon{font-size:1.4rem}

.panel{
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden
}
.panel-header{padding:1rem 1.2rem;border-bottom:1px solid var(--stroke)}
.panel-header h2{margin:.2rem 0 0}
.muted{color:var(--muted)}

.form-grid{padding:1rem; display:grid; gap:1rem}
.form-grid.single{grid-template-columns: repeat(auto-fit,minmax(240px,1fr))}
@media (min-width: 760px){
  .form-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width: 1020px){
  .form-grid{grid-template-columns:repeat(3,1fr)}
}

.field{
  display:flex;flex-direction:column; gap:.35rem;
  background:#fdfdfd; border:1px solid var(--stroke);
  border-radius:12px; padding:.8rem
}
.label{font-size:.9rem; color:#333}
.input{
  width:100%; padding:.6rem .65rem;
  border:1px solid #c8d1e2; border-radius:10px;
  background:#fff; color:var(--text);
  outline:none; transition:border .15s, box-shadow .15s;
}
.input::placeholder{color:#94a3b8}
.input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(37,99,235,.2)}
.hint{color:#777; font-size:.8rem}

.actions{grid-column:1 / -1; display:flex; gap:.8rem; align-items:center; padding:.4rem 0 1rem}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  padding:.7rem 1rem; border-radius:12px; border:1px solid var(--stroke);
  background:#f9fafc; color:var(--text);
  cursor:pointer; text-decoration:none
}
.btn:hover{border-color:#b3bfd3; background:#f0f4fb}
.btn.primary{
  background:linear-gradient(135deg,var(--accent),#5b8ef6); color:#fff;
  border-color:transparent; font-weight:700
}
.btn.primary:hover{filter:brightness(1.05)}
.btn.ghost{background:transparent}
.btn.small{font-size:.85rem; padding:.4rem .7rem}

.flash{
  background:#fff8e1; color:#332b00;
  border:1px solid #f0d58b;
  padding:.7rem; border-radius:10px; margin:1rem
}
.card{
  border:1px solid var(--stroke); border-radius:12px;
  padding:1rem; background:#fff; margin:1rem
}
.big{font-size:2.6rem; font-weight:800}

.footer{border-top:1px solid var(--stroke); margin-top:2rem}
.footer .wrap{padding:1rem}
code{
  background:#f3f4f8; border:1px solid #e0e4ed;
  padding:.15rem .4rem; border-radius:6px; color:#2563eb
}