@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&display=swap');

:root{
  --do-blue:#0069ff;
  --do-blue-2:#3b9dff;
  --do-blue-dark:#0048c4;
  --do-violet:#7c5cff;
  --do-cyan:#22d3ee;
  --do-bg:#eef3fb;
  --do-surface:#ffffff;
  --do-border:rgba(120,160,230,.28);
  --do-text:#0f172a;
  --do-muted:#64748b;
  --do-success:#16a34a;
  --do-danger:#dc2626;
  --do-shadow:0 18px 40px rgba(10, 50, 130, .14);
  --glass-bg:rgba(255,255,255,.55);
  --glass-border:rgba(255,255,255,.65);
  --glass-blur:saturate(160%) blur(14px);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(1100px 540px at 88% -8%, rgba(124,92,255,.18), transparent 60%),
    radial-gradient(900px 480px at -6% 8%, rgba(0,105,255,.16), transparent 58%),
    radial-gradient(1000px 600px at 50% 120%, rgba(34,211,238,.14), transparent 60%),
    linear-gradient(165deg,#e7eefb 0%, #eef3fb 45%, #f3f7fe 100%);
  background-attachment:fixed;
  color:var(--do-text);
  font-size:14px;
  line-height:1.45;
  min-height:100vh;
  animation:fadeInPage .5s ease;
}

.container-fluid{max-width:1460px}

.navbar{
  background:linear-gradient(120deg, rgba(255,255,255,.72), rgba(240,246,255,.55))!important;
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  border-bottom:1px solid var(--glass-border)!important;
  box-shadow:0 8px 30px rgba(10,50,130,.08);
  position:sticky;
  top:0;
  z-index:30;
}

.navbar-brand{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:18px;
  background:linear-gradient(135deg,#0b2b63,#0069ff 60%,#7c5cff);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  letter-spacing:.2px;
}

.do-brand-dot{
  width:10px;
  height:10px;
  border-radius:999px;
  display:inline-block;
  margin-right:10px;
  background:linear-gradient(135deg,var(--do-blue),var(--do-violet));
  box-shadow:0 0 0 6px rgba(0,105,255,.15);
  animation:pulseDot 2.2s infinite;
}

.card{
  position:relative;
  border:1px solid var(--glass-border);
  border-radius:20px;
  background:linear-gradient(160deg, rgba(255,255,255,.78), rgba(255,255,255,.5));
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:var(--do-shadow)!important;
  overflow:hidden;
  animation:riseUp .5s ease both;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(135deg, rgba(0,105,255,.35), rgba(124,92,255,.18), rgba(34,211,238,.25));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:.5;
  pointer-events:none;
}

.card:hover{
  transform:translateY(-3px);
  box-shadow:0 26px 50px rgba(10, 50, 130, .2)!important;
  transition:.28s ease;
}

.do-card-header{
  background:linear-gradient(120deg, rgba(0,105,255,.10), rgba(124,92,255,.08), rgba(255,255,255,.2));
  border-bottom:1px solid var(--glass-border);
  border-radius:20px 20px 0 0!important;
  padding:13px 16px;
}

.do-card-title{
  font-family:'Plus Jakarta Sans','Inter',sans-serif;
  font-size:12px;
  font-weight:800;
  letter-spacing:.5px;
  color:#0b2b63;
}

.do-pill{display:inline-flex;align-items:center;gap:8px}

.do-pill-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:28px;
  height:24px;
  padding:0 10px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--do-blue),var(--do-violet));
  color:#fff;
  border:none;
  box-shadow:0 4px 12px rgba(0,105,255,.35);
  font-weight:800;
  font-size:12px;
}

.form-label{
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
  color:#0b2b63;
}

.form-control,.form-select,textarea{
  font-size:14px;
  border:1px solid rgba(120,160,230,.4);
  border-radius:12px;
  padding:.58rem .8rem;
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:border-color .2s, box-shadow .2s, transform .2s, background .2s;
}

.form-control:focus,.form-select:focus,textarea:focus{
  border-color:var(--do-blue);
  background:#fff;
  box-shadow:0 0 0 .22rem rgba(0,105,255,.18);
  transform:translateY(-1px);
}

.btn{
  border-radius:12px;
  font-weight:700;
  letter-spacing:.2px;
  border:none;
  transition:all .2s ease;
}

.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

