:root { --txt:#f4f4f4; --mut:#c7c7c7; }
    body, html { height: 100%; margin: 0; background: #262626; color: #e6edf3; }
    #publicMap { height: 100vh; width: 100vw; background: #262626; }
    .map-fade-in { animation: mapFade .6s ease-out; }
    @keyframes mapFade { from { opacity: 0; } to { opacity: 1; } }
    .overlay {
      position: fixed; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      pointer-events: none;
    }
    .overlay-card {
      pointer-events: auto;
      text-align: center;
      background: rgba(11, 14, 20, 0.78);
      padding: 28px 32px;
      border-radius: 14px;
      backdrop-filter: blur(6px);
      border: 1px solid rgba(255,255,255,0.08);
      width: fit-content;
      max-width: 92vw;
      box-shadow: 0 16px 50px rgba(0,0,0,.55);
      animation: overlayIn 180ms ease-out;
    }
    @keyframes overlayIn {
      from { opacity: 0; transform: translateY(14px) scale(0.985); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }
    .brand { font-size: 28px; font-weight: 800; letter-spacing: 0.4px; }
    .sub { color: #9aa4b2; font-size: 13px; margin-top: 4px; }
    .brand-slogan{
      color: var(--mut);
      font-size: 14px;
      margin-top: 6px;
      text-align: center;
      letter-spacing: .2px;
      text-shadow: 0 1px 10px rgba(0,0,0,.35);
    }
    .searchbox .form-control { background: #393939; border: 0; color: #e6edf3; min-height: 46px; }
    .searchbox .btn { background: #393939; border: 0; color: #e6edf3; }
    .searchbox .btn:hover { background: #474747; color: #e6edf3; }
    .searchbox .btn:focus { box-shadow: 0 0 0 .2rem rgba(120,169,255,.18); }
    .search-input { background: #393939; border: 0; color: #e6edf3; min-height: 46px; }
    .search-input:focus {
      background: #444;
      color: #e6edf3;
      box-shadow: 0 0 0 .2rem rgba(120,169,255,.18);
    }
    .search-hint { color: var(--mut); font-size: 12px; margin-top: 8px; }
    .popular-examples{
      margin-top: 8px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: 6px;
    }
    .example-pill{
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.04);
      color: #e6edf3;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 12px;
      line-height: 1.2;
      cursor: pointer;
      transition: background .15s ease, border-color .15s ease, transform .15s ease;
    }
    .example-pill-kind{
      opacity: .85;
      font-weight: 600;
      margin-right: 4px;
      white-space: nowrap;
      flex: 0 0 auto;
    }
    .example-pill-value{
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 28ch;
      flex: 1 1 auto;
    }
    .example-pill:hover{
      background: rgba(255,255,255,.10);
      border-color: rgba(255,255,255,.28);
      transform: translateY(-1px);
    }
    .example-pill:focus{
      outline: none;
      box-shadow: 0 0 0 .2rem rgba(120,169,255,.18);
    }
    .top-right {
      position: fixed; top: 16px; right: 16px; z-index: 5;
    }
    .map-meta {
      position: fixed; top: 16px; left: 16px; z-index: 5;
      background: rgba(11, 14, 20, 0.6);
      padding: 6px 10px; border-radius: 8px; font-size: 12px;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .map-period-btn {
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: #eaeaea;
      padding: 4px 10px;
      border-radius: 6px;
      font-size: 12px;
    }
    .map-period-btn:hover {
      background: rgba(255,255,255,.1);
      border-color: rgba(255,255,255,.2);
      color: #fff;
    }
    .map-period-btn.active {
      background: rgba(120,169,255,.25);
      border-color: rgba(120,169,255,.5);
      color: #b8d4ff;
    }
    .brand-strong { font-weight: 800; letter-spacing: .2px; }
    .brand-badge{
      width: 1.6em; height: 1.6em;
      border-radius: 999px;
      background: #000;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: 0;
      flex: 0 0 auto;
      font-size: 0.85em;
    }
    .brand-link{
      width: auto;
      justify-content: center;
      font-size: 5vw;
      gap: 0.2em;
    }
    .brand-text{
      flex: 0 0 auto;
      text-align: left;
      white-space: nowrap;
      width: auto;
    }

    /* Modal styling similar to portal */
    #authModal .modal-dialog { max-width: 920px; }
    #authModal .modal-content {
      border-radius: 18px;
      overflow: hidden;
      box-shadow: 0 24px 70px rgba(0,0,0,.55);
      border: 1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(1200px 400px at 20% 0%, rgba(120,169,255,.14), rgba(0,0,0,0) 60%),
        radial-gradient(900px 300px at 100% 0%, rgba(180,120,255,.10), rgba(0,0,0,0) 60%),
        #1b1b1b;
    }
    #authModal .modal-header {
      padding: 16px 18px;
      background: rgba(255,255,255,.02);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      align-items: center;
      border-bottom: 1px solid rgba(255,255,255,.08);
    }
    #authModal .modal-title { font-weight: 800; letter-spacing: .2px; }
    #authModal .modal-body { padding: 18px 18px 8px; }
    #authModal .modal-footer { padding: 10px 18px; background: rgba(255,255,255,.02); }
    #authModal .close{
      width: 34px; height: 34px;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.14);
      background: rgba(255,255,255,.04);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      opacity: 1;
      text-shadow: none;
      color: #fff;
    }
    #authModal .close span{ font-size: 24px; line-height: 1; margin-top: -2px; }
    #authModal .close:hover{ background: rgba(255,255,255,.08); }
    #authModal .modal-header .auth-close{ margin:0; padding:0; flex:0 0 auto; }
    #authModal .auth-intro{
      margin: 10px 0 14px;
      padding: 10px 12px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      background: rgba(255,255,255,.03);
    }
    #authModal .auth-seg{
      padding: 6px;
      border-radius: 14px;
      background: rgba(255,255,255,.04);
      border: 1px solid rgba(255,255,255,.10);
      gap: 6px;
    }
    #authModal .auth-seg .nav-link{
      border: 0 !important;
      border-radius: 10px;
      padding: 8px 12px;
      color: var(--mut);
      font-weight: 700;
      transition: background .15s ease, color .15s ease, transform .15s ease;
    }
    #authModal .auth-seg .nav-link:hover{ color: var(--txt); background: rgba(255,255,255,.05); }
    #authModal .auth-seg .nav-link.active{
      color: var(--txt);
      background: rgba(255,255,255,.09);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.10);
    }
    #authModal .tab-content { padding-top: 14px !important; }
    #authModal .form-control{
      background: rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.10);
      color: var(--txt);
      border-radius: 12px;
    }
    #authModal .form-control:focus{
      background: rgba(0,0,0,.45);
      border-color: rgba(120,169,255,.55);
      box-shadow: 0 0 0 .2rem rgba(120,169,255,.18);
      color: var(--txt);
    }
    #authModal label { color: var(--mut); font-size: 12px; font-weight: 700; letter-spacing: .2px; }
    #authModal .btn { border-radius: 12px; }
    #authModal .btn-outline-secondary,
    #authModal .btn-outline-light{
      border-color: rgba(255,255,255,.18);
      color: var(--txt);
    }
    #authModal .btn-outline-secondary:hover,
    #authModal .btn-outline-light:hover{
      border-color: rgba(255,255,255,.28);
      background: rgba(255,255,255,.06);
    }
    #authModal .table-darkish{
      background: rgba(0,0,0,.28);
      border: 1px solid rgba(255,255,255,.08);
    }
    #authModal .table-darkish th,
    #authModal .table-darkish td{
      border-color: rgba(255,255,255,.08);
      color: var(--txt);
    }
    #authModal .table-darkish thead th{
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: .2px;
      color: var(--mut);
    }
    #authModal .table-wrap-apple{
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(255,255,255,.08);
    }
    .chip { display:inline-block; font-size: 12px; padding: .18rem .45rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: #eaeaea; }
    .chip.good { border-color: rgba(0,172,70,.55); }
    .chip.bad  { border-color: rgba(255,99,99,.55); }
    .chip.warn { border-color: rgba(255,196,0,.65); color: #f6e7a6; }

    @media (max-width: 767.98px){
      .overlay{
        justify-content: flex-start;
        padding: 74px 12px 16px;
      }
      .overlay-card{
        width: 100%;
        max-width: 100%;
        padding: 16px 14px;
        border-radius: 12px;
      }
      .brand-link{
        font-size: clamp(24px, 7.2vw, 32px);
      }
      .brand-slogan{
        font-size: 12px;
        padding: 0 8px;
      }
      .map-meta{
        left: 10px;
        top: 10px;
        font-size: 11px;
        padding: 5px 8px;
      }
      .top-right{
        top: 10px;
        right: 10px;
      }
      #openAccountBtn{
        padding: .22rem .5rem;
        font-size: .78rem;
      }
      .searchbox .input-group{
        display: flex;
        flex-wrap: wrap;
      }
      .searchbox .form-control{
        width: 100%;
        border-radius: 10px !important;
      }
      .searchbox .input-group-append{
        display: block;
        width: 100%;
        margin-top: 8px;
      }
      .searchbox .input-group-append .btn{
        width: 100%;
        border-radius: 10px !important;
      }
      .search-hint{
        text-align: left;
        margin-top: 10px;
      }
      .popular-examples{
        justify-content: stretch;
        gap: 8px;
      }
      .example-pill{
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        display: inline-flex;
        align-items: center;
        padding: 8px 10px;
      }
      .example-pill-value{
        max-width: none;
      }
    }