/* SG VISION shared premium skin */
:root{--sg-gold-1:#fff2bd;--sg-gold-2:#e7c36a;--sg-gold-3:#b77d26;--sg-gold-4:#f1d78d;--sg-silver:#d7dde5}
html,body,button,input,select,textarea{font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif!important;font-feature-settings:"palt" 1;font-kerning:normal}
body{font-weight:400;letter-spacing:.012em}
h1,h2,h3,.brand,.brand-premium,.section-title,.page-title{font-family:"Hiragino Sans","Yu Gothic UI","Meiryo",sans-serif!important;font-weight:600!important;letter-spacing:.045em!important}
.premium-gold,.sg-gold-text{background:linear-gradient(180deg,var(--sg-gold-1) 0%,var(--sg-gold-2) 36%,var(--sg-gold-3) 70%,var(--sg-gold-4) 100%);-webkit-background-clip:text;background-clip:text;color:transparent!important}
.sg-nav-icon,.sg-menu-icon,.sg-inline-icon{display:inline-block;object-fit:contain;flex:0 0 auto;vertical-align:middle}
.sg-nav-icon{width:34px;height:34px;margin-bottom:3px}
.sg-menu-icon{width:32px;height:32px;margin-right:7px}
.sg-inline-icon{width:27px;height:27px;margin-right:6px}
.bottomnav a>img.sg-nav-icon{width:34px!important;height:34px!important}
.bottomnav a{font-weight:500!important;letter-spacing:.025em}
.nav a,.navlink,.quick-card,.menu-item{font-weight:500!important;letter-spacing:.02em}
.brand,.brand-premium{font-style:normal!important;font-weight:650!important;letter-spacing:.12em!important}
@media(max-width:640px){.sg-nav-icon{width:31px;height:31px}.sg-menu-icon{width:29px;height:29px}}


/* ===== SG VISION v3 unified premium surface ===== */
:root{
  --sg-bg:#03162b;--sg-bg-2:#041a31;--sg-panel:#071f38;--sg-panel-2:#0a2948;
  --sg-line:rgba(255,255,255,.10);--sg-text:#eef7ff;--sg-muted:#b6c7d6;
}
html,body,button,input,select,textarea{
  font-family:"BIZ UDPGothic","Noto Sans JP","Hiragino Sans","Meiryo",sans-serif!important;
  font-weight:500!important;letter-spacing:.035em;
}
body.sgvision-premium{background:var(--sg-bg)!important;color:var(--sg-text)}
body.sgvision-premium>.site,
body.sgvision-premium>.page,
body.sgvision-premium>.content,
body.sgvision-premium>main,
body.sgvision-premium .site,
body.sgvision-premium main.page{
  background:linear-gradient(180deg,var(--sg-bg-2),var(--sg-bg))!important;
}
body.sgvision-premium h1,body.sgvision-premium h2,body.sgvision-premium h3,
body.sgvision-premium .page-title,body.sgvision-premium .section-title,
body.sgvision-premium .brand{font-weight:700!important;letter-spacing:.055em!important}
.sg-brand{display:inline-flex!important;align-items:center;gap:10px;text-decoration:none!important;white-space:nowrap}
.sg-brandmark{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 2px 8px rgba(226,183,83,.15))}
.sg-brand-text,.brand.sg-brand .sg-brand-text{background:linear-gradient(180deg,#fff4c9,#e4bc5c 45%,#a96e18 78%,#f0d58c);-webkit-background-clip:text;background-clip:text;color:transparent!important;font-weight:750!important;letter-spacing:.13em!important}
.sg-nav-icon{width:39px!important;height:39px!important}
.sg-menu-icon{width:37px!important;height:37px!important}
.sg-inline-icon{width:29px!important;height:29px!important}
.sg-section-icon{width:39px!important;height:39px!important;vertical-align:middle;margin-right:9px}
.sg-mini-action{width:18px;height:18px;vertical-align:-4px;margin-right:5px}
.sg-balance-icon{width:34px;height:34px;vertical-align:-9px;margin-right:7px}
body.sgvision-premium .mainnav,body.sgvision-premium .topbar,
body.sgvision-premium .bottomnav,body.sgvision-premium .bottom{
  background:rgba(2,17,33,.97)!important;border-color:var(--sg-line)!important;color:var(--sg-text)!important;
}
body.sgvision-premium .mainnav a.active,body.sgvision-premium .bottomnav .active,
body.sgvision-premium .bottom a.active{color:#ecd087!important;border-bottom-color:#c99d43!important}
/* outer frames: same family as TOP */
body.sgvision-premium .page-head,body.sgvision-premium .page-title,
body.sgvision-premium .hero:not(.hero-result),body.sgvision-premium .content,
body.sgvision-premium .section,body.sgvision-premium .mission-card,
body.sgvision-premium .quick-card,body.sgvision-premium .venue-block,
body.sgvision-premium .notice-card,body.sgvision-premium .support-card,
body.sgvision-premium .profile-card{
  border-color:var(--sg-line)!important;
}
body.sgvision-premium .page-head,body.sgvision-premium .page-title{
  background:linear-gradient(180deg,#071f38,#051a2f)!important;color:var(--sg-text)!important;
}
/* predictions: dark outer frame, cards remain readable */
body.sgvision-premium .venue-section,body.sgvision-premium .venue-wrap,
body.sgvision-premium .venue-block{
  background:linear-gradient(180deg,rgba(9,39,68,.96),rgba(5,27,49,.98))!important;
  border:1px solid var(--sg-line)!important;box-shadow:0 14px 34px rgba(0,0,0,.20)!important;
}
body.sgvision-premium .venue-head{background:rgba(255,255,255,.045)!important;color:var(--sg-text)!important;border-color:var(--sg-line)!important}
body.sgvision-premium .venue-icon{display:flex;align-items:center;justify-content:center}
/* prediction/history page premium shell */
body.sgvision-premium .section-head,body.sgvision-premium .today-panel,body.sgvision-premium .past-wrap{
  border-color:var(--sg-line)!important;
}
body.sgvision-premium .section-icon{background:rgba(255,255,255,.055)!important;border:1px solid var(--sg-line)!important;color:#ecd087!important}
/* results: remove emoji-era boxy heading feel */
body.sgvision-premium .section-title{display:flex;align-items:center;gap:10px}
body.sgvision-premium .section-title>span:first-child{display:inline-flex;align-items:center;gap:7px;font-weight:700!important;letter-spacing:.055em}
/* coin page */
body.sgvision-premium .balance,body.sgvision-premium .coins,body.sgvision-premium .coin-value,
body.sgvision-premium .balance-big strong,body.sgvision-premium .rank-chip{display:flex;align-items:center;gap:6px}
body.sgvision-premium .daily-icon{background:rgba(255,255,255,.06)!important;border:1px solid var(--sg-line);box-shadow:none!important}
body.sgvision-premium .modal{align-items:center!important;justify-content:center!important;padding:18px!important}
body.sgvision-premium .modal .sheet{border-radius:22px!important;max-height:88vh;overflow:auto;margin:0!important}
body.sgvision-premium .payment button{display:flex;align-items:center;justify-content:center;gap:7px}
/* mypage icon blocks */
body.sgvision-premium .quick-icon{display:flex!important;align-items:center;justify-content:center!important}
body.sgvision-premium .top-icon{display:flex;align-items:center;justify-content:center}
body.sgvision-premium .avatar-hint{display:flex!important;align-items:center;justify-content:center;gap:4px}
/* card surfaces move toward TOP navy while keeping contrast */
body.sgvision-premium .quick-card,body.sgvision-premium .mission-card,
body.sgvision-premium .guide-card,body.sgvision-premium .daily-wrap{
  background:linear-gradient(180deg,rgba(10,42,73,.94),rgba(6,29,52,.98))!important;color:var(--sg-text)!important;
}
body.sgvision-premium .quick-card span,body.sgvision-premium .guide-card p,
body.sgvision-premium .mission-card small{color:var(--sg-muted)!important}
@media(max-width:760px){
 .sg-brandmark{width:34px;height:34px}.sg-brand{gap:7px}.sg-brand-text{letter-spacing:.10em!important}
 .sg-nav-icon{width:35px!important;height:35px!important}.sg-menu-icon{width:33px!important;height:33px!important}.sg-inline-icon{width:27px!important;height:27px!important}
 body.sgvision-premium .modal{align-items:center!important;padding:12px!important}
 body.sgvision-premium .modal .sheet{border-radius:20px!important;width:min(520px,100%)!important}
}

/* mypage avatar/icon polish */
.sg-avatar-placeholder-icon{width:56%;height:56%;object-fit:contain;opacity:.9}.sg-avatar-camera-icon{width:18px;height:18px;display:block}.mission-coin-reward{display:flex!important;align-items:center;justify-content:flex-end;gap:3px}.bottom-nav a{font-weight:600!important;letter-spacing:.035em!important}.bottom-nav img.sg-nav-icon{width:35px!important;height:35px!important}.quick-card{font-weight:600!important;letter-spacing:.04em!important}.quick-card .sg-menu-icon{margin:0!important}.brand.sg-brand{color:inherit!important}


/* ===== SG VISION final brand/logo + page consistency fix 2026-08-11 ===== */
:root{
  --sg-bg:#03162b;
  --sg-bg-deep:#021121;
  --sg-bg-mid:#061d35;
  --sg-panel:#08243f;
  --sg-panel-2:#0a2b4b;
  --sg-gold:#e6bd5a;
  --sg-gold-light:#ffe596;
  --sg-text:#eff7ff;
  --sg-muted:#aebfd0;
  --sg-line:rgba(231,195,106,.18);
}
html,body,button,input,select,textarea{
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic","Meiryo",sans-serif!important;
  font-weight:400!important;
  letter-spacing:.018em!important;
}
body.sgvision-premium,
body.sgvision-premium .site,
body.sgvision-premium .app,
body.sgvision-premium main,
body.sgvision-premium .page,
body.sgvision-premium .content,
body.sgvision-premium .support-wrap{
  background:linear-gradient(180deg,var(--sg-bg-mid) 0%,var(--sg-bg) 45%,var(--sg-bg-deep) 100%)!important;
  color:var(--sg-text)!important;
}
body.sgvision-premium{min-height:100vh!important;background-color:var(--sg-bg)!important}
body.sgvision-premium .site,body.sgvision-premium .app{box-shadow:none!important}

/* one-piece user supplied logo: never stack icon/text */
.sg-brand{display:flex!important;align-items:center!important;justify-content:flex-start!important;line-height:1!important;min-width:0!important;gap:0!important}
.sg-brand-logo{display:block!important;width:235px!important;height:48px!important;object-fit:contain!important;object-position:left center!important;max-width:42vw!important;filter:drop-shadow(0 3px 8px rgba(230,189,90,.13))}
body.sgvision-premium .topbar{display:flex!important;align-items:center!important;min-height:64px!important;padding-top:7px!important;padding-bottom:7px!important;background:rgba(2,17,33,.98)!important;border-bottom:1px solid var(--sg-line)!important}
body.sgvision-premium .header-actions,body.sgvision-premium .top-actions,body.sgvision-premium .actions{margin-left:auto!important}

/* side / outer page backgrounds: race and support no grey/white gutters */
body.sgvision-premium .support-wrap,
body.sgvision-premium .race-wrap,
body.sgvision-premium .race-list,
body.sgvision-premium .page-wrap,
body.sgvision-premium .venue-wrap,
body.sgvision-premium .result-wrap{background:transparent!important}
body.sgvision-premium .date-switch,
body.sgvision-premium .filter-tabs,
body.sgvision-premium .tabs,
body.sgvision-premium .support-wrap .intro{
  background:rgba(6,29,53,.94)!important;color:var(--sg-text)!important;border-color:var(--sg-line)!important;
}
body.sgvision-premium .mainnav,
body.sgvision-premium .bottomnav,
body.sgvision-premium .bottom-nav,
body.sgvision-premium .menu,
body.sgvision-premium .menu-panel,
body.sgvision-premium .side-menu,
body.sgvision-premium .drawer{
  background:rgba(2,17,33,.985)!important;color:var(--sg-text)!important;border-color:var(--sg-line)!important;
}
body.sgvision-premium .mainnav a,body.sgvision-premium .bottomnav a,body.sgvision-premium .bottom-nav a{color:#c8d5e1!important}
body.sgvision-premium .mainnav a.active,body.sgvision-premium .bottomnav .active,body.sgvision-premium .bottom-nav .active{color:var(--sg-gold-light)!important;border-color:var(--sg-gold)!important}

/* TOP-like dark surfaces throughout member pages */
body.sgvision-premium .mission-card,
body.sgvision-premium .quick-card,
body.sgvision-premium .settings-card,
body.sgvision-premium .support-card,
body.sgvision-premium .chat-card,
body.sgvision-premium .help-item,
body.sgvision-premium .notice-card,
body.sgvision-premium .venue-section,
body.sgvision-premium .venue-block,
body.sgvision-premium .guide-card,
body.sgvision-premium .daily-wrap,
body.sgvision-premium .plan,
body.sgvision-premium .daily-plan{
  background:linear-gradient(180deg,rgba(9,39,68,.97),rgba(5,25,46,.99))!important;
  color:var(--sg-text)!important;
  border-color:var(--sg-line)!important;
}
body.sgvision-premium .mission-head,body.sgvision-premium .mission-item,
body.sgvision-premium .chat-head,body.sgvision-premium .help-item,
body.sgvision-premium .venue-head{border-color:rgba(255,255,255,.09)!important}
body.sgvision-premium .mission-item small,body.sgvision-premium .mission-card small,
body.sgvision-premium .quick-card small,body.sgvision-premium .help-item span{color:var(--sg-muted)!important}
body.sgvision-premium .mission-head strong,body.sgvision-premium .mission-foot{color:var(--sg-gold-light)!important}

/* coin purchase modal: true viewport center on desktop and mobile */
body.sgvision-premium .modal{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;padding:16px!important;background:rgba(0,7,15,.76)!important;z-index:99999!important;align-items:unset!important;justify-content:unset!important}
body.sgvision-premium .modal.show{display:grid!important;place-items:center!important}
body.sgvision-premium .modal .sheet{
  position:relative!important;inset:auto!important;transform:none!important;margin:0!important;
  width:min(520px,calc(100vw - 28px))!important;max-height:calc(100dvh - 32px)!important;overflow:auto!important;
  border-radius:22px!important;background:linear-gradient(180deg,#0b2948,#061b31)!important;color:var(--sg-text)!important;
  border:1px solid rgba(230,189,90,.30)!important;box-shadow:0 24px 80px rgba(0,0,0,.55)!important;
}
body.sgvision-premium .modal .sheet p{color:var(--sg-muted)!important}
body.sgvision-premium .modal .summary{background:rgba(255,255,255,.055)!important;color:var(--sg-text)!important;border:1px solid var(--sg-line)!important}
body.sgvision-premium .modal .payment button{background:#08243f!important;color:var(--sg-text)!important;border-color:var(--sg-line)!important}
body.sgvision-premium .modal .confirm{background:linear-gradient(180deg,#f3d27c,#b77b1f)!important;color:#181006!important}
body.sgvision-premium .modal .close{color:#cdd9e4!important}

/* mypage: avatar/camera overlay must not disturb layout */
body.sgvision-premium .identity-block{overflow:visible!important}
body.sgvision-premium .avatar-form{display:block!important;width:max-content!important;margin:0 auto!important;line-height:0!important}
body.sgvision-premium .avatar-shell{position:relative!important;display:block!important;width:112px!important;height:112px!important;margin:0 auto!important}
body.sgvision-premium .avatar-shell .avatar{width:112px!important;height:112px!important;margin:0!important}
body.sgvision-premium .avatar-camera{
  position:absolute!important;right:1px!important;bottom:1px!important;width:24px!important;height:24px!important;
  border-radius:50%!important;background:rgba(2,17,33,.92)!important;border:1px solid rgba(255,229,150,.88)!important;
  display:grid!important;place-items:center!important;box-shadow:0 2px 8px rgba(0,0,0,.35)!important;z-index:5!important;
}
body.sgvision-premium .avatar-camera .sg-avatar-camera-icon{width:13px!important;height:13px!important}
body.sgvision-premium .avatar-hint{margin:7px 0 0!important;font-size:9px!important;line-height:1.3!important;color:#b9c9d7!important}
body.sgvision-premium .avatar-hint .sg-mini-action{width:12px!important;height:12px!important;margin-right:3px!important}

/* support staff icon should be consistent SVG, not emoji */
body.sgvision-premium .avatar.staff img{width:18px!important;height:18px!important;margin:0!important}

/* Typography: remove square/heavy impression */
body.sgvision-premium h1,body.sgvision-premium h2,body.sgvision-premium h3,
body.sgvision-premium .page-title,body.sgvision-premium .section-title,
body.sgvision-premium .mission-head h2,body.sgvision-premium .rank-title{
  font-weight:600!important;letter-spacing:.055em!important;
}
body.sgvision-premium .mainnav a,body.sgvision-premium .bottomnav a,body.sgvision-premium .bottom-nav a,
body.sgvision-premium .quick-card{font-weight:500!important}

@media(max-width:640px){
  body.sgvision-premium .topbar{min-height:58px!important;padding:5px 11px!important}
  .sg-brand-logo{width:180px!important;height:40px!important;max-width:52vw!important}
  body.sgvision-premium .avatar-shell,body.sgvision-premium .avatar-shell .avatar{width:88px!important;height:88px!important}
  body.sgvision-premium .avatar-camera{width:22px!important;height:22px!important;right:0!important;bottom:0!important}
  body.sgvision-premium .avatar-camera .sg-avatar-camera-icon{width:12px!important;height:12px!important}
  body.sgvision-premium .modal{padding:12px!important}
  body.sgvision-premium .modal .sheet{width:min(500px,calc(100vw - 20px))!important;max-height:calc(100dvh - 24px)!important}
}