/* ============================================================
   TEAM FAM — stiluri comune
   Scris conservator: fara :has(), fara imbricare, fara container
   queries. Merge pe Safari 15 si pe Android vechi.
   ============================================================ */
:root{
  --bg:#f4f2ee;
  --card:#ffffff;
  --card-2:#faf8f5;
  --ink:#26241f;
  --ink-2:#5f5b53;
  --muted:#918c82;
  --line:#e4e0d8;
  --line-strong:#d4cfc4;
  --accent:#186b73;
  --accent-2:#12545b;
  --accent-soft:#e3f0f1;
  --ok:#5f8455;
  --ok-soft:#eef3ea;
  --rau:#b4453a;
  --rau-soft:#fbeeec;
  --warn:#c08a2e;
  --shadow:0 1px 2px rgba(38,36,31,.05), 0 6px 18px rgba(38,36,31,.06);
  --shadow-lg:0 2px 6px rgba(38,36,31,.08), 0 18px 40px rgba(38,36,31,.12);
  --r:16px;
  --r-sm:11px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15171a; --card:#1f2226; --card-2:#24272c;
    --ink:#eceae5; --ink-2:#b4b0a8; --muted:#8b877f;
    --line:#31343a; --line-strong:#3d4147;
    --accent:#6fc3c8; --accent-2:#8ad3d7; --accent-soft:#12292c;
    --ok:#84ad78; --ok-soft:#212a20;
    --rau:#e08a7e; --rau-soft:#2e1f1d;
  }
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;min-height:100%;}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.45;
  -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  -webkit-user-select:none; user-select:none;
}
input,textarea,select{
  -webkit-user-select:text; user-select:text;
  font-family:inherit; font-size:17px; color:var(--ink);
  touch-action:manipulation;
}
button{font-family:inherit;font-size:inherit;color:inherit;border:0;background:none;padding:0;margin:0;cursor:pointer;}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.3px;}

/* ---------- schelet ---------- */
.wrap{max-width:640px;margin:0 auto;padding:0 16px 80px;}
.topbar{
  position:sticky;top:0;z-index:20;
  background:var(--card);border-bottom:1px solid var(--line);
  padding:14px 16px;margin-bottom:18px;
}
.topbar-in{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:12px;}
.topbar h1{font-size:19px;flex:1 1 auto;}
.brand{display:flex;align-items:center;gap:9px;font-size:19px;font-weight:700;letter-spacing:-.5px;}
.brand .dot{
  width:26px;height:26px;border-radius:8px;background:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:15px;color:#fff;
}

/* ---------- carduri ---------- */
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);margin-bottom:16px;overflow:hidden;
}
.card-head{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:var(--card-2);
}
.card-head h2{font-size:16px;flex:1 1 auto;}
.card-body{padding:16px;}
.card-body.tight{padding:6px;}
.hint{font-size:13px;color:var(--muted);}
.sep{height:1px;background:var(--line);margin:14px 0;}

/* ---------- randuri ---------- */
.row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--r-sm);}
.row + .row{border-top:1px solid var(--line);}
.row .grow{flex:1 1 auto;min-width:0;}
.row .t1{font-size:17px;}
.row .t2{font-size:13px;color:var(--muted);}
.av{
  width:42px;height:42px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;
  background:var(--accent);overflow:hidden;
}
.av img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;}

/* ---------- butoane ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 20px;border-radius:var(--r-sm);
  font-size:16px;font-weight:600;
  background:var(--card-2);border:1px solid var(--line-strong);color:var(--ink);
  text-decoration:none;
}
.btn:active{opacity:.7;}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;}
.btn.danger{color:var(--rau);border-color:var(--rau);background:transparent;}
.btn.ghost{background:transparent;border-color:var(--line);}
.btn.sm{padding:8px 14px;font-size:14px;border-radius:9px;}
.btn.wide{width:100%;padding:15px 20px;font-size:17px;}
.btn[disabled]{opacity:.5;}
.btns{display:flex;gap:10px;flex-wrap:wrap;}

/* ---------- formulare ---------- */
.field{margin-bottom:15px;}
.field label{
  display:block;font-size:12px;font-weight:700;color:var(--muted);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.6px;
}
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border-radius:var(--r-sm);
  border:1px solid var(--line-strong);background:var(--card);
  -webkit-appearance:none;appearance:none;
}
.field input:focus, .field select:focus{outline:2px solid var(--accent);outline-offset:-1px;}
.field .sub{font-size:13px;color:var(--muted);margin-top:6px;}
.two{display:flex;gap:12px;}
.two > *{flex:1 1 0;min-width:0;}

/* ---------- mesaje ---------- */
.msg{
  padding:12px 14px;border-radius:var(--r-sm);font-size:15px;
  margin-bottom:14px;border:1px solid transparent;
}
.msg.rau{background:var(--rau-soft);color:var(--rau);border-color:var(--rau);}
.msg.bun{background:var(--ok-soft);color:var(--ok);border-color:var(--ok);}
.msg.info{background:var(--accent-soft);color:var(--accent);border-color:var(--accent);}

.gol{padding:26px 16px;text-align:center;color:var(--muted);font-size:15px;}

