/* ══════════════════════════════════════════════
   Certii — Professional field app UI
══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;height:100%;-webkit-text-size-adjust:100%}
body{
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
  background:#06090f;color:#edf2ff;
  height:100%;overscroll-behavior:none;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(56,189,248,.06),transparent);
}

:root{
  --bg:#06090f;
  --s1:#0b1120;
  --s2:#101a2e;
  --s3:#162238;
  --bd:#1d3148;
  --bd2:#284563;
  --accent:#38bdf8;
  --accent2:#7dd3fc;
  --text:#edf2ff;
  --mut:#4d6a88;
  --pass:#22c55e;
  --pbg:#052e16;
  --fail:#ef4444;
  --fbg:#3f0808;
  --r:14px;
  --r2:10px;
}

/* ── SHELL ── */
#shell{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}

/* ── TOPBAR ── */
#topbar{
  flex-shrink:0;
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;
  background:var(--bg);
  position:relative; /* anchor the progress strip */
}
.tbadge{
  background:var(--accent);color:#000;
  font-weight:900;font-size:11px;
  padding:5px 11px;border-radius:7px;
  letter-spacing:.7px;flex-shrink:0;
}
.net-online,.net-offline{
  font-size:10px;font-weight:700;
  padding:4px 8px;border-radius:6px;
  flex-shrink:0;letter-spacing:.3px;
}
.net-online{background:#166534;color:#bbf7d0;}
.net-offline{background:#7f1d1d;color:#fecaca;}
.ttitle{font-size:14px;font-weight:700;flex:1;letter-spacing:-.3px;overflow:hidden;white-space:nowrap}
.tsub{font-size:11px;font-weight:400;color:var(--mut);margin-left:5px;letter-spacing:0}

/* Progress bar repurposed as a full-width strip on mobile */
.tprog{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tprog span{font-size:11px;color:var(--mut);min-width:30px;text-align:right}
.pbar{width:72px;height:3px;background:var(--s3);border-radius:2px;flex-shrink:0}
.pfill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;width:0%;transition:width .4s ease}

/* Topbar button group */
.tbtns{display:flex;gap:8px;flex-shrink:0}

/* Cert menu popup */
#cert-menu-overlay{
  display:none;position:fixed;inset:0;z-index:9000;
}
#cert-menu-overlay.open{display:block}
#cert-menu-popup{
  display:none;position:fixed;
  top:60px;left:50%;transform:translateX(-50%) translateY(-6px);
  background:var(--s1);border:1px solid var(--bd2);
  border-radius:var(--r);min-width:200px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
  overflow:hidden;z-index:9001;
  opacity:0;transition:opacity .15s,transform .15s;
}
#cert-menu-popup.open{
  display:block;opacity:1;transform:translateX(-50%) translateY(0);
}
#cert-menu-popup button{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:14px 18px;
  background:transparent;border:none;
  color:var(--text);font-size:14px;font-weight:600;font-family:inherit;
  cursor:pointer;text-align:left;transition:background .1s;
}
#cert-menu-popup button svg{width:17px;height:17px;flex-shrink:0;stroke:var(--accent)}
#cert-menu-popup button:hover{background:var(--s2)}
#cert-menu-popup button+button{border-top:1px solid var(--bd)}

/* New Certificate button — secondary */
.tbtn-new{
  display:flex;align-items:center;gap:6px;
  background:var(--s2);border:1.5px solid var(--bd);
  border-radius:var(--r2);
  color:var(--text);font-size:13px;font-weight:600;
  padding:8px 13px;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  transition:background .12s,border-color .12s;flex-shrink:0;
}
.tbtn-new svg{width:15px;height:15px;flex-shrink:0;stroke:var(--mut)}
.tbtn-new:hover{background:var(--s3);border-color:var(--bd2)}
.tbtn-new:active{transform:scale(.96)}

