/* =====================================================================
   MADAD · Certificate Verification · 3D Layered UI
   Shared base – per-university themes override the --brand-* tokens.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;color:#fff;
  font-family:'Inter','Segoe UI','Helvetica Neue',Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:transparent;color:inherit}
img{max-width:100%;display:block}

/* ---------------------------------------------------------------------
   Default brand tokens – overridden by every theme file
   --------------------------------------------------------------------- */
:root{
  --brand-1:#0b1d3a;
  --brand-2:#1a3a6c;
  --brand-3:#4a7bbf;
  --brand-accent:#ffd54f;
  --brand-accent-fg:#0b1d3a;
  --brand-color:#0b1d3a;
  --glass-tint:rgba(255,255,255,.10);
  --glass-edge:rgba(255,255,255,.32);
  --grid-color:rgba(255,255,255,.07);
  --profile-bg:#eef2f8;
}

/* =====================================================================
   3D scene – perspective + layered backdrop
   ===================================================================== */
.verify-shell{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:48px 16px;position:relative;overflow:hidden;
  perspective:1400px;
  perspective-origin:50% 40%;
  transform-style:preserve-3d;
  background:
    radial-gradient(1100px 800px at 80% 10%, var(--brand-3) 0%, transparent 55%),
    radial-gradient(900px 700px at 10% 90%, var(--brand-2) 0%, transparent 60%),
    linear-gradient(135deg, var(--brand-1) 0%, var(--brand-2) 55%, #000 130%);
}

/* Animated 3D grid floor */
.scene-floor{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(var(--grid-color) 1px,transparent 1px) 0 0/60px 60px,
    linear-gradient(90deg,var(--grid-color) 1px,transparent 1px) 0 0/60px 60px;
  transform:rotateX(70deg) translateY(38vh) translateZ(-200px) scale(2.2);
  transform-origin:50% 100%;
  mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%);
  animation:floorPulse 14s ease-in-out infinite alternate;
  z-index:0;
}
@keyframes floorPulse{
  0%   {transform:rotateX(70deg) translateY(38vh) translateZ(-200px) scale(2.2);opacity:.55}
  100% {transform:rotateX(72deg) translateY(40vh) translateZ(-220px) scale(2.4);opacity:.85}
}

/* Floating glow orbs (depth) */
.scene-shell::before,.scene-shell::after{
  content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;
  pointer-events:none;will-change:transform;
}
.scene-shell::before{
  width:520px;height:520px;left:-100px;top:-100px;
  background:radial-gradient(circle, var(--brand-3) 0%, transparent 65%);
  animation:orbA 18s ease-in-out infinite alternate;
}
.scene-shell::after{
  width:600px;height:600px;right:-180px;bottom:-160px;
  background:radial-gradient(circle, var(--brand-accent) 0%, transparent 65%);
  animation:orbB 22s ease-in-out infinite alternate;
}
@keyframes orbA{from{transform:translate3d(0,0,0)}to{transform:translate3d(60px,40px,0) scale(1.1)}}
@keyframes orbB{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50px,-30px,0) scale(1.08)}}

/* particle dots */
.scene-particles{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.55) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 78% 31%, rgba(255,255,255,.45) 0 1.5px, transparent 1.7px),
    radial-gradient(circle at 33% 78%, rgba(255,255,255,.50) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 88% 84%, rgba(255,255,255,.40) 0 1.6px, transparent 1.8px),
    radial-gradient(circle at 56% 12%, rgba(255,255,255,.55) 0 1.0px, transparent 1.2px),
    radial-gradient(circle at 24% 58%, rgba(255,255,255,.35) 0 1.4px, transparent 1.6px),
    radial-gradient(circle at 67% 64%, rgba(255,255,255,.50) 0 1.2px, transparent 1.4px),
    radial-gradient(circle at 92% 18%, rgba(255,255,255,.45) 0 1.3px, transparent 1.5px);
  animation:driftStars 32s linear infinite;
}
@keyframes driftStars{from{transform:translate3d(0,0,0)}to{transform:translate3d(-40px,-60px,0)}}

