:root{
  font-family:system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:#e8f1ed;
  background:#0d1412;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{
  margin:0;
  color:#e8f1ed;
  background:
    radial-gradient(circle at top left, #19352c 0%, transparent 30%),
    radial-gradient(circle at top right, #102a22 0%, transparent 26%),
    linear-gradient(180deg,#0a100f 0%,#101917 100%);
}
header{
  background:rgba(12,18,16,.92);
  border-bottom:1px solid #24352f;
  backdrop-filter:blur(12px);
  position:sticky;top:0;z-index:5;
  padding:14px max(18px,calc((100vw - 1100px)/2));
  display:flex;justify-content:space-between;align-items:center;gap:10px
}
.brand{color:#4dc39e;font-size:20px}
.brand small{display:block;color:#9ab9ae;font-size:12px;padding-left:27px}
main{max-width:1100px;margin:24px auto;padding:0 16px 50px}
h1{font-size:30px;margin:8px 0 10px;color:#f2f8f5}
h2{font-size:18px;margin:4px 0 12px;color:#f2f8f5}
h3{color:#f2f8f5}
.muted,.hint,.tiny{color:#b3c8bf;font-size:14px}
.box,.card{
  border:1px solid #253832;
  border-radius:18px;
  padding:18px;
  background:rgba(17,26,23,.9);
  margin:14px 0;
  box-shadow:0 8px 28px rgba(0,0,0,.22)
}
input,select,button,details,summary{
  font:inherit;
}
input,select{
  border-radius:10px;
  padding:11px;
  border:1px solid #355046;
  background:#101917;
  color:#edf6f2
}
input::placeholder{color:#8aa49a}
button{
  border-radius:10px;
  padding:11px 14px;
  background:#2a8d72;
  color:white;
  border:none;
  cursor:pointer;
  font-weight:600
}
button:hover{filter:brightness(1.06)}
button:disabled{opacity:.45;cursor:not-allowed}
.secondary{background:#203d34;color:#ddf5eb;border:1px solid #315247}
.danger{background:#60312d;color:#fff2f0}
label{display:grid;gap:6px;font-size:14px;font-weight:600}
form{display:grid;gap:13px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.tabs button{background:#101917;color:#d7ebe2;border:1px solid #2a4038}
.tabs button.active{background:#2a8d72;color:white;border-color:#2a8d72}
.filters,.row{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.row>label{flex:1;min-width:170px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.card{margin:0;overflow:hidden;padding:0;background:rgba(17,26,23,.95)}
.card img{width:100%;height:170px;object-fit:cover;background:#1b2622}
.card .inner{padding:14px}
.card h3{margin:0 0 7px;font-size:17px}
.card p{font-size:13px;line-height:1.45;color:#d6e5df}
.card details summary{cursor:pointer;color:#9fd9c4}
.card .buttons{display:flex;flex-wrap:wrap;gap:7px}
.pill{font-size:12px;font-weight:600;color:#79d8b6}
.item{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #253832;padding:10px 0}
.item:last-child{border-bottom:0}
#status{position:fixed;bottom:12px;left:16px;right:16px;max-width:650px;margin:auto;pointer-events:none;background:#173329;color:white;border-radius:10px;padding:12px;display:none;border:1px solid #315247}
.inline{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.inline input{flex:1;min-width:90px}
.divider{border-top:1px solid #2a3b35;margin:15px 0}
.hint{line-height:1.5}
code{background:#1a2622;padding:2px 5px;border-radius:4px;color:#9fd9c4}
#login,#setPassword{max-width:460px;margin:45px auto}
.page{
  position:relative;
  overflow:hidden;
  border:1px solid #22332e;
  border-radius:24px;
  padding:22px;
  background:rgba(10,16,15,.92);
  min-height:320px;
  isolation:isolate;
}
.page::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:230px;
  background-size:cover;
  background-position:center;
  opacity:.26;
  z-index:0;
}
.page::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(6,11,10,.20) 0%,rgba(9,15,13,.74) 150px,rgba(9,15,13,.96) 250px,rgba(9,15,13,.98) 100%);
  z-index:0;
}
.page>*{position:relative;z-index:1}
#plan::before{background-image:url('./images/01-4.webp')}
#draw::before{background-image:url('./images/10-4.webp')}
#weight::before{background-image:url('./images/03-1.webp')}
#groups::before{background-image:url('./images/14-2.webp')}
#history::before{background-image:url('./images/06-4.webp')}
#application .box{background:rgba(17,26,23,.82)}
#userBar small{color:#b9d2c8;margin-right:8px}
#login .muted{margin-top:14px}
@media(max-width:550px){
  main{margin:14px auto}
  .tabs{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
  .tabs button{padding:10px 2px;font-size:11px}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card img{height:115px}
  .card .inner{padding:10px}
  .card h3{font-size:14px}
  .card p{font-size:12px}
  .card button{font-size:12px;padding:8px}
  h1{font-size:24px}
  .page{padding:16px}
  .page::before{height:180px}
}