/* Settings button in topbar */
.tbtn-settings{
  display:flex;align-items:center;gap:6px;
  background:var(--s2);border:1.5px solid var(--bd);
  border-radius:var(--r2);
  color:var(--mut);font-size:13px;font-weight:600;
  padding:8px 13px;cursor:pointer;
  font-family:inherit;white-space:nowrap;
  transition:background .12s,border-color .12s,color .12s;flex-shrink:0;
}
.tbtn-settings svg{width:15px;height:15px;flex-shrink:0}
.tbtn-settings:hover{background:var(--s3);border-color:var(--bd2);color:var(--text)}
.tbtn-settings:active{transform:scale(.96)}

/* Print tab — stands out in the nav bar */
.tab-print{
  color:#0ea5e9 !important;
  font-weight:700 !important;
}
.tab-print svg{stroke:#0ea5e9 !important}
.tab-print:hover{color:#38bdf8 !important}
.tab-print:hover svg{stroke:#38bdf8 !important}

/* ── TABBAR (bottom on mobile, left sidebar on desktop) ── */
#tabbar{
  flex-shrink:0;
  display:flex;
  background:var(--s1);
  border-bottom:1px solid var(--bd);
}
.tab{
  flex:1;display:flex;align-items:center;justify-content:center;
  gap:5px;padding:9px 4px;
  border:none;background:transparent;
  color:var(--mut);font-size:10px;font-weight:600;
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition:color .15s,border-color .15s;
  letter-spacing:.2px;white-space:nowrap;
}
.tab svg{width:13px;height:13px;stroke-width:2;flex-shrink:0}
.tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tab:hover:not(.on){color:var(--text)}

/* ── CONTENT ── */
#content{flex:1;overflow:hidden;position:relative}
.page{
  display:none;width:100%;height:100%;
  overflow-y:auto;overflow-x:hidden;
  padding:16px;gap:14px;
  align-content:start;
}
.page.on{display:grid}

/* Default (mobile-first): single column */
.page-form,.page-apps,.page-tests,.page-faults,.page-settings{grid-template-columns:1fr}
.s2,.s3,.s4,.sf{grid-column:auto}

/* Tablet 640px+ */
@media(min-width:640px){
  .page-form,.page-tests,.page-settings{grid-template-columns:1fr 1fr}
  .page-apps{grid-template-columns:1fr 1fr}
  .page-faults{grid-template-columns:1fr 1fr}
  .s2{grid-column:span 2}
}
/* ── DESKTOP 1024px+: sidebar nav layout ── */
@media(min-width:1024px){
  /* Shell becomes a 2×2 CSS grid: header spans full width, sidebar+main below */
  #shell{
    display:grid;
    grid-template-rows:58px 1fr;
    grid-template-columns:216px 1fr;
    grid-template-areas:'header header' 'sidebar main';
    height:100vh;height:100dvh;overflow:hidden;
  }

  /* ── Topbar ── */
  #topbar{
    grid-area:header;
    background:var(--s1);
    border-bottom:1px solid var(--bd);
    padding:0 20px;
    gap:14px;
    flex-shrink:unset;
  }
  .ttitle{font-size:14px}
  .tsub{display:inline}
  .tprog{display:flex}
  .tbtn-lbl{display:inline}

  /* ── Sidebar nav ── */
  #tabbar{
    grid-area:sidebar;
    flex-direction:column;
    border-right:1px solid var(--bd);
    border-bottom:none;
    background:var(--bg);
    padding:12px 10px;
    gap:2px;
    overflow-y:auto;
    min-height:0;
    align-items:stretch;
  }
  /* Sidebar nav items */
  .tab{
    flex:none;
    flex-direction:row;
    justify-content:flex-start;
    gap:12px;
    padding:12px 14px;
    font-size:13px;font-weight:600;letter-spacing:.15px;
    border-radius:10px;
    border-bottom:none;
    text-align:left;
  }
  .tab svg{width:18px;height:18px;stroke-width:1.8}
  .tab.on{
    background:rgba(56,189,248,.12);
    color:var(--accent);
    border-bottom-color:transparent;
  }
  .tab.on::before{content:none} /* kill mobile pill highlight */
  .tab:hover:not(.on){background:rgba(255,255,255,.05);color:var(--text)}

  /* Print action pushed to bottom of sidebar */
  .tab-print{margin-top:auto;border-top:1px solid var(--bd);padding-top:14px;border-radius:0}

  /* ── Content area ── */
  #content{grid-area:main;overflow:hidden;min-height:0}
  .page{padding:24px;gap:18px}

  /* Page grid layouts */
  .page-form{grid-template-columns:repeat(3,1fr)}
  .page-apps{grid-template-columns:repeat(4,1fr)}
  .page-tests,.page-faults{grid-template-columns:1fr 1fr}
  .page-settings{grid-template-columns:1fr 1fr}
  .s2{grid-column:span 2}.s3{grid-column:span 3}.s4{grid-column:span 4}.sf{grid-column:1/-1}
}

