body[data-page="login"]{margin:0;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body)}body[data-page="login"] a{color:var(--c-navy)}body[data-page="login"] a:hover{color:var(--c-pink)}body[data-page="login"] .login-main{position:relative;display:flex;flex-direction:column;gap:var(--sp-20);padding:var(--sp-24) var(--sp-16) var(--sp-32)}body[data-page="login"] .login-intro{margin:0;font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed)}body[data-page="login"] .login-action{display:flex;flex-direction:column;gap:var(--sp-8)}body[data-page="login"] .login-button{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:var(--control-h-lg);border-radius:var(--radius-m);border:2px solid var(--c-x-black);background:var(--c-x-black);color:var(--c-white);text-decoration:none;font-size:var(--fs-ui-emphasis);font-weight:800;box-shadow:none}body[data-page="login"] .login-button:hover{background:var(--c-x-black);color:var(--c-white)}body[data-page="login"] .login-button{width:100%;font-family:inherit;cursor:pointer}body[data-page="login"] .login-button:disabled{border-color:var(--c-border-input);background:var(--c-bg-muted);color:var(--c-text-sub);box-shadow:none;cursor:default}body[data-page="login"] .login-button:focus-visible,body[data-page="login"] .login-consent a:focus-visible,body[data-page="login"] .login-consent input:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}body[data-page="login"] .login-consent{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--control-h);font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed);padding:var(--sp-8) 0;cursor:pointer}body[data-page="login"] .login-consent input{width:22px;height:22px;margin:0;flex:none;accent-color:var(--c-role-common);}body[data-page="login"] .login-consent a{display:inline;vertical-align:baseline}body[data-page="login"] .login-button svg{width:20px;height:20px;fill:currentColor}body[data-page="login"] .login-mock-note{margin:0;font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-relaxed);color:var(--c-text-sub);text-align:center}body[data-page="login"] .login-information{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-12) 0 0;border-top:1px solid var(--c-border);color:var(--c-text-sub)}body[data-page="login"] .login-information h2{margin:0;font-size:var(--fs-ui-heading);font-weight:700;line-height:var(--lh-relaxed)}body[data-page="login"] .login-information p{margin:0;font-size:var(--fs-ui-meta);font-weight:400;line-height:var(--lh-relaxed)}body[data-page="login"] .login-links{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);font-size:var(--fs-ui-body);font-weight:700}body[data-page="login"] .login-links a{display:inline-flex;align-items:center;min-height:var(--control-h);text-align:center}
body[data-page="conditions"]{margin:0;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body)}body[data-page="conditions"] a{color:var(--c-navy)}body[data-page="conditions"] a:hover{color:var(--c-pink)}body[data-page="conditions"] .conditions-main{position:relative;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-20) var(--sp-16) var(--sp-32)}body[data-page="conditions"] .conditions-panel{padding:var(--sp-16);border:2px solid var(--c-yellow-border);border-radius:var(--radius-l);background:var(--c-bg-yellow);font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed)}body[data-page="conditions"] .conditions-panel h2{margin:0;font-size:var(--fs-ui-heading);font-weight:800}body[data-page="conditions"] .conditions-panel ul{margin:var(--sp-12) 0 0;padding-left:var(--sp-20);display:flex;flex-direction:column;gap:var(--sp-8)}body[data-page="conditions"] .conditions-panel strong{color:var(--c-pink-strong);font-weight:800}body[data-page="conditions"] .conditions-details{border:1px solid var(--c-border);background:var(--c-white)}body[data-page="conditions"] .conditions-actions{display:flex;flex-direction:column;gap:var(--sp-12)}body[data-page="conditions"] .conditions-actions a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--control-h);padding:var(--sp-8) var(--sp-12);border:2px solid var(--c-navy);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-navy);text-decoration:none;font-size:var(--fs-ui-body);font-weight:800;text-align:center}body[data-page="conditions"] .conditions-actions a:hover{filter:brightness(1.08)}body[data-page="conditions"] .conditions-main a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
body[data-page="list"]{margin:0;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body)}body[data-page="list"] a{color:var(--c-navy)}body[data-page="list"] a:hover{color:var(--c-pink)}body[data-page="list"] .work-browse{position:relative;display:flex;flex-direction:column;margin-top:var(--sp-12);padding-top:var(--sp-12);border-top:1px solid var(--c-border);background:var(--c-bg-soft);scroll-margin-top:74px}body[data-page="list"] .work-browse-controls{display:flex;flex-direction:column;gap:var(--sp-8);padding:0 var(--sp-16) var(--sp-12)}body[data-page="list"] .work-browse-heading{margin:0;font-family:var(--font-heading);font-size:var(--fs-ui-emphasis);font-weight:900;line-height:var(--lh-normal)}body[data-page="list"] .work-filter-help{margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal)}body[data-page="list"] .work-filter-chip:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}body[data-page="list"] .list-summary{position:relative;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16) var(--sp-16)}body[data-page="list"] .list-status-panel{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-8);padding:var(--sp-12);border-radius:var(--radius-m);border:2px solid var(--c-navy);background:var(--c-white)}body[data-page="list"] .list-status-divider{height:var(--sp-2);margin:var(--sp-4) 0;background:var(--c-border)}body[data-page="list"] .list-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12);padding:var(--sp-16) 0 0}body[data-page="list"] .list-work-card{display:block;min-width:0;color:var(--c-navy)}body[data-page="list"] .list-work-thumbnail{display:block;border-radius:0}body[data-page="list"] .list-work-art{position:relative;width:100%;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:var(--c-bg-lilac)}body[data-page="list"] .list-work-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}body[data-page="list"] .list-work-caption{display:flex;align-items:flex-start;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16) 0}body[data-page="list"] .list-work-caption-copy{min-width:0;flex:1}body[data-page="list"] .list-work-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--c-navy);text-decoration:none;font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-normal)}body[data-page="list"] .list-work-singer{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:var(--sp-4);color:var(--c-text-sub);font-size:var(--fs-ui-meta);line-height:var(--lh-relaxed)}body[data-page="list"] .list-work-singer-link{display:block;flex:none;width:var(--control-h);min-height:var(--control-h)}body[data-page="list"] .list-work-singer-avatar{display:block;width:var(--sp-32);height:var(--sp-32);border-radius:50%;object-fit:cover;background:var(--c-bg-soft)}body[data-page="list"] .list-work-card a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}@media(min-width:960px){body[data-page="list"] .list-columns{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-24);padding:var(--sp-8) var(--sp-16) var(--sp-40)}body[data-page="list"] .list-side,body[data-page="list"] .list-main{display:contents}body[data-page="list"] .list-summary{padding:0}body[data-page="list"] .list-summary>h1{align-self:flex-start}body[data-page="list"] .list-status-panel{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-16) var(--sp-24)}body[data-page="list"] .list-status-panel>*{grid-column:1/-1}body[data-page="list"] .list-listening-progress{display:flex;flex-direction:column;gap:var(--sp-8);grid-column:1;align-self:center;min-width:0}body[data-page="list"] .list-status-divider{display:none}body[data-page="list"] .list-columns #trending-works{margin:0 calc(-1 * var(--sp-16));border-right:0;border-left:0}body[data-page="list"] .work-browse{margin:0 calc(-1 * var(--sp-16));padding-top:var(--sp-12);border:0;border-radius:0}body[data-page="list"] .list-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
body[data-page="work"]{margin:0;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body)}body[data-page="work"] a{color:var(--c-navy)}body[data-page="work"] a:hover{color:var(--c-pink)}body[data-page="work"] .trending-works{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:var(--sp-12);margin:var(--sp-8) 0 var(--sp-12);padding:var(--sp-16) 0;border:0;border-radius:0;background:radial-gradient(ellipse at 0 0,var(--c-deco-aqua) 0,transparent 55%),radial-gradient(ellipse at 100% 100%,var(--c-deco-pink) 0,transparent 55%),linear-gradient(140deg,var(--c-bg-aqua),var(--c-bg-lilac));scroll-margin-top:74px}body[data-page="work"] .trending-works::before,body[data-page="work"] .trending-works::after{content:"";position:absolute;left:0;right:0;z-index:-1;height:var(--sp-4);background:linear-gradient(90deg,var(--c-aqua),var(--c-lilac-border),var(--c-pink-bright));pointer-events:none}body[data-page="work"] .trending-works::before{top:0}body[data-page="work"] .trending-works::after{bottom:0}body[data-page="work"] .trending-heading-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8);flex-wrap:wrap}body[data-page="work"] .trending-heading{display:flex;align-items:center;gap:var(--sp-8);min-width:0;margin:0;font-family:var(--font-display);font-size:var(--fs-18);font-weight:900;line-height:var(--lh-normal)}body[data-page="work"] .trending-heading-icon{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;color:var(--c-pink-bright)}body[data-page="work"] .trending-heading-icon svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}body[data-page="work"] .trending-heading-icon circle{fill:currentColor}body[data-page="work"] .trending-update{display:inline-flex;align-items:center;gap:var(--sp-4);flex-shrink:0;padding:var(--sp-4) var(--sp-8);border:1px solid var(--c-border);border-radius:var(--radius-pill);background:var(--c-glass);color:var(--c-aqua-text);font-size:var(--fs-ui-small);font-weight:700;line-height:var(--lh-normal);font-variant-numeric:tabular-nums;white-space:nowrap}body[data-page="work"] .trending-update::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--c-aqua-text)}@media(max-width:360px){body[data-page="work"] .trending-heading{gap:var(--sp-8);font-size:var(--fs-ui-heading)}body[data-page="work"] .trending-heading-icon{flex-basis:26px;width:26px;height:26px}body[data-page="work"] .trending-heading-icon svg{width:26px;height:26px}}body[data-page="work"] .work-browse{position:relative;display:flex;flex-direction:column;margin-top:var(--sp-12);padding-top:var(--sp-12);border-top:1px solid var(--c-border);background:var(--c-bg-soft);scroll-margin-top:74px}body[data-page="work"] .work-browse-controls{display:flex;flex-direction:column;gap:var(--sp-8);padding:0 var(--sp-16) var(--sp-12)}body[data-page="work"] .work-browse-heading{margin:0;font-family:var(--font-heading);font-size:var(--fs-ui-emphasis);font-weight:900;line-height:var(--lh-normal)}body[data-page="work"] .work-filter-help{margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal)}body[data-page="work"] .work-filter-chip:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}body[data-page="work"] .list-summary{position:relative;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16) var(--sp-16)}body[data-page="work"] .list-status-panel{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-8);padding:var(--sp-12);border-radius:var(--radius-m);border:2px solid var(--c-navy);background:var(--c-white)}body[data-page="work"] .list-listening-progress{display:contents}body[data-page="work"] .list-status-divider{height:var(--sp-2);margin:var(--sp-4) 0;background:var(--c-border)}body[data-page="work"] .list-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-12);padding:var(--sp-16) 0 0}body[data-page="work"] .list-work-card{display:block;min-width:0;color:var(--c-navy)}body[data-page="work"] .list-work-thumbnail{display:block;border-radius:0}body[data-page="work"] .list-work-art{position:relative;width:100%;aspect-ratio:16/9;border-radius:0;overflow:hidden;background:var(--c-bg-lilac)}body[data-page="work"] .list-work-art>img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}body[data-page="work"] .list-work-caption{display:flex;align-items:flex-start;gap:var(--sp-8);padding:var(--sp-8) var(--sp-16) 0}body[data-page="work"] .list-work-caption-copy{min-width:0;flex:1}body[data-page="work"] .list-work-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--c-navy);text-decoration:none;font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-normal)}body[data-page="work"] .list-work-singer{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-top:var(--sp-4);color:var(--c-text-sub);font-size:var(--fs-ui-meta);line-height:var(--lh-relaxed)}body[data-page="work"] .list-work-singer-link{display:block;flex:none;width:var(--control-h);min-height:var(--control-h)}body[data-page="work"] .list-work-singer-avatar{display:block;width:var(--sp-32);height:var(--sp-32);border-radius:50%;object-fit:cover;background:var(--c-bg-soft)}body[data-page="work"] .list-work-card a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}@media(min-width:960px){body[data-page="work"] .list-columns{display:flex;flex-direction:column;align-items:stretch;gap:var(--sp-24);padding:var(--sp-8) var(--sp-16) var(--sp-40)}body[data-page="work"] .list-side,body[data-page="work"] .list-main{display:contents}body[data-page="work"] .list-summary{padding:0}body[data-page="work"] .list-summary>h1{align-self:flex-start}body[data-page="work"] .list-status-panel{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-16) var(--sp-24)}body[data-page="work"] .list-status-panel>*{grid-column:1/-1}body[data-page="work"] .list-listening-progress{display:flex;flex-direction:column;gap:var(--sp-8);grid-column:1/-1;align-self:center;min-width:0}body[data-page="work"] .list-status-divider{display:none}body[data-page="work"] .list-columns #trending-works{margin:0 calc(-1 * var(--sp-16));border-right:0;border-left:0}body[data-page="work"] .work-browse{margin:0 calc(-1 * var(--sp-16));padding-top:var(--sp-12);border:0;border-radius:0}body[data-page="work"] .list-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
body[data-page="awards"]{margin:0;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body)}body[data-page="awards"] .awards-layout{position:relative;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-8) var(--sp-16) var(--sp-32)}body[data-page="awards"] .awards-publication{padding:var(--sp-12);border:1px solid var(--c-border);border-radius:var(--radius-m);font-size:var(--fs-ui-body);line-height:var(--lh-relaxed)}body[data-page="awards"] .awards-publication p{margin:0}body[data-page="awards"] .awards-search{display:flex;flex-direction:column;gap:var(--sp-8);font-size:var(--fs-ui-body)}body[data-page="awards"] .awards-search input{box-sizing:border-box;width:100%;min-height:var(--control-h);padding:var(--sp-8) var(--sp-12);border:2px solid var(--c-navy);border-radius:var(--radius-m);font:inherit;font-size:var(--fs-ui-input);background:var(--c-white);color:var(--c-navy)}@media(min-width:960px){body[data-page="awards"] .awards-layout{padding:var(--sp-16) var(--sp-16) var(--sp-40)}body[data-page="awards"] .ten-selected-works{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-32)}}
body[data-page="chat"]{margin:0;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body)}body[data-page="chat"] .chat-main{position:relative;display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-20) var(--sp-16) var(--sp-32)}body[data-page="chat"] .chat-main h1{margin:0}body[data-page="chat"] .chat-intro{margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-meta);line-height:var(--lh-relaxed)}
.registration-conditions{margin:0;background:var(--c-white);color:var(--c-navy);font-family:var(--font-body)}.registration-conditions a{color:var(--c-navy)}.registration-conditions a:hover{color:var(--c-pink)}.registration-conditions .conditions-main{position:relative;display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-20) var(--sp-16) var(--sp-32)}.registration-conditions .conditions-panel{padding:var(--sp-16);border:2px solid var(--c-yellow-border);border-radius:var(--radius-l);background:var(--c-bg-yellow);font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed)}.registration-conditions .conditions-panel h2{margin:0;font-size:var(--fs-ui-heading);font-weight:800}.registration-conditions .conditions-panel ul{margin:var(--sp-12) 0 0;padding-left:var(--sp-20);display:flex;flex-direction:column;gap:var(--sp-8)}.registration-conditions .conditions-panel strong{color:var(--c-pink-strong);font-weight:800}.registration-conditions .conditions-details{border:1px solid var(--c-border);background:var(--c-white)}.registration-conditions .conditions-actions{display:flex;flex-direction:column;gap:var(--sp-12)}.registration-conditions .conditions-actions a{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--control-h);padding:var(--sp-8) var(--sp-12);border:2px solid var(--c-navy);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-navy);text-decoration:none;font-size:var(--fs-ui-body);font-weight:800;text-align:center}.registration-conditions .conditions-actions a:hover{filter:brightness(1.08)}.registration-conditions .conditions-main a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.award-criteria-note{margin:0;font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-relaxed);color:var(--c-role-viewer)}
.award-criteria-sentence{display:block}
.award-criteria-phrase{display:inline-block;max-width:100%}
.award-deadline-notice{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-16) var(--sp-16);border:1px solid var(--c-aqua-border);border-radius:var(--radius-m);background:var(--c-bg-aqua)}
.award-deadline-main{margin:0;color:var(--c-role-viewer);font-size:var(--fs-ui-body);font-weight:400;line-height:var(--lh-relaxed)}
.award-deadline-main strong{display:block;margin:var(--sp-2) 0;color:var(--c-role-viewer);font-size:var(--fs-ui-emphasis);font-weight:800;font-variant-numeric:tabular-nums}
.award-deadline-main strong span{display:inline-block;white-space:nowrap}
.award-deadline-description{margin:0;color:var(--c-role-viewer);font-size:var(--fs-ui-body);font-weight:400;line-height:var(--lh-relaxed)}
.award-mock-switch{display:flex;align-items:center;justify-content:center;min-height:var(--control-h);padding:var(--sp-4) var(--sp-8);border:1px solid var(--c-aqua-border);border-radius:var(--radius-m);background:var(--c-bg-aqua);font-size:var(--fs-ui-body);font-weight:800;text-align:center;text-decoration:none}
.award-mock-phase{font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-relaxed);color:var(--c-role-viewer)}
.award-form-section{display:flex;flex-direction:column;gap:var(--sp-16);padding-top:var(--sp-24);border-top:2px solid var(--c-aqua-border);scroll-margin-top:78px}
/* 番号の丸を見出しの行の中央に揃える。見出しと上限の文字は右の列に縦に並べる */
.award-form-heading{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:var(--sp-8);row-gap:var(--sp-4)}.award-form-heading-copy{display:contents}.award-form-heading-copy>*{grid-column:2}
.award-form-step{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--c-role-viewer);color:var(--c-white);font-size:var(--fs-ui-emphasis);font-weight:800;font-variant-numeric:tabular-nums}

