/* ==========================================================
   PROFESSIONAL KEY - SHARED 3D GLASS DESIGN SYSTEM
   Fonts (load in page <head>): Sora (headings) + Manrope (body)
   ========================================================== */
:root{
  --navy:#061A30; --navy2:#0B2A4A; --blue:#1677FF; --blue-d:#0A4FB5; --sky:#3FA7FF;
  --saffron:#FF8A00; --saffron2:#FFB04D; --green:#12A877; --red:#E5484D;
  --ink:#0F172A; --muted:#5B6B80; --line:#DCE6F2;
  --r:22px;
  --font-h:'Sora','Manrope',system-ui,sans-serif; --font-b:'Manrope',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body.pk{
  margin:0;min-height:100vh;font-family:var(--font-b);font-size:14px;line-height:1.5;color:var(--ink);overflow-x:hidden;
  background:
    radial-gradient(900px 500px at 8% -5%,rgba(22,119,255,.22),transparent 60%),
    radial-gradient(800px 500px at 100% 0%,rgba(255,138,0,.16),transparent 60%),
    radial-gradient(900px 600px at 50% 110%,rgba(63,167,255,.18),transparent 60%),
    linear-gradient(135deg,#eef4fb,#e4edf8 55%,#eaf1fa);
  background-attachment:fixed;
}
a{text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--font-h);letter-spacing:-.02em}
:focus-visible{outline:3px solid rgba(255,138,0,.7);outline-offset:2px}

/* ---------- Glass surfaces ---------- */
.glass{
  position:relative;border-radius:var(--r);
  background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(255,255,255,.44));
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border:1px solid rgba(255,255,255,.92);
  box-shadow:inset 0 1px 0 #fff,inset 0 -12px 28px rgba(255,255,255,.28),0 1px 2px rgba(8,30,66,.06),0 20px 46px rgba(8,30,66,.12);
}
.glass-dark{
  position:relative;border-radius:var(--r);color:#fff;
  background:radial-gradient(circle at 90% 0%,rgba(255,176,77,.28),transparent 38%),linear-gradient(150deg,#0a2d5e,#061a3a 60%,#041227);
  border:1px solid rgba(255,255,255,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -14px 30px rgba(0,0,0,.25),0 30px 60px rgba(3,24,60,.34);
}
[data-tilt]{transform-style:preserve-3d;transition:transform .2s ease-out;will-change:transform}
.shine{overflow:hidden}
.shine::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(380px circle at var(--mx,75%) var(--my,0%),rgba(255,255,255,.24),transparent 55%)}

/* ---------- Buttons / inputs ---------- */
.btn-pk{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;
  padding:11px 18px;border-radius:14px;font:800 13px var(--font-b);color:#fff!important;white-space:nowrap;
  background:linear-gradient(180deg,#2b8cff,var(--blue-d));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 22px rgba(10,79,181,.32);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn-pk:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn-pk:active{transform:translateY(1px)}
.btn-pk.gold{background:linear-gradient(180deg,var(--saffron2),#EE7600);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 22px rgba(238,118,0,.34)}
.btn-pk.soft{color:var(--navy)!important;background:linear-gradient(180deg,#fff,#e8f0fa);border:1px solid var(--line);box-shadow:inset 0 1px 0 #fff,0 6px 14px rgba(8,30,66,.08)}
.btn-pk.glassy{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.btn-pk.sm{padding:8px 13px;font-size:12px;border-radius:11px}
.btn-pk[disabled],.btn-pk.off{opacity:.5;pointer-events:none}
.pk-input{
  width:100%;padding:13px 15px;border-radius:14px;border:1px solid #cbd7e6;background:rgba(255,255,255,.9);
  font:600 14px var(--font-b);color:var(--ink);box-shadow:inset 0 2px 5px rgba(10,49,97,.06);transition:.15s;
}
.pk-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 4px rgba(22,119,255,.15)}

/* ---------- Small parts ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:12px;font:700 12px var(--font-b);color:var(--muted);
  background:rgba(255,255,255,.75);border:1px solid #fff;box-shadow:0 4px 12px rgba(8,30,66,.05)}
.chip i{color:var(--blue)}
.chip.ok{color:#067a57;background:#e8faf3;border-color:#c5f0df}
.chip.warn{color:#a85a00;background:#fff3e3;border-color:#ffdcaa}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(18,168,119,.15)}
.sec-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:30px 2px 14px}
.sec-head h2{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:700;color:var(--navy)}
.sec-head h2 i{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#e7f0ff;color:var(--blue);font-size:15px;border:1px solid #d5e3f7}
.badge-pk{padding:6px 11px;border-radius:10px;background:#e7f0ff;border:1px solid #d5e3f7;color:var(--blue-d);font:800 12px var(--font-b)}

@keyframes pkIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pk-in{animation:pkIn .6s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media (max-width:640px){body.pk{font-size:14px}.sec-head h2{font-size:15px}}