/* ── CARDS ── */
.card{
  background:var(--s1);
  border:1px solid var(--bd);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 4px 32px rgba(0,0,0,.5),0 1px 0 rgba(255,255,255,.04) inset;
  position:relative;
  transition:border-color .2s,box-shadow .2s;
}
.card:hover{
  border-color:var(--bd2);
  box-shadow:0 8px 48px rgba(0,0,0,.65),0 1px 0 rgba(255,255,255,.06) inset;
}
.card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent) 0%,var(--accent2) 50%,transparent 100%);
  opacity:.5;
  pointer-events:none;
}
.ch{
  display:flex;align-items:center;gap:12px;
  background:rgba(16,26,46,.65);
  border-bottom:1px solid var(--bd);
  padding:14px 18px;
}
.ch svg{
  width:16px;height:16px;
  stroke:var(--accent);flex-shrink:0;stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(56,189,248,.4));
}
.ch h2{
  font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.9px;
  color:var(--accent2);
}
.cb{padding:18px;display:flex;flex-direction:column;gap:14px}

/* ── FIELDS ── */
.f{display:flex;flex-direction:column;gap:7px}
.f label{
  font-size:10.5px;font-weight:700;
  color:#4d7a9e;letter-spacing:.65px;
  text-transform:uppercase;
}
.f input,.f select,.f textarea{
  background:rgba(22,34,56,.75);
  border:1.5px solid var(--bd);
  border-radius:12px;
  color:var(--text);
  font-size:16px;
  padding:14px 16px;
  width:100%;outline:none;
  transition:border-color .2s,box-shadow .2s,background .2s;
  -webkit-appearance:none;appearance:none;
  font-family:inherit;
  min-height:52px;
}
.f select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%234d6a88' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  padding-right:40px;
}
.f textarea{resize:none;line-height:1.5;min-height:88px;font-size:15px}
.f input:focus,.f select:focus,.f textarea:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(56,189,248,.15),0 2px 16px rgba(56,189,248,.08);
  background:rgba(16,26,46,.95);
}
.f input.pre{color:var(--accent2)}
.r2{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.r3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}

