@font-face{font-family:"Barlow Ticket";src:url("/fonts/Barlow-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
/* Shared MyPage UI, based on the approved October 18 mock. */
body #modal[data-view="auth"] .mypage{padding-top:0}
body #modal .mypage-grab{
  position:relative;display:grid;place-items:center;width:100%;max-width:640px;min-height:28px;margin:0 auto;
  padding:0;border:0;background:transparent;cursor:grab;touch-action:none
}
body #modal .mypage-grab::before{content:"";width:36px;height:4px;border-radius:999px;background:var(--sub)}
body #modal .mypage-grab::after{content:"";position:absolute;z-index:1;inset:0 0 -16px;width:min(160px,100%);margin-inline:auto}
body #modal .mypage-grab:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
body #modal[data-view="auth"]>.mbox.mypage-dragging{will-change:translate}
body #modal .mypage-summary{position:relative;border:0;border-radius:28px;background:var(--ui-menu-inset);box-shadow:none}
html[data-night="true"] body #modal .mypage-summary{box-shadow:none}
body #modal .mypage-summary .mypagehero{grid-template-columns:minmax(0,1fr);justify-items:center;min-height:0;padding:54px 20px 22px;gap:12px}
body #modal .mypage-summary .mypageidentity{width:100%;min-width:0;text-align:center}
body #modal .mypage-summary .mypageavatar{width:72px;height:72px}
body #modal .mypage-summary .mypageavatar :is(.authprovideravatar,.hako-profile-placeholder){border:3px solid #fff;box-sizing:border-box;box-shadow:0 3px 9px #20232916}
body #modal .mypage-summary .native-login-provider{width:23px;height:23px;right:-1px;bottom:-1px;border:1px solid #e4e4e8;box-shadow:0 1px 4px #20232912}
body #modal .mypage-summary .native-login-provider svg{width:14px;height:14px}
body #modal .mypage-summary .mypagename{text-align:center;font-size:20px;font-weight:700;line-height:1.45;letter-spacing:.01em}
body #modal .mypage-summary-body{padding:18px;gap:12px}
body #modal .mypage-metrics{gap:10px}
body #modal .mypage-summary :is(.mypage-metric,.photo-points,.native-personal-stat){border:0;border-radius:18px;background:var(--ui-menu-card);box-shadow:none}
html:not([data-night="true"]) body #modal .mypage-summary{background:var(--ui-menu-card)}
html:not([data-night="true"]) body #modal .mypage-summary :is(.mypage-metric,.photo-points,.native-personal-stat){background:var(--ui-menu-inset)}
body #modal .mypage-summary :is(.mypage-metric,.photo-points){min-height:88px;padding:12px 10px;gap:12px}
body #modal .mypage-summary :is(.mypage-metric-label,.mikepo-label,.native-personal-label){font-size:12px;font-weight:650;gap:5px;line-height:1.4}
body #modal .mypage-summary :is(.mypage-metric-icon,.mikepo-icon,.native-ticket-heart,.native-ticket-pin){width:18px;height:18px;min-width:18px;min-height:18px;flex-basis:18px}
body #modal .mypage-summary :is(.mypage-metric-icon,.native-ticket-heart,.native-ticket-pin) svg{width:12px;height:12px}
body #modal .mypage-summary :is(.mypage-metric,.photo-points)>b{position:relative;top:-3px;display:flex;align-items:baseline;justify-content:center;gap:3px;font-size:28px;font-weight:700;line-height:1.05;letter-spacing:-.03em;padding-right:0}
body #modal .mypage-summary :is(.mypage-metric,.photo-points)>b small{font-size:10px;font-weight:600;margin-left:0;letter-spacing:0}
body #modal .mypage-summary :is(.mypage-metric-arrow,.native-personal-arrow),body #modal .mypage-summary .photo-points:after{display:none}
body #modal .mypage-summary :is(.mypage-metric,.photo-points)>b[data-long-value]{padding-right:0}
body #modal .mypage-summary .native-personal-stats{gap:12px}
body #modal .mypage-summary .native-personal-stat{grid-template-columns:minmax(0,1fr) auto;min-height:78px;padding:14px;row-gap:8px;column-gap:12px}
body #modal .mypage-summary .native-personal-name{font-size:18px;font-weight:700;line-height:1.4}
body #modal .mypage-summary .native-personal-count{font-size:28px;font-weight:700;line-height:1.05;letter-spacing:-.025em}
body #modal .mypage-summary .native-personal-count small{font-size:11px;font-weight:600;margin-left:4px}
body #modal .mypage-summary .native-personal-countline{grid-row:2;align-self:end}
body #modal .mypage-summary .native-personal-name{align-self:end}
body #modal .mypage-summary :is(.mypage-metric-label,.mikepo-label){justify-content:center}
body #modal .mypage-summary [data-mypage-view="plan"] .mypage-metric-label,body #modal .mypage-summary .mikepo-label{position:relative;left:-2px}
body #modal .mypage-card-brand{position:absolute;top:18px;left:18px;z-index:1;order:0;margin:0;min-height:18px;color:var(--mypage-brand-ink,#fff);pointer-events:none}
body #modal .mypage-card-brand .ticketissuebrandlogo{width:98px;color:var(--mypage-brand-ink,#fff);overflow:visible}
body #modal .mypage-card-brand .ticketissuebrandlogo :is(path,rect,circle,ellipse,polygon,polyline,line){stroke:none}
body #modal .mypagecontent{padding-top:22px}
@media(max-width:350px){
 body #modal .mypage-summary-body{padding:14px;gap:12px}
 body #modal .mypage-metrics{gap:8px}
 body #modal .mypage-summary .mypagehero{padding:54px 16px 20px;gap:12px}
 body #modal .mypage-summary .mypagename{font-size:18px}
 body #modal .mypage-summary :is(.mypage-metric,.photo-points){padding:12px 8px}
 body #modal .mypage-summary :is(.mypage-metric-label,.mikepo-label){font-size:10px;gap:4px}
 body #modal .mypage-summary :is(.mypage-metric-icon,.mikepo-icon){width:16px;height:16px;min-width:16px;min-height:16px;flex-basis:16px}
 body #modal .mypage-summary :is(.mypage-metric,.photo-points)>b{font-size:24px}
 body #modal .mypage-summary .native-personal-name{font-size:16px}
 body #modal .mypage-summary .native-personal-stat{padding:13px 12px;column-gap:8px}
 body #modal .mypage-summary .native-personal-count{font-size:24px}
}


/* Filled, simplified glyphs remain legible inside the circular badges. */
body #modal .mypage-summary .mypage-metric-icon svg:not(.proposal-record-icon){display:none}
body #modal .mypage-summary .mypage-metric-icon svg.proposal-record-icon{display:block;width:12px;height:12px}
@media(max-width:350px){body #modal .mypage-summary .mypage-metric-icon svg.proposal-record-icon{width:11px;height:11px}}

/* Login provider is described in text beneath the app logo. */
body #modal .mypage-summary .native-login-provider{display:none}

/* Provider details live in Account; only decorative lettering rotates. */
body #modal .proposal-account-login{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 0 16px;margin-bottom:4px;border-bottom:1px solid var(--rule);font-size:13px;color:var(--ink)}
body #modal .proposal-account-login>span{color:var(--sub)}
body #modal .proposal-account-login .proposal-login-status{display:block;font-size:13px;font-weight:600;color:var(--ink)}
body #modal .mypage-summary .mypageavatar{width:96px;height:96px}
body #modal .mypage-summary .mypageavatar :is(.authprovideravatar,.hako-profile-placeholder){position:absolute;inset:9px;width:78px;height:78px}
body #modal .mypage-summary .proposal-avatar-orbit{display:block;position:absolute;inset:0;width:96px;height:96px;overflow:visible;fill:currentColor;pointer-events:none;transform-origin:50% 50%;animation:mypage-orbit-turn 30s linear infinite}
body #modal .proposal-avatar-orbit text{font-family:"Barlow Ticket",sans-serif;font-size:11px;font-weight:700;font-synthesis:none}
@keyframes mypage-orbit-turn{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){body #modal .mypage-summary .proposal-avatar-orbit{animation:none}}

/* Ticket archive is a dedicated page instead of an inline disclosure. */
body #modal .mypagecontent>details.mypagetickets{display:none}
body #modal .proposal-ticket-entry{display:flex;align-items:center;gap:12px;width:100%;min-height:58px;padding:12px 18px;box-sizing:border-box;border:0;border-radius:20px;background:var(--ui-menu-card);color:var(--ink);font:inherit;font-size:15px;font-weight:650;text-align:left;cursor:pointer}
body #modal .proposal-ticket-entry>svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
body #modal .proposal-ticket-entry small{margin-left:auto;border-radius:999px;background:var(--paper);font-size:12px;padding:5px 9px;font-weight:650}
body #modal :is(.proposal-ticket-entry,.native-settings .native-setting-link) .proposal-chevron{display:flex;align-items:center;justify-content:center;align-self:center;flex:0 0 18px;width:18px;height:18px;color:var(--sub);line-height:0}
body #modal :is(.proposal-ticket-entry,.native-settings .native-setting-link) .proposal-chevron svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body #modal .proposal-ticket-page:not([hidden]){display:block;padding:0 20px 100px;box-sizing:border-box;max-width:680px;margin:0 auto}
body #modal .proposal-ticket-page[hidden],body #modal .authaccount.mypage[hidden]{display:none!important}
body #modal .proposal-ticket-back{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 8px;margin:0 0 12px -8px;border:0;border-radius:12px;background:transparent;color:var(--ink);font:inherit;font-size:14px;font-weight:600;cursor:pointer}
body #modal .proposal-ticket-back svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body #modal .proposal-ticket-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
body #modal .proposal-ticket-heading h2{margin:0;font-size:24px;font-weight:700;line-height:1.4}
body #modal .proposal-ticket-heading p{margin:0;color:var(--sub);font-size:13px;white-space:nowrap}
body #modal .hako-mypage-heading{
  position:sticky;top:0;z-index:5;justify-content:flex-start;align-items:center;
  height:auto;flex:0 0 auto;min-height:58px;padding:8px 0;box-sizing:border-box;
  border:0;box-shadow:none;background:var(--card)
}
body #modal .hako-mypage-heading h2{min-width:0;overflow-wrap:anywhere}
@media(max-width:860px){
 body #modal.hako-mypage-detail .hako-mypage-heading{padding-top:calc(8px + var(--safe-t))}
}
body #modal .proposal-ticket-page .mypageticketgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
body #modal :is(.proposal-ticket-entry,.proposal-ticket-back):active{background:color-mix(in srgb,var(--ink) 6%,var(--card));transform:none}
body #modal :is(.proposal-ticket-entry,.proposal-ticket-back):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(min-width:600px){body #modal .proposal-ticket-page .mypageticketgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:350px){body #modal .proposal-ticket-page:not([hidden]){padding-inline:16px}}

/* Match the settings canvas in both appearances. */
body #modal[data-view="auth"] #mBody:has(.mypage){background:var(--ui-menu-background)}
body #modal[data-view="auth"]>.mbox:has(> #mBody > .mypage){border:0;background:var(--ui-menu-background)}
body #modal[data-view="auth"] .mypage{background:transparent}

@media(max-width:860px){
 body #modal.show[data-view="auth"]:has(> .mbox > #mBody > .authaccount.mypage){padding-top:9px;background:transparent}
 body #modal.show[data-view="auth"]>.mbox:has(> #mBody > .authaccount.mypage){border-radius:var(--ui-radius) var(--ui-radius) 0 0}
 body #modal:has(>.mypage-origin-panel)>.mbox:first-child{position:relative;z-index:1}
 body #modal>.mypage-origin-panel{position:absolute;inset:0;width:100%;height:100%;max-width:none;pointer-events:none}
 body.modal-open #detail.mypage-origin-venue .mobbar{display:flex!important}
}

/* Use the full 350px ticket composition at every preview size. */
body #modal .proposal-ticket-page .mypageticketgrid{align-items:start}
body #modal .proposal-full-ticket{display:block;width:100%;min-width:0;min-height:44px;padding:0;border:0;border-radius:4px;background:transparent;text-align:left;cursor:zoom-in;box-shadow:none;transition:filter .15s ease}
.proposal-ticket-fit{display:block;position:relative;width:100%;min-width:0;overflow:hidden}
body #modal .proposal-full-ticket:active{filter:brightness(.94);transform:none}
body #modal .proposal-full-ticket:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
body #modal .proposal-ticket-hint{text-align:center;margin:20px 0 0;color:var(--sub);font-size:12px}
body #modal .proposal-ticket-preview{position:fixed;inset:0;margin:auto;width:min(430px,100%);height:min(850px,100dvh);max-width:100%;max-height:100dvh;padding:0;border:0;border-radius:0;background:var(--card);color:var(--ink);overflow:hidden;box-sizing:border-box}
body #modal .proposal-ticket-preview:not([open]){display:none}
body #modal .proposal-ticket-preview[open]{display:flex;flex-direction:column}
.proposal-ticket-preview::backdrop{background:rgba(16,19,26,.42)}
.proposal-ticket-preview-toolbar{display:flex;align-items:center;justify-content:space-between;flex:none;padding:14px 18px;min-height:62px;font-size:14px;font-weight:650;border-bottom:1px solid var(--rule)}
.proposal-ticket-preview-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;padding:22px 20px 32px;flex:1}
.proposal-ticket-preview-scroll>.proposal-ticket-fit{max-width:350px;margin:0 auto}
@media(prefers-reduced-motion:reduce){body #modal .proposal-full-ticket{transition:none}}

/* User-selected density stays the same across viewport sizes. */
body #modal .proposal-ticket-layout{display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:0;color:var(--sub);flex:none}
body #modal .proposal-ticket-layout>span{font-size:12px;margin-right:8px}
body #modal .proposal-ticket-layout>button{box-sizing:border-box;width:44px;min-width:44px;min-height:44px;padding:8px 4px;border:1px solid var(--rule);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;font-weight:600;cursor:pointer}
body #modal .proposal-ticket-layout>button[aria-pressed="true"]{background:var(--ink);color:var(--card);border-color:var(--ink);font-weight:750}
body #modal .proposal-ticket-layout>button:active{filter:brightness(.92);transform:none}
body #modal .proposal-ticket-layout>button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
body #modal .proposal-ticket-page .mypageticketgrid{grid-template-columns:repeat(var(--ticket-columns,3),minmax(0,1fr));justify-items:center}
body #modal .proposal-full-ticket{max-width:350px}

body #modal .proposal-ticket-toolbar{display:flex;align-items:center;gap:12px;margin:0 0 20px;min-width:0}
body #modal .proposal-ticket-sort{flex:1;min-width:0;margin:0}
/* Reusable sort field: inset arrow, native select interaction, generous hit area. */
body #modal .hako-sort-field{position:relative;display:block}
body #modal .hako-sort-field::after{content:"";position:absolute;right:14px;top:50%;width:6px;height:6px;border-right:1.8px solid var(--ink);border-bottom:1.8px solid var(--ink);transform:translateY(-70%) rotate(45deg);pointer-events:none}
body #modal .hako-sort-select{appearance:none;-webkit-appearance:none;display:block;box-sizing:border-box;width:100%;min-width:0;min-height:44px;padding:8px 36px 8px 12px;border:1px solid var(--rule);border-radius:12px;background:var(--card);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}

body #modal .proposal-ticket-pagination{display:grid;justify-items:center;gap:12px;margin-top:24px}
body #modal .proposal-ticket-pagination p{margin:0;color:var(--sub);font-size:12px}
body #modal [data-ticket-more]{min-height:44px;min-width:160px;padding:10px 24px;border:1px solid var(--rule);border-radius:999px;background:var(--card);color:var(--ink);font:inherit;font-size:14px;font-weight:650;cursor:pointer}
body #modal [data-ticket-more][hidden]{display:none!important}
body #modal [data-ticket-more]:active{background:var(--paper);transform:none}
body #modal :is([data-ticket-more],[data-ticket-sort]):focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Motion explains entering the ticket preview; controls never bounce. */
.proposal-ticket-preview-scroll>.proposal-ticket-fit{transform-origin:50% 0}
@media(prefers-reduced-motion:no-preference){.proposal-ticket-preview[open]::backdrop{animation:proposal-ticket-backdrop-in 160ms ease-out}}
@keyframes proposal-ticket-backdrop-in{from{background:rgba(16,19,26,0)}to{background:rgba(16,19,26,.42)}}

/* Breadcrumbs show the parent and current screen in one line. */
body #modal .proposal-ticket-breadcrumbs{position:sticky;top:0;z-index:5;display:block;width:auto;margin:0 -20px 16px;padding:0 20px;border:0;border-bottom:1px solid var(--rule);background:var(--card);box-shadow:none;color:var(--sub)}
body #modal .proposal-ticket-breadcrumbs ol{display:flex;align-items:center;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
body #modal .proposal-ticket-breadcrumbs li{display:flex;align-items:center;margin:0;padding:0;font-size:13px;line-height:1.5}
body #modal .proposal-ticket-breadcrumbs .proposal-ticket-back{margin:0;padding:0 4px;min-height:44px;font-size:13px;color:var(--ink)}
/* Breadcrumb presses use text feedback, without a grey tile or WebKit tap flash. */
body #modal .proposal-ticket-breadcrumbs .proposal-ticket-back{-webkit-tap-highlight-color:transparent}
body #modal .proposal-ticket-breadcrumbs .proposal-ticket-back:active{background:transparent;color:color-mix(in srgb,var(--ink) 70%,var(--card));transform:none}
body #modal .proposal-breadcrumb-separator svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body #modal .proposal-ticket-breadcrumbs [aria-current="page"]{font-weight:600}

@media(max-width:350px){body #modal .proposal-ticket-breadcrumbs{margin-inline:-16px;padding-inline:16px}}
/* Same numeral face as mobile/ui/home.css .native-next-days b. */
body #modal .mypage-summary :is(.mypage-metric,.photo-points)>b,
body #modal .mypage-summary .native-personal-count{font-family:"Barlow Ticket",sans-serif;font-weight:700;font-synthesis:none;font-kerning:normal;font-variant-numeric:normal;letter-spacing:0}
body #modal .mypage-summary :is(.mypage-metric,.photo-points)>b small,
body #modal .mypage-summary .native-personal-count small{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;font-weight:600}

/* Lift content toward its heading without changing the card outlines. */
body #modal .mypage-summary :is(.mypage-metric,.photo-points)>b{top:-8px}
body #modal .mypage-summary :is(.native-personal-name,.native-personal-countline){position:relative;top:-3px}
body #modal .proposal-attendance{display:grid;gap:20px;border:0;padding:0;background:transparent}
body #modal .proposal-rate-intro h4{margin:0 0 8px;font-size:17px;line-height:1.5}
body #modal .proposal-rate-intro p,body #modal .proposal-rate-help{margin:0;font-size:12px;line-height:1.75;color:var(--sub)}
body #modal .proposal-rate-settings{display:grid;gap:12px;padding:16px;border:1px solid var(--rule);border-radius:16px;background:var(--card)}
body #modal .proposal-rate-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
body #modal .proposal-rate-field{display:grid;gap:7px;min-width:0;font-size:12px;font-weight:650;color:var(--ink)}
body #modal .proposal-rate-field input{box-sizing:border-box;display:block;width:100%;min-width:0;min-height:44px;padding:10px 12px;border:1px solid var(--rule);border-radius:10px;background:var(--paper);color:var(--ink);font:inherit;font-size:16px}
body #modal .proposal-rate-field input[aria-invalid="true"]{border-color:#c34343}
body #modal .proposal-rate-number{display:flex;align-items:center;gap:10px}
body #modal .proposal-rate-number input{flex:1;width:0}
body #modal .proposal-rate-number>span{flex:none;color:var(--sub);font-size:12px}
body #modal .proposal-rate-save{min-height:46px;padding:10px 12px;margin-top:4px;border:0;border-radius:12px;background:var(--ink);color:var(--card);font:inherit;font-size:13px;font-weight:650;cursor:pointer}
body #modal .proposal-rate-status{margin:0;color:var(--sub);font-size:12px;line-height:1.6}
body #modal .proposal-rate-status:empty{display:none}
body #modal .proposal-rate-result,body #modal .proposal-rate-summary{padding:18px;border:1px solid var(--rule);border-radius:18px;background:var(--card)}
body #modal .proposal-rate-result .proposal-rate-result-head{display:grid;gap:4px;font-size:13px;font-weight:650}
body #modal .proposal-rate-result .proposal-rate-result-head small{color:var(--sub);font-size:11px;font-weight:400}
body #modal .proposal-rate-percentage{display:flex;align-items:baseline;justify-content:center;gap:5px;margin:16px 0 12px}
body #modal .proposal-rate-percentage strong{font:700 48px/1 "Barlow Ticket",sans-serif}
body #modal .proposal-rate-percentage>span{font-size:16px;font-weight:600}
body #modal .proposal-rate-result progress{appearance:none;display:block;width:100%;height:6px;border:0;border-radius:999px;overflow:hidden;background:var(--rule2);accent-color:var(--ink)}
body #modal .proposal-rate-result progress::-webkit-progress-bar{background:var(--rule2)}
body #modal .proposal-rate-result progress::-webkit-progress-value{background:var(--ink);border-radius:999px}
body #modal .proposal-rate-result progress::-moz-progress-bar{background:var(--ink)}
body #modal .proposal-rate-stats{display:grid;grid-template-columns:1fr 1fr;margin:18px 0 0;gap:16px;text-align:center}
body #modal .proposal-rate-stats>div+div{border-left:1px solid var(--rule)}
body #modal .proposal-rate-stats dt{font-size:11px;color:var(--sub)}
body #modal .proposal-rate-stats dd{margin:4px 0 0}
body #modal .proposal-rate-stats b{font:700 25px/1.2 "Barlow Ticket",sans-serif}
body #modal .proposal-rate-stats small{font-size:10px;margin-left:4px}
body #modal .proposal-rate-history h5{font-size:13px;margin:0 0 10px}
body #modal :is(.proposal-rate-history-row,.proposal-rate-summary-row){display:flex;align-items:center;gap:12px;width:100%;min-height:64px;padding:12px 0;border:0;border-bottom:1px solid var(--rule);background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
body #modal :is(.proposal-rate-history-row,.proposal-rate-summary-row)>span:first-child{display:grid;gap:5px;min-width:0;flex:1}
body #modal :is(.proposal-rate-history-row,.proposal-rate-summary-row) b{font-size:13px;overflow-wrap:anywhere}
body #modal :is(.proposal-rate-history-row,.proposal-rate-summary-row) small{font-size:11px;color:var(--sub)}
body #modal :is(.proposal-rate-history-row,.proposal-rate-summary-row)>strong{font:700 26px/1 "Barlow Ticket",sans-serif;white-space:nowrap}
body #modal :is(.proposal-rate-history-row,.proposal-rate-summary-row)>strong small{font:600 11px/1 system-ui,sans-serif;margin-left:2px}
body #modal .proposal-rate-edit{font-size:10px;color:var(--sub)}
body #modal .proposal-rate-empty{margin:0;padding:16px;border:1px dashed var(--rule);border-radius:12px;color:var(--sub);font-size:12px;line-height:1.7}
body #modal .proposal-rate-summary .proposal-rate-summary-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
body #modal .proposal-rate-summary .proposal-rate-summary-head span{font-size:11px;color:var(--sub)}
body #modal .proposal-rate-summary h3{font-size:16px;margin:4px 0 0}
body #modal .proposal-rate-summary .proposal-rate-summary-head>small{font-size:10px;color:var(--sub)}
body #modal .proposal-rate-summary-row:last-child{border-bottom:0;padding-bottom:0}
body #modal :is(.proposal-rate-save,.proposal-rate-history-row,.proposal-rate-summary-row):active{filter:brightness(.94);transform:none}
body #modal .proposal-attendance :is(input,select,button):focus-visible,body #modal .proposal-rate-summary button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(min-width:500px){body #modal .proposal-rate-pair{grid-template-columns:1fr 1fr}}

/* Remove the 3px of lower space released by lifting the card contents. */
body #modal .mypage-summary :is(.mypage-metric,.photo-points){min-height:85px;padding-bottom:9px}
body #modal .mypage-summary .native-personal-stat{min-height:75px;padding-bottom:11px}
@media(max-width:350px){body #modal .mypage-summary .native-personal-stat{padding-bottom:10px}}
body #modal #proposalAttendanceEntry .proposal-chevron{margin-left:auto}
body #modal .proposal-attendance-page .proposal-ticket-heading h2{font-size:22px}
body #modal .proposal-attendance-page .proposal-attendance{max-width:520px;margin:0 auto}

/* Local card headings must not inherit the app-wide header layout. */
body #modal .proposal-rate-intro{display:block;padding:0;margin:0;min-width:0}
body #modal .proposal-attendance-page .proposal-attendance{box-sizing:border-box;width:100%;min-width:0}
body #modal .proposal-attendance :is(.proposal-rate-settings,.proposal-rate-result,.proposal-rate-history,.proposal-rate-field,.proposal-rate-pair){box-sizing:border-box;min-width:0;max-width:100%}
body #modal .proposal-rate-field :is(input,select){max-width:100%;min-inline-size:0;line-height:1.5}
body #modal .proposal-rate-field input[type="month"]{appearance:none;-webkit-appearance:none;inline-size:100%}
body #modal .proposal-rate-field input[type="month"]::-webkit-date-and-time-value{min-width:0;text-align:left}
body #modal .proposal-rate-field input[type="month"]::-webkit-datetime-edit{padding:0}
body #modal .proposal-rate-result-head small{overflow-wrap:anywhere}
body #modal .proposal-rate-stats>div{min-width:0}
body #modal .proposal-rate-stats dd{display:flex;align-items:baseline;justify-content:center;gap:4px}
body #modal .proposal-rate-stats small{margin-left:0;white-space:nowrap}
/* Tighten the upper three cards by 2px at top and 7px at bottom. */
body #modal .mypage-summary :is(.mypage-metric,.photo-points){min-height:76px;padding-top:10px;padding-bottom:2px}

/* Reuse the detail result card, including its type sizes and statistic layout. */
body #modal .proposal-rate-home-list{display:grid;gap:12px}
body #modal .proposal-rate-home{position:relative;box-sizing:border-box;color:var(--ink)}
body #modal .proposal-rate-home-open{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:44px;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
body #modal .proposal-rate-home-open:active{background:color-mix(in srgb,var(--ink) 4%,transparent);transform:none}
body #modal .proposal-rate-home-open:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
body #modal .proposal-rate-home>.proposal-rate-help{margin-top:12px;text-align:center}

/* Highlight the person/month and place the rate label alongside its value. */
body #modal .proposal-rate-result .proposal-rate-result-head small{font-size:16px;font-weight:700;line-height:1.5;color:var(--ink);overflow-wrap:anywhere}
body #modal .proposal-rate-percentage>.proposal-rate-percentage-label{margin-right:auto;padding-right:12px;align-self:center;font-size:13px;font-weight:650;line-height:1.5;color:var(--ink)}

/* Ranking details share the fixed breadcrumb navigation of ticket/attendance pages. */
body #modal .proposal-ranking-list{list-style:none;margin:0;padding:0}
body #modal .proposal-ranking-list li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:12px;padding:20px 0;border-bottom:1px solid var(--rule)}
body #modal .proposal-ranking-list li>span{font-size:22px;font-weight:700}
body #modal .proposal-ranking-list small{font-size:11px;margin-left:3px}
body #modal .proposal-ranking-label{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
body #modal .proposal-ranking-label strong{font-size:17px;overflow-wrap:anywhere}
body #modal .proposal-ranking-label b{white-space:nowrap;font-size:20px}
body #modal .proposal-ranking-track{height:6px;margin-top:12px;border-radius:3px;background:var(--accent,var(--ink))}
body #modal .proposal-ranking-note{margin:20px 0 0;font-size:12px;line-height:1.8;color:var(--sub)}

/* Profile editing belongs to the account controls, not the page toolbar. */
body #modal .native-account .proposal-profile-edit{display:block;width:100%;min-height:44px;margin:0 0 16px;text-align:center;font-size:14px;font-weight:600}

/* Keep all result-card rate labels and values centered on a shared text baseline. */
body #modal .proposal-rate-result .proposal-rate-percentage>.proposal-rate-percentage-label{margin-right:0;padding-right:7px;align-self:baseline}

/* Compact attendance card with a clear person/month hierarchy. */
body #modal .proposal-rate-result{padding:14px 18px}
body #modal .proposal-rate-result .proposal-rate-result-head small{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 12px}
body #modal .proposal-rate-person{font-size:16px;font-weight:700;min-width:0;overflow-wrap:anywhere}
body #modal .proposal-rate-month{flex:none;font-size:12px;font-weight:600;line-height:1.5;padding:3px 9px;border-radius:999px;background:var(--rule2);color:var(--sub);white-space:nowrap}
body #modal .proposal-rate-result .proposal-rate-percentage{margin:12px 0 9px}
body #modal .proposal-rate-result .proposal-rate-stats{margin-top:12px}
body #modal .proposal-rate-result .proposal-rate-stats dd{margin-top:2px}

/* Attendance results use the same restrained shadow as the account card. */
body #modal .proposal-rate-result{border:0;box-shadow:none}
body #modal .mypage .proposal-rate-result{background:var(--ui-menu-card)}
html[data-night="true"] body #modal .proposal-rate-result{box-shadow:none}
body #modal .proposal-rate-month{color:var(--ink)}

/* The list groups separate cards without adding an outer card. */
body #modal #attendanceRateSummarySlot>.proposal-rate-home-list{border:0;background:transparent;box-shadow:none;border-radius:0;padding:0}
body #modal .proposal-rate-history-person{overflow-wrap:anywhere}
body #modal .proposal-rate-history-month{font-size:12px;color:var(--ink);font-weight:500}

/* Account disclosure: scoped grouping, consistent rows and readable actions. */
body #modal .mypage .native-account>.authdetailsbody{padding:4px 16px 20px}
body #modal .native-account .proposal-account-profile{padding:14px;border-radius:16px;background:color-mix(in srgb,var(--ink) 3%,var(--card))}
body #modal .native-account .proposal-account-login{padding:0 0 12px;margin:0 0 12px;border-bottom:1px solid var(--rule);font-size:12px}
body #modal .native-account .proposal-login-status{padding:4px 10px;border-radius:999px;background:var(--card);font-size:12px;color:var(--ink)}
body #modal .native-account .proposal-profile-edit{margin:0 0 8px;background:var(--card)}
body #modal .native-account .authdetails{margin:0;border:0;border-radius:14px;box-shadow:none;background:color-mix(in srgb,var(--ink) 3%,var(--card))}
body #modal .native-account .mypageprofile{background:transparent}
body #modal .mypage .native-account .authdetails>summary{padding:14px;min-height:48px;font-size:13px;font-weight:600;gap:12px}
body #modal .native-account .authdetails>summary::after{content:'›';display:block;flex:none;font-size:20px;line-height:20px;transform:rotate(0);transition:transform .18s ease}
body #modal .native-account .authdetails[open]>summary::after{transform:rotate(90deg)}
body #modal .mypage .native-account .authdetails>.authdetailsbody{padding:0 14px 14px;background:transparent;border-radius:0 0 14px 14px}
body #modal .mypage .native-account .mypageprofile>summary{padding-inline:0}
body #modal .mypage .native-account .mypageprofile>.authdetailsbody{padding:0}
body #modal .native-account .proposal-account-group-label{margin:22px 4px 8px;color:var(--sub);font-size:11px;font-weight:650;letter-spacing:.04em}
body #modal .native-account .authprofile{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);font-size:12px}
body #modal .native-account .authprofile :is(dt,dd){padding:10px 0;border-bottom:1px solid var(--rule);line-height:1.6}
body #modal .native-account .authprofile dt{padding-right:12px}
body #modal .native-account .authprofile dd{text-align:right;font-weight:600}
body #modal .native-account .authprofile :is(dt,dd):nth-last-child(-n+2){border-bottom:0}
body #modal .native-account :is(.authcloudtools,.authmigration,.proposal-account-backup,.authlogoutglobal){margin:0;padding:0;border:0;background:transparent}
body #modal .native-account :is(.authmigration,.proposal-account-backup,.authlogoutglobal){margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
body #modal .native-account h4{margin:0 0 7px;font-size:13px;font-weight:650;color:var(--ink)}
body #modal .native-account p{margin:0 0 12px;font-size:12px;line-height:1.8;color:var(--sub);overflow-wrap:anywhere}
body #modal .native-account .authnote{margin:12px 0 0;font-size:11px}
body #modal .native-account .brow{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0}
body #modal .native-account .btn{box-sizing:border-box;display:block;width:100%;min-height:44px;height:auto;margin:0;padding:11px 12px;border-radius:12px;font-size:12px;font-weight:600;line-height:1.6;white-space:normal;overflow-wrap:anywhere;box-shadow:none}
body #modal .native-account .btn.g{border:1px solid var(--rule);background:var(--card);color:var(--ink)}
body #modal .native-account .authdanger{background:color-mix(in srgb,#d43c3c 5%,var(--card))}
body #modal .native-account .authdanger>summary{color:#b52e36}
html[data-night="true"] body #modal .native-account .authdanger>summary{color:#ff9da2}
body #modal .native-account .btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
body #modal .native-account .btn:active{filter:brightness(.95);transform:none}
@media(prefers-reduced-motion:reduce){body #modal .native-account .authdetails>summary::after{transition:none}}

/* Separate account/request pages retain the shared breadcrumb and entry styles. */
body #modal [data-account-page] .proposal-chevron{margin-left:auto}
body #modal .proposal-account-page .proposal-ticket-heading h2{font-size:22px}
body #modal .proposal-account-page .native-account>.authdetailsbody{padding:0 0 8px}
body #modal .proposal-account-page .proposal-venue-requests>.authdetailsbody{padding:18px;border:1px solid var(--rule);border-radius:16px;background:var(--card)}
body #modal .proposal-venue-requests p{margin:0 0 16px;font-size:13px;line-height:1.8;color:var(--sub)}
body #modal .proposal-venue-requests .btn{min-height:44px;width:100%;white-space:normal}

/* Account groups use the standard white card surface and an outline. */
body #modal .proposal-account-page .native-account :is(.proposal-account-profile,.authdetails){background:var(--card);border:1px solid var(--rule);box-shadow:none}
body #modal .proposal-account-page .native-account .proposal-account-profile{box-sizing:border-box}
body #modal .proposal-account-page .native-account .mypageprofile>summary{padding-inline:12px}
body #modal .proposal-account-page .native-account .mypageprofile>.authdetailsbody{padding:0 12px 12px}
body #modal .proposal-account-page .native-account .proposal-profile-edit{margin-bottom:10px}
body #modal .proposal-venue-requests .proposal-request-demo{font-size:11px;margin:0 0 16px;color:var(--sub)}
body #modal .proposal-request-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
body #modal .proposal-request-list>li{padding:16px;border:1px solid var(--rule);border-radius:16px;background:var(--card)}
body #modal .proposal-request-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px}
body #modal .proposal-request-head strong{font-size:15px;line-height:1.5;overflow-wrap:anywhere;min-width:0}
body #modal .proposal-request-status{flex:none;padding:3px 9px;border-radius:999px;background:var(--rule2);color:var(--ink);font-size:11px;font-weight:600;line-height:1.5}
body #modal .proposal-request-list p{margin:0 0 8px;font-size:12px;color:var(--ink)}
body #modal .proposal-request-list time{font-size:11px;color:var(--sub)}
body #modal .proposal-request-list .proposal-request-reason{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--rule);font-size:12px;color:var(--sub)}

/* Leave breathing room between account disclosure headings and their contents. */
body #modal .proposal-account-page .native-account :is(#authDataTools,.proposal-account-logout,.authdanger)>.authdetailsbody{padding-top:14px}

/* Logout and account deletion belong to the same login-management group. */
body #modal .proposal-account-page .native-account .proposal-account-logout+.authdanger{margin-top:10px}

/* One outlined group, with independent disclosures separated by a rule. */
body #modal .proposal-account-page .native-account .proposal-login-management{border:1px solid var(--rule);border-radius:14px;background:var(--card);overflow:hidden}
body #modal .proposal-account-page .native-account .proposal-login-management>.authdetails{border:0;border-radius:0;margin:0;background:transparent;box-shadow:none}
body #modal .proposal-account-page .native-account .proposal-login-management>.authdetails+.authdetails{border-top:1px solid var(--rule);margin-top:0}

/* Separate account groups with spacing rather than redundant headings. */
body #modal .proposal-account-page .native-account #authDataTools,body #modal .proposal-account-page .native-account .proposal-login-management{margin-top:16px}

/* Login management is one disclosure containing the two account actions. */
body #modal .proposal-account-page .native-account .proposal-login-management>.proposal-login-management-body{padding:0 14px 14px}
body #modal .proposal-account-page .native-account .proposal-login-management-body>.authdetails{border:0;border-radius:0;margin:0;background:transparent;box-shadow:none}
body #modal .proposal-account-page .native-account .proposal-login-management-body>.authdetails+.authdetails{border-top:1px solid var(--rule);margin-top:0}
body #modal .proposal-account-page .native-account .proposal-login-management-body>.authdetails>summary{padding-inline:0}
body #modal .proposal-account-page .native-account .proposal-login-management-body>.authdetails>.authdetailsbody{padding-inline:0}

/* Opening login management exposes the local logout action immediately. */
body #modal .proposal-account-page .native-account .proposal-account-logout-action{padding:14px 0}
body #modal .proposal-account-page .native-account .proposal-login-management-body>.proposal-account-logout-action+.authdanger{border-top:1px solid var(--rule);margin:0}

body #modal .proposal-profile-page .proposal-profile-note{font-size:11px;color:var(--sub);margin:0 0 16px}
body #modal .proposal-profile-page .vform{width:100%;box-sizing:border-box}
body #modal .proposal-profile-page .fc{min-width:0}
body #modal .proposal-profile-page .authoshirow input{min-width:0;width:100%;box-sizing:border-box}

/* The standalone profile page needs no enclosing form card. */
body #modal .proposal-profile-page .vform{border:0;border-radius:0;box-shadow:none;background:transparent;padding:0;margin-top:0}
body #modal.hako-mypage-detail:not(.native-settings-detail) .mhead{display:none}
html body #modal.show.native-settings-detail[data-view="auth-attendance"]{inset:0;width:100%;padding:0;align-items:stretch}
body:has(#modal.show.native-settings-detail[data-view="auth-attendance"]) :is(#app>header,.mobile-nav,#entryFab),
body:has(#modal.show.hako-mypage-detail[data-view="auth-profile"]) #app>header{display:none!important}
html body #modal.native-settings-detail[data-view="auth-attendance"]>.mbox{height:100%;max-height:none;border-radius:0}
html body #modal.native-settings-detail[data-view="auth-attendance"] #mBody{padding-inline:20px;padding-bottom:var(--safe-b)}
body #modal.hako-mypage-detail .mbody{padding:0;overflow:auto}
body #modal.hako-mypage-detail .proposal-ticket-page{padding-top:0}
body #modal :is(.proposal-ticket-entry,.native-settings .native-setting-link) .proposal-chevron{margin-left:auto}
body #modal .mikepo-card-link{display:none}
body #modal .mypage-card-brand svg *{fill:currentColor!important}
body #modal .proposal-ticket-grid{position:relative;display:block;gap:6px 8px}
body #modal .hako-ticket-thumb{position:absolute;min-width:0;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;overflow:hidden}
body #modal .hako-ticket-thumb .hako-ticket-source{width:350px;transform-origin:0 0;pointer-events:none;text-align:left}
body #modal .hako-ticket-thumb .plancard{margin:0!important;width:350px!important;max-width:none!important}
body #modal .hako-ticket-thumb:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.hako-archive-dialog{position:fixed;inset:auto 0 0;margin:0 auto;padding:14px 16px max(16px,env(safe-area-inset-bottom));border:0;background:var(--paper,#fff);color:var(--ink);max-height:calc(100dvh - max(24px,env(safe-area-inset-top)));max-width:440px;width:100%;box-sizing:border-box;border-radius:24px 24px 0 0;overflow:hidden}
.hako-archive-dialog[open]{display:flex;flex-direction:column;gap:12px}
.hako-archive-dialog::backdrop{background:rgba(16,19,26,.42)}
.hako-archive-dialog>.hako-close{position:relative;flex:none;align-self:flex-end;margin:0;display:block;z-index:5}
.hako-archive-content{min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable both-edges;padding-bottom:8px}
.hako-archive-dialog .plancard{margin:0 auto!important;box-sizing:border-box;width:350px;max-width:none;zoom:var(--ticket-scale,1)}
body #modal .proposal-rate-settings{margin-bottom:16px}
body #modal .native-account>.authdetailsbody{padding:0}
body #modal .proposal-avatar-orbit+*{z-index:1}

/* Keep the count next to the trailing chevron; only the count absorbs free space. */
body #modal .proposal-ticket-entry small+.proposal-chevron{margin-left:0}
/* Scaled tickets must not inherit the full-sized ticket scale or centering transform. */
body #modal .hako-ticket-thumb .plancard{--ticket-scale:1;transform:none!important;box-sizing:border-box!important;left:auto;right:auto}
body #modal .hako-ticket-thumb{box-sizing:border-box;display:block;text-align:left}
body #modal .hako-ticket-source{margin:0;padding:0}
body #modal .proposal-ticket-grid{width:100%;box-sizing:border-box;margin-inline:auto;align-items:start}
body #modal .hako-rate-history-item{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--rule)}
body #modal .hako-rate-history-item .proposal-rate-history-row{flex:1;min-width:0;border:0}
body #modal .hako-rate-delete{flex:none;min-width:44px;min-height:44px;padding:8px;border:1px solid var(--rule);border-radius:10px;background:var(--card);color:var(--ink);font:inherit;font-size:12px}

/* A child-page edge gesture must never uncover the search/map behind MyPage. */
body #modal.native-mypage-edge-back .mbox,body #modal.native-mypage-edge-back .mbody{background:var(--paper,#fff);overflow:hidden}

/* Center each glyph within its badge, independent of baseline/legacy offsets. */
body #modal .mypage-summary :is(.mypage-metric-icon,.native-ticket-heart,.native-ticket-pin){position:relative;display:block;padding:0;box-sizing:border-box;line-height:0;letter-spacing:0}
body #modal .mypage-summary :is(.mypage-metric-icon,.native-ticket-heart,.native-ticket-pin) svg{position:absolute;left:50%;top:50%;right:auto;bottom:auto;display:block;margin:0;padding:0;transform:translate(-50%,-50%);transform-origin:center}
/* User-tuned offsets are CSS pixels, independent of SVG scale and screen width. */
body #modal .mypage-summary [data-mypage-view="plan"] .mypage-metric-icon svg{top:calc(50% + .5px)}
body #modal .mypage-summary [data-mypage-view="log"] .mypage-metric-icon svg{left:calc(50% + 1px)}
body #modal .mypage-summary .native-ticket-pin svg{top:calc(50% - .5px);transform:translate(-50%,-50%) scale(1.15)}
body #modal .mypage-summary .mypagehero{gap:9px;padding-bottom:16px}
@media(max-width:350px){body #modal .mypage-summary .mypagehero{padding-bottom:14px}}

/* The shared detail page owns horizontal spacing; the legacy ranking body must not add it again. */
body #modal.hako-mypage-detail[data-view="auth-personal-ranking"] #mBody{padding-inline:0}



/* Three native selectors share a single, evenly aligned control row. */
body #modal .proposal-ticket-toolbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 76px;gap:6px}
body #modal .proposal-ticket-toolbar .hako-sort-field{min-width:0;margin:0}
body #modal .proposal-ticket-toolbar .hako-sort-select{height:44px;line-height:normal;padding:0 36px 0 8px;font-size:12px;text-align:center;text-align-last:center}
body #modal .proposal-ticket-toolbar select:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* Keep the name aligned with the count, independently of the tie note. */
body #modal .mypage-summary .native-personal-countline{display:contents}
body #modal .mypage-summary .native-personal-count{grid-column:2;grid-row:2;align-self:end;justify-self:end;position:relative;top:-3px}
body #modal .mypage-summary .native-personal-tie{grid-column:2;grid-row:3;justify-self:end;margin-top:-8px}
/* A 40px visible frame retains a 44px native select target. */
body #modal .proposal-ticket-toolbar .hako-sort-field::before{content:"";position:absolute;inset:2px 0;border:1px solid var(--rule);border-radius:12px;background:var(--card);pointer-events:none}
body #modal .proposal-ticket-toolbar .hako-sort-select{position:relative;background:transparent;border-color:transparent;font-weight:650}

/* Profile edit stays within the themed account header. */
body #modal .mypagehero .hako-circle-action{box-sizing:border-box;position:absolute;top:8px;right:10px;z-index:2;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--ink,#25272c);cursor:pointer;-webkit-tap-highlight-color:transparent}
body #modal .mypagehero .hako-circle-action::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--paper,#f7f8fa);box-shadow:inset 0 0 0 1px var(--rule,#ddd);transition:background .15s ease}
body #modal .mypagehero .hako-circle-action svg{position:relative;width:14px;height:14px;fill:currentColor;stroke:none;pointer-events:none}
body #modal .mypagehero .hako-circle-action:active::before{background:var(--accent-tint,#fff0e4)}
body #modal .mypagehero .hako-circle-action:focus-visible{outline:2px solid var(--ink,#25272c);outline-offset:-1px}
body #modal .mypagehero .hako-circle-action:disabled{opacity:.45;cursor:default}
@media(hover:hover){body #modal .mypagehero .hako-circle-action:hover::before{background:var(--accent-tint,#fff0e4)}}
@media(prefers-reduced-motion:reduce){body #modal .mypagehero .hako-circle-action::before{transition:none}}
body #modal .hako-avatar-editor{min-width:0;margin:0 0 24px;padding:0;border:0}
body #modal .hako-avatar-editor legend{font-size:14px;font-weight:700;margin-bottom:12px;padding:0}
body #modal .hako-avatar-editor-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
body #modal .hako-avatar-preview{flex:0 0 80px;width:80px;height:80px;border-radius:50%;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--rule)}
body #modal .hako-avatar-preview :is(img,.authprovideravatar,.hako-profile-placeholder){display:block;width:100%;height:100%;border-radius:50%;object-fit:cover}
body #modal .hako-avatar-actions{display:grid;gap:8px;min-width:0}
body #modal .hako-avatar-actions .btn,body #modal #authRetryAvatar{min-height:44px;white-space:normal}
body #modal #authAvatarStatus{font-size:12px;line-height:1.6;margin:8px 0 0;color:var(--sub);overflow-wrap:anywhere}
body #modal .hako-custom-avatar img{width:100%;height:100%;object-fit:cover}
body #modal .hako-avatar-editor [hidden]{display:none!important}
body #modal .hako-avatar-preview .authprovideravatar{display:grid;place-items:center;position:relative;box-sizing:border-box}

/* Profile fields follow the shared ticket editor: compact gray labels, 38px fields and neutral required badges. */
body #modal[data-view="auth-profile"] .mbox{max-width:760px;background:var(--card)}
body #modal[data-view="auth-profile"] #mBody{background:var(--card)}
body #modal .proposal-profile-page:not([hidden]){max-width:none;padding-inline:24px}
body #modal .proposal-profile-page .proposal-ticket-heading h2{font-size:22px;line-height:1.5}
body #modal .hako-profile-fields{--form-label-gap:4px;--form-field-gap:20px;--form-section-gap:24px;display:grid;gap:var(--form-field-gap)}
body #modal .hako-profile-fields>.fr{margin:0;gap:12px}
body #modal .hako-profile-fields .fc>label,body #modal .hako-profile-fields .hako-avatar-editor legend{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:600;line-height:1.5;letter-spacing:0;color:var(--sub);margin:0 0 var(--form-label-gap);padding:0}
body #modal .hako-profile-fields .auth-question-icon{width:16px;height:16px;vertical-align:baseline;margin:0;color:currentColor}
body #modal .hako-profile-fields .fc>label small{font-size:11px;font-weight:400;line-height:1.5;letter-spacing:0}
body #modal .hako-profile-fields label .req{display:inline-block;flex:0 0 auto;font-size:8.5px;font-style:normal;font-weight:800;line-height:1.3;letter-spacing:.08em;margin:0;padding:1px 5px;vertical-align:baseline;border-radius:var(--radius-sm);background:#000;color:#fff}
body #modal .hako-profile-fields input:not([type="checkbox"]):not([type="file"]),body #modal .hako-profile-fields select{box-sizing:border-box;width:100%;max-width:100%;min-width:0;height:38px;min-height:38px;padding:6px 9px;border:1px solid var(--rule);border-radius:var(--radius-sm);background:var(--card);color:var(--ink);font-family:inherit;font-size:16px;font-weight:400;line-height:normal;letter-spacing:normal}
body #modal .hako-profile-fields :is(input,select):focus{border-color:var(--aka)}
body #modal .hako-profile-fields :is(input,select,button):focus-visible{outline:2px solid var(--aka);outline-offset:3px}
body #modal .hako-profile-fields .hako-avatar-editor{margin:0}
body #modal .hako-profile-fields .hako-avatar-editor legend{margin-bottom:8px}
body #modal .hako-profile-fields .authoshirows{margin-top:0}
body #modal .hako-profile-fields .authoshirow{gap:8px}
body #modal .hako-profile-fields .btn{border-radius:9px;min-height:44px;font-size:12px;letter-spacing:0}
body #modal .hako-profile-fields .hako-profile-provider-name{display:block;margin-top:12px}
body #modal .hako-profile-fields :is(.authfieldhelp,.authoshihelp){margin:8px 0 0;font-size:11px;line-height:1.6;color:var(--sub)}
body #modal .hako-profile-fields .authoptions{gap:4px 12px;margin-top:0}
body #modal .hako-profile-fields .authoptions label{align-items:center;min-height:44px;margin:0;font-size:13px;letter-spacing:0;line-height:1.5;color:var(--ink)}
body #modal .hako-profile-fields .authoptions input{appearance:auto;flex:0 0 18px;width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--aka)}
body #modal .hako-profile-fields>.brow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:4px 0 0}
body #modal .hako-profile-fields #authSaveProfile{background:var(--ticket-action,#2b2d32);border-color:var(--ticket-action,#2b2d32);color:#fff}
body #modal .hako-profile-fields #authStatus:empty{display:none}
@media(max-width:860px){body #modal .proposal-profile-page:not([hidden]){padding-inline:20px}}
@media(max-width:480px){body #modal .hako-profile-fields>.fr{flex-direction:column}.hako-profile-fields .authoptions{grid-template-columns:1fr}}

/* Keep profile actions outside the scrolling body, as in the ticket editor. */
body #modal[data-view="auth-profile"]{bottom:0;padding:0;align-items:stretch}
body #modal[data-view="auth-profile"] .mbox{height:100%;max-height:none;border-radius:0}
body #modal[data-view="auth-profile"] #mBody{flex:1 1 auto;min-height:0;padding:0;scroll-padding-bottom:20px}
body #modal[data-view="auth-profile"] .proposal-profile-page:not([hidden]){padding-bottom:24px}
body #modal .hako-profile-actions{flex:0 0 auto;position:relative;z-index:8;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;box-sizing:border-box;width:100%;margin:0;padding:12px 24px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--rule);background:var(--card);box-shadow:0 -5px 18px rgba(0,0,0,.024)}
body #modal .hako-profile-actions .btn{width:100%;min-width:0;min-height:46px}
body #modal .hako-profile-actions #authSaveProfile{border-color:var(--ticket-action);background:var(--ticket-action);color:#fff}
body #modal .hako-profile-actions #authStatus{grid-column:1/-1;margin:0;font-size:12px;line-height:1.6}
body #modal .hako-profile-actions #authStatus:empty{display:none}
body #modal .hako-profile-actions .btn:focus-visible{outline:2px solid var(--aka);outline-offset:3px}
body #modal .hako-profile-fields .authoptions{row-gap:0}
body #modal .hako-profile-fields .authoptions label{min-height:28px;gap:6px}
@media(max-width:860px){body #modal .hako-profile-actions{padding-inline:20px}}

/* Profile controls share the Oshi field's 8px corners and 38px row height. */
body #modal[data-view="auth-profile"] .hako-profile-fields :is(input:not([type="checkbox"]):not([type="file"]),select){border-radius:var(--radius-sm)!important;height:38px;min-height:38px}
body #modal .hako-profile-fields .authoshirow [data-auth-oshi-remove]{box-sizing:border-box;height:38px;min-height:38px;padding-block:6px;border-radius:var(--radius-sm)}
/* Paint every scroll surface alike, including elastic overscroll and short content. */
body #modal[data-view="auth-profile"] :is(.mbox,#mBody,.proposal-profile-page){background:var(--paper)}
body #modal[data-view="auth-profile"] .proposal-profile-page:not([hidden]){min-height:100%;padding-bottom:20px}
/* Retain native select behavior while avoiding WebKit's system-only 5px bezel. */
body #modal .hako-profile-fields select.hako-profile-select{appearance:none;-webkit-appearance:none;padding-right:36px}

/* Shared settings indicators: page navigation uses MyPage chevron; disclosures use plus/minus. */
body #modal .native-settings .native-setting-link{gap:12px;min-height:48px}
body #modal .native-settings .native-setting-label{min-width:0;overflow-wrap:anywhere}
body #modal .native-settings details>summary{display:flex;align-items:center;gap:9px;min-height:48px;list-style:none}
body #modal .native-settings details>summary::after{display:none!important}
body #modal .native-settings details>summary::-webkit-details-marker{display:none}
body #modal .native-settings .settings-disclosure-icon{display:flex;align-items:center;justify-content:center;flex:0 0 18px;width:18px;height:18px;margin-left:auto;color:var(--sub);line-height:0}
body #modal .native-settings .settings-disclosure-icon svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
body #modal .native-settings details[open]>summary .settings-disclosure-vertical{display:none}

/* Detail pages own their viewport and spacing; no search-header or breadcrumb reserve. */
html body #modal.show.hako-mypage-detail:not(.native-settings-detail){inset:0;width:100%;padding:0;align-items:stretch}
html body #modal.hako-mypage-detail:not(.native-settings-detail)>.mbox{width:min(100%,760px);max-width:760px;height:100%;max-height:none;border:0;border-radius:0}
body:has(#modal.show.hako-mypage-detail) :is(#app>header,.mobile-nav,#entryFab){display:none!important}
body #modal.hako-mypage-detail .proposal-ticket-page:not([hidden]){padding-bottom:calc(24px + var(--safe-b));padding-inline:max(20px,env(safe-area-inset-left)) max(20px,env(safe-area-inset-right))}
body #modal .hako-mypage-heading h2{font-size:22px;line-height:1.5}
body #modal .hako-mypage-heading h2:focus:not(:focus-visible){outline:none}
body #modal[data-view="auth-profile"] .hako-mypage-heading{background:var(--paper)}
/* Settings supplies its own header and horizontal gutters. */
html body #modal.native-settings-detail .hako-mypage-detail-page:not([hidden]){padding:0 0 24px;max-width:680px;margin:0 auto;min-height:0}
html body #modal.native-settings-detail #mBody{padding:20px 20px calc(24px + var(--safe-b))}
body #modal .proposal-attendance>p{margin:0;font-size:13px;line-height:1.75;color:var(--sub)}
body #modal.native-settings-detail[data-view="auth-attendance"] :is(>.mbox,#mBody,.proposal-ticket-breadcrumbs){background:var(--paper)}
body #modal[data-view="auth-profile"] .hako-profile-actions{padding-bottom:calc(12px + max(env(safe-area-inset-bottom),var(--safe-b)))}
/* Keep the detail canvas continuous around short lists and sticky headings. */
body #modal.hako-mypage-detail:not(.native-settings-detail) :is(>.mbox,#mBody,.hako-mypage-heading){background:var(--paper)}

html body #modal.native-settings-detail .mhead h2{flex:1;text-align:left}
/* One settings header anchors dismissal at the same safe-area position on every page. */
html body #modal:is([data-view="native-settings"],.native-settings-detail)>.mbox>.mhead{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:start;gap:12px;padding:calc(14px + var(--safe-t,env(safe-area-inset-top,0px))) max(20px,env(safe-area-inset-right)) 14px max(20px,env(safe-area-inset-left));min-height:calc(62px + var(--safe-t,env(safe-area-inset-top,0px)));box-sizing:border-box}
html body #modal:is([data-view="native-settings"],.native-settings-detail)>.mbox>.mhead h2{grid-column:2;grid-row:1;align-self:center;margin:0;min-width:0;overflow-wrap:anywhere}
html body #modal[data-view="native-settings"]>.mbox>.mhead h2{grid-column:1/3}
html body #modal:is([data-view="native-settings"],.native-settings-detail)>.mbox>.mhead #mCount{display:none}
html body #modal:is([data-view="native-settings"],.native-settings-detail)>.mbox>.mhead #mClose{grid-column:3;grid-row:1;align-self:start;margin:0}
html body #modal.native-settings-detail>.mbox>.mhead>.hako-back{grid-column:1;grid-row:1}

/* Settings destinations use back only; the settings list retains its close control. */
html body #modal.native-settings-detail>.mbox>.mhead #mClose{display:none!important}
html body #modal.native-settings-detail>.mbox>.mhead{grid-template-columns:34px minmax(0,1fr)}
/* Theme colors and icon contrast stay independent of light/dark appearance. */
body #modal .native-settings .native-setting-icon{box-sizing:border-box;width:32px;height:32px;flex:0 0 32px;padding:7px;border-radius:9px;background:var(--accent-pop);color:var(--settings-icon-ink,#000);stroke:currentColor}

body #modal .native-settings .native-setting-icon{position:relative;left:-4px}
/* Rank badges must not grow with wrapped names and squeeze the label column. */
body #modal .native-personal-chart li{grid-template-columns:48px minmax(0,1fr);align-items:center;gap:12px;padding:16px 0}
body #modal .native-personal-rank{width:48px;height:48px;align-self:center;aspect-ratio:auto;font-size:14px;white-space:nowrap;font-variant-numeric:tabular-nums}
body #modal .native-personal-chartlabel{display:grid;grid-template-columns:minmax(0,1fr) max-content;align-items:baseline;gap:12px}
body #modal .native-personal-chartlabel strong{overflow-wrap:anywhere}
body #modal .native-personal-chartlabel b{font-variant-numeric:tabular-nums}
body #modal .native-personal-ranking-page{padding:0;margin:0;background:transparent}
body #modal .hako-mypage-heading h2:focus{outline:none}