/* =====================================================================
   The 3D glass card stack
   ===================================================================== */
.scene-shell{position:relative;width:min(560px,100%);z-index:2;
  transform-style:preserve-3d}

.tilt-card{
  --rx:0deg; --ry:0deg;
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
  will-change:transform;
}

.glass-card{
  position:relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 60%) padding-box,
    linear-gradient(140deg, rgba(255,255,255,.55), rgba(255,255,255,.05) 35%, var(--brand-accent) 130%) border-box;
  border:1.5px solid transparent;
  backdrop-filter:blur(22px) saturate(170%);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  border-radius:26px;
  padding:38px 34px 32px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.45) inset,
    0 -1px 0 rgba(0,0,0,.25) inset,
    0 30px 70px -10px rgba(0,0,0,.55),
    0 60px 120px -30px rgba(0,0,0,.55);
  transform-style:preserve-3d;
}

/* Top-side gloss strip — adds 3D illusion */
.glass-card::before{
  content:"";position:absolute;left:6%;right:6%;top:-1px;height:38%;
  border-radius:26px 26px 50% 50%/26px 26px 80% 80%;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 90%);
  pointer-events:none;transform:translateZ(2px);
  filter:blur(2px);opacity:.75;
}
/* Edge underglow */
.glass-card::after{
  content:"";position:absolute;inset:-2px;border-radius:28px;z-index:-1;
  background:linear-gradient(135deg, var(--brand-accent), transparent 40%, var(--brand-3) 120%);
  filter:blur(22px);opacity:.55;
}

/* depth layers inside the card – each lifts via translateZ */
.depth-1{transform:translateZ(28px)}
.depth-2{transform:translateZ(46px)}
.depth-3{transform:translateZ(64px)}