/* ── RADIO TOGGLES ── */
.rg{display:flex;gap:8px;flex-wrap:wrap}
.ro{
  display:flex;align-items:center;justify-content:center;
  background:rgba(22,34,56,.75);
  border:1.5px solid var(--bd);
  border-radius:12px;
  padding:14px 18px;
  cursor:pointer;
  font-size:14px;font-weight:700;
  transition:all .15s;
  user-select:none;
  flex:1;min-width:64px;min-height:52px;
  color:var(--mut);
  letter-spacing:.2px;
}
.ro input{display:none}
.ro:not(.sp):not(.sf2):not(.sy):not(.sn):not(.sna):active{transform:scale(.95)}
.ro.sp,.ro.sy{
  background:linear-gradient(135deg,#031508,#04200e);
  border-color:#16a34a;color:#4ade80;font-weight:700;
  box-shadow:0 2px 14px rgba(34,197,94,.18);
}
.ro.sf2,.ro.sn{
  background:linear-gradient(135deg,#180303,#220505);
  border-color:#b91c1c;color:#fca5a5;font-weight:700;
  box-shadow:0 2px 14px rgba(239,68,68,.18);
}
.ro.sna{
  background:rgba(16,26,46,.4);
  border-color:var(--bd);color:#334d65;font-weight:600;
}

/* ── BUTTONS ── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:7px;border:none;
  border-radius:var(--r2);
  font-size:14px;font-weight:700;
  padding:13px 20px;
  cursor:pointer;
  font-family:inherit;
  transition:opacity .12s,transform .1s;
  white-space:nowrap;
  min-height:50px;
  letter-spacing:.1px;
}
.btn:active{transform:scale(.96);opacity:.88}
.btn svg{width:16px;height:16px;flex-shrink:0}
.bp{background:var(--accent);color:#000;font-weight:800}
.bs{background:var(--s3);color:var(--text);border:1.5px solid var(--bd)}
.bd2{background:#7f1d1d;color:var(--text)}
.bp:hover{background:var(--accent2)}
.bs:hover{background:var(--bd);border-color:var(--bd2)}

/* ── SETTINGS ── */
.note{
  font-size:12px;color:#5e81a0;
  background:var(--s2);
  border:1.5px solid var(--bd);
  border-left:3px solid var(--accent);
  border-radius:var(--r2);
  padding:11px 14px;line-height:1.7;
}
.note strong{color:var(--text)}
.dv{height:1px;background:var(--bd);margin:2px 0}
.dr{display:flex;align-items:center;gap:10px;padding:4px 0}
.dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.don{background:var(--pass)}.doff{background:var(--mut)}

/* ── OVERLAY & TOAST ── */
#overlay{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.85);
  z-index:10000;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
#overlay.show{display:flex}
#overlay-msg{color:#fff;font-size:15px;font-weight:600;letter-spacing:.1px}
#overlay-spinner{
  width:42px;height:42px;
  border:3px solid var(--s3);border-top-color:var(--accent);
  border-radius:50%;animation:spin .75s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

#toast-wrap{
  position:fixed;bottom:20px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  pointer-events:none;z-index:9999;width:max-content;max-width:calc(100vw - 32px);
}
.toast-item{
  background:var(--s2);border:1px solid var(--bd2);
  color:var(--text);font-size:13px;font-weight:600;
  padding:11px 22px;border-radius:18px;
  opacity:0;transform:translateY(10px);
  transition:opacity .25s,transform .25s;
  box-shadow:0 6px 24px rgba(0,0,0,.5);
  text-align:center;line-height:1.5;max-width:calc(100vw - 32px);
}
.toast-item.on{opacity:1;transform:translateY(0)}

/* ── MOBILE: bottom nav ── */
@media(max-width:767px){
  html,body{overflow:auto;height:auto}
  #shell{height:100vh;height:100dvh;overflow:hidden}

  /* Stack order: topbar → content → tabbar */
  #topbar{order:1;padding:8px 12px 8px;gap:8px}
  .ttitle{font-size:13px}
  .tsub{display:none}
  .tbtn-lbl{display:none} /* icon-only on mobile */
  .tbtns{gap:6px}
  .tbtn-new,.tbtn-settings{padding:9px 11px}
  /* Progress strip at bottom of topbar */
  .tprog{
    position:absolute;bottom:0;left:0;right:0;
    pointer-events:none;display:block !important;
  }
  .tprog span{display:none}
  .pbar{
    width:100% !important;height:2px;border-radius:0;
    background:rgba(255,255,255,.04);
  }
  .pfill{border-radius:0}

  #content{order:2;flex:1;overflow-y:auto;overflow-x:hidden}

  /* Bottom nav */
  #tabbar{
    order:3;
    border-top:1px solid var(--bd);
    border-bottom:none;
    padding-bottom:env(safe-area-inset-bottom, 0px);
    height:76px;
    align-items:stretch;
  }
  .tab{
    flex-direction:column;
    padding:10px 6px 8px;
    font-size:11px;gap:4px;
    border-bottom:none;
    border-top:none;
    position:relative;
  }
  .tab svg{width:24px;height:24px;stroke-width:1.8}
  /* Pill highlight behind active icon */
  .tab.on{color:var(--accent)}
  .tab.on::before{
    content:'';
    position:absolute;
    top:6px;left:4px;right:4px;
    height:calc(100% - 12px);
    background:rgba(56,189,248,.12);
    border-radius:14px;
  }

  .page{overflow:visible;height:auto;padding:12px}
  .page.on{display:flex;flex-direction:column;gap:10px}

  #toast-wrap{bottom:calc(76px + env(safe-area-inset-bottom, 0px) + 14px)}
}