.award-form-title{margin:0;font-size:var(--fs-ui-heading);font-weight:800;line-height:var(--lh-normal)}
.award-form-limit{margin:0;font-size:var(--fs-ui-body);font-weight:700;color:var(--c-role-viewer)}
.award-form-description{margin:0;font-size:var(--fs-ui-body);font-weight:400;line-height:var(--lh-relaxed);color:var(--c-role-viewer)}
.award-selection-status{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-12);min-height:var(--control-h);box-sizing:border-box;padding:var(--sp-8) var(--sp-12);border-radius:var(--radius-m);background:var(--c-bg-aqua);font-size:var(--fs-ui-body);font-weight:700}
.award-selection-status strong{font-size:var(--fs-ui-heading);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.award-selection-fields{display:flex;flex-direction:column;gap:var(--sp-12);min-width:0;margin:0;padding:0;border:0}
.award-selection-fields legend{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.award-selection-next{display:flex;align-items:center;justify-content:center;gap:var(--sp-8);min-height:var(--control-h);box-sizing:border-box;padding:var(--sp-8) var(--sp-12);border:1px solid var(--c-role-viewer);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-role-viewer);font-size:var(--fs-ui-body);font-weight:800;text-align:center;text-decoration:none}
.award-selection-next svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.award-selection-next:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.award-card-editor .award-edit-group{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.award-card-editor .award-edit-label{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-8);color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-relaxed)}
.award-card-editor .award-edit-count{font-variant-numeric:tabular-nums;white-space:nowrap}
.award-card-editor .award-edit-field{display:block;width:100%;min-width:0;min-height:var(--control-h);padding:var(--sp-4) var(--sp-8);border:1px dashed var(--c-border-input);border-radius:var(--radius-s);background:var(--c-glass-line);color:var(--c-navy);overflow:hidden;resize:none;white-space:pre-wrap;overflow-wrap:anywhere}
.award-card-editor .award-edit-field::placeholder{color:var(--c-border-input);opacity:1}
.award-card-editor .award-edit-field:focus{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-color:transparent;background:var(--c-white)}
.award-card-editor .award-edit-help{margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:400;line-height:var(--lh-relaxed)}
.award-card-editor .award-edit-comment{font-family:var(--font-body);font-size:var(--fs-ui-input);font-weight:400;line-height:var(--lh-relaxed)}
.award-card-editor .award-edit-privacy{display:flex;flex-direction:column;gap:var(--sp-4);padding:var(--sp-12) var(--sp-16);border-top:1px solid var(--c-border);background:var(--c-bg-soft)}
.award-card-editor .award-edit-anonymous{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--control-h);font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-relaxed);cursor:pointer}
.award-card-editor .award-edit-anonymous input{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:var(--c-role-viewer);}
#award-details{scroll-margin-top:78px}
.award-candidate-select{display:flex;align-items:flex-start;gap:var(--sp-8);min-height:70px;box-sizing:border-box;padding:var(--sp-12);}
.award-candidate-content{display:flex;flex-direction:column;gap:var(--sp-8);flex-grow:1;min-width:0}
.award-candidate-summary{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:start;gap:var(--sp-8)}
.award-candidate-thumbnail{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;border:1px solid var(--c-aqua-border);border-radius:var(--radius-m);overflow:hidden;background:var(--c-bg-aqua)}
.award-candidate-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.award-candidate-placeholder{display:flex;flex-direction:column;align-items:center;gap:var(--sp-2);color:var(--c-border-input);font-size:var(--fs-ui-small);font-weight:700}
.award-candidate-placeholder svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8}
.award-candidate-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-4);min-width:0;overflow-wrap:anywhere}
.award-candidate-count{margin:0;text-align:right;font-size:var(--fs-ui-meta);font-weight:800;scroll-margin-top:74px}
.award-candidate-pagination{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:var(--sp-8)}
.award-candidate-pagination button{min-height:var(--control-h);padding:var(--sp-8) var(--sp-8);border:2px solid var(--c-aqua-border);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-role-viewer);font:inherit;font-size:var(--fs-ui-body);font-weight:800;cursor:pointer}
.award-candidate-pagination button:disabled{color:var(--c-border-input);cursor:default}
.award-candidate-pagination span{font-size:var(--fs-ui-meta);font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
@media(max-width:360px){.award-form-title{font-size:var(--fs-ui-heading)}.award-form-step{width:30px;height:30px}.award-candidate-select{gap:var(--sp-8);padding:var(--sp-8);}.award-candidate-summary{grid-template-columns:88px minmax(0,1fr);gap:var(--sp-8)}}
.my-disclosure.my-award-disclosure{border-color:var(--c-role-viewer)}
.my-disclosure.my-award-disclosure>summary{color:var(--c-role-viewer)}
.award-registration-body{display:flex;flex-direction:column;gap:var(--sp-16);padding:var(--sp-12);min-width:0}
#award-registration{scroll-margin-top:calc(var(--control-h-lg) + var(--sp-16))}


.award-priority-filter{display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--fs-ui-meta);font-weight:800}
.award-priority-filter :is(select,input){box-sizing:border-box;width:100%;min-width:0;min-height:var(--control-h);padding:var(--sp-8);border:2px solid var(--c-role-viewer);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-role-viewer);font:inherit;font-size:var(--fs-ui-input);font-weight:400;font-family:var(--font-body);}
.award-priority-filter input{font-size:var(--fs-16)}
.award-selection-remove{min-height:var(--control-h);padding:var(--sp-8) var(--sp-12);border:2px solid var(--c-role-viewer);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-role-viewer);font:inherit;font-size:var(--fs-ui-body);font-weight:800;cursor:pointer}
.award-candidate-actions{display:flex;align-items:center;justify-content:flex-end;padding:var(--sp-8) var(--sp-12);border-top:1px solid var(--c-aqua-border)}
.award-candidate-work-link{display:flex;align-items:center;min-height:var(--control-h);font-size:var(--fs-ui-meta);font-weight:800}

