html, body { height:100%; min-height:100%; margin:0; overflow:auto; overflow-x:hidden; }
      :root { --bg:#f3f6fa; --surface:#ffffff; --surface-2:#f8fafc; --border:rgba(15,23,42,.08); --text:#0f172a; --muted:#64748b; }
      /* Minimal, reuse brand vars from style.css */
      .admin-wrap { display:block; min-height:100vh; width:100%; background: var(--bg); color: var(--text); }
      /* Login card style to match login.html */
      .login-card { background: rgba(26,40,56,0.95); color:#fff; border:1px solid rgba(255,255,255,0.25); border-radius:12px; padding:18px; width: min(420px, 92vw); margin: 40px auto; }
      .login-card h2 { margin: 0 0 10px 0; font-size: 20px; color:#fff; }
      .login-card label { display:block; font-size:13px; margin: 10px 0 6px; color:#fff; }
      .login-card input { width:100%; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.25); background: rgba(0,0,0,0.25); color:#fff; }
      .login-card .row button { width:100%; margin-top:12px; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.5); cursor:pointer; background: var(--brand-primary); color:#fff; }
      .card { background: transparent; color: var(--text); border:0; border-radius:12px; padding:18px; width: 100%; box-sizing: border-box; }
      h1 { margin: 0 0 10px 0; font-size: 20px; }
      .muted { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
      label { display:block; font-size:13px; margin: 10px 0 6px; }
      input { width:100%; padding:10px; border-radius:8px; border:1px solid var(--border); background: var(--surface); color: var(--text); }
      .row { display:flex; gap:8px; margin-top:12px; flex-wrap: wrap; }
      .row > input, .row > select { flex:1 1 0; width:auto; min-width:0; }
      button { flex:1; padding:10px; border-radius:8px; border:1px solid rgba(255,255,255,0.5); cursor:pointer; background: var(--admin-accent, var(--brand-primary)); color:#fff; }
      .secondary { background: var(--surface-2); color: var(--text); border:1px solid var(--border); }
      .danger { background: var(--color-danger-hover); }
      .btn-ghost { background: var(--surface-2); color: var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 10px; }
      .btn-danger { background: var(--color-danger); color:#fff; border:1px solid rgba(0,0,0,.08); border-radius:8px; padding:6px 10px; }
      .links { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
      .links a { background: var(--surface); color: var(--text); padding:8px 10px; border-radius:8px; border:1px solid var(--border); text-decoration:none; }
      .ok { color:var(--color-success); font-size:13px; margin-top:8px; display:none; }
      .err { color: var(--color-danger); font-size:13px; margin-top:8px; display:none; }
      /* Enhanced dashboard look */
      .admin-wrap { padding: 0; }
      .card { position: relative; width: 100%; max-width: 100%; border-radius:16px; padding:22px; --admin-accent: var(--brand-primary); }
      .card.accent-green { --admin-accent: var(--color-success); }
      h1 { font-size:22px; letter-spacing:.3px; }
      input, select { outline:none; transition: box-shadow .2s, border-color .2s; }
      input:focus, select:focus { border-color: rgba(25,146,180,.9); box-shadow: 0 0 0 3px rgba(25,146,180,.25); }
      button { border-radius:10px; transition: transform .05s ease-in, filter .15s; }
      button:hover { filter: contrast(1.05) brightness(1.05); }
      button:active { transform: translateY(1px); }
      .danger { background: linear-gradient(180deg, var(--color-danger), var(--color-danger-hover)); }
      .links a { border-radius:999px; padding:8px 12px; border:1px solid var(--border); }
      .grid { display:grid; grid-template-columns: repeat(12, 1fr); gap: 14px; margin-top:12px; }
      .section { background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:14px; box-shadow: 0 6px 16px rgba(15,23,42,.06); }
      .section h2 { margin: 0 0 8px; font-size:16px; color: var(--text); }
      .section h3 { color: var(--text); }
      .main h1 { color: var(--text); }
      /* Top header bar */
      .topbar { position: sticky; top: 0; z-index: 6; background: var(--surface); border-bottom:1px solid var(--border); padding: 10px 12px; box-shadow: 0 6px 16px rgba(15,23,42,.06); display:grid; grid-template-columns: 220px minmax(0, 320px) auto; gap:12px; align-items:center; margin-bottom: 8px; }
      .topbar { padding-top: calc(10px + var(--safe-top, 0px)); }
      .topbar .brand { font-weight:800; letter-spacing:.2px; }
      .topbar .search { position:relative; width:100%; max-width: 320px; justify-self: start; }
      .topbar .search input { display:block; width:100%; max-width: 320px; padding:10px 12px 10px 34px; border:1px solid var(--border); border-radius:10px; background: var(--surface-2); color: var(--text); }
      /* Search glyph replaced with an inline Lucide SVG so icon rendering is
         consistent across platforms and respects theme colors. */
      .topbar .search::before { content:''; position:absolute; left:10px; top:50%; width:16px; height:16px; transform:translateY(-50%); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.35-4.35'/></svg>"); background-repeat:no-repeat; background-size:16px 16px; opacity:.8; pointer-events:none; }
      .topbar .actions { display:flex; gap:8px; align-items:center; justify-self: end; }
      .pill { background: var(--surface-2); border:1px solid var(--border); border-radius:999px; padding:6px 10px; font-size:12px; color: var(--text); }
      .cards { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
      .card-mini { background: var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px; box-shadow: 0 6px 16px rgba(15,23,42,.06); }
      .card-mini .metric { font-size:24px; font-weight:700; }
      .list .row { display:flex; align-items:center; gap:10px; padding:6px 0; border-bottom:1px dashed var(--border); }
      .list .name { flex:0 0 160px; opacity:.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
      .list .bar { flex:1; height:8px; border-radius:999px; background: var(--surface-2); border:1px solid var(--border); position:relative; }
      .list .bar > i { position:absolute; left:0; top:0; bottom:0; border-radius:999px; background: linear-gradient(90deg, var(--admin-accent, var(--brand-primary)), rgba(25,146,180,.7)); }
      .list .val { width:48px; text-align:right; opacity:.85; }
      .list .row:last-child { border-bottom: none; }
      
      .muted { color: var(--muted); }

      /* Charts */
      .chartbox { position: relative; width: 100%; height: 220px; }
      .chartbox.h200 { height: 200px; }
      .chartbox.h220 { height: 220px; }
      .chartbox canvas { position:absolute; inset:0; width:100% !important; height:100% !important; }

      /* Activity feed */
      .feed { display:flex; flex-direction:column; gap:6px; }
      .feed .it { display:grid; grid-template-columns: 18px 1fr auto; align-items:start; gap:10px; padding:8px 10px; border-bottom:1px dashed var(--border); }
      .feed .ic { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; }
      .feed .txt { color: var(--text); font-size: 13px; }
      .feed .meta { color: var(--muted); font-size: 12px; }
      .badge { display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; border:1px solid var(--border); background: var(--surface-2); color: var(--text); }
      .badge.ev { background: rgba(25,146,180,.12); border-color: rgba(25,146,180,.25); }

      /* World map dots */
      .worldmap { position: relative; width: 100%; aspect-ratio: 2 / 1; background: #0b2540 url('https://upload.wikimedia.org/wikipedia/commons/8/80/World_map_-_low_resolution.svg') center/cover no-repeat; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
      .worldmap .dot { position:absolute; width:12px; height:12px; border-radius:50%; background: rgba(25,146,180,.85); box-shadow: 0 0 12px rgba(25,146,180,.85); transform: translate(-50%, -50%); border:2px solid rgba(255,255,255,.9); }
      .worldmap .dot::after { content: attr(data-tip); position:absolute; left:50%; top:-10px; transform: translate(-50%, -100%); background: rgba(0,0,0,.6); color:#fff; font-size:11px; padding:2px 6px; border-radius:6px; white-space:nowrap; display:none; }
      .worldmap .dot:hover::after { display:block; }

      /* Layout with sidebar */
      .layout { display:grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; margin-top: 12px; width:100%; box-sizing:border-box; }
      .sidebar { align-self:start; position: sticky; top: 0; z-index: 5; background: var(--surface); border:1px solid var(--border); border-radius:14px; padding:12px; min-height: 60vh; box-shadow: 0 10px 24px rgba(15,23,42,.06); }
      .sidebar .brand { display:flex; align-items:center; gap:10px; font-weight:800; margin-bottom:8px; }
      .sidebar .nav { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
      .sidebar .nav .nav-item { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background: var(--surface-2); cursor:pointer; color: var(--text); text-align:left; box-shadow: 0 2px 6px rgba(15,23,42,.04); }
      .sidebar .nav .nav-item .ic { width:18px; height:18px; display:inline-flex; align-items:center; justify-content:center; opacity:.85; }
      .sidebar .nav .nav-item .ic svg { width:18px; height:18px; stroke:currentColor; }
      .sidebar .nav .nav-item.active { background: var(--surface); border-color: var(--admin-accent, var(--brand-primary)); box-shadow: 0 4px 10px rgba(15,23,42,.06); }
      .sidebar .foot { margin-top:12px; }
      .main { align-self:start; display:block; min-width:0; }
      @media (max-width: 860px) {
        .layout { grid-template-columns: 1fr; }
        .sidebar { position: sticky; top: auto; bottom: 0; border-radius: 0; margin: 12px 0 0 0; padding: 10px 12px; border-top:1px solid var(--border); background: var(--surface); }
        .sidebar .nav { flex-direction: row; overflow-x: auto; gap:8px; scrollbar-width: none; }
        .sidebar .nav::-webkit-scrollbar { display:none; }
        .layout { padding-bottom: 72px; }
        .sidebar .nav .nav-item { white-space: nowrap; flex: 0 0 auto; }
        .card { border-radius: 0; padding: 0; }
        .topbar { position: sticky; top: 0; }
        .main { padding-bottom: 8px; }
      }

      /* Small phones */
      @media (max-width: 600px) {
        .topbar { grid-template-columns: 1fr auto; }
        .topbar .search { display:none; }
        .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .chartbox { height: 180px; }
        input, select, button { font-size: 16px; } /* avoid iOS zoom */
      }

      /* Map Editor overlay */
      .map-editor { position: fixed; inset:0; background: rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; z-index: 30; }
      .map-editor.active { display:flex; }
      .map-editor .board { position: relative; width: min(1600px, 96vw); max-height: 90vh; aspect-ratio: 16/9; background:#000; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
      .map-editor video { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; opacity:.9; }
      .map-editor .hotspot { position:absolute; width:56px; height:56px; border-radius:50%; background: rgba(28,130,255,.9); border:4px solid rgba(255,255,255,.95); box-shadow: 0 0 26px rgba(28,130,255,.95); cursor:grab; z-index:2; }
      /* Editor requirement: show only areas, hide hotspots in the editor UI */
      .map-editor .hotspot { display: none !important; }
      .map-editor .hotspot:active { cursor:grabbing; }
      .map-editor .tools { position:absolute; top:8px; right:8px; display:flex; gap:8px; z-index:3; }
      .map-editor .tools button { background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius:8px; padding:6px 10px; }
      .map-editor .panel { position:absolute; left:8px; top:8px; display:flex; flex-direction:column; gap:8px; z-index:3; background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius:12px; padding:10px; width:min(360px, 50vw); max-height: calc(90vh - 24px); overflow:auto; }
      .map-editor .panel.collapsed { display:none; }
      .map-editor .panel h3 { margin:0 0 4px; font-size:14px; }
      .map-editor .panel label { font-size:12px; margin:6px 0 4px; }
      .map-editor .panel input, .map-editor .panel select { padding:8px; border-radius:8px; border:1px solid var(--border); background: var(--surface-2); color: var(--text); width:100%; box-sizing:border-box; }
      .map-editor .panel .row { display:flex; gap:6px; align-items:center; }
      .map-editor .panel .row > * { flex:1 1 0; min-width:0; }
      .map-editor .hotspot.selected { outline:3px solid rgba(255,255,255,.9); outline-offset:2px; box-shadow: 0 0 30px rgba(255,255,255,.8); }

      /* Area hubs (circular) */
      .map-editor .area-hub { position:absolute; width:80px; aspect-ratio: 1 / 1; border-radius:50%; background: rgba(28,130,255,.14); border:3px solid rgba(255,255,255,.95); box-shadow: 0 0 20px rgba(28,130,255,.6), inset 0 0 20px rgba(28,130,255,.25); cursor:move; z-index:2; user-select: none; display:flex; align-items:center; justify-content:center; }
      .map-editor .area-hub .dot { width:14px; height:14px; border-radius:50%; background: rgba(28,130,255,1); box-shadow: 0 0 18px rgba(28,130,255,.95); }
      .map-editor .area-hub.selected { outline:3px solid rgba(255,255,255,.9); outline-offset:2px; z-index:4; }
      .map-editor .area-hub.expanded { background: rgba(28,130,255,.2); box-shadow: 0 0 26px rgba(255,255,255,.35), inset 0 0 30px rgba(28,130,255,.35); }
      .map-editor .hub-children { position:absolute; inset:0; pointer-events:none; }
      .map-editor .hub-children .hotspot { pointer-events:auto; transform:translate(-50%, -50%); }
      .map-editor.areas-edit .hotspot { pointer-events: none; opacity: .6; }

      /* Content Summary - improved visuals */
      .csum-list { display:flex; flex-direction:column; gap:8px; }
      .csum-item { display:grid; grid-template-columns: 1fr auto auto auto; align-items:center; gap:8px; background: var(--surface); border:1px solid var(--border); border-radius:10px; padding:8px 10px; box-shadow: 0 4px 10px rgba(15,23,42,.06); }
      .csum-item .name { font-weight:600; color: var(--text); }
      .csum-item .meta { font-size:12px; color: var(--muted); }
      .csum-item .pill { background: rgba(25,146,180,.12); border:1px solid rgba(25,146,180,.25); border-radius:999px; padding:2px 8px; font-size:12px; color: var(--text); }
      .csum-stats { display:flex; gap:8px; align-items:center; margin: 6px 0 8px; }
      .csum-stats .stat { background: var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 10px; font-size:12px; color: var(--text); box-shadow: 0 2px 6px rgba(15,23,42,.05); }

      /* Admin content editor modal */
      #adm-content-editor { position: fixed; inset:0; display:flex; align-items:center; justify-content:center; background: rgba(15,23,42,.45); z-index: 60; }
      #adm-content-editor .inner { width:min(560px, 92vw); background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow: 0 18px 40px rgba(15,23,42,.2); }
      #adm-content-editor h3 { margin:0 0 8px; font-size:16px; }
      #adm-content-editor label { font-size:12px; color: var(--muted); margin:8px 0 4px; display:block; }
      #adm-content-editor input, #adm-content-editor select { width:100%; padding:8px; border-radius:8px; border:1px solid var(--border); background: var(--surface-2); color: var(--text); }
      #adm-content-editor .row { display:flex; gap:8px; align-items:center; margin-top:8px; }
      #adm-content-editor .grid3 { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; }
      #adm-content-editor .grid2 { display:grid; grid-template-columns: repeat(2, 1fr); gap:8px; }
      #adm-content-editor .close { position:absolute; right:12px; top:12px; border-radius:999px; border:1px solid var(--border); background: var(--surface-2); color: var(--text); padding:4px 8px; cursor:pointer; }

      /* Area → Hotspots assignment modal */
      #areaHotspotsModal { position: fixed; inset:0; display:none; align-items:center; justify-content:center; background: rgba(15,23,42,.45); z-index: 70; }
      #areaHotspotsModal.active { display:flex; }
      #areaHotspotsModal .inner { width:min(520px, 92vw); background: var(--surface); color: var(--text); border:1px solid var(--border); border-radius:14px; padding:16px; box-shadow: 0 18px 40px rgba(15,23,42,.2); }
      #areaHotspotsModal h3 { margin:0 0 8px; font-size:16px; }
      #areaHotspotsModal .list { max-height: 50vh; overflow:auto; border:1px solid var(--border); border-radius:10px; padding:8px; }
      #areaHotspotsModal .it { display:flex; align-items:center; gap:10px; padding:6px 4px; border-bottom:1px dashed var(--border); }
      #areaHotspotsModal .actions { display:flex; gap:8px; justify-content:flex-end; margin-top:10px; }