@import url('https://fonts.googleapis.com/css2?family=Lalezar&family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

:root{
  --paper:#EFEADA;
  --paper-deep:#E6DFCB;
  --ink:#23281F;
  --ink-soft:rgba(35,40,31,0.66);
  --forest:#1F4D3E;
  --forest-deep:#163a2f;
  --teal:#1F6B5C;
  --ochre:#B9822E;
  --rust:#8B3E2F;
  --line:rgba(35,40,31,0.16);
  --radius:6px;
  --maxw:920px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Vazirmatn',sans-serif;
  font-size:16px;
  line-height:1.85;
}
h1,h2,h3{font-family:'Lalezar','Vazirmatn',sans-serif; font-weight:400; margin:0;}
h4{font-family:'Vazirmatn'; font-weight:700; margin:0;}
p{margin:0;}
input,select,button,textarea{font-family:inherit; font-size:15px;}
a{color:inherit;}
.muted{color:var(--ink-soft);}
.small{font-size:13px;}

/* ---------- Login ---------- */
.login-body{
  display:flex; align-items:center; justify-content:center; min-height:100vh;
  background:var(--forest);
}
.login-card{
  background:var(--paper); width:min(380px, 92vw); padding:36px 30px;
  border-radius:var(--radius); display:flex; flex-direction:column; gap:14px;
}
.login-card h1{font-size:26px; margin-bottom:2px;}
.login-card label{display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--ink-soft);}
.login-card input{padding:11px 12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;}
.login-card button{
  margin-top:6px; padding:12px; border:none; border-radius:var(--radius);
  background:var(--teal); color:var(--paper); font-size:15.5px; cursor:pointer;
}
.login-card button:hover{background:var(--forest-deep);}
.alert{background:rgba(139,62,47,0.12); color:var(--rust); padding:10px 12px; border-radius:var(--radius); font-size:14px;}

/* ---------- App shell ---------- */
.topbar{
  background:var(--forest); color:var(--paper);
  padding:16px 20px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:22px;}
.topbar .who{font-size:13px; color:rgba(239,234,218,0.75); display:flex; gap:14px; align-items:center;}
.topbar a{font-size:13px; text-decoration:underline;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:24px 18px 80px;}

.tabs{
  display:flex; gap:6px; overflow-x:auto; margin-bottom:26px; border-bottom:1px solid var(--line);
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
.tab-btn{
  border:none; background:none; padding:10px 16px; font-size:14.5px; color:var(--ink-soft);
  cursor:pointer; white-space:nowrap; border-bottom:2px solid transparent;
}
.tab-btn.active{color:var(--teal); border-color:var(--teal); font-weight:600;}

.panel{display:none;}
.panel.active{display:block;}

.card{
  background:var(--paper-deep); border-radius:var(--radius); padding:22px; margin-bottom:20px;
}
.card h3{font-size:19px; margin-bottom:4px;}
.card .card-sub{font-size:14px; color:var(--ink-soft); margin-bottom:18px;}

/* rows / list items */
.row{
  display:flex; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line);
  flex-wrap:wrap;
}
.row:last-child{border-bottom:none;}
.row input[type=text], .row input[type=number]{
  flex:1; min-width:110px; padding:9px 10px; border:1px solid var(--line);
  border-radius:var(--radius); background:#fff;
}
.row select{padding:9px 10px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;}
.swatch{width:16px; height:16px; border-radius:50%; flex-shrink:0;}

.btn{
  border:none; border-radius:var(--radius); padding:9px 16px; cursor:pointer; font-size:14px;
}
.btn-primary{background:var(--teal); color:var(--paper);}
.btn-primary:hover{background:var(--forest-deep);}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
.btn-ghost:hover{border-color:var(--teal); color:var(--teal);}
.btn-danger{background:transparent; color:var(--rust); border:1px solid rgba(139,62,47,0.35);}
.btn-danger:hover{background:rgba(139,62,47,0.1);}
.btn-add{width:100%; margin-top:10px; background:transparent; border:1px dashed var(--ink-soft); color:var(--ink-soft); padding:10px; border-radius:var(--radius);}
.btn-add:hover{border-color:var(--teal); color:var(--teal);}

/* bars (live calc) */
.pbar-wrap{margin-bottom:20px;}
.pbar-wrap .who{display:flex; justify-content:space-between; font-size:14px; margin-bottom:6px;}
.pbar{height:34px; border-radius:var(--radius); overflow:hidden; display:flex; background:var(--line);}
.pbar .seg-shared{display:flex; align-items:center; justify-content:center; color:#fff; font-size:12.5px; transition:width .3s;}
.pbar .seg-own{display:flex; align-items:center; justify-content:center; border:1px dashed rgba(35,40,31,.35); font-size:12.5px; color:var(--ink-soft); transition:width .3s;}

.pool-bar{display:flex; height:28px; border-radius:var(--radius); overflow:hidden; margin-top:8px;}
.pool-bar > div{display:flex; align-items:center; justify-content:center; font-size:12px; color:#fff; transition:width .3s;}

.total-line{display:flex; justify-content:space-between; font-size:14.5px; margin:14px 0; padding-top:14px; border-top:1px solid var(--line);}
.total-line b{color:var(--teal); font-size:16px;}

.pct-input{width:70px !important; flex:none !important; text-align:center;}

.warn-badge{font-size:12.5px; color:var(--rust); margin-top:8px;}
.ok-badge{font-size:12.5px; color:var(--teal); margin-top:8px;}

.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px; max-width:340px;}
.field label{font-size:14px; color:var(--ink-soft);}
.field input{padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:#fff;}

.group-title{font-size:15px; font-weight:700; margin:22px 0 8px; display:flex; align-items:center; gap:8px;}
.group-title .swatch{width:12px; height:12px; border-radius:3px;}

.toast{
  position:fixed; bottom:22px; right:50%; transform:translateX(50%);
  background:var(--forest); color:var(--paper); padding:11px 20px; border-radius:var(--radius);
  font-size:14px; opacity:0; pointer-events:none; transition:opacity .25s;
  z-index:50;
}
.toast.show{opacity:1;}

@media (max-width:640px){
  .topbar{padding:14px 16px;}
  .topbar h1{font-size:18px;}
  .wrap{padding:18px 12px 70px;}
  .card{padding:16px;}
  .row input[type=text]{min-width:90px;}
}