@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

:root{
  /* --green: #0f6b23; */
  --green: #006600;
  --red: #e0524b;
  --white: #ffffff;
  --max-width: 760px;
  --radius: 10px;
  --gap: 18px;
  --greenText: #214b2a;
  --greyText: #6b7a6f;
}

/* body { 
   opacity: 0;
   transition: opacity .5s;
} */

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:var(--white);color:#111}
.container{max-width:var(--max-width);margin:0 auto;padding:18px}

.site-header{background:var(--green);color:var(--white);padding:0px 0;position:sticky;top:0}
.header-inner{display:flex;align-items:center;gap:12px}
.logo{width:36px;height:36px;object-fit:contain;border-radius:6px}
.site-title{font-size:16px;margin:0;font-weight:600}

.main-content{padding-top:48px}

.hero-actions{display:flex;flex-direction:column;gap:14px;align-items:stretch;padding:0 10px}
.btn{display:inline-block;text-align:center;padding:14px 18px;border-radius:12px;text-decoration:none;font-weight:600;color:var(--white);border:0;cursor:pointer;width:100%}
.btn-green{background:var(--green)}
.btn-red{background:var(--red)}
.btn-back{width:36px;height:36px;padding:0;border-width:0;margin:0;gap:0;object-fit:contain;background: transparent;color:var(--white);cursor:pointer;}

.btn:active{opacity:0.95}

form label{display:block;margin-bottom:12px;font-size:14px}
input,textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:15px}

@media(min-width:640px){
  .hero-actions{max-width:420px;margin:40px auto}
  .site-title{font-size:18px}
}

.login-form { padding: 8px 10px; max-width:420px; margin:8px auto 0; }
.field { margin-bottom:18px; }
.field label { margin-bottom:6px; color:#6b7a6f; font-size:13px; }
.input-underline { border:0; border-bottom:2px solid rgba(15,107,35,0.25); border-radius:0; padding:8px 6px; font-size:16px; }
.input-underline:focus { outline:none; border-bottom-color:var(--green); }
.login-btn { margin-top:6px; border-radius:10px; padding:12px 14px; font-weight:700; letter-spacing:1px; }
.small-divider { height:1px; background:#eee; margin-top:0; }

.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:2000; }
.modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,0.35); }
.modal-panel { position:relative; background:#fff; border-radius:12px; padding:18px; width: min(92%, 420px); max-height: calc(100vh - 240px); box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:2; overflow: auto; transition: transform .18s ease; align-self: flex-start; margin-top: 80px;}
.modal[hidden] { display: none !important; }

.search-row{display:flex;gap:8px;align-items:center;margin:12px 0}
.search-input{flex:1;padding:8px 10px;border-radius:8px;border:1px solid #ddd}
.add-btn{width:36px;height:36px;border-radius:8px;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer}
.club-list{margin-top:8px;max-height:60vh;overflow:auto;padding:6px}
.club-item{display:flex;gap:12px;align-items:center;padding:10px;border-radius:8px;cursor:pointer}
.club-item:hover{background:#f6f8f6}
/* .club-logo{width:44px;height:44px;border-radius:8px;object-fit:cover;background:#f0f0f0;flex:0 0 44px} */
.club-meta{flex:1}
.club-name{font-weight:700;color:var(--greenText);margin:0 0 4px 0}
.club-city{font-size:13px;color:var(--greyText);margin:0}
.empty{padding:18px;color:#666;text-align:center}

/* Next match preview */
.next-match-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 12px;
  margin: 0;
  border: 1px solid #eeeeee;
  border-radius: var(--radius);
  background: #fafafa;
  text-align: center;
}

.next-match-team {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.next-match-team-name {
  overflow: hidden;
  max-width: 100%;
  color: var(--greenText);
  font-size: 14px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.next-match-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: 6px;
}

.next-match-vs {
  flex: 0 0 auto;
  color: var(--greyText);
  font-size: 13px;
  font-weight: 600;
}