:root{
      --bg:#070b12; --card:#0c1220; --txt:#e7eefc; --muted:#93a4c7; --line:#1f2b44;
      --ok:#3ddc97; --bad:#ff5d5d; --warn:#ffd166; --blue:#5aa9ff; --shadow: 0 12px 30px rgba(0,0,0,.35);
      --r: 18px;
      --stickyBelow: 92px; /* computed at runtime from header height */
      --wrapInset: 36px; /* wrap horizontal padding (18px * 2) */
    }
    *{box-sizing:border-box}
    body{margin:0;background:radial-gradient(1100px 650px at 30% -10%, #192a52 0%, transparent 60%), var(--bg);
      color:var(--txt);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Arial;overflow-x:hidden;}
    a{color:inherit;text-decoration:none}
    a:hover{text-decoration:underline}
    .wrap{width:1366px;max-width:1366px;min-width:1366px;margin:0 auto;padding:18px;padding-top:92px}
    header{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
    header.sticky{
      position:fixed; top:0; left:50%; z-index:40;
      /* Match the inner content width of .wrap (wrap width minus horizontal padding) */
      width:calc(1366px - var(--wrapInset));
      background:linear-gradient(180deg, rgba(7,11,18,.9), rgba(7,11,18,.75));
      backdrop-filter:blur(10px);
      padding:12px 12px 10px;
      margin:0 0 14px;
      border-radius:18px;
      border:1px solid rgba(31,43,68,.6);
      box-shadow:0 12px 30px rgba(0,0,0,.35);
      min-height:72px;
      transform: translateX(-50%) translateZ(0); /* reduce sub-pixel jitter on some GPUs */
    }
    header.sticky .row{ flex-wrap:nowrap; }
    #activeCountryName{
      max-width: 280px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    #statusPill{
      min-width: 120px;
      justify-content:center;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    @media (max-width: 980px){
      header.sticky .row{ flex-wrap:wrap; }
      #activeCountryName{ max-width: 60vw; }
    }
    .brand{display:flex;align-items:center;gap:10px}
    .logo{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,#5aa9ff,#3ddc97);box-shadow:var(--shadow)}
    h1{margin:0;font-size:16px}
    .sub{color:var(--muted);font-size:12px;margin-top:2px}
    .pill{display:inline-flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
    .pill.ok{border-color:rgba(61,220,151,.4);color:var(--ok)}
    .pill.bad{border-color:rgba(255,93,93,.45);color:var(--bad)}
    .pill.warn{border-color:rgba(255,209,102,.45);color:var(--warn)}
    .pill.blue{border-color:rgba(90,169,255,.45);color:var(--blue)}
    .devToggle{border-color:rgba(90,169,255,.4);color:var(--blue);background:rgba(90,169,255,.06)}
    body.om-debug-off .dev-only{display:none!important}
    .grid{display:grid;grid-template-columns:420px 1fr;gap:14px}
    @media (max-width: 980px){ .grid{grid-template-columns:1fr} }
    /* Sticky country/lang/map box (like top bar) */
    #countryBox{
      position: sticky;
      top: var(--stickyBelow, 92px);
      z-index: 20;
      background: rgba(7,11,18,.92);
      backdrop-filter: blur(10px);
      border-radius: 14px;
    }
    @media (max-width: 980px){
      #countryBox{ position: static; top: auto; backdrop-filter:none; background: transparent; }
    }

    /* Boot overlay (reduce initial jank perception) */
    #bootOverlay{
      position:fixed; inset:0; z-index:999;
      display:none;
      background:rgba(7,11,18,.55);
      backdrop-filter: blur(6px);
      align-items:center; justify-content:center;
      padding:18px;
    }
    #bootOverlay.mini{
      background:rgba(7,11,18,.25);
      backdrop-filter: blur(4px);
      align-items:flex-start; justify-content:center;
      padding-top:90px;
      pointer-events:none; /* let user see/interact with page */
    }
    #bootOverlay .box{
      width:min(560px, 92vw);
      border:1px solid rgba(31,43,68,.55);
      border-radius:18px;
      background:rgba(12,18,32,.55);
      box-shadow:0 18px 40px rgba(0,0,0,.40);
      padding:14px 14px 12px;
      max-height:min(72vh, 620px);
      overflow:hidden;
    }
    #bootOverlay.mini .box{
      width:min(360px, 88vw);
      padding:12px 12px 10px;
    }
    #bootLog{
      margin-top:10px;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size:11px;
      line-height:1.35;
      color:#cfe0ff;
      max-height: min(50vh, 420px);
      overflow:auto;
      border-radius:12px;
      padding:8px 10px;
      background:rgba(0,0,0,.18);
      border:1px solid rgba(255,255,255,.06);
      display:flex;
      flex-direction:column;
      gap:6px;
      white-space:normal;
      word-break:break-word;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    #bootLog::-webkit-scrollbar{width:0;height:0}
    .bootLine{display:flex;gap:8px;align-items:flex-start}
    .bootIcon{
      width:16px;height:16px;flex:0 0 16px;
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:50%;
      font-size:11px;line-height:1;
      border:1px solid rgba(255,255,255,.14);
      color:#cfe0ff;
      background:rgba(255,255,255,.02);
      margin-top:1px;
    }
    .bootLine.ok .bootIcon{border-color:rgba(61,220,151,.5);color:#3ddc97;background:rgba(61,220,151,.08)}
    .bootLine.bad .bootIcon{border-color:rgba(255,93,93,.55);color:#ff5d5d;background:rgba(255,93,93,.08)}
    .bootLine.warn .bootIcon{border-color:rgba(255,209,102,.55);color:#ffd166;background:rgba(255,209,102,.08)}
    .bootLine.pending .bootIcon{border-color:rgba(90,169,255,.5);color:#5aa9ff;background:rgba(90,169,255,.08)}
    .bootLine.info .bootIcon{opacity:.8}
    .bootTime{color:#8ea4c8;min-width:38px}
    .bootText{color:#d9e5ff}
    .bootBar{
      height:10px;border-radius:999px;overflow:hidden;
      background:rgba(255,255,255,.06);
      border:1px solid rgba(255,255,255,.10);
    }
    .bootBar > div{
      height:100%;
      width:0%;
      background:linear-gradient(90deg, rgba(90,169,255,.35), rgba(61,220,151,.35));
      transition:width .22s ease;
    }
    .card{background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
    .hd{padding:12px 12px 10px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}
    .bd{padding:12px}
    .row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
    .col{display:flex;flex-direction:column;gap:6px}
    .muted{color:var(--muted)}
    input,select{
      background:#081025;color:var(--txt);border:1px solid var(--line);
      border-radius:12px;padding:10px 10px;outline:none
    }
    button{background:#0b1a35;color:var(--txt);border:1px solid var(--line);border-radius:12px;padding:10px 12px;cursor:pointer}
    button:hover{filter:brightness(1.08)}
    button.primary{background:linear-gradient(135deg, #2145a8, #0b1a35);border-color:#2b4ea8}
    button.ghost{background:rgba(255,255,255,.02)}
    button:disabled{opacity:.55;cursor:not-allowed}
    button.mini{height:32px;padding:0 12px;border-radius:10px;font-size:13px}
    button.danger{border-color:rgba(255,93,93,.6);color:#ff8a8a}
    .alert{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:8px 12px;
      border-radius:12px;
      border:1px solid rgba(255,93,93,.5);
      background:rgba(255,93,93,.08);
      color:#ffb3b3;
      font-size:12px;
      animation:fadeOut 3s forwards;
    }
    @keyframes fadeOut{
      0%{opacity:1;}
      70%{opacity:1;}
      100%{opacity:0;}
    }

    /* Premium modal */
    #premiumModal{
      position:fixed; inset:0; z-index:900;
      display:none; align-items:center; justify-content:center;
      background:rgba(7,11,18,.55);
      backdrop-filter: blur(6px);
      padding:18px;
    }
    #premiumModal .card{
      width:min(520px, 92vw);
      padding:14px 14px 12px;
      border:1px solid rgba(31,43,68,.6);
      border-radius:18px;
      background:rgba(12,18,32,.95);
      box-shadow:0 18px 40px rgba(0,0,0,.40);
    }
    #premiumModal .price{
      font-size:28px; font-weight:700; letter-spacing:.2px;
    }
    #premiumModal .subline{
      font-size:12px; color:var(--muted);
    }
    #premiumModal .line{
      border-top:1px solid rgba(31,43,68,.6);
      margin:10px 0;
    }

    .list{display:flex;flex-direction:column;gap:10px;max-height:none;overflow:visible}
    /* Event list: keep page height stable (scroll inside list) */
    #list{
      max-height: 420px; /* JS will refine based on item height */
      overflow:auto;
      scrollbar-width:none;
      -ms-overflow-style:none;
    }
    #list::-webkit-scrollbar{width:0;height:0}
    .item{padding:12px;border:1px solid var(--line);border-radius:16px;background:rgba(0,0,0,.18);cursor:pointer;position:relative}
    .list .item > div:first-child{
      font-size:16px;
      line-height:1.45;
      font-weight:600;
      letter-spacing:.1px;
      color:#cdd8ee;
    }
    @media (max-width: 980px){
      .list .item > div:first-child{font-size:15px}
    }
    @media (max-width: 680px){
      .list .item > div:first-child{font-size:14.5px}
    }
    .item:hover{filter:brightness(1.06)}
    .item.active{border-color:rgba(90,169,255,.55)}
    .item.global{border-left:3px solid rgba(61,220,151,.45);background:rgba(61,220,151,.05)}
    .item.new{border-color:rgba(255,209,102,.55); box-shadow:0 0 0 1px rgba(255,209,102,.18) inset}
    .item.new::after{
      content:""; position:absolute; left:10px; right:10px; bottom:8px; height:2px;
      background:linear-gradient(90deg, rgba(255,209,102,.0), rgba(255,209,102,.8), rgba(255,209,102,.0));
      opacity:.9; animation:pulse 1.2s ease-in-out infinite;
      border-radius:999px;
    }
    @keyframes pulse{ 0%{transform:translateX(-8px);opacity:.4} 50%{transform:translateX(8px);opacity:1} 100%{transform:translateX(-8px);opacity:.4} }

    .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
    .tag{font-size:12px;padding:3px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
    .tag.ok{border-color:rgba(61,220,151,.45);color:var(--ok)}
		.tag.warn{border-color:rgba(255,209,102,.45);color:var(--warn)}

		
    .tag.bad{border-color:rgba(255,93,93,.45);color:var(--bad)}
    .k{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:12px}
    .detailTitle{margin:0;font-size:30px;line-height:1.22;letter-spacing:.2px;font-weight:750}
    .detailSub{
      margin-top:10px;
      font-size:17px;
      color:var(--muted);
      line-height:1.6;
      letter-spacing:.1px;
      font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,"Noto Sans",Arial;
    }
    .detailSub.lead{
      color:var(--muted);
      background:none;
      border:0;
      border-radius:0;
      padding:0;
    }
    .detailBody{
      margin-top:12px;
      font-size:16px;
      line-height:1.75;
      color:#e7eefc;
      letter-spacing:.15px;
      text-wrap:pretty;
      font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,"Noto Sans",Arial;
    }
    .detailRich u{
      text-decoration:none;
      border-bottom:1px solid rgba(120,150,200,.65);
      padding:0 .04em;
      border-radius:3px;
    }
    .detailRich b{
      font-weight:650;
      color:#e7eefc;
      background:rgba(255,255,255,.06);
      padding:0 .12em;
      border-radius:5px;
      -webkit-box-decoration-break:clone;
      box-decoration-break:clone;
    }
    .detailRich .hl{
      display:inline-block;
      padding:0 .18em;
      border-radius:6px;
      margin:0 .01em;
      -webkit-box-decoration-break:clone;
      box-decoration-break:clone;
    }
    .detailRich .hl.action{
      color:#2a1a00;
      background:rgba(255,171,81,.16);
      border-bottom:2px solid rgba(255,171,81,.7);
      font-weight:700;
    }
    .detailRich .hl.place{
      color:#0f223a;
      background:rgba(90,169,255,.14);
      border-bottom:1px dotted rgba(90,169,255,.75);
      font-weight:650;
    }
    .detailRich .hl.who{
      color:#0a2a1f;
      background:rgba(61,220,151,.14);
      border-bottom:1px solid rgba(61,220,151,.65);
      font-weight:650;
    }
    .detailRich .hl.time{
      color:#1a1030;
      background:rgba(177,142,255,.14);
      border-bottom:1px dashed rgba(177,142,255,.7);
      font-weight:650;
    }
    .detailRich u .hl,
    .detailRich b .hl{
      text-decoration:none;
      border-bottom:0;
      box-shadow:none;
    }
    .detailRich br{ line-height:2.1; }
    .detailRich br{ line-height:2.1; }
    .coverWrap{margin-top:12px}
    .coverFrame{
      border-radius:16px;border:1px solid var(--line);background:rgba(0,0,0,.15);
      overflow:hidden; position:relative;
    }
    /* Match generated cover aspect ratio (1024x1024 => 1:1) */
    .coverFrame{aspect-ratio:1/1}
    @media (max-width: 980px){ .coverFrame{aspect-ratio:1/1} }
    @media (max-width: 680px){ .coverFrame{aspect-ratio:1/1} }
    .coverImg{display:block;width:100%;height:100%;object-fit:cover}
    .coverSkel{
      width:100%; aspect-ratio:1/1;
      background:linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.08), rgba(255,255,255,.04));
      background-size:200% 100%;
      animation:shimmer 1.2s linear infinite;
    }
    @media (max-width: 980px){
      .detailTitle{font-size:26px}
      .detailSub{font-size:16px}
      .coverSkel{aspect-ratio:1/1}
    }
    @media (max-width: 680px){
      .detailTitle{font-size:24px}
      .detailSub{font-size:15px}
      .coverSkel{aspect-ratio:2/1}
    }
    @keyframes shimmer{ 0%{background-position:200% 0} 100%{background-position:-200% 0} }
    .coverNote{position:absolute;left:12px;bottom:10px;font-size:12px;color:rgba(231,238,252,.75);
      background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.08);padding:6px 8px;border-radius:999px}
    .src{padding:10px;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.15)}
    .src a{color:#b6d3ff}
    details > summary{cursor:pointer;color:var(--muted)}
    pre{white-space:pre-wrap;word-break:break-word;background:#070c16;border:1px solid var(--line);
      border-radius:14px;padding:10px;color:#dce6ff;margin:0}
    .rawScroll{max-height:45vh;overflow:auto;scrollbar-gutter:stable}
    .rawScroll::-webkit-scrollbar{width:14px}
    .rawScroll::-webkit-scrollbar-track{background:#0b1220;border-radius:12px}
    .rawScroll::-webkit-scrollbar-thumb{background:#1f2b44;border-radius:12px;border:2px solid #0b1220}
    .rawScroll::-webkit-scrollbar-thumb:hover{background:#2a3a5f}
    .shareFab{
      position:absolute;
      right:12px;
      bottom:12px;
      width:36px;height:36px;
      display:inline-flex;align-items:center;justify-content:center;
      border-radius:12px;border:1px solid var(--line);
      background:rgba(255,255,255,.02);
      cursor:pointer;
      z-index:6;
      pointer-events:auto;
    }
    .shareFab:hover{filter:brightness(1.08)}
    .shareFab.ok{
      border-color:rgba(61,220,151,.6);
      color:var(--ok);
      box-shadow:0 0 0 2px rgba(61,220,151,.25) inset;
    }
    .shareToast{
      position:absolute;
      right:56px;
      bottom:14px;
      padding:6px 10px;
      border-radius:999px;
      border:1px solid rgba(61,220,151,.45);
      color:var(--ok);
      background:rgba(61,220,151,.08);
      font-size:12px;
      opacity:0;
      transform:translateY(4px);
      transition:opacity .2s ease, transform .2s ease;
      pointer-events:none;
      z-index:5;
    }
    .shareToast.show{opacity:1;transform:translateY(0)}
    .shareFallback{
      position:absolute;
      right:56px;
      bottom:12px;
      padding:6px 8px;
      border-radius:12px;
      border:1px solid var(--line);
      background:#0b1220;
      display:none;
      gap:6px;
      align-items:center;
      z-index:5;
    }
    .shareFallback input{
      width:220px;
      font-size:12px;
      padding:6px 8px;
    }
    /* Map (beta) */
    #map{width:100%;}
    .leaflet-container{background:#0a1426;color:#111}
    .leaflet-control-attribution{display:none}
    /* Logout button align */
    #btnLogout{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:32px;
      padding:0 14px;
    }

    /* Top bar auth (icon -> dropdown) */
    #authBar{ position:relative; }
    #authToggle{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:38px;
      height:38px;
      padding:0;
      border-radius:999px;
      cursor:pointer;
      background:rgba(255,255,255,.02);
    }
    #authToggle svg{ width:18px; height:18px; opacity:.9 }
    #authEmailPill{
      cursor:pointer;
      white-space:nowrap;
      max-width:260px;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    #authEmailPill.premium{
      border-color: rgba(93,164,255,.55);
      color:#5da4ff;
      background:rgba(93,164,255,.07);
    }
    #authEmailPill.admin{
      border-color: rgba(255,92,92,.55);
      color:#ff5c5c;
      background:rgba(255,92,92,.07);
    }
    #authMenu{
      position:absolute;
      top:44px;
      right:0;
      width:min(420px, 92vw);
      z-index:80;
      display:none;
      border:1px solid rgba(31,43,68,.6);
      border-radius:18px;
      background:linear-gradient(180deg, rgba(7,11,18,.92), rgba(7,11,18,.82));
      backdrop-filter: blur(10px);
      box-shadow: 0 12px 30px rgba(0,0,0,.35);
      padding:12px;
    }
    #authMenu.loggedIn{
      width:260px;
      padding:10px;
    }
    #authMenu .row{gap:8px}
    #authMenu input{ width:100% }
    #authAdminLink{
      display:none;
      width:100%;
      text-decoration:none;
      text-align:center;
      justify-content:center;
      border-color: rgba(255,92,92,.45);
      color:#ff5c5c;
      background:rgba(255,92,92,.06);
    }