/* ====== Reset/Vars ====== */
:root{
  --bg1:#0f172a; /* slate-900 */
  --bg2:#1e293b; /* slate-800 */
  --acc1:#22d3ee; /* cyan-400 */
  --acc2:#a78bfa; /* violet-400 */
  --txt:#e5e7eb;  /* gray-200 */
  --muted:#94a3b8; /* slate-400 */
  --card:#0b1220cc; /* translucent */
  --card-border:#233047;
  --shadow: 0 10px 25px rgba(0,0,0,.35);
  --radius: 16px;
}

/* ====== Base ====== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--txt);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
}

/* Gradient background */
.gradient-bg{
  background:
    radial-gradient(1200px 600px at 10% -20%, rgba(34,211,238,.15), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, rgba(167,139,250,.18), transparent 55%),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* Center wrapper for auth */
.center-wrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding:24px;
}

/* Auth card */
.auth-card{
  width:100%;
  max-width:420px;
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:28px;
  backdrop-filter: blur(12px);
}
.portal-title{
  margin:0 0 4px;
  font-size: clamp(22px, 2.6vw, 28px);
}
.muted{color:var(--muted); margin:4px 0 16px}

/* Form */
.label{display:block; font-size:14px; color:var(--muted); margin-bottom:6px}
.input{
  width:100%; padding:12px 14px; border-radius:12px;
  border:1px solid #2a3952; background:#0b1220; color:var(--txt);
  outline:none;
}
.input:focus{border-color:#415a86; box-shadow:0 0 0 3px rgba(65,90,134,.25)}
.btn{
  width:100%; margin-top:14px; padding:12px 14px; border:0; border-radius:12px;
  background: linear-gradient(135deg,var(--acc1),var(--acc2));
  color:#0b1220; font-weight:700; cursor:pointer;
}
.btn:active{transform:translateY(1px)}

/* Topbar */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; position:sticky; top:0; z-index:5;
  background: linear-gradient(180deg, rgba(15,23,42,.9), rgba(30,41,59,.6));
  backdrop-filter: blur(8px);
  border-bottom:1px solid #22314c;
}
.brand{font-weight:700}
.topnav .toplink{color:var(--txt); text-decoration:none; border:1px solid #2a3952; padding:8px 12px; border-radius:10px}
.topnav .toplink:hover{background:#0b1220}

/* Container */
.container{max-width:1200px; margin:0 auto; padding:24px}
.page-title{margin:6px 0 8px; font-size: clamp(20px, 3vw, 28px)}

/* Cards grid */
.cards-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}
@media (max-width: 1100px){ .cards-grid{grid-template-columns: repeat(3,1fr);} }
@media (max-width: 800px){ .cards-grid{grid-template-columns: repeat(2,1fr);} }
@media (max-width: 520px){ .cards-grid{grid-template-columns: 1fr;} }

/* Card (Trello-ish) */
.card{
  display:block;
  background:linear-gradient(180deg, rgba(12,19,34,.8), rgba(10,16,30,.9));
  border:1px solid var(--card-border);
  border-radius:14px;
  padding:18px 16px;
  text-decoration:none;
  color:var(--txt);
  box-shadow: var(--shadow);
  position:relative;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.card:hover{ transform: translateY(-2px); border-color:#3a5280; box-shadow:0 14px 30px rgba(0,0,0,.45) }
.card-badge{
  position:absolute; top:10px; right:12px;
  font-size:12px; color:#9fb3d1; background:#0b1220; border:1px solid #2a3952;
  padding:4px 8px; border-radius:999px;
}
.card-title{ margin:0 0 8px; font-size: clamp(16px, 2.4vw, 20px); font-weight:700 }
.card-desc{ margin:0; color:var(--muted); font-size:14px }