/* ---------- ecranul de intrare ---------- */
.auth-wrap{
  max-width:400px;margin:0 auto;padding:8vh 20px 40px;
}
.auth-logo{text-align:center;margin-bottom:26px;}
.auth-logo .mark{
  width:64px;height:64px;border-radius:18px;background:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:32px;margin-bottom:12px;
}
.auth-logo h1{font-size:27px;}
.auth-logo p{margin:6px 0 0;color:var(--muted);font-size:15px;}
.switch{text-align:center;margin-top:18px;font-size:15px;color:var(--muted);}
.switch button{color:var(--accent);font-weight:600;text-decoration:underline;}

/* ---------- codul de imperechere ---------- */
.cod{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:42px;font-weight:700;letter-spacing:8px;
  text-align:center;padding:20px 10px;margin:4px 0 10px;
  background:var(--accent-soft);color:var(--accent);border-radius:var(--r);
  -webkit-user-select:text;user-select:text;
}
.cod-sub{text-align:center;font-size:14px;color:var(--muted);margin-bottom:6px;}

/* ---------- pastile de stare ---------- */
.pill{
  font-size:12px;font-weight:700;padding:4px 10px;border-radius:999px;
  text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;
}
.pill.on{background:var(--ok-soft);color:var(--ok);}
.pill.off{background:var(--rau-soft);color:var(--rau);}
.pill.wait{background:var(--card-2);color:var(--muted);}

/* ---------- fereastra ---------- */
.veil{
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:60;
  background:rgba(20,19,17,.45);
  display:flex;align-items:flex-start;justify-content:center;
  padding:4vh 16px 16px;
}
.modal{
  background:var(--card);border-radius:20px;box-shadow:var(--shadow-lg);
  width:100%;max-width:440px;max-height:92%;overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.modal-head{display:flex;align-items:center;gap:10px;padding:18px 18px 12px;border-bottom:1px solid var(--line);}
.modal-head h3{flex:1 1 auto;font-size:18px;}
.modal-body{padding:18px;}
.modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:0 18px 18px;}
.xbtn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:19px;}

/* ---------- notificare ---------- */
#toast{
  position:fixed;left:50%;bottom:26px;z-index:80;
  transform:translateX(-50%) translateY(16px);
  background:var(--ink);color:var(--bg);
  padding:12px 20px;border-radius:999px;font-size:15px;font-weight:600;
  opacity:0;transition:opacity .2s, transform .2s;pointer-events:none;
  box-shadow:var(--shadow-lg);max-width:86%;text-align:center;
}
#toast.on{opacity:1;transform:translateX(-50%) translateY(0);}

/* ---------- incarcare ---------- */
.spin{
  width:22px;height:22px;border-radius:50%;
  border:2px solid var(--line-strong);border-top-color:var(--accent);
  -webkit-animation:sp .7s linear infinite;animation:sp .7s linear infinite;
  display:inline-block;vertical-align:middle;
}
@-webkit-keyframes sp{to{-webkit-transform:rotate(360deg);}}
@keyframes sp{to{transform:rotate(360deg);}}
.center{text-align:center;padding:40px 0;color:var(--muted);}

/* ---------- bara de jos ---------- */
#nav{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:flex;background:var(--card);border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
#nav button{
  flex:1 1 0;padding:9px 4px 11px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font-size:11px;font-weight:600;color:var(--muted);letter-spacing:.2px;
}
#nav button .ic{font-size:21px;line-height:1.1;}
#nav button.on{color:var(--accent);}
.wrap{padding-bottom:96px;}

/* ---------- randuri editabile ---------- */
.er{display:flex;align-items:center;gap:10px;padding:10px 8px;border-radius:9px;}
.er + .er{border-top:1px solid var(--line);}
.er .em{font-size:23px;width:30px;text-align:center;flex:0 0 auto;}
.er .tx{flex:1 1 auto;font-size:16px;min-width:0;}
.er .nr{
  font-size:13px;font-weight:700;color:var(--warn);white-space:nowrap;
  background:var(--card-2);border:1px solid var(--line);padding:3px 9px;border-radius:999px;
}
.mv{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:16px;flex:0 0 auto;}

/* ---------- alegere iconita ---------- */
.emos{display:flex;flex-wrap:nowrap;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:2px 0 6px;}
.emos button{
  width:42px;height:42px;border-radius:10px;font-size:22px;flex:0 0 auto;
  border:1px solid var(--line);background:var(--card-2);
  display:flex;align-items:center;justify-content:center;
}
.emos button.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset;background:var(--card);}

/* ---------- antet de sub-ecran ---------- */
.back{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--accent);margin-bottom:14px;}
.slot-h{display:flex;align-items:center;gap:9px;padding:12px 16px;background:var(--card-2);border-bottom:1px solid var(--line);}
.slot-h h3{flex:1 1 auto;font-size:15px;}

/* ---------- semnul de intrebare de langa etichete ---------- */
.i-btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;margin-left:7px;
  background:var(--accent);color:#fff;
  font-size:11px;font-weight:800;line-height:1;
  vertical-align:middle;
}
.field label{display:flex;align-items:center;}
.expl p{margin:0 0 12px;font-size:16px;line-height:1.55;color:var(--ink);}
.expl p:last-child{margin-bottom:0;}
.expl .de-ce{
  margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);
  background:var(--accent-soft);color:var(--ink-2);font-size:15px;line-height:1.5;
}
.expl .de-ce b{color:var(--accent);}