/* ── CUSTOM MODAL ── */
#app-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.82);
  z-index:15000;
  align-items:center;justify-content:center;
  padding:24px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
#app-modal.show{display:flex}
#app-modal-box{
  background:var(--s1);
  border:1px solid var(--bd2);
  border-radius:var(--r);
  padding:30px 24px 24px;
  max-width:360px;width:100%;
  display:flex;flex-direction:column;align-items:center;
  gap:16px;text-align:center;
  box-shadow:0 24px 64px rgba(0,0,0,.7);
}
#app-modal-icon svg{width:48px;height:48px}
#app-modal-msg{
  font-size:15px;line-height:1.65;
  color:var(--text);font-weight:500;
  white-space:pre-wrap;
}
#app-modal-btns{display:flex;flex-wrap:wrap;gap:10px;width:100%;margin-top:4px}
#app-modal-btns .btn{flex:1 1 100px;min-height:48px;font-size:15px}

/* ── LOAD CERT MODAL ── */
#load-modal{
  display:none;position:fixed;inset:0;
  background:rgba(0,0,0,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  z-index:15000;align-items:center;justify-content:center;padding:20px;
}
#load-modal.show{display:flex}
#load-modal-box{
  background:var(--s1);border:1px solid var(--bd2);border-radius:var(--r);
  width:100%;max-width:420px;max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.7);
}
#load-modal-body{padding:20px;display:flex;flex-direction:column;gap:14px;overflow-y:auto;}
#load-modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--bd);
}
#load-modal-head h3{font-size:16px;font-weight:700;color:var(--text);margin:0}
#load-modal-close{
  background:none;border:none;color:var(--mut);cursor:pointer;padding:4px;
  display:flex;align-items:center;justify-content:center;border-radius:6px;
}
#load-modal-close svg{width:18px;height:18px}
#load-modal-close:hover{color:var(--text);background:var(--s3)}
#load-modal-foot{
  display:flex;gap:10px;padding:16px 20px;
  border-top:1px solid var(--bd);
}
#load-modal-foot .btn{flex:1;min-height:48px}
#lc-results{
  display:flex;flex-direction:column;gap:4px;
  max-height:200px;overflow-y:auto;margin-top:6px;
}
.lc-result-item{
  display:flex;flex-direction:column;gap:2px;
  width:100%;padding:10px 12px;text-align:left;
  background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);
  cursor:pointer;font-family:inherit;transition:border-color .1s,background .1s;
}
.lc-result-item:hover{border-color:var(--bd2);background:var(--s3)}
.lc-result-item.selected{border-color:var(--accent);background:var(--s3)}
.lc-result-main{font-size:13px;font-weight:700;color:var(--text)}
.lc-result-sub{font-size:11px;color:var(--mut)}
.lc-no-results{font-size:13px;color:var(--mut);padding:8px 0;text-align:center}
.lc-meta-box{
  background:var(--s2);border:1px solid var(--bd);border-radius:var(--r2);
  padding:12px 14px;display:flex;flex-direction:column;gap:6px;
  font-size:13px;color:var(--mut);
}
.lc-meta-box b{color:var(--text)}