/* Poster-facing catalogue and creator-facing registration use distinct role tokens. */
.creators-shell.creator-entry-shell,.creator-manager{--creator-role-color:var(--c-role-collaborator);--creator-role-bg:var(--c-bg-lilac);--creator-role-border:var(--c-lilac-border);--creator-role-deco:var(--c-deco-lilac)}
body{margin:0;background:var(--c-white);color:var(--c-role-common);font-family:var(--font-body)}
.creators-shell{position:relative;overflow:clip;width:390px;box-sizing:border-box;display:flex;flex-direction:column;background:var(--c-white);color:var(--c-role-common)}
.creators-main{display:flex;flex-direction:column;gap:var(--sp-20);padding:var(--sp-20) var(--sp-16) var(--sp-32)}
.creators-main h2,.creator-manager h2{margin:0;font-family:var(--font-heading);font-size:var(--fs-ui-heading);font-weight:800;line-height:var(--lh-normal)}
.creators-intro{margin:0;font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed)}
.creator-note{margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-relaxed);overflow-wrap:anywhere}
.creator-contact-notice{margin:0;padding:var(--sp-12);border:2px solid var(--c-yellow-border);border-radius:var(--radius-m);background:var(--c-bg-yellow);color:var(--c-pink-strong);font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-relaxed);overflow-wrap:anywhere}.creator-contact-notice strong{font-weight:inherit}
#creator-confirmation .creator-contact-notice{margin-bottom:var(--sp-12)}
.creator-actions{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.creator-button{box-sizing:border-box;display:flex;align-items:center;justify-content:center;min-width:0;min-height:var(--control-h);padding:var(--sp-8) var(--sp-12);border:2px solid var(--creator-role-color,var(--c-role-creator));border-radius:var(--radius-m);background:var(--c-white);color:var(--creator-role-color,var(--c-role-creator));font-family:inherit;font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-normal);text-align:center;text-decoration:none;cursor:pointer;overflow-wrap:anywhere}
.creator-button:hover{background:var(--creator-role-bg,var(--c-bg-pink));color:var(--creator-role-color,var(--c-role-creator))}.creator-button.primary{min-height:var(--control-h-lg);background:var(--creator-role-color,var(--c-role-creator));color:var(--c-white)}.creator-button.primary:hover{filter:brightness(1.08)}.creator-button.danger{border-color:var(--c-error);color:var(--c-error)}.creator-button:disabled{border-color:var(--c-border-input);background:var(--c-bg-muted);color:var(--c-text-sub);cursor:default}
.creator-button:focus-visible,.creators-main :focus-visible,.creator-manager :focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.creator-filters{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-12);border:1px solid var(--c-border);border-radius:var(--radius-l);background:var(--c-bg-soft)}
.creator-field{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}.creator-field>label{font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-normal)}
.creator-field input,.creator-field textarea,.creator-field select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:var(--control-h);padding:var(--sp-8);border:2px solid var(--c-role-common);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-role-common);line-height:var(--lh-normal);font-size:var(--fs-ui-input);font-weight:400;font-family:var(--font-body);}.creator-field textarea{resize:vertical;}.creator-field input[aria-invalid='true']{border-color:var(--c-error);}
.creator-filter-options{display:flex;flex-wrap:wrap;gap:var(--sp-12)}.creator-checkbox{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--control-h);font-size:var(--fs-ui-body);font-weight:700;cursor:pointer}.creator-checkbox input{width:22px;height:22px;margin:0;accent-color:var(--creator-role-color,var(--c-role-creator))}
.creator-results{display:flex;flex-direction:column;gap:var(--sp-24)}.creator-result-count{margin:0;font-size:var(--fs-ui-body);font-weight:800}
.creator-card,.creator-detail-panel{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-16);border:2px solid var(--creator-role-color,var(--c-role-creator));border-radius:var(--radius-l);background:var(--c-white);min-width:0}
.creator-card{padding:var(--sp-12);--creator-role-color:var(--c-role-common);--creator-role-bg:var(--c-bg-soft);--creator-role-border:var(--c-border);--creator-role-deco:var(--c-bg-muted);box-shadow:var(--shadow-offset) var(--creator-role-deco);overflow:hidden}
.creator-card>.creator-card-top{align-items:flex-start;margin:calc(-1 * var(--sp-12)) calc(-1 * var(--sp-12)) 0;padding:var(--sp-8) var(--sp-12);border-bottom:1px solid var(--creator-role-border);background:var(--creator-role-bg)}
.creator-card-top{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8)}.creator-category,.creator-status{display:inline-flex;align-items:center;min-height:var(--tag-h);padding:0 var(--sp-8);border-radius:var(--radius-pill);background:var(--creator-role-bg,var(--c-bg-pink));color:var(--creator-role-color,var(--c-role-creator));font-size:var(--fs-ui-meta);font-weight:800;line-height:var(--lh-normal)}.creator-status{background:var(--c-bg-muted);color:var(--c-text-sub)}.creator-status[data-open='true']{background:var(--c-success-bg);color:var(--c-success)}
.creator-card h2,.creator-managed-card h3{margin:0;font-size:var(--fs-ui-heading);font-weight:800;line-height:var(--lh-normal);overflow-wrap:anywhere}
.creator-profile{display:flex;align-items:center;gap:var(--sp-12);min-height:var(--control-h);color:var(--c-role-common);text-decoration:none}.creator-profile img{width:44px;height:44px;flex-shrink:0;border-radius:50%;object-fit:cover}.creator-profile :is(div,.creator-profile-copy){min-width:0;display:flex;flex-direction:column;gap:var(--sp-2);font-size:var(--fs-ui-body);font-weight:800;overflow-wrap:anywhere}.creator-profile small{color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:700}
.creator-description{margin:0;font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed);white-space:pre-wrap;overflow-wrap:anywhere}
.creator-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12);margin:0}.creator-facts>div{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}.creator-facts dt{font-size:var(--fs-ui-meta);font-weight:700;color:var(--c-text-sub);line-height:var(--lh-normal)}.creator-facts dd{margin:0;font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-normal);overflow-wrap:anywhere}.creator-facts .creator-wide{grid-column:1/-1}.creator-price{color:var(--creator-role-color,var(--c-role-creator))}
.creator-detail-group{display:flex;flex-direction:column;gap:var(--sp-8);padding-top:var(--sp-16);border-top:1px solid var(--c-border)}.creator-detail-group h2{font-size:var(--fs-ui-heading)}
.creator-detail-facts{display:flex;flex-direction:column;gap:0;padding:var(--sp-12);border-radius:var(--radius-m);background:var(--c-bg-soft)}
.creator-detail-facts>div{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-4) var(--sp-12);padding:var(--sp-12) 0}
.creator-detail-facts>div:first-child{padding-top:0}.creator-detail-facts>div:last-child{padding-bottom:0}
.creator-detail-facts>div+div{border-top:1px solid var(--c-border)}
.creator-detail-facts dt{flex-shrink:0}.creator-detail-facts dd{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.creator-detail-facts>.creator-card-pricing dd{display:flex;flex-direction:column;gap:var(--sp-4);align-items:flex-end;margin-left:auto;text-align:right}
.creator-detail-facts .creator-price{font-size:var(--fs-ui-heading);font-weight:900;line-height:var(--lh-tight)}
.creator-detail-methods{align-self:flex-start;margin:0;padding:var(--sp-8) var(--sp-12);border-radius:var(--radius-m);background:var(--creator-role-bg,var(--c-bg-pink));color:var(--creator-role-color,var(--c-role-creator));font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-normal);overflow-wrap:anywhere}
.creator-application{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-16);border:1px solid var(--creator-role-border,var(--c-pink-border));border-radius:var(--radius-l);background:var(--creator-role-bg,var(--c-bg-pink))}
.creator-empty,.creator-feedback,.creator-error,.creator-confirm{margin:0;padding:var(--sp-12);border-radius:var(--radius-m);background:var(--c-bg-soft);font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed);overflow-wrap:anywhere}.creator-feedback{background:var(--c-success-bg);color:var(--c-success)}.creator-error{background:var(--c-error-bg);color:var(--c-error)}.creator-confirm{display:flex;flex-direction:column;gap:var(--sp-12);background:var(--c-error-bg);color:var(--c-error)}.creator-confirm p{margin:0}
.creator-form{display:flex;flex-direction:column;gap:var(--sp-24)}.creator-form-group{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-12);border:2px solid var(--creator-role-color,var(--c-role-collaborator));border-radius:var(--radius-l);background:var(--c-white);box-shadow:var(--shadow-offset) var(--c-deco-lilac);overflow:hidden}.creator-form-group h2{margin:calc(-1 * var(--sp-12)) calc(-1 * var(--sp-12)) 0;padding:var(--sp-8) var(--sp-12);border-bottom:1px solid var(--c-lilac-border);background:var(--c-bg-lilac);color:var(--creator-role-color,var(--c-role-collaborator))}
.creator-required{font-size:var(--fs-ui-meta);font-weight:800;padding:var(--sp-2) var(--sp-4);border-radius:var(--radius-s);background:var(--creator-role-deco,var(--c-deco-pink));color:var(--creator-role-color,var(--c-role-creator))}
.creator-optional{font-size:var(--fs-ui-meta);font-weight:700;color:var(--c-text-sub)}.creator-field-error{margin:0;color:var(--c-error);font-size:var(--fs-ui-meta);font-weight:800;line-height:var(--lh-relaxed)}
.creator-manager{display:flex;flex-direction:column;gap:var(--sp-24);padding:var(--sp-16);border:1px solid var(--creator-role-border,var(--c-pink-border));border-radius:var(--radius-l);background:var(--creator-role-bg,var(--c-bg-pink));min-width:0}.creator-manager h2{color:var(--creator-role-color,var(--c-role-creator))}.creator-managed-card{display:flex;flex-direction:column;gap:var(--sp-12);min-width:0;padding:var(--sp-12);border:2px solid var(--c-role-collaborator);border-radius:var(--radius-l);background:var(--c-white);box-shadow:var(--shadow-offset) var(--c-deco-lilac);overflow:hidden}.creator-manager .creator-actions>*{flex:1 1 40%}.creator-managed-card .creator-status{align-self:flex-end}
.creator-managed-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:var(--sp-8);margin:calc(-1 * var(--sp-12)) calc(-1 * var(--sp-12)) 0;padding:var(--sp-8) var(--sp-12);border-bottom:1px solid var(--c-lilac-border);background:var(--c-bg-lilac);color:var(--c-role-collaborator)}
.creator-top-callout{display:flex;flex-direction:column;gap:var(--sp-12);min-width:0;padding:var(--sp-16);border:1px solid var(--c-border);border-radius:var(--radius-xl);background:var(--c-bg-lilac);color:var(--c-navy)}
#top-creators.creator-top-callout{border:2px solid var(--c-role-collaborator);box-shadow:var(--shadow-offset) var(--c-deco-lilac)}
.creator-top-heading{display:flex;flex-direction:column}
.creator-top-callout h2{margin:0;font-family:var(--font-heading);font-size:var(--fs-ui-heading);font-weight:800;line-height:var(--lh-normal);color:var(--c-role-collaborator);text-wrap:balance}
.creator-top-callout p{margin:0;color:var(--c-text-sub);font-size:var(--fs-ui-body);font-weight:400;line-height:var(--lh-relaxed);text-wrap:pretty}
.creator-top-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-8);margin:0;padding:0;list-style:none}
.creator-top-fields li{box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:var(--sp-4);min-width:0;min-height:var(--control-h);padding:var(--sp-8) var(--sp-4);border-radius:var(--radius-m);background:var(--c-white);color:var(--c-role-collaborator);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal)}
.creator-top-fields svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.creator-top-navigation{position:relative;display:flex;flex-direction:column;gap:var(--sp-8)}
.creator-top-actions-title{margin:0;color:var(--c-role-collaborator);font-size:var(--fs-ui-emphasis);font-weight:800;line-height:var(--lh-normal)}
.creator-top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12)}
.creator-top-actions .creator-button>span{white-space:nowrap}
.creator-top-register{--creator-role-color:var(--c-role-collaborator);--creator-role-bg:var(--c-bg-lilac)}
.creator-top-callout .creator-button{justify-content:space-between;gap:var(--sp-8);min-height:var(--control-h-lg);padding:var(--sp-8) var(--sp-12);border-color:var(--creator-role-color,var(--c-role-creator));background:var(--c-white);color:var(--creator-role-color,var(--c-role-creator))}
.creator-top-callout .creator-button:hover{background:var(--creator-role-bg,var(--c-bg-pink))}
.creator-top-callout .creator-button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.creator-top-callout .creator-button svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:360px){.creator-top-callout{padding:var(--sp-16)}.creator-top-callout h2{font-size:var(--fs-ui-heading)}.creator-top-callout .creator-button{font-size:var(--fs-ui-body)}}
/* PCレイアウト：TOPの紹介パネルは全幅の横長にし、見出し・説明を左、分野と検索・登録のボタンを右に置く */
.creator-page-footer{margin:0;padding:0 var(--sp-16) var(--sp-24);color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-relaxed)}
.creator-sample{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0;margin-top:var(--sp-8)}
.creator-sample-title{margin:0;font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-normal)}
.creator-sample-player{min-width:0;overflow:hidden;border:1px solid var(--c-border);border-radius:var(--radius-m);background:var(--c-navy-deep)}
.creator-sample-frame{display:block;width:100%;min-height:200px;aspect-ratio:16/9;border:0}
.creator-sample-frame:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
/* List cards group the offer price and secondary usual price, then align recruitment details. */
.creator-card .creator-description{font-weight:400}
.creator-card-facts{display:flex;flex-direction:column;gap:0;padding:var(--sp-12);border-radius:var(--radius-m);background:var(--creator-role-bg,var(--c-bg-soft))}
.creator-card-facts>div{flex-direction:row;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:var(--sp-4) var(--sp-12);padding:var(--sp-8) 0}
.creator-card-facts>div:first-child{padding-top:0}.creator-card-facts>div:last-child{padding-bottom:0}
.creator-card-facts>div+div{border-top:1px solid var(--c-border)}
.creator-card-facts dt{flex-shrink:0}.creator-card-facts dd{margin-left:auto;text-align:right;font-variant-numeric:tabular-nums}
.creator-card-facts>.creator-card-pricing{display:flex;flex-wrap:wrap;align-items:baseline}
.creator-card-facts>.creator-card-pricing dt{white-space:nowrap}
.creator-card-facts>.creator-card-pricing dd{display:contents}
.creator-card-facts .creator-price{margin-left:auto}
.creator-card-facts .creator-usual-price{flex-basis:100%;text-align:right}
.creator-card-facts .creator-price{font-size:var(--fs-ui-heading);font-weight:900;line-height:var(--lh-tight)}
.creator-usual-price{color:var(--c-text-sub);font-size:var(--fs-ui-meta);font-weight:700;line-height:var(--lh-normal)}
.creator-card>.creator-card-top h2{flex:1;min-width:0;margin:0;color:var(--creator-role-color)}.creator-card>.creator-card-top .creator-status{flex-shrink:0}

