@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

:root{
  --brand:#3d39c0;
  --brand-press:#322fa0;
  --ink:#16163a;
  --muted:#8b8fa3;
  --muted-2:#a8abbd;
  --line:#e9eaf1;
  --line-strong:#dfe1ec;
  --bg:#ffffff;
  --lav:#eef0fb;
  --green:#2f9e44;
  --green-bd:#bfe3c8;
  --shadow:0 18px 50px rgba(20,20,50,.18);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Ubuntu',system-ui,sans-serif;
  background:#3a3a45;color:var(--ink);
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;overflow:hidden;
}
/* on phones / installed app: white backdrop so the status-bar area is white, not gray */
@media (max-width:480px){ html,body{background:#fff} }
@media (display-mode:standalone){ html,body{background:#fff} }

/* phone frame */
.phone{
  position:relative;width:min(430px,100vw);height:min(932px,100dvh);
  background:var(--bg);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 40px 120px rgba(0,0,0,.5);
}
@media(min-width:480px){ .phone{border-radius:44px} }

/* status bar */
.statusbar{
  flex:0 0 auto;height:54px;display:flex;align-items:flex-end;
  justify-content:space-between;padding:0 30px 8px;font-weight:500;
  font-size:17px;letter-spacing:.3px;
}
.statusbar .sb-right{display:flex;align-items:center;gap:7px}
.sb-batt{display:inline-flex;align-items:center;gap:2px}
.sb-batt .cell{width:25px;height:13px;border:1.6px solid var(--ink);border-radius:4px;position:relative;padding:1.6px}
.sb-batt .cell::after{content:"";position:absolute;right:-3.5px;top:4px;width:2px;height:5px;background:var(--ink);border-radius:0 2px 2px 0}
.sb-batt .lvl{height:100%;background:var(--ink);border-radius:2px}

/* views */
.scroll{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch}
.view{display:none;flex-direction:column;padding:22px 26px 20px}
.view.active{display:flex}

.page-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 16px}
.page-head h1{font-size:26px;font-weight:700;margin:0;letter-spacing:-.3px}
.dots{font-size:26px;color:#3a3a55;letter-spacing:2px;cursor:pointer;line-height:1}

/* card image (main screen) */
.ms-card-img{display:block;width:78%;max-width:300px;margin:2px auto 0;border-radius:12px;
  box-shadow:0 6px 18px rgba(20,20,50,.14)}

/* silver card (legacy CSS art, unused) */
.ms-card{
  position:relative;width:100%;aspect-ratio:1.585/1;border-radius:18px;overflow:hidden;
  background:
    linear-gradient(118deg,#b9bcc4 0%,#e9ebf0 16%,#c6c9d2 30%,#fbfcff 47%,#cdd0d9 60%,#aeb2bd 74%,#dfe2ea 88%,#b4b8c2 100%);
  box-shadow:0 8px 22px rgba(20,20,50,.16);
  font-family:'Ubuntu',sans-serif;
}
.ms-card .swoosh{position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 18% -10%,rgba(255,255,255,.85),transparent 40%),
    radial-gradient(140% 90% at 90% 120%,rgba(255,255,255,.7),transparent 45%);
  mix-blend-mode:screen;opacity:.6}
.ms-card .athlete{position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);width:58%;opacity:.32}
.ms-card .top{position:absolute;top:9%;left:7%;right:7%;display:flex;justify-content:space-between;align-items:center}
.ms-card .benefit{display:flex;align-items:center;gap:5px;font-size:9px;font-weight:700;color:#2b2b33}
.ms-card .benefit .b-dot{width:11px;height:11px;border-radius:50%;border:2px solid #c0392b;display:inline-block}
.ms-card .benefit small{font-weight:400;color:#55555f;font-size:7px;display:block;line-height:1}
.ms-card .ms-top{font-size:11px;font-weight:700;color:#2b2b33;display:flex;align-items:center;gap:3px}
.ms-card .ms-top .o{color:var(--brand)}
.ms-card .wordmark{position:absolute;top:42%;left:50%;transform:translate(-50%,-50%);text-align:center;width:90%}
.ms-card .wordmark .big{font-size:13.5cqw;font-weight:700;font-style:italic;color:#fff;
  text-shadow:0 2px 5px rgba(0,0,0,.35),0 1px 0 #888;letter-spacing:-.5px;line-height:.9}
.ms-card .wordmark .classic{font-size:6cqw;font-weight:700;font-style:italic;color:#c0392b;margin-top:2px;
  text-shadow:0 1px 2px rgba(0,0,0,.25)}
.ms-card .foot{position:absolute;bottom:8%;left:7%;right:7%;display:flex;justify-content:space-between;
  font-size:8px;color:#3a3a44;font-weight:500}
.ms-card{container-type:inline-size}

/* generate button */
.btn-generate{
  margin:20px 0 26px;width:100%;border:none;cursor:pointer;
  background:var(--brand);color:#fff;border-radius:15px;padding:15px;
  font:700 18px 'Ubuntu',sans-serif;display:flex;align-items:center;justify-content:center;gap:12px;
  transition:transform .12s ease,background .12s ease;box-shadow:0 8px 20px rgba(61,57,192,.28);
}
.btn-generate:active{transform:scale(.985);background:var(--brand-press)}
.btn-generate svg{width:24px;height:24px}

/* info card */
.info-card{border:1px solid var(--line);border-radius:18px;padding:22px}
.info-top{display:flex;gap:18px;align-items:flex-start;margin-bottom:18px}
.avatar{width:78px;height:78px;border-radius:14px;object-fit:cover;background:var(--lav);flex:0 0 auto}
.info-name{font-size:19px;font-weight:500;margin:2px 0 10px}
.pill{display:inline-block;border:1px solid var(--green-bd);color:var(--green);
  border-radius:9px;padding:7px 16px;font-size:15px;font-weight:500}
.info-rows{display:flex;flex-direction:column}
.info-row{display:flex;justify-content:space-between;align-items:center;padding:10px 0;font-size:14px}
.info-row+.info-row{border-top:1px solid var(--line)}
.info-row .k{color:var(--muted)}
.info-row .v{color:var(--ink);font-weight:500}

/* tab bar */
.tabbar{flex:0 0 auto;border-top:1px solid var(--line);display:flex;padding:12px 0 26px;background:#fff}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;border:none;background:none;
  cursor:pointer;color:#3a3a4a;font:500 13px 'Ubuntu',sans-serif}
.tab svg{width:26px;height:26px}
.tab.active{color:var(--brand)}

/* modal */
.modal{position:absolute;inset:0;display:none;z-index:40}
.modal.open{display:block}
.modal .backdrop{position:absolute;inset:0;background:rgba(40,40,55,.55);animation:fade .25s ease}
.sheet{position:absolute;left:0;right:0;bottom:0;top:64px;background:#fff;
  border-radius:30px 30px 0 0;box-shadow:var(--shadow);padding:26px 26px 34px;
  display:flex;flex-direction:column;animation:slideup .32s cubic-bezier(.2,.8,.2,1)}
@keyframes slideup{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet .close{position:absolute;top:22px;right:22px;width:44px;height:44px;border-radius:50%;
  border:none;background:#eef0f7;color:var(--brand);font-size:20px;cursor:pointer;display:grid;place-items:center}
.sheet .close svg{width:18px;height:18px}
.sheet-photo{width:124px;height:124px;border-radius:16px;object-fit:cover;background:var(--lav);
  margin:12px auto 0;display:block}
.sheet-name{text-align:center;font-size:23px;font-weight:400;margin:18px 0 0}

.qr-wrap{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;min-height:0;padding:8px 0}
.qr-box{background:#fff;padding:12px;border-radius:14px}
.qr-box canvas{display:block;image-rendering:pixelated;width:min(280px,72vw);height:auto;aspect-ratio:1/1}
.qr-meta{font-size:13px;color:var(--muted-2);display:flex;align-items:center;gap:8px}
.qr-dot{width:8px;height:8px;border-radius:50%;background:var(--green);animation:pulse 1s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

.offline-box{background:var(--lav);border-radius:16px;padding:18px;text-align:center;margin-top:auto}
.offline-box .lbl{color:var(--muted);font-size:16px}
.offline-box .code{font-size:16px;font-weight:600;color:#3a3a55;letter-spacing:.5px;margin-top:4px}
.card-row{margin-top:14px;border:1px solid var(--line);border-radius:14px;padding:14px 18px;
  display:flex;align-items:center;gap:16px}
.mini-card{width:64px;height:40px;border-radius:7px;flex:0 0 auto;object-fit:cover}
.card-row .ct{font-size:21px;font-weight:500}

/* profiles */
.add-btn{width:100%;border:1.5px dashed var(--brand);color:var(--brand);background:#f6f6ff;
  border-radius:16px;padding:18px;font:700 17px 'Ubuntu',sans-serif;cursor:pointer;display:flex;
  align-items:center;justify-content:center;gap:10px;margin-bottom:18px}
.add-btn svg{width:22px;height:22px}
.prof{display:flex;align-items:center;gap:16px;border:1px solid var(--line);border-radius:16px;
  padding:14px 16px;margin-bottom:12px;cursor:pointer;transition:border-color .12s,background .12s}
.prof:active{background:#fafaff}
.prof.sel{border-color:var(--brand);background:#f6f6ff}
.prof .pa{width:54px;height:54px;border-radius:11px;object-fit:cover;background:var(--lav);flex:0 0 auto}
.prof .pi{flex:1;min-width:0}
.prof .pn{font-size:18px;font-weight:500}
.prof .pm{font-size:14px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof .check{width:26px;height:26px;border-radius:50%;border:2px solid var(--line-strong);flex:0 0 auto;display:grid;place-items:center}
.prof.sel .check{background:var(--brand);border-color:var(--brand)}
.prof.sel .check svg{width:14px;height:14px;color:#fff}
.prof .check svg{display:none}
.prof.sel .check svg{display:block}
.prof .del{border:none;background:none;color:var(--muted-2);font-size:20px;cursor:pointer;padding:6px}
.empty{color:var(--muted);text-align:center;padding:40px 10px;font-size:15px;line-height:1.5}

/* add/scan sheet */
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px;font-weight:500}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line-strong);border-radius:12px;
  padding:14px;font:400 16px 'Ubuntu',sans-serif;color:var(--ink);background:#fff}
.field textarea{resize:vertical;min-height:70px;font-size:13px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--brand)}
.btn-primary{width:100%;background:var(--brand);color:#fff;border:none;border-radius:14px;padding:17px;
  font:700 17px 'Ubuntu',sans-serif;cursor:pointer;margin-top:6px}
.btn-primary:disabled{opacity:.45;cursor:not-allowed}
.btn-ghost{width:100%;background:none;border:none;color:var(--muted);padding:14px;font:500 15px 'Ubuntu',sans-serif;cursor:pointer}
.scan-tabs{display:flex;gap:8px;margin-bottom:16px}
.scan-tabs button{flex:1;border:1px solid var(--line-strong);background:#fff;border-radius:11px;padding:12px;
  font:500 15px 'Ubuntu',sans-serif;color:var(--muted);cursor:pointer}
.scan-tabs button.on{border-color:var(--brand);color:var(--brand);background:#f6f6ff}
#scan-video{width:100%;border-radius:14px;background:#000;aspect-ratio:1/1;object-fit:cover}
.scan-hint{font-size:13px;color:var(--muted);text-align:center;margin:10px 0}
.ok-banner{background:#eaf7ee;border:1px solid var(--green-bd);color:var(--green);border-radius:12px;
  padding:12px;font-size:14px;font-weight:500;margin-bottom:14px;display:none}
.ok-banner.show{display:block}
.modal-head{font-size:24px;font-weight:700;margin:6px 0 20px}
.sheet.form-sheet{top:auto;height:auto;max-height:calc(100% - 40px);overflow-y:auto}