:root {
  --bg:#f7f6f2; --surface:#f9f8f5; --surface-2:#fbfbf9; --text:#28251d; --muted:#726f68;
  --border:#d4d1ca; --primary:#01696f; --primary-hover:#0c4e54; --soft:#d9ebeb;
  --success:#437a22; --warning:#b07a00; --danger:#a12c7b; --radius:16px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:Arial,sans-serif;background:var(--bg);color:var(--text)}
a{text-decoration:none;color:inherit} img,svg{display:block;max-width:100%}
.container{width:min(1180px,calc(100% - 2rem));margin:0 auto}.main{padding:28px 0 48px}
.topbar{position:sticky;top:0;z-index:10;background:rgba(247,246,242,.94);border-bottom:1px solid rgba(0,0,0,.08);backdrop-filter:blur(8px)}
.topbar-inner,.toolbar,.inline,.legend{display:flex;align-items:center;gap:12px}.topbar-inner{justify-content:space-between;padding:16px 0}.brand{display:flex;align-items:center;gap:12px;font-weight:700}.brand-mark{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--soft)}
.card{background:var(--surface);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);padding:24px;box-shadow:0 6px 20px rgba(0,0,0,.05)}
.login-card{max-width:520px;margin:8vh auto 0}.grid-2,.admin-grid,.student-grid,.stats{display:grid;gap:24px}.grid-2,.student-grid{grid-template-columns:1.15fr .85fr}.admin-grid{grid-template-columns:1fr 1fr;margin-top:24px}.stats{grid-template-columns:repeat(3,1fr);margin-top:18px}
h1,h2,h3{margin:0 0 12px;line-height:1.15} h1{font-size:2rem} h2{font-size:1.35rem} p{margin:0 0 12px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;background:var(--soft);color:var(--primary);border-radius:999px;padding:8px 14px;font-weight:700}
.field{margin-bottom:16px} label{display:block;font-weight:700;margin-bottom:6px}.input,.textarea{width:100%;min-height:46px;padding:12px 14px;border-radius:12px;border:1px solid rgba(0,0,0,.12);background:var(--surface-2)}.textarea{min-height:160px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border:none;border-radius:12px;background:var(--primary);color:#fff;font-weight:700;cursor:pointer}.btn:hover{background:var(--primary-hover)}.btn-secondary{background:transparent;color:var(--text);border:1px solid rgba(0,0,0,.12)}.btn-success{background:var(--success)}
.status{margin-bottom:16px;padding:12px 14px;border-radius:12px;font-weight:700}.status-success{background:rgba(67,122,34,.12);color:#295111}.status-error{background:rgba(161,44,123,.12);color:#7d1e5e}.status-warning{background:rgba(176,122,0,.12);color:#714f00}
.stat{background:var(--surface-2);border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:16px}.stat strong{display:block;font-size:1.6rem}.small{font-size:.92rem;color:var(--muted)}
.zone-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}.zone-tile{background:var(--surface-2);border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:16px}.zone-tile strong{display:block;margin-bottom:6px}
.table-wrap{overflow:auto;border:1px solid rgba(0,0,0,.08);border-radius:14px} table{width:100%;border-collapse:collapse;min-width:720px} th,td{padding:12px 10px;text-align:left;border-bottom:1px solid rgba(0,0,0,.06);vertical-align:top} th{background:var(--surface-2)}
.map-wrap{position:relative}.map-tooltip{position:absolute;transform:translate(-50%,calc(-100% - 10px));pointer-events:none;opacity:0;background:var(--text);color:#fff;padding:8px 10px;border-radius:10px;font-size:.82rem;white-space:nowrap}.map-tooltip.visible{opacity:1}
.legend{flex-wrap:wrap;color:var(--muted);font-size:.95rem;margin-bottom:14px}.legend-dot{width:12px;height:12px;border-radius:999px;display:inline-block;margin-right:6px}.dot-available{background:#2ba24c}.dot-limited{background:#d19900}.dot-full{background:#a13544}
.summary-card{border-radius:16px;padding:18px;background:rgba(67,122,34,.12);border:1px solid rgba(67,122,34,.18)}.empty{padding:18px;border:1px dashed rgba(0,0,0,.15);border-radius:14px;color:var(--muted)}
.locker-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:18px}
.locker-card{display:block;border:1px solid rgba(0,0,0,.1);border-radius:14px;background:var(--surface-2);padding:14px;cursor:pointer}
.locker-card:hover{border-color:var(--primary)} .locker-card.disabled{opacity:.55;cursor:not-allowed;background:rgba(0,0,0,.05)} .locker-card.mine{border-color:var(--success);background:rgba(67,122,34,.12)}
.locker-radio{display:flex;align-items:flex-start;gap:10px}.locker-radio input{margin-top:3px;transform:scale(1.15)}
.inline{justify-content:space-between;flex-wrap:wrap}
@media (max-width:920px){.grid-2,.admin-grid,.student-grid,.stats{grid-template-columns:1fr}}


.zone-board{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.zone-board-card{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:150px;
  padding:18px;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  background:#edf4f4;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.zone-board-card:hover{
  transform:translateY(-2px);
  border-color:rgba(1,105,111,.35);
  box-shadow:0 8px 18px rgba(0,0,0,.06);
}
.zone-board-title{
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
  margin-bottom:6px;
}
.zone-board-name{
  font-size:.95rem;
  color:var(--muted);
  margin-bottom:8px;
}
.zone-board-meta{
  font-size:.9rem;
  color:var(--muted);
}
.zone-board-indicator{
  width:18px;
  height:18px;
  border-radius:999px;
  margin-top:14px;
  border:3px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(0,0,0,.08);
}
.zone-board-card.available .zone-board-indicator{background:#2ba24c;}
.zone-board-card.limited .zone-board-indicator{background:#d19900;}
.zone-board-card.full .zone-board-indicator{background:#a13544;}
.zone-board-card.full{background:#f2e8ea;}
.zone-board-card.limited{background:#f5efd9;}
@media (max-width:920px){
  .zone-board{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .zone-board{grid-template-columns:1fr;}
}