/* PCレイアウト：一覧は検索条件を左（スクロールに追従）、結果のカードを右に幅288px以上で並べる（1280pxで2列）。登録の案内は結果の下で横長にする */
@media(min-width:960px){.creators-catalogue{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--sp-20) var(--sp-32);align-items:start;padding-top:var(--sp-24);padding-bottom:var(--sp-40)}.creators-catalogue>*{grid-column:1/-1}.creators-catalogue>.creator-filters{grid-column:1;grid-row:span 2;position:sticky;top:74px}.creators-catalogue>.creator-result-count,.creators-catalogue>.creator-results{grid-column:2}.creators-catalogue>.creator-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));align-items:start}.creators-catalogue>.creator-results>.creator-empty{grid-column:1/-1}.creators-catalogue>.creator-top-callout{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8) var(--sp-24);align-items:center}.creators-catalogue>.creator-top-callout>.creator-button{grid-column:2;grid-row:1/3}}
/* Readable registration preview before initialization and in script-free mode. */
.creator-preview-fields{display:flex;flex-direction:column;gap:var(--sp-20);min-width:0;padding:0;margin:0;border:0}
.creator-form input::placeholder,.creator-form textarea::placeholder{color:var(--c-text-sub);opacity:.65;font-weight:400}

/* iOS date controls miscalculate padded host widths: https://bugs.webkit.org/show_bug.cgi?id=301648 */
.creator-field input[type="datetime-local"],.creator-form input[type="date"]{display:block;box-sizing:border-box;width:100%;min-width:0;max-width:100%;padding:0;-webkit-appearance:none;appearance:none;text-align:left;font-size:var(--fs-ui-input);font-weight:400;font-family:var(--font-body);}
.creator-field input[type="datetime-local"]::-webkit-date-and-time-value,.creator-form input[type="date"]::-webkit-date-and-time-value{box-sizing:border-box;min-width:0;max-width:100%;padding:var(--sp-8);text-align:left}
.creator-field input[type="datetime-local"]::-webkit-datetime-edit,.creator-form input[type="date"]::-webkit-datetime-edit{min-width:0;max-width:100%;padding:var(--sp-8);text-align:left}

.creator-application-methods{min-width:0;margin:0;padding:var(--sp-12);border:2px solid var(--c-role-collaborator);border-radius:var(--radius-m)}
.creator-application-methods legend{padding:0 var(--sp-4);font-size:var(--fs-ui-body);font-weight:800;color:var(--c-role-collaborator)}
.creator-method-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4) var(--sp-12);margin-top:var(--sp-8)}
.creator-method-option{display:flex;align-items:center;gap:var(--sp-8);min-height:var(--control-h);font-size:var(--fs-ui-body);font-weight:700;cursor:pointer}
.creator-form .creator-method-option input{flex:0 0 auto;width:var(--fs-22);height:var(--fs-22);min-height:0;margin:0;padding:0;accent-color:var(--c-role-collaborator);}
.creator-method-option input:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.creator-application-methods:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}

.creator-managed-statuses{display:flex;align-items:center;gap:var(--sp-4);white-space:nowrap}
.creator-managed-title{grid-column:1/-1;margin:0;color:var(--c-role-common);font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed);overflow-wrap:anywhere}

.creator-card[data-field="mix"]{--creator-role-color:var(--c-role-collaborator);--creator-role-bg:var(--c-bg-lilac);--creator-role-border:var(--c-lilac-border);--creator-role-deco:var(--c-deco-lilac)}
.creator-card[data-field="illustration"]{--creator-role-color:var(--c-role-creator);--creator-role-bg:var(--c-bg-pink);--creator-role-border:var(--c-pink-border);--creator-role-deco:var(--c-deco-pink)}
.creator-card[data-field="video"],.creator-card[data-field="movie"]{--creator-role-color:var(--c-role-viewer);--creator-role-bg:var(--c-bg-aqua);--creator-role-border:var(--c-aqua-border);--creator-role-deco:var(--c-deco-aqua)}
.creator-card[data-field="instrumental"]{--creator-role-color:var(--c-gold-text);--creator-role-bg:var(--c-bg-yellow);--creator-role-border:var(--c-yellow-border);--creator-role-deco:var(--c-bg-yellow)}
.creator-card>.creator-button{border-color:var(--creator-role-color);color:var(--creator-role-color)}

