:root { --bg-0:#0f0f0f; --bg-1:#161616; --bg-2:#262626; --bg-3:#2e2e2e; --txt:#f4f4f4; --mut:#c7c7c7; --link:#78a9ff; }
    body { background: var(--bg-0); color: var(--txt); }
    .navbar { background: #121212; }
    .brand-strong { font-weight: 800; letter-spacing: .2px; }
    .muted { color: var(--mut); }
    .pill { display:inline-block; padding: .18rem .5rem; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; font-size: 12px; color: #eaeaea; }
    .card { background: var(--bg-1); border: 1px solid rgba(255,255,255,.08); }
    .table { color: var(--txt); }
    .table-darkish, .table-darkish td, .table-darkish th { color: var(--txt) !important; }
    .searchbox .form-control { background: #393939; border: 0; color: var(--txt); padding: 1.05rem 1.1rem; }
    .searchbox .btn { background: #393939; border: 0; color: var(--txt); }
    .searchbox .btn:hover { background: #474747; }

    .hero{
      background:var(--bg-2);
      padding: 22px 0;
      border-bottom: 1px solid rgba(255,255,255,.06);
    }
    .hero h2{ font-weight:400; font-size:22px; margin:0 0 10px 0; }
    .hero h2 strong{ font-weight:800; }

    .btn-ghost{
      background: rgba(255,255,255,.06);
      border: 1px solid rgba(255,255,255,.12);
      color: var(--txt);
    }
    .btn-ghost:hover{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); color: var(--txt); }
    .btn:focus{ box-shadow:none !important; }

    .tile {
      background: var(--bg-2);
      border: 1px solid rgba(255,255,255,.06);
      border-radius: 6px;
      box-shadow: 0 1px 2px rgba(0,0,0,.35);
      display:flex; flex-direction:column;
      height:100%;
    }
    .tile:hover { box-shadow: 0 1px 8px rgba(0,0,0,.55); }
    .tile .tile-head { display:flex; gap:10px; align-items:flex-start; padding: 14px 14px 8px; }
    .tile .tile-head i { font-size: 18px; margin-top: 2px; color: #9dd1ff; }
    .tile .tile-title { margin:0; font-size: 15px; font-weight: 700; }
    .tile .tile-sub { margin:0; font-size: 12px; color: var(--mut); }
    .tile .tile-body { padding: 10px 14px 14px; flex:1; }

    .table-darkish { background: var(--bg-2); border: 1px solid rgba(255,255,255,.06); }
    .table-darkish thead th { border-color: rgba(255,255,255,.08); color: #eaeaea; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
    .table-darkish td, .table-darkish th { border-color: rgba(255,255,255,.06); }
    .row-hover tbody tr:hover { background: rgba(255,255,255,.03); cursor: pointer; }
    .ioc-preview-kv{ display:flex; gap:10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
    .ioc-preview-kv:last-child{ border-bottom: 0; }
    .ioc-preview-kv .k{ width: 150px; color: var(--mut); font-size: 12px; }
    .ioc-preview-kv .v{ flex:1; font-size: 13px; overflow-wrap:anywhere; }
    .ioc-signal{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,99,99,.45);
      background: rgba(255,99,99,.10);
      color: #ffd2d2;
      font-size: 12px;
      font-weight: 700;
    }
    .lock-preview-wrap{
      position: relative;
      margin-top: 12px;
      border: 1px solid rgba(255,255,255,.08);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(255,255,255,.02);
    }
    .lock-preview-blur{
      filter: blur(4px);
      opacity: .75;
      pointer-events: none;
      user-select: none;
    }
    .lock-preview-overlay{
      position: absolute;
      inset: 0;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      padding: 14px;
      background: linear-gradient(180deg, rgba(16,16,16,.22), rgba(16,16,16,.68));
    }
    .lock-preview-cta{
      max-width: 500px;
      color: #eef2ff;
      font-size: 13px;
      line-height: 1.35;
    }

    /* Modal styling like portal */
    #authModal .modal-dialog,
    #iocPreviewModal .modal-dialog { max-width: 920px; }
    #authModal .modal-content,
    #iocPreviewModal .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,
    #iocPreviewModal .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,
    #iocPreviewModal .modal-title { font-weight: 800; letter-spacing: .2px; }
    #authModal .modal-body,
    #iocPreviewModal .modal-body { padding: 18px 18px 8px; }
    #authModal .auth-close,
    #iocPreviewModal .auth-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;
      margin:0; padding:0; flex:0 0 auto;
    }
    #authModal .auth-close span,
    #iocPreviewModal .auth-close span{ font-size: 24px; line-height: 1; margin-top: -2px; }
    #authModal .auth-close:hover,
    #iocPreviewModal .auth-close:hover{ background: rgba(255,255,255,.08); }
    #iocPreviewModal .btn{ border-radius: 12px; }
    #iocPreviewModal .btn-outline-light{
      border-color: rgba(255,255,255,.18);
      color: var(--txt);
    }
    #iocPreviewModal .btn-outline-light:hover{
      border-color: rgba(255,255,255,.28);
      background: rgba(255,255,255,.06);
      color: var(--txt);
    }
    #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-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; }