/* PICKO Admin — desktop back office in the PICKO navy / blue / gold identity */
body{background:var(--page)}
.shell{display:flex;min-height:100vh}
.side{position:fixed;inset:var(--env-h) auto 0 0;width:232px;background:var(--navy);color:#B9C4EC;display:flex;flex-direction:column;overflow-y:auto;z-index:20}
.side-logo{padding:20px 22px 16px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:baseline;gap:8px}
.side-logo .brand{font-size:22px}
.side-logo small{color:var(--gold);font-weight:800;letter-spacing:2px;font-size:11px;text-transform:uppercase}
#nav{padding:8px 0 24px}
.nav-group{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:#6F7BB0;padding:14px 22px 6px;font-weight:700}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:inherit;text-align:left;padding:9px 22px;cursor:pointer;font-size:13.5px}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.on{background:var(--blue);color:#fff;font-weight:700;box-shadow:inset 3px 0 0 var(--gold)}
.nav-item .n{margin-left:auto;background:var(--gold);color:var(--gold-ink);font-size:11px;border-radius:10px;padding:0 7px;font-weight:800}
.main{margin-left:232px;flex:1;min-width:0;padding:0 28px 40px}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0 16px;position:sticky;top:var(--env-h);background:var(--page);z-index:10}
.topbar h1{font-size:21px}
.top-right{display:flex;align-items:center;gap:14px;font-size:13px;color:var(--sub)}
.clock{background:#fff;border-radius:8px;padding:5px 10px;box-shadow:var(--shadow);color:var(--ink);font-weight:600}
.view>*+*{margin-top:16px}
.toolbar{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.toolbar .field{min-width:130px}
.toolbar .grow{flex:1}
.row-actions{display:flex;gap:6px;flex-wrap:wrap}
.table-wrap{overflow:auto;max-height:70vh;border-radius:10px}
.section-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.section-h h3{margin:0}
.note{background:#FFF8EC;border-left:4px solid var(--gold);padding:10px 12px;border-radius:0 8px 8px 0;font-size:12.5px;color:#6B4E0E}
.note.info{background:#EEF2FF;border-color:var(--blue);color:var(--blue-deep)}
.num-big{font-size:18px;font-weight:800;letter-spacing:3px;font-family:var(--mono)}
.todo li{list-style:none;padding:8px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.todo li:last-child{border:0}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:1100px){.two,.three{grid-template-columns:1fr}}

/* config center */
.steps{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.tabs{display:flex;gap:4px;border-bottom:1.5px solid var(--line);margin-bottom:14px}
.tab{border:0;background:none;padding:10px 14px;font-weight:700;color:var(--sub);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px}
.tab.on{color:var(--blue);border-color:var(--blue)}
.bt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.bt-card{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:#fff}
.bt-card.on{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,63,212,.1)}
.bt-card .h{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;font-size:12.5px}
.kv dt{color:var(--sub)} .kv dd{font-weight:700;font-variant-numeric:tabular-nums}
.cfg-form{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.cfg-form h4{margin-bottom:10px}
.pill{display:inline-block;background:var(--gray-bg);border-radius:6px;padding:1px 7px;font-size:12px;margin:1px 2px 1px 0}

/* hierarchy tree */
.tree ul{list-style:none;margin-left:18px;border-left:1.5px dashed var(--line);padding-left:12px}
.tree>ul{margin-left:0;border:0;padding:0}
.tree li{margin:4px 0}
.node{display:inline-flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;cursor:pointer;border:0;background:none;text-align:left}
.node:hover{background:#EEF2FF}
.node .role{font-size:10.5px;font-weight:800;letter-spacing:.5px;padding:1px 6px;border-radius:5px;text-transform:uppercase}
.role.area{background:var(--navy);color:#fff}.role.coordinator{background:var(--gold);color:var(--gold-ink)}.role.teller{background:var(--blue);color:#fff}.role.player{background:var(--gray-bg);color:var(--gray)}
details>summary{cursor:pointer}
pre.json{background:#F6F8FC;border-radius:8px;padding:10px;font-size:11.5px;max-height:260px;overflow:auto;white-space:pre-wrap;word-break:break-word}