.creator-card>.creator-button,.creator-filters>.creator-button{align-self:flex-start;justify-self:start;width:fit-content;max-width:100%}

.production-header {
  display: block;
  position: sticky;
  top: 0;
  z-index: 40;
  flex: 0 0 auto;
  margin-bottom: var(--sp-8);
  color: var(--c-navy);
  transform: translateY(calc(-1 * var(--header-scroll-offset, 0px)));
}
.production-header * { box-sizing: border-box; }
.production-header[data-scroll-hidden="true"] { pointer-events: none; }
.site-header-surface {
  position: relative;
  padding: 0 var(--sp-8);
  border-bottom: 2px solid var(--c-border);
  background: linear-gradient(105deg, var(--c-bg-pink), var(--c-white) 50%, var(--c-bg-aqua));
}
/* ブランドの右に、表示中の操作（参加作品・再生キュー・チャットルーム・アカウント）だけを並べる */
.site-header-row { opacity: var(--header-scroll-opacity, 1); display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: auto; align-items: center; gap: var(--sp-4); min-height: 56px; }
.site-brand { display: flex; flex-direction: column; justify-content: center; gap: var(--sp-2); min-width: 0; min-height: var(--control-h); color: var(--c-navy); font-family: var(--font-heading); font-weight: 900; text-decoration: none; }
.site-brand-first { font-size: var(--fs-10); line-height: var(--lh-tight); color: var(--c-navy); }
.site-brand-name { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-12); line-height: var(--lh-tight); white-space: nowrap; }
.site-listen-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-4); min-height: var(--control-h); padding: var(--sp-4); border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-white); color: var(--c-navy); font-size:var(--fs-ui-meta); font-weight: 800; text-decoration: none; white-space: nowrap; }
.site-listen-link svg { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.site-listen-link[aria-current] { border-color: var(--c-role-common); background: var(--c-bg-soft); color: var(--c-role-common); }
.site-chat-link { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--control-h); height: var(--control-h); border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-white); color: var(--c-navy); text-decoration: none; }
.site-chat-link[hidden] { display: none; }
.site-chat-link svg { width: var(--sp-24); height: var(--sp-24); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-chat-link:hover { background: var(--c-bg-soft); color: var(--c-role-common); }
.site-chat-link[aria-current] { border-color: var(--c-role-common); background: var(--c-bg-soft); color: var(--c-role-common); }
.site-account { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--control-h); height: var(--control-h); padding: 0; flex-shrink: 0; border: 1px solid var(--c-border); border-radius: 50%; background: var(--c-white); color: var(--c-navy); text-decoration: none; cursor: pointer; }
.site-account.is-logged-in { border: 2px solid var(--c-aqua); }
.site-account-avatar { display: block; width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--c-deco-aqua); }
.site-account-status { position: absolute; right: -1px; bottom: -1px; display: grid; place-items: center; width: 15px; height: 15px; border: 2px solid var(--c-white); border-radius: 50%; background: var(--c-aqua-text); color: var(--c-white); }
.site-account-status svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.site-account-x { display: grid; place-items: center; }
.site-account-x svg { width: 20px; height: 20px; fill: currentColor; }
.site-login { background: var(--c-bg-soft); }
/* design-exception: 外部サービスのロゴは各社の指定色 */
.site-login { color: #242433; }
/* /design-exception */
.site-menu-close { display: grid; place-items: center; width: 44px; height: var(--control-h); padding: 0; border: 1px solid var(--c-border); border-radius: var(--radius-m); background: var(--c-white); color: var(--c-navy); cursor: pointer; }
.site-menu-close svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.site-account.is-open { border-color: var(--c-role-common); background: var(--c-bg-soft); color: var(--c-role-common); }
/* メニューは画面中央のポップアップ。幅480pxまでで「参加規約・プライバシー」「クリエイターの参加方法」を1行に収める */
.site-menu-panel { position: fixed; inset: 0 0 auto; width: min(calc(100% - 24px), 480px); max-width: none; max-height: calc(100dvh - 24px); margin: var(--sp-12) auto; padding: 0; border: 0; border-radius: var(--radius-l); background: var(--c-white); color: var(--c-navy); box-shadow: var(--shadow-float); overflow: hidden; }
.site-menu-panel:not([open]) { display: none; }
.site-menu-panel[open] { display: flex; flex-direction: column; }
.site-menu-panel::backdrop { background: var(--c-overlay); }
.site-menu-topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex: 0 0 auto; min-height: 56px; padding: var(--sp-8) var(--sp-12); border-bottom: 1px solid var(--c-border); background: var(--c-bg-soft); }
.site-menu-heading { margin: 0; font-family: var(--font-heading); font-size:var(--fs-ui-heading); font-weight: 900; }
.site-menu-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: var(--sp-12) var(--sp-12) calc(var(--sp-12) + env(safe-area-inset-bottom, 0px)); }
.site-menu-group + .site-menu-group { margin-top: var(--sp-12); padding-top: var(--sp-12); border-top: 1px solid var(--c-border); }
.site-menu-group { --site-menu-role-color: var(--c-role-common); }
.site-menu-group-heading { margin: 0 0 var(--sp-4); color: var(--site-menu-role-color); font-family: var(--font-heading); font-size:var(--fs-ui-body); font-weight: 900; line-height: var(--lh-relaxed); }
.site-menu-group[data-group="creator"] { --site-menu-role-color: var(--c-role-creator); }
.site-menu-group[data-group="collaborator"] { --site-menu-role-color: var(--c-role-collaborator); }
.site-menu-group[data-group="viewer"] { --site-menu-role-color: var(--c-role-viewer); }
.site-menu-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.site-menu-links a:last-child:nth-child(odd) { grid-column: 1 / -1; }
.site-menu-links a { display: flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: var(--sp-8) var(--sp-4); border: 1px solid var(--site-menu-role-color); border-radius: var(--radius-m); background: var(--c-white); color: var(--site-menu-role-color); font-size:var(--fs-ui-body); font-weight: 800; line-height: var(--lh-relaxed); text-align: center; text-decoration: none; }
.site-menu-links a[aria-current] { background: var(--site-menu-role-color); color: var(--c-white); box-shadow: inset 0 0 0 2px var(--c-white); }
.site-menu-links a:hover { background: var(--c-bg-soft); color: var(--site-menu-role-color); }
.site-menu-links a[aria-current]:hover { background: var(--site-menu-role-color); color: var(--c-white); }
.site-listen-link:hover { background: var(--c-bg-soft); color: var(--c-role-common); }
.site-menu-group:is([data-group="creator"], [data-group="viewer"], [data-group="collaborator"]) .site-menu-links a { border-color: var(--site-menu-role-color); background: var(--site-menu-role-color); color: var(--c-white); }
.site-menu-group:is([data-group="creator"], [data-group="viewer"], [data-group="collaborator"]) .site-menu-links a:hover { background: var(--site-menu-role-color); color: var(--c-white); filter: brightness(1.08); }
.site-menu-links a[aria-current]:focus-visible { outline: var(--focus-ring-inverse); outline-offset: var(--focus-offset); }
.site-menu-group:is([data-group="creator"], [data-group="viewer"], [data-group="collaborator"]) .site-menu-links a:focus-visible { outline: var(--focus-ring-inverse); outline-offset: var(--focus-offset); }
.production-header a:focus-visible, .production-header button:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
html { scroll-padding-top: 72px; scrollbar-gutter: stable; }
html.site-menu-is-open { overflow: hidden; }
/* スマホだけ、パネルを開いている間は背面のスクロールを止める（PCは背面のメイン画面を操作でき、ヘッダーのstickyも保つ） */
@media not all and (min-width: 960px) { html.has-playback-panel, html.has-playback-panel body { overflow: hidden; overscroll-behavior: none; } }
/* PCレイアウト：背景は画面いっぱい、ブランドと操作ボタンは中身の最大幅の端に揃える */
@media (min-width: 960px) {
  .site-header-surface { padding: 0; }
  .site-header-row { max-width: var(--layout-max); margin: 0 auto; padding: 0 var(--sp-16); gap: var(--sp-8); }
  .site-brand-first { font-size: var(--fs-11); }
  .site-brand-name { font-size: var(--fs-16); }
  .site-brand-year { font-size: var(--fs-11); }
  .site-listen-link { padding: var(--sp-4) var(--sp-12); font-size:var(--fs-ui-body); }
}
@media (max-width: 600px) {
  .site-menu-panel { width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
}
@media (max-width: 360px) {
  /* チャットルームのボタンを足しても、320px幅でブランドが切れないようにする */
  .site-header-row { gap: var(--sp-2); }
  .site-brand-name { gap: var(--sp-2); font-size: clamp(var(--fs-10), 3.1vw, var(--fs-11)); }
  .site-listen-link { min-width: 44px; font-size:var(--fs-ui-small); }
  .site-listen-link svg { width: 15px; height: 15px; }
  .site-listen-link span { display: none; }
  .site-menu-links a { font-size:var(--fs-ui-meta); }
}
/* スマホのヘッダーのブランド文字は、どの画面でも丸ゴシックにそろえる（メニューは対象外） */
@media not all and (min-width: 960px) { .site-brand { font-family: var(--font-display); } }

/* Bind real API content to the approved components. Sizes and colors use shared tokens. */
body{position:relative;isolation:isolate;line-height:var(--lh-relaxed)}
.production-header{max-width:390px;margin:0 auto var(--sp-8)}
main#app{max-width:390px;padding:var(--sp-20) var(--sp-16) var(--sp-32)}
main#app:before{display:none}
body[data-page=home] main#app{padding-top:var(--sp-8)}
.home-main .hero-logo{width:358px;height:165px;object-fit:contain}
.home-main .award-design-guide-note{display:none}
.home-main .award-feature-copy{font-size:var(--fs-ui-body);font-weight:700}
.site-brand:hover{color:var(--c-navy)}
.site-account>svg{width:var(--sp-20);height:var(--sp-20);fill:currentColor}
.site-account.is-logged-in>svg{fill:none;stroke:currentColor;stroke-width:1.8;width:var(--sp-32);height:var(--sp-32)}
.site-account img{width:var(--sp-32);height:var(--sp-32);border-radius:50%;object-fit:cover}
.site-account .account-status{position:absolute;right:-1px;bottom:-1px;display:grid;place-items:center;width:15px;height:15px;border:2px solid var(--c-white);border-radius:50%;background:var(--c-aqua-text);color:var(--c-white)}
.site-account .account-status svg{width:9px;height:9px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
#menu-dialog.site-menu-panel{inset:0 0 auto;width:min(calc(100% - var(--sp-24)),480px);max-width:none;max-height:calc(100dvh - var(--sp-24));margin:var(--sp-12) auto;padding:0;border:0;overflow:hidden}
#menu-dialog .site-menu-body{display:block;min-height:0;overflow-y:auto;padding:var(--sp-12)}
/* グループは囲まず、モックと同じ区切り線で分ける（縦に詰めてスクロールを出さない） */
#menu-dialog .menu-group{margin:0;padding:0;border:0;border-radius:0}#menu-dialog .menu-group+.menu-group{margin-top:var(--sp-12);padding-top:var(--sp-12);border-top:1px solid var(--c-border)}#menu-dialog .menu-group h3{margin:0 0 var(--sp-4);padding:0}
#menu-dialog .site-menu-topbar{flex-shrink:0}
#menu-dialog .site-menu-heading{margin:0;font-size:var(--fs-ui-heading)}
#menu-dialog .site-menu-close{position:static;float:none;flex-shrink:0;border-radius:var(--radius-m);font-size:var(--fs-14)}
@media(max-width:600px){#menu-dialog.site-menu-panel{width:100%;height:100dvh;max-height:100dvh;margin:0;border-radius:0}}
footer#site-footer{max-width:390px;margin:auto;text-align:left;display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-20) var(--sp-16) var(--sp-32);font-size:var(--fs-ui-meta);line-height:var(--lh-relaxed)}
footer#site-footer a{margin:0;display:inline;min-height:0}
footer#site-footer.home-footer{background:var(--c-navy);color:var(--c-white)}
.home-footer a{color:var(--c-white)}
.home-footer .footer-official-link{padding-block:var(--sp-16);vertical-align:baseline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.home-footer .footer-warning{font-size:var(--fs-ui-body);font-weight:800}
.home-footer .footer-terms{align-self:flex-start;display:inline-flex!important;align-items:center;min-height:var(--control-h)!important;font-size:var(--fs-ui-body);font-weight:800}
.page-return-links{display:flex;flex-direction:column;gap:var(--sp-8);margin-top:var(--sp-24);font-size:var(--fs-ui-body);font-weight:700}
.page-return-links a,footer#site-footer .page-return-links a{display:flex;align-items:center;min-height:var(--control-h)}
body[data-page=login] main#app{display:flex;flex-direction:column;gap:var(--sp-20);padding-top:var(--sp-24)}
.login-main h1,.login-main p{margin:0}
.login-button{padding:var(--sp-8) var(--sp-16)}
.login-consent input{accent-color:var(--c-role-common);}
body[data-page=conditions] main#app{display:flex;flex-direction:column;gap:var(--sp-16)}
.conditions-panel h2,.conditions-panel p{margin:0}

body[data-page=creators] main#app,body[data-page=creator] main#app{display:flex;flex-direction:column;gap:var(--sp-24)}
.creators-main h1,.creators-main p{margin:0}
.creator-profile .avatar{display:grid;place-items:center;width:var(--control-h);height:var(--control-h);border-radius:50%}
.creator-card-top .creator-category{margin-right:auto}
.creator-card h2 a{color:inherit;text-decoration:none}
.creator-filters .creator-field{margin:0}
.creator-form .field{margin:0}
.creator-form-group{margin:0;min-width:0}
.creator-form-group>fieldset:not(.creator-application-methods)>legend{font-size:var(--fs-ui-emphasis);font-weight:800;color:var(--c-role-collaborator)}
.creator-form .creator-field input,.creator-form .creator-field textarea,.creator-form .creator-field select{;font-size:var(--fs-ui-input);font-weight:400;font-family:var(--font-body);}
.creator-form .creator-actions{display:flex;gap:var(--sp-8);flex-wrap:wrap}
.creator-managed-card .actions{margin:0}
body:is([data-page=list],[data-page=work]) main#app{display:flex;flex-direction:column;gap:var(--sp-16)}
body:is([data-page=list],[data-page=work]) main#app>h1{margin:0}
.catalogue-summary{padding:var(--sp-12);border:2px solid var(--c-navy);border-radius:var(--radius-m);background:var(--c-white)}
.catalogue-summary .my-participation-progress{padding:0;border:0;gap:var(--sp-12)}
.catalogue-summary .award-design-guide{display:none}
.catalogue-summary .award-listening-progress{margin:0}
.trending-heading-icon svg,.trending-play svg{width:var(--sp-20);height:var(--sp-20);fill:none;stroke:currentColor;stroke-width:1.8}
.work-browse{margin:0 calc(-1 * var(--sp-16));padding:var(--sp-12) 0;background:var(--c-bg-lilac);display:flex;flex-direction:column;gap:var(--sp-8)}
.work-search-controls,.work-search-results{display:contents}
/* 作品ページの列の囲み。スマホは箱を作らず、右の列はPCだけで使う */
.work-page-main{display:contents}.work-page-side{display:none}
/* 検索結果の見出しは、検索操作がサイドバーに離れるPCの参加作品一覧だけで表示する */
.work-results-heading{display:none}
.work-search-controls>:not(#work-results),.work-search-results>:not(#work-results){margin-right:var(--sp-16);margin-left:var(--sp-16);width:auto}
.work-browse .work-art,.work-browse .work-thumbnail-link{border-radius:0}
.work-browse .work-caption{padding-right:var(--sp-16);padding-left:var(--sp-16)}
#work-recommendations{margin-right:calc(-1 * var(--sp-16));margin-left:calc(-1 * var(--sp-16))}
.work-browse-heading{font-size:var(--fs-ui-heading);margin:0}
#work-results .work-grid{grid-template-columns:minmax(0,1fr)}
.work-filter-help{margin:0;font-size:var(--fs-ui-meta);font-weight:700;color:var(--c-text-sub)}
.filters{margin:0;gap:var(--sp-8)}
.filters label{position:relative;border:2px solid var(--c-navy);background:var(--c-white);color:var(--c-navy);font-size:var(--fs-ui-body);font-weight:800;padding:0 var(--sp-12)}
.filters label:has(input:checked){background:var(--c-navy);color:var(--c-white);border-color:var(--c-navy)}
.filters input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.filters label:focus-within{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.work-tile{padding:0;border:0;border-radius:0;background:transparent;overflow:visible}
.work-tile>.work-thumbnail-link{display:block;border-radius:var(--radius-m)}
.work-art{position:relative;width:100%;aspect-ratio:16/9;background:var(--c-deco-lilac);border-radius:var(--radius-m);overflow:hidden}
.work-art .work-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.work-caption{display:flex;align-items:flex-start;gap:var(--sp-8);padding:var(--sp-8) 0 0}.work-caption-copy{min-width:0;flex:1}.work-caption h3{font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-normal);margin:0}.work-title{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-decoration:none}.work-caption p{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--c-text-sub);font-size:var(--fs-ui-meta);line-height:var(--lh-relaxed);margin:var(--sp-4) 0 0;font-weight:400;}
.work-singer-link{display:block;flex:none;width:var(--control-h);min-height:var(--control-h)}.work-singer-avatar{position:relative;display:grid;place-items:center;width:var(--sp-32);height:var(--sp-32);border-radius:50%;overflow:hidden;background:var(--c-bg-soft);color:var(--c-navy)}.work-singer-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.work-singer-avatar svg{width:var(--sp-24);height:var(--sp-24);fill:none;stroke:currentColor;stroke-width:1.8}
.work-tile a:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
.work-rating{display:inline-block;padding:var(--sp-4) var(--sp-8);border-radius:var(--radius-s);background:var(--c-bg-yellow);color:var(--c-gold-text);font-size:var(--fs-ui-meta);font-weight:800;margin-top:var(--sp-4)}
.thumb-empty{color:var(--c-navy)}.thumb-empty svg{width:var(--sp-32);height:var(--sp-32);fill:none;stroke:currentColor;stroke-width:1.8}
#load-more{display:block;width:fit-content;max-width:100%;margin-inline:auto;padding:var(--sp-4) var(--sp-12)}
body[data-page=awards] main#app{display:flex;flex-direction:column;gap:var(--sp-16)}
body[data-page=awards] main#app>h1{margin:0}
.awards-intro{margin:0;font-size:var(--fs-ui-body);font-weight:700}
#more-awards{width:fit-content;max-width:100%;align-self:center;justify-self:center;margin-inline:auto;padding:var(--sp-4) var(--sp-12)}
.awards-filters{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-12);border:1px solid var(--c-border);border-radius:var(--radius-l);background:var(--c-bg-soft)}
.awards-filters .field{margin:0}
.award-credit-avatars>.avatar,.award-credit-creator>.avatar{display:grid;place-items:center;color:var(--c-text-sub)}
.award-credit-creator>.avatar svg{width:var(--sp-16);height:var(--sp-16);fill:currentColor}
.award-credit-avatars>.avatar svg{width:var(--sp-20);height:var(--sp-20);fill:currentColor}
.viewer-award-person .avatar{width:var(--sp-32);height:var(--sp-32);border-radius:50%}
.viewer-award-person-copy{min-width:0}
.viewer-award-person-name{display:block}
.viewer-award-message .viewer-award-comment{white-space:pre-wrap}
.my-profile{display:flex;flex-direction:column;gap:var(--sp-12);padding:var(--sp-12);border:2px solid var(--c-border);background:linear-gradient(120deg,var(--c-bg-aqua),var(--c-white) 50%,var(--c-bg-pink));margin:0}
#my-profile-summary .profile{align-items:flex-start;margin:0}
#my-profile-summary .profile img,#my-profile-summary .profile .avatar{width:56px;height:56px;border:2px solid var(--c-white);box-shadow:0 0 0 2px var(--c-aqua)}
#my-profile-summary .my-profile-info{display:flex;flex-direction:column;gap:var(--sp-4)}
#my-profile-summary .my-profile-info a{font-size:var(--fs-ui-body);color:var(--c-text-sub)}
#my-profile-summary .my-profile-name{font-family:var(--font-heading);font-size:var(--fs-ui-heading);font-weight:900;margin:0}
#my-profile-summary .my-profile-label{font-size:var(--fs-ui-meta);font-weight:800;color:var(--c-text-sub)}
#profile-edit{align-self:flex-start;font-size:var(--fs-ui-meta);padding:var(--sp-4) var(--sp-8)}
.my-profile-info{padding-bottom:var(--sp-8)}
.participation-flow[data-role=creator]{--flow-color:var(--c-role-creator);--flow-bg:var(--c-bg-pink)}
.participation-flow[data-role=viewer]{--flow-color:var(--c-role-viewer);--flow-bg:var(--c-bg-aqua)}
.my-work-card-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-8)}
.my-work-card-heading h3{margin:0;color:var(--c-role-creator);font-size:var(--fs-ui-body)}
.my-work-status{display:inline-flex;align-items:center;min-height:var(--tag-h);padding:0 var(--sp-8);border-radius:var(--radius-pill);background:var(--c-navy);color:var(--c-white);font-size:var(--fs-ui-meta);font-weight:800;white-space:nowrap}
.my-work-status.is-pending{background:var(--c-bg-yellow);color:var(--c-gold-text);border:1px solid var(--c-yellow-border)}
.my-work-meta{font-size:var(--fs-ui-meta);font-weight:700;color:var(--c-text-sub);margin:0}
.my-work-members{padding:var(--sp-12);border-radius:var(--radius-m);background:var(--c-bg-soft);font-size:var(--fs-ui-meta)}
.my-work-member{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-8)}
.my-work-members h4{font-size:var(--fs-ui-meta);margin:0 0 var(--sp-8)}
.my-work-member span{font-size:var(--fs-ui-meta);font-weight:800;color:var(--c-role-viewer)}
.my-work-card .url-copy input{border:0;padding:0;background:transparent;font-size:var(--fs-ui-input);font-weight:400;font-family:var(--font-body);}
.my-work-card .actions{margin:0}.my-work-card .actions>button{width:100%}
.trending-works{margin:var(--sp-8) 0 var(--sp-12)}
.trending-art .work-thumb{height:100%;width:100%;object-fit:cover}
.my-status-section .award-design-guide{margin:0}
#award-work-results{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-2)}
.award-candidate-card{border:2px solid var(--c-role-viewer);border-radius:var(--radius-l);overflow:hidden;background:var(--c-white)}
.award-candidate-card[data-selected=true]{background:var(--c-bg-aqua)}
.award-candidate-select input{width:var(--sp-20);height:var(--sp-20);margin:0;accent-color:var(--c-role-viewer);flex-shrink:0;}
.award-candidate-copy strong{font-size:var(--fs-ui-body)}
.award-candidate-copy>span{font-size:var(--fs-ui-meta);font-weight:700;color:var(--c-role-viewer)}
.award-candidate-card .work-rating{margin:0;background:var(--c-bg-yellow)}
.award-candidate-memo{display:block;padding:var(--sp-8);border-radius:var(--radius-s);background:var(--c-bg-aqua);font-size:var(--fs-ui-meta);color:var(--c-role-viewer);white-space:pre-wrap;overflow-wrap:anywhere}
#award-slots .slot-empty{display:none}
#award-preview .award-grid{margin:0}
#award-registration-content{display:flex;flex-direction:column;gap:var(--sp-16)}
.awards-publication{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16);border:1px solid var(--c-border);border-radius:var(--radius-l);background:var(--c-white)}
.awards-publication-label{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--fs-ui-meta);font-weight:700;color:var(--c-text-sub);margin:0}
.awards-publication-label svg{width:var(--sp-20);height:var(--sp-20);fill:none;stroke:currentColor;stroke-width:1.6}
.awards-publication-date{font-size:var(--fs-ui-emphasis);font-weight:800;margin:0}
.awards-publication-note{font-size:var(--fs-ui-body);color:var(--c-text-sub);margin:0;border-top:1px solid var(--c-border);padding-top:var(--sp-8)}
.awards-publication-note span{display:block}
.awards-publication-status{color:var(--c-text-sub);font-size:var(--fs-ui-body);margin-left:var(--sp-4)}
body[data-page=mypage] main#app{display:flex;flex-direction:column;gap:var(--sp-20)}
body[data-page=mypage] main#app>h1{margin:0}
.view-tabs{margin:0}
.view-tabs a{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);font-size:var(--fs-ui-meta);padding:var(--sp-8);white-space:nowrap}
.view-tabs a small{font-size:var(--fs-ui-meta)}
.my-status-section>h2,#my-settings>h2{font-family:var(--font-heading);font-size:var(--fs-ui-heading);margin:0}
.my-status-section>h2{display:flex;justify-content:space-between;align-items:center}
.my-edition-label{font-family:var(--font-body);font-size:var(--fs-ui-meta);font-weight:700;color:var(--c-text-sub);border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-8);background:var(--c-bg-muted)}
.participation-flow{margin:0}
.participation-flow-disclosure{margin:0;padding:0;border:0}


