:root{
  --ink:#171526;--muted:#777286;--purple:#7956e8;--violet:#a26af4;
  --pink:#db5bc6;--aqua:#53c9ec;--green:#38c98b;
  --glass:rgba(255,255,255,.68);--stroke:rgba(255,255,255,.82);
  --shadow:0 30px 80px rgba(77,59,125,.18);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100vh;color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:linear-gradient(145deg,#fff 0%,#f8f5ff 46%,#eefbff 100%);
  overflow-x:hidden;
}
.noise{position:fixed;inset:0;pointer-events:none;opacity:.32;background-image:radial-gradient(rgba(91,65,160,.09) 1px,transparent 1px);background-size:25px 25px;mask-image:linear-gradient(#000,transparent 90%)}
.aurora{position:fixed;border-radius:50%;filter:blur(85px);opacity:.4;pointer-events:none;animation:float 12s ease-in-out infinite alternate}
.aurora-one{width:480px;height:480px;background:#c894ff;left:-220px;top:-150px}
.aurora-two{width:520px;height:520px;background:#84ddff;right:-250px;top:180px;animation-delay:-5s}
@keyframes float{to{transform:translate3d(30px,25px,0) scale(1.06)}}
.shell{width:min(900px,94vw);margin:34px auto;padding:10px;position:relative}
.glass{background:var(--glass);border:1px solid var(--stroke);box-shadow:var(--shadow);backdrop-filter:blur(28px)}
.card{border-radius:38px;padding:38px;overflow:hidden;position:relative}
.card:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.5),transparent 24%,transparent 76%,rgba(255,255,255,.22))}
.topbar{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.logo-mark{font:italic 700 45px/1 Georgia,serif;background:linear-gradient(135deg,var(--pink),var(--purple),var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo-copy b,.logo-copy small{display:block;letter-spacing:.18em}
.logo-copy b{font-size:11px}.logo-copy small{font-size:9px;color:var(--purple);margin-top:4px}
.status{font-size:11px;letter-spacing:.16em;color:#4f4963;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.58);border:1px solid rgba(119,86,232,.12)}
.status i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#39ca8a;box-shadow:0 0 0 5px rgba(57,202,138,.12);margin-right:8px}
.profile{text-align:center;position:relative;z-index:2}
.portrait-ring{width:282px;height:282px;border-radius:50%;padding:8px;margin:24px auto 18px;position:relative;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(235,226,255,.7));box-shadow:0 22px 55px rgba(114,79,194,.24)}
.portrait-ring img{width:100%;height:100%;display:block;object-fit:cover;object-position:center 24%;border-radius:50%}
.portrait-glow{position:absolute;inset:-14px;border-radius:50%;background:conic-gradient(from 20deg,var(--aqua),transparent 20%,var(--pink),transparent 55%,var(--purple));filter:blur(17px);opacity:.36;z-index:-1}
.badge{display:inline-flex;align-items:center;gap:9px;padding:9px 14px;border-radius:999px;background:rgba(255,255,255,.64);border:1px solid rgba(126,88,235,.14);font-size:11px;font-weight:800;letter-spacing:.14em;color:#6b52c8}
.badge i{width:4px;height:4px;border-radius:50%;background:#bf77f2}
h1{font-size:54px;line-height:1.02;letter-spacing:-.045em;margin:17px 0 5px}
h1 em{font-style:normal;background:linear-gradient(90deg,var(--purple),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}
.role{font-size:18px;color:#655e75;margin:0 0 16px}
.lead{max-width:680px;margin:0 auto 29px;font-size:19px;line-height:1.58;color:#373244}
.primary-actions{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative;z-index:2}
.action{min-height:112px;padding:18px;border-radius:24px;color:white;text-decoration:none;display:grid;grid-template-columns:54px 1fr;grid-template-rows:auto auto;column-gap:15px;align-items:center;box-shadow:0 18px 35px rgba(81,61,144,.16);transition:.25s ease;overflow:hidden;position:relative}
.action:before{content:"";position:absolute;width:120px;height:120px;border-radius:50%;background:rgba(255,255,255,.16);right:-35px;top:-55px}
.action:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 24px 42px rgba(81,61,144,.24)}
.action b{font-size:18px;align-self:end}.action small{align-self:start;opacity:.9}
.svg-icon{grid-row:1/3;width:54px;height:54px;border-radius:18px;background:rgba(255,255,255,.18);display:grid;place-items:center;backdrop-filter:blur(10px)}
.svg-icon svg{width:28px;height:28px;fill:white}
.action-purple{background:linear-gradient(135deg,#9568ef,#6748d9)}
.action-green{background:linear-gradient(135deg,#58dba1,#22b978)}
.action-pink{background:linear-gradient(135deg,#f06cac,#a456e7)}
.action-blue{background:linear-gradient(135deg,#58c9ed,#348fdc)}
.glass-inner{background:rgba(255,255,255,.6);border:1px solid rgba(124,95,188,.12);box-shadow:0 12px 32px rgba(77,59,125,.08);backdrop-filter:blur(18px)}
.save-panel{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px;border-radius:24px;margin-top:18px;position:relative;z-index:2}
.save-info{display:flex;align-items:center;gap:15px}.save-info b,.save-info small{display:block}.save-info small{color:var(--muted);margin-top:4px}
.save-symbol{width:55px;height:55px;border-radius:18px;background:linear-gradient(145deg,#eee8ff,#f7f4ff);display:grid;place-items:center}
.save-symbol svg{width:28px;height:28px;fill:var(--purple)}
.save-button{padding:14px 22px;border-radius:16px;background:linear-gradient(135deg,var(--purple),#6b49db);color:white;text-decoration:none;font-weight:800;box-shadow:0 12px 24px rgba(104,73,219,.25)}
.qr-panel{display:grid;grid-template-columns:180px 1fr;gap:25px;align-items:center;padding:22px;border-radius:26px;margin-top:18px;position:relative;z-index:2}
.qr-frame{padding:10px;border-radius:22px;background:white;box-shadow:0 12px 26px rgba(70,52,118,.12)}
.qr-frame img{width:100%;display:block;border-radius:13px}
.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--purple)}
.qr-copy h2{font-size:27px;margin:8px 0 7px}.qr-copy p{margin:0;color:var(--muted);line-height:1.5}
.footer{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-top:23px;position:relative;z-index:2}
.tags{display:flex;gap:8px;flex-wrap:wrap}.tags span{padding:8px 11px;border-radius:999px;background:rgba(255,255,255,.6);border:1px solid rgba(117,86,205,.1);font-size:12px;color:#615a70}
.powered{text-decoration:none;text-align:right;color:var(--ink)}.powered small,.powered b{display:block}.powered small{font-size:10px;color:var(--muted);letter-spacing:.12em}.powered b{font-size:17px;background:linear-gradient(90deg,var(--purple),var(--aqua));-webkit-background-clip:text;background-clip:text;color:transparent}
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,120px);background:#211b39;color:#fff;padding:14px 19px;border-radius:16px;box-shadow:0 18px 40px rgba(30,20,60,.25);transition:.3s;z-index:20}.toast.show{transform:translate(-50%,0)}
.reveal{animation:reveal .75s ease both}@keyframes reveal{from{opacity:0;transform:translateY(20px) scale(.985)}to{opacity:1;transform:none}}
@media(max-width:700px){
  .shell{width:100%;margin:0;padding:0}.card{border-radius:0;min-height:100vh;padding:22px 15px 32px}
  .topbar{align-items:flex-start}.status{font-size:9px;padding:7px 9px}
  .portrait-ring{width:220px;height:220px;margin-top:18px}
  h1{font-size:39px}.role{font-size:16px}.lead{font-size:16px;line-height:1.5}
  .primary-actions{grid-template-columns:1fr}.action{min-height:92px;border-radius:20px}
  .save-panel{align-items:flex-start;flex-direction:column}.save-button{width:100%;text-align:center}
  .qr-panel{grid-template-columns:120px 1fr;gap:15px;padding:16px}.qr-copy h2{font-size:21px}
  .footer{align-items:center;flex-direction:column}.powered{text-align:center}
}