/* Server dashboard (panel): home, "Your server", sidebar pages. Brand green from the logo. Loaded after style.css. */
.pnl {
  --g: #0afc07; --g2: #3dff3a; --gt: rgba(10, 252, 7, .12); --gl: rgba(10, 252, 7, .28);
  --pc: #121315; --pc2: #17181b; --pl: rgba(255, 255, 255, .075); --pl2: rgba(255, 255, 255, .12);
  --pt: #f2f3f5; --pm: #8d929b; --pr: #f05252; --pb: #4d9bff;
  padding: 18px 0 72px; color: var(--pt);
}
body:has(.pnl) { background: #0d0e10; background-image: radial-gradient(900px 500px at 85% -10%, rgba(10, 252, 7, .06), transparent 60%); }
body.pside .wrap { width: min(1440px, 100% - 32px); }
.pnl h1 { font-size: 30px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.pnl h2 { font-size: 18px; font-weight: 650; margin: 0; }
.pnl b { font-weight: 600; }
.pnl .phint { color: var(--pm); font-size: 13px; margin: 6px 0 0; }
.pnl .phint.c, .pnl .plink.c { text-align: center; }
.pnl .pdim { color: var(--pm); font-size: 12.5px; }
.pnl .pl { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 7px; color: var(--pt); }
.pnl .pl i, .pmodal .pl i { color: var(--pr); font-style: normal; }
.pnl .pst { display: block; font-size: 14px; margin: 0 0 6px; }

/* fields */
.pnl input[type=text], .pnl input[type=search], .pnl input[type=password], .pnl select, .pnl textarea, .pmodal input[type=text], .pmodal select, .pmodal textarea {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--pl2);
  background: #0f1012; color: var(--pt); font-family: inherit; font-weight: 400; font-size: 14px; line-height: 1.2; outline: 0; }
.pnl textarea, .pmodal textarea { height: auto; padding: 10px 14px; }
.pnl input:focus, .pnl select:focus, .pmodal input:focus, .pmodal select:focus { border-color: var(--g); box-shadow: 0 0 0 3px rgba(10, 252, 7, .14); }
.pnl input:disabled, .pnl select:disabled { opacity: .6; }
.pnl select, .pmodal select { appearance: none; -webkit-appearance: none; padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238d929b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.pnl .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* buttons */
.pb { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 12px; border: 0;
  background: #1c1d21; color: var(--pt); font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, filter .15s; }
.pb:hover { background: #24262b; }
.pb.pri { background: var(--g); color: #031a03; }
.pb.pri:hover { filter: brightness(1.08); background: var(--g); }
.pb.soft, .pb.blue { background: var(--gt); color: var(--g2); }
.pb.soft:hover, .pb.blue:hover { background: rgba(10, 252, 7, .2); }
.pb.ghost { background: transparent; color: var(--pm); }
.pb.ghost:hover { color: var(--pt); background: rgba(255, 255, 255, .05); }
.pb.red { background: rgba(240, 82, 82, .12); color: #ff7070; }
.pb.red:hover { background: rgba(240, 82, 82, .2); }
.pb.sm { height: 32px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.pb.wide { width: 100%; }
.pb:disabled { opacity: .45; cursor: default; filter: none; }
.piconb { width: 34px; height: 34px; display: inline-grid; place-items: center; border-radius: 10px; border: 1px solid var(--pl); background: #16171a; color: #c9ccd2; cursor: pointer; }
.piconb:hover { background: #1e2024; color: #fff; } .piconb.red { color: #ff7070; } .piconb:disabled { opacity: .35; cursor: default; }
.plink { background: none; border: 0; color: var(--pm); font-family: inherit; font-weight: 500; font-size: 13px; cursor: pointer; text-decoration: none; padding: 6px; }
.plink:hover { color: var(--pt); }
.pnl .pacts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pnl .prow { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.pnl .prow.left { flex-wrap: wrap; } .pnl .prow > input { flex: 1; }
.pnl .pmsg { font-size: 13px; margin: 10px 0 0; min-height: 0; } .pmsg:empty { display: none; } .pmsg.ok { color: var(--g2); } .pmsg.err { color: #ff7070; }

/* cards */
.pc { background: var(--pc); border: 1px solid var(--pl); border-radius: 18px; margin-bottom: 18px; overflow: visible; }
.pch { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 20px 22px 16px; }
.pch p { margin: 4px 0 0; color: var(--pm); font-size: 13.5px; max-width: 760px; }
.pcb { padding: 18px 22px 22px; border-top: 1px solid var(--pl); }
.psep { height: 1px; background: var(--pl); margin: 18px 0; }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--pl); }
.srow:first-child { padding-top: 0; } .srow:last-of-type { border-bottom: 0; padding-bottom: 0; }
.srow > div { display: grid; gap: 3px; } .srow > div > b { font-size: 14px; } .srow > div > span { color: var(--pm); font-size: 12.5px; }
.srow select { width: 200px; flex: none; }
.tg { position: relative; width: 44px; height: 26px; flex: none; border-radius: 99px; border: 0; background: #2a2c31; cursor: pointer; transition: background .15s; padding: 0; }
.tg i { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s; }
.tg.on { background: var(--g); } .tg.on i { transform: translateX(18px); } .tg:disabled { opacity: .4; cursor: default; }
.pinfo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; margin-top: 14px; border-radius: 14px; background: rgba(10, 252, 7, .06); border: 1px solid rgba(10, 252, 7, .2); }
.pinfo svg { color: var(--g2); flex: none; margin-top: 2px; } .pinfo > div { display: grid; gap: 4px; justify-items: start; } .pinfo > div > span, .pinfo > span { color: #c9ccd2; font-size: 13px; } .pinfo .pb { margin-top: 6px; }
.pplus { display: inline-block; padding: 2px 7px; border-radius: 6px; background: rgba(240, 192, 80, .14); color: #f0c050; font-family: inherit; font-weight: 700; font-size: 10.5px; line-height: 1.3; letter-spacing: .04em; vertical-align: 2px; }
.pempty { display: grid; justify-items: center; gap: 8px; padding: 34px 16px; text-align: center; }
.pempty > svg { color: var(--pm); } .pempty > span { color: var(--pm); font-size: 13.5px; max-width: 420px; } .pempty .pacts { margin-top: 6px; justify-content: center; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ppc { padding: 3px 9px; border-radius: 99px; background: #1e2024; color: #c9ccd2; font-size: 11.5px; font-weight: 600; }
.pdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex: none; } .pdot.big { width: 14px; height: 14px; }
.ptoast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); opacity: 0; z-index: 99; padding: 12px 18px; border-radius: 12px; background: #1b1d21; border: 1px solid var(--gl, rgba(10,252,7,.3)); color: #f2f3f5; font-size: 14px; transition: .2s; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.ptoast.on { opacity: 1; transform: translate(-50%, 0); }
.confetti { position: fixed; inset: 0; z-index: 98; pointer-events: none; }

/* home */
.phome-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0 22px; flex-wrap: wrap; }
.phello { display: flex; align-items: center; gap: 16px; }
.pav { position: relative; display: inline-grid; place-items: center; border-radius: 50%; overflow: hidden; background: #22252b; color: #c9ccd2; font-size: 12px; font-weight: 700; flex: none; }
.pav img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pnext { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; margin-bottom: 18px; border-radius: 16px; background: var(--pc); border: 1px solid var(--pl); flex-wrap: wrap; }
.pnext > div:first-child { display: grid; gap: 3px; } .pnext > div > span { color: var(--pm); font-size: 13px; }
.pvt { display: flex; gap: 4px; }
.pvb { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; border: 0; background: none; color: var(--pm); cursor: pointer; }
.pvb.on { background: #1e2024; color: var(--pt); }
.pslist { display: grid; gap: 12px; }
.psgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.psrv { display: flex; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--pl); background: #0f1012; }
.psgrid .psrv { flex-direction: column; align-items: flex-start; }
.psmeta { flex: 1; display: grid; gap: 5px; min-width: 0; }
.psname { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .psname b { font-size: 16px; }
.psname em { font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; padding: 2px 8px; border-radius: 99px; background: #1e2024; color: #c9ccd2; text-transform: uppercase; }
.psname em.t-owner { background: var(--gt); color: var(--g2); } .psname em.t-plus { background: rgba(240,192,80,.14); color: #f0c050; }
.psub { display: inline-flex; align-items: center; gap: 6px; color: var(--pm); font-size: 13px; }
.nlogo.ps { width: 56px; height: 56px; border-radius: 16px; font-size: 20px; }
.nlogo.sm { width: 38px; height: 38px; border-radius: 11px; font-size: 14px; }
.nlogo.xs { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; border-width: 0; }
.nlogo.md { width: 48px; height: 48px; border-radius: 14px; font-size: 17px; }

/* create */
.pcreate { width: min(440px, 100%); margin: 40px auto; display: grid; }
.pcreate h1 { text-align: center; margin-top: 8px; }
.pcreate .pclogo { height: 40px; justify-self: center; }
.pcreate .pb.wide { margin-top: 22px; height: 44px; }
.pcreate .plink { margin-top: 14px; justify-self: center; }
.plrow { display: flex; align-items: flex-end; justify-content: space-between; } .plrow .piconb { width: 30px; height: 30px; border: 0; background: none; color: var(--pm); margin-bottom: 2px; }
.pselwrap { position: relative; }
.pselect { width: 100%; height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; border-radius: 12px; border: 1px solid var(--pl2); background: #0f1012; color: var(--pm); font-family: inherit; font-weight: 400; font-size: 14px; cursor: pointer; text-align: left; }
.pselect.chosen { color: var(--pt); } .pselect:focus { border-color: var(--g); outline: 0; }
.pdrop { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); max-height: 320px; overflow: auto; padding: 6px; border-radius: 14px; border: 1px solid var(--pl2); background: #141518; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); }
.pdo { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; border-radius: 10px; background: none; color: #d6d8dc; font-family: inherit; font-weight: 400; font-size: 14px; text-align: left; cursor: pointer; text-decoration: none; }
.pdo:hover { background: #1c1d21; } .pdo.on { background: var(--gt); color: var(--g2); } .pdo.off { opacity: .45; cursor: default; } .pdo.off:hover { background: none; }
.pdo.add { color: var(--g2); border-top: 1px solid var(--pl); border-radius: 0 0 10px 10px; margin-top: 4px; }
.pdo svg:last-child { margin-left: auto; }
.pgi { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: #23262c; color: #c9ccd2; font-size: 10.5px; font-weight: 700; flex: none; }
.prmenu { position: fixed; width: 220px; right: auto; }

/* sidebar shell */
.pshell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.pnav { position: sticky; top: 14px; display: grid; gap: 2px; padding: 10px; border-radius: 18px; background: var(--pc); border: 1px solid var(--pl); max-height: calc(100vh - 28px); overflow: auto; }
.pswitch { position: relative; margin-bottom: 6px; }
.pswb { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: 12px; border: 0; background: #17181b; color: var(--pt); cursor: pointer; text-align: left; }
.pswb:hover { background: #1d1f23; } .pswb > div:not(.nlogo) { flex: 1; min-width: 0; display: grid; } .pswb b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pswb span { color: var(--pm); font-size: 11.5px; }
.pnh { padding: 14px 10px 6px; color: var(--pm); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pni { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 10px; color: #c9ccd2; text-decoration: none; font-size: 14px; font-weight: 500; }
.pni svg { color: var(--pm); } .pni:hover { background: #1a1b1e; color: #fff; }
.pni.on { background: var(--gt); color: var(--g2); } .pni.on svg { color: var(--g2); }
.pnfoot { padding: 12px 4px 4px; margin-top: 8px; border-top: 1px solid var(--pl); }
.pmain { min-width: 0; }
.pph { margin: 4px 0 20px; } .pph p { color: var(--pm); margin: 6px 0 0; font-size: 14px; }

/* checklist */
.pchk .pch > div { display: grid; gap: 4px; }
.pclc { color: var(--pm); font-size: 13px; }
.pcl { display: grid; gap: 10px; }
.pcs { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--pl); background: #0f1012; }
.pcs > div { flex: 1; display: grid; gap: 2px; } .pcs > div > span { color: var(--pm); font-size: 12.5px; }
.pcn { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--pl2); flex: none; font-size: 12px; }
.pcs.done .pcn { background: var(--g); border-color: var(--g); color: #031a03; }
.pcs.done > div b { text-decoration: line-through; color: var(--pm); }

/* general */
.pcode { display: inline-block; padding: 10px 14px; border-radius: 10px; background: #0f1012; border: 1px solid var(--pl); font: 600 16px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .04em; color: var(--pt); }
.pbrand { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.pbside { flex: 1; min-width: 260px; display: grid; gap: 6px; }
.pban { height: 90px; border-radius: 14px; border: 1px solid var(--pl); margin-top: 8px; }
.pban::after { display: none; }
.pdz { border-color: rgba(240, 82, 82, .3); }
.pdz h2 { color: #ff7070; }

/* members / roles table */
.ptools { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.ptools select { width: 170px; flex: none; }
.psearch { flex: 1; min-width: 220px; position: relative; display: flex; align-items: center; }
.psearch svg { position: absolute; left: 13px; color: var(--pm); } .psearch input { padding-left: 38px !important; }
.ptable { margin-top: 8px; border: 1px solid var(--pl); border-radius: 14px; overflow: hidden; }
.ptr { display: grid; grid-template-columns: minmax(200px, 1.3fr) minmax(160px, 1.5fr) 120px 90px; gap: 12px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--pl); background: #0f1012; }
.ptr.th { border-top: 0; background: #141518; color: var(--pm); font-size: 12.5px; font-weight: 600; }
.ptr.none { grid-template-columns: 1fr; color: var(--pm); text-align: center; }
.ptr > .pacts { justify-content: flex-end; }
.pu { display: flex; align-items: center; gap: 10px; min-width: 0; } .pu > span:last-child { display: grid; min-width: 0; } .pu b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pu small { color: var(--pm); font-size: 12px; }
.prc { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; background: color-mix(in srgb, var(--rc, #888) 16%, #0f1012); color: color-mix(in srgb, var(--rc, #888) 70%, #fff); font-size: 12px; font-weight: 600; border: 0; }
.prc i { width: 7px; height: 7px; border-radius: 50%; background: var(--rc); }
.prc.adm { background: var(--gt); color: var(--g2); }
.prc.add { width: 24px; padding: 0; justify-content: center; background: #1e2024; color: #c9ccd2; cursor: pointer; }
.prc.add:hover { background: #26282d; color: #fff; }
.pcrown { color: #f0c050; display: inline-grid; }
.prl { display: grid; gap: 10px; margin-top: 8px; }
.prr { display: grid; grid-template-columns: 18px minmax(140px, 220px) 1fr auto; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--pl); background: #0f1012; }
.prn { display: grid; gap: 2px; }
.pswatch { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.psw { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.psw.on { border-color: #fff; box-shadow: 0 0 0 2px #0f1012 inset; }
.pswatch input[type=color] { width: 34px; height: 30px; padding: 0; border: 1px solid var(--pl2); border-radius: 8px; background: none; cursor: pointer; }
.pperms { display: grid; gap: 8px; }
.pperm { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--pl); background: #0f1012; }
.pperm > div { flex: 1; display: grid; gap: 2px; } .pperm > div > span { color: var(--pm); font-size: 12.5px; } .pperm.lock { opacity: .6; }
.ppi { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #1a1b1f; color: #c9ccd2; flex: none; }

/* integrations */
.pdisc { display: flex; align-items: center; gap: 14px; } .pdisc > div { display: grid; gap: 2px; }
.psteps { margin: 0 0 6px; padding: 14px 16px 14px 34px; border-radius: 14px; border: 1px solid var(--pl); background: #0f1012; color: #c9ccd2; font-size: 13.5px; display: grid; gap: 6px; }
.pembed { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; }
.pembed > h2, .pembed > p.hint:first-of-type { display: none; }
.pembed .keybox { background: #0f1012; border-color: var(--pl); }

/* departments */
.pdg { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.pdc { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; border: 1px solid var(--pl); background: #0f1012; }
.pdm { flex: 1; min-width: 0; display: grid; gap: 6px; } .pdm b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdl { position: relative; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: #1c1e23; color: #e6e7ea; font-size: 12px; font-weight: 800; flex: none; }
.pdl img { width: 100%; height: 100%; object-fit: cover; } .pdl.lg { width: 72px; height: 72px; border-radius: 18px; font-size: 15px; }
.pdlprev { display: flex; align-items: center; gap: 14px; }
.ppc.t-police, .ppc.t-sheriff, .ppc.t-state { background: rgba(77, 155, 255, .14); color: #7db6ff; }
.ppc.t-fire { background: rgba(255, 120, 60, .14); color: #ff9a66; } .ppc.t-ems { background: rgba(240, 82, 82, .14); color: #ff8080; }
.ppc.t-dot { background: rgba(245, 165, 36, .14); color: #f5b041; } .ppc.t-dispatch { background: var(--gt); color: var(--g2); }
.pfake { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--pl); background: #0f1012; color: var(--pm); }

/* customize */
.pg2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.pg2 .pl { margin-top: 12px; }
.ptc { display: grid; gap: 8px; margin: 14px 0 4px; }
.ptcr { display: grid; grid-template-columns: 30px 130px 1fr auto; gap: 10px; align-items: center; }
.ptcr .pacts { gap: 6px; }

/* old panels shown inside cards: same look */
.pnl .btn { border-radius: 12px; font-weight: 600; box-shadow: none; }
.pnl .btn-primary { background: var(--g); color: #031a03; border-color: var(--g); }
.pnl .btn-ghost { border-color: var(--pl2); }
.pnl .btn-danger { color: #ff7070; border-color: rgba(240, 82, 82, .4); }
.pnl .panel { background: var(--pc); border: 1px solid var(--pl); border-radius: 18px; padding: 22px; }
.pnl .panel h2 { font-size: 18px; }
.pnl .code { border-radius: 10px; }
.pnl .msg.ok { color: var(--g2); }

/* modal */
.player { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .6); backdrop-filter: blur(3px); }
.pmodal { width: min(480px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; border-radius: 20px; border: 1px solid var(--pl2, rgba(255,255,255,.12)); background: #121315; color: #f2f3f5; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.pmodal.wide { width: min(600px, 100%); }
.pmodal h2 { margin: 0; padding: 22px 22px 6px; font-size: 22px; font-weight: 650; }
.pmb { padding: 4px 22px 18px; overflow: auto; }
.pmodal footer { padding: 14px 16px; border-top: 1px solid rgba(255, 255, 255, .08); }
.pmodal footer .pacts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pmodal footer .pb { width: 100%; }
.pmodal .pl { display: block; font-size: 13px; font-weight: 600; margin: 16px 0 7px; }
.pmodal .phint { color: #8d929b; font-size: 12.5px; margin: 6px 0 0; }
.pmodal .pmsg { font-size: 13px; margin: 10px 0 0; } .pmodal .pmsg.err { color: #ff7070; } .pmodal .pmsg.ok { color: #3dff3a; }
.pmodal { --g: #0afc07; --g2: #3dff3a; --gt: rgba(10, 252, 7, .12); --pl: rgba(255,255,255,.075); --pl2: rgba(255,255,255,.12); --pm: #8d929b; --pt: #f2f3f5; --pr: #f05252; }
.pmodal input[type=text], .pmodal select { width: 100%; box-sizing: border-box; height: 40px; padding: 0 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); background: #0f1012; color: #f2f3f5; font-family: inherit; font-weight: 400; font-size: 14px; outline: 0; }
.pmodal input:focus, .pmodal select:focus { border-color: #0afc07; }
.pmodal .panel { background: none; border: 0; padding: 0; margin: 0; } .pmodal .panel > h2 { display: none; }

@media (max-width: 900px) {
  .pshell { grid-template-columns: 1fr; gap: 16px; }
  .pnav { position: static; max-height: none; }
  .ptr { grid-template-columns: 1fr auto; } .ptr > :nth-child(2), .ptr > :nth-child(3) { grid-column: 1 / -1; } .ptr.th { display: none; }
  .prr { grid-template-columns: 18px 1fr auto; } .prr .pchips { grid-column: 1 / -1; }
  .pg2 { grid-template-columns: 1fr; } .ptcr { grid-template-columns: 24px 90px 1fr; } .ptcr .pacts { grid-column: 2 / -1; }
  .psrv { flex-wrap: wrap; } .srow { flex-wrap: wrap; } .srow select { width: 100%; }
}

/* ===== round 2: records group, DMV, bodycam, acts, suspensions, departments ===== */
.pngr { width: 100%; border: 0; background: none; cursor: pointer; font-family: inherit; text-align: left; }
.pngr svg:last-child { margin-left: auto; transition: transform .15s; } .pngr.open svg:last-child { transform: rotate(180deg); }
.pnkids { display: grid; gap: 2px; margin: 2px 0 4px 20px; padding-left: 10px; border-left: 1px solid var(--pl); }
.pni.sub { padding: 7px 10px; font-size: 13.5px; }
.punit { position: relative; display: flex; align-items: center; width: 220px; flex: none; }
.punit input { padding-right: 60px !important; }
.punit span { position: absolute; right: 12px; color: var(--pm); font-size: 12px; pointer-events: none; }
.pclass { display: grid; gap: 8px; justify-items: end; max-width: 420px; } .pclass .prow { margin: 0; } .pclass input { width: 180px; }
.ppc.rm { display: inline-flex; align-items: center; gap: 4px; padding-right: 4px; }
.ppc.rm button { display: grid; place-items: center; width: 18px; height: 18px; border: 0; border-radius: 50%; background: none; color: var(--pm); cursor: pointer; padding: 0; }
.ppc.rm button:hover { background: #2a2c31; color: #fff; }
.pdq { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--pl); border-radius: 14px; background: #0f1012; margin-top: 8px; }
.pdq > div:first-child { display: grid; gap: 2px; }
.pacts-list { display: grid; gap: 10px; margin-top: 12px; }
.pact { padding: 12px 14px 14px; border: 1px solid var(--pl); border-radius: 14px; background: #0f1012; }
.pacth { display: flex; align-items: center; justify-content: space-between; } .pacth .piconb { width: 28px; height: 28px; }
.pg4 { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr; gap: 0 10px; } .pg4 .pl { margin: 8px 0 5px; font-size: 12px; } .pg4 input, .pg4 select { height: 36px; }
.psusr { display: grid; grid-template-columns: 120px 1fr 200px auto; gap: 10px; align-items: center; } .psusr .punit { width: auto; }
.prow.end { justify-content: flex-end; }
/* My Departments */
.pdeps { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pdep { display: grid; gap: 10px; padding: 16px; border: 1px solid var(--pl); border-radius: 16px; background: #0f1012; }
.pdepb { height: 64px; border-radius: 12px; background: linear-gradient(135deg, rgba(10, 252, 7, .1), transparent 70%), #141518; display: flex; align-items: center; padding: 0 12px; }
.pdepm { display: grid; gap: 3px; }
.pdc .pdm, .pdopen { text-decoration: none; color: inherit; } .pdc .pdm:hover b { color: var(--g2); }
.pdl.md { width: 44px; height: 44px; border-radius: 12px; }
/* department page */
.pdept { display: grid; gap: 16px; }
.pdh { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pdhl { display: flex; align-items: center; gap: 12px; } .pdhl > div { display: grid; gap: 2px; } .pdhl b { font-size: 20px; }
.pdtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; border: 1px solid var(--pl); border-radius: 16px; background: var(--pc); }
.pdtabs a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; border-radius: 11px; color: #c9ccd2; text-decoration: none; font-size: 14px; font-weight: 500; }
.pdtabs a:hover { background: #1a1b1e; color: #fff; } .pdtabs a.on { background: var(--gt); color: var(--g2); }
.pdgrid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.pdleft, .pdright { display: grid; gap: 14px; }
.pc.pad { padding: 16px; margin: 0; display: grid; gap: 10px; }
.pc.pad .pu > span:last-child { gap: 2px; }
.pmins { display: flex; align-items: baseline; gap: 6px; } .pbig { font-size: 34px; font-weight: 700; line-height: 1; }
.pabout { margin: 0; color: #c9ccd2; font-size: 13.5px; white-space: pre-wrap; }
.pfeed { display: grid; gap: 14px; }
.ppost { display: flex; gap: 12px; } .ppost > div { flex: 1; min-width: 0; } .ppost p { margin: 4px 0 0; color: #d6d8dc; font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.pph2 { display: flex; align-items: center; gap: 8px; } .pph2 .plink { margin-left: auto; padding: 0; font-size: 12px; }
.pstats { display: flex; gap: 10px; margin-bottom: 12px; } .pstats > div { display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--pl); border-radius: 12px; background: #0f1012; min-width: 90px; }
.pstats span { color: var(--pm); font-size: 12px; } .pstats b { font-size: 20px; }
.pst2 { display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: #1e2024; color: #c9ccd2; }
.pst2.on { background: var(--gt); color: var(--g2); } .pst2.act { background: rgba(77, 155, 255, .14); color: #7db6ff; } .pst2.off { background: rgba(245, 165, 36, .14); color: #f5b041; }
.ptable.act .ptr { grid-template-columns: minmax(200px, 1.5fr) 120px 140px 110px; }
.ptable.roster .ptr { grid-template-columns: minmax(200px, 1.4fr) 1fr 130px 120px 50px; } .ptable.roster input { height: 34px; }
.psavebar { position: sticky; bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 14px; border: 1px solid var(--pl2); border-radius: 16px; background: rgba(18, 19, 21, .95); }
.psavebar .pmsg { margin: 0; }
.pdept .pc { margin-bottom: 0; }
@media (max-width: 900px) {
  .pdgrid { grid-template-columns: 1fr; } .pdtabs { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .pg4 { grid-template-columns: 1fr 1fr; } .psusr { grid-template-columns: 1fr 1fr; } .punit { width: 100%; }
  .ptable.act .ptr, .ptable.roster .ptr { grid-template-columns: 1fr 1fr; }
}

/* ===== "Open the CAD" chooser ===== */
.pcad { min-height: calc(100vh - 140px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; padding: 20px 0 40px; }
.pcadlogo { display: flex; align-items: center; gap: 14px; }
.pcadlogo img { height: 44px; width: auto; }
.pcadlogo span { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; color: var(--g); }
.pcadrow { display: flex; flex-wrap: nowrap; justify-content: center; gap: 16px; max-width: 1200px; width: 100%; }
.pcadc { position: relative; flex: 0 1 210px; min-width: 0; width: 210px; aspect-ratio: 210 / 330; height: auto; padding: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--pl2); background: #141518; color: var(--pt); cursor: pointer; text-align: left; font-family: inherit; transition: transform .15s, border-color .15s; }
.pcadc:hover, .pcadc:focus-visible { transform: translateY(-4px); border-color: var(--g); outline: 0; }
.pcadart { position: absolute; right: -8px; bottom: 0; height: 100%; width: auto; pointer-events: none; }
.pcadmark { position: absolute; inset: 0; display: none; place-items: center; font-size: 46px; font-weight: 800; color: rgba(255, 255, 255, .07); letter-spacing: -0.02em; }
.pcadmark.on { display: grid; }
.pcadshade { position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(0deg, rgba(20, 21, 24, .9), rgba(20, 21, 24, 0)); }
.pcadt { position: absolute; top: 16px; left: 16px; right: 16px; font-size: 22px; font-weight: 800; line-height: 1.15; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.pcado { position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; }
.pcado i { width: 8px; height: 8px; border-radius: 50%; background: #5d6168; } .pcado i.on { background: var(--g); }
.pcadfoot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pcadsrv { display: flex; align-items: center; gap: 8px; color: #d6d8dc; font-weight: 600; }
@media (max-width: 700px) { .pcadrow { gap: 10px; justify-content: flex-start; overflow-x: auto; padding: 4px 16px 10px; scroll-snap-type: x mandatory; } .pcadc { flex: 0 0 150px; width: 150px; border-radius: 16px; scroll-snap-align: start; } .pcadt { font-size: 18px; top: 12px; left: 12px; } .pcado { left: 12px; bottom: 12px; font-size: 12.5px; } .pcadlogo span { font-size: 30px; } }
/* Economy page */
.pnl .pgive { display: grid; gap: 10px; max-width: 520px; }
.pnl .pgive > input, .pnl .pgive .prow input { flex: 1; }
.pnl .pgive .prow { margin: 0; } .pnl .pgive .prow select { width: 120px; }
.pnl .pres { display: grid; gap: 4px; } .pnl .pres .pdo { display: flex; justify-content: space-between; width: 100%; }
.pnl .ppick { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pl2); } .pnl .ppick b { display: block; } .pnl .ppick[hidden] { display: none; }