#my-settings{display:flex;flex-direction:column;gap:var(--sp-16);padding-top:var(--sp-20);border-top:1px solid var(--c-border)}
#my-settings .my-disclosure{margin:0;padding:0}
.my-disclosure>summary{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-8) var(--sp-12);min-height:var(--control-h)}
.my-disclosure>summary::after{content:'+';font-size:var(--fs-18)}
.my-disclosure[open]>summary::after{content:'−'}
.my-disclosure>summary::-webkit-details-marker{display:none}
.my-disclosure>summary .notification-status{margin-left:auto;margin-right:var(--sp-8)}
.my-disclosure>.notification-settings{margin:0;border:0;padding:var(--sp-16);border-radius:0}
.work-information{margin:0;padding:0;border:0;background:transparent}
.work-information .account-row{padding:var(--sp-4) 0}
.work-information .account-row img,.work-information .account-row .avatar{width:var(--sp-32);height:var(--sp-32)}
.work-favorite-stars{display:flex;gap:var(--sp-4)}
.work-favorite-star{width:var(--control-h);height:var(--control-h);border:0;background:transparent;color:var(--c-border-input);padding:var(--sp-4)}
.work-favorite-star svg{width:var(--sp-32);height:var(--sp-32);fill:currentColor;stroke:currentColor;stroke-width:1}
.work-favorite-star[aria-pressed=true]{color:var(--c-star)}
body[data-page=invitation] main#app{display:flex;flex-direction:column;gap:var(--sp-20)}
.collab-card .work-thumb{border-radius:var(--radius-m);width:100%;aspect-ratio:16/9;object-fit:cover}
.collab-card .creator-profile{font-size:var(--fs-ui-body)}
.collab-confirm[hidden]{display:none}
.creator-top-callout:has(>.creator-button.primary){--creator-role-color:var(--c-role-collaborator);--creator-role-bg:var(--c-bg-lilac)}
.creator-top-callout>.creator-button.primary{justify-content:center;background:var(--c-role-collaborator);border-color:var(--c-role-collaborator);color:var(--c-white)}
@media(max-width:360px){.site-listen-link .listen-label{display:none}.production-header .site-brand-name{font-size:var(--fs-11)}}

