:root{
  --bg:#0c1022; --panel:#121733; --panel-2:#0f1530;
  --text:#e9edff; --muted:#a5afd7; --accent:#7fb5ff;
  --border:#1f2856; --chip:#162049; --btn:#0f1638; --btn-hover:#121b43;
  --sidebar-w: 340px;
}
*{box-sizing:border-box}
html,body,#appRoot{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu}

/* Layout */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;height:100%;transition:grid-template-columns .2s ease}
.app.panel-collapsed{--sidebar-w: 0px}
.main{position:relative}
.map{height:100%;width:100%}

/* Topbar */
.topbar{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px;border:1px solid var(--border);border-radius:10px;background:#0e1433;z-index:500}
.topbar .actions{display:flex;gap:8px}
.only-desktop{display:inline-flex}
.only-mobile{display:none}

/* Buttons */
.btn{border:1px solid var(--border);background:var(--btn);color:var(--text);padding:7px 9px;border-radius:8px;cursor:pointer;transition:background .15s ease, transform .06s ease, border-color .15s ease}
.btn:hover{background:var(--btn-hover)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:var(--border)}
.btn[aria-pressed="true"]{outline:2px solid var(--accent)}

/* Search */
.searchbar{display:flex;align-items:center;gap:6px;padding:4px 6px;border:1px solid var(--border);border-radius:10px;background:var(--btn)}
.searchbar svg{width:18px;height:18px;fill:var(--muted)}
.searchbar input{width:220px;min-width:150px;background:transparent;border:0;outline:none;color:var(--text)}
.searchbar .btn{padding:5px 7px}

/* Sidebar / Drawer */
.sidebar{background:linear-gradient(180deg,var(--panel),var(--panel-2));border-right:1px solid var(--border);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;transition:width .2s ease}
.sidebar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px;border-bottom:1px solid var(--border);background:#101534}
.sidebar-header h1{margin:0;font-size:16px}
.list{position:relative;overflow:auto;padding:8px;display:flex;flex-direction:column;gap:8px}
/* Scroll to top button */
.list-top{position:absolute;bottom:12px;right:12px;opacity:.9}

/* Cards */
@keyframes itemIn{from{transform:translateY(2px);opacity:0}to{transform:translateY(0);opacity:1}}
.monster-item{border:1px solid var(--border);border-radius:10px;background:#0d1433;padding:8px;display:flex;gap:8px;animation:itemIn .18s ease both}
.monster-item.selected{outline:2px solid var(--accent)}
.monster-thumb{width:40px;height:40px;border-radius:8px;overflow:hidden;flex:0 0 auto;display:grid;place-items:center;background:#101a44;border:1px solid var(--border)}
.monster-thumb img{width:28px;height:28px;image-rendering:pixelated}
.monster-body{flex:1;min-width:0}
.monster-title{display:flex;align-items:center;justify-content:space-between;gap:8px}
.monster-title h3{margin:0;font-size:14px;cursor:pointer}
/* Collapsible chips */
.monster-item.collapsed .chips{grid-template-rows:0fr}
.chips{display:grid;grid-template-rows:1fr;transition:grid-template-rows .18s ease}
.chips > *{overflow:hidden}
.chip{font-size:12px;padding:5px 7px;border-radius:999px;border:1px solid var(--border);background:#121a46;color:var(--text);cursor:pointer}
.row-actions{display:flex;gap:6px;margin-top:6px}

/* Leaflet floor control */
.leaflet-control-floor.leaflet-bar a{text-decoration:none;background:#0f1638;color:var(--text);border-bottom:1px solid var(--border)}
.leaflet-control-floor .label{padding:2px 8px;font-weight:700;color:#bfe0ff}

/* Markers */
.leaflet-marker-icon.monster-marker{transition:transform .1s ease, filter .1s ease}
.leaflet-marker-icon.monster-marker:hover{transform:translateY(-1px)}

/* Scrollbar */
.list::-webkit-scrollbar{width:8px}
.list::-webkit-scrollbar-thumb{background:#1b2552;border-radius:8px}

/* Responsive */
@media (max-width: 960px){
  .app{grid-template-columns:1fr}
  .only-mobile{display:inline-flex}
  .only-desktop{display:none}
  .sidebar{position:absolute;z-index:900;height:100%;width:min(92vw,480px);transform:translateX(-105%);transition:transform .2s ease, width .2s ease;box-shadow:0 12px 40px rgba(0,0,0,.45)}
  #drawerToggle:checked ~ .app .sidebar{transform:translateX(0)}
  .searchbar input{width:52vw}
}
mark{background:rgba(127,181,255,.22);color:inherit;padding:0 .12em;border-radius:3px}