*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}
.app-header{position: static;z-index:3;display:grid;grid-template-columns:1fr 2fr 1fr;gap:12px;align-items:center;padding:12px 16px;border-bottom:2px solid #e9ecef;background:#fff}
.app-header img{height:144px;width:auto} /* 3x larger logo */
.header-center{display:flex;flex-direction:column;align-items:center;gap:8px}
.header-right{display:flex;justify-content:flex-end}
.app-header input[type='text']{font-size:18px;padding:10px 12px;border:1px solid #d0d7de;border-radius:10px;width:min(520px,100%)}
.app-header input[type='date']{font-size:16px;padding:10px 12px;border:1px solid #d0d7de;border-radius:10px}
.team-logo-upload{display:flex;gap:12px;align-items:center}
#teamLogoPreview{height:40px;width:auto;display:none;border-radius:8px;border:1px solid #e5e7eb;padding:4px;background:#fff}
.file-label{display:inline-block;background:#111;color:#fff;padding:10px 12px;border-radius:10px;text-align:center;cursor:pointer}
.file-label.small{padding:6px 10px;font-size:14px}
.file-label input{display:none}
.container{max-width:1100px;margin:0 auto;padding:16px}
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar button{padding:10px 14px;border:none;border-radius:10px;cursor:pointer;font-weight:600}
.toolbar #addDrillBtn{background:#111;color:#fff}
.toolbar #exportPdfBtn{background:#0d6efd;color:#fff}
.toolbar .ghost{background:#f6f8fa;color:#333;border:1px solid #d0d7de}
.drills-list{display:grid;grid-template-columns:1fr;gap:16px}
.drill-card{border:1px solid #e9ecef;border-radius:12px;padding:14px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.drill-controls{display:flex;gap:6px;justify-content:flex-end;margin-bottom:4px}
.drill-controls button{border:none;background:#f2f4f7;padding:6px 9px;border-radius:8px;cursor:pointer}
.drill-controls .delete{background:#fee2e2}
.drill-meta{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:8px}
.drill-meta label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.drill-meta input{padding:10px 12px;border:1px solid #d0d7de;border-radius:8px}
/* Full-width, larger description box */
.drill-card textarea.drill-desc{width:100%;min-height:180px;resize:vertical}
.drill-media{display:grid;grid-template-columns:1fr 220px;gap:14px;align-items:center}
.image-preview-wrap{position:relative;border:1px dashed #c6cbd1;border-radius:8px;min-height:180px;display:flex;justify-content:center;align-items:center;overflow:hidden}
.image-preview-wrap img{max-width:100%;max-height:360px;display:none}
.image-preview-wrap .placeholder{position:absolute;color:#94a3b8;text-align:center;font-size:13px;letter-spacing:.2px}
.app-footer{padding:40px 16px;text-align:center;color:#6b7280;border-top:2px solid #e9ecef;}
/* A2HS prompt */
.a2hs{margin:8px 0}
.a2hs-card{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid #e5e7eb;border-radius:12px;padding:10px 12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.a2hs-text{display:flex;flex-direction:column;gap:2px}
.a2hs-text strong{font-size:14px}
.a2hs-text span{font-size:12px;color:#6b7280}
.a2hs-actions button{padding:8px 12px;border:none;border-radius:10px;cursor:pointer;font-weight:600}
#a2hsInstallBtn{background:#0d6efd;color:#fff}
#a2hsDismissBtn.ghost{background:#f6f8fa;color:#333;border:1px solid #d0d7de}
.ios-hint{margin-top:8px;font-size:12px;color:#6b7280}
@media (min-width:900px){.drill-media{grid-template-columns:1.5fr 260px}}
@media (max-width:640px){.app-header{grid-template-columns:1fr;gap:8px}.header-right{justify-content:flex-start}.drill-meta{grid-template-columns:1fr}.drill-media{grid-template-columns:1fr}}


/* Saved Drills modal */
.modal-backdrop{position: static;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:1000}
.modal-backdrop.show{display:flex}
.modal{background:#fff;border:1px solid #e5e7eb;border-radius:12px;max-width:680px;width:92%;max-height:82vh;overflow:auto;box-shadow:0 10px 25px rgba(0,0,0,.12)}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #eee;gap:12px}
.modal-header h3{margin:0;font-size:18px}
.modal .content{padding:12px 16px}
.modal-tools{display:flex;gap:8px;align-items:center}
.saved-list{display:flex;flex-direction:column;gap:10px}
.saved-item{display:flex;justify-content:space-between;align-items:flex-start;border:1px solid #e9ecef;border-radius:10px;padding:10px;background:#fff}
.saved-item .meta{max-width:70%}
.saved-item .meta h4{margin:0 0 4px 0;font-size:16px}
.saved-item .meta .desc{font-size:13px;color:#4b5563;white-space:pre-line}
.saved-actions button{margin-left:8px}
.muted{color:#6b7280;font-size:14px}

/* Save button in drill controls */
.drill-controls .save{background:#fff4cc;border:1px solid #f5d266;border-radius:8px;color:#7c5b00;padding:6px 10px;cursor:pointer}
.drill-controls .save:hover{background:#ffe194}


/* Disable input zoom triggers on iOS by ensuring 16px minimum */
input, textarea, select, button { font-size: 16px; }
/* Reduce double-tap zoom triggers on interactive elements */
a, button { touch-action: manipulation; }


/* SEO content block (visible in app, subtle; not used by PDF exporter) */
.seo-content{margin:40px auto 24px auto;max-width:960px;border-top:1px solid #eaeaea;padding-top:20px;color:#374151}
.seo-content .seo-inner{padding:0 12px}
.seo-content h2{font-size:20px;margin:0 0 10px 0;color:#111827}
.seo-content h3{font-size:16px;margin:16px 0 8px 0;color:#111827}
.seo-content p{font-size:14px;line-height:1.6;margin:8px 0}
.seo-content ul{padding-left:18px;margin:8px 0}
.seo-content li{font-size:14px;margin:6px 0}
.seo-content .seo-tags a{font-size:13px;text-decoration:none}
.seo-content details{margin:6px 0}
.seo-content summary{cursor:pointer}
@media (prefers-color-scheme: dark){
  .seo-content{border-top-color:#2a2a2a;color:#d1d5db}
  .seo-content h2,.seo-content h3{color:#fff}
}


/* AdSense container */
.seo-content .ad-wrap{margin:20px 0}


/* AdSense robustness */
.seo-content .ad-wrap{min-height:120px}
.seo-content .adsbygoogle{display:block;width:100%;min-height:90px}


/* === Modal visibility & layout overrides (iOS fix) === */
.modal-backdrop {
  position: fixed; /* ensure overlay sits above page on iOS */
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  position: relative; /* within the fixed backdrop */
  max-width: 720px;
  width: min(92vw, 720px);
  max-height: 80vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.modal .saved-list {
  display: grid;
  gap: 10px;
}
.modal .saved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.modal .saved-title { font-weight: 600; }
.modal .saved-actions button { margin-left: 8px; }


/* === Toast (insert confirmation) === */
.toast{
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  background: rgba(17,24,39,0.96);
  color: #fff;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.3);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-4px);
  pointer-events: auto;
}


/* === Insert Celebration UI === */
.banner{
  position: fixed;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff;
  padding: 12px 18px;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.25);
  font-weight: 600;
  letter-spacing: .2px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 10000;
  transition: top .25s ease, opacity .25s ease;
  opacity: 0;
}
.banner .icon{
  display: inline-flex;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,.2);
  border-radius: 999px;
  font-weight: 700;
}
.banner.show{
  top: 14px;
  opacity: 1;
}
/* Flash highlight for new drill card */
@keyframes flashInsert {
  0% { box-shadow: 0 0 0 rgba(16,185,129,0.0); transform: scale(1.00); }
  20% { box-shadow: 0 0 0 6px rgba(16,185,129,0.25); transform: scale(1.01); }
  60% { box-shadow: 0 0 0 2px rgba(16,185,129,0.18); transform: scale(1.005); }
  100% { box-shadow: 0 0 0 rgba(16,185,129,0.0); transform: scale(1.00); }
}
.flash-insert{
  animation: flashInsert 900ms ease;
  border-radius: 12px;
}


/* === Modal visibility & layout overrides === */
.modal-backdrop {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}
.modal {
  position: relative;
  max-width: 720px;
  width: min(92vw, 720px);
  max-height: 80vh;
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
}
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.modal .saved-list {
  display: grid;
  gap: 10px;
}
.modal .saved-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
}
.modal .saved-title { font-weight: 600; }
.modal .saved-actions button { margin-left: 8px; }

/* Center HockeyApps logo on mobile only */
@media (max-width: 640px) {
  a[href*="hockeyapps.com"] { display: block; text-align: center; }
  #brandLogo { display: block; margin: 12px auto; height: auto; }
}

@media (max-width: 640px) {
  #brandLogo { max-width: 50%; height: auto; }
}