/* Brand row */
.glass-card .brand{
  display:flex;align-items:center;gap:18px;margin-bottom:22px;padding-bottom:20px;
  border-bottom:1px solid rgba(255,255,255,.22)
}
.brand-logo{
  width:74px;height:74px;border-radius:20px;
  background:linear-gradient(160deg,#fff 30%, #f3f5f9 100%);
  display:flex;align-items:center;justify-content:center;padding:8px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.6) inset,
    0 -4px 8px rgba(0,0,0,.15) inset,
    0 14px 28px -6px rgba(0,0,0,.55),
    0 6px 14px -4px rgba(0,0,0,.4);
  transform-style:preserve-3d;
  animation:logoFloat 6s ease-in-out infinite;
}
@keyframes logoFloat{
  0%,100%{transform:translateY(0) rotateZ(0)}
  50%   {transform:translateY(-4px) rotateZ(.5deg)}
}
.brand-logo img{width:100%;height:100%;object-fit:contain}
.glass-card .brand h1{
  font-size:18px;line-height:1.25;margin:0 0 5px;font-weight:800;letter-spacing:.01em;
  background:linear-gradient(90deg,#fff, #cfd8e8 80%);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
}
.glass-card .brand .sub{font-size:11px;opacity:.85;letter-spacing:.18em;text-transform:uppercase;font-weight:700}

/* Headings */
.glass-card h2.title{
  font-size:24px;font-weight:800;margin:6px 0 4px;letter-spacing:.005em;
  background:linear-gradient(90deg,#fff 0%, var(--brand-accent) 130%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  text-shadow:0 1px 0 rgba(0,0,0,.1);
}
.glass-card p.lead{margin:0 0 22px;font-size:13.5px;opacity:.9;line-height:1.55;color:#e9eef6}

/* Form rows – inputs lifted on focus (3D feel) */
.form-row{margin-bottom:14px;transform-style:preserve-3d}
.form-row label{display:block;font-size:11.5px;margin-bottom:6px;letter-spacing:.08em;
  text-transform:uppercase;opacity:.92;font-weight:700;color:#e9eef6}
.form-row input{
  width:100%;padding:14px 16px;border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.97);color:#111;font-size:14.5px;outline:none;
  font-weight:600;letter-spacing:.01em;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 -2px 4px rgba(0,0,0,.08) inset,
    0 8px 20px -10px rgba(0,0,0,.4);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),
             box-shadow .2s, border-color .2s;
}
.form-row input:focus{
  transform:translateZ(20px);
  border-color:var(--brand-accent);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 0 0 4px rgba(255,213,79,.25),
    0 18px 38px -10px rgba(0,0,0,.55);
}

.captcha-row{display:grid;grid-template-columns:1fr 140px;gap:12px;align-items:end}
.captcha-q{
  background:linear-gradient(160deg, rgba(0,0,0,.35), rgba(0,0,0,.18));
  border:1px dashed rgba(255,255,255,.4);
  border-radius:14px;padding:14px;text-align:center;font-weight:800;
  letter-spacing:.12em;font-size:16px;color:#fff;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 -2px 4px rgba(0,0,0,.35) inset;
  text-shadow:0 1px 0 rgba(0,0,0,.4);
}

/* 3D button */
.btn-primary{
  --d:6px;
  position:relative;
  width:100%;margin-top:10px;padding:15px;border-radius:14px;
  background:linear-gradient(180deg, var(--brand-accent) 0%, color-mix(in srgb, var(--brand-accent) 75%, #000 25%) 100%);
  color:var(--brand-accent-fg);
  font-weight:900;letter-spacing:.08em;text-transform:uppercase;font-size:13px;
  transform-style:preserve-3d;
  box-shadow:
    0 1px 0 rgba(255,255,255,.75) inset,
    0 -3px 0 rgba(0,0,0,.18) inset,
    0 var(--d) 0 color-mix(in srgb, var(--brand-accent) 35%, #000 65%),
    0 calc(var(--d) + 4px) 24px rgba(0,0,0,.45);
  transition:transform .12s ease, box-shadow .12s ease, filter .15s;
}
.btn-primary:hover{
  --d:4px;
  transform:translateY(2px);
  filter:brightness(1.05);
}
.btn-primary:active{
  --d:0px;
  transform:translateY(6px);
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red, blue)){
  .btn-primary{
    background:linear-gradient(180deg, var(--brand-accent), var(--brand-accent));
    box-shadow:
      0 1px 0 rgba(255,255,255,.75) inset,
      0 -3px 0 rgba(0,0,0,.18) inset,
      0 6px 0 rgba(0,0,0,.35),
      0 10px 24px rgba(0,0,0,.45);
  }
}

/* Alerts */
.alert{padding:12px 14px;border-radius:12px;font-size:13px;margin-bottom:14px;line-height:1.5;
  backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.alert-error{background:rgba(220,53,69,.92);color:#fff;border:1px solid rgba(255,255,255,.2)}
.alert-success{background:rgba(40,167,69,.92);color:#fff}
.alert-info{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.28)}

/* QR block */
.qr-block{
  display:flex;align-items:center;gap:14px;margin-top:24px;padding-top:20px;
  border-top:1px solid rgba(255,255,255,.22);font-size:12px;opacity:.95
}
.qr-block .qr-frame{
  padding:6px;border-radius:14px;
  background:linear-gradient(160deg, #fff, #ecf1f7);
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 -2px 4px rgba(0,0,0,.08) inset,
    0 10px 22px rgba(0,0,0,.35);
  transform:translateZ(20px);
}
.qr-block .qr-frame img{width:84px;height:84px}
.qr-block strong{display:block;font-size:13px;letter-spacing:.02em;margin-bottom:2px}
.qr-block small{display:block;opacity:.85;margin-top:3px;line-height:1.45}

.footer-note{margin-top:24px;text-align:center;font-size:11px;letter-spacing:.10em;
  opacity:.7;text-transform:uppercase;font-weight:600}

/* Reflection under card */
.scene-shell .reflection{
  position:absolute;left:6%;right:6%;bottom:-40px;height:80px;border-radius:50%;
  background:radial-gradient(ellipse at 50% 0%, rgba(0,0,0,.45), transparent 70%);
  filter:blur(8px);opacity:.6;z-index:-1;
  transform:translateZ(-40px) scaleY(.6);
}

/* Responsive */
@media (max-width:560px){
  .glass-card{padding:28px 22px 24px}
  .glass-card .brand h1{font-size:15.5px}
  .glass-card h2.title{font-size:21px}
  .captcha-row{grid-template-columns:1fr}
  .brand-logo{width:60px;height:60px;border-radius:16px;padding:6px}
}

/* =====================================================================
   PROFILE PAGE – 3D layered cards
   ===================================================================== */
.profile-shell{
  min-height:100vh;
  background:
    radial-gradient(900px 700px at 90% 0%, rgba(255,255,255,.5), transparent 60%),
    var(--profile-bg);
  color:#1a1a1a;
  display:grid;grid-template-columns:1fr 300px;direction:ltr;
  font-family:'Inter','Segoe UI',sans-serif;
}
.profile-main{padding:36px 40px;min-width:0;perspective:1200px}

/* Sidebar with depth */
.profile-side{
  position:sticky;top:0;height:100vh;
  background:
    radial-gradient(420px 280px at 10% 10%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(170deg, var(--brand-1) 0%, var(--brand-2) 60%, #000 130%);
  color:#fff;padding:28px 22px;
  display:flex;flex-direction:column;
  box-shadow:-30px 0 60px -20px rgba(0,0,0,.35);
  position:relative;overflow:hidden;
}
.profile-side::before{
  content:"";position:absolute;left:-20px;top:-30px;width:80px;height:80px;
  border-radius:50%;background:var(--brand-accent);filter:blur(40px);opacity:.55
}
.profile-side::after{
  content:"";position:absolute;right:-30px;bottom:-30px;width:140px;height:140px;
  border-radius:50%;background:var(--brand-3);filter:blur(50px);opacity:.45
}

.side-brand{display:flex;align-items:center;gap:13px;
  padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,.22);
  position:relative;z-index:1}
.side-brand img{width:48px;height:48px;background:#fff;border-radius:12px;
  padding:5px;object-fit:contain;
  box-shadow:0 8px 18px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.7) inset}
.side-brand h3{margin:0;font-size:14px;font-weight:800;line-height:1.25}
.side-brand span{font-size:11px;opacity:.78;text-transform:uppercase;letter-spacing:.06em}

.side-nav{position:relative;z-index:1;display:flex;flex-direction:column;gap:4px}
.side-nav a{
  display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  font-size:14px;font-weight:600;color:#fff;opacity:.9;
  transition:all .18s cubic-bezier(.2,.7,.2,1);
  border:1px solid transparent;
}
.side-nav a:hover{background:rgba(255,255,255,.10);transform:translateX(-4px)}
.side-nav a.active{
  background:linear-gradient(120deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
  border-color:rgba(255,255,255,.20);
  font-weight:800;opacity:1;
  box-shadow:0 8px 18px -6px rgba(0,0,0,.5);
}
.side-nav a .ico{width:20px;text-align:center;font-size:15px}
.side-nav .logout{margin-top:auto;background:rgba(0,0,0,.30);font-weight:700;
  border:1px solid rgba(255,255,255,.18)}

/* Profile header card – 3D */
.profile-header{
  display:flex;align-items:center;gap:20px;padding:22px 26px;
  background:#fff;border-radius:20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 24px 50px -16px rgba(31,45,74,.20),
    0 8px 18px -8px rgba(31,45,74,.10);
  margin-bottom:24px;position:relative;overflow:hidden
}
.profile-header::before{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  border-radius:50%;background:var(--brand-accent);opacity:.08;filter:blur(20px)
}
.profile-header .avatar{
  width:78px;height:78px;border-radius:50%;
  background:linear-gradient(160deg, var(--brand-color), color-mix(in srgb, var(--brand-color) 60%, #000 40%));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:800;letter-spacing:.04em;
  box-shadow:0 14px 28px -6px rgba(0,0,0,.35), 0 1px 0 rgba(255,255,255,.5) inset
}
.profile-header h1{margin:0 0 5px;font-size:22px;font-weight:800;color:#1a1a1a}
.profile-header .meta{font-size:13px;color:#666}
.profile-header .pill{display:inline-block;padding:3px 11px;border-radius:999px;
  background:#e8f5ee;color:#0e6e3b;font-size:11px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;margin-left:8px;
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 4px 8px -3px rgba(0,0,0,.15)}
.profile-header .pill.warn{background:#fff3cd;color:#856404}

/* 3D content cards */
.card{
  background:#fff;border-radius:20px;padding:24px 26px;margin-bottom:22px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 20px 40px -16px rgba(31,45,74,.18),
    0 4px 10px -4px rgba(31,45,74,.08);
  transform-style:preserve-3d;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  position:relative;overflow:hidden;
}
.card:hover{
  transform:translateY(-3px) rotateX(.5deg);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 30px 60px -18px rgba(31,45,74,.28),
    0 8px 16px -6px rgba(31,45,74,.12);
}
.card::before{
  content:"";position:absolute;left:0;top:0;width:6px;height:100%;
  background:linear-gradient(180deg, var(--brand-color), var(--brand-accent));
  opacity:.85
}
.card h2{margin:0 0 14px;font-size:16.5px;color:var(--brand-color);
  display:inline-block;font-weight:800;letter-spacing:.01em;
  border-bottom:3px solid var(--brand-accent);padding-bottom:7px}

.kv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px 26px}
.kv-grid .kv{display:flex;flex-direction:column;border-bottom:1px solid #eef1f5;padding:8px 0}
.kv-grid .kv span.k{font-size:11px;color:#7a8298;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.kv-grid .kv span.v{font-size:14.5px;font-weight:700;color:#1a1a1a;margin-top:3px}

.tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
.tbl th,.tbl td{padding:10px 12px;border-bottom:1px solid #eef1f5;text-align:left}
.tbl thead th{
  background:linear-gradient(180deg, #f6f9fd, #eef3fa);
  color:#3b455c;font-weight:800;font-size:11.5px;
  text-transform:uppercase;letter-spacing:.06em;
  border-bottom:1px solid #d8e0ee
}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover td{background:#fafcff}
.grade-pill{display:inline-block;padding:4px 11px;border-radius:999px;color:#fff;
  font-weight:800;font-size:12px;letter-spacing:.06em;
  box-shadow:0 4px 10px -3px rgba(0,0,0,.25), 0 1px 0 rgba(255,255,255,.4) inset}

.summary-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:6px 0 24px}
.summary-cards .sc{
  background:#fff;border-radius:18px;padding:20px 16px;text-align:center;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 36px -16px rgba(31,45,74,.22),
    0 4px 10px -4px rgba(31,45,74,.10);
  position:relative;overflow:hidden;
  transition:transform .2s
}
.summary-cards .sc:hover{transform:translateY(-4px)}
.summary-cards .sc::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--brand-color),var(--brand-accent))
}
.summary-cards .sc .num{font-size:26px;font-weight:900;color:var(--brand-color);letter-spacing:.01em}
.summary-cards .sc .lbl{font-size:11.5px;color:#7a8298;text-transform:uppercase;
  letter-spacing:.06em;font-weight:700;margin-top:5px}

/* Section reveal */
.card,.summary-cards .sc,.profile-header{animation:reveal .55s cubic-bezier(.2,.7,.2,1) backwards}
@keyframes reveal{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:960px){
  .profile-shell{grid-template-columns:1fr}
  .profile-side{position:relative;height:auto}
  .summary-cards{grid-template-columns:repeat(2,1fr)}
  .kv-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .profile-main{padding:22px}
  .tbl{font-size:12.5px}.tbl th,.tbl td{padding:8px 7px}
  .profile-header{padding:18px}
  .profile-header h1{font-size:18px}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .tilt-card{transform:none!important}
}