/* Josriri Sports Management — shared styles for the secondary pages
   (account, admin, privacy, terms, child safeguarding).
   Same design language as the homepage: midnight ink, porcelain, electric
   violet, lilac, powder blue, coral. No green or gold. */

:root{
  --ink:#101B2D; --porcelain:#F7F5F0; --violet:#A78BFA; --lilac:#E9E1FF; --powder:#CDEBFA; --coral:#FFB39B; --slate:#657184; --white:#FFFFFF;
  --violet-deep:#6B46D9;
  --ink-soft:#3B485C;
  --on-dark-soft:#C9D1DD;
  --line:#E2DED5; --line-dark:rgba(255,255,255,.14);
  --success:#1F7A52; --error:#B42318; --warn:#8A4B00;
  --font-ui:'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:'DM Serif Display', Georgia, 'Times New Roman', serif;
  --r:6px; --r-lg:10px;
  --shadow:0 1px 2px rgba(16,27,45,.06), 0 8px 24px rgba(16,27,45,.08);
  --focus:0 0 0 2px #fff, 0 0 0 5px #6B46D9;
  --nav-h:72px;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0;}
html{-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }
body{font-family:var(--font-ui); color:var(--ink); background:var(--porcelain); line-height:1.6; font-size:16px; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column;}
main{flex:1;}
img,svg,video{display:block; max-width:100%;}
a{color:var(--violet-deep);}
[hidden]{display:none !important;}
:focus-visible{outline:none; box-shadow:var(--focus); border-radius:3px;}
footer :focus-visible{box-shadow:0 0 0 2px #101B2D, 0 0 0 5px #A78BFA;}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip{position:absolute; left:12px; top:-60px; background:var(--violet); color:var(--ink); padding:10px 16px; font-weight:700; border-radius:var(--r); z-index:200;}
.skip:focus{top:12px;}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px;}
.wrap-narrow{max-width:760px;}
.serif{font-family:var(--font-serif); font-weight:400;}