body[data-page=participation] main#app{display:flex;flex-direction:column;gap:var(--sp-20);padding-top:var(--sp-12);padding-bottom:0}
body[data-page=participation] main#app>h1.page-title-ribbon{margin:0}
.participation-flow[data-role=collaborator]{--flow-color:var(--c-role-collaborator);--flow-bg:var(--c-bg-lilac)}
body[data-page=participation] footer#site-footer{padding-top:var(--sp-24)}
body[data-page=participation] .page-return-links{gap:var(--sp-12);margin:0}
body[data-page=participation] .page-return-links a:first-child{justify-content:center;text-decoration:none;border:2px solid var(--c-navy);border-radius:var(--radius-m);background:var(--c-white);font-size:var(--fs-ui-body);font-weight:800}
body[data-page=participation] .page-return-links a:last-child{align-self:center;font-weight:800}

.award-closed{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-16);border-radius:var(--radius-l);border:2px solid var(--c-role-viewer);background:var(--c-bg-aqua)}
.award-closed h3,.award-closed p{margin:0}.award-closed h3{font-size:var(--fs-ui-heading);font-weight:800}.award-closed p{font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed)}
.award-closed a.button{min-height:var(--control-h-lg);border-color:var(--c-role-viewer);color:var(--c-role-viewer)}
.history-dialog .award-grid{grid-template-columns:minmax(0,1fr)}


.award-candidate-card{font-size:var(--fs-ui-emphasis);line-height:var(--lh-default)}
.award-candidate-copy strong{font-weight:800}
.award-candidate-copy .award-candidate-provider{display:inline-flex;align-items:center;min-height:var(--tag-h);padding:0 var(--sp-8);border-radius:var(--radius-s);border:1px solid var(--c-role-viewer);background:var(--c-white);font-size:var(--fs-ui-meta);font-weight:800}
.award-candidate-copy .award-candidate-provider[data-provider=niconico]{background:var(--c-role-viewer);color:var(--c-white)}
.award-candidate-memo{font-weight:700;line-height:var(--lh-relaxed)}
.award-candidate-memo>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}


.member-rows .member-row{display:flex;flex-direction:column;gap:var(--sp-4)}
.member-rows .collaborator-input-profile{color:var(--c-role-creator)}

/* PC layout from 960px (mockup/DESIGN.md). Phone widths keep the rules above, and the column wrappers stay transparent there.
   Wide pages use the content width only while their own layout is shown, not the login, consent or access forms.
   Card grids add columns only while each card keeps its phone width (work tiles 172px, award and creator cards 288px);
   the award editor (#award-slots) stays one card per row. */