/* ── PHOTO SECTION ── */
.photo-section{
  display:flex;flex-direction:column;gap:10px;
  padding-top:10px;border-top:1px solid var(--bd);margin-top:4px;
}
.photo-btns{display:flex;gap:8px;flex-wrap:wrap}
.btn-photo{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--s3);border:1.5px dashed var(--bd2);
  border-radius:var(--r2);color:var(--mut);
  font-size:13px;font-weight:600;font-family:inherit;
  padding:9px 14px;cursor:pointer;
  transition:border-color .15s,color .15s;
  align-self:flex-start;
}
.btn-photo svg{width:16px;height:16px;flex-shrink:0}
.btn-photo:hover{border-color:var(--accent);color:var(--accent)}
.photo-thumbs{display:flex;flex-wrap:wrap;gap:10px}
.photo-thumb{
  position:relative;display:flex;flex-direction:column;
  gap:6px;width:140px;
}
.photo-thumb img{
  width:140px;height:100px;object-fit:cover;
  border-radius:var(--r2);border:1px solid var(--bd);cursor:pointer;
  transition:border-color .15s;
}
.photo-thumb img:hover{border-color:var(--accent)}
.photo-thumb input{
  font-size:11px;padding:5px 8px;
  border-radius:8px;
}
.photo-remove{
  position:absolute;top:4px;right:4px;
  background:rgba(0,0,0,.65);border:none;border-radius:50%;
  color:#fff;font-size:10px;width:20px;height:20px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  line-height:1;
}
.photo-remove:hover{background:#ef4444}

/* ── PRELOADER ── */
@keyframes pl-slide-up{
  to{transform:translateY(-100%)}
}
@keyframes pl-shimmer{
  from{background-position:150% center}
  to{background-position:-50% center}
}
@keyframes pl-logo-in{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pl-sub-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes pl-drop-in{
  from{opacity:0;transform:translateY(-18px)}
  to{opacity:1;transform:translateY(0)}
}
#preloader{
  position:fixed;inset:0;z-index:50000;
  background:#0a1628;
  display:flex;align-items:center;justify-content:center;
}
#preloader.pl-sliding{
  animation:pl-slide-up .75s cubic-bezier(.7,0,.3,1) forwards;
}
.pl-inner{
  display:flex;flex-direction:column;align-items:center;
  opacity:0;
  animation:pl-drop-in .5s cubic-bezier(.2,.8,.3,1) forwards;
}
.pl-logo-box{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 28px;
}
.pl-logo-box::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:10px;
  background:var(--accent);
  clip-path:inset(0 100% 0 0 round 10px);
  animation:pl-fill-sweep 0.55s cubic-bezier(.4,0,.2,1) forwards 1.6s;
  z-index:1;
}
.pl-badge-border{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  overflow:visible;
  z-index:3;
}
.pl-badge-rect{
  fill:none;
  stroke:var(--accent);
  stroke-width:2;
  stroke-dasharray:1200;
  stroke-dashoffset:1200;
  animation:pl-border-draw 0.9s cubic-bezier(.4,0,.2,1) forwards 0.6s;
}
.pl-logo-filled{
  position:absolute;
  inset:14px 0 14px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:clamp(48px,12vw,72px);
  font-weight:900;
  letter-spacing:3px;
  color:#000;
  margin-left:3px;
  clip-path:inset(0 100% 0 0 round 10px);
  animation:pl-fill-sweep 0.55s cubic-bezier(.4,0,.2,1) forwards 1.6s;
  z-index:2;
}
@keyframes pl-border-draw{
  to{stroke-dashoffset:0}
}
@keyframes pl-fill-sweep{
  from{clip-path:inset(0 100% 0 0 round 10px)}
  to{clip-path:inset(0 0% 0 0 round 10px)}
}
.pl-logo{
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:clamp(48px,12vw,72px);
  font-weight:900;
  letter-spacing:3px;
  opacity:0;
  background:linear-gradient(
    118deg,
    #5ab4e8 0%,
    #7dd3fc 40%,
    #cceeff 46%,
    #ffffff 50%,
    #cceeff 54%,
    #7dd3fc 60%,
    #5ab4e8 100%
  );
  filter:drop-shadow(0 0 16px rgba(56,189,248,0.35));
  text-align:center;
  margin-left:3px;
  background-size:280% 100%;
  background-position:150% center;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:
    pl-logo-in 0.55s cubic-bezier(.2,.8,.3,1) forwards 0.7s,
    pl-shimmer 1.3s cubic-bezier(.4,0,.2,1) forwards 1.4s;
}
.pl-sub{
  font-family:-apple-system,'Segoe UI',system-ui,sans-serif;
  font-size:clamp(13px,3vw,16px);
  font-weight:400;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(125,211,252,0.55);
  margin-top:10px;
  opacity:0;
  animation:pl-sub-in 0.5s cubic-bezier(.2,.8,.3,1) forwards 1.1s;
}

