/* Coloring detail: one shared surface, a square preview and a clear action column. */
.coloring-page{--detail-ink:#303247;--detail-muted:#6d7082;--detail-line:#e6e3ee;--detail-accent:#7654b7}
.coloring-main{padding-top:18px;padding-bottom:40px}
.coloring-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:20px;color:var(--detail-muted);font-size:14px;line-height:1.6}
.coloring-breadcrumbs a:hover{color:var(--detail-accent);text-decoration:underline;text-underline-offset:3px}
.coloring-breadcrumbs>[aria-current]{color:#4c4e62}
.coloring-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:start;gap:32px;padding:24px;border:1px solid var(--detail-line);border-radius:24px;background:#fff;box-shadow:0 6px 24px #32304704}
.drawing-preview{min-width:0;width:100%;aspect-ratio:1;align-self:start;padding:10px;border:1px solid #e8e2f1;border-radius:18px;background:#f3f0f9}
.drawing-sheet{position:relative;width:100%;height:100%;border:1px solid #e9e5ef;border-radius:10px;background:#fff;box-shadow:0 4px 14px #3e315c06;overflow:hidden}
.drawing-sheet img{position:absolute;inset:16px;display:block;width:calc(100% - 32px);height:calc(100% - 32px);object-fit:contain}
.drawing-info{min-width:0;display:flex;flex-direction:column;gap:16px;padding:4px 0}
.drawing-info h1{margin:0;color:var(--detail-ink);font-size:clamp(26px,2.25vw,32px);font-weight:800;letter-spacing:-.8px;line-height:1.23;text-wrap:pretty;overflow-wrap:break-word}
.drawing-description{margin:0;max-width:none;color:var(--detail-muted);font-size:16px;line-height:1.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.drawing-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.drawing-tags span{padding:4px 10px;border-radius:7px;background:#eee9f8;color:#70569b;font-size:14px;line-height:1.5}
.drawing-tags span+span{background:#edf3ef;color:#526f5d}
.coloring-vote{min-width:0;margin:0;padding:0;border:0}
.coloring-vote legend{padding:0;margin:0 0 3px;font-size:14px;font-weight:650;color:#55586c}
.rating-control{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.vote-stars{display:flex;gap:0;width:max-content;max-width:100%}
.vote-star{position:relative;display:grid;place-items:center;width:40px;height:44px;border-radius:8px;cursor:pointer;transition:background .15s}
.vote-star input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.vote-star span{font-size:29px;line-height:1;pointer-events:none;color:transparent;background:linear-gradient(to right,#e4a000 var(--star-fill,0%),#d9d5e2 var(--star-fill,0%));background-clip:text;-webkit-background-clip:text}
.vote-star:hover{background:#f4f0fa}
.vote-star:has(input:focus-visible){outline:3px solid var(--detail-accent);outline-offset:2px}
.rating-summary{display:flex;align-items:baseline;gap:5px;color:var(--detail-muted);font-size:14px}
.rating-summary strong{color:var(--detail-ink);font-size:16px}
.vote-status,.action-status,#related-status{font-size:14px;color:var(--detail-muted);margin:0;line-height:1.5}
.vote-status:empty,.action-status:empty,#related-status:empty{display:none}
.drawing-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.drawing-actions .button,.drawing-actions .outline-button{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:48px;margin:0;padding:11px 14px;border-radius:11px;font-size:15px;font-weight:700;line-height:1.4;text-align:center;transition:background .15s,box-shadow .15s}
.drawing-actions .button{background:var(--detail-accent);color:white;border:1px solid var(--detail-accent);box-shadow:0 3px 8px #7654b71c}
.drawing-actions .button:hover{background:#63439e;border-color:#63439e;box-shadow:0 4px 12px #7654b728}
.drawing-actions .outline-button{background:white;color:#7050a8;border:1px solid #d9ceea;box-shadow:none}
.drawing-actions .outline-button:hover{background:#f7f4fc;border-color:#baa6d8}
.drawing-actions svg{width:19px;height:19px;flex:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.drawing-actions a[aria-busy=true]{opacity:.7;cursor:progress}
.drawing-about{margin:2px 0 0;padding-top:16px;border-top:1px solid #eeebf3}
.drawing-about h2{margin:0 0 8px;color:var(--detail-ink);font-size:18px;font-weight:750;line-height:1.4;letter-spacing:-.2px}
.drawing-about p{margin:0;color:var(--detail-muted);font-size:16px;line-height:1.65}
.coloring-instructions{margin-top:2px;padding-top:14px}
.related-colorings{margin-top:34px}
.related-heading{margin-bottom:20px}
.related-heading h2{margin:0 0 6px;color:var(--detail-ink);font-size:28px;font-weight:800;line-height:1.25;letter-spacing:-.6px}
.related-heading p{margin:0;color:var(--detail-muted);font-size:14px;line-height:1.6}
.related-colorings .card-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;align-items:stretch}
.related-colorings .coloring-card{display:flex;flex-direction:column;min-width:0;height:100%}
.related-colorings .coloring-card[hidden]{display:none!important}
.related-colorings .card-body{display:flex;flex:1;flex-direction:column}
.related-colorings .card-body h3{min-height:2.8em}
.related-colorings .card-rating{margin-top:auto}
.related-colorings .card-open{display:block;text-align:center}
.related-pagination{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:24px;padding-top:20px;border-top:1px solid var(--detail-line)}
.related-pagination button{min-width:40px;height:40px;padding:0 12px;border:1px solid #e4deef;border-radius:10px;background:white;color:#8a7aa6;font-size:14px}
.related-pagination button[aria-current=page]{background:#7e5bb1;border-color:#7e5bb1;color:white;box-shadow:0 3px 8px #7254b51a}
.related-pagination button:disabled{opacity:.35;cursor:default}
.related-pagination button:not(:disabled):not([aria-current]):hover{background:#eee9f7}
.related-page-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media screen and (min-width:1400px){.coloring-layout{gap:40px;padding:28px}.drawing-info{gap:18px}}
@media screen and (min-width:701px) and (max-width:1000px){
 .coloring-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;padding:18px}
 .drawing-info{gap:12px}
 .drawing-info h1{font-size:26px}
 .drawing-actions{grid-template-columns:1fr}
}
@media screen and (max-width:1000px){.related-colorings .card-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media screen and (max-width:700px){
 .coloring-main{padding-top:12px;padding-bottom:28px}
 .coloring-breadcrumbs{margin-bottom:16px;font-size:14px}
 .coloring-layout{grid-template-columns:1fr;gap:20px;padding:14px;border-radius:20px}
 .drawing-preview{max-width:400px;justify-self:center;padding:8px;border-radius:14px}
 .drawing-sheet{border-radius:8px}
 .drawing-sheet img{inset:12px;width:calc(100% - 24px);height:calc(100% - 24px)}
 .drawing-info{padding:0;gap:14px}
 .drawing-description{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
 .drawing-info h1{font-size:27px}
 .drawing-actions .button,.drawing-actions .outline-button{padding:11px 8px;font-size:14px;gap:7px}
 .related-colorings{margin-top:28px}
 .related-heading h2{font-size:25px}
 .related-colorings .card-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
}
@media screen and (max-width:360px){.drawing-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.vote-star,.drawing-actions .button,.drawing-actions .outline-button{transition:none}}
@media print{
 body.coloring-page{padding:0;background:white}
 body.coloring-page>.site-shell{display:block!important;background:white;box-shadow:none;margin:0;padding:0;width:100%;max-width:none;border-radius:0;overflow:visible}
 .coloring-page .site-shell>*:not(main),.coloring-main>*:not(.coloring-layout),.coloring-layout>*:not(.drawing-preview){display:none!important}
 .coloring-main,.coloring-layout,.drawing-preview,.drawing-sheet{display:block!important;position:static;margin:0!important;padding:0!important;border:0!important;background:white!important;box-shadow:none!important;width:100%!important;max-width:none!important;height:auto;min-height:0;max-height:none;border-radius:0;aspect-ratio:auto;overflow:visible}
 .drawing-sheet img{position:static;display:block;width:100%;height:265mm;object-fit:contain}
 @page{size:A4;margin:12mm}
}