/* REDMAMMOTH panel — brand palette.
   navy #14213D · oxblood #6E1D26 · gold #C4A35A · ivory #F6F2E8
   graphite #23262B · slate #6E7A8A · oxblood-dark #5A1720
   Rule: red stays in the brand, never in the data. No money-green either. */
:root{
  --navy:#14213D; --ox:#6E1D26; --oxdark:#5A1720; --gold:#C4A35A;
  --ivory:#F6F2E8; --graphite:#23262B; --slate:#6E7A8A;
  --line:#2c3948;
}
*{box-sizing:border-box}
body{margin:0;background:var(--navy);color:var(--ivory);
     font:14px/1.55 Inter,-apple-system,Segoe UI,Roboto,sans-serif}

/* top bar */
.topbar{display:flex;align-items:center;justify-content:space-between;
        padding:14px 22px;background:var(--graphite);
        border-bottom:2px solid var(--gold)}
.brand{font-weight:900;font-size:20px;letter-spacing:1px}
.brand .r{color:var(--ox)} .brand .m{color:var(--ivory)}
.who{display:flex;gap:12px;align-items:center}
.inline{display:inline;margin:0}

/* layout */
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 56px)}
/* The sidebar is sticky so it stays reachable while a long page scrolls.
   It used to carry a FIXED height of one screen, which on a page with many
   cards (the packs list) pushed the content down below it instead of beside
   it. max-height lets it shrink to its contents while still scrolling when
   the menu itself is taller than the window. */
.side{width:210px;flex:0 0 210px;background:var(--graphite);
      border-right:1px solid var(--line);padding:14px 0;
      position:sticky;top:0;align-self:flex-start;
      max-height:calc(100vh - 56px);overflow-y:auto}
.side a{display:block;padding:10px 20px;color:var(--ivory);
        text-decoration:none;font-size:13px;border-left:3px solid transparent}
.side a:hover{background:rgba(196,163,90,.08);border-left-color:var(--gold)}
.side a.active{background:rgba(110,29,38,.25);border-left-color:var(--gold);
               color:var(--gold)}
.side .sect{padding:12px 20px 4px;font-size:11px;letter-spacing:1.5px;
            text-transform:uppercase;color:var(--slate)}
.content{flex:1;padding:22px 26px;max-width:1100px;min-width:0}

/* unread count beside a menu item */
.badge{display:inline-block;min-width:18px;padding:1px 6px;margin-left:6px;
       border-radius:10px;background:var(--ox);color:#fff;font-size:11px;
       text-align:center}

/* on a narrow screen the menu becomes a strip across the top */
@media (max-width:760px){
  .shell{flex-direction:column}
  .side{width:auto;flex:none;height:auto;position:static;
        display:flex;flex-wrap:wrap;gap:4px;padding:8px;
        border-right:none;border-bottom:1px solid var(--line)}
  .side .sect{display:none}
  .side a{border-left:none;border-radius:6px;padding:8px 12px}
}

h1{font-size:19px;margin:0 0 4px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:2px;
   color:var(--gold);margin:26px 0 10px}
.hint{color:var(--slate);font-size:12px;margin:4px 0 12px}
.muted,.mut{color:var(--slate)}

/* cards & tables */
.card{background:var(--graphite);border:1px solid var(--line);
      border-radius:10px;padding:14px 16px;margin-bottom:12px}
table{width:100%;border-collapse:collapse;background:var(--graphite);
      border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);
      font-size:13px;vertical-align:middle}
th{color:var(--slate);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
tr:last-child td{border-bottom:none}

/* buttons */
.btn,button{background:#2b3947;color:var(--ivory);border:1px solid #3a4a5b;
     border-radius:6px;padding:6px 12px;cursor:pointer;font-size:12px;
     text-decoration:none;display:inline-block}
.btn:hover,button:hover{border-color:var(--gold)}
.btn.primary,button.primary{background:var(--ox);border-color:var(--ox);
     color:#fff;font-weight:700}
.btn.primary:hover,button.primary:hover{background:var(--oxdark)}
.btn.ghost{background:transparent}
.btn.danger,button.danger{border-color:var(--ox)}
.btn.danger:hover,button.danger:hover{background:var(--ox);color:#fff}
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}

/* forms */
.form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
label{display:flex;flex-direction:column;gap:5px;font-size:11px;
      color:var(--slate);text-transform:uppercase;letter-spacing:.5px}
input,select,textarea{background:var(--navy);border:1px solid #3a4a5b;
     border-radius:6px;color:var(--ivory);padding:8px 10px;font-size:13px;
     min-width:140px;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)}
input[type=file]{padding:6px;color:var(--slate)}

/* status chips — deliberately NOT red/green for data */
.chip{padding:2px 9px;border-radius:20px;font-size:11px;display:inline-block}
.chip.live{background:rgba(196,163,90,.18);color:var(--gold)}
.chip.closed{background:rgba(110,122,138,.22);color:var(--slate)}
.chip.open{background:rgba(110,29,38,.3);color:#d9a7ad}

/* flash */
.flash{padding:10px 14px;border-radius:8px;margin-bottom:14px;font-size:13px}
.flash.ok{background:rgba(196,163,90,.14);border:1px solid var(--gold);
          color:var(--gold)}
.flash.err{background:rgba(110,29,38,.25);border:1px solid var(--ox);
           color:#e2aeb4}

/* login */
.center{max-width:380px;margin:9vh auto;text-align:center}
.center .card{border-top:3px solid var(--gold);padding:30px 26px}
.center input{width:100%;margin:6px 0;min-width:0}
.logo{font-weight:900;font-size:28px;letter-spacing:2px;margin-bottom:4px}
.logo .r{color:var(--ox)}
details{margin:8px 0}
summary{cursor:pointer;color:var(--gold);font-size:13px}