/* ── ONBOARDING MODAL ── */
@keyframes ob-backdrop-in{from{opacity:0}to{opacity:1}}
@keyframes ob-box-in{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ob-step-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes ob-step-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-20px)}}
@keyframes ob-check-pop{
  0%{transform:scale(0) rotate(-15deg);opacity:0}
  60%{transform:scale(1.25) rotate(6deg);opacity:1}
  100%{transform:scale(1) rotate(0deg);opacity:1}
}

#ob-modal{
  animation:ob-backdrop-in .3s ease both;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.ob-box{
  background:linear-gradient(160deg,rgba(16,26,46,.98) 0%,rgba(11,17,32,.98) 100%);
  border:1px solid rgba(56,189,248,.2);
  border-radius:22px;
  padding:32px 28px 28px;
  width:100%;max-width:460px;
  max-height:92vh;overflow-y:auto;
  display:flex;flex-direction:column;
  animation:ob-box-in .4s cubic-bezier(.22,.68,0,1.2) both;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset,
             0 8px 48px rgba(0,0,0,.7),
             0 0 80px rgba(56,189,248,.06);
  position:relative;
}
.ob-box::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),transparent);
  border-radius:22px 22px 0 0;
  opacity:.7;
}
.ob-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:24px;
}
.ob-logo{
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#000;font-weight:900;font-size:12px;
  padding:5px 13px;border-radius:8px;letter-spacing:.8px;
  box-shadow:0 2px 12px rgba(56,189,248,.3);
}
.ob-step-label{
  font-size:11px;color:var(--mut);font-weight:600;
  letter-spacing:.3px;transition:opacity .2s;
}
.ob-title{
  font-size:22px;font-weight:800;color:var(--text);
  margin-bottom:7px;letter-spacing:-.3px;line-height:1.2;
}
.ob-sub{font-size:13px;color:var(--mut);line-height:1.6;margin-bottom:22px}
.ob-fields{display:flex;flex-direction:column;gap:14px;margin-bottom:6px}
.ob-req{color:#f59e0b;font-weight:700}
.ob-error{
  background:rgba(63,8,8,.8);border:1px solid rgba(239,68,68,.5);
  border-radius:10px;color:#fca5a5;font-size:13px;
  padding:12px 14px;margin-bottom:14px;
  animation:ob-step-in .2s ease both;
  backdrop-filter:blur(4px);
}
.ob-btn{
  width:100%;margin-top:20px;padding:16px;font-size:15px;font-weight:800;
  border-radius:13px;letter-spacing:.2px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  color:#000;border:none;cursor:pointer;font-family:inherit;
  box-shadow:0 4px 20px rgba(56,189,248,.35);
  transition:transform .12s,box-shadow .12s,opacity .12s;
}
.ob-btn:hover{box-shadow:0 6px 28px rgba(56,189,248,.5);opacity:.95}
.ob-btn:active{transform:scale(.97);box-shadow:0 2px 10px rgba(56,189,248,.25)}
.bs.ob-btn{
  background:rgba(22,34,56,.8);color:var(--text);
  border:1.5px solid var(--bd2);
  box-shadow:none;
}
.bs.ob-btn:hover{background:var(--s3);box-shadow:none;opacity:1}
.ob-step-enter{animation:ob-step-in .28s ease both}
.ob-check{display:inline-block;animation:ob-check-pop .45s cubic-bezier(.22,.68,0,1.2) .1s both}
.ob-confirm{display:flex;flex-direction:column;gap:10px}
.ob-confirm-section{
  background:rgba(22,34,56,.6);
  border:1px solid var(--bd);border-radius:12px;overflow:hidden;
}
.ob-confirm-heading{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:var(--accent2);padding:9px 14px;
  border-bottom:1px solid var(--bd);
  background:rgba(16,26,46,.5);
}
.ob-confirm-row{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--bd)}
.ob-confirm-row:last-child{border-bottom:none}
.ob-confirm-label{font-size:11px;color:var(--mut);flex-shrink:0;width:100px;letter-spacing:.2px}
.ob-confirm-val{font-size:13px;font-weight:600;color:var(--text);flex:1}

/* ── WIDE SCREENS 1440px+ ── */
@media(min-width:1440px){
  #shell{grid-template-columns:240px 1fr}
  .page{padding:32px;gap:20px}
}

/* ── REDUCE MOTION ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}