/* SAI-GYM application sites: approved shared visual system (2026-11-12).
   Presentation only: do not alter form data, validation, API, or approval. */
body[data-ui="join"],body[data-ui="trial"],body[data-ui="withdraw"]{
  --sg-navy:#0b2e59; --sg-ink:#102c4d; --sg-muted:#556476;
  --sg-line:#d7e0e9; --sg-paper:#f4f7fb; --sg-radius:13px;
  --sg-blue:#136db8; --sg-green:#078b50; --sg-pink:#c72870;
  --sg-page-width:760px; --sg-page-gutter:14px; --sg-page-top:16px; --sg-page-bottom:56px;
  background:var(--sg-paper);color:var(--sg-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif;
}
body[data-ui="join"]{--sg-accent:var(--sg-blue);--sg-soft:#e9f2fd;--sg-wave:rgba(19,109,184,.25)}
body[data-ui="trial"]{--sg-accent:var(--sg-green);--sg-soft:#e6f7ef;--sg-wave:rgba(7,139,80,.25)}
body[data-ui="withdraw"]{--sg-accent:var(--sg-pink);--sg-soft:#fce9f3;--sg-wave:rgba(199,40,112,.25)}
/* Shared navy brand area; no fake navigation buttons. */
body[data-ui="join"] .top,
body[data-ui="trial"] .top,
body[data-ui="withdraw"] .withdraw-page>header.sg-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 18px;min-height:68px;background:var(--sg-navy)!important;
  border:0;border-radius:13px 13px 0 0;color:#fff!important;
}
body[data-ui="join"] .top .brand,body[data-ui="trial"] .top .logo,
body[data-ui="withdraw"] .sg-top .sg-wordmark{color:#fff!important;font-size:22px;font-weight:900;line-height:1.05;letter-spacing:.01em}
body[data-ui="join"] .top .logo{width:56px;height:39px;object-fit:contain;filter:brightness(0) invert(1)}
body[data-ui="trial"] .top{margin:var(--sg-page-top) auto 0}
body[data-ui="trial"]>.sg-application-hero{margin:0 auto}
body[data-ui="trial"] .top .logo{font-size:22px}
body[data-ui="join"] main,body[data-ui="withdraw"] .withdraw-page{
  max-width:var(--sg-page-width);padding:var(--sg-page-top) var(--sg-page-gutter) var(--sg-page-bottom)}
body[data-ui="withdraw"] .sg-top a{text-decoration:none;color:#fff!important}
body[data-ui="withdraw"] .sg-top span{color:#d6e6f7}
/* Page-specific symbol, one consistent frame. */
.sg-application-hero{--sg-hero-pad:20px;position:relative;overflow:hidden;display:flex;align-items:center;gap:18px;
  min-height:125px;padding:22px var(--sg-hero-pad);background:linear-gradient(105deg,#fff 5%,var(--sg-soft) 100%);
  border-bottom:1px solid var(--sg-line);border-radius:0 0 11px 11px;isolation:isolate;}
.sg-application-hero::before,.sg-application-hero::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;}
.sg-application-hero::before{width:260px;height:135px;right:-55px;bottom:-98px;background:var(--sg-wave);transform:rotate(-18deg)}
.sg-application-hero::after{width:300px;height:130px;right:-90px;bottom:-108px;border:16px solid var(--sg-wave);transform:rotate(-12deg)}
.sg-application-mark{flex:none;width:73px;height:73px;border-radius:50%;display:grid;place-items:center;
  color:#fff;background:var(--sg-accent);font-size:42px;font-weight:900;line-height:1;box-shadow:0 6px 18px rgba(8,34,64,.12)}
.sg-application-title{margin:0!important;color:var(--sg-ink)!important;font-size:clamp(23px,4.5vw,32px)!important;line-height:1.3;letter-spacing:0!important;font-weight:900}
.sg-application-desc{margin:6px 0 0!important;color:#42576b!important;font-size:13px!important;line-height:1.6!important}
/* Consistent surfaces, labels, fields and taps. */
body[data-ui="join"] .card,body[data-ui="trial"] main.card,
body[data-ui="withdraw"] .withdraw-page>section,
body[data-ui="withdraw"] .withdraw-page>section>form{
  max-width:100%;}
body[data-ui="join"] .card,body[data-ui="trial"] main.card,
body[data-ui="withdraw"] .withdraw-page>section:not(.sg-application-hero):not([hidden]){
  border:1px solid var(--sg-line);border-radius:15px;background:#fff;
  box-shadow:0 4px 18px rgba(11,46,89,.055)}
body[data-ui="join"] .card{margin:14px 0;padding:20px}
body[data-ui="join"] #family-entry{margin-top:16px}
body[data-ui="join"] #family-members>.card{margin-top:0}

body[data-ui="trial"] main.card{margin:16px auto 28px;padding:22px}
body[data-ui="trial"] > :is(.top,.sg-application-hero,main.card){
  width:calc(100% - 2 * var(--sg-page-gutter));
  max-width:calc(var(--sg-page-width) - 2 * var(--sg-page-gutter))}
body[data-ui="withdraw"] .withdraw-page>section:not(.sg-application-hero):not([hidden]){margin:16px 0;padding:22px}
body[data-ui="join"] .card h2,body[data-ui="trial"] .section,
body[data-ui="withdraw"] .withdraw-page h2{
  padding:9px 12px;border-radius:10px;background:#e8eff7;
  color:var(--sg-ink);font-size:17px;font-weight:850;line-height:1.5}
body[data-ui="join"] .field label,body[data-ui="join"] .label,
body[data-ui="trial"] label,body[data-ui="withdraw"] #pause-form>label,
body[data-ui="withdraw"] #withdraw-form>label,
body[data-ui="withdraw"] #pause-form legend,body[data-ui="withdraw"] #withdraw-form legend{
  color:var(--sg-ink);font-weight:750;font-size:14px;line-height:1.55}
body[data-ui="join"] .field :is(input,select,textarea),
body[data-ui="join"] .join-name-pair input,
body[data-ui="trial"] :is(input:not([type=checkbox]):not([type=radio]),select,textarea),
body[data-ui="withdraw"] :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  box-sizing:border-box;max-width:100%;min-height:46px;background:#fff;
  border:1px solid #c8d4e0;border-radius:10px;color:#162d48;font-size:16px}
body[data-ui="join"] :is(input,select,textarea):focus-visible,
body[data-ui="trial"] :is(input,select,textarea):focus-visible,
body[data-ui="withdraw"] :is(input,select,textarea):focus-visible,
body[data-ui="join"] button:focus-visible,body[data-ui="trial"] button:focus-visible,
body[data-ui="withdraw"] button:focus-visible{outline:3px solid var(--sg-accent)!important;outline-offset:2px}
body[data-ui="join"] .required,body[data-ui="trial"] .req,
body[data-ui="withdraw"] #pause-form b,body[data-ui="withdraw"] #withdraw-form b{
  display:inline-block;padding:2px 6px;margin-left:6px;color:#fff;font-size:11px;font-weight:800;
  background:#d62e3b;border-radius:5px;line-height:1.35}
body[data-ui="join"] .button,body[data-ui="trial"] .submit,
body[data-ui="withdraw"] #withdraw-form button:not(.procedure-back),
body[data-ui="withdraw"] #pause-form button:not(.procedure-back),
body[data-ui="withdraw"] #choose-pause,body[data-ui="withdraw"] #choose-withdraw{
  border:0;border-radius:12px;background:var(--sg-accent)!important;color:#fff!important;
  min-height:50px;font-size:16px;font-weight:850;box-shadow:0 3px 0 rgba(0,0,0,.12)}
body[data-ui="withdraw"] .procedure-options button{min-height:62px}
body[data-ui="trial"] .submit{background:#087f4a!important}
body[data-ui="withdraw"] .procedure-options{gap:12px}
body[data-ui="trial"] .option input:checked+span,body[data-ui="trial"] .slot input:checked+span,
body[data-ui="trial"] .session-card input:checked+span{background:var(--sg-soft);border-color:var(--sg-accent);color:var(--sg-ink)}
body[data-ui="withdraw"] aside,body[data-ui="withdraw"] #pause-confirm,
body[data-ui="withdraw"] #withdraw-confirm{border-color:var(--sg-line);background:#fff}
body[data-ui="withdraw"] aside{border-left:4px solid var(--sg-accent)}
body[data-ui="withdraw"] .eyebrow{color:var(--sg-muted);letter-spacing:.1em}
body[data-ui="withdraw"] .note,body[data-ui="join"] .hint,
body[data-ui="trial"] .hint{line-height:1.65}
body[data-ui="trial"] .intro{color:var(--sg-muted)}
body[data-ui="trial"] footer{color:var(--sg-muted)}
@media(max-width:480px){
 body[data-ui="join"],body[data-ui="trial"],body[data-ui="withdraw"]{
  --sg-page-gutter:11px; --sg-page-top:0px; --sg-page-bottom:36px}
 .sg-application-hero{gap:12px;padding:17px 13px;min-height:106px}
 .sg-application-mark{width:60px;height:60px;font-size:36px}
 .sg-application-title{font-size:24px!important}
 .sg-application-desc{font-size:12px!important}
 body[data-ui="join"] .top,body[data-ui="trial"] .top,body[data-ui="withdraw"] .withdraw-page>header.sg-top{border-radius:0}
 body[data-ui="trial"] main.card{padding:16px;margin:12px auto 22px}
 body[data-ui="join"] #family-entry{margin-top:12px}
 body[data-ui="join"] .card,body[data-ui="withdraw"] .withdraw-page>section:not(.sg-application-hero):not([hidden]){padding:16px}
 body[data-ui="withdraw"] .procedure-options{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){.sg-application-hero{scroll-behavior:auto}}