/* ScoreHQ — iOS-inspired light theme */
:root {
  --bg:        #F2F2F7;
  --surface:   #FFFFFF;
  --grouped:   #EFEFF4;
  --blue:      #007AFF;
  --blue-dk:   #0062CC;
  --green:     #34C759;
  --red:       #FF3B30;
  --orange:    #FF9500;
  --purple:    #5856D6;
  --teal:      #32ADE6;
  --pink:      #FF2D55;
  --indigo:    #5E5CE6;
  --gray:      #8E8E93;
  --text:      #000000;
  --text2:     #3C3C43;
  --text3:     #6C6C70;
  --sep:       rgba(60,60,67,.18);
  --r:         12px;
  --rl:        16px;
  --sh:        0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.05);
  --font:      -apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;
  --mono:      'SF Mono','Fira Code',monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:var(--blue);text-decoration:none}
a:hover{opacity:.8}

/* ── TOP NAV ── */
.nav{position:sticky;top:0;z-index:200;height:52px;background:rgba(255,255,255,.88);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--sep);display:flex;align-items:center;padding:0 16px;gap:12px}
.nav-brand{font-size:17px;font-weight:700;color:var(--blue);letter-spacing:-.3px;white-space:nowrap}
.nav-title{font-size:16px;font-weight:600;position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
.nav-back{color:var(--blue);font-size:15px;font-weight:500;display:flex;align-items:center;gap:2px;white-space:nowrap}
.nav-back i{font-size:18px}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:4px}
.nav-btn{padding:6px 10px;border-radius:8px;font-size:14px;font-weight:500;color:var(--blue);background:transparent;border:none;cursor:pointer;font-family:var(--font);display:flex;align-items:center;gap:4px;transition:background .15s;text-decoration:none}
.nav-btn:hover{background:rgba(0,122,255,.08);color:var(--blue)}
.nav-btn.red{color:var(--red)}
.nav-btn.red:hover{background:rgba(255,59,48,.08)}
.nav-btn.pill{background:var(--blue);color:white;border-radius:20px;padding:6px 14px}
.nav-btn.pill:hover{background:var(--blue-dk);opacity:1}