/* ===== Header ===== */
.site-header{position:sticky; top:0; z-index:100; background:rgba(247,245,240,.97); border-bottom:1px solid var(--line); height:var(--nav-h);}
.site-header .in{max-width:1180px; margin:0 auto; padding:0 24px; height:100%; display:flex; align-items:center; gap:20px;}
.wordmark{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex-shrink:0; line-height:1;}
.wm{font:400 34px/1 var(--font-serif); letter-spacing:.015em;}
.wd{font:700 8.5px/1.45 var(--font-ui); letter-spacing:.26em; text-transform:uppercase; color:#4F5B6D; padding-top:4px;}
.hnav{display:flex; gap:4px; margin-left:auto; align-items:center; flex-wrap:wrap;}
.hnav a, .hnav button.linkbtn{color:var(--ink-soft); text-decoration:none; font:600 14px var(--font-ui); padding:10px 10px; background:none; border:0; cursor:pointer; border-radius:var(--r);}
.hnav a:hover, .hnav button.linkbtn:hover{color:var(--ink);}
.hnav a[aria-current="page"]{color:var(--ink); box-shadow:inset 0 -2px 0 var(--violet); border-radius:0;}
.tag{font:700 11px/1 var(--font-ui); letter-spacing:.18em; text-transform:uppercase; color:var(--violet-deep); padding:6px 10px; background:var(--lilac); border-radius:4px;}
@media (max-width:640px){
  .site-header{height:auto; min-height:var(--nav-h);} .site-header .in{flex-wrap:wrap; padding-top:10px; padding-bottom:10px; gap:6px 12px;}
  .wm{font-size:28px;} .wd{display:none;} .hnav{margin-left:0; width:100%; gap:0;} .hnav a, .hnav button.linkbtn{padding:8px 8px; font-size:13.5px;}
}

/* ===== Buttons ===== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:46px; padding:11px 22px; font:700 15px/1 var(--font-ui);
  border-radius:var(--r); border:1.5px solid transparent; cursor:pointer; text-decoration:none; transition:transform .15s, background-color .15s, border-color .15s, color .15s;}
.btn:active{transform:translateY(1px);}
.btn[disabled]{opacity:.55; cursor:not-allowed;}
.btn-violet{background:var(--violet); color:var(--ink);} .btn-violet:hover:not([disabled]){background:#B9A3FC;}
.btn-ink{background:var(--ink); color:#fff;} .btn-ink:hover:not([disabled]){background:#1B2B45;}
.btn-outline{background:transparent; color:var(--ink); border-color:var(--ink);} .btn-outline:hover:not([disabled]){background:var(--ink); color:#fff;}
.btn-danger{background:transparent; color:var(--error); border-color:var(--error);} .btn-danger:hover:not([disabled]){background:var(--error); color:#fff;}
.btn-sm{min-height:40px; padding:9px 16px; font-size:13.5px;}
.btn-block{width:100%;}

/* ===== Forms ===== */
.field{display:flex; flex-direction:column; gap:6px; margin-bottom:16px;}
.field label,.field .lbl{font-size:13px; font-weight:700;}
.field .hint{font-size:12.5px; color:var(--slate);}
.field input,.field select,.field textarea,select.mini,.toolbar input{width:100%; min-height:46px; padding:10px 14px; font:500 15.5px var(--font-ui); color:var(--ink); background:var(--white); border:1.5px solid #B9B2A3; border-radius:var(--r);}
.field textarea{min-height:100px; resize:vertical;}
select.mini{width:auto; min-height:40px; padding:8px 12px; font-size:14px;}
.field input:focus,.field select:focus,.field textarea:focus,select.mini:focus,.toolbar input:focus{outline:none; border-color:var(--ink); box-shadow:var(--focus);}
.field input[type=file]{padding:9px 12px; min-height:48px;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--error);}
.field .err{display:none; font-size:13px; font-weight:600; color:var(--error);} .field.invalid .err{display:block;}
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:0 16px;}
@media (max-width:560px){ .form-grid{grid-template-columns:1fr;} }
.check{display:flex; gap:12px; align-items:flex-start; font-size:14.5px; margin-bottom:16px;} .check input{width:22px; height:22px; margin-top:2px; accent-color:#101B2D; flex-shrink:0;}
.msg{padding:12px 16px; border-radius:var(--r); font-size:14.5px; font-weight:600; margin-bottom:16px;}
.msg.bad{background:#FDECEA; color:var(--error);} .msg.ok{background:#E3F3EB; color:var(--success);} .msg.info{background:var(--powder); color:var(--ink);}
.msg:empty{display:none;}

/* ===== Page titles ===== */
.page{padding:56px 0 88px;}
.eyebrow{display:flex; align-items:center; gap:12px; font:700 11.5px/1 var(--font-ui); letter-spacing:.2em; text-transform:uppercase; color:var(--violet-deep); margin-bottom:12px;}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--violet);}
h1.title{font:400 clamp(34px,5vw,52px)/1.08 var(--font-serif); letter-spacing:-.005em;}
h1.title em{font-style:italic; color:var(--violet-deep);}
.sub{margin-top:14px; color:var(--ink-soft); font-size:17px; max-width:60ch;}

