:root{
      --bg:#0b0f14; --panel:#111823; --panel2:#0f151f; --line:#263142;
      --text:#e7eef8; --muted:#9fb0c4; --ok:#1f8f5f; --warn:#ff5a5a;
      --hdr:#162132;  --pos:#2dd4bf;  --neg:#ff7286;
      --blue-frame:rgba(65,94,145,0.48);
      --blue-frame-strong:rgba(95,128,185,0.60);
      --blue-surface:
        radial-gradient(120% 170% at 18% 45%, rgba(42,72,125,0.10), transparent 68%),
        linear-gradient(100deg, #070d18, #070c16 52%, #060b14);
    }

    html, body { max-width: 100%; overflow-x: hidden; }
    body{
      margin:0;
      font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
      background:var(--bg);
      color:var(--text);
    }
    button, input, select, textarea, option{
      font-family:inherit;
    }

    .wrap{
      max-width:none;
      width:100%;
      margin:0;
      padding:18px 22px 40px;
      box-sizing:border-box;
    }

    .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
    .brand{display:flex;align-items:center;gap:10px;width:100%;}
    .brand > div{width:100%;}
    .title-row{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .user-menu{
      position:relative;
      margin-left:auto;
      margin-right:0;
      flex:0 0 auto;
      display:flex;
      align-items:center;
    }
    .menu-toggle-btn{
      width:32px;
      height:29px;
      border-radius:0;
      border:none;
      background:transparent;
      box-shadow:none;
      display:flex;
      flex-direction:column;
      justify-content:center;
      align-items:center;
      gap:4px;
      cursor:pointer;
      padding:0;
    }
    .menu-toggle-btn span{
      display:block;
      width:19px;
      height:2px;
      border-radius:999px;
      background:var(--text);
      opacity:0.9;
    }
    .profile-menu-panel{
      position:absolute;
      right:0;
      top:40px;
      z-index:220;
      display:none;
      flex-direction:column;
      align-items:stretch;
      border-radius:13px;
      border:1px solid var(--blue-frame);
      background:linear-gradient(180deg,#070d18,#070c16);
      width:min(352px, calc(100vw - 24px));
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 12px 30px rgba(0,0,0,0.52);
      overflow:hidden;
    }
    .profile-menu-panel.open{
      display:flex;
    }
    .user-panel-title{
      color:var(--muted);
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:1px;
      font-weight:800;
    }
    .user-panel-email{
      font-size:14px;
      font-weight:800;
      max-width:100%;
      overflow-wrap:anywhere;
    }
    .profile-head{
      display:flex;
      align-items:center;
      gap:11px;
      padding:11px 14px 10px;
    }
    .profile-avatar{
      width:51px;
      height:51px;
      border-radius:50%;
      border:1px solid var(--line);
      background:linear-gradient(180deg,#1a2740,#111a30 72%, #0c1322);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.12), 0 4px 10px rgba(0,0,0,0.42);
      flex:0 0 auto;
    }
    .profile-avatar img{
      width:72%;
      height:72%;
      object-fit:contain;
      filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4));
    }
    .profile-head-meta{
      min-width:0;
      flex:1;
    }
    .profile-email{
      font-size:17px;
      line-height:1.08;
      font-weight:800;
      letter-spacing:0.2px;
      color:var(--text);
      overflow-wrap:anywhere;
    }
    .profile-role{
      margin-top:6px;
      display:inline-flex;
      align-items:center;
      gap:4px;
      border-radius:999px;
      background:linear-gradient(180deg,#1a2436,#131c2c);
      border:1px solid #2b3a51;
      color:var(--muted);
      font-size:12px;
      font-weight:800;
      padding:3px 9px 4px;
      line-height:1;
    }
    .profile-role::before{
      content:"";
      width:6px;
      height:6px;
      border-radius:50%;
      background:#3f5c82;
      box-shadow:0 0 0 2px rgba(63,92,130,0.18);
    }
    .profile-role.user::before{
      background:#4c647f;
      box-shadow:0 0 0 2px rgba(76,100,127,0.16);
    }
    .profile-divider{
      height:1px;
      background:var(--line);
    }
    .profile-actions{
      display:flex;
      flex-direction:column;
      gap:7px;
      padding:10px 14px 13px;
    }
    .profile-menu-item{
      width:100%;
      appearance:none;
      border-radius:9px;
      border:1px solid var(--line);
      background:#0b111a;
      color:var(--text);
      min-height:57px;
      font-size:13px;
      font-weight:700;
      font-family:inherit;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 13px;
      cursor:pointer;
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 10px rgba(0,0,0,0.32);
    }
    .profile-menu-item:hover{
      filter:brightness(1.05);
      border-color:#31455f;
    }
    .profile-menu-icon{
      font-size:17px;
      opacity:0.78;
      width:23px;
      text-align:center;
      color:var(--muted);
    }

    /* title with embedded logo */
    .title{
      display:flex;
      align-items:center;
      gap:8px;
      margin:0;
      font-size:26px;
      line-height:1;
      font-weight:800;
      letter-spacing:0.2px;
    }

    .title img{
      height:24px;
      width:auto;
      display:inline-block;
      transform: translateY(1px);
    }

    .meta{
      color:var(--muted);
      font-size:12px;
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      align-items:center;
      width:100%;
    }

    .meta-center{
      flex:0 0 auto;
      display:flex;
      justify-content:flex-start;
      align-items:center;
    }

    .logbtn{
      background:#0b111a;
      border:1px solid var(--line);
      color:var(--text);
      border-radius:999px;
      padding:6px 10px;
      font-size:12px;
      cursor:pointer;
      display:flex;
      align-items:center;
      gap:8px;
    }

    .badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:20px;
      height:18px;
      padding:0 6px;
      border-radius:999px;
      background:rgba(255,255,255,0.08);
      border:1px solid rgba(255,255,255,0.12);
      font-size:11px;
      color:var(--text);
    }

    .logpanel{
      position:fixed;
      top:70px;
      left:50%;
      transform:translateX(-50%);
      width:min(900px, 94vw);
      max-height:70vh;
      overflow:auto;
      background:#0b111a;
      border:1px solid var(--blue-frame);
      border-radius:12px;
      box-shadow:0 16px 50px rgba(0,0,0,0.45);
      padding:12px;
      z-index:200;
      display:none;
    }

    .logpanel.open{ display:block; }

    .panel-frame{
      background:linear-gradient(180deg,#070d18,#070c16);
      border-color:var(--blue-frame);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 50px rgba(0,0,0,0.45);
    }

    .panel-head,
    .reports-panel-head,
    .universe-panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
    }

    .panel-title,
    .reports-panel-title,
    .universe-panel-title,
    .admin-panel-title{
      font-size:13px;
      font-weight:800;
      letter-spacing:0.24px;
      color:var(--text);
      font-family:inherit;
    }

    .panel-subtitle,
    .reports-panel-subtitle,
    .universe-panel-subtitle,
    .admin-panel-subtitle{
      color:var(--muted);
      font-size:12px;
      font-weight:500;
      margin-bottom:8px;
      font-family:inherit;
    }

    .report-card,
    .universe-card{
      border:1px solid var(--blue-frame);
      border-radius:10px;
      background:var(--blue-surface);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.05), 0 8px 20px rgba(0,0,0,0.32);
      color:var(--text);
    }

    .reports-panel{
      width:min(460px, 56vw);
      padding:10px;
    }

    .reports-list{
      display:flex;
      flex-direction:column;
      gap:10px;
    }

    .report-card{
      display:flex;
      align-items:center;
      gap:9px;
      min-height:57px;
      padding:8px 9px;
      text-decoration:none;
      color:var(--text);
      transition:transform 130ms ease, border-color 130ms ease, filter 130ms ease;
    }

    .report-card-link:hover{
      transform:translateY(-1px);
      border-color:var(--blue-frame-strong);
      filter:brightness(1.04);
    }

    .report-icon-wrap{
      flex:0 0 60px;
      width:60px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .report-icon{
      display:block;
      width:49px;
      max-width:100%;
      max-height:49px;
      height:auto;
      object-fit:contain;
    }

    .report-meta{
      display:flex;
      flex-direction:column;
      min-width:0;
    }

    .report-title{
      font-size:15px;
      line-height:1;
      font-weight:800;
      letter-spacing:0.2px;
      white-space:nowrap;
    }

    @media (max-width: 860px) {
      .reports-panel{
        width:min(460px, 56vw);
      }
      .report-card{
        min-height:52px;
        padding:7px 8px;
        gap:8px;
      }
      .report-icon-wrap{
        flex-basis:52px;
        width:52px;
      }
      .report-icon{
        width:43px;
        max-height:43px;
      }
      .report-title{
        font-size:13px;
      }
    }

    @media (max-width: 640px) {
      .reports-panel{
        width:min(62vw, 370px);
      }
      .report-card{
        min-height:47px;
        padding:6px 7px;
      }
      .report-icon-wrap{
        flex-basis:48px;
        width:48px;
      }
      .report-icon{
        width:38px;
        max-height:38px;
      }
      .report-title{
        font-size:11px;
      }
      .topbar{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
      }
      .user-menu{
        width:auto;
        margin-left:auto;
        margin-top:0;
        align-self:flex-end;
      }
      .menu-toggle-btn{
        width:29px;
        height:26px;
        border-radius:0;
        margin-left:0;
        gap:3px;
      }
      .menu-toggle-btn span{
        width:15px;
        height:2px;
      }
      .profile-menu-panel{
        top:40px;
        width:min(96vw, 234px);
        right:0;
        border-radius:9px;
      }
      .profile-head{
        padding:8px 8px 7px;
        gap:6px;
      }
      .profile-avatar{
        width:33px;
        height:33px;
      }
      .profile-email{
        font-size:15px;
      }
      .profile-role{
        margin-top:4px;
        font-size:11px;
        padding:2px 6px;
      }
      .profile-role::before{
        width:5px;
        height:5px;
      }
      .profile-actions{
        padding:7px 8px 8px;
        gap:5px;
      }
      .profile-menu-item{
        min-height:32px;
        padding:0 8px;
        gap:6px;
        border-radius:7px;
        font-size:11px;
      }
      .profile-menu-icon{
        width:14px;
        font-size:12px;
      }
    }

    .universe-panel{
      width:min(460px, 56vw);
      padding:10px;
    }

    .health-panel{
      width:min(460px, 56vw);
      padding:10px;
    }
    .health-grid{
      display:grid;
      grid-template-columns:1fr;
      gap:9px;
    }
    .health-row{
      border:1px solid rgba(60,84,128,0.45);
      border-radius:10px;
      background:linear-gradient(180deg,#0b121d,#0a1119);
      padding:9px 10px;
    }
    .health-row-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      margin-bottom:6px;
    }
    .health-name{
      font-size:12px;
      font-weight:700;
      color:var(--text);
    }
    .health-value{
      font-size:12px;
      font-weight:800;
    }
    .health-level{
      margin-top:6px;
      color:var(--muted);
      font-size:11px;
      letter-spacing:0.2px;
    }
    .health-bar{
      width:100%;
      height:7px;
      border-radius:999px;
      background:#0a0f18;
      border:1px solid rgba(40,54,78,0.85);
      overflow:hidden;
    }
    .health-bar-fill{
      height:100%;
      width:0;
      border-radius:999px;
      transition:width 200ms ease;
    }
    .health-value.health-ok{ color:#66d9bf; }
    .health-value.health-warn{ color:#ffd37a; }
    .health-value.health-critical{ color:#ff9ba8; }
    .health-value.health-unknown{ color:var(--muted); }
    .health-bar-fill.health-ok{ background:linear-gradient(90deg,#0a7c67,#0c9d7e); }
    .health-bar-fill.health-warn{ background:linear-gradient(90deg,#8c6220,#b18231); }
    .health-bar-fill.health-critical{ background:linear-gradient(90deg,#7b2630,#a43745); }
    .health-bar-fill.health-unknown{ background:linear-gradient(90deg,#2b3648,#3c4a60); }

    .admin-panel-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:8px;
    }

    .admin-panel-title{
      letter-spacing:0.2px;
    }

    .admin-panel-subtitle{
      margin-bottom:10px;
    }

    .admin-form{
      display:grid;
      grid-template-columns:1fr;
      gap:7px;
      padding:10px;
      border:1px solid var(--line);
      border-radius:10px;
      background:rgba(11,17,26,0.7);
      margin-bottom:10px;
    }

    .admin-form input[type="email"],
    .admin-form input[type="password"]{
      width:100%;
      box-sizing:border-box;
      background:#0b111a;
      border:1px solid var(--line);
      color:var(--text);
      border-radius:8px;
      padding:7px 9px;
      font-size:12px;
    }

    .admin-users-title{
      font-size:12px;
      font-weight:700;
      color:var(--muted);
      margin-bottom:6px;
    }

    .admin-user-row{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      padding:7px 9px;
      border:1px solid rgba(38,49,66,0.8);
      border-radius:8px;
      margin-bottom:6px;
      background:rgba(11,17,26,0.55);
      font-size:12px;
    }

    .admin-user-email{
      overflow-wrap:anywhere;
    }

    .admin-user-role{
      color:var(--muted);
      font-weight:700;
      font-size:11px;
      letter-spacing:0.2px;
      white-space:nowrap;
    }

    .universe-list{
      display:flex;
      flex-direction:column;
      gap:7px;
    }

    .universe-card{
      display:flex;
      align-items:center;
      gap:9px;
      min-height:57px;
      padding:8px 9px;
      text-decoration:none;
      color:var(--text);
      transition:transform 130ms ease, border-color 130ms ease, filter 130ms ease;
    }

    .universe-card.disconnected{
      border-color:rgba(110, 120, 140, 0.45);
      filter:saturate(0.74);
    }

    .universe-card:hover{
      transform:translateY(-1px);
      border-color:var(--blue-frame-strong);
      filter:brightness(1.04);
    }

    .universe-logo-wrap{
      flex:0 0 60px;
      width:60px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

    .universe-logo{
      display:block;
      width:auto;
      max-width:100%;
      max-height:46px;
      height:auto;
      object-fit:contain;
    }

    .universe-logo-kraken{
      width:49px;
      max-height:49px;
    }

    .universe-logo-bybit{
      width:77px;
      max-height:35px;
    }

    .universe-meta{
      display:flex;
      flex-direction:column;
      gap:5px;
      min-width:0;
    }

    .universe-name{
      font-size:15px;
      line-height:1;
      font-weight:800;
      letter-spacing:0.2px;
      white-space:nowrap;
    }

    .universe-status{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:max-content;
      min-width:54px;
      height:12px;
      border-radius:999px;
      padding:0 7px;
      font-size:5.5px;
      font-weight:800;
      letter-spacing:0.2px;
      line-height:1;
      text-transform:uppercase;
    }

    .universe-status.connected{
      background:linear-gradient(180deg,#0a8074,#06615d);
      color:#d8fff8;
      border:1px solid rgba(58,218,190,0.3);
    }

    .universe-status.disconnected{
      background:linear-gradient(180deg,#6b2020,#4b1717);
      color:#ffd8d8;
      border:1px solid rgba(255,120,120,0.34);
    }

    @media (max-width: 860px) {
      .universe-card{
        min-height:52px;
        padding:7px 8px;
        gap:8px;
      }
      .universe-logo-wrap{
        flex-basis:52px;
        width:52px;
      }
      .universe-logo-kraken{
        width:43px;
      }
      .universe-logo-bybit{
        width:67px;
      }
      .universe-name{
        font-size:13px;
      }
      .universe-status{
        min-width:46px;
        height:11px;
        padding:0 6px;
        font-size:4.4px;
      }
    }

    @media (max-width: 640px) {
      .universe-panel{
        width:min(62vw, 370px);
      }
      .health-panel{
        width:min(62vw, 370px);
      }
      .universe-card{
        min-height:47px;
        padding:6px 7px;
      }
      .universe-name{
        font-size:11px;
      }
      .universe-status{
        min-width:42px;
        height:10px;
        font-size:4.4px;
      }
    }

    .logrow{
      display:flex;
      gap:10px;
      padding:8px 8px;
      font-size:12px;
      border-bottom:1px solid rgba(38,49,66,0.55);
    }
    .logrow:last-child{ border-bottom:none; }

    .logtype{
      width:140px;
      font-weight:700;
    }
    .logtime{
      width:210px;
      color:var(--muted);
      flex:0 0 auto;
    }
    .logmsg{
      flex:1;
      overflow-wrap:anywhere;
    }

    .logtype.EXCHANGE_ALERT{ color:var(--warn); }
    .logtype.DELTA_ALERT{ color:#ffd37a; }
    .logtype.MN_ALERT{ color:#ff9ba8; }
    .logtype.SHEET_EXPORT{ color:#8bd4ff; }
    .logtype.ERROR{ color:var(--warn); }

    .err-red{ color:var(--warn) !important; }

    .card{
      background:linear-gradient(180deg,var(--panel),var(--panel2));
      border:1px solid var(--line);
      border-radius:10px;
      padding:12px 12px;
      margin:12px 0;
    }

    .admin-panel{
      width:min(520px, 90vw);
      padding:10px;
      background:linear-gradient(180deg,#070d18,#070c16);
      border-color:var(--blue-frame);
    }

    .controls{display:flex;gap:14px;align-items:center;flex-wrap:wrap;}
    label{font-size:12px;color:var(--muted);}
    input[type="number"]{background:#0b111a;border:1px solid var(--line);color:var(--text);border-radius:8px;padding:6px 8px;width:110px;}
    input[type="range"]{width:180px;}

    .banner{padding:10px 12px;border-radius:10px;border:1px solid var(--line);font-weight:600;}
    .banner.ok{background:rgba(31,143,95,0.18);}
    .banner.alert{background:rgba(255,90,90,0.15);border-color:rgba(255,90,90,0.35);}
    .text-gold{color:#ffd37a;font-weight:700;}
    .alerts-disabled-badge{
      display:inline-flex;
      align-items:center;
      padding:3px 8px;
      border-radius:999px;
      border:1px solid rgba(255,211,122,0.45);
      background:rgba(255,211,122,0.12);
      color:#ffd37a;
      font-size:12px;
      font-weight:700;
      letter-spacing:0.2px;
    }
    .hidden{display:none !important;}

    .section-title{
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap:10px;
      margin:18px 0 8px;
    }
    .section-title h2{margin:0;font-size:16px;}

    .btn{
      background:#0b111a;
      border:1px solid var(--line);
      color:var(--text);
      border-radius:8px;
      padding:6px 10px;
      font-size:12px;
      cursor:pointer;
      white-space:nowrap;
    }
    .btn:hover{filter:brightness(1.08);}

    .table-wrap{
      width:100%;
      overflow-x:auto;
      overflow-y:hidden;
      border-radius:10px;
    }

    table{
      width:100%;
      max-width:100%;
      border-collapse:separate;
      border-spacing:0;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:10px;
      table-layout:fixed;
    }

    thead th{
      background:linear-gradient(180deg,var(--hdr),#121a26);
      font-size:11.5px;
      color:var(--muted);
      text-align:left;
      padding:7px 8px;
      border-bottom:1px solid var(--line);
      border-right:1px solid var(--line);
      white-space:normal;
      overflow-wrap:anywhere;
      cursor:pointer;
      user-select:none;
    }
    thead th:last-child{border-right:none;}

    tbody td{
      font-size:11.5px;
      padding:6px 8px;
      border-bottom:1px solid rgba(38,49,66,0.65);
      border-right:1px solid rgba(38,49,66,0.65);
      white-space:normal;
      overflow-wrap:anywhere;
    }
    tbody td:last-child{border-right:none;}
    tbody tr:last-child td{border-bottom:none;}

    /* Row hover highlight (helps scanning across columns) */
    tbody tr:hover td{
      background: rgba(255,255,255,0.05);
    }

    /* Optional: left accent bar on hover */
    tbody tr:hover td:first-child{
      box-shadow: inset 3px 0 0 rgba(255,255,255,0.25);
    }

    .cell-alert{
      color: var(--neg);
      font-weight: 700;
      letter-spacing: 0.1px;
      text-shadow: 0 0 10px rgba(251, 113, 133, 0.12);
    }

    .cell-pos{
      color: var(--pos);
      font-weight: 700;
      letter-spacing: 0.1px;
      text-shadow: 0 0 10px rgba(45, 212, 191, 0.12);
    }

    .cell-neg{
      color: var(--neg);
      font-weight: 700;
      letter-spacing: 0.1px;
      text-shadow: 0 0 10px rgba(251, 113, 133, 0.12);
    }

    .dropdown{position:relative;display:inline-block;}
    .menu{
      position:absolute;
      left:0;
      top:34px;
      background:#0b111a;
      border:1px solid var(--line);
      border-radius:10px;
      padding:10px;
      min-width:240px;
      z-index:50;
      box-shadow:0 10px 30px rgba(0,0,0,0.35);
      display:none;
      max-height:260px;
      overflow:auto;
    }
    .menu.open{display:block;}
    .menu h4{margin:0 0 8px;font-size:12px;color:var(--muted);font-weight:600;}
    .menu label{display:flex;align-items:center;gap:8px;margin:6px 0;color:var(--text);font-size:12px;}

    .muted{color:var(--muted);font-size:12px;}
    a{color:#86b7ff;}

    .login-page{
      min-height:100vh;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:24px;
      box-sizing:border-box;
      background:
        radial-gradient(120% 150% at 10% 10%, rgba(58,97,180,0.20), transparent 60%),
        radial-gradient(140% 180% at 90% 90%, rgba(31,143,95,0.12), transparent 58%),
        var(--bg);
    }
    .login-card{
      width:min(430px, 100%);
      background:linear-gradient(180deg,var(--panel),var(--panel2));
      border:1px solid var(--line);
      border-radius:12px;
      padding:20px;
      box-shadow:0 16px 50px rgba(0,0,0,0.42);
    }
    .login-title{
      margin:0 0 6px;
      font-size:24px;
      line-height:1.1;
    }
    .login-subtitle{
      margin:0 0 14px;
      color:var(--muted);
      font-size:13px;
    }
    .login-error{
      margin:0 0 12px;
      padding:9px 10px;
      border-radius:8px;
      border:1px solid rgba(255,90,90,0.35);
      background:rgba(255,90,90,0.15);
      color:#ffc8c8;
      font-size:12px;
      font-weight:700;
    }
    .login-form{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .login-form input[type="email"],
    .login-form input[type="password"]{
      background:#0b111a;
      border:1px solid var(--line);
      color:var(--text);
      border-radius:8px;
      padding:8px 10px;
      font-size:13px;
    }
    .login-submit{
      margin-top:8px;
      font-size:13px;
      padding:8px 12px;
    }