/* ── PAGE ── */
.page{padding-bottom:48px;min-height:calc(100vh - 52px)}
.page-header{padding:8px 16px 12px;display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.page-h1{font-size:28px;font-weight:700;letter-spacing:-.5px;line-height:1}
.add-circle{width:32px;height:32px;border-radius:50%;background:var(--blue);color:white;border:none;font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;flex-shrink:0;transition:opacity .15s}
.add-circle:hover{opacity:.8;color:white}

/* ── SECTION HEADER ── */
.sec-hdr{padding:20px 16px 6px;font-size:13px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}

/* ── APP ICON GRID ── */
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:8px 16px}
@media(max-width:360px){.app-grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:600px){.app-grid{grid-template-columns:repeat(5,1fr)}}
@media(min-width:900px){.app-grid{grid-template-columns:repeat(6,1fr)}}
.app-icon{display:flex;flex-direction:column;align-items:center;gap:5px;cursor:pointer;text-decoration:none;color:var(--text);background:none;border:none;padding:0;-webkit-tap-highlight-color:transparent}
.app-icon:hover .aii{transform:scale(1.06)}
.app-icon:active .aii{transform:scale(.93);opacity:.8}
.aii{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:var(--sh);transition:transform .18s cubic-bezier(.34,1.56,.64,1),opacity .1s;position:relative;overflow:hidden}
@media(min-width:600px){.aii{width:72px;height:72px;font-size:32px;border-radius:16px}}
.aii-lbl{font-size:11px;font-weight:500;text-align:center;color:var(--text);line-height:1.2;max-width:72px}
.app-badge{position:absolute;top:-3px;right:-3px;background:var(--red);color:white;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid white}
.a-blue{background:linear-gradient(145deg,#4FACFE,#007AFF)}
.a-green{background:linear-gradient(145deg,#43E97B,#34C759)}
.a-purple{background:linear-gradient(145deg,#A78BFA,#5856D6)}
.a-orange{background:linear-gradient(145deg,#FFB347,#FF9500)}
.a-red{background:linear-gradient(145deg,#FF6B6B,#FF3B30)}
.a-teal{background:linear-gradient(145deg,#5CE0D8,#32ADE6)}
.a-pink{background:linear-gradient(145deg,#FF6CAB,#FF2D55)}
.a-indigo{background:linear-gradient(145deg,#818CF8,#5856D6)}
.a-gray{background:linear-gradient(145deg,#B0B0B6,#8E8E93)}
.a-gold{background:linear-gradient(145deg,#FFD700,#FF9500)}

/* ── iOS LIST ── */
.ios-list{background:var(--surface);border-radius:var(--rl);margin:0 16px;overflow:hidden;box-shadow:var(--sh)}
.ios-list+.ios-list,.ios-list+.sec-hdr{margin-top:0}
.cell{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:.5px solid var(--sep);background:var(--surface);min-height:52px;color:var(--text);text-decoration:none;cursor:default;width:100%;text-align:left;border:none;border-bottom:.5px solid var(--sep);font-family:var(--font);font-size:16px;transition:background .1s}
.cell:last-child{border-bottom:none}
.cell:active,.cell.pressing{background:var(--grouped)}
.cell-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:white}
.cell-body{flex:1;min-width:0}
.cell-title{font-size:16px;font-weight:400;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-sub{font-size:13px;color:var(--text3);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell-right{color:var(--text3);font-size:14px;flex-shrink:0;display:flex;align-items:center;gap:6px;margin-left:auto}
.chevron{color:var(--sep);font-size:12px}

/* ── CARDS ── */
.card{background:var(--surface);border-radius:var(--rl);margin:0 16px;box-shadow:var(--sh);overflow:hidden}
.card-hdr{padding:12px 16px 10px;border-bottom:.5px solid var(--sep);font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:space-between}
.card-body{padding:16px}

/* ── HERO BANNER ── */
.hero{background:linear-gradient(150deg,var(--blue) 0%,var(--purple) 100%);color:white;padding:20px 16px}
.hero-title{font-size:22px;font-weight:700;letter-spacing:-.3px}
.hero-sub{font-size:14px;opacity:.85;margin-top:2px}
.hero-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.hero-tag{background:rgba(255,255,255,.2);backdrop-filter:blur(8px);color:white;font-size:12px;font-weight:600;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:4px}

/* ── STAT ROW ── */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-radius:var(--rl);margin:12px 16px 0;box-shadow:var(--sh);overflow:hidden}
.stat{padding:14px 8px;text-align:center;border-right:.5px solid var(--sep)}
.stat:last-child{border-right:none}
.stat-n{font-size:22px;font-weight:700;letter-spacing:-.5px}
.stat-l{font-size:11px;color:var(--text3);font-weight:500;margin-top:1px}

/* ── FORMS ── */
.form-list{background:var(--surface);border-radius:var(--rl);margin:0 16px;overflow:hidden;box-shadow:var(--sh)}
.form-row{display:flex;align-items:center;padding:0 16px;border-bottom:.5px solid var(--sep);min-height:52px;gap:12px}
.form-row:last-child{border-bottom:none}
.form-lbl{font-size:15px;color:var(--text);flex-shrink:0;min-width:100px;font-weight:400}
.form-inp{flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--text);text-align:right;padding:14px 0;font-family:var(--font);width:100%}
.form-inp::placeholder{color:var(--text3)}
.form-sel{flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--text);text-align:right;padding:14px 0;font-family:var(--font);appearance:none;cursor:pointer}
.form-ta{flex:1;border:none;outline:none;background:transparent;font-size:15px;color:var(--text);padding:12px 0;font-family:var(--font);resize:vertical;min-height:80px;width:100%}
.form-ta::placeholder{color:var(--text3)}
.form-sec{padding:16px 16px 6px;font-size:13px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.4px}

/* ── BUTTONS ── */
.btn{display:block;width:calc(100% - 32px);margin:0 16px;padding:15px;background:var(--blue);color:white;border:none;border-radius:var(--rl);font-size:16px;font-weight:600;text-align:center;cursor:pointer;text-decoration:none;transition:opacity .15s;font-family:var(--font)}
.btn:hover{opacity:.88;color:white}
.btn:active{opacity:.72}
.btn.green{background:var(--green)}
.btn.red{background:var(--red)}
.btn.gray{background:var(--grouped);color:var(--blue)}
.btn.disabled{background:var(--sep) !important;color:#aaa !important;pointer-events:none;cursor:default}
.btn-sm{display:inline-flex;align-items:center;gap:4px;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;border:none;font-family:var(--font);white-space:nowrap;transition:opacity .15s}
.btn-sm:active{opacity:.7}
.btn-sm.blue{background:rgba(0,122,255,.12);color:var(--blue)}
.btn-sm.blue:hover{background:rgba(0,122,255,.2);color:var(--blue)}
.btn-sm.solid{background:var(--blue);color:white}
.btn-sm.solid:hover{opacity:.88;color:white}
.btn-sm.green{background:rgba(52,199,89,.15);color:#1A7F37}
.btn-sm.red{background:rgba(255,59,48,.12);color:var(--red)}
.btn-sm.red:hover{background:rgba(255,59,48,.2);color:var(--red)}
.btn-sm.gray{background:var(--grouped);color:var(--text2)}
.mt{margin-top:14px}

/* ── AUTH ── */
.auth-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg);padding:24px 0 48px}
.auth-logo{text-align:center;margin-bottom:28px}
.auth-icon{width:72px;height:72px;background:var(--blue);border-radius:18px;display:flex;align-items:center;justify-content:center;font-size:36px;margin:0 auto 10px;box-shadow:0 8px 24px rgba(0,122,255,.28)}
.auth-name{font-size:22px;font-weight:700;letter-spacing:-.3px}
.auth-sub{font-size:14px;color:var(--text3);margin-top:2px}
.auth-wrap{width:100%;max-width:360px;padding:0 0}

/* ── ALERTS ── */
.alert{margin:12px 16px 0;padding:12px 14px;border-radius:var(--r);font-size:14px;font-weight:500;display:flex;align-items:flex-start;gap:8px}
.alert.ok{background:rgba(52,199,89,.12);color:#1A7F37}
.alert.err{background:rgba(255,59,48,.10);color:var(--red)}
.alert.warn{background:rgba(255,149,0,.12);color:#B56800}
.alert.info{background:rgba(0,122,255,.10);color:var(--blue)}

/* ── SCORE BUTTONS ── */
.score-card{background:var(--surface);border-radius:var(--rl);padding:14px 16px;margin-bottom:10px;box-shadow:var(--sh)}
.score-title{font-size:15px;font-weight:600;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
.score-max{font-size:12px;color:var(--text3);font-weight:400}
.score-btns{display:flex;flex-wrap:wrap;gap:6px}
.sbtn{width:44px;height:44px;border:1.5px solid var(--sep);background:var(--bg);color:var(--text2);border-radius:var(--r);font-size:15px;font-weight:600;cursor:pointer;transition:all .12s;font-family:var(--font);display:flex;align-items:center;justify-content:center}
.sbtn:active{transform:scale(.88)}
.sbtn.on{background:var(--blue);border-color:var(--blue);color:white;box-shadow:0 2px 8px rgba(0,122,255,.38)}
@media(max-width:380px){.sbtn{width:38px;height:38px;font-size:13px}}

/* ── CONTESTANT HERO (judge) ── */
.cont-hero{background:linear-gradient(150deg,var(--blue),var(--purple));color:white;padding:24px 16px 20px;text-align:center}
.cont-num{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgba(255,255,255,.25);border-radius:50%;font-size:16px;font-weight:700;margin-bottom:10px}
.cont-name{font-size:22px;font-weight:700;letter-spacing:-.3px}
.cont-round{font-size:13px;opacity:.8;margin-top:4px}
.prog-bar{margin-top:14px;height:4px;background:rgba(255,255,255,.25);border-radius:2px;overflow:hidden}
.prog-fill{height:100%;background:white;border-radius:2px;transition:width .4s ease}

/* ── FIXED BOTTOM BAR ── */
.bottom-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:.5px solid var(--sep);padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:100}
.bottom-bar .btn{margin:0;width:100%}

/* ── RESULTS TABLE ── */
.tbl-wrap{overflow-x:auto;margin:0 16px;border-radius:var(--rl);box-shadow:var(--sh)}
.tbl{width:100%;border-collapse:collapse;background:white;font-size:13px;min-width:320px}
.tbl th{background:#F8F8FA;color:var(--text3);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;padding:10px 12px;white-space:nowrap;border-bottom:.5px solid var(--sep);text-align:center}
.tbl th.left,.tbl td.left{text-align:left}
.tbl td{padding:10px 12px;border-bottom:.5px solid var(--sep);vertical-align:middle;text-align:center}
.tbl tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:#F8F8FA}
.rank-1{color:#F5A623;font-weight:800}
.rank-2{color:#8E8E93;font-weight:800}
.rank-3{color:#9B6B3D;font-weight:800}
.total-cell{color:var(--blue);font-weight:700}

/* ── AVATAR ── */
.av{border-radius:50%;object-fit:cover;background:var(--grouped);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--text3)}
.av-sm{width:36px;height:36px;font-size:13px;border-radius:10px}
.av-md{width:50px;height:50px;font-size:18px}
.av-lg{width:80px;height:80px;font-size:28px;border-radius:20px}

/* ── PHOTO UPLOAD ── */
.photo-up{text-align:center;padding:16px}
.photo-prev{width:80px;height:80px;border-radius:20px;object-fit:cover;margin:0 auto 10px;display:block;background:var(--grouped)}

/* ── BADGE ── */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px}
.badge.active{background:rgba(52,199,89,.15);color:#1A7F37}
.badge.inactive{background:rgba(255,59,48,.12);color:var(--red)}
.badge.draft{background:rgba(142,142,147,.12);color:var(--gray)}
.badge.paid{background:rgba(52,199,89,.15);color:#1A7F37}
.badge.sent{background:rgba(0,122,255,.12);color:var(--blue)}
.badge.overdue{background:rgba(255,59,48,.12);color:var(--red)}
.badge.cancelled{background:rgba(142,142,147,.12);color:var(--gray)}
.badge.blue{background:rgba(0,122,255,.12);color:var(--blue)}

/* ── LIVE DOT ── */
.live{display:inline-block;width:7px;height:7px;background:var(--green);border-radius:50%;animation:pulse 1.4s ease-in-out infinite;margin-right:5px}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}

/* ── HOME ── */
.home-hero{background:linear-gradient(150deg,var(--blue),var(--purple));padding:40px 20px 32px;text-align:center;color:white}
.home-hero h1{font-size:36px;font-weight:800;letter-spacing:-.5px}
.home-hero p{font-size:15px;opacity:.85;margin-top:6px}
.hero-btns{display:flex;gap:10px;justify-content:center;margin-top:20px;flex-wrap:wrap}
.hbtn{padding:11px 22px;border-radius:22px;font-size:15px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:opacity .15s}
.hbtn:active{opacity:.8}
.hbtn.white{background:white;color:var(--blue)}
.hbtn.outline{background:rgba(255,255,255,.2);color:white;border:1.5px solid rgba(255,255,255,.5)}

/* ── JUDGE HOME BUTTONS ── */
.judge-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;padding:16px}
.judge-btn{background:var(--surface);border-radius:var(--rl);padding:20px 12px;text-align:center;box-shadow:var(--sh);text-decoration:none;color:var(--text);cursor:pointer;border:none;font-family:var(--font);transition:transform .15s,box-shadow .15s}
.judge-btn:active{transform:scale(.96);box-shadow:none}
.judge-btn-icon{font-size:32px;margin-bottom:8px}
.judge-btn-label{font-size:14px;font-weight:600;color:var(--text)}
.judge-btn-sub{font-size:12px;color:var(--text3);margin-top:2px}

/* ── COMPLETE ── */
.complete{padding:48px 24px;text-align:center}
.complete-icon{font-size:64px;margin-bottom:12px}
.complete-h{font-size:24px;font-weight:700}
.complete-sub{color:var(--text3);font-size:15px;margin-top:6px;margin-bottom:24px}

/* ── PROGRESS ── */
.prog-row{display:flex;align-items:center;gap:8px}
.prog-track{flex:1;height:4px;background:var(--sep);border-radius:2px;overflow:hidden}
.prog-bar-fill{height:100%;background:var(--blue);border-radius:2px}

/* ── INVOICE ── */
.inv-header{background:linear-gradient(150deg,var(--blue),var(--indigo));color:white;padding:24px 16px;margin:0}
.inv-h{font-size:24px;font-weight:700}
.inv-num{opacity:.8;font-size:14px;margin-top:2px}
.inv-row{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:.5px solid var(--sep)}
.inv-row:last-child{border-bottom:none}
.inv-lbl{font-size:14px;color:var(--text3)}
.inv-val{font-size:15px;font-weight:500}

/* ── TAB STRIP ── */
.tabs{display:flex;gap:8px;padding:0 16px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tab{flex-shrink:0;padding:7px 16px;border-radius:20px;font-size:14px;font-weight:600;text-decoration:none;transition:all .15s;cursor:pointer;border:none;font-family:var(--font)}
.tab.on{background:var(--blue);color:white}
.tab.off{background:rgba(0,122,255,.1);color:var(--blue)}

/* ── UTIL ── */
.mt8{margin-top:8px} .mt12{margin-top:12px} .mt16{margin-top:16px} .mt20{margin-top:20px}
.flex{display:flex} .ac{align-items:center} .jb{justify-content:space-between} .g8{gap:8px} .g12{gap:12px}
.fw6{font-weight:600} .fw7{font-weight:700}
.muted{color:var(--text3)}
.blue{color:var(--blue)} .green-c{color:var(--green)} .red-c{color:var(--red)}
.f12{font-size:12px} .f13{font-size:13px} .f14{font-size:14px}
.px16{padding-left:16px;padding-right:16px}
.empty{text-align:center;padding:48px 24px}
.empty-icon{font-size:52px;margin-bottom:12px}
.empty-h{font-size:18px;font-weight:600;margin-bottom:6px}
.empty-sub{color:var(--text3);font-size:14px;margin-bottom:20px}
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-thumb{background:var(--sep);border-radius:4px}

/* ── DRAG & DROP ── */
.drag-list { touch-action: none; }
.drag-item {
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow .15s, opacity .15s;
  position: relative;
}
.drag-item:active { cursor: grabbing; }
.drag-item.dragging {
  opacity: .5;
  box-shadow: 0 8px 24px rgba(0,0,0,.15) !important;
  z-index: 10;
}
.drag-item.drag-over {
  box-shadow: 0 0 0 2px var(--blue) inset;
}
.drag-handle {
  color: var(--sep);
  font-size: 18px;
  cursor: grab;
  padding: 0 6px 0 0;
  flex-shrink: 0;
  touch-action: none;
  display: flex;
  align-items: center;
}
.drag-handle:active { cursor: grabbing; color: var(--blue); }
.drag-saving {
  position: absolute;
  top: 50%; right: 12px;
  transform: translateY(-50%);
  font-size: 11px;
  color: var(--blue);
  font-weight: 600;
  opacity: 0;
  transition: opacity .2s;
}
.drag-saving.show { opacity: 1; }

/* ── INLINE EDIT ── */
.crit-row { position: relative; }
.crit-inline-form {
  display: none;
  padding: 10px 16px 12px;
  background: #F8F8FC;
  border-top: .5px solid var(--sep);
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.crit-inline-form.open { display: flex; }
.crit-inp {
  border: 1.5px solid var(--sep);
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 14px;
  font-family: var(--font);
  background: white;
  color: var(--text);
  outline: none;
  transition: border-color .15s;
}
.crit-inp:focus { border-color: var(--blue); }
.crit-inp.title-inp { flex: 1; min-width: 120px; }
.crit-inp.score-inp { width: 72px; text-align: center; }

/* ── TOGGLE SWITCH (clickable, label-wrapped) ── */
.toggle-wrap {
  position:relative; display:inline-block;
  width:44px; height:26px; flex-shrink:0;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.toggle-inp {
  position:absolute; inset:0; width:100%; height:100%;
  margin:0; opacity:0; cursor:pointer; z-index:2;
}
.toggle-track {
  position:absolute; inset:0;
  background:var(--sep); border-radius:13px;
  transition:background .2s; pointer-events:none;
}
.toggle-inp:checked ~ .toggle-track { background:var(--blue) }
.toggle-thumb {
  position:absolute; top:3px; left:3px;
  width:20px; height:20px; background:white;
  border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:left .2s; pointer-events:none;
}
.toggle-inp:checked ~ .toggle-track .toggle-thumb { left:21px }
.toggle-inp:focus-visible ~ .toggle-track { box-shadow:0 0 0 3px rgba(0,122,255,.3) }

/* ── LOCK SLIDER ── */
.lock-bar { display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:white;border-radius:var(--rl);margin:0 16px;box-shadow:var(--sh) }
.lock-bar-lbl { font-size:15px;font-weight:600 }
.lock-bar-sub { font-size:12px;color:var(--text3);margin-top:1px }

/* ── PRINT ── */
@media print {
  .nav,.btn,.btn-sm,.add-circle,.back-btn,.no-print { display:none !important }
  body { background:white }
  .tbl-wrap { margin:0;border-radius:0;box-shadow:none }
  .tbl { font-size:11px }
  .page { padding:0 }
  .print-header { display:block !important }
}
.print-header { display:none }

/* ── XERO INVOICE ── */
.xero-invoice { background:white;max-width:860px;margin:0 auto;padding:0 }
.xero-top { padding:32px 40px 24px;border-bottom:3px solid var(--blue) }
.xero-logo { font-size:28px;font-weight:800;color:var(--blue);letter-spacing:-.5px }
.xero-meta { display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:24px 40px;border-bottom:.5px solid var(--sep) }
.xero-to { font-size:13px;line-height:1.7 }
.xero-to strong { font-size:15px;font-weight:700;display:block;margin-bottom:4px }
.xero-details { font-size:13px;line-height:1.9 }
.xero-details dt { color:var(--text3);float:left;width:90px }
.xero-details dd { margin-left:90px;font-weight:500 }
.xero-lines { padding:0 40px }
.xero-lines-tbl { width:100%;border-collapse:collapse;font-size:13px;margin-top:0 }
.xero-lines-tbl th { border-bottom:1.5px solid var(--text);padding:8px 10px;text-align:left;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;color:var(--text2) }
.xero-lines-tbl th.r,.xero-lines-tbl td.r { text-align:right }
.xero-lines-tbl td { padding:10px 10px;border-bottom:.5px solid var(--sep) }
.xero-totals { padding:16px 40px;display:flex;justify-content:flex-end }
.xero-totals-grid { width:280px;font-size:13px }
.xero-totals-row { display:flex;justify-content:space-between;padding:5px 0;border-bottom:.5px solid var(--sep) }
.xero-totals-row.grand { font-size:16px;font-weight:700;border-bottom:2px solid var(--text);padding-top:8px }
.xero-payments { padding:0 40px 16px }
.xero-payments h4 { font-size:13px;font-weight:700;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px;color:var(--text3) }
.xero-payments-tbl { width:100%;font-size:13px;border-collapse:collapse }
.xero-payments-tbl td { padding:6px 8px;border-bottom:.5px solid var(--sep) }
.xero-due { padding:16px 40px;background:var(--bg);margin:0 }
.xero-due-row { display:flex;justify-content:space-between;font-size:16px;font-weight:700 }
.xero-due-amount { color:var(--blue);font-size:22px }
.xero-notes { padding:24px 40px;border-top:.5px solid var(--sep);font-size:13px;color:var(--text3) }
@media(max-width:600px){
  .xero-top,.xero-meta,.xero-lines,.xero-totals,.xero-payments,.xero-due,.xero-notes { padding-left:16px;padding-right:16px }
  .xero-meta { grid-template-columns:1fr }
  .xero-logo { font-size:22px }
}

/* ── EXPORT BAR ── */
.export-bar { display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap }
.export-bar .btn-sm { text-decoration:none }

/* ── PROFILE AVATAR NAV BUTTON ── */
.profile-btn { padding:4px !important; border-radius:50% !important; }
.profile-avatar {
  width:32px; height:32px; border-radius:50%;
  background:var(--blue);
  color:white; font-size:14px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

/* ── MFA / Profile pages ── */
.mfa-code-input {
  font-size:32px; font-weight:700; letter-spacing:12px;
  text-align:center; border:2px solid var(--sep);
  border-radius:var(--rl); padding:14px 20px;
  font-family:var(--mono); width:100%;
  background:white; color:var(--text);
  outline:none; transition:border-color .2s;
}
.mfa-code-input:focus { border-color:var(--blue); }
.mfa-qr-wrap { text-align:center; padding:20px 0; }
.mfa-qr-wrap img { border-radius:var(--r); box-shadow:var(--sh); }
.secret-code {
  font-family:var(--mono); font-size:13px; letter-spacing:2px;
  background:var(--grouped); padding:10px 14px;
  border-radius:var(--r); word-break:break-all;
  text-align:center; color:var(--text2);
}

/* ── JUDGE FILTER SWITCHES ── */
.judge-filter-bar {
  padding:12px 16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.judge-filter-chip {
  display:flex; align-items:center; gap:8px;
  background:white; border-radius:20px;
  padding:6px 12px; box-shadow:var(--sh);
  font-size:13px; font-weight:600;
}
.judge-filter-chip .toggle-wrap { width:36px; height:22px; }
.judge-filter-chip .toggle-thumb { width:16px; height:16px; top:3px; left:3px; }
.judge-filter-chip .toggle-inp:checked ~ .toggle-track .toggle-thumb { left:17px; }

/* ── AUDIT LOG ── */
.audit-action-enter  { color:var(--green); font-weight:600; font-size:11px; }
.audit-action-modify { color:var(--orange); font-weight:600; font-size:11px; }
.audit-action-delete { color:var(--red); font-weight:600; font-size:11px; }

/* ── AUTH ROLE SWITCHER (segmented control) ── */
.role-switch {
  display: flex;
  background: var(--grouped);
  border-radius: 14px;
  padding: 4px;
  margin: 0 0 24px;
  position: relative;
}
.role-switch a {
  flex: 1;
  text-align: center;
  padding: 10px 12px;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text3);
  text-decoration: none;
  transition: color .2s;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.role-switch a.active {
  color: white;
}
.role-switch-bg {
  position: absolute;
  top: 4px; left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: var(--blue);
  border-radius: 11px;
  box-shadow: 0 2px 8px rgba(0,122,255,.3);
  z-index: 0;
}
.role-switch-bg.shift {
  left: calc(50% + 0px);
}

/* ── PRETTY AUTH CARD ── */
.auth-card-pretty {
  width: 100%;
  max-width: 380px;
  background: white;
  border-radius: 24px;
  padding: 28px 24px 24px;
  box-shadow: 0 12px 40px rgba(0,0,0,.08), 0 2px 8px rgba(0,0,0,.04);
}
.auth-page-pretty {
  min-height: 100vh;
  background: linear-gradient(160deg, #F0F4FF 0%, #F2F2F7 50%, #FFF0F6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 48px;
}
.auth-icon-pretty {
  width: 64px; height: 64px;
  border-radius: 18px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  margin: 0 auto 14px;
  box-shadow: 0 8px 20px rgba(0,122,255,.25);
}
.auth-title-pretty {
  font-size: 22px; font-weight: 800;
  text-align: center; letter-spacing: -.4px;
  color: var(--text);
}
.auth-sub-pretty {
  font-size: 14px; color: var(--text3);
  text-align: center; margin-top: 4px;
}

/* ── FLOATING LABEL INPUT GROUP ── */
.input-group-pretty { margin-bottom: 14px; }
.input-group-pretty label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 6px;
}
.input-pretty {
  width: 100%;
  border: 1.5px solid var(--sep);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 15px;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border-color .15s, background .15s;
}
.input-pretty:focus {
  border-color: var(--blue);
  background: white;
}
.input-pretty::placeholder { color: var(--text3); }
.input-pretty-select {
  width: 100%;
  border: 1.5px solid var(--sep);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 15px;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  outline: none;
  appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%236C6C70' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.input-pretty-select:focus { border-color: var(--blue); background-color: white; }

/* ── REMEMBER ME ROW (pretty) ── */
.remember-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 18px;
}
.remember-row-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--text2);
  font-weight: 500;
  cursor: pointer;
  user-select: none;
}

/* ── PRETTY SUBMIT BUTTON ── */
.btn-pretty {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--blue), #5856D6);
  cursor: pointer;
  font-family: var(--font);
  transition: transform .12s, box-shadow .2s;
  box-shadow: 0 4px 14px rgba(0,122,255,.3);
}
.btn-pretty:hover { box-shadow: 0 6px 18px rgba(0,122,255,.4); }
.btn-pretty:active { transform: scale(.98); }
.btn-pretty.green { background: linear-gradient(135deg, var(--green), #30B0C7); box-shadow: 0 4px 14px rgba(52,199,89,.3); }

.auth-footer-pretty {
  text-align: center;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--text3);
}
.auth-footer-pretty a { color: var(--blue); font-weight: 600; text-decoration: none; }
.auth-back-pretty {
  margin-top: 28px;
  font-size: 13px;
  color: var(--text3);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ── NAV LOGO ── */
.nav-logo-link {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}
.nav-logo-img {
  height: 26px;
  width: auto;
  display: block;
}
.nav-admin-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--text3);
  background: var(--grouped);
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: .3px;
  text-transform: uppercase;
}

/* ── PUBLIC HOME — POSH REDESIGN ── */
.posh-hero {
  position: relative;
  background: linear-gradient(165deg, #0A1628 0%, #0F2847 35%, #0E3A5F 65%, #0A4A6B 100%);
  padding: 56px 20px 64px;
  text-align: center;
  overflow: hidden;
}
.posh-hero::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 70%; height: 140%;
  background: radial-gradient(circle, rgba(52,199,200,.18) 0%, transparent 65%);
  pointer-events: none;
}
.posh-hero::after {
  content: '';
  position: absolute;
  bottom: -30%; left: -15%;
  width: 60%; height: 100%;
  background: radial-gradient(circle, rgba(0,122,255,.15) 0%, transparent 65%);
  pointer-events: none;
}
.posh-hero-logo {
  position: relative;
  z-index: 1;
  height: 52px;
  width: auto;
  margin-bottom: 28px;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.25));
}
.posh-hero-tagline {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.65);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.posh-hero h1 {
  position: relative;
  z-index: 1;
  color: white;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -.6px;
  line-height: 1.2;
  max-width: 480px;
  margin: 0 auto;
}
.posh-hero h1 .accent {
  background: linear-gradient(120deg, #34C7C8, #007AFF);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.posh-hero p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.75);
  font-size: 15px;
  margin-top: 12px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}
.posh-hero-btns {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 28px;
  flex-wrap: wrap;
}
.posh-btn {
  padding: 13px 26px;
  border-radius: 26px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform .15s, box-shadow .2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.posh-btn:active { transform: scale(.97); }
.posh-btn.primary {
  background: linear-gradient(135deg, #34C7C8, #007AFF);
  color: white;
  box-shadow: 0 6px 20px rgba(0,122,255,.4);
}
.posh-btn.primary:hover { box-shadow: 0 8px 26px rgba(0,122,255,.5); }
.posh-btn.ghost {
  background: rgba(255,255,255,.1);
  color: white;
  border: 1.5px solid rgba(255,255,255,.3);
  backdrop-filter: blur(8px);
}
.posh-btn.ghost:hover { background: rgba(255,255,255,.18); }

/* ── TRUST STRIP ── */
.trust-strip {
  display: flex;
  justify-content: center;
  gap: 28px;
  padding: 20px 16px;
  flex-wrap: wrap;
  background: white;
  border-bottom: .5px solid var(--sep);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text3);
}
.trust-item i { color: var(--green); font-size: 14px; }

/* ── SECTION TITLE (posh) ── */
.posh-sec-title {
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--text);
  margin: 40px 0 6px;
  padding: 0 16px;
}
.posh-sec-sub {
  text-align: center;
  font-size: 14px;
  color: var(--text3);
  margin-bottom: 24px;
  padding: 0 16px;
}

/* ── FEATURE GRID (posh) ── */
.posh-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  padding: 0 16px;
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .posh-feature-grid { grid-template-columns: repeat(4, 1fr); }
}
.posh-feature-card {
  background: white;
  border-radius: 18px;
  padding: 20px 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .2s;
}
.posh-feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
}
.posh-feature-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  margin-bottom: 12px;
}
.posh-feature-title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
}
.posh-feature-sub {
  font-size: 12.5px;
  color: var(--text3);
  line-height: 1.4;
}

/* ── EVENTS SECTION (posh) ── */
.posh-events-wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }
.posh-event-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: white;
  border-radius: 16px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--text);
  transition: transform .15s, box-shadow .15s;
}
.posh-event-card:hover {
  transform: translateX(2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  color: var(--text);
}
.posh-event-icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, #34C7C8, #007AFF);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  color: white;
}

/* ── CTA BAND ── */
.posh-cta-band {
  margin: 48px 16px 32px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  background: linear-gradient(135deg, #0F2847, #0A4A6B);
  border-radius: 24px;
  padding: 40px 28px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.posh-cta-band::before {
  content: '';
  position: absolute;
  top: -50%; right: -10%;
  width: 60%; height: 150%;
  background: radial-gradient(circle, rgba(52,199,200,.2) 0%, transparent 60%);
}
.posh-cta-band h2 {
  position: relative; z-index: 1;
  color: white;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.4px;
}
.posh-cta-band p {
  position: relative; z-index: 1;
  color: rgba(255,255,255,.7);
  font-size: 14px;
  margin-top: 8px;
}
.posh-cta-band .posh-btn { margin-top: 20px; }

/* ── POSH FOOTER ── */
.posh-footer {
  text-align: center;
  padding: 28px 16px 40px;
  border-top: .5px solid var(--sep);
  margin-top: 12px;
}
.posh-footer-logo { height: 22px; opacity: .5; margin-bottom: 10px; }
.posh-footer-text { font-size: 12px; color: var(--text3); }

/* ── AUTH PAGE LOGO (replaces emoji icon) ── */
.auth-logo-img-pretty {
  height: 44px;
  width: auto;
  margin: 0 auto 14px;
  display: block;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.12));
}