:root{
      --bg:#f7f7f7;                   /* base background */
      --bg-elev:#232B3C;              /* elevated surfaces */
      --text:#dbe3ff;                 /* primary text */
      --muted:#9aa7bd;                /* muted text */
      --accent1:#007aff;              /* brand blue */
      --accent2:#9c27b0;              /* brand purple */
      --ring: 0 0 0 2px rgba(0,122,255,.4);
      --radius:14px;
      --nav-h:56px;                   /* compact like the reference */
    }
    *{box-sizing:border-box}
    html,body{margin:0;height:100%;background:var(--bg);color:#1a2233;font:14px/1.2 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
    .row-navbar{color:var(--text)}
    .title-navbar{color:var(--text)}
    /* NAVBAR */
    .nav{
      position:sticky;top:0;z-index:50;height:var(--nav-h);
      display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;
      padding:0 10px;background:#1A2233;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .cluster{display:flex;align-items:center;gap:8px}
    .btn-navbar{height:36px;min-width:36px;border:0;border-radius:12px;background:var(--bg-elev);
         display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text);
         padding:0 10px;transition:filter .2s,transform .04s}
    .btn-navbar:active{transform:translateY(1px)}
    .btn-navbar:hover{filter:brightness(1.1)}
    .btn-navbar[aria-expanded="true"]{outline:var(--ring)}

    /* app grid icon */
    .dots{display:grid;grid-template-columns:repeat(3,4px);gap:3px}
    .dots span{width:4px;height:4px;border-radius:2px;background:#c1cbe8}

    /* brand area */
    .brand{display:flex;align-items:center;gap:10px;font-weight:600;white-space:nowrap;overflow:hidden}
    .logo{width:26px;height:26px;flex:0 0 auto;}
    .brand .title{font-size:14px;letter-spacing:.2px}
    .brand .subtitle{font-size:12px;color:var(--muted)}

    /* right-side actions */
    .sep{width:1px;height:28px;background:rgba(255,255,255,.08);margin:0 4px;border-radius:1px}
    .status-dot{width:8px;height:8px;border-radius:50%;background:#29d391}

    /* DRAWER */
    .drawer{position:fixed;inset:0 0 0 auto; width:min(360px,88vw); background:#1A2233;
      border-left:1px solid rgba(255,255,255,.08); 
      transform:translateX(100%); transition:transform .28s ease; z-index:60; display:flex;flex-direction:column}
    .drawer.open{transform:translateX(0)}
    .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
    .drawer-title{font-weight:600}
    .app-grid{padding:14px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;overflow:auto}
    .app-card{background:var(--bg-elev);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;cursor:pointer;border:1px solid rgba(255,255,255,.06)}
    .app-icon{max-height:52px;max-width:52px;}
    .app-name{font-size:12px;color:#dfe7ff;margin-top:5px}

    /* ACCOUNT MENU */
    .menu{position:absolute;right:10px;top:calc(var(--nav-h) + 8px);background:#1A2233;
      border:1px solid rgba(255,255,255,.08);border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.45);
      min-width:220px;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .15s,transform .15s}
    .menu.open{opacity:1;transform:translateY(0);pointer-events:auto}
    .menu .row-navbar{display:flex;align-items:center;gap:10px;padding:10px 12px}
    .menu .row-navbar + .row-navbar{border-top:1px dashed rgba(255,255,255,.08)}
    .menu .row:hover{background:rgba(255,255,255,.04)}
    .menu .avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#24314a,#101420)}
    .menu small{color:var(--muted)}

    /* BADGE */
    .badge{padding:2px 8px;border-radius:999px;font-size:11px;background:rgba(0,122,255,.18);border:1px solid rgba(0,122,255,.35)}

    /* MOBILE tweaks */
    @media (max-width:820px){
      /* .brand .title{display:none} */
      .hide-on-mobile{display:none}
    }
    @media (max-width:520px){
      .brand .title{max-width:48vw;overflow:hidden;text-overflow:ellipsis}
    }
    /* Demo page filler */
    main{padding:24px;max-width:1100px;margin:auto;color:#1a2233}
    a{color:inherit;text-decoration:none}
    .kbd{border:1px solid rgba(255,255,255,.15);border-bottom-width:2px;padding:.2em .5em;border-radius:6px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.85em;color:#eaf1ff}
.nexify-card {
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease;
}

/* General Alert Styling */
.alert {
    border-radius: 8px;
    padding: 15px 20px;
    font-size: 1rem;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: all 0.3s ease-in-out;
    color: #fff;
    border: none;
    opacity: 0.95;
}


.alert::before {
    font-family: "Bootstrap-icons";
    font-size: 1.5rem;
    display: inline-block;
}

/* ✅ Success Alert - Green Gradient */
.alert-success {
    background: linear-gradient(to right, rgba(40, 167, 69, 0.9), rgba(26, 136, 52, 0.9));
}
.alert-success::before { content: "\F26A"; } /* Bi-check-circle */

/* ❌ Danger Alert - Red Gradient */
.alert-danger {
    background: linear-gradient(to right, rgba(220, 53, 69, 0.9), rgba(176, 40, 55, 0.9));
}
.alert-danger::before { content: "\F622"; } /* Bi-exclamation-octagon */

/* ⚠️ Warning Alert - Orange/Gold Gradient (Inspired by 2FA) */
.alert-warning {
    background: linear-gradient(to right, rgba(255, 140, 0, 0.9), rgba(255, 94, 0, 0.9));
}
.alert-warning::before { content: "\F33B"; } /* Bi-exclamation-triangle */

/* ℹ️ Info Alert - Blue Gradient */
.alert-info {
    background: linear-gradient(to right, rgba(23, 162, 184, 0.9), rgba(17, 122, 139, 0.9));
}
.alert-info::before { content: "\F34E"; } /* Bi-info-circle */

/* ❗ 2FA Security Alert (Reusing the new warning style) */
.alert-2fa {
    background: linear-gradient(to right, rgba(255, 140, 0, 0.9), rgba(255, 94, 0, 0.9));
}
.alert-2fa::before { content: "\F3ED"; } /* Bi-shield-exclamation */

/* 🔘 Close Button Styling */
.alert .btn-close {
    position: absolute;
    right: 15px;
    top: 10px;
    opacity: 0.7;
    transition: opacity 0.2s ease;
    filter: invert(1); /* Make the close icon white */
}
.alert .btn-close:hover {
    opacity: 1;
}

.nex-card-button{
  background:#1a2233;
  color:white;
  cursor:pointer;
}
.nex-card-button:hover{
  background:#26314a;
  color:white;
}
.nex-card-button-danger{
  background:#d9534f;
  color:white;
  cursor:pointer;
}
.nex-card-button-danger:hover{
  background:#c9302c;
  color:white;
}
.nex-card-button-warning{
  background:#f0ad4e;
  color:white;
  cursor:pointer;
}
.nex-card-button-warning:hover{
  background:#ec971f;
  color:white;
}
.nex-card-button-info{
  background:#5bc0de;
  color:white;
  cursor:pointer;
}
.nex-card-button-info:hover{
  background:#31b0d5;
  color:white;
}
.nex-card-button-success{
  background:#5cb85c;
  color:white;
  cursor:pointer;
}
.nex-card-button-success:hover{
  background:#449d44;
  color:white;
}
.nex-card-button-secondary{
  background:#6c757d;
  color:white;
  cursor:pointer;
}
.nex-card-button-secondary:hover{
  background:#545b62;
  color:white;
}