/* Палитра — из прототипа-эталона (nosorogy_prototype.html) */
:root{
  --hvoya:#12352b; --hvoya-2:#1c4a3c; --zakat:#e07a3f; --pesok:#f3ead9;
  --pesok-2:#e6d8bf; --ozero:#6ba7ad; --ink:#0e2019; --muted:#6d8078;
  --line:rgba(18,53,43,.12); --ok:#3f9b6e; --warn:#d99a2b; --hot:#d5573b;
  --shadow:0 4px 24px rgba(14,32,25,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--pesok);color:var(--ink);min-height:100vh}
.wrap{max-width:1100px;margin:0 auto;padding:20px}
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{width:44px;height:44px;border-radius:13px;background:var(--hvoya);display:flex;align-items:center;justify-content:center;color:var(--pesok);font-size:22px}
.brand h1{font-size:19px;font-weight:700}
.brand .sub{font-size:12px;color:var(--muted);margin-top:3px}
.right-top{display:flex;align-items:center;gap:10px}
.who{display:flex;align-items:center;gap:8px;background:rgba(18,53,43,.06);padding:7px 13px;border-radius:20px;font-size:13px;font-weight:600;color:var(--hvoya)}

.btn{border:0;font-weight:600;font-size:14px;padding:11px 18px;border-radius:11px;cursor:pointer;transition:.15s}
.btn-primary{background:var(--zakat);color:#fff}
.btn-primary:hover{background:#cf6a30}
.btn-ghost{background:transparent;color:var(--muted)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:9px}
.btn-dark{background:var(--hvoya);color:var(--pesok)}
.btn-danger{background:transparent;color:var(--hot);border:1px solid rgba(213,87,59,.35)}

.login-box{max-width:340px;margin:60px auto;background:#fff;border-radius:18px;padding:26px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px}
.login-box h2{font-size:18px;margin-bottom:6px}
.login-box input{padding:12px;border:1.5px solid var(--line);border-radius:11px;font-size:14px}
.err{color:var(--hot);font-size:13px;min-height:16px}

.tabs{display:flex;gap:6px;background:rgba(18,53,43,.06);padding:5px;border-radius:14px;margin-bottom:18px;width:fit-content}
.tab{border:0;background:transparent;font-weight:600;font-size:14px;color:var(--muted);padding:9px 18px;border-radius:10px;cursor:pointer}
.tab.active{background:var(--hvoya);color:var(--pesok);box-shadow:var(--shadow)}
.tabpanel{display:none;animation:fade .25s}
.tabpanel.show{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-head h3{font-size:17px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:13px}
.item{background:#fff;border-radius:15px;padding:14px 15px;box-shadow:var(--shadow);border-left:4px solid var(--ozero)}
.item.off{opacity:.55;border-left-color:var(--muted)}
.item .ih{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.item .emoji{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;color:#fff;flex-shrink:0}
.item .iname{font-weight:700;font-size:15px}
.item .meta{font-size:12.5px;color:var(--muted);line-height:1.5;margin:3px 0 10px}
.item .tag{display:inline-block;background:rgba(18,53,43,.07);color:var(--hvoya);font-size:11px;font-weight:600;padding:1px 8px;border-radius:20px;margin-right:5px}
.item .tag.occ{background:#e2f2e9;color:#1f6b46}
.item .tag.vac{background:rgba(120,120,120,.12);color:var(--muted)}
.item.lodge.vacant{opacity:.5}
.item.lodge:not(.vacant){border-left-color:#2e9b6b}
.sync-info{font-size:12px;color:var(--muted)}
.item .actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}

.list{display:flex;flex-direction:column;gap:10px}
.row-item{background:#fff;border-radius:13px;padding:13px 16px;box-shadow:var(--shadow);display:flex;align-items:center;gap:14px}
.row-item .rname{font-weight:700}
.row-item .rmeta{font-size:12.5px;color:var(--muted)}
.row-item .spacer{flex:1}
.switch{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600}
.pill{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px}
.pill.on{background:#e2f2e9;color:#1f6b46}
.pill.off{background:#f0e6d8;color:#8a6410}

.modal-bg{position:fixed;inset:0;background:rgba(14,32,25,.5);display:none;align-items:center;justify-content:center;z-index:30;padding:18px}
.modal-bg.show{display:flex}
.modal{background:#fff;border-radius:18px;width:100%;max-width:440px;max-height:90vh;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.3);padding:22px}
.modal h3{font-size:18px;margin-bottom:16px}
.field{margin-bottom:12px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font-size:14px;font-family:inherit}
.field.inline{display:flex;align-items:center;gap:9px}
.field.inline input{width:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-foot{display:flex;justify-content:flex-end;gap:9px;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(80px);background:var(--hvoya);color:var(--pesok);padding:13px 20px;border-radius:13px;box-shadow:0 12px 40px rgba(0,0,0,.3);font-size:14px;opacity:0;transition:.3s;z-index:60}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
.qr-img{display:block;margin:10px auto;width:200px;height:200px;background:#fff;border-radius:10px}
.empty{color:var(--muted);font-size:13px;padding:20px;text-align:center}

/* монитор заказов */
.board-cols{display:grid;grid-template-columns:1fr 1fr 1fr;gap:13px}
@media(max-width:820px){.board-cols{grid-template-columns:1fr}}
.bcol{background:rgba(18,53,43,.04);border-radius:16px;padding:12px}
.bcol-h{font-size:13px;font-weight:700;margin-bottom:10px;padding:0 4px}
.bcol-h.new{color:#8a6410}.bcol-h.work{color:#2c6067}.bcol-h.done{color:#1f6b46}
.bticket{background:#fff;border-radius:12px;padding:11px 12px;box-shadow:0 2px 10px rgba(14,32,25,.06);margin-bottom:9px;border-left:3px solid var(--line)}
.bticket.new{border-left-color:var(--warn)}.bticket.taken{border-left-color:var(--ozero)}.bticket.done{border-left-color:var(--ok);opacity:.75}
.bticket .bt-n{font-size:14px;font-weight:600}
.bticket .bt-m{font-size:12px;color:var(--muted);margin-top:3px}
.bticket .bt-by{font-size:12px;color:#2c6067;font-weight:600;margin-top:4px}
.bills{margin-top:16px;display:flex;flex-wrap:wrap;gap:10px}
.bill-card{background:#fff;border-radius:12px;padding:11px 15px;box-shadow:var(--shadow);font-size:13px}
.bill-card b{display:block;font-size:16px;margin-top:3px}