.list-layout,.list-layout-side,.list-layout-main,.mypage-columns,.mypage-columns-side,.mypage-columns-main{display:contents}
.list-layout-side>h1,.mypage-columns-side>h1{margin:0}
/* マイページの項目メニュー（PCだけ。モックの MyPage.dc.html と同じ見た目） */
.my-page-menu{display:none}
@media(min-width:960px){
/* 作品ページ：YouTubeの動画再生ページに合わせ、左にプレイヤーと作品情報、右に400pxの選定メモとおすすめ（app.jsのplaceWorkSideが移す）。
   プレイヤーの列は画面の幅に合わせて広げ、動画の高さが画面に収まる幅（200px＝ヘッダー・操作バー・余白）を上限にする */
body[data-page=work] .work-page{display:grid;grid-template-columns:min(calc(100% - 400px - var(--sp-32)),calc((100vh - 200px) * 16 / 9)) minmax(400px,1fr);gap:var(--sp-32);align-items:start}
body[data-page=work] #app:has(>.work-page){padding-inline:var(--sp-16)}
body[data-page=work] .work-page-main{display:flex;flex-direction:column;gap:var(--sp-8);min-width:0}body[data-page=work] .work-page-main>[data-work-pane=overview]{padding-inline:var(--sp-16)}body[data-page=work] .work-page-side{display:flex;flex-direction:column;gap:var(--sp-12);min-width:0}
body[data-page=work] .work-page-side>*{margin-top:0;margin-bottom:0}body[data-page=work] .work-page-side .work-private-memo{margin:0}
body[data-page=work] .work-page-side #work-panel-recommendations{margin:0;padding-bottom:0}body[data-page=work] .work-page-side .work-recommendations h2{margin:0 0 var(--sp-12);font-size:var(--fs-ui-heading)}body[data-page=work] .work-page-side .work-recommendations .work-grid{grid-template-columns:minmax(0,1fr);gap:var(--sp-12)}
body[data-page=work] .work-page-side .work-tile{display:grid;grid-template-columns:168px minmax(0,1fr);gap:var(--sp-8);align-items:start}body[data-page=work] .work-page-side .work-art{border-radius:var(--radius-m)}body[data-page=work] .work-page-side .work-caption{padding:0}body[data-page=work] .work-page-side .work-singer-link{display:none}body[data-page=work] .work-page-side .work-recommendations-actions{padding-inline:0}
.production-header{max-width:none}
main#app,#app-status,#app-error{max-width:var(--layout-reading)}
body:is([data-page=home],[data-page=list],[data-page=work],[data-page=mypage],[data-page=awards],[data-page=creators]) :is(main#app,#app-status,#app-error){max-width:var(--layout-max)}
body:is([data-page=home],[data-page=list],[data-page=work],[data-page=mypage],[data-page=awards],[data-page=creators]) main#app:not([aria-busy=true]):not(:has(>.home-main,>.list-layout,>.work-page,>.mypage-columns,>.awards-publication,>.award-view-tabs,>#creator-search-form)),body:is([data-page=home],[data-page=list],[data-page=work],[data-page=mypage],[data-page=awards],[data-page=creators]) main#app:not([aria-busy=true]):not(:has(>.home-main,>.list-layout,>.work-page,>.mypage-columns,>.awards-publication,>.award-view-tabs,>#creator-search-form))~:is(#app-status,#app-error){max-width:var(--layout-reading)}
body[data-page=participation] :is(main#app,#app-status,#app-error){max-width:var(--layout-max)}
main#app:has(>.mypage-columns),main#app:has(>.mypage-columns)~:is(#app-status,#app-error){max-width:var(--layout-max)}
footer#site-footer{max-width:var(--layout-reading)}
footer#site-footer.home-footer{max-width:none;padding-right:max(var(--sp-16),calc((100% - var(--layout-max)) / 2 + var(--sp-16)));padding-left:max(var(--sp-16),calc((100% - var(--layout-max)) / 2 + var(--sp-16)))}
.home-main{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-24)}
.home-main>*{grid-column:1/-1}.home-main .hero-logo{justify-self:center;width:780px;height:360px}.home-main .hero-heading{font-size:var(--fs-28)}.home-main .hero-heading span{display:inline}
.home-main>.event-countdown{justify-self:center;box-sizing:border-box;width:100%;max-width:var(--layout-reading)}
/* 参加作品一覧：左のサイドバー（360px）に見出し・視聴状況・検索操作（app.jsがPCでサイドバーへ移す）、右に毎時ピックアップ（注目と発掘の2列）と作品カード */
.list-layout{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:var(--sp-32);align-items:start}
.list-layout-side{position:sticky;top:74px;display:flex;flex-direction:column;gap:var(--sp-16);max-height:calc(100vh - 74px - var(--sp-16));overflow-y:auto;overscroll-behavior:contain}.list-layout-main{display:flex;flex-direction:column;gap:var(--sp-16);min-width:0}
.list-layout-side>h1{align-self:stretch}.list-layout .catalogue-summary{margin:0}.list-layout .work-search-controls{display:flex;flex-direction:column;gap:var(--sp-8);padding:var(--sp-12) 0;border-radius:var(--radius-l);background:var(--c-bg-lilac)}
body:is([data-page=list],[data-page=work]) .list-layout .trending-works{margin:0}body:is([data-page=list],[data-page=work]) .list-layout .work-browse{scroll-margin-top:var(--sp-16);display:flex;flex-direction:column;gap:var(--sp-12);margin:0;padding:var(--sp-24) 0 0;border:0;border-top:1px solid var(--c-border);background:none}body:is([data-page=list],[data-page=work]) .list-layout .work-results-heading{display:block;margin-bottom:var(--sp-4);font-family:var(--font-heading);font-size:var(--fs-ui-heading);font-weight:800;line-height:var(--lh-normal)}body:is([data-page=list],[data-page=work]) .list-layout #work-recommendations{margin:0;padding-bottom:0}body:is([data-page=list],[data-page=work]) .list-layout .work-recommendations .work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.list-layout-main>.help{margin:0}.list-layout .trending-pickups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-16);align-items:start}
body:is([data-page=list],[data-page=work]) #work-results .work-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mypage-columns{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:var(--sp-32);align-items:start}.mypage-columns-main{display:flex;flex-direction:column;gap:var(--sp-20);min-width:0}
.mypage-columns-side{display:flex;flex-direction:column;gap:var(--sp-20);min-width:0}
.my-page-menu{display:flex;flex-direction:column;padding:var(--sp-8) 0;border:1px solid var(--c-border);border-radius:var(--radius-l);background:var(--c-white)}.my-page-menu a{--menu-color:var(--c-role-common);display:flex;align-items:center;min-height:var(--control-h);padding:0 var(--sp-16);border-left:2px solid var(--menu-color);color:var(--menu-color);font-size:var(--fs-ui-body);font-weight:800;line-height:var(--lh-normal);text-decoration:none}.my-page-menu a+a{margin-top:var(--sp-2)}.my-page-menu a:hover{background:var(--c-bg-soft)}.my-page-menu a:focus-visible{outline:var(--focus-ring);outline-offset:calc(-1 * var(--focus-offset))}.my-page-menu a[data-role=creator]{--menu-color:var(--c-role-creator)}.my-page-menu a[data-role=viewer]{--menu-color:var(--c-role-viewer)}.my-page-menu a[data-role=collaborator]{--menu-color:var(--c-role-collaborator)}
.award-grid:not(#award-slots){grid-template-columns:repeat(auto-fill,minmax(288px,1fr))}
body[data-page=awards] main#app{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-20);align-items:start;align-content:start}body[data-page=awards] main#app>*{grid-column:1/-1}
body[data-page=awards] main#app>.awards-publication{grid-column:1/-1;max-width:50%}
body[data-page=awards] .awards-filters{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--sp-16);align-items:end}
body[data-page=awards] #public-awards{grid-template-columns:minmax(0,1fr);gap:var(--sp-32)}body[data-page=awards] #more-awards{justify-self:center;width:fit-content;max-width:100%}
body[data-page=creators] main#app{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:var(--sp-20) var(--sp-32);align-items:start;align-content:start}body[data-page=creators] main#app>*{grid-column:1/-1}
body[data-page=creators] main#app>#creator-search-form{grid-column:1;grid-row:span 2;position:sticky;top:74px}body[data-page=creators] main#app>:is(#creator-result-count,#creator-catalogue){grid-column:2}
body[data-page=creators] #creator-catalogue{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));align-items:start}body[data-page=creators] #creator-catalogue>.creator-empty{grid-column:1/-1}
body[data-page=creators] main#app>.creator-top-callout{grid-column:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-8) var(--sp-24);align-items:center}body[data-page=creators] main#app>.creator-top-callout>.creator-button{grid-column:2;grid-row:1/3}
}

body:is([data-page=list],[data-page=work]) .trending-works{margin-right:calc(-1 * var(--sp-16));margin-left:calc(-1 * var(--sp-16));padding-right:0;padding-left:0;border-right:0;border-left:0;border-radius:0}
body[data-page=list] main#app:has(>.list-layout){max-width:none}
@media(min-width:960px){body[data-page=work] main#app:has(>.work-page){max-width:none}}

/* PCの上余白：ヘッダー下端から帯の上端まで --sp-20（8＋8＋帯の上マージン4）。マイページは左右の列の上端をそろえ、空の通知枠は列の間隔を作らない */
@media(min-width:960px){/* pc-top-spacing */
main#app{padding-top:var(--sp-8)}
main#app:has(>.mypage-columns){padding-top:var(--sp-12)}
body main#app .mypage-columns-side>h1.page-title-ribbon{margin-top:0}
.mypage-columns-main>#award-removal-notices:not(.award-removal-notices){display:none}
/* /pc-top-spacing */}

/* 作品ページのPC：動画下の操作バーを大きめ（高さ --control-h・SVG --sp-24）にする */
@media(min-width:960px){/* work-controls */
body[data-page=work]{--mini-player-controls-height:var(--control-h)}
body[data-page=work] .site-playback-controls .site-playback-control svg{width:var(--sp-24);height:var(--sp-24)}
/* /work-controls */}

/* PCで本文を画面いっぱいに並べる参加作品一覧・作品ページは、ヘッダーの中身も同じ幅にして端をそろえる */
@media(min-width:960px){/* pc-header-width */
body:is([data-page=list],[data-page=work]) .site-header-row{max-width:none}
/* /pc-header-width */}

/* PCの10選登録ダイアログ：選んだ作品を1作品1行（左にサムネイル・歌い手・作品名、右にコメント、下に匿名設定とボタンを1行） */
@media(min-width:960px){/* pc-ten-edit-rows */
#award-slots.ten-selection-grid{grid-template-columns:minmax(0,1fr)}
#award-slots>.ten-selection{display:grid;grid-template-columns:168px minmax(0,1fr);grid-template-areas:"work comment" "singers comment" "title comment" "privacy privacy";column-gap:var(--sp-16);row-gap:var(--sp-8);align-items:start}
#award-slots>.ten-selection>.ten-selection-work{grid-area:work}
#award-slots>.ten-selection>.ten-selection-singers{grid-area:singers}
#award-slots>.ten-selection>.ten-selection-title{grid-area:title;margin:0}
#award-slots>.ten-selection>.ten-selection-comment{grid-area:comment}
#award-slots>.ten-selection>.award-edit-privacy{grid-area:privacy}
#award-slots .award-edit-privacy{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-8) var(--sp-16)}
#award-slots .award-edit-privacy .actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:var(--sp-8)}
/* /pc-ten-edit-rows */}

/* PCの参加作品ダイアログ：Xアカウントの入力行を右に寄せず、左端から横幅いっぱいに置く（app.css の .member-row は align-items:end） */
@media(min-width:960px){/* pc-member-row */
.member-rows .member-row{align-items:stretch}
/* /pc-member-row */}
/* toast */
body #app-status[popover],body #app-error[popover]{position:fixed;inset:auto var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom)) var(--sp-16);box-sizing:border-box;width:min(var(--layout-reading),calc(100% - var(--sp-32)));margin:0 auto;padding:var(--sp-12) var(--sp-16);overflow:auto;border:1px solid var(--c-success-border);border-radius:var(--radius-m);background:var(--c-success-bg);color:var(--c-success);font-size:var(--fs-ui-body);font-weight:700;line-height:var(--lh-relaxed);box-shadow:var(--shadow-float);cursor:pointer}
body #app-error[popover]{border-color:var(--c-error);background:var(--c-error-bg);color:var(--c-error)}
/* /toast */