.locker-page { --locker-accent:#e95738; --locker-ink:#17384a; --locker-muted:#6f828d; --locker-line:#d9e4e8; --locker-soft:#f4f8f9; display:grid; gap:1.35rem; }
.locker-hero { align-items:flex-end; display:flex; justify-content:space-between; gap:2rem; padding:.35rem .15rem .5rem; }
.locker-hero h1 { color:var(--locker-ink); font-size:clamp(2rem,4vw,3.35rem); letter-spacing:-.045em; line-height:1; margin:.45rem 0 .65rem; }
.locker-hero p { color:var(--locker-muted); font-size:1.05rem; margin:0; max-width:48rem; }
.locker-kicker { color:var(--locker-accent); font-size:.78rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
.locker-department { align-items:center; background:#fff; border:1px solid var(--locker-line); border-radius:1rem; box-shadow:0 .5rem 1.6rem rgba(23,56,74,.06); display:flex; gap:.8rem; min-width:15rem; padding:.85rem 1rem; }
.locker-department-icon { align-items:center; background:#fff0ec; border-radius:.75rem; color:var(--locker-accent); display:flex; font-size:1.35rem; height:2.8rem; justify-content:center; width:2.8rem; }
.locker-department span { color:var(--locker-muted); display:block; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.locker-department strong { color:var(--locker-ink); display:block; margin-top:.12rem; }
.locker-stats { display:grid; gap:1rem; grid-template-columns:repeat(4,minmax(0,1fr)); }
.locker-stat { background:#fff; border:1px solid var(--locker-line); border-radius:1.15rem; box-shadow:0 .65rem 2rem rgba(23,56,74,.055); min-height:8rem; padding:1.2rem 1.3rem; position:relative; overflow:hidden; }
.locker-stat::after { background:var(--stat-color,#dce8ec); border-radius:999px; content:""; height:4.5rem; opacity:.2; position:absolute; right:-1.25rem; top:-1.25rem; width:4.5rem; }
.locker-stat span { color:var(--locker-muted); display:block; font-size:.86rem; font-weight:700; }
.locker-stat strong { color:var(--locker-ink); display:block; font-size:2.35rem; letter-spacing:-.04em; line-height:1; margin-top:1.2rem; }
.locker-stat-total { --stat-color:#1582ad; } .locker-stat-occupied { --stat-color:#e95738; } .locker-stat-free { --stat-color:#32a06f; } .locker-stat-offline { --stat-color:#9a6575; }
.locker-panel { background:#fff; border:1px solid var(--locker-line); border-radius:1.25rem; box-shadow:0 .75rem 2.5rem rgba(23,56,74,.055); overflow:hidden; }
.locker-form-panel > summary { align-items:center; cursor:pointer; display:flex; justify-content:space-between; list-style:none; padding:1.2rem 1.35rem; }
.locker-form-panel > summary::-webkit-details-marker { display:none; }
.locker-form-panel > summary::after { color:var(--locker-accent); content:"＋"; font-size:1.45rem; font-weight:700; }
.locker-form-panel[open] > summary::after { content:"−"; }
.locker-panel-title span { color:var(--locker-accent); display:block; font-size:.73rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; }
.locker-panel-title h2 { color:var(--locker-ink); font-size:1.28rem; margin:.25rem 0 0; }
.locker-form { border-top:1px solid var(--locker-line); display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); padding:1.35rem; }
.locker-field { display:grid; gap:.45rem; }
.locker-field span { color:#476270; font-size:.82rem; font-weight:750; }
.locker-field input,.locker-field select,.locker-field textarea,.locker-search input { background:#fbfdfd; border:1px solid #cddce2; border-radius:.75rem; color:var(--locker-ink); font:inherit; min-height:2.8rem; padding:.65rem .8rem; width:100%; }
.locker-field input:focus,.locker-field select:focus,.locker-field textarea:focus,.locker-search input:focus { border-color:#2184a8; box-shadow:0 0 0 3px rgba(33,132,168,.13); outline:0; }
.locker-field-wide { grid-column:1/-1; }
.locker-form-actions { align-items:center; display:flex; gap:.65rem; grid-column:1/-1; justify-content:flex-end; }
.locker-primary,.locker-secondary,.locker-icon-button { align-items:center; border-radius:.72rem; cursor:pointer; display:inline-flex; font-weight:750; justify-content:center; min-height:2.7rem; padding:.65rem 1rem; text-decoration:none; }
.locker-primary { background:var(--locker-accent); border:1px solid var(--locker-accent); color:#fff; }
.locker-secondary { background:#fff; border:1px solid #cddce2; color:#31566a; }
.locker-list-head { align-items:center; border-bottom:1px solid var(--locker-line); display:flex; gap:1rem; justify-content:space-between; padding:1.25rem 1.35rem; }
.locker-list-head h2 { color:var(--locker-ink); font-size:1.35rem; margin:0; }
.locker-list-head p { color:var(--locker-muted); margin:.2rem 0 0; }
.locker-search { min-width:min(20rem,100%); position:relative; }
.locker-search::before { color:#6c838f; content:"⌕"; font-size:1.35rem; left:.8rem; position:absolute; top:.55rem; }
.locker-search input { padding-left:2.4rem; }
.locker-grid { display:grid; gap:1rem; grid-template-columns:repeat(3,minmax(0,1fr)); padding:1.35rem; }
.locker-card { background:#fff; border:1px solid var(--locker-line); border-radius:1rem; display:flex; flex-direction:column; min-height:15rem; overflow:hidden; transition:transform .16s ease,box-shadow .16s ease; }
.locker-card:hover { box-shadow:0 .8rem 2rem rgba(23,56,74,.1); transform:translateY(-2px); }
.locker-card-top { align-items:flex-start; background:linear-gradient(135deg,#f7fafb,#fff); border-bottom:1px solid #e4ecef; display:flex; justify-content:space-between; padding:1rem; }
.locker-number { align-items:center; display:flex; gap:.75rem; }
.locker-number-icon { align-items:center; background:#e7f2f6; border-radius:.7rem; color:#176e91; display:flex; font-size:1.25rem; height:2.7rem; justify-content:center; width:2.7rem; }
.locker-number small { color:var(--locker-muted); display:block; font-size:.68rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.locker-number strong { color:var(--locker-ink); display:block; font-size:1.25rem; margin-top:.1rem; }
.locker-badge { border-radius:999px; font-size:.73rem; font-weight:800; padding:.4rem .65rem; }
.locker-badge-free { background:#e7f7ef; color:#197448; } .locker-badge-occupied { background:#fff0eb; color:#b93d25; } .locker-badge-offline { background:#f3e9ed; color:#7c4257; }
.locker-card-body { display:grid; flex:1; gap:.9rem; padding:1rem; }
.locker-location { display:grid; gap:.25rem; grid-template-columns:1fr 1fr; }
.locker-meta span { color:var(--locker-muted); display:block; font-size:.72rem; }
.locker-meta strong { color:#294c5e; display:block; font-size:.9rem; margin-top:.15rem; }
.locker-person { align-items:center; background:var(--locker-soft); border-radius:.8rem; display:flex; gap:.7rem; padding:.7rem; }
.locker-avatar { align-items:center; background:#dceff1; border-radius:.65rem; color:#176a72; display:flex; font-size:.78rem; font-weight:850; height:2.5rem; justify-content:center; width:2.5rem; }
.locker-person strong { color:var(--locker-ink); display:block; font-size:.9rem; }
.locker-person span { color:var(--locker-muted); display:block; font-size:.76rem; margin-top:.1rem; }
.locker-note { color:var(--locker-muted); font-size:.8rem; margin:0; overflow-wrap:anywhere; }
.locker-card-actions { align-items:center; border-top:1px solid #e4ecef; display:flex; justify-content:flex-end; gap:.45rem; padding:.75rem 1rem; }
.locker-icon-button { background:#fff; border:1px solid #cddce2; color:#176e91; min-height:2.35rem; padding:.4rem .7rem; }
.locker-icon-danger { border-color:#f0c8c1; color:#c6412b; }
.locker-empty { color:var(--locker-muted); padding:3.5rem 1.5rem; text-align:center; }
.locker-empty strong { color:var(--locker-ink); display:block; font-size:1.15rem; }
.locker-empty p { margin:.4rem 0 0; }
.locker-card[hidden] { display:none; }
@media (max-width:1100px) { .locker-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .locker-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:760px) { .locker-hero,.locker-list-head { align-items:stretch; flex-direction:column; } .locker-department,.locker-search { min-width:0; width:100%; } .locker-form,.locker-grid { grid-template-columns:1fr; } .locker-field-wide { grid-column:auto; } .locker-form-actions { grid-column:auto; justify-content:stretch; } .locker-form-actions>* { flex:1; } }
@media (max-width:480px) { .locker-stats { grid-template-columns:1fr; } .locker-stat { min-height:6.5rem; } }
:root[data-theme="dark"] .locker-page { --locker-ink:#f1f7fa; --locker-muted:#afc1ca; --locker-line:#345463; --locker-soft:#173b4a; }
:root[data-theme="dark"] .locker-department,:root[data-theme="dark"] .locker-stat,:root[data-theme="dark"] .locker-panel,:root[data-theme="dark"] .locker-card,:root[data-theme="dark"] .locker-secondary,:root[data-theme="dark"] .locker-icon-button { background:#123444; }
:root[data-theme="dark"] .locker-card-top { background:linear-gradient(135deg,#173e4e,#123444); border-color:#345463; }
:root[data-theme="dark"] .locker-field input,:root[data-theme="dark"] .locker-field select,:root[data-theme="dark"] .locker-field textarea,:root[data-theme="dark"] .locker-search input { background:#0f2d3b; border-color:#426574; color:#f2f7f9; }
:root[data-theme="dark"] .locker-field span,:root[data-theme="dark"] .locker-meta strong { color:#d4e1e6; }
:root[data-theme="dark"] .locker-card-actions,:root[data-theme="dark"] .locker-list-head,:root[data-theme="dark"] .locker-form { border-color:#345463; }