/* ===== Cards, tabs, pills ===== */
.card{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; margin-bottom:16px; box-shadow:var(--shadow);}
.card h2,.card h3{font:400 24px/1.2 var(--font-serif); margin-bottom:6px;}
.card .meta{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px; color:var(--slate); margin-bottom:16px;}
.row{display:flex; justify-content:space-between; gap:16px; align-items:flex-start; flex-wrap:wrap;}
.row .main{flex:1; min-width:220px;}
.title-sm{font-weight:700; font-size:16px; margin-bottom:2px; overflow-wrap:anywhere;}
.sub-sm{font-size:13.5px; color:var(--slate); margin-bottom:4px; overflow-wrap:anywhere;}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}
.pill{display:inline-block; font:800 10.5px/1 var(--font-ui); padding:5px 8px; border-radius:4px; margin-left:8px; text-transform:uppercase; letter-spacing:.06em; background:var(--lilac); color:#4B2FA8; vertical-align:middle;}
.pill.off{background:#FDECEA; color:var(--error);} .pill.warn{background:#FFE8D9; color:var(--warn);} .pill.ok{background:var(--powder); color:#0B4A63;}
.empty{border:1.5px dashed #B9B2A3; border-radius:var(--r-lg); padding:36px 24px; text-align:center; color:var(--ink-soft); background:rgba(255,255,255,.6);}
.empty b{color:var(--ink); display:block; margin-bottom:6px; font:400 22px var(--font-serif);}
.tabs{display:flex; gap:4px; margin:28px 0 24px; border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:thin;}
.tab{padding:12px 16px; font:700 14px var(--font-ui); color:var(--slate); cursor:pointer; background:none; border:0; border-bottom:3px solid transparent; margin-bottom:-1px; white-space:nowrap;}
.tab:hover{color:var(--ink);} .tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--violet);}
.tab .n{display:inline-block; min-width:20px; padding:2px 6px; margin-left:6px; border-radius:10px; background:var(--coral); color:var(--ink); font-size:11px; font-weight:800; text-align:center;}
.panel{display:none;} .panel.active{display:block;}
.stats{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:18px;}
.stats div{background:var(--white); border:1px solid var(--line); border-radius:var(--r-lg); padding:12px 18px; min-width:120px;}
.stats b{display:block; font:400 30px/1.1 var(--font-serif); color:var(--violet-deep);}
.stats span{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--slate);}
.toolbar{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;} .toolbar input{flex:1; min-width:200px;}
.thumb{width:96px; height:96px; border-radius:var(--r); object-fit:cover; background:var(--lilac); border:1px solid var(--line);}
.clip{width:100%; max-width:360px; border-radius:var(--r); background:#000; margin-top:8px; aspect-ratio:16/9;}
.progress{height:8px; border-radius:4px; background:var(--lilac); overflow:hidden; margin-top:10px;} .progress i{display:block; height:100%; width:0; background:var(--violet-deep); transition:width .2s;}
.consent-row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:18px; padding:14px 16px; border-radius:var(--r); background:var(--powder); font-weight:600; font-size:14.5px;}
.consent-row.inactive{background:#FFE8D9;}
.section-h{font:400 26px var(--font-serif); margin:34px 0 14px;}
.note{font-size:14px; color:var(--ink-soft);}

/* ===== Auth box ===== */
.auth{max-width:440px; margin:0 auto;}
.seg{display:flex; background:var(--lilac); border-radius:var(--r); padding:4px; margin-bottom:22px;}
.seg button{flex:1; min-height:42px; border:0; background:none; font:700 14px var(--font-ui); color:var(--ink-soft); border-radius:4px; cursor:pointer;}
.seg button[aria-selected="true"]{background:var(--white); color:var(--ink); box-shadow:0 1px 2px rgba(16,27,45,.12);}

/* ===== Legal / long-form documents ===== */
.doc{max-width:720px;}
.doc h2{font:400 28px/1.2 var(--font-serif); margin:40px 0 12px;}
.doc p,.doc li{font-size:16.5px; color:var(--ink-soft); line-height:1.7;}
.doc p{margin-bottom:14px;}
.doc ul{margin:8px 0 18px 22px;} .doc li{margin-bottom:8px;}
.doc strong{color:var(--ink);}
.updated{font-size:13.5px; color:var(--slate); margin-top:12px;}
.notice{background:var(--lilac); border-left:4px solid var(--violet-deep); padding:16px 20px; border-radius:0 var(--r) var(--r) 0; font-size:15px; color:var(--ink); margin:28px 0 8px;}
.notice b{display:block; margin-bottom:4px;}

/* ===== Footer ===== */
footer.site-footer{background:#0B1424; color:var(--on-dark-soft); padding:56px 0 24px; margin-top:auto;}
footer .inner{max-width:1180px; margin:0 auto; padding:0 24px;}
.foot-grid{display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:32px;} .foot-grid > div{min-width:0;}
footer .wordmark{color:#fff;} footer .wd{color:var(--on-dark-soft);}
footer h4{color:#fff; font:700 12px var(--font-ui); letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px;}
footer ul{list-style:none; display:grid; gap:8px;} footer a{color:var(--on-dark-soft); text-decoration:none; font-size:14.5px; overflow-wrap:anywhere;} footer a:hover{color:var(--violet);}
footer .about{font-size:14.5px; margin-top:12px; max-width:36ch;}
.foot-bottom{margin-top:40px; padding-top:20px; border-top:1px solid var(--line-dark); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:13px;}
@media (max-width:900px){ .foot-grid{grid-template-columns:1fr 1fr;} .foot-grid > div:first-child{grid-column:1/-1;} } @media (max-width:520px){ .foot-grid{grid-template-columns:1fr;} }

/* ===== Toast ===== */
.toast{position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); background:var(--ink); color:#fff; padding:14px 20px; border-radius:var(--r); border-left:4px solid var(--violet); font-weight:600; font-size:14.5px; z-index:300; opacity:0; pointer-events:none; transition:all .25s; max-width:92vw;}
.toast.show{opacity:1; transform:translate(-50%,0);}