.bg-primary,.btn-primary{background:linear-gradient(135deg,var(--do-blue),var(--do-violet))!important;border:none!important;box-shadow:0 8px 20px rgba(0,105,255,.3)}
.btn-primary:hover{background:linear-gradient(135deg,var(--do-blue-dark),#6a4dff)!important}

.btn-success{background:linear-gradient(135deg,#10b981,#16a34a)!important;border:none!important;box-shadow:0 8px 20px rgba(16,163,74,.28)}
.btn-info{background:linear-gradient(135deg,#22d3ee,#2b8dff)!important;border:none!important;box-shadow:0 8px 20px rgba(34,211,238,.25)}
.btn-danger{background:linear-gradient(135deg,#fb7185,#dc2626)!important;border:none!important;box-shadow:0 8px 20px rgba(220,38,38,.28)}
.btn-warning{background:linear-gradient(135deg,#fbbf24,#f59e0b)!important;border:none!important;color:#1f2937!important;box-shadow:0 8px 20px rgba(245,158,11,.28)}
.btn-dark{background:linear-gradient(135deg,#1e293b,#0f172a)!important;border:none!important}

.btn-outline-primary{border:1px solid rgba(0,105,255,.5);color:var(--do-blue);background:rgba(0,105,255,.06)}
.btn-outline-primary:hover{background:linear-gradient(135deg,var(--do-blue),var(--do-violet));color:#fff;border-color:transparent}
.btn-outline-info{border:1px solid rgba(34,211,238,.55);color:#0891b2;background:rgba(34,211,238,.06)}
.btn-outline-info:hover{background:linear-gradient(135deg,#22d3ee,#2b8dff);color:#fff;border-color:transparent}
.btn-outline-danger{border:1px solid rgba(220,38,38,.45);color:#dc2626;background:rgba(220,38,38,.05)}
.btn-outline-danger:hover{background:linear-gradient(135deg,#fb7185,#dc2626);color:#fff;border-color:transparent}
.btn-outline-secondary{border:1px solid rgba(100,116,139,.4);color:#475569;background:rgba(255,255,255,.5)}
.btn-outline-secondary:hover{background:#475569;color:#fff;border-color:transparent}
.btn-outline-dark{border:1px solid rgba(120,160,230,.4);color:#0f172a;background:rgba(255,255,255,.6)}
.btn-outline-dark:hover{background:linear-gradient(135deg,#1e293b,#0f172a);border-color:transparent;color:#fff}

.table-wrap{max-height:420px;overflow:auto}
.table{font-size:13px}
.table thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:linear-gradient(180deg, rgba(0,105,255,.12), rgba(124,92,255,.06));
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  color:#0b2b63;
  border-bottom:1px solid var(--glass-border);
}
.table-striped>tbody>tr:nth-of-type(odd)>*{background:rgba(248,251,255,.6)}
.table tbody tr{transition:background-color .15s}
.table tbody tr:hover{background:rgba(0,105,255,.07)}

.badge{border-radius:999px;font-weight:800;padding:.4em .75em;letter-spacing:.2px}
.badge.bg-success,.badge.text-bg-success{background:linear-gradient(135deg,#10b981,#16a34a)!important}
.badge.bg-danger,.badge.text-bg-danger{background:linear-gradient(135deg,#fb7185,#dc2626)!important}
.badge.bg-secondary,.badge.text-bg-secondary{background:linear-gradient(135deg,#94a3b8,#64748b)!important}
.badge.bg-info,.badge.text-bg-info{background:linear-gradient(135deg,#22d3ee,#0891b2)!important;color:#fff!important}
.badge.bg-primary,.badge.text-bg-primary{background:linear-gradient(135deg,var(--do-blue),var(--do-violet))!important}

.alert{
  border-radius:14px;
  border:1px solid transparent;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:fadeIn .35s ease;
}

.alert-success{border-color:rgba(134,239,172,.7);background:linear-gradient(120deg, rgba(240,253,244,.85), rgba(220,252,231,.7))}
.alert-danger{border-color:rgba(252,165,165,.7);background:linear-gradient(120deg, rgba(255,241,242,.85), rgba(254,226,226,.7))}
.alert-info{border-color:rgba(147,197,253,.7);background:linear-gradient(120deg, rgba(239,246,255,.85), rgba(219,234,254,.7))}

.text-muted{color:var(--do-muted)!important}

.bg-dark{background:linear-gradient(135deg,#1e293b,#0f172a)!important}
.card.bg-primary{background:linear-gradient(135deg,var(--do-blue),var(--do-violet))!important}
.card.bg-primary::before{display:none}
.card.bg-dark::before{display:none}

.login-bg{
  min-height:100vh;
  background:
    radial-gradient(900px 420px at 90% 0, rgba(124,92,255,.22), transparent 62%),
    radial-gradient(800px 460px at 5% 100%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(160deg,#e3ecff,#eef3fb);
}

.login-card{
  width:100%;
  max-width:420px;
  border-radius:20px;
  border:1px solid var(--glass-border);
  background:linear-gradient(160deg, rgba(255,255,255,.8), rgba(255,255,255,.55));
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  overflow:hidden;
  box-shadow:0 26px 54px rgba(10, 50, 130, .22)!important;
  animation:riseUp .45s ease;
}

.blink-warning{
  animation:blinkWarning 1s infinite;
  background:linear-gradient(135deg,#fbbf24,#f59e0b);
  color:#1f2937;
  font-weight:800;
  padding:4px 10px;
  border-radius:999px;
  display:inline-block;
  box-shadow:0 4px 12px rgba(245,158,11,.35);
}

.modal-content{
  border-radius:18px;
  border:1px solid var(--glass-border);
  background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,.7));
  backdrop-filter:var(--glass-blur);
  -webkit-backdrop-filter:var(--glass-blur);
  box-shadow:0 28px 50px rgba(10,50,130,.26);
}

.modal-header{
  background:linear-gradient(135deg,var(--do-blue),var(--do-violet));
  color:#fff;
  border-bottom:none;
}

details > summary{
  border-radius:12px;
  transition:background .2s;
}
details > summary:hover{background:rgba(0,105,255,.05)}

@keyframes blinkWarning{0%{opacity:1}50%{opacity:.35}100%{opacity:1}}
@keyframes fadeInPage{from{opacity:0}to{opacity:1}}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes riseUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulseDot{0%,100%{box-shadow:0 0 0 0 rgba(0,105,255,.25)}50%{box-shadow:0 0 0 8px rgba(0,105,255,0)}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}