/* SnapHandicap Product Styling (greens/white/black) */
:root{
  --bg:#ffffff;
  --ink:#101828;
  --muted:#667085;
  --stroke:#E6EAE7;
  --green:#0B7A41;          /* primary green */
  --green-100:#DFF5E7;      /* light fill */
  --green-50:#F2FBF6;       /* very light */
  --black:#0b0b0b;
  --radius:16px;
  --shadow:0 1px 2px rgba(16,24,40,0.06), 0 8px 24px rgba(16,24,40,0.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Inter, Roboto, Helvetica, Arial;
  background:var(--bg); color:var(--ink);
}

.wrap{max-width:960px; margin:0 auto; padding:0 16px}

.site-header{
  border-bottom:1px solid var(--stroke);
  background:linear-gradient(180deg, var(--green-50), #fff);
}
.logo{height:38px; display:block; padding:12px 0}

.hero{padding:18px 0 8px}
.hero h1{margin:0 0 6px; font-size:28px; line-height:1.2}
.hero .accent{color:var(--green)}
.hero .sub{margin:0; color:var(--muted)}

.panel{
  background:#fff; border:1px solid var(--stroke); border-radius:var(--radius); padding:16px; margin:16px 0;
  box-shadow:var(--shadow);
}

.uploader{
  border:2px dashed var(--stroke); border-radius:14px; padding:16px; cursor:pointer; background:#fff;
}
.uploader input{display:none}
.uploader-inner{display:flex; align-items:center; gap:12px}
.uploader-icon{font-size:24px}
.uploader-title{font-weight:700}
.uploader-hint{font-size:12px; color:var(--muted)}

.preview{display:none; width:100%; margin-top:12px; border-radius:12px; border:1px solid var(--stroke)}

.status{color:var(--muted); font-size:14px; margin-top:8px}

.actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.btn{
  padding:10px 14px; border:1px solid var(--stroke); border-radius:12px; background:#f8fafc; cursor:pointer; font-size:15px
}
.btn.primary{background:var(--green); color:#fff; border:none}
.btn.link{background:transparent; border:none; text-decoration:underline; color:var(--muted)}
.btn.icon{background:#fff; border:1px solid var(--stroke); border-radius:10px; padding:6px 10px}

.edit{display:none; margin-top:12px}
.grid{display:grid; grid-template-columns:repeat(9,1fr); gap:8px}
.grid .cell{display:flex; flex-direction:column; gap:6px}
.grid input{padding:8px; border:1px solid var(--stroke); border-radius:10px; font-size:14px}

.badge{
  display:inline-block; padding:12px 16px; border-radius:999px; border:1px solid var(--stroke);
  background:var(--green-100); color:var(--black); font-weight:800; letter-spacing:0.2px
}

.note{color:var(--muted); font-size:12px; margin-top:8px}

table{width:100%; border-collapse:collapse; margin-top:10px}
th,td{font-size:14px; padding:10px; border-bottom:1px solid var(--stroke); text-align:left}
tbody tr:hover{background:var(--green-50)}

.site-footer{border-top:1px solid var(--stroke); margin-top:28px; background:#fff}
.footer-row{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand-mini{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:700}
.brand-mini .dot{width:8px; height:8px; background:var(--green); border-radius:50%}
.footer-links a{color:var(--muted); text-decoration:none; margin-left:12px}
.footer-links a:hover{text-decoration:underline}

/* Modal */
.modal{position:fixed; inset:0; background:rgba(0,0,0,0.45); display:none; align-items:center; justify-content:center; padding:20px}
.modal-card{background:#fff; width:min(720px, 100%); border-radius:16px; border:1px solid var(--stroke); box-shadow:var(--shadow)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--stroke)}
.modal-body{padding:14px 16px; color:var(--ink)}
.modal-foot{padding:14px 16px; border-top:1px solid var(--stroke); display:flex; justify-content:flex-end; gap:8px}

.logo-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:16px 0;
}
.logo{
  height:60px; /* bigger */
}