:root{--cream:#FFFDF2;--tea:#FAF5EC;--ice:#F4FAFD;--cloud:#EAF6FC;--mint:#F3F9F1;--green:#146B43;--green2:#1f8b59;--text:#20302a;--muted:#6e7773;--line:#dfe8e2}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:linear-gradient(180deg,var(--cream),var(--ice));color:var(--text)}
header{position:sticky;top:0;z-index:20;background:#ffffffee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:10px 12px}
.top{display:flex;justify-content:space-between;align-items:center;gap:8px}.brand{font-weight:800;color:var(--green)}.role{font-size:12px;color:var(--muted)}
.tabs{display:flex;gap:8px;overflow:auto;padding-top:10px}.tabs button{white-space:nowrap;border:0;background:var(--mint);padding:10px 14px;border-radius:999px}.tabs button.active{background:var(--green);color:#fff}
main{max-width:980px;margin:auto;padding:14px 12px 90px}.card{background:#ffffffd9;border:1px solid #fff;border-radius:18px;padding:14px;margin-bottom:12px;box-shadow:0 6px 24px #40614b10}
.products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product{padding:12px;border:1px solid var(--line);border-radius:16px;background:white;min-height:104px}.product strong{display:block}.price{color:var(--green);font-weight:800;margin-top:6px}
.row{display:flex;gap:8px;flex-wrap:wrap}.choice{display:flex;gap:8px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:white}
button.primary{background:var(--green);color:white;border:0;border-radius:12px;padding:13px 16px;font-weight:800;width:100%}
button.ghost{background:white;border:1px solid var(--line);border-radius:10px;padding:9px 12px}
input,textarea,select{width:100%;padding:11px;border:1px solid var(--line);border-radius:10px;background:white}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}.metric{padding:14px;border-radius:15px;background:var(--mint)}.metric:nth-child(2n){background:var(--cloud)}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:left}.hidden{display:none!important}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}.loginbox{width:min(420px,100%);background:white;border-radius:22px;padding:22px;box-shadow:0 16px 60px #0001}
@media(min-width:720px){.products{grid-template-columns:repeat(3,1fr)} main{padding:20px}.loginbox{padding:30px}}


/* ===== Login UI v1.1 ===== */
.login{
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px 18px;
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(rgba(255,253,242,.72),rgba(244,250,253,.80)),
    url('../images/poci-login-bg.jpg') center center / cover no-repeat;
}
.login::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,253,242,.18),rgba(234,246,252,.18));
  pointer-events:none;
}
.loginbox{
  position:relative;
  z-index:1;
  width:min(430px,100%);
  background:rgba(255,255,255,.93);
  border:1px solid rgba(255,255,255,.92);
  border-radius:24px;
  padding:30px 28px 28px;
  box-shadow:0 18px 55px rgba(31,69,51,.16);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.loginbox h2{
  margin:0 0 10px;
  font-size:clamp(24px,6vw,30px);
  color:#174f37;
}
.loginbox p{
  margin:0 0 26px;
  color:#66736c;
  line-height:1.5;
}
.loginbox label{
  display:block;
  margin:0 0 7px;
  font-weight:700;
  color:#35483e;
}
.loginbox input{
  height:48px;
  margin:0 0 18px;
  padding:0 14px;
  border-radius:12px;
  border:1px solid #dbe6df;
  background:rgba(255,255,255,.96);
  font-size:16px;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.loginbox input:focus{
  border-color:#1f8b59;
  box-shadow:0 0 0 3px rgba(31,139,89,.12);
}
.loginbox .primary{
  min-height:50px;
  margin-top:4px;
  border-radius:13px;
  font-size:16px;
  box-shadow:0 7px 18px rgba(20,107,67,.18);
}
@media(max-width:480px){
  .login{
    place-items:end center;
    padding:22px 16px max(28px,env(safe-area-inset-bottom));
    background-position:center top;
  }
  .loginbox{
    width:100%;
    padding:25px 20px 22px;
    border-radius:22px;
  }
  .loginbox p{margin-bottom:22px}
}