:root{
  --bg:#0b0f19;
  --card:#121a2b;
  --muted:#93a4c7;
  --text:#eaf0ff;
  --border:#22304d;
  --primary:#6ea8fe;
  --danger:#ff6b6b;
  --success:#51cf66;
  --shadow: 0 8px 30px rgba(0,0,0,.35);
  --radius: 16px;
  --max: 1320px;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}
*{box-sizing:border-box}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 10% 10%, #122048, transparent),
              radial-gradient(900px 600px at 90% 20%, #1a2c5b, transparent),
              var(--bg);
  background-repeat: no-repeat;
  background-size: 1200px 800px, 900px 600px, auto;
  background-position: 10% 10%, 90% 20%, center;
  color:var(--text);
  font-family:var(--font);
  min-height: 100svh;
}

a{color:inherit}
.container{max-width:var(--max); margin: 24px auto; padding: 0 16px;}
.center{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.card{
  background: rgba(18,26,43,.85);
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  backdrop-filter: blur(8px);
}
.auth-card{width:min(420px, 100%);}
h1,h2,h3{margin:0 0 8px 0}
p{margin:0 0 16px 0}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.label{display:block; margin:10px 0 6px}
.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 12px;
  border:1px solid var(--border);
  background:#0e1526;
  color:var(--text);
  outline:none;
}
.input:focus{border-color:#3b6ad6}
.checkbox{display:flex; gap:10px; align-items:center; margin:12px 0 16px; color:var(--muted)}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 12px;
  border:1px solid transparent;
  background:#0e1526;
  color:var(--text);
  text-decoration:none;
  cursor:pointer;
  font-weight:600;
}
.btn--primary{background: var(--primary); color:#0b0f19;}
.btn--ghost{background: transparent; border-color: var(--border); color: var(--text);}
.btn--danger{background: transparent; border-color: rgba(255,107,107,.6); color: #ffd0d0;}
.btn--sm{padding: 7px 10px; border-radius: 10px; font-size:.9rem}
.row{display:flex; gap:12px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap}
.alert{padding:12px 12px; border-radius: 12px; border:1px solid var(--border); margin-bottom: 12px;}
.alert--error{border-color: rgba(255,107,107,.5); background: rgba(255,107,107,.08)}
.alert--success{border-color: rgba(81,207,102,.5); background: rgba(81,207,102,.08)}
.alert--info{border-color: rgba(110,168,254,.5); background: rgba(110,168,254,.08)}
.hint{margin-top:14px; color:var(--muted); font-size:.9rem}
code{background:#0e1526; padding:2px 6px; border-radius: 8px; border:1px solid var(--border)}
.topbar{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 16px;
  border-bottom:1px solid var(--border);
  background: rgba(11,15,25,.7);
  backdrop-filter: blur(10px);
}
.topbar__left{display:flex; align-items:center; gap:16px}
.brand{font-weight:900; text-decoration:none; letter-spacing:.2px}
.nav{display:flex; gap:12px; flex-wrap:wrap}
.nav__link{
  text-decoration:none;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid transparent;
  color:var(--muted);
}
.nav__link.is-active{color:var(--text); border-color: var(--border); background: rgba(18,26,43,.6);}
.topbar__right{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.user{color:var(--muted); font-size:.95rem}
.pill{
  border:1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--text);
  background: rgba(18,26,43,.6);
  font-size:.85rem;
}
.grid{display:grid; gap:16px; grid-template-columns: 1fr; }
@media(min-width: 900px){ .grid{grid-template-columns: 320px 1fr;} }
.add-card{display:flex; flex-direction:column; gap:8px}
.page-header{display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom: 14px; flex-wrap:wrap}
.list{list-style:none; padding:0; margin: 12px 0 0 0; display:flex; flex-direction:column; gap:10px;}
.list__item{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding: 12px;
  border-radius: 14px;
  border:1px solid var(--border);
  background: rgba(14,21,38,.55);
}
.footer{padding: 40px 16px; text-align:center; color: var(--muted)}
.settings{display:grid; gap:16px; grid-template-columns: 1fr;}
@media(min-width: 900px){ .settings{grid-template-columns: 260px 1fr;} }
.settings__menu{
  position:sticky; top: 74px;
  align-self:start;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(18,26,43,.65);
  padding: 10px;
}
.settings__item{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  text-decoration:none;
  color: var(--muted);
}
.settings__item.is-active{color: var(--text); background: rgba(14,21,38,.6); border:1px solid var(--border);}
.table-wrap{overflow:auto; margin-top: 10px}
.table{width:100%; border-collapse:collapse; min-width: 720px}
.table th,.table td{padding: 10px 10px; border-bottom:1px solid rgba(34,48,77,.7); text-align:left}
.table th{color: var(--muted); font-weight:700; font-size:.9rem}
.right{text-align:right}

/* Better mobile responsiveness */
.textarea{
  min-height: 220px;
  resize: vertical;
  line-height: 1.35;
}
@media(max-width: 520px){
  .topbar{padding: 12px 12px}
  .nav__link{padding: 8px 9px}
  .pill{padding: 5px 9px}
  .btn{width: 100%}
  .row{justify-content: stretch}
  .row .btn{flex: 1}
  .list__item{flex-direction: column; align-items:flex-start}
  .table{min-width: 640px}
}

/* App layout: footer at bottom */
.app{min-height:100vh; display:flex; flex-direction:column;}
.main{flex:1; display:block;}

/* Improve mobile readability and spacing */
@media(max-width: 680px){
  .container{margin: 16px auto;}
  .card{padding: 16px;}
  .page-header h2{font-size: 1.35rem;}
  .topbar__left{gap:10px}
  .nav{gap:8px}
  .user{display:none;} /* evita quebrar demais no topo */
}

/* Make dashboard cards full width on small devices */
@media(max-width: 900px){
  .grid{grid-template-columns: 1fr;}
}

/* Prevent huge empty bands on some mobile browsers */
body{min-height:100vh;}

/* Hamburger button (mobile) */
.nav-toggle{
  display:none;
  width:42px; height:42px;
  border-radius: 12px;
  border:1px solid var(--border);
  background: rgba(18,26,43,.6);
  cursor:pointer;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.nav-toggle__bar{
  display:block;
  width:18px;
  height:2px;
  background: var(--text);
  opacity:.9;
  border-radius: 999px;
}

/* App-like cards spacing on mobile */
@media(max-width: 900px){
  .page-header{margin-bottom: 10px}
  .grid{gap:12px}
  .add-card .btn{width:100%}
}

/* Collapsible top nav on small screens */
@media(max-width: 680px){
  .nav-toggle{display:inline-flex}
  .nav{
    position:absolute;
    left:12px;
    right:12px;
    top:62px;
    display:none;
    flex-direction:column;
    gap:8px;
    padding: 12px;
    border:1px solid var(--border);
    border-radius: var(--radius);
    background: rgba(18,26,43,.92);
    box-shadow: var(--shadow);
  }
  .nav.is-open{display:flex}
  .topbar{
    position:sticky;
  }
  .topbar__left{position:relative; width:100%}
  .brand{flex:1}
  .topbar__right{gap:8px}
}

.topbar__left--grow{flex:1}

/* Auth page: better use of space on any screen size */
.center--auth{
  padding: clamp(14px, 3vw, 28px);
}
.auth-card{
  width: min(520px, 94vw);
}
.auth-card h1{
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}
.auth-card .btn--primary{
  width: 100%;
}
@media(min-height: 820px){
  /* Move card a bit upward on very tall phones */
  .center--auth{
    align-items: flex-start;
    padding-top: 14vh;
  }
}
@media(max-width: 520px){
  .auth-card{border-radius: 18px;}
  .auth-card .input{padding: 13px 12px; font-size: 1rem;}
  .auth-card .btn{padding: 12px 14px; font-size: 1rem;}
}

.footer{margin-top:auto;}

/* Prevent large empty-looking areas on very tall screens */
.container.main{
  padding-bottom: 24px;
}

/* Dashboard: keep alignment like before (not centered feeling) */
.page-header--simple{
  justify-content: flex-start;
}
.page-header--simple h2,
.page-header--simple p{
  text-align: left;
}
@media(min-width: 900px){
  /* give the cards a bit more room */
  .grid{grid-template-columns: 360px 1fr;}
}