:root{
    --ribe:#2c446b;
    --ribe-2:#365582;
    --ribe-3:#466a9b;
    --ribe-4:#dfe8f3;
    --ink:#172338;
    --muted:#6d7a8d;
    --line:#d9e3ef;
    --bg:#f4f7fb;
    --card:#ffffff;
    --success:#1f9d74;
    --warning:#d9981e;
    --danger:#cf4d4d;
    --info:#4e7bb8;
    --shadow:0 18px 45px rgba(34,58,98,.08);
    --radius:22px;
    --sidebar:286px;
    --top:76px;
  }

  .btn-soft,.btn-main,.icon-btn{
    border-radius:15px;font-weight:700;font-size:.84rem;border:1px solid var(--line);transition:.2s ease;
  }
  .btn-soft{background:#fff;color:var(--ribe);padding:10px 14px}
  .btn-main{background:linear-gradient(135deg,var(--ribe),var(--ribe-3));color:#fff;padding:10px 16px;border:none;box-shadow:0 14px 28px rgba(44,68,107,.18)}
  .btn-soft:hover,.btn-main:hover,.icon-btn:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(34,58,98,.08)}
  .icon-btn{width:44px;height:44px;background:#fff;color:var(--ribe);display:grid;place-items:center;position:relative}
  .notif-dot{position:absolute;right:10px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:2px solid #fff}
  .login-screen{
    position:fixed;inset:0;z-index:9999;
    background:radial-gradient(circle at top left, #365582, #172338);
    display:flex;align-items:center;justify-content:center;padding:20px;
  }
  .login-card{
    width:100%;max-width:420px;background:#fff;border-radius:30px;
    padding:40px;box-shadow:0 25px 50px rgba(0,0,0,0.2);
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .login-brand{display:flex;flex-direction:column;align-items:center;margin-bottom:30px}
  .login-logo{width:100%;height:100%;padding: 5%;background:#fff;border-radius:24px;overflow:hidden;display:grid;place-items:center;margin-bottom:16px;box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
  .login-logo img{width: 100%; height: 100%; object-fit: cover;}
  .login-screen.hidden{display:none}