/* ==========================================================
   ROCKET RELAY SERVER
   Shared external stylesheet for:
   - Dashboard
   - Login
   - Controller
   - Tags

   Each legacy page is namespaced by its body class so that
   similarly named selectors do not collide across pages.
========================================================== */

html{
  width:100%;
  min-height:100%;
}


/* ==========================================================
   CONTROLLER PAGE (namespaced)
========================================================== */

body.page-controller{
  --bg:#020505;--line:#1d4136;--yellow:#ffe100;--green:#39f08d;
  --red:#ff5368;--blue:#5bbfff;--text:#f3f7f6;--muted:#83958e;
}
body.page-controller,
body.page-controller *{box-sizing:border-box}
body.page-controller,
body.page-controller{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:Inter,"Segoe UI",Arial,sans-serif}
body.page-controller{
  background:
    radial-gradient(circle at 18% 0%,rgba(57,240,141,.07),transparent 28%),
    radial-gradient(circle at 82% 0%,rgba(255,225,0,.06),transparent 27%),
    #020505;
}
body.page-controller .top{min-height:58px;display:flex;align-items:center;padding:0 18px;background:linear-gradient(90deg,#06100c,#090d0f 50%,#06100c);border-bottom:1px solid var(--line)}
body.page-controller .brand{color:var(--yellow);font-weight:900}body.page-controller .brand small{margin-left:10px;color:var(--green);font:700 10px Consolas,monospace}
body.page-controller .back{margin-left:auto;text-decoration:none;color:#d9e6e1;border:1px solid #315448;background:#0a1411;padding:7px 11px;border-radius:6px;font-size:12px;font-weight:800}
body.page-controller .wrap{padding:20px}body.page-controller .head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:16px}
body.page-controller h1{margin:0;font-size:22px}body.page-controller .sub{margin-top:5px;color:var(--muted);font-size:12px}
body.page-controller .chips{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
body.page-controller .chip{border:1px solid var(--line);background:#06100d;border-radius:999px;padding:5px 9px;color:var(--muted);font:700 10px Consolas,monospace}
body.page-controller .chip.green{color:var(--green);border-color:#1e6c49}body.page-controller .chip.yellow{color:var(--yellow);border-color:#6c6100}
body.page-controller .card{max-width:920px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:linear-gradient(180deg,rgba(5,10,12,.98),rgba(2,6,7,.98));box-shadow:0 16px 38px rgba(0,0,0,.28)}
body.page-controller .card-head{display:flex;align-items:center;padding:12px 14px;background:#07100e;border-bottom:1px solid #193029}
body.page-controller .icon{width:36px;height:36px;display:grid;place-items:center;border:1px solid #625900;border-radius:8px;background:#11130a;color:var(--yellow);font-weight:900;margin-right:10px}
body.page-controller .title{color:var(--yellow);font-size:14px;font-weight:900}body.page-controller .desc{margin-top:2px;color:var(--muted);font-size:10px}body.page-controller .body{padding:14px}
body.page-controller .metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
body.page-controller .metric{padding:10px;border:1px solid #1b382f;border-radius:7px;background:#06100d}body.page-controller .metric span{display:block;color:var(--muted);font-size:9px;margin-bottom:4px}body.page-controller .metric b{color:var(--green);font:900 18px Consolas,monospace}
body.page-controller .section-title{display:flex;align-items:center;justify-content:space-between;margin:13px 0 6px;color:#cfe0da;font-size:11px;font-weight:900}
body.page-controller .section-title small{color:var(--muted);font:500 9px Consolas,monospace}

body.page-controller /* About 10 rows visible,
body.page-controller then scroll. */
.client-list{max-height:350px;overflow-y:auto;overflow-x:hidden;border:1px solid #173027;border-radius:7px;background:#040b09}
body.page-controller .client-row{min-height:34px;display:grid;grid-template-columns:130px 88px minmax(150px,1fr) 72px;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid #10231d;font:10px Consolas,monospace}
body.page-controller .client-row:last-child{border-bottom:0}body.page-controller .tabid{color:var(--blue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.page-controller .state{font-weight:800}body.page-controller .state.in{color:var(--green)}body.page-controller .state.out{color:var(--yellow)}
body.page-controller .account{color:#d8e7e2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}body.page-controller .empty{color:#66776f;font-size:11px;padding:12px}
body.page-controller .row-logout{height:25px;border:1px solid #74303a;border-radius:5px;background:#16090c;color:#ff8794;font:800 9px Consolas,monospace;cursor:pointer}
body.page-controller .row-logout:disabled{opacity:.35;cursor:default}

body.page-controller .login-box{margin-top:12px;border:1px solid #5e5500;border-radius:9px;background:linear-gradient(180deg,#0d1008,#060b09);overflow:hidden}
body.page-controller .login-head{padding:9px 10px;border-bottom:1px solid #393500;color:var(--yellow);font-size:11px;font-weight:900}
body.page-controller .login-body{padding:10px}body.page-controller .note{color:#91a49c;font-size:10px;line-height:1.55;margin-bottom:8px}
body.page-controller .credentials{width:100%;min-height:145px;resize:vertical;padding:8px 9px;border:1px solid #2a4b40;border-radius:7px;background:#07111a;color:#f4f7f8;outline:none;font:11px Consolas,monospace}
body.page-controller .credentials:focus{border-color:#c5b200;box-shadow:0 0 0 2px rgba(255,225,0,.05)}
body.page-controller .actions{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:8px;margin-top:8px}body.page-controller .btn{height:38px;border-radius:7px;font-weight:900;cursor:pointer}
body.page-controller .btn.login{border:1px solid #d4bf00;background:linear-gradient(180deg,#ffe82f,#eacb00);color:#111}
body.page-controller .btn.reload{border:1px solid #2f6652;background:#0a1712;color:var(--green)}
body.page-controller .btn.logout{border:1px solid #74303a;background:#16090c;color:#ff8794}
body.page-controller .action-status{margin-top:8px;min-height:30px;display:flex;align-items:center;padding:6px 8px;border:1px solid #173027;border-radius:6px;background:#040b09;color:var(--muted);font:10px Consolas,monospace}

body.page-controller .event-setup{
  margin-top:12px;
  border:1px solid #315145;
  border-radius:9px;
  background:#06100d;
  padding:10px;
}
body.page-controller .event-setup-title{
  color:var(--yellow);
  font-size:11px;
  font-weight:900;
  margin-bottom:8px;
}
body.page-controller .field-label{
  display:block;
  margin:8px 0 4px;
  color:#cfe0da;
  font-size:10px;
  font-weight:800;
}
body.page-controller .event-input,
body.page-controller .event-body{
  width:100%;
  border:1px solid #294a3f;
  border-radius:7px;
  background:#07111a;
  color:#f4f7f8;
  outline:none;
  padding:8px 9px;
  font:11px Consolas,monospace;
}
body.page-controller .event-input{height:38px}
body.page-controller .event-body{min-height:105px;resize:vertical}
body.page-controller .event-input:focus,
body.page-controller .event-body:focus{
  border-color:#c5b200;
  box-shadow:0 0 0 2px rgba(255,225,0,.05);
}
body.page-controller .shoot{margin-top:12px;width:100%;height:42px;border:1px solid #d4bf00;border-radius:7px;background:linear-gradient(180deg,#ffe82f,#eacb00);color:#111;font-weight:900;cursor:pointer}

body.page-controller .card + .card{margin-top:16px}

body.page-controller .gmail-card{
  border-color:#183b5b;
  background:linear-gradient(180deg,rgba(4,11,20,.98),rgba(2,7,13,.98));
}
body.page-controller .gmail-card .card-head{
  background:linear-gradient(90deg,#061221,#07100e);
  border-bottom-color:#17364f;
}
body.page-controller .gmail-icon{
  border-color:#175a85;
  background:#071522;
  color:#5bbfff;
}
body.page-controller .gmail-title{color:#5bbfff}
body.page-controller .gmail-card .metric{
  border-color:#173852;
  background:#05111c;
}
body.page-controller .gmail-card .metric b{color:#5bbfff}
body.page-controller .gmail-list{
  border-color:#15354d;
  background:#030b12;
}
body.page-controller .gmail-row{
  min-height:34px;
  display:grid;
  grid-template-columns:130px 120px minmax(180px,1fr);
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-bottom:1px solid #102738;
  font:10px Consolas,monospace;
}
body.page-controller .gmail-row:last-child{border-bottom:0}
body.page-controller .gmail-page{
  color:#5bbfff;
  font-weight:800;
  white-space:nowrap;
}
body.page-controller .gmail-label{
  color:#d8e7f3;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
body.page-controller .gmail-controls{
  margin-top:12px;
  padding:12px;
  border:1px solid #174265;
  border-radius:9px;
  background:linear-gradient(180deg,#061522,#040d15);
}
body.page-controller .gmail-controls-title{
  color:#5bbfff;
  font-size:11px;
  font-weight:900;
  margin-bottom:6px;
}
body.page-controller .gmail-note{
  color:#8fa7b9;
  font-size:10px;
  line-height:1.55;
  margin-bottom:10px;
}
body.page-controller .gmail-login-btn{
  width:100%;
  height:42px;
  border:1px solid #2688c5;
  border-radius:7px;
  background:linear-gradient(180deg,#68c9ff,#2998da);
  color:#03111b;
  font-weight:900;
  cursor:pointer;
}
body.page-controller .gmail-login-btn:hover{filter:brightness(1.08)}

body.page-controller .gmail-account-box{
  margin-top:12px;
  padding:12px;
  border:1px solid #174265;
  border-radius:9px;
  background:linear-gradient(180deg,#061522,#040d15);
}
body.page-controller .gmail-account-title{
  color:#5bbfff;
  font-size:11px;
  font-weight:900;
  margin-bottom:5px;
}
body.page-controller .gmail-account-note{
  color:#8fa7b9;
  font-size:10px;
  line-height:1.55;
  margin-bottom:8px;
}
body.page-controller .gmail-account-list{
  width:100%;
  min-height:128px;
  resize:vertical;
  padding:8px 9px;
  border:1px solid #245574;
  border-radius:7px;
  outline:none;
  background:#030b12;
  color:#eaf7ff;
  font:11px Consolas,monospace;
}
body.page-controller .gmail-account-list:focus{
  border-color:#5bbfff;
  box-shadow:0 0 0 2px rgba(91,191,255,.06);
}
body.page-controller .gmail-account-count{
  margin-top:6px;
  color:#7894ab;
  font:10px Consolas,monospace;
}
body.page-controller .gmail-login-all{
  margin-top:9px;
  width:100%;
  height:42px;
  border:1px solid #34b8e8;
  border-radius:7px;
  background:linear-gradient(180deg,#46def5,#1d9fce);
  color:#031118;
  font-weight:900;
  cursor:pointer;
}
body.page-controller .gmail-login-all:hover{filter:brightness(1.08)}
body.page-controller .gmail-login-all:disabled{opacity:.45;cursor:not-allowed}

body.page-controller .gmail-status{
  margin-top:8px;
  min-height:30px;
  display:flex;
  align-items:center;
  padding:6px 8px;
  border:1px solid #17364e;
  border-radius:6px;
  background:#030b12;
  color:#8fa7b9;
  font:10px Consolas,monospace;
}

body.page-controller .modal-wrap{position:fixed;inset:0;display:none;place-items:center;background:rgba(0,0,0,.72);backdrop-filter:blur(5px);z-index:99}body.page-controller .modal-wrap.show{display:grid}
body.page-controller .modal{width:min(560px,calc(100vw - 36px));background:#05090b;border:1px solid #625900;border-radius:13px;overflow:hidden;box-shadow:0 24px 65px rgba(0,0,0,.6)}
body.page-controller .modal-head{display:flex;align-items:center;padding:13px 15px;border-bottom:1px solid #263a34}body.page-controller .modal-head b{color:var(--yellow)}body.page-controller .close{margin-left:auto;border:0;background:transparent;color:#aaa;font-size:19px;cursor:pointer}
body.page-controller .modal-body{padding:16px}body.page-controller .info{border:1px solid #1e4638;background:#06100d;border-radius:8px;padding:12px;color:#9fb0aa;font-size:12px;line-height:1.6}body.page-controller .info strong{color:var(--green)}

body.page-controller /* ===== Controller Module Menu ===== */
.module-menu-wrap{
  margin:0 0 14px;
  padding:9px;
  border:1px solid #1d4136;
  border-radius:10px;
  background:linear-gradient(180deg,#07100e,#040a08);
  overflow-x:auto;
  overflow-y:hidden;
}

body.page-controller .module-menu{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:8px;
  min-width:max-content;
}

body.page-controller .module-tab{
  height:38px;
  min-width:118px;
  padding:0 16px;
  border-radius:8px;
  border:1px solid #315448;
  background:#08130f;
  color:#9eb0aa;
  font-size:11px;
  font-weight:900;
  cursor:pointer;
  transition:
    transform .16s ease,
    filter .16s ease,
    box-shadow .16s ease,
    border-color .16s ease;
}

body.page-controller .module-tab:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
}

body.page-controller .module-tab.facebook.active{
  color:#111;
  border-color:#d4bf00;
  background:linear-gradient(180deg,#ffe82f,#eacb00);
  box-shadow:0 0 16px rgba(255,225,0,.12);
}

body.page-controller .module-tab.gmail.active{
  color:#03111b;
  border-color:#2688c5;
  background:linear-gradient(180deg,#68c9ff,#2998da);
  box-shadow:0 0 16px rgba(91,191,255,.14);
}

body.page-controller .module-panel{
  display:none;
}

body.page-controller .module-panel.active{
  display:block;
}

body.page-controller /* Keep future controller modules compact */
.card.module-panel{
  margin-top:0 !important;
}

body.page-controller /* Gmail: show about 20 client rows,
body.page-controller then internal scroll */
.gmail-list{
  max-height:692px !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  scrollbar-width:thin;
  scrollbar-color:#2688c5 #030b12;
}

body.page-controller .gmail-list::-webkit-scrollbar{
  width:8px;
}

body.page-controller .gmail-list::-webkit-scrollbar-track{
  background:#030b12;
}

body.page-controller .gmail-list::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#68c9ff,#2998da);
  border-radius:10px;
  border:2px solid #030b12;
}

body.page-controller /* Facebook keeps its own existing scroll behavior */
.client-list:not(.gmail-list){
  overflow-y:auto;
}




/* ==========================================================
   DASHBOARD PAGE (namespaced)
========================================================== */


  body.page-dashboard{
    --bg:#02060d;
    --bg2:#07111f;
    --panel:rgba(5,14,29,.90);
    --panel2:rgba(7,18,36,.94);
    --panel3:rgba(4,11,24,.92);

    --text:#eaf6ff;
    --muted:#8297b7;
    --line:rgba(91,145,214,.22);
    --line2:rgba(0,225,255,.28);

    --ok:#3cff8d;
    --bad:#ff5263;
    --warn:#ffca43;

    --cyan:#00eaff;
    --blue:#168bff;
    --purple:#9148ff;
    --gold:#ffd85a;
    --orange:#ff9f2f;

    --header-h:68px;
    --accent:#00eaff;
  }

  body.page-dashboard,
body.page-dashboard *{
    box-sizing:border-box;
  }

  body.page-dashboard,
body.page-dashboard{
    width:100%;
    height:100%;
  }

  body.page-dashboard{
    margin:0;
    min-height:100vh;
    overflow:hidden;
    color:var(--text);

    font-family:
      Inter,
      "Segoe UI",
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      sans-serif;

    background:
      radial-gradient(circle at 12% -5%, rgba(0,174,255,.15), transparent 28%),
      radial-gradient(circle at 88% 15%, rgba(130,45,255,.12), transparent 32%),
      radial-gradient(circle at 50% 105%, rgba(0,235,255,.08), transparent 35%),
      linear-gradient(145deg,#01040a 0%,#030916 48%,#020610 100%);
  }

  body.page-dashboard::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;

    background-image:
      linear-gradient(rgba(0,159,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,159,255,.035) 1px,transparent 1px);

    background-size:42px 42px;
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.86),transparent 88%);
  }

  body.page-dashboard::after{
    content:"";
    position:fixed;
    width:560px;
    height:560px;
    right:-220px;
    bottom:-270px;
    border-radius:50%;
    pointer-events:none;
    z-index:0;

    background:
      radial-gradient(circle,
        rgba(123,55,255,.14),
        rgba(0,176,255,.055) 46%,
        transparent 70%);
    filter:blur(12px);
  }

  body.page-dashboard .app,
body.page-dashboard .app-header,
body.page-dashboard .toast-wrap{
    position:relative;
    z-index:2;
  }

  body.page-dashboard .app{
    height:calc(100vh - var(--header-h));
    display:flex;
    gap:0;
    padding:8px;
    overflow:hidden;
  }

  body.page-dashboard /* =========================================================
     HEADER
  ========================================================= */

  .app-header{
    height:var(--header-h);
    display:flex;
    align-items:center;
    gap:14px;

    padding:9px 14px;

    background:
      linear-gradient(
        90deg,
        rgba(2,7,16,.98),
        rgba(5,16,33,.96) 45%,
        rgba(3,8,18,.98)
      );

    border-bottom:1px solid rgba(74,145,224,.24);

    box-shadow:
      0 12px 30px rgba(0,0,0,.28),
      inset 0 -1px 0 rgba(0,234,255,.05);

    backdrop-filter:blur(18px);
  }

  body.page-dashboard .app-header::after{
    content:"";
    position:absolute;
    left:17%;
    right:17%;
    bottom:-1px;
    height:1px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(0,234,255,.75),
        rgba(142,66,255,.55),
        transparent
      );

    box-shadow:0 0 12px rgba(0,234,255,.4);
  }

  body.page-dashboard .brand{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:300px;
  }

  body.page-dashboard .logo{
    position:relative;
    width:42px;
    height:42px;
    flex:0 0 42px;

    display:grid;
    place-items:center;

    border-radius:13px;
    border:1px solid rgba(0,234,255,.30);

    background:
      linear-gradient(145deg,rgba(0,165,255,.10),rgba(116,52,255,.08));

    color:var(--cyan);
    font-size:19px;

    box-shadow:
      0 0 22px rgba(0,202,255,.12),
      inset 0 0 20px rgba(0,234,255,.06);
  }

  body.page-dashboard .logo::before{
    content:"";
    position:absolute;
    inset:5px;
    border-radius:9px;
    border:1px solid rgba(0,234,255,.10);
  }

  body.page-dashboard .brand-title{
    color:#f4fbff;
    font-size:15px;
    font-weight:800;
    letter-spacing:.35px;
    text-shadow:0 0 13px rgba(0,234,255,.08);
  }

  body.page-dashboard .brand-sub{
    margin-top:2px;
    color:#7086a7;
    font-size:10px;
    letter-spacing:.2px;
  }

  body.page-dashboard .ticker{
    margin-left:auto;
    overflow:hidden;
    position:relative;
    height:30px;

    display:flex;
    align-items:center;
    gap:9px;

    padding-left:12px;

    border-left:1px solid rgba(80,133,198,.20);
  }

  body.page-dashboard .ticker__inner{
    white-space:nowrap;
    display:inline-block;
    padding-left:100%;

    color:#a9bdd7;
    font-size:11px;
    letter-spacing:.2px;

    animation:ticker-scroll 22s linear infinite;
  }

  @keyframes ticker-scroll{
    0%{transform:translateX(0)}
    100%{transform:translateX(-100%)}
  }

  body.page-dashboard .status-chip{
    flex:0 0 auto;

    padding:4px 8px;

    border-radius:999px;
    border:1px solid rgba(92,142,202,.22);

    background:rgba(2,11,24,.72);

    color:#8194af;
    font-size:9px;
    font-weight:750;

    box-shadow:inset 0 0 12px rgba(0,150,255,.03);
  }

  body.page-dashboard .status-chip.ok,
body.page-dashboard .ok{
    color:#77ffad;
    border-color:rgba(60,255,141,.25);
    box-shadow:0 0 12px rgba(60,255,141,.08);
  }

  body.page-dashboard .status-chip.bad,
body.page-dashboard .bad{
    color:#ff8f9b;
    border-color:rgba(255,82,99,.25);
    box-shadow:0 0 12px rgba(255,82,99,.08);
  }

  body.page-dashboard /* =========================================================
     PANELS
  ========================================================= */

  .panel{
    position:relative;
    margin:5px;

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid rgba(74,132,202,.24);
    border-radius:16px;

    background:
      linear-gradient(
        150deg,
        rgba(6,17,34,.94),
        rgba(2,8,19,.93)
      );

    backdrop-filter:blur(18px);

    box-shadow:
      0 14px 38px rgba(0,0,0,.28),
      inset 0 0 42px rgba(0,167,255,.018);
  }

  body.page-dashboard .panel::before{
    content:"";
    position:absolute;
    top:0;
    left:9%;
    right:9%;
    height:1px;
    pointer-events:none;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(0,234,255,.52),
        rgba(143,70,255,.38),
        transparent
      );

    box-shadow:0 0 11px rgba(0,234,255,.18);
  }

  body.page-dashboard .left-panel{
    flex:0 0 290px;
  }

  body.page-dashboard .middle-panel{
    flex:1;
    min-width:0;
  }

  body.page-dashboard .right-panel{
    flex:0 0 330px;
  }

  body.page-dashboard .scroll-area{
    overflow-y:auto;
    overflow-x:hidden;
    flex:1;
    scrollbar-width:thin;
    scrollbar-color:rgba(0,205,255,.46) rgba(3,10,21,.7);
  }

  body.page-dashboard .scroll-area::-webkit-scrollbar,
body.page-dashboard .table-wrap::-webkit-scrollbar{
    width:8px;
    height:8px;
  }

  body.page-dashboard .scroll-area::-webkit-scrollbar-track,
body.page-dashboard .table-wrap::-webkit-scrollbar-track{
    background:rgba(2,8,18,.8);
  }

  body.page-dashboard .scroll-area::-webkit-scrollbar-thumb,
body.page-dashboard .table-wrap::-webkit-scrollbar-thumb{
    border-radius:10px;
    border:2px solid rgba(2,8,18,.8);

    background:
      linear-gradient(
        to bottom,
        rgba(0,132,255,.85),
        rgba(0,219,234,.85),
        rgba(122,67,255,.8)
      );
  }

  body.page-dashboard /* =========================================================
     SECTIONS / FIELDS
  ========================================================= */

  .section{
    padding:10px;
    border-bottom:1px solid rgba(83,127,180,.14);
  }

  body.page-dashboard .section.noborder{
    border-bottom:none;
    padding:7px 9px;
  }

  body.page-dashboard .section.noborder + .section.noborder{
    padding-top:3px;
  }

  body.page-dashboard .section label,
body.page-dashboard .field-label{
    display:block;
    margin-bottom:4px;

    color:#9bb0ca;
    font-size:10px;
    font-weight:780;
    letter-spacing:.2px;
  }

  body.page-dashboard .input,
body.page-dashboard textarea,
body.page-dashboard .data-box,
body.page-dashboard .mini-input{
    width:100%;

    color:#dfeeff;

    border:1px solid rgba(80,132,193,.24);
    border-radius:8px;

    background:
      linear-gradient(
        135deg,
        rgba(3,13,27,.92),
        rgba(6,17,34,.90)
      );

    outline:none;

    box-shadow:
      inset 0 0 14px rgba(0,133,255,.025);

    transition:
      border-color .18s,
      box-shadow .18s,
      background .18s;
  }

  body.page-dashboard .input:focus,
body.page-dashboard textarea:focus,
body.page-dashboard .data-box:focus,
body.page-dashboard .mini-input:focus{
    border-color:rgba(0,234,255,.52);

    background:rgba(4,15,30,.98);

    box-shadow:
      0 0 0 3px rgba(0,234,255,.035),
      0 0 18px rgba(0,234,255,.05);
  }

  body.page-dashboard .input,
body.page-dashboard textarea{
    padding:6px 8px;
    font-size:10.5px;
  }

  body.page-dashboard .input::placeholder,
body.page-dashboard textarea::placeholder,
body.page-dashboard .data-box::placeholder{
    color:#526783;
  }

  body.page-dashboard textarea{
    min-height:52px;
    resize:vertical;
  }

  body.page-dashboard #subject,
body.page-dashboard #r-subject{
    height:33px;
  }

  body.page-dashboard #body,
body.page-dashboard #r-body{
    min-height:82px;
  }

  body.page-dashboard #html,
body.page-dashboard #r-html{
    min-height:104px;
  }

  body.page-dashboard .data-box{
    min-height:118px;
    resize:vertical;

    padding:7px;

    font-size:10.5px;
  }

  body.page-dashboard .data-box[readonly]{
    cursor:not-allowed;
    opacity:.88;

    background:
      linear-gradient(
        135deg,
        rgba(2,10,20,.96),
        rgba(4,13,26,.94)
      );
  }

  body.page-dashboard .label-row{
    display:flex;
    align-items:center;
    gap:7px;

    margin:7px 0 4px;
  }

  body.page-dashboard .count-pill{
    flex:0 0 auto;

    padding:3px 7px;

    border-radius:999px;
    border:1px solid rgba(86,138,201,.20);

    background:rgba(3,12,25,.68);

    color:#90a5c1;
    font-size:9px;

    box-shadow:inset 0 0 10px rgba(0,159,255,.025);
  }

  body.page-dashboard .count-pill strong{
    color:var(--gold);
  }

  body.page-dashboard .tools-row,
body.page-dashboard .action-row{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;

    margin-top:7px;
  }

  body.page-dashboard .mini-label{
    color:#8399b7;
    font-size:9.5px;
    font-weight:700;
  }

  body.page-dashboard .mini-input{
    width:64px;
    height:28px;

    padding:0 5px;

    text-align:center;
    font-size:10px;
  }

  body.page-dashboard /* =========================================================
     BUTTONS
  ========================================================= */

  .btn,
body.page-dashboard .btn-chip,
body.page-dashboard .btn.push{
    position:relative;
    overflow:hidden;

    border-radius:8px;

    cursor:pointer;

    transition:
      transform .16s,
      filter .16s,
      box-shadow .16s,
      border-color .16s;
  }

  body.page-dashboard .btn{
    width:100%;
    padding:7px;

    border:1px solid rgba(60,255,141,.28);

    background:
      linear-gradient(
        135deg,
        #1dbd5a,
        #189b4c
      );

    color:white;
    font-size:11px;
    font-weight:750;

    box-shadow:0 0 14px rgba(34,197,94,.10);
  }

  body.page-dashboard .btn:hover,
body.page-dashboard .btn-chip:hover,
body.page-dashboard .btn.push:hover{
    transform:translateY(-1px);
    filter:brightness(1.08);
  }

  body.page-dashboard .btn:active,
body.page-dashboard .btn-chip:active,
body.page-dashboard .btn.push:active{
    transform:translateY(0);
  }

  body.page-dashboard .btn.push{
    width:auto;

    display:flex;
    align-items:center;
    gap:5px;

    padding:7px 10px;

    border:1px solid rgba(255,211,79,.48);

    background:
      linear-gradient(
        135deg,
        #ffe05d,
        #ffb629
      );

    color:#091017;

    font-size:10.5px;
    font-weight:820;

    box-shadow:
      0 0 16px rgba(255,186,41,.12),
      inset 0 1px 0 rgba(255,255,255,.28);
  }

  body.page-dashboard .btn-chip{
    width:auto;

    padding:6px 9px;

    border:1px solid rgba(81,136,201,.24);

    background:
      linear-gradient(
        135deg,
        rgba(6,22,43,.96),
        rgba(3,12,27,.97)
      );

    color:#d8e9fb;

    font-size:9.5px;
    font-weight:740;

    box-shadow:
      inset 0 0 14px rgba(0,146,255,.025);
  }

  body.page-dashboard .btn-gold{
    background:linear-gradient(135deg,#ffe66a,#ffbd35) !important;
    border-color:rgba(255,216,74,.66) !important;
    color:#091019 !important;
    font-weight:800 !important;

    box-shadow:
      0 0 16px rgba(255,216,74,.14) !important;
  }

  body.page-dashboard .btn-orange{
    background:linear-gradient(135deg,#ffb035,#ff8f24) !important;
    border-color:rgba(255,159,47,.65) !important;
    color:#0d1015 !important;
    font-weight:800 !important;

    box-shadow:
      0 0 16px rgba(255,159,47,.14) !important;
  }

  body.page-dashboard .btn-red{
    background:linear-gradient(135deg,#ff5a67,#da2638) !important;
    border-color:rgba(255,82,99,.62) !important;
    color:#fff !important;
    font-weight:800 !important;

    box-shadow:
      0 0 16px rgba(255,82,99,.14) !important;
  }

  body.page-dashboard .btn-green{
    background:linear-gradient(135deg,#41e77c,#21b95e) !important;
    border-color:rgba(60,255,141,.50) !important;
    color:#06140c !important;
    font-weight:800 !important;

    box-shadow:
      0 0 16px rgba(60,255,141,.12) !important;
  }

  body.page-dashboard .btn-navy{
    background:linear-gradient(135deg,#3158ff,#2733b8) !important;
    border-color:rgba(78,106,255,.58) !important;
    color:#fff !important;
    font-weight:800 !important;

    box-shadow:
      0 0 16px rgba(65,86,255,.14) !important;
  }

  body.page-dashboard .btn-white,
body.page-dashboard .tpush{
    background:
      linear-gradient(
        135deg,
        rgba(246,251,255,.96),
        rgba(220,234,247,.94)
      ) !important;

    border-color:rgba(255,255,255,.70) !important;

    color:#07111d !important;

    font-weight:760 !important;

    box-shadow:
      0 0 13px rgba(255,255,255,.08) !important;
  }

  body.page-dashboard .btn-white:hover,
body.page-dashboard .tpush:hover{
    background:#fff !important;
    box-shadow:
      0 0 18px rgba(255,255,255,.17) !important;
  }

  body.page-dashboard .tpush{
    border-radius:7px !important;
  }

  body.page-dashboard .tpush[disabled],
body.page-dashboard .tpush.disabled{
    opacity:.45;
    cursor:not-allowed;
  }

  body.page-dashboard /* =========================================================
     CHECKBOX OPTIONS
  ========================================================= */

  .push-options{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));

    gap:5px 7px;

    margin-top:7px;

    font-size:8.8px;
  }

  body.page-dashboard .chk{
    min-width:0;

    display:flex;
    align-items:center;
    gap:5px;

    color:#aabbd0;
  }

  body.page-dashboard .chk input{
    appearance:none;

    width:13px;
    height:13px;

    flex:0 0 13px;

    display:grid;
    place-items:center;

    border:1px solid rgba(110,156,211,.40);
    border-radius:4px;

    background:rgba(242,248,255,.94);

    cursor:pointer;

    transition:.16s ease;
  }

  body.page-dashboard .chk input:checked{
    border-color:var(--cyan);

    background:
      linear-gradient(
        135deg,
        var(--cyan),
        var(--blue)
      );

    box-shadow:
      0 0 10px rgba(0,234,255,.24);
  }

  body.page-dashboard .chk input:checked::after{
    content:"✓";

    color:#03141c;
    font-size:9px;
    font-weight:900;
    line-height:1;
  }

  body.page-dashboard .chk input:disabled{
    opacity:.35;
    cursor:not-allowed;
  }

  body.page-dashboard .chk input:focus-visible{
    outline:2px solid rgba(0,234,255,.48);
    outline-offset:1px;
  }

  body.page-dashboard .chk span{
    pointer-events:none;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  @media(max-width:320px){
    body.page-dashboard .push-options{
      grid-template-columns:repeat(2,minmax(0,1fr));
    }
  }

  body.page-dashboard /* =========================================================
     MIDDLE PANEL
  ========================================================= */

  .topbar{
    min-height:48px;

    display:flex;
    align-items:center;
    gap:7px;

    padding:7px 9px;

    border-bottom:1px solid rgba(83,135,199,.18);

    background:
      linear-gradient(
        90deg,
        rgba(4,14,29,.98),
        rgba(7,18,36,.94),
        rgba(4,13,27,.98)
      );

    font-size:11px;
  }

  body.page-dashboard .topbar .dot{
    width:8px;
    height:8px;
    flex:0 0 8px;

    border-radius:50%;

    background:var(--warn);

    box-shadow:
      0 0 8px rgba(255,202,67,.65);
  }

  body.page-dashboard .topbar .title{
    color:#e9f7ff;

    font-size:11px;
    font-weight:800;

    letter-spacing:.25px;

    white-space:nowrap;
  }

  body.page-dashboard .pill{
    margin-left:auto;

    padding:4px 7px;

    border-radius:999px;
    border:1px solid rgba(80,137,202,.23);

    background:rgba(2,10,22,.72);

    color:#91a7c2;

    font-size:9px;

    box-shadow:inset 0 0 10px rgba(0,150,255,.025);
  }

  body.page-dashboard .search{
    display:flex;
    align-items:center;
    gap:6px;

    padding:7px 8px;

    border-bottom:1px solid rgba(83,135,199,.16);

    background:rgba(4,12,26,.54);
  }

  body.page-dashboard .search .input{
    flex:1;
    min-width:0;
    height:30px;
  }

  body.page-dashboard .table-wrap{
    flex:1;
    overflow:auto;

    scrollbar-width:thin;
    scrollbar-color:rgba(0,205,255,.46) rgba(3,10,21,.7);
  }

  body.page-dashboard table{
    width:100%;
    min-width:620px;

    border-collapse:separate;
    border-spacing:0;

    font-size:10.5px;
  }

  body.page-dashboard thead th{
    position:sticky;
    top:0;
    z-index:10;

    padding:8px 8px;

    text-align:left;

    color:#8298b6;

    font-size:9px;
    font-weight:800;

    text-transform:uppercase;
    letter-spacing:.75px;

    border-bottom:1px solid rgba(77,132,198,.22);

    background:
      linear-gradient(
        180deg,
        rgba(6,17,34,.99),
        rgba(3,10,22,.99)
      );
  }

  body.page-dashboard thead th:first-child,
body.page-dashboard tbody td:first-child{
    min-width:38px;
    text-align:center;
  }

  body.page-dashboard tbody td{
    padding:7px 8px;

    color:#a9bad0;

    border-bottom:1px solid rgba(76,116,164,.11);

    white-space:nowrap;

    transition:
      background .16s,
      color .16s;
  }

  body.page-dashboard tbody tr:hover{
    background:
      linear-gradient(
        90deg,
        rgba(0,176,255,.055),
        rgba(119,48,255,.025),
        transparent
      );
  }

  body.page-dashboard tbody tr:hover td{
    color:#d7e9fa;
  }

  body.page-dashboard .tag{
    display:inline-flex;
    align-items:center;

    min-height:21px;

    padding:3px 6px;

    border-radius:6px;
    border:1px solid rgba(0,213,255,.18);

    background:
      linear-gradient(
        135deg,
        rgba(0,150,255,.075),
        rgba(104,44,255,.045)
      );

    color:#a9eefa;

    font-family:
      "Cascadia Code",
      Consolas,
      monospace;

    font-size:9px;
  }

  body.page-dashboard .email-text{
    color:#cdeaff;
  }

  body.page-dashboard .foot{
    min-height:29px;

    display:flex;
    align-items:center;
    gap:6px;

    padding:5px 8px;

    border-top:1px solid rgba(83,135,199,.16);

    background:
      linear-gradient(
        90deg,
        rgba(3,11,23,.98),
        rgba(5,15,30,.95)
      );

    color:#7087a5;
    font-size:9px;
  }

  body.page-dashboard /* =========================================================
     TOAST
  ========================================================= */

  .toast-wrap{
    position:fixed;

    left:14px;
    bottom:14px;

    z-index:9999;

    display:flex;
    flex-direction:column;
    gap:9px;

    pointer-events:none;
  }

  body.page-dashboard .toast{
    min-width:230px;
    max-width:430px;

    display:flex;
    align-items:center;
    gap:10px;

    padding:11px 13px;

    border-radius:12px;
    border:1px solid rgba(0,234,255,.26);

    color:#e7f7ff;

    background:
      linear-gradient(
        135deg,
        rgba(5,21,40,.96),
        rgba(5,10,24,.95)
      );

    box-shadow:
      0 14px 34px rgba(0,0,0,.38),
      0 0 24px rgba(0,234,255,.08);

    backdrop-filter:blur(13px);

    font-size:11px;
    font-weight:700;

    animation:toast-left-in 320ms cubic-bezier(.2,.85,.25,1.2);

    pointer-events:auto;
  }

  body.page-dashboard .toast.hide{
    animation:toast-left-out 220ms cubic-bezier(.4,0,.2,1) forwards;
  }

  body.page-dashboard .toast .dot{
    width:9px;
    height:9px;
    flex:0 0 9px;

    border-radius:50%;

    background:radial-gradient(circle at 30% 30%,#77ffac,#19b866);

    box-shadow:
      0 0 10px rgba(69,255,143,.7),
      0 0 22px rgba(69,255,143,.28);
  }

  @keyframes toast-left-in{
    0%{
      transform:translateX(-120%) scale(.98);
      opacity:0;
    }

    70%{
      transform:translateX(6%) scale(1.01);
      opacity:1;
    }

    100%{
      transform:translateX(0) scale(1);
    }
  }

  @keyframes toast-left-out{
    0%{
      transform:translateX(0) scale(1);
      opacity:1;
    }

    100%{
      transform:translateX(-110%) scale(.98);
      opacity:0;
    }
  }

  @media(prefers-reduced-motion:reduce){
    body.page-dashboard .toast,
body.page-dashboard .toast.hide,
body.page-dashboard .ticker__inner{
      animation:none;
    }
  }

  body.page-dashboard /* ===== M.Subject / M.Body controls ===== */
  .multi-mode-row{
    display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:0 0 6px 0;
  }
  body.page-dashboard .multi-toggle{
    min-width:40%;height:27px;padding:0 8px;border-radius:7px;
    border:1px solid rgba(91,145,214,.30);background:#071425;color:#8fa6c4;
    font-size:9px;font-weight:800;cursor:pointer;
  }
  body.page-dashboard .multi-toggle.on{
    color:#06120b;background:linear-gradient(180deg,#68ff9f,#32d979);
    border-color:#55ef91;box-shadow:0 0 12px rgba(60,255,141,.14);
  }
  body.page-dashboard .multi-upload{display:none;height:27px;padding:0 9px;font-size:9px;}
  body.page-dashboard .multi-upload.show{display:inline-flex;align-items:center;}
  body.page-dashboard .multi-pool-info{color:#6f87a7;font-size:9px;}
  body.page-dashboard .multi-source-disabled{opacity:.48;}

  body.page-dashboard /* =========================================================
     RESPONSIVE
  ========================================================= */

  @media(max-width:1180px){
    .left-panel{
      flex-basis:260px;
    }

    .right-panel{
      flex-basis:300px;
    }

    .brand{
      min-width:250px;
    }

    .brand-sub{
      display:none;
    }
  }

  @media(max-width:940px){
    body.page-dashboard{
      overflow:auto;
    }

    body.page-dashboard .app{
      height:auto;
      min-height:calc(100vh - var(--header-h));

      flex-direction:column;

      overflow:visible;
    }

    body.page-dashboard .left-panel,
body.page-dashboard .middle-panel,
body.page-dashboard .right-panel{
      flex:none;
      width:100%;
      min-height:420px;
    }

    body.page-dashboard .middle-panel{
      min-height:520px;
    }

    body.page-dashboard .ticker__inner{
      display:none;
    }

    body.page-dashboard .ticker{
      margin-left:auto;
      border-left:0;
    }
  }

  @media(max-width:640px){
    body.page-dashboard{
      --header-h:60px;
    }

    body.page-dashboard .app-header{
      padding:7px 9px;
      gap:8px;
    }

    body.page-dashboard .brand{
      min-width:0;
      flex:1;
    }

    body.page-dashboard .logo{
      width:38px;
      height:38px;
      flex-basis:38px;
    }

    body.page-dashboard .brand-title{
      font-size:12px;
    }

    body.page-dashboard .ticker{
      flex:0 0 auto;
    }

    body.page-dashboard .status-chip{
      display:none;
    }

    body.page-dashboard .app{
      padding:4px;
    }

    body.page-dashboard .panel{
      margin:4px;
      border-radius:13px;
    }

    body.page-dashboard .topbar{
      flex-wrap:wrap;
    }

    body.page-dashboard .topbar .pill{
      margin-left:0;
    }

    body.page-dashboard .search{
      flex-wrap:wrap;
    }
  }


  body.page-dashboard /* =========================================================
     RELAY PREMIUM THEME — aligned with Secure Login
     Lightweight overrides: same functionality,
body.page-dashboard smoother UI.
  ========================================================= */
  :root{
    --bg:#020710;
    --bg2:#050d1b;
    --panel:rgba(6,17,35,.94);
    --panel2:rgba(7,20,39,.96);
    --panel3:rgba(3,11,24,.96);
    --text:#eef8ff;
    --muted:#7e93b0;
    --line:rgba(89,143,211,.22);
    --line2:rgba(0,234,255,.30);
    --ok:#53ff9a;
    --bad:#ff5d73;
    --warn:#ffd85a;
    --cyan:#00eaff;
    --blue:#1b7cff;
    --purple:#8456ff;
    --gold:#ffd85a;
    --orange:#ff9f35;
    --header-h:66px;
  }

  body.page-dashboard{
    background:
      radial-gradient(circle at 17% 8%,rgba(0,234,255,.075),transparent 28%),
      radial-gradient(circle at 84% 82%,rgba(132,86,255,.09),transparent 30%),
      linear-gradient(145deg,#01040a,#03101f 52%,#020711);
  }

  body.page-dashboard::before{
    opacity:.55;
    background-size:54px 54px;
    background-image:
      linear-gradient(rgba(0,180,255,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(0,180,255,.045) 1px,transparent 1px);
  }

  body.page-dashboard .app-header{
    padding:9px 14px;
    background:linear-gradient(90deg,rgba(2,7,16,.99),rgba(5,16,33,.97),rgba(3,8,18,.99));
    border-bottom-color:rgba(0,234,255,.18);
    box-shadow:0 12px 30px rgba(0,0,0,.24);
    backdrop-filter:blur(10px);
  }

  body.page-dashboard .brand{min-width:286px}
  body.page-dashboard .logo{
    width:44px;height:44px;flex-basis:44px;
    border-radius:14px;
    font-size:20px;
    background:linear-gradient(145deg,rgba(0,234,255,.10),rgba(132,86,255,.12));
    border-color:rgba(0,234,255,.34);
  }
  body.page-dashboard .brand-title{font-size:15px;letter-spacing:.4px}
  body.page-dashboard .brand-accent{color:var(--cyan);text-shadow:0 0 14px rgba(0,234,255,.18)}
  body.page-dashboard .brand-sub{font-size:9.5px;letter-spacing:.65px;text-transform:uppercase}
  body.page-dashboard .ticker__inner{color:#8198b7;font-size:10px;animation-duration:30s}

  body.page-dashboard .app{padding:9px;gap:2px}

  body.page-dashboard .panel{
    margin:5px;
    border-radius:18px;
    border-color:rgba(79,137,207,.25);
    background:linear-gradient(155deg,rgba(6,19,37,.96),rgba(2,9,21,.96));
    box-shadow:0 16px 34px rgba(0,0,0,.24),inset 0 0 35px rgba(0,234,255,.012);
    backdrop-filter:blur(8px);
  }
  body.page-dashboard .panel::before{
    left:12%;right:12%;
    background:linear-gradient(90deg,transparent,rgba(0,234,255,.60),rgba(132,86,255,.45),transparent);
  }

  body.page-dashboard .left-panel{flex-basis:304px}
  body.page-dashboard .right-panel{flex-basis:346px}

  body.page-dashboard .section{padding:10px 11px}
  body.page-dashboard .section.noborder{padding:8px 10px}
  body.page-dashboard .section label,
body.page-dashboard .field-label{
    color:#9eb4cf;
    font-size:9.6px;
    letter-spacing:.35px;
    text-transform:none;
  }

  body.page-dashboard .input,
body.page-dashboard textarea,
body.page-dashboard .data-box,
body.page-dashboard .mini-input{
    border-radius:10px;
    border-color:rgba(83,139,204,.27);
    background:linear-gradient(135deg,rgba(3,13,27,.95),rgba(6,17,34,.94));
    box-shadow:inset 0 0 12px rgba(0,133,255,.018);
  }
  body.page-dashboard .input:focus,
body.page-dashboard textarea:focus,
body.page-dashboard .data-box:focus,
body.page-dashboard .mini-input:focus{
    border-color:rgba(0,234,255,.58);
    box-shadow:0 0 0 3px rgba(0,234,255,.035),0 0 15px rgba(0,234,255,.045);
  }

  body.page-dashboard #subject,
body.page-dashboard #r-subject{height:35px}
  body.page-dashboard #body,
body.page-dashboard #r-body{min-height:86px}
  body.page-dashboard #html,
body.page-dashboard #r-html{min-height:110px}

  body.page-dashboard .btn,
body.page-dashboard .btn-chip,
body.page-dashboard .btn.push{
    border-radius:9px;
    transition:transform .14s ease,filter .14s ease,border-color .14s ease,box-shadow .14s ease;
  }
  body.page-dashboard .btn-chip{
    background:linear-gradient(145deg,rgba(7,23,44,.98),rgba(3,12,27,.98));
    border-color:rgba(83,139,204,.28);
    color:#dceeff;
  }
  body.page-dashboard .btn.push{
    background:linear-gradient(100deg,#00bfe8,#1f73ff 52%,#8259ff);
    border-color:rgba(0,234,255,.58);
    color:white;
    box-shadow:0 0 17px rgba(0,194,255,.16),0 0 20px rgba(132,86,255,.09);
    min-height:34px;
  }
  body.page-dashboard .btn.push:disabled,
body.page-dashboard .btn-chip:disabled,
body.page-dashboard .btn:disabled{
    opacity:.52;
    cursor:not-allowed;
    transform:none!important;
  }

  body.page-dashboard .btn-green{
    background:linear-gradient(135deg,#55ef91,#27c86a)!important;
    border-color:rgba(83,255,154,.55)!important;
    color:#06140c!important;
  }
  body.page-dashboard .btn-red{
    background:linear-gradient(135deg,#ff6578,#e43c53)!important;
    border-color:rgba(255,93,115,.55)!important;
  }
  body.page-dashboard .btn-navy{
    background:linear-gradient(135deg,#347cff,#5648dc)!important;
    border-color:rgba(84,111,255,.58)!important;
  }
  body.page-dashboard .btn-gold{
    background:linear-gradient(135deg,#ffe56a,#ffc13a)!important;
  }

  body.page-dashboard .push-options{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:7px 8px;
    padding:8px 0 2px;
  }
  body.page-dashboard .chk{
    min-height:23px;
    padding:3px 5px;
    border-radius:7px;
    background:rgba(4,14,28,.46);
    border:1px solid rgba(78,132,194,.10);
  }
  body.page-dashboard .chk input{
    background:#edf5ff;
    border-color:rgba(112,157,211,.50);
  }

  body.page-dashboard .multi-mode-row{
    padding:3px;
    border-radius:9px;
    background:rgba(3,12,26,.42);
    border:1px solid rgba(77,132,197,.10);
  }
  body.page-dashboard .multi-toggle{
    height:28px;border-radius:8px;
    background:linear-gradient(145deg,#07172b,#07111f);
    border-color:rgba(91,145,214,.32);
  }
  body.page-dashboard .multi-toggle.on{
    background:linear-gradient(135deg,#53ff9a,#27c86a);
    color:#04130b;
    border-color:rgba(83,255,154,.62);
  }

  body.page-dashboard .topbar{
    min-height:52px;
    padding:8px 10px;
    background:linear-gradient(90deg,rgba(4,14,29,.99),rgba(7,20,39,.96),rgba(4,13,27,.99));
  }
  body.page-dashboard .topbar .title{font-size:11px;letter-spacing:.45px}
  body.page-dashboard .topbar .dot{
    background:var(--ok);
    box-shadow:0 0 10px rgba(83,255,154,.72);
  }
  body.page-dashboard .pill,
body.page-dashboard .status-chip,
body.page-dashboard .count-pill{
    border-color:rgba(81,139,204,.22);
    background:rgba(2,10,22,.78);
  }

  body.page-dashboard .search{
    padding:8px 9px;
    background:rgba(3,12,27,.60);
  }
  body.page-dashboard .search .input{height:32px}

  body.page-dashboard table{font-size:10.4px}
  body.page-dashboard thead th{
    padding:9px 8px;
    background:linear-gradient(180deg,rgba(6,18,35,.995),rgba(3,10,22,.995));
  }
  body.page-dashboard tbody td{padding:8px}
  body.page-dashboard tbody tr:hover{
    background:linear-gradient(90deg,rgba(0,190,255,.06),rgba(132,86,255,.035),transparent);
  }
  body.page-dashboard .tag{
    min-height:22px;border-radius:7px;
    border-color:rgba(0,213,255,.20);
  }
  body.page-dashboard .email-text{color:#d8eeff}

  body.page-dashboard .foot{
    min-height:31px;
    background:linear-gradient(90deg,rgba(3,11,23,.99),rgba(5,15,30,.97));
  }

  body.page-dashboard .toast{
    border-color:rgba(0,234,255,.30);
    background:linear-gradient(135deg,rgba(5,21,40,.98),rgba(5,10,24,.98));
    box-shadow:0 14px 32px rgba(0,0,0,.34),0 0 20px rgba(0,234,255,.07);
  }

  body.page-dashboard .scroll-area,
body.page-dashboard .table-wrap{
    scrollbar-color:rgba(0,205,255,.40) rgba(3,10,21,.65);
  }

  @media(max-width:1180px){
    body.page-dashboard .left-panel{flex-basis:270px}
    body.page-dashboard .right-panel{flex-basis:310px}
  }


  body.page-dashboard /* =========================================================
     ROCKET RELAY — SIGNATURE UI
     Solid,
body.page-dashboard unique,
body.page-dashboard low-overhead premium theme
  ========================================================= */
  :root{
    --rocket-bg:#02060c;
    --rocket-panel:#07111d;
    --rocket-panel-2:#091828;
    --rocket-edge:rgba(77,148,220,.26);
    --rocket-cyan:#18e6ff;
    --rocket-blue:#3b82f6;
    --rocket-violet:#7c5cff;
    --rocket-green:#43f58d;
    --rocket-red:#ff5c74;
    --rocket-text:#f3f8ff;
    --rocket-muted:#7890aa;
  }

  body.page-dashboard{
    background:
      radial-gradient(circle at 12% 0%,rgba(24,230,255,.055),transparent 27%),
      radial-gradient(circle at 95% 100%,rgba(124,92,255,.065),transparent 32%),
      linear-gradient(145deg,#010409,#04101d 50%,#02060c);
  }

  body.page-dashboard::before{
    background-size:64px 64px;
    opacity:.42;
    background-image:
      linear-gradient(rgba(24,230,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(24,230,255,.035) 1px,transparent 1px);
  }

  body.page-dashboard::after{
    width:420px;height:420px;
    right:-160px;bottom:-220px;
    filter:none;
    background:radial-gradient(circle,rgba(124,92,255,.08),transparent 68%);
  }

  body.page-dashboard .app-header{
    height:68px;
    padding:10px 16px;
    border-bottom:1px solid rgba(24,230,255,.17);
    background:linear-gradient(90deg,#020811 0%,#071525 50%,#030912 100%);
    box-shadow:0 10px 28px rgba(0,0,0,.24);
    backdrop-filter:none;
  }

  body.page-dashboard .app-header::after{
    left:10%;right:10%;
    background:linear-gradient(90deg,transparent,#18e6ff,#3b82f6,#7c5cff,transparent);
    opacity:.55;
  }

  body.page-dashboard .brand{gap:12px;min-width:330px}
  body.page-dashboard .logo{
    width:46px;height:46px;flex-basis:46px;
    border-radius:15px;
    font-size:21px;
    border:1px solid rgba(24,230,255,.34);
    background:linear-gradient(145deg,#081b2d,#0b1227);
    box-shadow:0 0 18px rgba(24,230,255,.10);
  }
  body.page-dashboard .logo::before{border-color:rgba(124,92,255,.12)}
  body.page-dashboard .brand-title{
    font-size:16px;
    font-weight:850;
    letter-spacing:.25px;
  }
  body.page-dashboard .brand-accent{
    color:var(--rocket-cyan);
    text-shadow:0 0 12px rgba(24,230,255,.18);
  }
  body.page-dashboard .brand-sub{
    margin-top:3px;
    color:#69819c;
    font-size:9px;
    font-weight:700;
    letter-spacing:1px;
  }

  body.page-dashboard .ticker{
    height:32px;
    padding-left:14px;
    border-left:1px solid rgba(91,145,214,.17);
  }
  body.page-dashboard .ticker__inner{
    color:#7891aa;
    font-size:9.5px;
    animation-duration:36s;
  }

  body.page-dashboard .status-chip{
    min-width:62px;
    text-align:center;
    padding:5px 9px;
    border-radius:9px;
    background:#06111f;
    border-color:rgba(82,139,202,.24);
    font-size:8.5px;
    letter-spacing:.35px;
  }

  body.page-dashboard .app{
    height:calc(100vh - 68px);
    padding:10px;
    gap:4px;
  }

  body.page-dashboard .panel{
    margin:4px;
    border-radius:19px;
    border:1px solid var(--rocket-edge);
    background:
      linear-gradient(160deg,rgba(8,19,34,.985),rgba(3,9,19,.99));
    box-shadow:0 14px 28px rgba(0,0,0,.23);
    backdrop-filter:none;
  }
  body.page-dashboard .panel::before{
    left:14%;right:14%;
    opacity:.72;
    background:linear-gradient(90deg,transparent,#18e6ff,#3b82f6,#7c5cff,transparent);
  }

  body.page-dashboard .left-panel{flex-basis:270px}
  body.page-dashboard .right-panel{flex-basis:300px}

  body.page-dashboard .scroll-area{
    scrollbar-width:thin;
    scrollbar-color:#1b6c87 #06101d;
  }

  body.page-dashboard .section{
    padding:11px;
    border-bottom:1px solid rgba(80,126,180,.11);
  }
  body.page-dashboard .section.noborder{padding:9px 10px}

  body.page-dashboard .section label,
body.page-dashboard .field-label{
    color:#9bb0c6;
    font-size:9.4px;
    font-weight:800;
    letter-spacing:.35px;
  }

  body.page-dashboard .input,
body.page-dashboard textarea,
body.page-dashboard .data-box,
body.page-dashboard .mini-input{
    border-radius:11px;
    border:1px solid rgba(83,137,199,.27);
    background:#04101d;
    color:#eaf4ff;
    box-shadow:none;
  }
  body.page-dashboard .input:focus,
body.page-dashboard textarea:focus,
body.page-dashboard .data-box:focus,
body.page-dashboard .mini-input:focus{
    border-color:rgba(24,230,255,.60);
    background:#061524;
    box-shadow:0 0 0 2px rgba(24,230,255,.035);
  }

  body.page-dashboard #subject,
body.page-dashboard #r-subject{height:36px}
  body.page-dashboard #body,
body.page-dashboard #r-body{min-height:88px}
  body.page-dashboard #html,
body.page-dashboard #r-html{min-height:112px}

  body.page-dashboard .multi-mode-row{
    gap:5px;
    padding:4px;
    border-radius:10px;
    background:#04101d;
    border:1px solid rgba(81,135,197,.12);
  }
  body.page-dashboard .multi-toggle{
    border-radius:8px;
    background:#081829;
    color:#8fa6bf;
    border-color:rgba(93,148,209,.27);
  }
  body.page-dashboard .multi-toggle.on{
    color:#03110a;
    background:linear-gradient(135deg,#58f49a,#28c86c);
    border-color:rgba(67,245,141,.58);
    box-shadow:none;
  }
  body.page-dashboard .multi-upload{
    border-radius:8px!important;
  }

  body.page-dashboard .btn,
body.page-dashboard .btn-chip,
body.page-dashboard .btn.push{
    border-radius:9px;
    box-shadow:none!important;
  }
  body.page-dashboard .btn-chip{
    padding:6px 10px;
    background:#071727;
    border:1px solid rgba(82,139,202,.26);
    color:#d7e8f8;
  }
  body.page-dashboard .btn-chip:hover,
body.page-dashboard .btn:hover,
body.page-dashboard .btn.push:hover{
    transform:translateY(-1px);
    filter:brightness(1.06);
  }

  body.page-dashboard .btn.push{
    min-height:36px;
    padding:8px 13px;
    background:linear-gradient(100deg,#11cbe9,#2478f5 52%,#7458ef);
    border:1px solid rgba(24,230,255,.47);
    color:white;
    font-weight:850;
    letter-spacing:.15px;
  }

  body.page-dashboard .btn-green{
    background:linear-gradient(135deg,#47ed8d,#20be63)!important;
    color:#031008!important;
    border-color:rgba(67,245,141,.52)!important;
  }
  body.page-dashboard .btn-red{
    background:linear-gradient(135deg,#ff6178,#d9344d)!important;
    border-color:rgba(255,92,116,.50)!important;
  }
  body.page-dashboard .btn-navy{
    background:linear-gradient(135deg,#337cf4,#5b52df)!important;
    border-color:rgba(85,105,255,.52)!important;
  }
  body.page-dashboard .btn-gold{
    background:linear-gradient(135deg,#ffe468,#ffbd39)!important;
    color:#071019!important;
  }
  body.page-dashboard .btn-orange{
    background:linear-gradient(135deg,#ffb14a,#ff8c2e)!important;
    color:#091017!important;
  }
  body.page-dashboard .btn-white,
body.page-dashboard .tpush{
    background:#eaf3fb!important;
    color:#07111c!important;
    border-color:rgba(255,255,255,.62)!important;
  }

  body.page-dashboard .push-options{
    gap:6px 7px;
    padding-top:8px;
  }
  body.page-dashboard .chk{
    min-height:25px;
    padding:4px 6px;
    border-radius:8px;
    background:#05121f;
    border:1px solid rgba(79,132,193,.13);
    color:#9eb2c8;
  }
  body.page-dashboard .chk input{
    width:14px;height:14px;flex-basis:14px;
    border-radius:4px;
  }
  body.page-dashboard .chk input:checked{
    background:linear-gradient(135deg,#18e6ff,#3b82f6);
    border-color:#18e6ff;
    box-shadow:none;
  }

  body.page-dashboard .topbar{
    min-height:54px;
    padding:9px 10px;
    background:linear-gradient(90deg,#05111f,#081827,#05111f);
    border-bottom-color:rgba(80,135,198,.16);
  }
  body.page-dashboard .topbar .title{
    font-size:11px;
    font-weight:850;
    letter-spacing:.4px;
  }
  body.page-dashboard .topbar .dot{
    background:#43f58d;
    box-shadow:0 0 8px rgba(67,245,141,.60);
  }
  body.page-dashboard .pill{
    padding:5px 8px;
    border-radius:8px;
    background:#06111f;
  }

  body.page-dashboard .search{
    padding:8px 9px;
    background:#040e1b;
  }
  body.page-dashboard .search .input{height:33px}

  body.page-dashboard .table-wrap{
    background:linear-gradient(180deg,rgba(4,12,23,.3),rgba(3,9,17,.3));
  }
  body.page-dashboard table{
    font-size:10.3px;
  }
  body.page-dashboard thead th{
    padding:10px 8px;
    color:#7d95af;
    background:#071422;
    border-bottom-color:rgba(79,133,195,.18);
  }
  body.page-dashboard tbody td{
    padding:8px;
    border-bottom-color:rgba(73,115,163,.09);
  }
  body.page-dashboard tbody tr:hover{
    background:linear-gradient(90deg,rgba(24,230,255,.045),rgba(124,92,255,.025),transparent);
  }
  body.page-dashboard .email-text{color:#dceeff}
  body.page-dashboard .tag{
    min-height:23px;
    padding:3px 7px;
    border-radius:7px;
    background:#061827;
    border-color:rgba(24,230,255,.16);
    color:#a7e9f4;
  }

  body.page-dashboard .foot{
    min-height:31px;
    background:#06101c;
    color:#667d97;
  }

  body.page-dashboard .count-pill{
    border-radius:8px;
    background:#06111f;
  }

  body.page-dashboard .toast{
    border-radius:13px;
    background:#071523;
    border-color:rgba(24,230,255,.26);
    box-shadow:0 12px 28px rgba(0,0,0,.32);
  }

  @media(max-width:1180px){
    body.page-dashboard .left-panel{flex-basis:245px}
    body.page-dashboard .right-panel{flex-basis:280px}
    body.page-dashboard .brand{min-width:270px}
  }

  @media(max-width:940px){
    body.page-dashboard .app{gap:0}
    body.page-dashboard .panel{margin:5px 0}
  }


  body.page-dashboard /* ===== Wider client workspace + Controller button ===== */
  .left-panel{flex:0 0 270px}
  body.page-dashboard .middle-panel{flex:1 1 auto;min-width:0}
  body.page-dashboard .right-panel{flex:0 0 300px}

  body.page-dashboard .btn-controller{
    background:linear-gradient(135deg,#18d7ef,#346cf4 55%,#6d56e8)!important;
    border-color:rgba(24,230,255,.48)!important;
    color:#fff!important;
    font-weight:800!important;
  }
  body.page-dashboard .btn-controller:hover{
    filter:brightness(1.08)!important;
  }

  body.page-dashboard .middle-panel .table-wrap{
    min-width:0;
  }
  body.page-dashboard .middle-panel table{
    min-width:790px;
  }

  @media(max-width:1180px){
    body.page-dashboard .left-panel{flex-basis:245px}
    body.page-dashboard .right-panel{flex-basis:280px}
  }


  body.page-dashboard /* ===== FIX: full-width smooth header ticker ===== */
  .ticker{
    position:relative;
    flex:1 1 auto;
    min-width:0;
    overflow:hidden;
    height:34px;
    display:flex;
    align-items:center;
    padding-left:0;
  }

  body.page-dashboard .ticker__inner{
    position:absolute;
    left:0;
    top:50%;
    width:max-content;
    padding-left:0 !important;
    white-space:nowrap;
    transform:translateY(-50%);
    will-change:transform;
    animation:rocketTicker 28s linear infinite !important;
  }

  @keyframes rocketTicker{
    0%{
      transform:translate(calc(100vw - 370px), -50%);
    }
    100%{
      transform:translate(calc(-100% - 40px), -50%);
    }
  }

  body.page-dashboard .ticker:hover .ticker__inner{
    animation-play-state:paused !important;
  }

  @media(max-width:900px){
    @keyframes rocketTicker{
      0%{
        transform:translate(calc(100vw - 250px), -50%);
      }
      100%{
        transform:translate(calc(-100% - 30px), -50%);
      }
    }
  }


  body.page-dashboard /* ===== Animated rotating panel-edge accents ===== */
  .panel{
    isolation:isolate;
    overflow:hidden;
  }

  body.page-dashboard .panel::after{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:inherit;
    padding:2px;
    pointer-events:none;
    z-index:0;
    background:conic-gradient(
      from 0deg,
      transparent 0deg 35deg,
      var(--edge-a) 55deg,
      var(--edge-b) 95deg,
      transparent 125deg 215deg,
      var(--edge-a) 245deg,
      var(--edge-b) 285deg,
      transparent 315deg 360deg
    );
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    animation:panelEdgeSpin 5.5s linear infinite;
    opacity:.95;
    filter:drop-shadow(0 0 5px var(--edge-glow));
  }

  body.page-dashboard .panel > *{
    position:relative;
    z-index:1;
  }

  body.page-dashboard .left-panel{
    --edge-a:#18e6ff;
    --edge-b:#00a8ff;
    --edge-glow:rgba(24,230,255,.35);
  }

  body.page-dashboard .middle-panel{
    --edge-a:#3b82f6;
    --edge-b:#7c5cff;
    --edge-glow:rgba(92,110,255,.34);
  }

  body.page-dashboard .right-panel{
    --edge-a:#b45cff;
    --edge-b:#ff4fd8;
    --edge-glow:rgba(214,78,255,.32);
  }

  body.page-dashboard .middle-panel::after{
    animation-duration:6.4s;
    animation-direction:reverse;
  }

  body.page-dashboard .right-panel::after{
    animation-duration:5.9s;
  }

  @keyframes panelEdgeSpin{
    to{ transform:rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce){
    body.page-dashboard .panel::after{
      animation:none;
    }
  }


  body.page-dashboard /* ===== FIX: light travels along the panel border path ===== */
  .panel{
    position:relative;
    isolation:isolate;
  }

  body.page-dashboard /* Disable old full rotating conic overlay */
  .panel::after{
    display:none !important;
  }

  body.page-dashboard .panel-border-runner{
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    z-index:3;
    overflow:hidden;
  }

  body.page-dashboard .panel-border-runner::before{
    content:"";
    position:absolute;
    width:40%;
    height:3px;
    border-radius:999px;
    background:linear-gradient(90deg,transparent,var(--run-a),var(--run-b),transparent);
    box-shadow:
      0 0 7px var(--run-glow),
      0 0 14px var(--run-glow);
    offset-path:inset(1px round 18px);
    offset-distance:0%;
    animation:borderTravel 5.8s linear infinite;
  }

  body.page-dashboard .left-panel .panel-border-runner{
    --run-a:#18e6ff;
    --run-b:#00a8ff;
    --run-glow:rgba(24,230,255,.55);
  }

  body.page-dashboard .middle-panel .panel-border-runner{
    --run-a:#3b82f6;
    --run-b:#7c5cff;
    --run-glow:rgba(92,110,255,.50);
  }

  body.page-dashboard .right-panel .panel-border-runner{
    --run-a:#b45cff;
    --run-b:#ff4fd8;
    --run-glow:rgba(214,78,255,.50);
  }

  body.page-dashboard .middle-panel .panel-border-runner::before{
    animation-duration:6.6s;
  }

  body.page-dashboard .right-panel .panel-border-runner::before{
    animation-duration:6.1s;
  }

  @keyframes borderTravel{
    to{offset-distance:100%}
  }

  @media (prefers-reduced-motion:reduce){
    body.page-dashboard .panel-border-runner::before{animation:none}
  }


  body.page-dashboard /* ===== STATIC GLOWING PANEL BORDERS ===== */
  .panel-border-runner{
    display:none !important;
  }

  body.page-dashboard .panel{
    border-width:1px !important;
    border-style:solid !important;
    box-shadow:
      0 14px 28px rgba(0,0,0,.23),
      0 0 16px var(--static-glow),
      inset 0 0 20px rgba(255,255,255,.008) !important;
  }

  body.page-dashboard .left-panel{
    border-color:rgba(24,230,255,.72) !important;
    --static-glow:rgba(24,230,255,.16);
  }

  body.page-dashboard .middle-panel{
    border-color:rgba(92,110,255,.72) !important;
    --static-glow:rgba(92,110,255,.16);
  }

  body.page-dashboard .right-panel{
    border-color:rgba(214,78,255,.72) !important;
    --static-glow:rgba(214,78,255,.16);
  }

  body.page-dashboard .panel::after{
    display:none !important;
  }


  body.page-dashboard /* ===== Header ticker + action button polish ===== */
  .ticker__inner{
    color:#ff9f35 !important;
    font-size:11.5px !important;
    font-weight:800 !important;
    letter-spacing:.35px !important;
    text-shadow:0 0 10px rgba(255,159,53,.16);
  }

  body.page-dashboard /* Top action buttons: unique colors */
  #viewTagsBtn{
    background:linear-gradient(135deg,#19d3ff,#3b82f6)!important;
    color:#03111a!important;
    border-color:rgba(24,230,255,.58)!important;
  }

  body.page-dashboard #downloadExtBtn{
    background:linear-gradient(135deg,#53ff9a,#22c76a)!important;
    color:#04130b!important;
    border-color:rgba(83,255,154,.58)!important;
  }

  body.page-dashboard #gmassBtn{
    background:linear-gradient(135deg,#8b6cff,#5b52df)!important;
    color:#fff!important;
    border-color:rgba(124,92,255,.58)!important;
  }

  body.page-dashboard #logoutBtn{
    background:linear-gradient(135deg,#ffb14a,#ff8c2e)!important;
    color:#111!important;
    border-color:rgba(255,159,53,.58)!important;
  }

  body.page-dashboard #kickBtn{
    background:linear-gradient(135deg,#ff6178,#d9344d)!important;
    color:#fff!important;
    border-color:rgba(255,92,116,.58)!important;
  }

  body.page-dashboard #controllerBtn{
    background:linear-gradient(135deg,#18e6ff,#346cf4 55%,#7c5cff)!important;
    color:#fff!important;
    border-color:rgba(24,230,255,.52)!important;
  }

  body.page-dashboard /* Hover jump/bounce for View Tags -> Controller */
  #viewTagsBtn,
body.page-dashboard #downloadExtBtn,
body.page-dashboard #gmassBtn,
body.page-dashboard #logoutBtn,
body.page-dashboard #kickBtn,
body.page-dashboard #controllerBtn{
    transition:
      transform .18s cubic-bezier(.2,.8,.2,1.25),
      filter .18s ease,
      box-shadow .18s ease !important;
    will-change:transform;
  }

  body.page-dashboard #viewTagsBtn:hover,
body.page-dashboard #downloadExtBtn:hover,
body.page-dashboard #gmassBtn:hover,
body.page-dashboard #logoutBtn:hover,
body.page-dashboard #kickBtn:hover,
body.page-dashboard #controllerBtn:hover{
    transform:translateY(-4px) scale(1.035) !important;
    filter:brightness(1.09) !important;
    box-shadow:0 7px 16px rgba(0,0,0,.22) !important;
  }

  body.page-dashboard #viewTagsBtn:active,
body.page-dashboard #downloadExtBtn:active,
body.page-dashboard #gmassBtn:active,
body.page-dashboard #logoutBtn:active,
body.page-dashboard #kickBtn:active,
body.page-dashboard #controllerBtn:active{
    transform:translateY(0) scale(.98) !important;
  }


  body.page-dashboard /* ===== Stable hover + Copy/Test button colors ===== */

  /* Copy buttons */
  .copy-email{
    background:linear-gradient(135deg,#23c7ff,#2f7df5)!important;
    color:#03111a!important;
    border-color:rgba(35,199,255,.55)!important;
    font-weight:800!important;
  }

  body.page-dashboard /* Test buttons */
  .tpush{
    background:linear-gradient(135deg,#ffd85a,#ff9f35)!important;
    color:#111!important;
    border-color:rgba(255,184,53,.62)!important;
    font-weight:850!important;
  }

  body.page-dashboard /* Keep all top action buttons perfectly still on hover */
  #viewTagsBtn,
body.page-dashboard #downloadExtBtn,
body.page-dashboard #gmassBtn,
body.page-dashboard #logoutBtn,
body.page-dashboard #kickBtn,
body.page-dashboard #controllerBtn,
body.page-dashboard .copy-email,
body.page-dashboard .tpush{
    transition:
      filter .16s ease,
      box-shadow .16s ease,
      border-color .16s ease !important;
    transform:none !important;
    will-change:auto !important;
  }

  body.page-dashboard #viewTagsBtn:hover,
body.page-dashboard #downloadExtBtn:hover,
body.page-dashboard #gmassBtn:hover,
body.page-dashboard #logoutBtn:hover,
body.page-dashboard #kickBtn:hover,
body.page-dashboard #controllerBtn:hover,
body.page-dashboard .copy-email:hover,
body.page-dashboard .tpush:hover{
    transform:none !important;
    filter:brightness(1.10) !important;
    box-shadow:0 0 0 1px rgba(255,255,255,.04),0 4px 12px rgba(0,0,0,.16) !important;
  }

  body.page-dashboard #viewTagsBtn:active,
body.page-dashboard #downloadExtBtn:active,
body.page-dashboard #gmassBtn:active,
body.page-dashboard #logoutBtn:active,
body.page-dashboard #kickBtn:active,
body.page-dashboard #controllerBtn:active,
body.page-dashboard .copy-email:active,
body.page-dashboard .tpush:active{
    transform:none !important;
    filter:brightness(.97) !important;
  }


  body.page-dashboard /* ===== Per-client S / RD actions ===== */
  .row-actions{
    display:flex;
    align-items:center;
    gap:5px;
    min-width:84px;
  }
  body.page-dashboard .row-stop,
body.page-dashboard .row-rd{
    min-width:32px;
    height:22px;
    padding:2px 7px!important;
    line-height:16px;
    font-size:9px!important;
    font-weight:900!important;
    transform:none!important;
    box-shadow:none!important;
  }
  body.page-dashboard .row-stop{
    background:linear-gradient(135deg,#ff6578,#d9344d)!important;
    border-color:rgba(255,92,116,.58)!important;
    color:#fff!important;
  }
  body.page-dashboard .row-rd{
    background:linear-gradient(135deg,#35e6b3,#1e9fd8)!important;
    border-color:rgba(53,230,179,.55)!important;
    color:#031511!important;
  }
  body.page-dashboard .row-stop:hover,
body.page-dashboard .row-rd:hover{
    transform:none!important;
    filter:brightness(1.09)!important;
  }
  body.page-dashboard .row-stop:disabled,
body.page-dashboard .row-rd:disabled{opacity:.5;cursor:not-allowed}


  body.page-dashboard /* ===== Data Merger Engine ===== */
  .merger-engine{
    margin-top:3px;
    padding-top:11px!important;
    padding-bottom:12px!important;
    border-top:1px solid rgba(24,230,255,.12);
  }
  body.page-dashboard .merger-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    margin-bottom:9px;
  }
  body.page-dashboard .merger-title{
    color:#eaf7ff;
    font-size:10.5px;
    font-weight:900;
    letter-spacing:.3px;
  }
  body.page-dashboard .merger-sub{
    margin-top:3px;
    color:#6e859f;
    font-size:8.5px;
    line-height:1.4;
  }
  body.page-dashboard .merger-actions{
    display:flex;
    gap:6px;
    align-items:center;
  }
  body.page-dashboard .merger-actions .btn-chip{
    flex:1;
    min-height:30px;
  }
  body.page-dashboard .merger-select{
    background:linear-gradient(135deg,#16cfe8,#347cf4)!important;
    color:#fff!important;
    border-color:rgba(24,230,255,.48)!important;
  }
  body.page-dashboard .merger-start{
    background:linear-gradient(135deg,#8b6cff,#5c50dc)!important;
    color:#fff!important;
    border-color:rgba(124,92,255,.48)!important;
  }
  body.page-dashboard .merger-download{
    background:linear-gradient(135deg,#50ef93,#22bd65)!important;
    color:#04120a!important;
    border-color:rgba(83,255,154,.48)!important;
  }
  body.page-dashboard .merger-clear{
    background:linear-gradient(135deg,#ff667c,#d93650)!important;
    color:#fff!important;
    border-color:rgba(255,92,116,.48)!important;
  }
  body.page-dashboard .merger-progress-shell{
    margin:9px 0;
    padding:8px;
    border:1px solid rgba(82,139,202,.18);
    border-radius:10px;
    background:#04101d;
  }
  body.page-dashboard .merger-progress-track{
    height:8px;
    overflow:hidden;
    border-radius:999px;
    background:#091827;
    border:1px solid rgba(24,230,255,.12);
  }
  body.page-dashboard .merger-progress-bar{
    width:0%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#18e6ff,#3b82f6,#7c5cff);
    transition:width .22s ease;
  }
  body.page-dashboard .merger-progress-meta{
    margin-top:6px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:#7891aa;
    font-size:8.7px;
  }
  body.page-dashboard #mergerProgressText{
    color:#ffb04a;
    font-weight:900;
    min-width:30px;
  }
  body.page-dashboard #mergerStatusText{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    text-align:right;
  }
  body.page-dashboard .merger-bottom{margin-top:2px}


  body.page-dashboard /* ===== Right panel scroll behavior: same feel as left panel ===== */
  .right-panel{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    min-height:0 !important;
  }

  body.page-dashboard .right-panel .section,
body.page-dashboard .right-panel .merger-engine{
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    inset:auto !important;
  }

  body.page-dashboard .right-panel .merger-engine{
    flex:none !important;
    width:auto !important;
  }

  body.page-dashboard .right-panel::-webkit-scrollbar{
    width:7px;
  }

  body.page-dashboard .right-panel::-webkit-scrollbar-thumb{
    background:rgba(91,124,170,.42);
    border-radius:999px;
  }

  body.page-dashboard .right-panel::-webkit-scrollbar-track{
    background:transparent;
  }


  body.page-dashboard /* ===== Merger Engine: hidden below initial right-panel viewport ===== */
  .right-panel{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    min-height:0 !important;
    display:block !important;
  }

  body.page-dashboard /* Keep all right-panel sections in normal flow */
  .right-panel > *{
    position:relative !important;
    top:auto !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
  }

  body.page-dashboard /* The merger sits after Name Pool and only appears after scrolling down */
  .right-panel .merger-engine{
    position:relative !important;
    display:block !important;
    margin-top:180px !important;
    flex:none !important;
    width:auto !important;
  }


  body.page-dashboard /* ===== Actions alignment fix @ 100% zoom ===== */
  td:last-child,
body.page-dashboard th:last-child{
    padding-right:18px !important;
  }

  body.page-dashboard .row-actions,
body.page-dashboard .actions,
body.page-dashboard td:last-child > div{
    justify-content:flex-start !important;
    gap:7px !important;
  }

  body.page-dashboard .return-data-btn,
body.page-dashboard .rd-btn{
    margin-right:8px !important;
    transform:translateX(-4px);
  }

  body.page-dashboard /* ===== Top toolbar hover jump animation ===== */
  #viewTagsBtn,
body.page-dashboard #downloadExtBtn,
body.page-dashboard #gmassBtn,
body.page-dashboard #logoutBtn,
body.page-dashboard #kickBtn,
body.page-dashboard #controllerBtn{
    transition:
      transform .16s cubic-bezier(.2,.85,.25,1.2),
      filter .16s ease,
      box-shadow .16s ease !important;
    will-change:transform;
  }

  body.page-dashboard #viewTagsBtn:hover,
body.page-dashboard #downloadExtBtn:hover,
body.page-dashboard #gmassBtn:hover,
body.page-dashboard #logoutBtn:hover,
body.page-dashboard #kickBtn:hover,
body.page-dashboard #controllerBtn:hover{
    transform:translateY(-4px) scale(1.035) !important;
    filter:brightness(1.08) !important;
    box-shadow:0 7px 15px rgba(0,0,0,.22) !important;
  }

  body.page-dashboard #viewTagsBtn:active,
body.page-dashboard #downloadExtBtn:active,
body.page-dashboard #gmassBtn:active,
body.page-dashboard #logoutBtn:active,
body.page-dashboard #kickBtn:active,
body.page-dashboard #controllerBtn:active{
    transform:translateY(-1px) scale(.99) !important;
  }




/* ==========================================================
   LOGIN PAGE (namespaced)
========================================================== */

body.page-login,
body.page-login *{box-sizing:border-box;margin:0;padding:0}
body.page-login{
  --bg:#020710; --panel:#07111f; --panel2:#09182b;
  --cyan:#00eaff; --blue:#1b7cff; --violet:#8456ff;
  --green:#53ff9a; --red:#ff5d73; --text:#eef8ff; --muted:#7e93b0;
}
body.page-login,
body.page-login{width:100%;height:100%}
body.page-login{
  font-family:Inter,"Segoe UI",Arial,sans-serif;
  color:var(--text);
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 18%,rgba(0,234,255,.09),transparent 28%),
    radial-gradient(circle at 82% 72%,rgba(132,86,255,.11),transparent 30%),
    linear-gradient(145deg,#01040a,#03101f 52%,#020711);
}
body.page-login .bg-grid{
  position:fixed; inset:0; pointer-events:none; opacity:.18;
  background-image:
    linear-gradient(rgba(0,180,255,.14) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,180,255,.14) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,#000 25%,transparent 100%);
}
body.page-login .scanline{
  position:fixed; left:0; right:0; height:160px; top:-180px; pointer-events:none;
  background:linear-gradient(to bottom,transparent,rgba(0,234,255,.035),rgba(0,234,255,.08),transparent);
  animation:scan 7s linear infinite;
}
@keyframes scan{to{transform:translateY(calc(100vh + 360px))}}
body.page-login .shell{
  position:relative; z-index:2;
  width:100%; height:100%;
  display:grid; place-items:center;
  padding:24px;
}
body.page-login .login-wrap{
  width:min(460px,94vw);
  position:relative;
}
body.page-login .login-card{
  position:relative;
  overflow:hidden;
  padding:34px 34px 28px;
  border-radius:24px;
  border:1px solid rgba(0,225,255,.32);
  background:linear-gradient(155deg,rgba(6,20,38,.95),rgba(3,10,22,.96));
  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    0 0 42px rgba(0,174,255,.11),
    inset 0 0 45px rgba(0,234,255,.025);
  backdrop-filter:blur(18px);
  transition:.35s ease;
}
body.page-login .login-card::before{
  content:""; position:absolute; top:0; left:10%; right:10%; height:2px;
  background:linear-gradient(90deg,transparent,var(--cyan),var(--violet),transparent);
  box-shadow:0 0 14px rgba(0,234,255,.65);
}
body.page-login .login-card.success{
  border-color:rgba(83,255,154,.65);
  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    0 0 46px rgba(83,255,154,.18),
    inset 0 0 55px rgba(83,255,154,.035);
}
body.page-login .brand{
  display:flex; align-items:center; gap:14px; margin-bottom:24px;
}
body.page-login .logo{
  width:54px;height:54px;border-radius:16px;
  display:grid;place-items:center;
  border:1px solid rgba(0,234,255,.35);
  background:linear-gradient(145deg,rgba(0,234,255,.10),rgba(132,86,255,.12));
  box-shadow:0 0 24px rgba(0,190,255,.13),inset 0 0 18px rgba(0,234,255,.05);
  font-size:27px;
}
body.page-login .brand h1{font-size:22px;letter-spacing:.2px}
body.page-login .brand h1 span{color:var(--cyan)}
body.page-login .brand p{margin-top:4px;color:var(--muted);font-size:11px;letter-spacing:.35px}
body.page-login .status{
  display:flex;align-items:center;gap:8px;
  margin-left:auto;padding:6px 9px;border-radius:999px;
  border:1px solid rgba(83,255,154,.22);
  background:rgba(5,27,23,.52);
  color:#87ffc0;font-size:9px;font-weight:800;letter-spacing:.8px;
}
body.page-login .status i{
  width:7px;height:7px;border-radius:50%;background:var(--green);
  box-shadow:0 0 10px var(--green);
}
body.page-login .title{font-size:31px;font-weight:750;letter-spacing:-.7px}
body.page-login .subtitle{margin:8px 0 26px;color:#8ea2bd;font-size:13px;line-height:1.55}
body.page-login .field{position:relative;margin-bottom:14px}
body.page-login .field input{
  width:100%;height:56px;border-radius:13px;
  border:1px solid rgba(94,145,211,.30);
  background:rgba(4,13,28,.88); color:#fff;
  outline:none;padding:0 48px 0 48px;font-size:14px;
  transition:.22s;
}
body.page-login .field input:focus{
  border-color:rgba(0,234,255,.74);
  box-shadow:0 0 0 3px rgba(0,234,255,.05),0 0 18px rgba(0,234,255,.08);
}
body.page-login .field input::placeholder{color:#61728a}
body.page-login .ico{
  position:absolute;left:16px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;color:#8eb4dc;display:grid;place-items:center;
}
body.page-login .eye{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  color:#8eb4dc;cursor:pointer;font-size:16px;user-select:none;
}
body.page-login .meta{
  display:flex;justify-content:space-between;align-items:center;
  margin:7px 2px 20px;color:#7186a4;font-size:11px;
}
body.page-login .meta .secure{display:flex;align-items:center;gap:7px}
body.page-login .meta .secure b{color:#6fe4ff;font-weight:700}
body.page-login .login-btn{
  position:relative;width:100%;height:58px;border:0;border-radius:14px;
  color:#fff;font-size:15px;font-weight:850;letter-spacing:.5px;cursor:pointer;
  background:linear-gradient(100deg,#00bfe8,#1f73ff 48%,#8259ff);
  box-shadow:0 0 20px rgba(0,194,255,.24),0 0 28px rgba(132,86,255,.15);
  overflow:hidden;transition:.2s;
}
body.page-login .login-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
body.page-login .login-btn:disabled{cursor:default;transform:none;filter:none}
body.page-login .login-btn::before{
  content:"";position:absolute;top:0;left:-45%;width:35%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transform:skewX(-18deg);
}
body.page-login .login-btn.loading::before{animation:sweep 1.05s linear infinite}
@keyframes sweep{to{left:125%}}
body.page-login .btn-inner{
  position:relative;z-index:2;height:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;
}
body.page-login .spinner{
  width:17px;height:17px;border-radius:50%;
  border:2px solid rgba(255,255,255,.28);
  border-top-color:#fff;display:none;animation:spin .7s linear infinite
}
body.page-login .loading .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}
body.page-login .progress{
  display:none;margin-top:14px;height:5px;border-radius:999px;
  overflow:hidden;background:#071426;border:1px solid rgba(0,234,255,.12)
}
body.page-login .progress.show{display:block}
body.page-login .progress > span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));
  box-shadow:0 0 12px rgba(0,234,255,.55);
  transition:width .25s ease;
}
body.page-login .message{
  min-height:18px;margin-top:13px;text-align:center;
  color:#8ea1ba;font-size:11px;
}
body.page-login .message.error{color:#ff8d9c}
body.page-login .message.success{color:#8affbd}
body.page-login .granted{
  display:none;text-align:center;padding:10px 0 4px;
}
body.page-login .granted.show{display:block;animation:grant .45s ease both}
@keyframes grant{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}
body.page-login .granted-icon{
  width:72px;height:72px;border-radius:50%;margin:4px auto 14px;
  display:grid;place-items:center;font-size:32px;color:#06150e;
  background:radial-gradient(circle at 40% 35%,#c8ffe0,#53ff9a 58%,#20d879);
  box-shadow:0 0 32px rgba(83,255,154,.36);
}
body.page-login .granted h2{font-size:24px;color:#9dffc3;letter-spacing:1.4px}
body.page-login .granted p{margin-top:7px;color:#7fa98e;font-size:12px}
body.page-login .form-wrap.hidden{display:none}
body.page-login .footer{
  text-align:center;margin-top:16px;color:#566c87;font-size:10px;letter-spacing:.6px
}
@media(max-width:520px){
  body.page-login .login-card{padding:27px 20px 24px;border-radius:20px}
  body.page-login .brand{align-items:flex-start}
  body.page-login .status{display:none}
  body.page-login .title{font-size:27px}
}



/* ==========================================================
   TAGS PAGE (namespaced)
========================================================== */

body.page-tags /* ============================================================
   RELAY SERVER — FUTURISTIC TAG VIEWER
============================================================ */

:root{
  --bg:#02060d;
  --bg2:#050c18;
  --panel:rgba(5,13,27,.88);
  --panel-soft:rgba(8,19,38,.72);

  --cyan:#00eaff;
  --blue:#168bff;
  --purple:#9c45ff;
  --gold:#ffd84a;
  --orange:#ff9d1c;
  --green:#49ff8a;
  --red:#ff5364;

  --text:#edf6ff;
  --muted:#8294af;

  --line:rgba(94,145,211,.22);
  --line-bright:rgba(0,234,255,.45);

  --header-h:68px;
}


body.page-tags /* ============================================================
   RESET
============================================================ */

*{
  box-sizing:border-box;
}

body.page-tags{
  min-height:100%;
}

body.page-tags{
  margin:0;
  min-height:100vh;

  color:var(--text);

  font-family:
    Inter,
    "Segoe UI",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;

  background:
    radial-gradient(
      circle at 13% 0%,
      rgba(0,140,255,.13),
      transparent 28%
    ),
    radial-gradient(
      circle at 87% 18%,
      rgba(125,35,255,.11),
      transparent 29%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(0,234,255,.07),
      transparent 35%
    ),
    linear-gradient(
      145deg,
      #01040a 0%,
      #030814 52%,
      #01040b 100%
    );

  overflow-x:hidden;
}


body.page-tags /* ============================================================
   BACKGROUND FX
============================================================ */

body::before{
  content:"";
  position:fixed;
  inset:0;

  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(0,153,255,.04) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(0,153,255,.04) 1px,
      transparent 1px
    );

  background-size:45px 45px;

  mask-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.85),
      transparent
    );

  z-index:0;
}


body.page-tags::after{
  content:"";

  position:fixed;

  width:620px;
  height:620px;

  right:-250px;
  bottom:-280px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(108,45,255,.14),
      rgba(0,150,255,.05) 45%,
      transparent 70%
    );

  filter:blur(15px);

  pointer-events:none;

  z-index:0;
}


body.page-tags .scan-line{
  position:fixed;

  left:0;
  right:0;
  top:-20%;

  height:200px;

  pointer-events:none;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0,234,255,.015),
      rgba(0,234,255,.055),
      transparent
    );

  animation:scanMove 9s linear infinite;

  z-index:1;
}


@keyframes scanMove{
  from{
    transform:translateY(-100px);
  }

  to{
    transform:translateY(120vh);
  }
}


body.page-tags /* ============================================================
   HEADER
============================================================ */

header{
  position:sticky;
  top:0;

  z-index:100;

  min-height:var(--header-h);

  display:flex;
  align-items:center;

  gap:14px;

  padding:10px 18px;

  background:
    linear-gradient(
      90deg,
      rgba(2,8,18,.96),
      rgba(5,14,30,.94),
      rgba(4,8,19,.96)
    );

  border-bottom:1px solid rgba(76,154,255,.24);

  backdrop-filter:blur(18px);

  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    0 1px 0 rgba(0,234,255,.05) inset;
}


body.page-tags .header-glow{
  position:absolute;

  left:20%;
  right:20%;
  bottom:-1px;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--cyan),
      var(--purple),
      transparent
    );

  box-shadow:
    0 0 12px rgba(0,234,255,.5);

  pointer-events:none;
}


body.page-tags .logo{
  position:relative;

  width:46px;
  height:46px;

  flex:0 0 46px;

  display:grid;
  place-items:center;

  border-radius:14px;

  color:var(--cyan);

  font-size:20px;

  border:1px solid rgba(0,234,255,.33);

  background:
    linear-gradient(
      145deg,
      rgba(0,169,255,.11),
      rgba(116,51,255,.07)
    );

  box-shadow:
    0 0 22px rgba(0,195,255,.12),
    inset 0 0 18px rgba(0,234,255,.08);
}


body.page-tags .logo::before{
  content:"";

  position:absolute;
  inset:5px;

  border-radius:10px;

  border:1px solid rgba(0,234,255,.12);
}


body.page-tags .logo-icon{
  position:relative;
  z-index:2;

  filter:
    drop-shadow(0 0 7px rgba(0,234,255,.65));
}


body.page-tags .header-info{
  min-width:0;
}


body.page-tags .title{
  display:flex;
  align-items:center;
  gap:9px;

  font-size:17px;
  font-weight:800;

  letter-spacing:.25px;

  white-space:nowrap;
}


body.page-tags .title .accent{
  color:var(--cyan);

  text-shadow:
    0 0 12px rgba(0,234,255,.32);
}


body.page-tags .live-dot{
  width:7px;
  height:7px;

  border-radius:50%;

  background:var(--green);

  box-shadow:
    0 0 8px var(--green),
    0 0 17px rgba(73,255,138,.45);
}


body.page-tags .sub{
  margin-top:3px;

  color:var(--muted);

  font-size:11px;
  letter-spacing:.25px;
}


body.page-tags .spacer{
  flex:1;
}


body.page-tags .header-stat{
  display:flex;
  flex-direction:column;

  padding:6px 12px;

  border-radius:9px;

  border:1px solid rgba(85,142,215,.18);

  background:rgba(4,13,27,.65);

  margin-right:4px;
}


body.page-tags .header-stat span:first-child{
  color:#6c7f9e;

  font-size:9px;
  text-transform:uppercase;

  letter-spacing:1px;
}


body.page-tags .header-stat span:last-child{
  color:var(--green);

  font-size:11px;
  font-weight:700;

  margin-top:2px;
}


body.page-tags .btn-chip{
  position:relative;

  overflow:hidden;

  min-width:94px;

  padding:9px 14px;

  border:1px solid rgba(255,194,56,.5);

  border-radius:10px;

  color:#07090e;

  font-size:12px;
  font-weight:800;

  cursor:pointer;

  background:
    linear-gradient(
      135deg,
      #ffe66a,
      #ffb628
    );

  box-shadow:
    0 0 16px rgba(255,190,38,.14),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition:.2s ease;
}


body.page-tags .btn-chip:hover{
  transform:translateY(-1px);

  box-shadow:
    0 0 22px rgba(255,190,38,.30);

  filter:brightness(1.08);
}


body.page-tags .btn-chip:active{
  transform:translateY(1px);
}


body.page-tags /* ============================================================
   WRAPPER
============================================================ */

.wrap{
  position:relative;

  z-index:5;

  width:min(1500px, calc(100% - 24px));

  margin:0 auto;

  padding:18px 0 28px;

  display:flex;
  flex-direction:column;

  gap:14px;
}


body.page-tags /* ============================================================
   TOP STATS
============================================================ */

.overview{
  display:grid;

  grid-template-columns:
    minmax(180px,1fr)
    minmax(180px,1fr)
    minmax(180px,1fr);

  gap:10px;
}


body.page-tags .stat-card{
  position:relative;

  overflow:hidden;

  min-height:76px;

  padding:14px 16px;

  border-radius:13px;

  border:1px solid var(--line);

  background:
    linear-gradient(
      145deg,
      rgba(7,18,36,.83),
      rgba(3,9,20,.82)
    );

  backdrop-filter:blur(12px);

  box-shadow:
    0 8px 30px rgba(0,0,0,.17),
    inset 0 0 28px rgba(0,155,255,.025);
}


body.page-tags .stat-card::after{
  content:"";

  position:absolute;

  right:-30px;
  top:-40px;

  width:100px;
  height:100px;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(0,234,255,.09),
      transparent 68%
    );
}


body.page-tags .stat-label{
  color:#7085a6;

  font-size:10px;

  text-transform:uppercase;

  letter-spacing:1.2px;
}


body.page-tags .stat-value{
  margin-top:7px;

  color:#eaf7ff;

  font-size:19px;
  font-weight:800;
}


body.page-tags .stat-value.cyan{
  color:var(--cyan);

  text-shadow:
    0 0 14px rgba(0,234,255,.25);
}


body.page-tags .stat-value.gold{
  color:var(--gold);

  text-shadow:
    0 0 14px rgba(255,216,74,.20);
}


body.page-tags .stat-sub{
  color:#657591;

  font-size:10px;

  margin-top:3px;
}


body.page-tags /* ============================================================
   MAIN PANEL
============================================================ */

.panel{
  position:relative;

  overflow:hidden;

  background:
    linear-gradient(
      150deg,
      rgba(5,14,29,.94),
      rgba(2,8,18,.93)
    );

  border:1px solid rgba(77,139,214,.25);

  border-radius:16px;

  backdrop-filter:blur(20px);

  box-shadow:
    0 18px 45px rgba(0,0,0,.30),
    inset 0 0 45px rgba(0,174,255,.018);
}


body.page-tags .panel::before{
  content:"";

  position:absolute;

  top:0;
  left:8%;
  right:8%;

  height:1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(0,234,255,.7),
      rgba(141,67,255,.55),
      transparent
    );

  box-shadow:
    0 0 12px rgba(0,234,255,.30);

  pointer-events:none;
}


body.page-tags /* ============================================================
   TOOLBAR
============================================================ */

.toolbar{
  position:relative;

  z-index:3;

  display:flex;
  align-items:center;

  gap:10px;

  min-height:62px;

  padding:10px 12px;

  border-bottom:1px solid var(--line);

  background:
    linear-gradient(
      90deg,
      rgba(4,13,26,.91),
      rgba(8,19,37,.82),
      rgba(4,12,26,.91)
    );
}


body.page-tags .search-wrap{
  position:relative;

  flex:1;

  max-width:720px;
}


body.page-tags .search-icon{
  position:absolute;

  left:14px;
  top:50%;

  transform:translateY(-50%);

  width:17px;
  height:17px;

  color:#6983a7;

  pointer-events:none;
}


body.page-tags .search-icon svg{
  width:100%;
  height:100%;

  fill:none;
  stroke:currentColor;

  stroke-width:2;
}


body.page-tags .input{
  width:100%;

  height:40px;

  padding:
    8px
    40px
    8px
    42px;

  border-radius:10px;

  border:1px solid rgba(87,135,196,.25);

  color:#e8f3ff;

  font-size:12px;

  outline:none;

  background:
    linear-gradient(
      90deg,
      rgba(1,9,20,.86),
      rgba(5,15,30,.85)
    );

  transition:
    border-color .2s,
    box-shadow .2s,
    background .2s;
}


body.page-tags .input::placeholder{
  color:#5e6e88;
}


body.page-tags .input:focus{
  border-color:rgba(0,234,255,.54);

  background:rgba(3,14,28,.95);

  box-shadow:
    0 0 0 3px rgba(0,234,255,.04),
    0 0 20px rgba(0,234,255,.06);
}


body.page-tags .search-clear{
  position:absolute;

  right:8px;
  top:50%;

  transform:translateY(-50%);

  width:26px;
  height:26px;

  border:0;
  border-radius:7px;

  color:#7f8ba0;
  background:transparent;

  cursor:pointer;

  opacity:0;

  transition:.2s;
}


body.page-tags .search-wrap.has-value .search-clear{
  opacity:1;
}


body.page-tags .search-clear:hover{
  color:var(--cyan);

  background:rgba(0,234,255,.07);
}


body.page-tags .count-box{
  margin-left:auto;

  min-width:100px;

  padding:8px 11px;

  border-radius:9px;

  border:1px solid rgba(85,145,218,.20);

  background:rgba(1,10,22,.55);

  text-align:center;
}


body.page-tags .count-label{
  display:block;

  color:#60728f;

  font-size:9px;

  text-transform:uppercase;

  letter-spacing:1px;
}


body.page-tags .count{
  display:block;

  margin-top:2px;

  color:var(--gold);

  font-size:12px;
  font-weight:700;
}


body.page-tags /* ============================================================
   TABLE
============================================================ */

.table-wrap{
  position:relative;

  max-height:
    calc(100vh - 250px);

  min-height:360px;

  overflow:auto;

  scrollbar-width:thin;

  scrollbar-color:
    rgba(0,193,255,.55)
    rgba(4,12,25,.8);
}


body.page-tags .table-wrap::-webkit-scrollbar{
  width:9px;
  height:9px;
}


body.page-tags .table-wrap::-webkit-scrollbar-track{
  background:rgba(3,10,21,.95);
}


body.page-tags .table-wrap::-webkit-scrollbar-thumb{
  border-radius:20px;

  border:2px solid rgba(3,10,21,.95);

  background:
    linear-gradient(
      to bottom,
      #087fff,
      #00d8e7,
      #804aff
    );
}


body.page-tags table{
  width:100%;

  min-width:920px;

  border-collapse:separate;
  border-spacing:0;

  font-size:12.5px;
}


body.page-tags thead th{
  position:sticky;
  top:0;

  z-index:10;

  padding:12px 14px;

  text-align:left;

  color:#8ea2c0;

  font-size:10px;
  font-weight:800;

  text-transform:uppercase;

  letter-spacing:1.05px;

  border-bottom:1px solid rgba(79,133,202,.24);

  background:
    linear-gradient(
      180deg,
      rgba(7,17,33,.99),
      rgba(3,11,24,.98)
    );

  backdrop-filter:blur(15px);
}


body.page-tags thead th:first-child{
  padding-left:18px;
}


body.page-tags tbody td{
  position:relative;

  padding:12px 14px;

  vertical-align:middle;

  color:#b4c3d7;

  border-bottom:
    1px solid rgba(74,114,166,.12);

  transition:
    background .18s,
    color .18s;
}


body.page-tags tbody tr{
  transition:.18s ease;
}


body.page-tags tbody tr:hover{
  background:
    linear-gradient(
      90deg,
      rgba(0,158,255,.055),
      rgba(93,43,255,.025),
      transparent
    );
}


body.page-tags tbody tr:hover td{
  color:#d5e6f8;
}


body.page-tags tbody tr:hover td:first-child::before{
  content:"";

  position:absolute;

  left:0;
  top:5px;
  bottom:5px;

  width:2px;

  border-radius:2px;

  background:
    linear-gradient(
      to bottom,
      var(--cyan),
      var(--purple)
    );

  box-shadow:
    0 0 8px rgba(0,234,255,.65);
}


body.page-tags /* ============================================================
   TAG PILL
============================================================ */

.tag-pill{
  position:relative;

  display:inline-flex;

  align-items:center;

  max-width:100%;

  padding:6px 10px;

  overflow:hidden;

  border-radius:8px;

  border:1px solid rgba(0,216,255,.24);

  color:#bff8ff;

  background:
    linear-gradient(
      135deg,
      rgba(0,164,255,.10),
      rgba(100,42,255,.06)
    );

  font-family:
    "Cascadia Code",
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:11.5px;

  font-weight:650;

  letter-spacing:.15px;

  box-shadow:
    inset 0 0 14px rgba(0,234,255,.025);

  text-shadow:
    0 0 8px rgba(0,234,255,.20);
}


body.page-tags .tag-pill::before{
  content:"";

  width:5px;
  height:5px;

  margin-right:7px;

  border-radius:50%;

  flex:0 0 5px;

  background:var(--cyan);

  box-shadow:
    0 0 7px rgba(0,234,255,.8);
}


body.page-tags /* ============================================================
   EXAMPLE + BEHAVIOR
============================================================ */

.example{
  color:#f1c95c;

  font-family:
    "Cascadia Code",
    Consolas,
    monospace;

  font-size:11.5px;
}


body.page-tags .behavior{
  color:#9cadc4;

  line-height:1.55;
}


body.page-tags /* ============================================================
   COPY BUTTON
============================================================ */

.copy-btn{
  position:relative;

  overflow:hidden;

  min-width:78px;

  padding:7px 12px;

  border-radius:8px;

  border:1px solid rgba(70,143,221,.28);

  color:#d8e8fa;

  background:
    linear-gradient(
      135deg,
      rgba(4,20,40,.96),
      rgba(3,11,26,.96)
    );

  cursor:pointer;

  font-size:11px;
  font-weight:700;

  transition:.18s ease;
}


body.page-tags .copy-btn::before{
  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      110deg,
      transparent 30%,
      rgba(255,255,255,.08),
      transparent 70%
    );

  transform:translateX(-120%);

  transition:.35s;
}


body.page-tags .copy-btn:hover{
  color:#021017;

  border-color:var(--cyan);

  background:
    linear-gradient(
      135deg,
      var(--cyan),
      #49a7ff
    );

  box-shadow:
    0 0 16px rgba(0,234,255,.20);
}


body.page-tags .copy-btn:hover::before{
  transform:translateX(120%);
}


body.page-tags .copy-btn.copied{
  color:#05170d;

  border-color:var(--green);

  background:var(--green);

  box-shadow:
    0 0 16px rgba(73,255,138,.25);
}


body.page-tags /* ============================================================
   EMPTY STATE
============================================================ */

.empty-state{
  padding:55px 20px !important;

  text-align:center;

  color:#627593 !important;
}


body.page-tags .empty-icon{
  display:block;

  margin-bottom:9px;

  color:#3e6388;

  font-size:28px;
}


body.page-tags /* ============================================================
   TOAST
============================================================ */

.toast{
  position:fixed;

  right:18px;
  bottom:18px;

  z-index:1000;

  display:flex;
  align-items:center;

  gap:9px;

  min-width:160px;

  padding:11px 14px;

  border-radius:11px;

  border:1px solid rgba(0,234,255,.33);

  color:#dffcff;

  background:
    linear-gradient(
      135deg,
      rgba(4,21,39,.96),
      rgba(5,10,25,.96)
    );

  box-shadow:
    0 12px 38px rgba(0,0,0,.4),
    0 0 25px rgba(0,234,255,.10);

  backdrop-filter:blur(15px);

  opacity:0;

  transform:
    translateY(14px)
    scale(.96);

  transition:.22s ease;

  pointer-events:none;

  font-size:12px;
  font-weight:700;
}


body.page-tags .toast::before{
  content:"✓";

  width:22px;
  height:22px;

  display:grid;
  place-items:center;

  border-radius:7px;

  color:#02150b;

  background:var(--green);

  box-shadow:
    0 0 11px rgba(73,255,138,.3);
}


body.page-tags .toast.show{
  opacity:1;

  transform:
    translateY(0)
    scale(1);
}


body.page-tags /* ============================================================
   MOBILE
============================================================ */

@media(max-width:900px){

  .header-stat{
    display:none;
  }

  .overview{
    grid-template-columns:1fr 1fr;
  }

  .overview .stat-card:last-child{
    grid-column:1 / -1;
  }

}


@media(max-width:600px){

  body.page-tags header{
    padding:9px 10px;
  }

  body.page-tags .logo{
    width:40px;
    height:40px;

    flex-basis:40px;
  }

  body.page-tags .title{
    font-size:14px;
  }

  body.page-tags .sub{
    max-width:170px;

    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }

  body.page-tags .btn-chip{
    min-width:73px;

    padding:8px 9px;

    font-size:10px;
  }

  body.page-tags .wrap{
    width:calc(100% - 12px);

    padding-top:8px;
  }

  body.page-tags .overview{
    grid-template-columns:1fr;
  }

  body.page-tags .overview .stat-card:last-child{
    grid-column:auto;
  }

  body.page-tags .toolbar{
    align-items:stretch;
    flex-direction:column;
  }

  body.page-tags .search-wrap{
    max-width:none;
  }

  body.page-tags .count-box{
    margin-left:0;

    width:100%;
  }

}


body.page-tags /* ============================================================
   ROCKET RELAY SERVER — DASHBOARD MATCH OVERRIDES
============================================================ */
:root{
  --rr-cyan:#18e6ff;
  --rr-blue:#346cf4;
  --rr-violet:#7c5cff;
  --rr-green:#53ff9a;
  --rr-orange:#ff9f35;
}

body.page-tags{
  background:
    radial-gradient(circle at 13% 0%, rgba(0,140,255,.11), transparent 29%),
    radial-gradient(circle at 88% 16%, rgba(124,92,255,.10), transparent 29%),
    linear-gradient(145deg,#01040a 0%,#030814 52%,#01040b 100%) !important;
}

body.page-tags /* same compact Rocket Relay header as main dashboard */
header.rr-header{
  position:sticky;
  top:0;
  z-index:100;
  height:60px;
  min-height:60px;
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 14px;
  background:
    linear-gradient(90deg,rgba(2,7,16,.98),rgba(5,16,33,.96) 45%,rgba(3,8,18,.98));
  border-bottom:1px solid rgba(74,145,224,.24);
  box-shadow:
    0 12px 30px rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(0,234,255,.05);
  backdrop-filter:blur(18px);
}

body.page-tags header.rr-header::after{
  content:"";
  position:absolute;
  left:17%;
  right:17%;
  bottom:-1px;
  height:1px;
  background:
    linear-gradient(90deg,transparent,rgba(0,234,255,.75),rgba(142,66,255,.55),transparent);
  box-shadow:0 0 12px rgba(0,234,255,.4);
  pointer-events:none;
}

body.page-tags .rr-brand{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:300px;
}

body.page-tags .rr-logo{
  position:relative;
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  border:1px solid rgba(0,234,255,.30);
  background:linear-gradient(145deg,rgba(0,165,255,.10),rgba(116,52,255,.08));
  color:var(--rr-cyan);
  font-size:19px;
  box-shadow:
    0 0 22px rgba(0,202,255,.12),
    inset 0 0 20px rgba(0,234,255,.06);
}

body.page-tags .rr-logo::before{
  content:"";
  position:absolute;
  inset:5px;
  border-radius:9px;
  border:1px solid rgba(0,234,255,.10);
}

body.page-tags .rr-brand-title{
  color:#f4fbff;
  font-size:15px;
  font-weight:800;
  letter-spacing:.35px;
  text-shadow:0 0 13px rgba(0,234,255,.08);
}
body.page-tags .rr-brand-title .accent{ color:var(--rr-cyan); }
body.page-tags .rr-brand-sub{
  margin-top:2px;
  color:#7086a7;
  font-size:10px;
  letter-spacing:.2px;
}

body.page-tags .rr-ticker{
  margin-left:auto;
  min-width:0;
  flex:1;
  height:30px;
  overflow:hidden;
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  padding-left:12px;
  border-left:1px solid rgba(80,133,198,.20);
}

body.page-tags .rr-ticker-track{
  min-width:0;
  flex:1;
  overflow:hidden;
  position:relative;
  height:100%;
  display:flex;
  align-items:center;
}

body.page-tags .rr-ticker-text{
  white-space:nowrap;
  display:inline-block;
  padding-left:100%;
  color:#ffad47;
  font-size:12px;
  font-weight:700;
  letter-spacing:.25px;
  animation:rr-ticker-scroll 22s linear infinite;
}

@keyframes rr-ticker-scroll{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(-100%); }
}

body.page-tags .rr-status{
  flex:0 0 auto;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(60,255,141,.25);
  background:rgba(2,11,24,.72);
  color:#77ffad;
  font-size:9px;
  font-weight:800;
  box-shadow:0 0 12px rgba(60,255,141,.08);
}

body.page-tags .rr-back{
  flex:0 0 auto;
  min-width:86px;
  padding:8px 13px;
  border-radius:9px;
  border:1px solid rgba(24,230,255,.52);
  color:#fff;
  background:linear-gradient(135deg,#18e6ff,#346cf4 55%,#7c5cff);
  font-size:11px;
  font-weight:850;
  cursor:pointer;
  box-shadow:0 0 15px rgba(24,230,255,.10);
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1.25),
    filter .18s ease,
    box-shadow .18s ease;
}
body.page-tags .rr-back:hover{
  transform:translateY(-4px) scale(1.035);
  filter:brightness(1.09);
  box-shadow:0 7px 16px rgba(0,0,0,.22);
}
body.page-tags .rr-back:active{ transform:translateY(0) scale(.98); }

body.page-tags /* make the Tag page body/panels visually match dashboard */
.wrap{
  width:min(1500px,calc(100% - 18px)) !important;
  padding:10px 0 24px !important;
  gap:10px !important;
}

body.page-tags .overview{
  gap:8px !important;
}
body.page-tags .stat-card{
  min-height:68px !important;
  padding:11px 14px !important;
  border-radius:14px !important;
  border-color:rgba(74,132,202,.24) !important;
  background:linear-gradient(150deg,rgba(6,17,34,.94),rgba(2,8,19,.93)) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,.20),
    inset 0 0 42px rgba(0,167,255,.018) !important;
}

body.page-tags .panel{
  border-radius:16px !important;
  border-color:rgba(74,132,202,.24) !important;
  background:linear-gradient(150deg,rgba(6,17,34,.94),rgba(2,8,19,.93)) !important;
  box-shadow:
    0 14px 38px rgba(0,0,0,.28),
    inset 0 0 42px rgba(0,167,255,.018) !important;
}

body.page-tags .toolbar{
  min-height:54px !important;
  padding:8px 10px !important;
}

body.page-tags .input{
  height:36px !important;
  border-color:rgba(76,139,211,.25) !important;
  background:rgba(3,11,24,.82) !important;
}

body.page-tags .count-box{
  min-width:105px !important;
  background:rgba(2,11,24,.72) !important;
}

body.page-tags .table-wrap{
  max-height:calc(100vh - 228px) !important;
  scrollbar-width:thin;
  scrollbar-color:rgba(0,205,255,.46) rgba(3,10,21,.7);
}
body.page-tags .table-wrap::-webkit-scrollbar{ width:8px; height:8px; }
body.page-tags .table-wrap::-webkit-scrollbar-track{ background:rgba(2,8,18,.8); }
body.page-tags .table-wrap::-webkit-scrollbar-thumb{
  border-radius:10px;
  border:2px solid rgba(2,8,18,.8);
  background:linear-gradient(to bottom,#087fff,#00d8e7,#804aff);
}

body.page-tags thead th{
  background:linear-gradient(180deg,rgba(7,17,33,.99),rgba(3,11,24,.98)) !important;
}

body.page-tags .tag-pill{
  border-color:rgba(24,230,255,.28) !important;
  background:linear-gradient(135deg,rgba(24,230,255,.08),rgba(124,92,255,.06)) !important;
}

body.page-tags .copy-btn{
  border-color:rgba(35,199,255,.45) !important;
  background:linear-gradient(135deg,#23c7ff,#2f7df5) !important;
  color:#03111a !important;
  font-weight:850 !important;
  transition:
    transform .16s cubic-bezier(.2,.85,.25,1.2),
    filter .16s ease,
    box-shadow .16s ease !important;
}
body.page-tags .copy-btn:hover{
  transform:translateY(-2px) scale(1.025);
  filter:brightness(1.08);
  box-shadow:0 6px 14px rgba(0,0,0,.20) !important;
}
body.page-tags .copy-btn.copied{
  background:linear-gradient(135deg,#53ff9a,#22c76a) !important;
  color:#04130b !important;
}

@media(max-width:900px){
  body.page-tags .rr-brand{ min-width:220px; }
  body.page-tags .rr-ticker-text{ font-size:10px; }
}
@media(max-width:700px){
  body.page-tags header.rr-header{
    height:auto;
    min-height:60px;
    flex-wrap:wrap;
  }
  body.page-tags .rr-ticker{ order:3; width:100%; flex-basis:100%; border-left:0; padding-left:0; }
  body.page-tags .rr-brand{ min-width:0; flex:1; }
}




/* ==========================================================
   LOGIN VIEWPORT CENTERING FIX
   Keeps the login card centered at browser zoom in/out.
========================================================== */
html{
  min-height:100%;
}

body.page-login{
  width:100%;
  min-width:100%;
  height:100vh;
  min-height:100vh;
  margin:0;
  overflow:hidden;
}

body.page-login .shell{
  position:fixed !important;
  inset:0 !important;
  z-index:2;
  width:100vw !important;
  height:100vh !important;
  min-height:100vh !important;
  padding:24px;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:auto;
}

body.page-login .login-wrap{
  margin:auto !important;
  flex:0 0 auto;
}

@supports (height:100dvh){
  body.page-login,
  body.page-login .shell{
    height:100dvh !important;
    min-height:100dvh !important;
  }
}


/* ==========================================================
   TAGS PAGE — Bigger Display Count Box
========================================================== */
body.page-tags .count-box{
  min-width: 128px !important;
  min-height: 52px !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
}

body.page-tags .count-box .label{
  font-size: 10px !important;
  letter-spacing: 2px !important;
}

body.page-tags .count-box .value{
  margin-top: 3px !important;
  font-size: 18px !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
}


/* ==========================================================
   TAGS PAGE — Display box final size fix
========================================================== */
body.page-tags .count-box{
  min-width:150px !important;
  width:150px !important;
  min-height:64px !important;
  height:64px !important;
  padding:10px 16px !important;
  border-radius:13px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
}

body.page-tags .count-label{
  display:block !important;
  font-size:10px !important;
  line-height:1.1 !important;
  letter-spacing:1.7px !important;
}

body.page-tags .count{
  display:block !important;
  margin-top:5px !important;
  font-size:16px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
}


/* ==========================================================
   TAGS PAGE — Fill viewport height / remove bottom empty gap
========================================================== */
body.page-tags .wrap{
  min-height:calc(100vh - 68px) !important;
  padding-bottom:8px !important;
}

body.page-tags .panel{
  flex:1 1 auto !important;
  min-height:calc(100vh - 88px) !important;
  display:flex !important;
  flex-direction:column !important;
}

body.page-tags .toolbar{
  flex:0 0 auto !important;
}

body.page-tags .table-wrap{
  flex:1 1 auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  overflow-y:auto !important;
  overflow-x:auto !important;
}

/* Keep table header fixed while the rows scroll inside the tall panel */
body.page-tags .table-wrap thead th{
  position:sticky !important;
  top:0 !important;
  z-index:10 !important;
}